@levi-gemcommerce/analytics 1.0.0-dev.12 → 1.0.0-dev.14

package/dist/esm/index.mjs

@@ -1,14 +1,15 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@tanstack/react-query';
+import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup } from '@shopify/polaris';
+import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
 import dayjs from 'dayjs';
+export { default as dayjs } from 'dayjs';
 import quarterOfYear from 'dayjs/plugin/quarterOfYear.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import utc from 'dayjs/plugin/utc.js';
-import React, { useMemo, useCallback, useState, useEffect, forwardRef, Fragment as Fragment$1, useRef, useImperativeHandle, createContext, useContext } from 'react';
-import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip, Button, BlockStack, Checkbox, RadioButton, Popover, ActionList, Link, SkeletonDisplayText, List, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup, Card, SkeletonBodyText } from '@shopify/polaris';
 import { useTranslation } from 'react-i18next';
 import { PolarisVizProvider, LineChart, DonutChart } from '@shopify/polaris-viz';
+import '@tanstack/react-query';
 
 var EMetricKey;
 (function (EMetricKey) {
@@ -124,53 +125,12 @@ const ANALYTICS_METRIC_TOOLTIP = {
     },
 };
 
-const NONE_VALUE = 'None';
-const PLACEHOLDER_VALUE$1 = '-';
-
-const TOTALS_SUFFIX = '___totals';
-const COMPARE_PREFIX = 'comparison___';
-const COMPARE_SUFFIX = '___previous_period';
-const COMPARE_TOTALS_SUFFIX = `${COMPARE_SUFFIX}${TOTALS_SUFFIX}`;
-
-const OPERATOR_IS = 'is';
-
-var EAnalyticDataType;
-(function (EAnalyticDataType) {
-    EAnalyticDataType["DATE"] = "DATE";
-    EAnalyticDataType["ARRAY"] = "ARRAY";
-    EAnalyticDataType["OBJECT"] = "OBJECT";
-    EAnalyticDataType["STRING"] = "STRING";
-    EAnalyticDataType["INTEGER"] = "INTEGER";
-    EAnalyticDataType["CURRENCY"] = "CURRENCY";
-    EAnalyticDataType["PERCENT"] = "PERCENT";
-    EAnalyticDataType["DURATION"] = "DURATION";
-    EAnalyticDataType["MONTH"] = "MONTH_TIMESTAMP";
-    EAnalyticDataType["QUARTER"] = "QUARTER_TIMESTAMP";
-    EAnalyticDataType["DAY"] = "DAY_TIMESTAMP";
-    EAnalyticDataType["WEEK"] = "WEEK_TIMESTAMP";
-    EAnalyticDataType["YEAR"] = "YEAR_TIMESTAMP";
-    EAnalyticDataType["HOUR"] = "HOUR_TIMESTAMP";
-})(EAnalyticDataType || (EAnalyticDataType = {}));
-var EAnalyticColumnKey;
-(function (EAnalyticColumnKey) {
-    EAnalyticColumnKey["CAMPAIGNS"] = "experiments";
-    EAnalyticColumnKey["VISITOR_ITEMS"] = "visitor_items";
-    EAnalyticColumnKey["DEVICE_ITEMS"] = "device_items";
-    EAnalyticColumnKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
-})(EAnalyticColumnKey || (EAnalyticColumnKey = {}));
-
-var EAnalyticMode$1;
+var EAnalyticMode;
 (function (EAnalyticMode) {
     EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
     EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
     EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
-})(EAnalyticMode$1 || (EAnalyticMode$1 = {}));
-
-var EAnalyticSource;
-(function (EAnalyticSource) {
-    EAnalyticSource["SESSIONS"] = "sessions";
-    EAnalyticSource["SALES"] = "sales";
-})(EAnalyticSource || (EAnalyticSource = {}));
+})(EAnalyticMode || (EAnalyticMode = {}));
 
 var EVisitorType;
 (function (EVisitorType) {
@@ -195,182 +155,108 @@ var ETrafficSourceType;
     ETrafficSourceType["SMS"] = "sms";
 })(ETrafficSourceType || (ETrafficSourceType = {}));
 
-var EComparisonOperator;
-(function (EComparisonOperator) {
-    EComparisonOperator["EQ"] = "=";
-    EComparisonOperator["IN"] = "IN";
-    EComparisonOperator["LIKE"] = "LIKE";
-})(EComparisonOperator || (EComparisonOperator = {}));
-var EGroupOperator;
-(function (EGroupOperator) {
-    EGroupOperator["OR"] = "OR";
-    EGroupOperator["AND"] = "AND";
-})(EGroupOperator || (EGroupOperator = {}));
+const TARGET_VISITOR = [
+    { value: EVisitorType.NEW, label: 'New' },
+    { value: EVisitorType.RETURNING, label: 'Returning' },
+];
+const TARGET_DEVICES = [
+    { value: EDeviceType.DESKTOP, label: 'Desktop' },
+    { value: EDeviceType.TABLET, label: 'Tablet' },
+    { value: EDeviceType.MOBILE, label: 'Mobile' },
+];
+const TARGET_CHANNEL = [
+    { value: ETrafficSourceType.DIRECT, label: 'Direct' },
+    { value: ETrafficSourceType.EMAIL, label: 'Email' },
+    { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
+    { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
+    { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
+    { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
+    { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
+    { value: ETrafficSourceType.SMS, label: 'SMS' },
+];
 
-var EFilterField;
-(function (EFilterField) {
-    EFilterField["DEVICE"] = "device";
-    EFilterField["DEVICES"] = "devices";
-    EFilterField["VISITOR"] = "visitor_type";
-    EFilterField["VISITORS"] = "visitor_types";
-    EFilterField["TRAFFIC_SOURCE"] = "traffic_source";
-    EFilterField["TRAFFIC_SOURCES"] = "traffic_sources";
-    EFilterField["VERSION"] = "version";
-    EFilterField["VERSIONS"] = "versions";
-    EFilterField["SINGLE_PAGE"] = "page_path";
-    EFilterField["LIST_PAGE"] = "page_paths";
-    EFilterField["GROUP_CAMPAIGN_ITEM"] = "group_campaign_item";
-    EFilterField["GROUP_CAMPAIGN_ITEMS"] = "group_campaign_items";
-    EFilterField["SINGLE_CAMPAIGN"] = "experiment_id";
-    EFilterField["GROUP_CAMPAIGN"] = "experiment_group_id";
-    EFilterField["CAMPAIGN_VERSION_ID"] = "version_id";
-    EFilterField["GROUP_CAMPAIGN_VERSION_ID"] = "group_version_id";
-})(EFilterField || (EFilterField = {}));
+const CAMPAIGN_BACKGROUND_MAIN = {
+    ORIGIN: '#2C7DFF',
+    VARIANT: '#F34A70',
+};
 
-var EOperatorField;
-(function (EOperatorField) {
-    EOperatorField["DEVICE_OPERATOR"] = "deviceOperator";
-    EOperatorField["VISITOR_OPERATOR"] = "visitorOperator";
-    EOperatorField["TRAFFIC_SOURCE_OPERATOR"] = "trafficSourceOperator";
-    EOperatorField["VERSION_OPERATOR"] = "versionOperator";
-    EOperatorField["PAGE_OPERATOR"] = "pageOperator";
-    EOperatorField["CAMPAIGN_ITEM_OPERATOR"] = "campaignItemOperator";
-})(EOperatorField || (EOperatorField = {}));
+const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
+const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
+const CHART_MIN_HEIGHT = 228;
+const SERIES_COLORS = {
+    current: 'rgba(64, 176, 230, 1)',
+    comparison: 'rgba(161, 202, 231, 1)',
+    all: ['#2C7DFF', '#F34A70'],
+};
+const TREND_TONE = {
+    POSITIVE: '#007F5F',
+    NEUTRAL: '#4A4A4A',
+};
+const PLACEHOLDER_VALUE$1 = '-';
 
-/**
- * Controls which totals columns are appended to the query result.
- *
- * - NONE   → no totals, GROUP BY only.
- * - TOTALS → adds `<metric>___totals` (grand total only). Use with single-dimension GROUP BY.
- * - ALL    → adds subtotals per dimension group + grand total. Use with multi-dimension GROUP BY.
- */
-var EGroupWithClause;
-(function (EGroupWithClause) {
-    EGroupWithClause["NONE"] = "";
-    EGroupWithClause["TOTALS"] = "TOTALS";
-    EGroupWithClause["ALL"] = "WITH GROUP_TOTALS, TOTALS";
-})(EGroupWithClause || (EGroupWithClause = {}));
+const DEFAULT_CURRENCY_ANALYTIC = 'USD';
 
-var EOrderDirectionType;
-(function (EOrderDirectionType) {
-    EOrderDirectionType["ASC"] = "ASC";
-    EOrderDirectionType["DESC"] = "DESC";
-})(EOrderDirectionType || (EOrderDirectionType = {}));
+var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
 
-var EPageMetric;
-(function (EPageMetric) {
-    EPageMetric["PAGE_ITEMS"] = "page_items";
-    EPageMetric["PAGE_PATHS"] = "page_paths";
-})(EPageMetric || (EPageMetric = {}));
-var EPageDimension;
-(function (EPageDimension) {
-    EPageDimension["PAGE_PATH"] = "page_path";
-})(EPageDimension || (EPageDimension = {}));
-var EPageField;
-(function (EPageField) {
-    EPageField["SHOPIFY_PAGE_ID"] = "shopify_page_id";
-    EPageField["LOCATION_PATH"] = "location_path";
-    EPageField["PAGE_TYPE"] = "page_type";
-    EPageField["PAGE_TITLE"] = "page_title";
-    EPageField["PAGE_PATH"] = "page_path";
-    EPageField["TEMPLATE_SUFFIX"] = "template_suffix";
-})(EPageField || (EPageField = {}));
+var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
+  }));
+};
+SvgArrowRightIcon.displayName = "ArrowRightIcon";
 
-var ERowReaderMode;
-(function (ERowReaderMode) {
-    ERowReaderMode["DEFAULT"] = "DEFAULT";
-    ERowReaderMode["COMPARISON"] = "COMPARISON";
-    ERowReaderMode["TOTALS"] = "TOTALS";
-    ERowReaderMode["COMPARISON_TOTALS"] = "COMPARISON_TOTALS";
-})(ERowReaderMode || (ERowReaderMode = {}));
+var SvgCalendarIcon = function SvgCalendarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
+  }));
+};
+SvgCalendarIcon.displayName = "CalendarIcon";
 
-var ETimeDimension;
-(function (ETimeDimension) {
-    ETimeDimension["HOUR"] = "hour";
-    ETimeDimension["DAY"] = "day";
-    ETimeDimension["WEEK"] = "week";
-    ETimeDimension["MONTH"] = "month";
-    ETimeDimension["QUARTER"] = "quarter";
-    ETimeDimension["YEAR"] = "year";
-})(ETimeDimension || (ETimeDimension = {}));
+var SvgCheckIcon = function SvgCheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
+  }));
+};
+SvgCheckIcon.displayName = "CheckIcon";
 
-({
-    [ERowReaderMode.DEFAULT]: { prefix: '', suffix: '' },
-    [ERowReaderMode.COMPARISON]: { prefix: COMPARE_PREFIX, suffix: COMPARE_SUFFIX },
-    [ERowReaderMode.TOTALS]: { prefix: '', suffix: TOTALS_SUFFIX },
-    [ERowReaderMode.COMPARISON_TOTALS]: { prefix: COMPARE_PREFIX, suffix: COMPARE_TOTALS_SUFFIX },
-});
+var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
+  }));
+};
+SvgChevronDownIcon.displayName = "ChevronDownIcon";
 
-EGroupOperator.OR;
+var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
+  }));
+};
+SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
-[
-    {
-        operator: EOperatorField.DEVICE_OPERATOR,
-        singleField: EFilterField.DEVICE,
-        multiField: EFilterField.DEVICES,
-        fieldName: EFilterField.DEVICE,
-    },
-    {
-        operator: EOperatorField.VISITOR_OPERATOR,
-        singleField: EFilterField.VISITOR,
-        multiField: EFilterField.VISITORS,
-        fieldName: EFilterField.VISITOR,
-    },
-    {
-        operator: EOperatorField.TRAFFIC_SOURCE_OPERATOR,
-        singleField: EFilterField.TRAFFIC_SOURCE,
-        multiField: EFilterField.TRAFFIC_SOURCES,
-        fieldName: EFilterField.TRAFFIC_SOURCE,
-    },
-    {
-        operator: EOperatorField.VERSION_OPERATOR,
-        singleField: EFilterField.VERSION,
-        multiField: EFilterField.VERSIONS,
-        fieldName: EFilterField.VERSION,
-    },
-    {
-        operator: EOperatorField.PAGE_OPERATOR,
-        singleField: EFilterField.SINGLE_PAGE,
-        multiField: EFilterField.LIST_PAGE,
-        fieldName: EFilterField.SINGLE_PAGE,
-    },
-    {
-        operator: EOperatorField.CAMPAIGN_ITEM_OPERATOR,
-        singleField: EFilterField.GROUP_CAMPAIGN_ITEM,
-        multiField: EFilterField.GROUP_CAMPAIGN_ITEMS,
-        condition: EFilterField.GROUP_CAMPAIGN,
-        fieldName: EFilterField.SINGLE_CAMPAIGN,
-    },
-    {
-        operatorVal: OPERATOR_IS,
-        singleField: EFilterField.SINGLE_CAMPAIGN,
-        multiField: EFilterField.GROUP_CAMPAIGN,
-    },
-];
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-dayjs.extend(quarterOfYear);
-let tz = 'UTC';
-const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-const dayjsTz = (date) => {
-    if (!date)
-        return dayjs().tz(tz);
-    return dayjs(date).tz(tz);
-};
-const convertDateToTz = (date) => {
-    if (!date)
-        return dayjs.tz(dayjs().format(DEFAULT_DATE_FORMAT), tz);
-    return dayjs.tz(dayjs(date).format(DEFAULT_DATE_FORMAT), tz);
-};
-const dayjsTzToLocalTZ = (date) => {
-    if (!date)
-        return dayjs(dayjsTz().format(DEFAULT_DATE_FORMAT));
-    return dayjs(dayjsTz(date).format(DEFAULT_DATE_FORMAT));
-};
-const dayjsTzToDate = (date) => {
-    return dayjsTzToLocalTZ(date).toDate();
+var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
+  }));
 };
+SvgChevronUpIcon.displayName = "ChevronUpIcon";
 
 const TRIM_DECIMAL_ZEROS_REGEX = /\.0+$/;
 const DEFAULT_DECIMALS = 2;
@@ -384,6 +270,9 @@ const semverToNum = (v) => {
     const [major, minor, patch] = v.split('.').map((n) => Number(n));
     return (major ?? 0) * 1_000_000 + (minor ?? 0) * 1_000 + (patch ?? 0);
 };
+const numberWithCommas = (x) => {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
 
 /**
  * Utility function to calculate percentage and format it.
@@ -419,6 +308,118 @@ const formatPercentage = (percentage, decimals = DEFAULT_DECIMALS) => {
     return `${cleanDecimal(percentage, decimals)}%`;
 };
 
+function toVal(mix) {
+    if (typeof mix === 'string') {
+        return mix;
+    }
+    else if (typeof mix === 'object' && mix !== null) {
+        return Object.keys(mix)
+            .filter((key) => mix[key])
+            .join(' ');
+    }
+    else {
+        return false;
+    }
+}
+function cls(...classes) {
+    return classes.map(toVal).filter(Boolean).join(' ');
+}
+
+function compareValues(a, b, order = 'asc') {
+    if (a === b)
+        return 0;
+    if (a === undefined || b === undefined) {
+        if (a === undefined && b !== undefined)
+            return order === 'asc' ? -1 : 1;
+        if (b === undefined && a !== undefined)
+            return order === 'asc' ? 1 : -1;
+        return 0;
+    }
+    const isDate = (val) => typeof val !== 'boolean' && !isNaN(Date.parse(val));
+    const isString = (val) => typeof val === 'string';
+    let comparison = 0;
+    if (isDate(a) && isDate(b)) {
+        const dateA = a instanceof Date ? a : new Date(a);
+        const dateB = b instanceof Date ? b : new Date(b);
+        comparison = dateA > dateB ? 1 : -1;
+    }
+    else if (isString(a) && isString(b)) {
+        comparison = a > b ? 1 : -1;
+    }
+    else {
+        comparison = a > b ? 1 : -1;
+    }
+    return order === 'asc' ? -comparison : comparison;
+}
+function getNestedValue(obj, path) {
+    if (typeof path === 'string') {
+        return path
+            .replace(/\[(\d+)\]/g, '.$1')
+            .split('.')
+            .reduce((acc, key) => acc?.[key], obj);
+    }
+    return obj[path];
+}
+function sortByCondition(array, options) {
+    const { attr, order = 'asc', preferredValue, backupAttr, orderArrayAttr, orderArray } = options;
+    return array.slice().sort((a, b) => {
+        const valueA = getNestedValue(a, attr);
+        const valueB = getNestedValue(b, attr);
+        if (preferredValue !== undefined) {
+            if (valueA === preferredValue && valueB !== preferredValue)
+                return -1;
+            if (valueB === preferredValue && valueA !== preferredValue)
+                return 1;
+        }
+        if (orderArrayAttr === attr && orderArray) {
+            const orderArrayValue = orderArray[order];
+            return orderArrayValue.indexOf(valueA) - orderArrayValue.indexOf(valueB);
+        }
+        const primaryComparison = compareValues(valueA, valueB, order);
+        if (primaryComparison !== 0)
+            return primaryComparison;
+        if (backupAttr)
+            return compareValues(a[backupAttr], b[backupAttr], order);
+        return 0;
+    });
+}
+function sortByConditions(array, optionsArray) {
+    return optionsArray.reduce((sortedArray, options) => {
+        return sortByCondition(sortedArray, options);
+    }, array.slice());
+}
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(quarterOfYear);
+let tz = 'UTC';
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+function getInitialTimezone() {
+    return tz;
+}
+function setTz(value) {
+    tz = value;
+    dayjs.tz.setDefault(value);
+}
+const dayjsTz = (date) => {
+    if (!date)
+        return dayjs().tz(tz);
+    return dayjs(date).tz(tz);
+};
+const convertDateToTz = (date) => {
+    if (!date)
+        return dayjs.tz(dayjs().format(DEFAULT_DATE_FORMAT), tz);
+    return dayjs.tz(dayjs(date).format(DEFAULT_DATE_FORMAT), tz);
+};
+const dayjsTzToLocalTZ = (date) => {
+    if (!date)
+        return dayjs(dayjsTz().format(DEFAULT_DATE_FORMAT));
+    return dayjs(dayjsTz(date).format(DEFAULT_DATE_FORMAT));
+};
+const dayjsTzToDate = (date) => {
+    return dayjsTzToLocalTZ(date).toDate();
+};
+
 var AnalyticInterval;
 (function (AnalyticInterval) {
     AnalyticInterval["DAY"] = "DAY";
@@ -428,9 +429,6 @@ var AnalyticInterval;
     AnalyticInterval["WEEK"] = "WEEK";
     AnalyticInterval["YEAR"] = "YEAR";
 })(AnalyticInterval || (AnalyticInterval = {}));
-function numberWithCommas(x) {
-    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
 const SECONDS_IN_MINUTE = 60;
 const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * SECONDS_IN_MINUTE;
 const getTimeDurationLabel = (valueInSeconds) => {
@@ -488,675 +486,1076 @@ const getFormattedByInterval = (value, interval, options) => {
     return dayjsTz(value).format(optionFormat.formatMonth);
 };
 
-const formatAnalyticDate = (dateString) => {
-    if (!dateString)
-        return 'None';
-    const date = dayjsTz(dateString);
-    const now = dayjsTz();
-    const yesterday = dayjsTz().subtract(1, 'day');
-    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
-    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
-    if (isToday) {
-        return `Today at ${date.format('HH:mm')}`;
-    }
-    if (isYesterday) {
-        return `Yesterday at ${date.format('HH:mm')}`;
-    }
-    const daysDiff = now.diff(date, 'day');
-    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
-    if (isWithinWeek) {
-        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
-    }
-    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
+const GClickable = ({ children, fullWidth = false, cursor = 'pointer', onClick, onMouseEnter, onMouseLeave, }) => {
+    return (jsx("div", { role: "button", tabIndex: 0, className: cls({
+            'w-full': fullWidth,
+            'cursor-pointer': cursor === 'pointer',
+            'cursor-default': cursor === 'default',
+            'cursor-not-allowed': cursor === 'not-allowed',
+        }), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+            }
+        }, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
 };
 
-const formatAnalyticData = ({ value, formatter, getTextPrice, name, }) => {
-    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
-    if (dataTypeIsObjectOrArray)
-        return value;
-    switch (formatter) {
-        case EAnalyticDataType.INTEGER: {
-            return numberWithCommas((value ?? 0).toString());
-        }
-        case EAnalyticDataType.CURRENCY: {
-            if (!getTextPrice)
-                return `${value ?? 0}`;
-            return getTextPrice(value, false);
-        }
-        case EAnalyticDataType.DATE: {
-            return formatAnalyticDate(value);
-        }
-        case EAnalyticDataType.PERCENT: {
-            if (typeof value !== 'number')
-                return calcPercentageString(0, 1, 2) ?? '';
-            return calcPercentageString(value / 100, 1, 2) ?? '';
-        }
-        case EAnalyticDataType.DURATION: {
-            return getTimeDurationLabel(Number(value));
-        }
-        case EAnalyticDataType.STRING: {
-            const fallbackValue = name === EAnalyticColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
-            return value ?? fallbackValue;
-        }
-        case EAnalyticDataType.DAY: {
-            return getFormattedByInterval(value, AnalyticInterval.DAY, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.HOUR: {
-            return getFormattedByInterval(value, AnalyticInterval.HOUR, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.MONTH: {
-            return getFormattedByInterval(value, AnalyticInterval.MONTH, { isExpandDetail: true });
-        }
-        case EAnalyticDataType.YEAR: {
-            return getFormattedByInterval(value, AnalyticInterval.YEAR);
-        }
-        case EAnalyticDataType.WEEK: {
-            return getFormattedByInterval(value, AnalyticInterval.WEEK, { isExpandDetail: true });
+const GActivatorPopover = ({ onClick, active, content, textProps, boxProps: customBoxProps, disabled, icon: customIcon, }) => {
+    const boxProps = useMemo(() => {
+        if (disabled) {
+            return {
+                borderColor: 'border-disabled',
+                background: 'bg-surface-disabled',
+                ...customBoxProps,
+            };
         }
-        case EAnalyticDataType.QUARTER: {
-            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
-                isExpandDetail: true,
-            });
+        return {
+            shadow: active ? 'button-inset' : 'button',
+            background: active ? 'bg-fill-active' : 'bg-fill',
+            ...customBoxProps,
+        };
+    }, [active, disabled, customBoxProps]);
+    const toneClass = useMemo(() => {
+        if (disabled) {
+            return 'text-[var(--p-color-text-disabled)]';
         }
-        case EAnalyticDataType.OBJECT:
-        case EAnalyticDataType.ARRAY: {
-            return value;
-        }
-        default:
-            return `${value}`;
-    }
+        return active ? 'text-[var(--p-color-text-subdued)]' : 'text-[var(--p-color-text)]';
+    }, [active, disabled]);
+    const textComponent = useMemo(() => {
+        return (jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", tone: disabled ? 'inherit' : textProps?.tone, truncate: true, ...(textProps?.variant && { variant: textProps.variant }), children: content }));
+    }, [content, textProps, disabled]);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        onClick();
+    }, [disabled, onClick]);
+    return (jsx(GClickable, { cursor: disabled ? 'default' : 'pointer', onClick: handleClick, children: jsx("div", { className: cls(toneClass), children: jsxs(Box, { padding: "150", paddingInline: "300", paddingInlineEnd: "150", borderRadius: "200", ...boxProps, children: [customIcon && (jsxs(InlineStack, { gap: "200", align: "center", wrap: false, children: [jsx(Box, { children: jsx(Icon, { source: customIcon }) }), textComponent] })), !customIcon && (jsxs(InlineGrid, { columns: "1fr 20px", gap: "200", alignItems: "center", children: [textComponent, jsx(Icon, { source: active ? SvgChevronUpIcon : SvgChevronDownIcon })] }))] }) }) }));
 };
 
-const SESSION_KEY = 'sessions';
-const hasMetricData = (metric) => {
-    const sessions = metric?.[SESSION_KEY];
-    return typeof sessions === 'number' && sessions > 0;
+const GBlockCenter = ({ height, align, inlineAlign, display, ...props }) => {
+    const stickyStyle = useMemo(() => {
+        if (props.position !== 'sticky')
+            return {};
+        const style = {
+            position: 'sticky',
+        };
+        if (props.insetInlineStart)
+            style.insetInlineStart = Number(props.insetInlineStart) * 4;
+        if (props.insetInlineEnd)
+            style.insetInlineEnd = Number(props.insetInlineEnd) * 4;
+        if (props.insetBlockStart)
+            style.insetBlockStart = Number(props.insetBlockStart) * 4;
+        if (props.insetBlockEnd)
+            style.insetBlockEnd = Number(props.insetBlockEnd) * 4;
+        return style;
+    }, [props.position, props.insetInlineStart, props.insetInlineEnd, props.insetBlockStart, props.insetBlockEnd]);
+    return (jsx("div", { className: "Polaris-GBlockCenter", style: {
+            ...stickyStyle,
+            '--gp-block-center-height': height,
+            '--gp-block-center-display': display,
+            '--gp-block-center-align': align,
+            '--gp-block-center-inline-align': inlineAlign,
+            '--gp-block-center-overflow-x': props.overflowX,
+            '--gp-block-center-overflow-y': props.overflowY,
+        }, children: jsx(Box, { ...props }) }));
 };
 
-const parseRawJson = (raw) => {
-    if (!raw)
-        return undefined;
-    return typeof raw === 'string' ? JSON.parse(raw) : raw;
+const GTooltip = ({ isEnabled = true, content, maxWidth, ...props }) => {
+    const hasContent = isEnabled && !!content;
+    return hasContent ? (jsx(Tooltip, { width: "wide", hoverDelay: 500, content: content, ...props, accessibilityLabel: maxWidth?.toString() })) : (props.children);
 };
-const parseJsonArray = (raw) => {
-    try {
-        const parsed = parseRawJson(raw);
-        if (!Array.isArray(parsed))
-            return undefined;
-        return parsed;
-    }
-    catch {
-        return undefined;
+
+const GButton = ({ activatorWrapper, children, iconRight, inset, stopPropagation = true, onClick, themeTone = 'light', variant, ...props }) => {
+    const Wrapper = activatorWrapper || 'div';
+    const isNeutral = variant === 'neutral';
+    const polarisVariant = isNeutral ? undefined : variant;
+    const handleClick = (e) => {
+        stopPropagation && e.stopPropagation();
+        if (props.disabled)
+            return;
+        onClick?.();
+    };
+    const button = (jsx(GTooltip, { activatorWrapper: "tooltip-content", ...props.tooltip, children: jsx(Wrapper, { className: cls('Polaris-GButton', {
+                'Polaris-GButton--icon-right': iconRight,
+                'Polaris-GButton--dark': themeTone === 'dark',
+                'Polaris-GButton--neutral': isNeutral,
+                'cursor-default': props.disabled,
+                'Polaris-GButton--fullWidth': props.fullWidth,
+                flex: inset,
+            }), onClick: handleClick, children: jsx(Button, { variant: polarisVariant, ...props, children: children }) }) }));
+    if (inset) {
+        return jsx(Box, { padding: "100", children: button });
     }
+    return button;
 };
-const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...item, total: Number(item.total) }));
 
-const readNumeric = (metric, key) => {
-    const raw = metric?.[key];
-    return typeof raw === 'number' ? raw : 0;
+const GCheckbox = ({ ...props }) => {
+    return props.multiple ? jsx(GCheckboxMultiple, { ...props }) : jsx(GCheckboxSingle, { ...props });
 };
-
-const useAnalyticData = (getTextPrice) => {
-    const formatData = ({ value, formatter, name }) => {
-        return formatAnalyticData({ value, formatter, getTextPrice, name });
+const GCheckboxMultiple = ({ options, onChange, onChangeSingleValue, emptySelected, selected, onHover, itemHovered, dependentDisabledValues, }) => {
+    const [settingOptions, setSettingOptions] = useState([]);
+    const handleChange = (value) => {
+        if (onChangeSingleValue) {
+            onChangeSingleValue(value);
+        }
+        const updatedOptions = settingOptions.includes(value)
+            ? settingOptions.filter((item) => item !== value)
+            : [...settingOptions, value];
+        setSettingOptions(updatedOptions);
+        onChange(updatedOptions);
     };
-    const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
-        if (!hasMetricData(metric))
-            return { value: 0, change: PLACEHOLDER_VALUE$1 };
-        const currentValue = readNumeric(metric, metricKey);
-        const previousValue = readNumeric(previousMetric, metricKey);
-        const value = formatData({ value: currentValue, formatter, name: metricKey });
-        if (currentValue === 0 && previousValue !== 0)
-            return { value, change: -100 };
-        if (previousValue === 0)
-            return { value, change: PLACEHOLDER_VALUE$1 };
-        const change = ((currentValue - previousValue) / previousValue) * 100;
-        return { value, change };
+    const handleHover = (value) => {
+        if (!onHover)
+            return;
+        onHover(value);
     };
-    return { formatData, computeMetric };
-};
-
-var GPaginationDirection;
-(function (GPaginationDirection) {
-    GPaginationDirection["NEXT"] = "NEXT";
-    GPaginationDirection["PREV"] = "PREV";
-})(GPaginationDirection || (GPaginationDirection = {}));
-
-const TARGET_VISITOR = [
-    { value: EVisitorType.NEW, label: 'New' },
-    { value: EVisitorType.RETURNING, label: 'Returning' },
-];
-const TARGET_DEVICES = [
-    { value: EDeviceType.DESKTOP, label: 'Desktop' },
-    { value: EDeviceType.TABLET, label: 'Tablet' },
-    { value: EDeviceType.MOBILE, label: 'Mobile' },
-];
-const TARGET_CHANNEL = [
-    { value: ETrafficSourceType.DIRECT, label: 'Direct' },
-    { value: ETrafficSourceType.EMAIL, label: 'Email' },
-    { value: ETrafficSourceType.REFERRAL, label: 'Referral' },
-    { value: ETrafficSourceType.ORGANIC_SOCIAL, label: 'Organic social' },
-    { value: ETrafficSourceType.ORGANIC_SEARCH, label: 'Organic search' },
-    { value: ETrafficSourceType.PAID_SOCIAL, label: 'Paid social' },
-    { value: ETrafficSourceType.PAID_SEARCH, label: 'Paid search' },
-    { value: ETrafficSourceType.SMS, label: 'SMS' },
-];
-
-const CAMPAIGN_BACKGROUND_MAIN = {
-    ORIGIN: '#2C7DFF',
-    VARIANT: '#F34A70',
-};
-
-const DEFAULT_CURRENT_PERIOD_LABEL = 'Current';
-const DEFAULT_PREVIOUS_PERIOD_LABEL = 'Previous';
-const CHART_MIN_HEIGHT = 228;
-const SERIES_COLORS = {
-    current: 'rgba(64, 176, 230, 1)',
-    comparison: 'rgba(161, 202, 231, 1)',
-    all: ['#2C7DFF', '#F34A70'],
+    useEffect(() => {
+        setSettingOptions(() => {
+            if (selected) {
+                return options.filter((item) => selected.includes(item.value)).map((item) => item.value);
+            }
+            return [];
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selected]);
+    return (jsx(BlockStack, { children: options.map((item) => {
+            const hasForceUnchecked = dependentDisabledValues?.has(item.value);
+            const isOnlyOneSelected = emptySelected && options.filter((opt) => opt.selected).length === 1 && emptySelected;
+            const handleCheckboxClick = () => {
+                if (isOnlyOneSelected)
+                    return;
+                handleChange(item.value);
+            };
+            return (jsx("div", { className: cls('flex w-full items-center justify-between', {
+                    'cursor-not-allowed': isOnlyOneSelected,
+                    'cursor-pointer': !isOnlyOneSelected,
+                    'bg-surface-hover rounded-lg': itemHovered === item.value,
+                }), onClick: () => {
+                    if (isOnlyOneSelected || item.disabled)
+                        return;
+                    handleCheckboxClick();
+                }, onMouseEnter: () => handleHover(item.value), onMouseLeave: () => handleHover(undefined), children: isOnlyOneSelected ? (jsx(GTooltip, { isEnabled: item.tooltip?.isEnabled, ...item.tooltip, children: jsx(Box, { paddingBlock: "150", paddingInline: "200", width: "100%", children: jsxs(InlineStack, { blockAlign: "center", gap: "150", children: [jsx(Checkbox, { label: item.label, labelHidden: true, checked: item.selected, disabled: true }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: item.label })] }) }) })) : (jsx(Box, { paddingBlock: "150", paddingInline: "200", minWidth: "0", children: jsxs(InlineStack, { blockAlign: "center", gap: "150", wrap: false, children: [jsx(Checkbox, { label: item.label, labelHidden: true, checked: hasForceUnchecked ? false : settingOptions.includes(item.value), onChange: handleCheckboxClick, disabled: item.disabled }), jsxs(Box, { minWidth: "0", children: [jsx(Text, { as: "p", variant: "bodyMd", truncate: true, tone: hasForceUnchecked ? 'disabled' : 'inherit', children: item.label }), item.description && (jsx(Text, { as: "p", variant: "bodySm", tone: "disabled", truncate: true, children: item.description }))] })] }) })) }, item.value));
+        }) }));
 };
-const TREND_TONE = {
-    POSITIVE: '#007F5F',
-    NEUTRAL: '#4A4A4A',
+const GCheckboxSingle = ({ options, onChange }) => {
+    return (jsx(BlockStack, { gap: "300", children: options.map((item) => (jsx(RadioButton, { label: item.label, checked: item.selected, onChange: () => onChange(item.value), helpText: item.helpText ? jsx(ChoiceHelpText, { item: item }) : undefined }, item.value))) }));
 };
-const PLACEHOLDER_VALUE = '-';
 
-const DEFAULT_CURRENCY_ANALYTIC = 'USD';
-
-var THUMB_PRODUCT_DEFAULT = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSI5MCIKICBoZWlnaHQ9IjcyIgogIHZpZXdCb3g9IjAgMCA5MCA3MiIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNDguNzUgMzQuNUM0OS45OTI2IDM0LjUgNTEgMzMuNDkyNiA1MSAzMi4yNUM1MSAzMS4wMDc0IDQ5Ljk5MjYgMzAgNDguNzUgMzBDNDcuNTA3NCAzMCA0Ni41IDMxLjAwNzQgNDYuNSAzMi4yNUM0Ni41IDMzLjQ5MjYgNDcuNTA3NCAzNC41IDQ4Ljc1IDM0LjVaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgogIDxwYXRoCiAgICBmaWxsUnVsZT0iZXZlbm9kZCIKICAgIGNsaXBSdWxlPSJldmVub2RkIgogICAgZD0iTTQzLjUyNjggMjYuMjVINDYuNDczMkM0Ny42OTI0IDI2LjI1IDQ4LjY3NTggMjYuMjUgNDkuNDcyMiAyNi4zMTVDNTAuMjkyMiAyNi4zODIgNTEuMDEyNCAyNi41MjM2IDUxLjY3ODcgMjYuODYzMUM1Mi43MzcxIDI3LjQwMjQgNTMuNTk3NiAyOC4yNjI5IDU0LjEzNjkgMjkuMzIxM0M1NC40NzY0IDI5Ljk4NzYgNTQuNjE4IDMwLjcwNzggNTQuNjg1IDMxLjUyNzhDNTQuNzUgMzIuMzI0MiA1NC43NSAzMy4zMDc2IDU0Ljc1IDM0LjUyNjhWMzcuNDczMkM1NC43NSAzOC42OTI0IDU0Ljc1IDM5LjY3NTggNTQuNjg1IDQwLjQ3MjJDNTQuNjE4IDQxLjI5MjIgNTQuNDc2NCA0Mi4wMTI0IDU0LjEzNjkgNDIuNjc4N0M1My41OTc2IDQzLjczNzEgNTIuNzM3MSA0NC41OTc2IDUxLjY3ODcgNDUuMTM2OUM1MS4wMTI0IDQ1LjQ3NjQgNTAuMjkyMiA0NS42MTggNDkuNDcyMiA0NS42ODVDNDguNjc1OCA0NS43NSA0Ny42OTI0IDQ1Ljc1IDQ2LjQ3MzIgNDUuNzVINDMuNTI2OEM0Mi4zMDc2IDQ1Ljc1IDQxLjMyNDIgNDUuNzUgNDAuNTI3OCA0NS42ODVDMzkuNzA3OCA0NS42MTggMzguOTg3NiA0NS40NzY0IDM4LjMyMTMgNDUuMTM2OUMzNy4yNjI5IDQ0LjU5NzYgMzYuNDAyNCA0My43MzcxIDM1Ljg2MzEgNDIuNjc4N0MzNS41MjM2IDQyLjAxMjQgMzUuMzgyIDQxLjI5MjIgMzUuMzE1IDQwLjQ3MjJDMzUuMjUgMzkuNjc1OCAzNS4yNSAzOC42OTI0IDM1LjI1IDM3LjQ3MzJWMzQuNTI2OEMzNS4yNSAzMy4zMDc2IDM1LjI1IDMyLjMyNDIgMzUuMzE1IDMxLjUyNzhDMzUuMzgyIDMwLjcwNzggMzUuNTIzNiAyOS45ODc2IDM1Ljg2MzEgMjkuMzIxM0MzNi40MDI0IDI4LjI2MjkgMzcuMjYyOSAyNy40MDI0IDM4LjMyMTMgMjYuODYzMUMzOC45ODc2IDI2LjUyMzYgMzkuNzA3OCAyNi4zODIgNDAuNTI3OCAyNi4zMTVDNDEuMzI0MiAyNi4yNSA0Mi4zMDc2IDI2LjI1IDQzLjUyNjggMjYuMjVaTTQwLjcxMSAyOC41NTc2QzQwLjAzMDIgMjguNjEzMiAzOS42MzkxIDI4LjcxNjkgMzkuMzQyOCAyOC44Njc5QzM4LjcwNzcgMjkuMTkxNCAzOC4xOTE0IDI5LjcwNzcgMzcuODY3OSAzMC4zNDI4QzM3LjcxNjkgMzAuNjM5MSAzNy42MTMyIDMxLjAzMDIgMzcuNTU3NiAzMS43MTFDMzcuNTAwOSAzMi40MDUgMzcuNSAzMy4yOTYzIDM3LjUgMzQuNTc1VjM2LjcxNzdMMzguNTg0MiAzNS40MTY3QzM5LjU3MjQgMzQuMjMwOSA0MS4zNjU1IDM0LjE0OTYgNDIuNDU2OSAzNS4yNDFMNDYuNSAzOS4yODQxTDQ4LjI2OTQgMzcuNTE0NkM0OS4zNzU3IDM2LjQwODMgNTEuMTk4IDM2LjUwOTMgNTIuMTc1NCAzNy43MzA5TDUyLjQ5OTUgMzguMTM2MUM1Mi41IDM3LjkxMzEgNTIuNSAzNy42NzY1IDUyLjUgMzcuNDI1VjM0LjU3NUM1Mi41IDMzLjI5NjMgNTIuNDk5MSAzMi40MDUgNTIuNDQyNCAzMS43MTFDNTIuMzg2OCAzMS4wMzAyIDUyLjI4MzEgMzAuNjM5MSA1Mi4xMzIxIDMwLjM0MjhDNTEuODA4NiAyOS43MDc3IDUxLjI5MjMgMjkuMTkxNCA1MC42NTcyIDI4Ljg2NzlDNTAuMzYwOSAyOC43MTY5IDQ5Ljk2OTggMjguNjEzMiA0OS4yODkgMjguNTU3NkM0OC41OTUgMjguNTAwOSA0Ny43MDM3IDI4LjUgNDYuNDI1IDI4LjVINDMuNTc1QzQyLjI5NjMgMjguNSA0MS40MDUgMjguNTAwOSA0MC43MTEgMjguNTU3NlpNMzcuNTU3NiA0MC4yODlDMzcuNTU0MyA0MC4yNDkyIDM3LjU1MTMgNDAuMjA4OCAzNy41NDg0IDQwLjE2NzhDMzcuNTcxMSA0MC4xNDQ4IDM3LjU5MzEgNDAuMTIwNiAzNy42MTQyIDQwLjA5NTNMNDAuMzEyNyAzNi44NTcxQzQwLjQ1MzkgMzYuNjg3NyA0MC43MSAzNi42NzYxIDQwLjg2NTkgMzYuODMyTDQ1LjcwNDUgNDEuNjcwNkM0Ni4xNDM4IDQyLjEwOTkgNDYuODU2MSA0Mi4xMDk5IDQ3LjI5NTUgNDEuNjcwNkw0OS44NjA0IDM5LjEwNTZDNTAuMDE4NSAzOC45NDc2IDUwLjI3ODggMzguOTYyIDUwLjQxODQgMzkuMTM2NUw1Mi4yMzc3IDQxLjQxMDdDNTIuMjA1NiA0MS41MDEgNTIuMTcwNCA0MS41ODIyIDUyLjEzMjEgNDEuNjU3MkM1MS44MDg2IDQyLjI5MjMgNTEuMjkyMyA0Mi44MDg2IDUwLjY1NzIgNDMuMTMyMUM1MC4zNjA5IDQzLjI4MzEgNDkuOTY5OCA0My4zODY4IDQ5LjI4OSA0My40NDI0QzQ4LjU5NSA0My40OTkxIDQ3LjcwMzcgNDMuNSA0Ni40MjUgNDMuNUg0My41NzVDNDIuMjk2MyA0My41IDQxLjQwNSA0My40OTkxIDQwLjcxMSA0My40NDI0QzQwLjAzMDIgNDMuMzg2OCAzOS42MzkxIDQzLjI4MzEgMzkuMzQyOCA0My4xMzIxQzM4LjcwNzcgNDIuODA4NiAzOC4xOTE0IDQyLjI5MjMgMzcuODY3OSA0MS42NTcyQzM3LjcxNjkgNDEuMzYwOSAzNy42MTMyIDQwLjk2OTggMzcuNTU3NiA0MC4yODlaIgogICAgZmlsbD0iIzYxNjE2MSIKICAvPgo8L3N2Zz4K";
-
-var SvgArrowRightIcon = function SvgArrowRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M3.5 10a.75.75 0 0 1 .75-.75h9.69l-2.72-2.72a.75.75 0 1 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72h-9.69a.75.75 0 0 1-.75-.75Z"
-  }));
-};
-SvgArrowRightIcon.displayName = "ArrowRightIcon";
+const GDiv = forwardRef(({ children, onClick, ...props }, ref) => {
+    const onKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick?.();
+        }
+    }, [onClick]);
+    return (jsx("div", { ref: ref, ...props, role: "button", tabIndex: 0, onKeyDown: onKeyDown, onClick: onClick, children: children }));
+});
+GDiv.displayName = 'GDiv';
 
-var SvgCalendarIcon = function SvgCalendarIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.75 3.5a.75.75 0 0 0-1.5 0v.407a3.075 3.075 0 0 0-.702.252 3.75 3.75 0 0 0-1.64 1.639c-.226.444-.32.924-.365 1.47-.043.531-.043 1.187-.043 2v1.464c0 .813 0 1.469.043 2 .045.546.14 1.026.366 1.47a3.75 3.75 0 0 0 1.639 1.64c.444.226.924.32 1.47.365.531.043 1.187.043 2 .043h3.383c.323 0 .542 0 .735-.02a3.75 3.75 0 0 0 3.344-3.344c.02-.193.02-.412.02-.735v-2.883c0-.813 0-1.469-.043-2-.045-.546-.14-1.026-.366-1.47a3.75 3.75 0 0 0-1.639-1.64 3.076 3.076 0 0 0-.702-.251v-.407a.75.75 0 0 0-1.5 0v.259c-.373-.009-.794-.009-1.268-.009h-1.964c-.474 0-.895 0-1.268.009v-.259Zm-1.521 1.995c.197-.1.458-.17.912-.207.462-.037 1.057-.038 1.909-.038h1.9c.853 0 1.447 0 1.91.038.453.037.714.107.912.207.423.216.767.56.983.984.1.197.17.458.207.912.014.18.024.38.029.609h-9.982c.006-.228.015-.429.03-.61.036-.453.106-.714.206-.911a2.25 2.25 0 0 1 .984-.984Zm-1.229 4.005v1.2c0 .853 0 1.447.038 1.91.037.453.107.714.207.912.216.423.56.767.984.983.197.1.458.17.912.207.462.037 1.057.038 1.909.038h3.306c.385 0 .52-.001.626-.012a2.25 2.25 0 0 0 2.006-2.006c.011-.106.012-.241.012-.626v-2.606h-10Z"
-  }));
+const TRANSFORMER_REGEX = /\[(\d+)\](.*?)\[\]/g;
+const GI18NText = (props) => {
+    const { children, transformers } = props;
+    if (!transformers || Object.values(transformers).length === 0) {
+        return jsx(Text, { ...props, children: children });
+    }
+    const transformContent = (text) => {
+        const parts = [];
+        let lastIndex = 0;
+        text.replace(TRANSFORMER_REGEX, (match, number, childrenContent, offset) => {
+            parts.push(text.slice(lastIndex, offset));
+            const transformerFunction = transformers[number];
+            if (typeof transformerFunction === 'function') {
+                parts.push(transformerFunction(childrenContent));
+            }
+            else {
+                parts.push(match);
+            }
+            lastIndex = offset + match.length;
+            return match;
+        });
+        parts.push(text.slice(lastIndex));
+        return parts.map((part, index) => jsx(Fragment$1, { children: part }, index));
+    };
+    return jsx(Text, { ...props, children: typeof children === 'string' ? transformContent(children) : children });
 };
-SvgCalendarIcon.displayName = "CalendarIcon";
 
-var SvgCheckIcon = function SvgCheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"
-  }));
-};
-SvgCheckIcon.displayName = "CheckIcon";
+function GOptionList({ options, selected, onChange }) {
+    const handleSelect = (value) => {
+        onChange([value]);
+    };
+    const handleKeyDown = (event, value) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleSelect(value);
+        }
+    };
+    return (jsx(Box, { padding: "150", children: jsx(BlockStack, { gap: "100", children: options.map((option) => {
+                const isSelected = selected.includes(option.value);
+                return (jsx("div", { role: "option", "aria-selected": isSelected, tabIndex: 0, onClick: () => handleSelect(option.value), onKeyDown: (e) => handleKeyDown(e, option.value), className: cls('p-1.5 pl-4 rounded-lg cursor-pointer', {
+                        'bg-[#F1F1F1]': isSelected,
+                        'hover:bg-[#F1F1F1]': !isSelected,
+                    }), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "200", children: [jsx(Box, { minWidth: "0", children: option.label }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }, option.value));
+            }) }) }));
+}
 
-var SvgChevronDownIcon = function SvgChevronDownIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M5.72 8.47a.75.75 0 0 1 1.06 0l3.47 3.47 3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"
-  }));
+const GSelector = (props) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = (text) => text.join(', '), } = props;
+    const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
+    const selectedOption = useMemo(() => {
+        return options
+            .filter((item) => item.active || item.id === selected)
+            .map((item) => item.content || '')
+            .filter((item) => !!item);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption.length) {
+            const selected = formatActivatorContent(selectedOption);
+            return activatorText ? `${activatorText}: ${selected}` : selected;
+        }
+        if (emptyLabel) {
+            return activatorText ? `${activatorText}: ${emptyLabel}` : emptyLabel;
+        }
+        return activatorText;
+    }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
+    const selectorMarkup = useMemo(() => {
+        switch (props.variant) {
+            case 'choice':
+                return jsx(GSelectorChoice, { ...props, setPopoverActive: togglePopoverActive });
+            case 'action-list':
+                return jsx(GSelectorActionList, { ...props, setPopoverActive: togglePopoverActive });
+        }
+    }, [props, togglePopoverActive]);
+    return (jsx(Popover, { active: popoverActive, activator: jsx("div", { className: "flex items-center gap-1", children: jsx(Button, { onClick: togglePopoverActive, disclosure: popoverActive ? 'up' : 'down', children: activatorContent }) }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: selectorMarkup }));
+};
+const GSelectorChoice = ({ options, selected, onSelect, maxWidth, minWidth, clearable, setPopoverActive, }) => {
+    const { t } = useTranslation();
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            value: option.id,
+            label: option.content || '',
+            selected: false,
+        }));
+    }, [options]);
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+    }, [onSelect]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, paddingBlock: "150", children: jsxs(BlockStack, { children: [jsx(BlockStack, { gap: "0", children: jsx(GCheckbox, { multiple: true, options: items, selected: selected, onChange: handleSelection }) }), clearable && (jsx(Box, { paddingBlock: "150", paddingInline: "200", children: jsx(InlineStack, { blockAlign: "center", align: "start", children: jsx(Button, { disabled: !selected?.length, onClick: () => {
+                                handleSelection([]);
+                                setPopoverActive(false);
+                            }, variant: "plain", children: t('Clear') }) }) }))] }) }));
+};
+const GSelectorActionList = ({ options, selected, onSelect, helpText, maxWidth, minWidth, setPopoverActive, }) => {
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    }, [onSelect, setPopoverActive]);
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            id: option.id,
+            content: option.content,
+            helpText: option.helpText,
+            onAction: () => handleSelection(option.id),
+            active: option.active || option.id === selected,
+            suffix: (option.active || option.id === selected) && jsx(Icon, { source: SvgCheckIcon, tone: "success" }),
+        }));
+    }, [options, selected, handleSelection]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, children: jsxs(BlockStack, { gap: "0", children: [jsx(ActionList, { actionRole: "menuitem", items: items }), helpText] }) }));
 };
-SvgChevronDownIcon.displayName = "ChevronDownIcon";
 
-var SvgChevronRightIcon = function SvgChevronRightIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M7.72 14.53a.75.75 0 0 1 0-1.06l3.47-3.47-3.47-3.47a.75.75 0 0 1 1.06-1.06l4 4a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0Z"
-  }));
+const GTextLink = ({ linkAction, isDisabled, disabledFocus, children }) => {
+    if (!linkAction || isDisabled) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx("span", { className: cls('GTextLink', { 'GTextLink--disabled-focus': disabledFocus }), children: jsx(Link, { ...linkAction, children: jsx(Fragment, { children: children }) }) }));
 };
-SvgChevronRightIcon.displayName = "ChevronRightIcon";
 
-var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    d: "M14.53 12.28a.75.75 0 0 1-1.06 0l-3.47-3.47-3.47 3.47a.75.75 0 0 1-1.06-1.06l4-4a.75.75 0 0 1 1.06 0l4 4a.75.75 0 0 1 0 1.06Z"
-  }));
+const GSkeletonDisplayText = (props) => {
+    const height = props.height ?? '50px';
+    return (jsxs("div", { className: "Polaris-GSkeletonDisplayText", children: [jsx("style", { children: `.Polaris-GSkeletonDisplayText .Polaris-SkeletonDisplayText__DisplayText { height: ${height} !important; }` }), jsx(SkeletonDisplayText, { maxWidth: "100%", size: "extraLarge" })] }));
 };
-SvgChevronUpIcon.displayName = "ChevronUpIcon";
 
-function toVal(mix) {
-    if (typeof mix === 'string') {
-        return mix;
-    }
-    else if (typeof mix === 'object' && mix !== null) {
-        return Object.keys(mix)
-            .filter((key) => mix[key])
-            .join(' ');
-    }
-    else {
-        return false;
-    }
-}
-function cls(...classes) {
-    return classes.map(toVal).filter(Boolean).join(' ');
+/**
+ * Helper function to generate a variation class name.
+ * @param name - Base name of the class.
+ * @param value - Variation value to append.
+ * @returns Combined class name.
+ */
+function variationName(name, value) {
+    return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
 }
+const GThumbnail = ({ source, alt, size, grayscale, defaultSource = THUMB_PRODUCT_DEFAULT, width = '80', height = '80', classRemoved = false, }) => {
+    const sizeClass = size && variationName('Polaris-Thumbnail--size', size);
+    const filterClass = grayscale && 'Polaris-GThumbnail--filter';
+    const className = cls('Polaris-Thumbnail', sizeClass);
+    const thumbnail = (jsx("img", { onError: (e) => {
+            e.currentTarget.src = defaultSource;
+        }, alt: alt ?? 'Thumbnail', src: `${source ?? defaultSource}`, width: width, height: height, style: {
+            '--gp-grayscale-percentage': grayscale || '100%',
+        }, className: cls('Polaris-GThumbnail', filterClass) }));
+    if (classRemoved)
+        return thumbnail;
+    return jsx("span", { className: className, children: thumbnail });
+};
 
-function compareValues(a, b, order = 'asc') {
-    if (a === b)
-        return 0;
-    if (a === undefined || b === undefined) {
-        if (a === undefined && b !== undefined)
-            return order === 'asc' ? -1 : 1;
-        if (b === undefined && a !== undefined)
-            return order === 'asc' ? 1 : -1;
-        return 0;
-    }
-    const isDate = (val) => typeof val !== 'boolean' && !isNaN(Date.parse(val));
-    const isString = (val) => typeof val === 'string';
-    let comparison = 0;
-    if (isDate(a) && isDate(b)) {
-        const dateA = a instanceof Date ? a : new Date(a);
-        const dateB = b instanceof Date ? b : new Date(b);
-        comparison = dateA > dateB ? 1 : -1;
-    }
-    else if (isString(a) && isString(b)) {
-        comparison = a > b ? 1 : -1;
-    }
-    else {
-        comparison = a > b ? 1 : -1;
-    }
-    return order === 'asc' ? -comparison : comparison;
-}
-function getNestedValue(obj, path) {
-    if (typeof path === 'string') {
-        return path
-            .replace(/\[(\d+)\]/g, '.$1')
-            .split('.')
-            .reduce((acc, key) => acc?.[key], obj);
-    }
-    return obj[path];
-}
-function sortByCondition(array, options) {
-    const { attr, order = 'asc', preferredValue, backupAttr, orderArrayAttr, orderArray } = options;
-    return array.slice().sort((a, b) => {
-        const valueA = getNestedValue(a, attr);
-        const valueB = getNestedValue(b, attr);
-        if (preferredValue !== undefined) {
-            if (valueA === preferredValue && valueB !== preferredValue)
-                return -1;
-            if (valueB === preferredValue && valueA !== preferredValue)
-                return 1;
-        }
-        if (orderArrayAttr === attr && orderArray) {
-            const orderArrayValue = orderArray[order];
-            return orderArrayValue.indexOf(valueA) - orderArrayValue.indexOf(valueB);
+const SIZE_CLASS = {
+    default: 'w-[210px]',
+    wide: 'w-[320px]',
+    large: 'w-[328px]',
+};
+const ALIGNMENT_MAP = {
+    start: 'flex justify-start',
+    center: 'flex justify-center',
+    end: 'flex justify-end',
+};
+const GTooltipCard = forwardRef((props, ref) => {
+    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
+    const { width = 'default' } = tooltip ?? {};
+    const [isMouseEnter, setIsMouseEnter] = useState(false);
+    const TooltipCardWrapper = wrapper;
+    const sizeClass = SIZE_CLASS[width];
+    const timeoutRef = useRef(null);
+    const handleMouseEnter = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsMouseEnter(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
         }
-        const primaryComparison = compareValues(valueA, valueB, order);
-        if (primaryComparison !== 0)
-            return primaryComparison;
-        if (backupAttr)
-            return compareValues(a[backupAttr], b[backupAttr], order);
-        return 0;
-    });
-}
-function sortByConditions(array, optionsArray) {
-    return optionsArray.reduce((sortedArray, options) => {
-        return sortByCondition(sortedArray, options);
-    }, array.slice());
-}
+        setIsMouseEnter(false);
+    };
+    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
+    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
+            'GTooltipCard--text-underline': textDecoration === 'underline',
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
+});
+GTooltipCard.displayName = 'GTooltipCard';
 
-const GClickable = ({ children, fullWidth = false, cursor = 'pointer', onClick, onMouseEnter, onMouseLeave, }) => {
-    return (jsx("div", { role: "button", tabIndex: 0, className: cls({
-            'w-full': fullWidth,
-            'cursor-pointer': cursor === 'pointer',
-            'cursor-default': cursor === 'default',
-            'cursor-not-allowed': cursor === 'not-allowed',
-        }), onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick();
-            }
-        }, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
-};
-
-const GActivatorPopover = ({ onClick, active, content, textProps, boxProps: customBoxProps, disabled, icon: customIcon, }) => {
-    const boxProps = useMemo(() => {
-        if (disabled) {
-            return {
-                borderColor: 'border-disabled',
-                background: 'bg-surface-disabled',
-                ...customBoxProps,
-            };
-        }
-        return {
-            shadow: active ? 'button-inset' : 'button',
-            background: active ? 'bg-fill-active' : 'bg-fill',
-            ...customBoxProps,
-        };
-    }, [active, disabled, customBoxProps]);
-    const toneClass = useMemo(() => {
-        if (disabled) {
-            return 'text-[var(--p-color-text-disabled)]';
+const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const [itemHover, setItemHover] = useState(null);
+    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
+    const selectedOption = useMemo(() => {
+        return options.find((item) => item.id === selected);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption) {
+            const content = selectedOption.title ?? selectedOption.content;
+            return activatorText ? `${activatorText}: ${content}` : content;
         }
-        return active ? 'text-[var(--p-color-text-subdued)]' : 'text-[var(--p-color-text)]';
-    }, [active, disabled]);
-    const textComponent = useMemo(() => {
-        return (jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", tone: disabled ? 'inherit' : textProps?.tone, truncate: true, ...(textProps?.variant && { variant: textProps.variant }), children: content }));
-    }, [content, textProps, disabled]);
-    const handleClick = useCallback(() => {
-        if (disabled)
-            return;
-        onClick();
-    }, [disabled, onClick]);
-    return (jsx(GClickable, { cursor: disabled ? 'default' : 'pointer', onClick: handleClick, children: jsx("div", { className: cls(toneClass), children: jsxs(Box, { padding: "150", paddingInline: "300", paddingInlineEnd: "150", borderRadius: "200", ...boxProps, children: [customIcon && (jsxs(InlineStack, { gap: "200", align: "center", wrap: false, children: [jsx(Box, { children: jsx(Icon, { source: customIcon }) }), textComponent] })), !customIcon && (jsxs(InlineGrid, { columns: "1fr 20px", gap: "200", alignItems: "center", children: [textComponent, jsx(Icon, { source: active ? SvgChevronUpIcon : SvgChevronDownIcon })] }))] }) }) }));
-};
-
-const GBlockCenter = ({ height, align, inlineAlign, display, ...props }) => {
-    const stickyStyle = useMemo(() => {
-        if (props.position !== 'sticky')
-            return {};
-        const style = {
-            position: 'sticky',
-        };
-        if (props.insetInlineStart)
-            style.insetInlineStart = Number(props.insetInlineStart) * 4;
-        if (props.insetInlineEnd)
-            style.insetInlineEnd = Number(props.insetInlineEnd) * 4;
-        if (props.insetBlockStart)
-            style.insetBlockStart = Number(props.insetBlockStart) * 4;
-        if (props.insetBlockEnd)
-            style.insetBlockEnd = Number(props.insetBlockEnd) * 4;
-        return style;
-    }, [props.position, props.insetInlineStart, props.insetInlineEnd, props.insetBlockStart, props.insetBlockEnd]);
-    return (jsx("div", { className: "Polaris-GBlockCenter", style: {
-            ...stickyStyle,
-            '--gp-block-center-height': height,
-            '--gp-block-center-display': display,
-            '--gp-block-center-align': align,
-            '--gp-block-center-inline-align': inlineAlign,
-            '--gp-block-center-overflow-x': props.overflowX,
-            '--gp-block-center-overflow-y': props.overflowY,
-        }, children: jsx(Box, { ...props }) }));
+        return activatorText;
+    }, [selectedOption, activatorText]);
+    const handleSelect = (value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
+                    const isSelected = option.id === selected;
+                    const isHover = itemHover === option.id;
+                    const borderColor = isSelected ? 'input-border' : isHover ? 'border-hover' : 'transparent';
+                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }) }, option.id));
+                }) }) }) }));
 };
 
-const GTooltip = ({ isEnabled = true, content, maxWidth, ...props }) => {
-    const hasContent = isEnabled && !!content;
-    return hasContent ? (jsx(Tooltip, { width: "wide", hoverDelay: 500, content: content, ...props, accessibilityLabel: maxWidth?.toString() })) : (props.children);
+const ChoiceHelpText = ({ item }) => {
+    return (jsxs(Text, { as: "p", variant: "bodyMd", children: [item.description, item.inlineAction && (jsx(Link, { monochrome: true, onClick: () => {
+                    if (item.inlineAction?.onAction) {
+                        item.inlineAction?.onAction();
+                    }
+                    else {
+                        window.open(item.inlineAction?.url, item.inlineAction?.target ?? '_blank');
+                    }
+                }, children: item.inlineAction?.content }))] }));
 };
 
-const GButton = ({ activatorWrapper, children, iconRight, inset, stopPropagation = true, onClick, themeTone = 'light', variant, ...props }) => {
-    const Wrapper = activatorWrapper || 'div';
-    const isNeutral = variant === 'neutral';
-    const polarisVariant = isNeutral ? undefined : variant;
-    const handleClick = (e) => {
-        stopPropagation && e.stopPropagation();
-        if (props.disabled)
-            return;
-        onClick?.();
-    };
-    const button = (jsx(GTooltip, { activatorWrapper: "tooltip-content", ...props.tooltip, children: jsx(Wrapper, { className: cls('Polaris-GButton', {
-                'Polaris-GButton--icon-right': iconRight,
-                'Polaris-GButton--dark': themeTone === 'dark',
-                'Polaris-GButton--neutral': isNeutral,
-                'cursor-default': props.disabled,
-                'Polaris-GButton--fullWidth': props.fullWidth,
-                flex: inset,
-            }), onClick: handleClick, children: jsx(Button, { variant: polarisVariant, ...props, children: children }) }) }));
-    if (inset) {
-        return jsx(Box, { padding: "100", children: button });
-    }
-    return button;
+const GChartSkeleton = () => {
+    return jsx(GSkeletonDisplayText, { height: "188px" });
 };
 
-const GCheckbox = ({ ...props }) => {
-    return props.multiple ? jsx(GCheckboxMultiple, { ...props }) : jsx(GCheckboxSingle, { ...props });
-};
-const GCheckboxMultiple = ({ options, onChange, onChangeSingleValue, emptySelected, selected, onHover, itemHovered, dependentDisabledValues, }) => {
-    const [settingOptions, setSettingOptions] = useState([]);
-    const handleChange = (value) => {
-        if (onChangeSingleValue) {
-            onChangeSingleValue(value);
-        }
-        const updatedOptions = settingOptions.includes(value)
-            ? settingOptions.filter((item) => item !== value)
-            : [...settingOptions, value];
-        setSettingOptions(updatedOptions);
-        onChange(updatedOptions);
-    };
-    const handleHover = (value) => {
-        if (!onHover)
-            return;
-        onHover(value);
-    };
-    useEffect(() => {
-        setSettingOptions(() => {
-            if (selected) {
-                return options.filter((item) => selected.includes(item.value)).map((item) => item.value);
-            }
-            return [];
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected]);
-    return (jsx(BlockStack, { children: options.map((item) => {
-            const hasForceUnchecked = dependentDisabledValues?.has(item.value);
-            const isOnlyOneSelected = emptySelected && options.filter((opt) => opt.selected).length === 1 && emptySelected;
-            const handleCheckboxClick = () => {
-                if (isOnlyOneSelected)
-                    return;
-                handleChange(item.value);
-            };
-            return (jsx("div", { className: cls('flex w-full items-center justify-between', {
-                    'cursor-not-allowed': isOnlyOneSelected,
-                    'cursor-pointer': !isOnlyOneSelected,
-                    'bg-surface-hover rounded-lg': itemHovered === item.value,
-                }), onClick: () => {
-                    if (isOnlyOneSelected || item.disabled)
-                        return;
-                    handleCheckboxClick();
-                }, onMouseEnter: () => handleHover(item.value), onMouseLeave: () => handleHover(undefined), children: isOnlyOneSelected ? (jsx(GTooltip, { isEnabled: item.tooltip?.isEnabled, ...item.tooltip, children: jsx(Box, { paddingBlock: "150", paddingInline: "200", width: "100%", children: jsxs(InlineStack, { blockAlign: "center", gap: "150", children: [jsx(Checkbox, { label: item.label, labelHidden: true, checked: item.selected, disabled: true }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: item.label })] }) }) })) : (jsx(Box, { paddingBlock: "150", paddingInline: "200", minWidth: "0", children: jsxs(InlineStack, { blockAlign: "center", gap: "150", wrap: false, children: [jsx(Checkbox, { label: item.label, labelHidden: true, checked: hasForceUnchecked ? false : settingOptions.includes(item.value), onChange: handleCheckboxClick, disabled: item.disabled }), jsxs(Box, { minWidth: "0", children: [jsx(Text, { as: "p", variant: "bodyMd", truncate: true, tone: hasForceUnchecked ? 'disabled' : 'inherit', children: item.label }), item.description && (jsx(Text, { as: "p", variant: "bodySm", tone: "disabled", truncate: true, children: item.description }))] })] }) })) }, item.value));
-        }) }));
-};
-const GCheckboxSingle = ({ options, onChange }) => {
-    return (jsx(BlockStack, { gap: "300", children: options.map((item) => (jsx(RadioButton, { label: item.label, checked: item.selected, onChange: () => onChange(item.value), helpText: item.helpText ? jsx(ChoiceHelpText, { item: item }) : undefined }, item.value))) }));
+const LINE_SERIES_COLORS = {
+    comparison: SERIES_COLORS.comparison,
+    single: SERIES_COLORS.current,
+    all: [...SERIES_COLORS.all],
 };
-
-const GDiv = forwardRef(({ children, onClick, ...props }, ref) => {
-    const onKeyDown = useCallback((e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onClick?.();
-        }
-    }, [onClick]);
-    return (jsx("div", { ref: ref, ...props, role: "button", tabIndex: 0, onKeyDown: onKeyDown, onClick: onClick, children: children }));
-});
-GDiv.displayName = 'GDiv';
-
-const TRANSFORMER_REGEX = /\[(\d+)\](.*?)\[\]/g;
-const GI18NText = (props) => {
-    const { children, transformers } = props;
-    if (!transformers || Object.values(transformers).length === 0) {
-        return jsx(Text, { ...props, children: children });
-    }
-    const transformContent = (text) => {
-        const parts = [];
-        let lastIndex = 0;
-        text.replace(TRANSFORMER_REGEX, (match, number, childrenContent, offset) => {
-            parts.push(text.slice(lastIndex, offset));
-            const transformerFunction = transformers[number];
-            if (typeof transformerFunction === 'function') {
-                parts.push(transformerFunction(childrenContent));
-            }
-            else {
-                parts.push(match);
-            }
-            lastIndex = offset + match.length;
-            return match;
-        });
-        parts.push(text.slice(lastIndex));
-        return parts.map((part, index) => jsx(Fragment$1, { children: part }, index));
-    };
-    return jsx(Text, { ...props, children: typeof children === 'string' ? transformContent(children) : children });
+const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
+    return (jsx(PolarisVizProvider, { themes: {
+            Light: {
+                chartContainer: {
+                    minHeight,
+                },
+                grid: {
+                    horizontalOverflow: true,
+                    verticalOverflow: true,
+                    horizontalMargin: 0,
+                },
+                seriesColors,
+            },
+        }, children: children }));
 };
 
-function GOptionList({ options, selected, onChange }) {
-    const handleSelect = (value) => {
-        onChange([value]);
-    };
-    const handleKeyDown = (event, value) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            handleSelect(value);
-        }
+/**
+ * Returns a stateful value, and a set of memoized functions to toggle it,
+ * set it to true and set it to false
+ */
+function useToggle(initialState) {
+    const [value, setState] = useState(initialState);
+    return {
+        value,
+        toggle: useCallback(() => setState((state) => !state), []),
+        setTrue: useCallback(() => setState(true), []),
+        setFalse: useCallback(() => setState(false), []),
     };
-    return (jsx(Box, { padding: "150", children: jsx(BlockStack, { gap: "100", children: options.map((option) => {
-                const isSelected = selected.includes(option.value);
-                return (jsx("div", { role: "option", "aria-selected": isSelected, tabIndex: 0, onClick: () => handleSelect(option.value), onKeyDown: (e) => handleKeyDown(e, option.value), className: cls('p-1.5 pl-4 rounded-lg cursor-pointer', {
-                        'bg-[#F1F1F1]': isSelected,
-                        'hover:bg-[#F1F1F1]': !isSelected,
-                    }), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "200", children: [jsx(Box, { minWidth: "0", children: option.label }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }, option.value));
-            }) }) }));
 }
 
-const GSelector = (props) => {
-    const [popoverActive, setPopoverActive] = useState(false);
-    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = (text) => text.join(', '), } = props;
-    const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
-    const selectedOption = useMemo(() => {
-        return options
-            .filter((item) => item.active || item.id === selected)
-            .map((item) => item.content || '')
-            .filter((item) => !!item);
-    }, [options, selected]);
-    const activatorContent = useMemo(() => {
-        if (selectedOption.length) {
-            const selected = formatActivatorContent(selectedOption);
-            return activatorText ? `${activatorText}: ${selected}` : selected;
+const NONE_VALUE = 'None';
+const PLACEHOLDER_VALUE = '-';
+
+const TOTALS_SUFFIX = '___totals';
+const COMPARE_PREFIX = 'comparison___';
+const COMPARE_SUFFIX = '___previous_period';
+const COMPARE_TOTALS_SUFFIX = `${COMPARE_SUFFIX}${TOTALS_SUFFIX}`;
+
+const OPERATOR_IS = 'is';
+
+var EAnalyticDataType;
+(function (EAnalyticDataType) {
+    EAnalyticDataType["DATE"] = "DATE";
+    EAnalyticDataType["ARRAY"] = "ARRAY";
+    EAnalyticDataType["OBJECT"] = "OBJECT";
+    EAnalyticDataType["STRING"] = "STRING";
+    EAnalyticDataType["INTEGER"] = "INTEGER";
+    EAnalyticDataType["CURRENCY"] = "CURRENCY";
+    EAnalyticDataType["PERCENT"] = "PERCENT";
+    EAnalyticDataType["DURATION"] = "DURATION";
+    EAnalyticDataType["MONTH"] = "MONTH_TIMESTAMP";
+    EAnalyticDataType["QUARTER"] = "QUARTER_TIMESTAMP";
+    EAnalyticDataType["DAY"] = "DAY_TIMESTAMP";
+    EAnalyticDataType["WEEK"] = "WEEK_TIMESTAMP";
+    EAnalyticDataType["YEAR"] = "YEAR_TIMESTAMP";
+    EAnalyticDataType["HOUR"] = "HOUR_TIMESTAMP";
+})(EAnalyticDataType || (EAnalyticDataType = {}));
+var EAnalyticColumnKey;
+(function (EAnalyticColumnKey) {
+    EAnalyticColumnKey["CAMPAIGNS"] = "experiments";
+    EAnalyticColumnKey["VISITOR_ITEMS"] = "visitor_items";
+    EAnalyticColumnKey["DEVICE_ITEMS"] = "device_items";
+    EAnalyticColumnKey["TRAFFIC_SOURCE_ITEMS"] = "traffic_source_items";
+})(EAnalyticColumnKey || (EAnalyticColumnKey = {}));
+
+var EAnalyticSource;
+(function (EAnalyticSource) {
+    EAnalyticSource["SESSIONS"] = "sessions";
+    EAnalyticSource["SALES"] = "sales";
+})(EAnalyticSource || (EAnalyticSource = {}));
+
+var EComparisonOperator;
+(function (EComparisonOperator) {
+    EComparisonOperator["EQ"] = "=";
+    EComparisonOperator["IN"] = "IN";
+    EComparisonOperator["LIKE"] = "LIKE";
+})(EComparisonOperator || (EComparisonOperator = {}));
+var EGroupOperator;
+(function (EGroupOperator) {
+    EGroupOperator["OR"] = "OR";
+    EGroupOperator["AND"] = "AND";
+})(EGroupOperator || (EGroupOperator = {}));
+
+var EFilterField;
+(function (EFilterField) {
+    EFilterField["DEVICE"] = "device";
+    EFilterField["DEVICES"] = "devices";
+    EFilterField["VISITOR"] = "visitor_type";
+    EFilterField["VISITORS"] = "visitor_types";
+    EFilterField["TRAFFIC_SOURCE"] = "traffic_source";
+    EFilterField["TRAFFIC_SOURCES"] = "traffic_sources";
+    EFilterField["VERSION"] = "version";
+    EFilterField["VERSIONS"] = "versions";
+    EFilterField["SINGLE_PAGE"] = "page_path";
+    EFilterField["LIST_PAGE"] = "page_paths";
+    EFilterField["GROUP_CAMPAIGN_ITEM"] = "group_campaign_item";
+    EFilterField["GROUP_CAMPAIGN_ITEMS"] = "group_campaign_items";
+    EFilterField["SINGLE_CAMPAIGN"] = "experiment_id";
+    EFilterField["GROUP_CAMPAIGN"] = "experiment_group_id";
+    EFilterField["CAMPAIGN_VERSION_ID"] = "version_id";
+    EFilterField["GROUP_CAMPAIGN_VERSION_ID"] = "group_version_id";
+})(EFilterField || (EFilterField = {}));
+
+var EOperatorField;
+(function (EOperatorField) {
+    EOperatorField["DEVICE_OPERATOR"] = "deviceOperator";
+    EOperatorField["VISITOR_OPERATOR"] = "visitorOperator";
+    EOperatorField["TRAFFIC_SOURCE_OPERATOR"] = "trafficSourceOperator";
+    EOperatorField["VERSION_OPERATOR"] = "versionOperator";
+    EOperatorField["PAGE_OPERATOR"] = "pageOperator";
+    EOperatorField["CAMPAIGN_ITEM_OPERATOR"] = "campaignItemOperator";
+})(EOperatorField || (EOperatorField = {}));
+
+/**
+ * Controls which totals columns are appended to the query result.
+ *
+ * - NONE   → no totals, GROUP BY only.
+ * - TOTALS → adds `<metric>___totals` (grand total only). Use with single-dimension GROUP BY.
+ * - ALL    → adds subtotals per dimension group + grand total. Use with multi-dimension GROUP BY.
+ */
+var EGroupWithClause;
+(function (EGroupWithClause) {
+    EGroupWithClause["NONE"] = "";
+    EGroupWithClause["TOTALS"] = "TOTALS";
+    EGroupWithClause["ALL"] = "WITH GROUP_TOTALS, TOTALS";
+})(EGroupWithClause || (EGroupWithClause = {}));
+
+var EOrderDirectionType;
+(function (EOrderDirectionType) {
+    EOrderDirectionType["ASC"] = "ASC";
+    EOrderDirectionType["DESC"] = "DESC";
+})(EOrderDirectionType || (EOrderDirectionType = {}));
+
+var EPageMetric;
+(function (EPageMetric) {
+    EPageMetric["PAGE_ITEMS"] = "page_items";
+    EPageMetric["PAGE_PATHS"] = "page_paths";
+})(EPageMetric || (EPageMetric = {}));
+var EPageDimension;
+(function (EPageDimension) {
+    EPageDimension["PAGE_PATH"] = "page_path";
+})(EPageDimension || (EPageDimension = {}));
+var EPageField;
+(function (EPageField) {
+    EPageField["SHOPIFY_PAGE_ID"] = "shopify_page_id";
+    EPageField["LOCATION_PATH"] = "location_path";
+    EPageField["PAGE_TYPE"] = "page_type";
+    EPageField["PAGE_TITLE"] = "page_title";
+    EPageField["PAGE_PATH"] = "page_path";
+    EPageField["TEMPLATE_SUFFIX"] = "template_suffix";
+})(EPageField || (EPageField = {}));
+
+var ERowReaderMode;
+(function (ERowReaderMode) {
+    ERowReaderMode["DEFAULT"] = "DEFAULT";
+    ERowReaderMode["COMPARISON"] = "COMPARISON";
+    ERowReaderMode["TOTALS"] = "TOTALS";
+    ERowReaderMode["COMPARISON_TOTALS"] = "COMPARISON_TOTALS";
+})(ERowReaderMode || (ERowReaderMode = {}));
+
+var ETimeDimension;
+(function (ETimeDimension) {
+    ETimeDimension["HOUR"] = "hour";
+    ETimeDimension["DAY"] = "day";
+    ETimeDimension["WEEK"] = "week";
+    ETimeDimension["MONTH"] = "month";
+    ETimeDimension["QUARTER"] = "quarter";
+    ETimeDimension["YEAR"] = "year";
+})(ETimeDimension || (ETimeDimension = {}));
+
+({
+    [ERowReaderMode.DEFAULT]: { prefix: '', suffix: '' },
+    [ERowReaderMode.COMPARISON]: { prefix: COMPARE_PREFIX, suffix: COMPARE_SUFFIX },
+    [ERowReaderMode.TOTALS]: { prefix: '', suffix: TOTALS_SUFFIX },
+    [ERowReaderMode.COMPARISON_TOTALS]: { prefix: COMPARE_PREFIX, suffix: COMPARE_TOTALS_SUFFIX },
+});
+
+const formatAnalyticDate = (dateString) => {
+    if (!dateString)
+        return 'None';
+    const date = dayjsTz(dateString);
+    const now = dayjsTz();
+    const yesterday = dayjsTz().subtract(1, 'day');
+    const isToday = date.format('YYYY-MM-DD') === now.format('YYYY-MM-DD');
+    const isYesterday = date.format('YYYY-MM-DD') === yesterday.format('YYYY-MM-DD');
+    if (isToday) {
+        return `Today at ${date.format('HH:mm')}`;
+    }
+    if (isYesterday) {
+        return `Yesterday at ${date.format('HH:mm')}`;
+    }
+    const daysDiff = now.diff(date, 'day');
+    const isWithinWeek = daysDiff >= 0 && daysDiff < 7;
+    if (isWithinWeek) {
+        return `${date.format('dddd')} at ${date.format('HH:mm')}`;
+    }
+    return `${date.format('MMM D')} at ${date.format('hh:mm a')}`;
+};
+
+const formatAnalyticData = ({ value, formatter, getTextPrice, name, }) => {
+    const dataTypeIsObjectOrArray = value !== null && (typeof value === 'object' || Array.isArray(value));
+    if (dataTypeIsObjectOrArray)
+        return value;
+    switch (formatter) {
+        case EAnalyticDataType.INTEGER: {
+            return numberWithCommas((value ?? 0).toString());
         }
-        if (emptyLabel) {
-            return activatorText ? `${activatorText}: ${emptyLabel}` : emptyLabel;
+        case EAnalyticDataType.CURRENCY: {
+            if (!getTextPrice)
+                return `${value ?? 0}`;
+            return getTextPrice(value, false);
         }
-        return activatorText;
-    }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
-    const selectorMarkup = useMemo(() => {
-        switch (props.variant) {
-            case 'choice':
-                return jsx(GSelectorChoice, { ...props, setPopoverActive: togglePopoverActive });
-            case 'action-list':
-                return jsx(GSelectorActionList, { ...props, setPopoverActive: togglePopoverActive });
+        case EAnalyticDataType.DATE: {
+            return formatAnalyticDate(value);
         }
-    }, [props, togglePopoverActive]);
-    return (jsx(Popover, { active: popoverActive, activator: jsx("div", { className: "flex items-center gap-1", children: jsx(Button, { onClick: togglePopoverActive, disclosure: popoverActive ? 'up' : 'down', children: activatorContent }) }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: selectorMarkup }));
+        case EAnalyticDataType.PERCENT: {
+            if (typeof value !== 'number')
+                return calcPercentageString(0, 1, 2) ?? '';
+            return calcPercentageString(value / 100, 1, 2) ?? '';
+        }
+        case EAnalyticDataType.DURATION: {
+            return getTimeDurationLabel(Number(value));
+        }
+        case EAnalyticDataType.STRING: {
+            const fallbackValue = name === EAnalyticColumnKey.CAMPAIGNS ? '' : NONE_VALUE;
+            return value ?? fallbackValue;
+        }
+        case EAnalyticDataType.DAY: {
+            return getFormattedByInterval(value, AnalyticInterval.DAY, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.HOUR: {
+            return getFormattedByInterval(value, AnalyticInterval.HOUR, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.MONTH: {
+            return getFormattedByInterval(value, AnalyticInterval.MONTH, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.YEAR: {
+            return getFormattedByInterval(value, AnalyticInterval.YEAR);
+        }
+        case EAnalyticDataType.WEEK: {
+            return getFormattedByInterval(value, AnalyticInterval.WEEK, { isExpandDetail: true });
+        }
+        case EAnalyticDataType.QUARTER: {
+            return getFormattedByInterval(value, AnalyticInterval.QUARTER, {
+                isExpandDetail: true,
+            });
+        }
+        case EAnalyticDataType.OBJECT:
+        case EAnalyticDataType.ARRAY: {
+            return value;
+        }
+        default:
+            return `${value}`;
+    }
+};
+
+const SESSION_KEY = 'sessions';
+const hasMetricData = (metric) => {
+    const sessions = metric?.[SESSION_KEY];
+    return typeof sessions === 'number' && sessions > 0;
+};
+
+const parseRawJson = (raw) => {
+    if (!raw)
+        return undefined;
+    return typeof raw === 'string' ? JSON.parse(raw) : raw;
+};
+const parseJsonArray = (raw) => {
+    try {
+        const parsed = parseRawJson(raw);
+        if (!Array.isArray(parsed))
+            return undefined;
+        return parsed;
+    }
+    catch {
+        return undefined;
+    }
+};
+const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...item, total: Number(item.total) }));
+
+const readNumeric = (metric, key) => {
+    const raw = metric?.[key];
+    return typeof raw === 'number' ? raw : 0;
+};
+
+const useAnalyticData = (getTextPrice) => {
+    const formatData = ({ value, formatter, name }) => {
+        return formatAnalyticData({ value, formatter, getTextPrice, name });
+    };
+    const computeMetric = ({ metric, previousMetric, metricKey, formatter, }) => {
+        if (!hasMetricData(metric))
+            return { value: 0, change: PLACEHOLDER_VALUE };
+        const currentValue = readNumeric(metric, metricKey);
+        const previousValue = readNumeric(previousMetric, metricKey);
+        const value = formatData({ value: currentValue, formatter, name: metricKey });
+        if (currentValue === 0 && previousValue !== 0)
+            return { value, change: -100 };
+        if (previousValue === 0)
+            return { value, change: PLACEHOLDER_VALUE };
+        const change = ((currentValue - previousValue) / previousValue) * 100;
+        return { value, change };
+    };
+    return { formatData, computeMetric };
+};
+
+var GPaginationDirection;
+(function (GPaginationDirection) {
+    GPaginationDirection["NEXT"] = "NEXT";
+    GPaginationDirection["PREV"] = "PREV";
+})(GPaginationDirection || (GPaginationDirection = {}));
+
+const useFormatLineChartData = ({ metricKey, columnTypes }) => {
+    const { formatData } = useAnalyticData();
+    const formatter = metricKey ? columnTypes?.[metricKey] : undefined;
+    const formatValue = (value) => {
+        return String(formatData({ value, formatter }));
+    };
+    const yAxisOptions = {
+        labelFormatter: (value) => {
+            return formatValue(Number(value) || 0);
+        },
+    };
+    return { formatValue, yAxisOptions };
+};
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(() => ({
+        width: typeof window !== 'undefined' ? window.innerWidth : 0,
+        height: typeof window !== 'undefined' ? window.innerHeight : 0,
+    }));
+    const windowWidth = useMemo(() => {
+        return {
+            xs: windowSize.width <= 768,
+            md: 768 < windowSize.width && windowSize.width <= 1024,
+            lg: windowSize.width > 1024,
+            xsDown: windowSize.width < 768,
+            '1200Down': windowSize.width < 1200,
+            '1040Down': windowSize.width < 1040,
+        };
+    }, [windowSize.width]);
+    const isMobileTabletView = !windowWidth.lg;
+    const isMobileView = windowWidth.xs;
+    useEffect(() => {
+        const windowSizeHandler = () => {
+            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        };
+        window.addEventListener('resize', windowSizeHandler);
+        return () => {
+            window.removeEventListener('resize', windowSizeHandler);
+        };
+    }, []);
+    return { windowSize, windowWidth, isMobileTabletView, isMobileView };
+};
+
+const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
+    const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
+    if (!metricKey) {
+        return jsx(Fragment, {});
+    }
+    if (isLoading) {
+        return jsx(GChartSkeleton, {});
+    }
+    if (isEmptyMetricData) {
+        return jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" });
+    }
+    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: yAxisOptions, theme: "Light", tooltipOptions: {
+                titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
+                keyFormatter: (value) => {
+                    return value;
+                },
+                renderTooltipContent(data) {
+                    return jsx(MetricChartTooltip, { data: data, formatValue: formatValue });
+                },
+            }, showLegend: true }) }));
+};
+
+var IMAGE_ANALYTIC_EMPTY = "data:image/png;base64,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";
+
+const MetricChartEmpty = ({ boxProps, minHeight, description, title }) => {
+    return (jsx(Box, { minWidth: "100%", ...boxProps, children: jsx(GBlockCenter, { minHeight: minHeight, children: jsx(Box, { padding: '400', children: jsxs(BlockStack, { gap: "400", align: "center", inlineAlign: "center", children: [jsx("div", { className: "h-[80px] w-[80px]", children: jsx(GThumbnail, { source: IMAGE_ANALYTIC_EMPTY, width: "80px", height: "80px", alt: title, classRemoved: true }) }), jsxs(BlockStack, { gap: "200", align: "center", inlineAlign: "center", children: [jsx(Text, { as: "h4", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "h4", variant: "bodyMd", tone: "subdued", children: description })] })] }) }) }) }));
+};
+
+const DownIcon8px = () => {
+    return (jsxs("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_18114_1160)", children: jsx("path", { d: "M1 1L6.5 6.5M6.5 6.5V1.5M6.5 6.5H1.5", stroke: "#8A8A8A", strokeWidth: "1.5" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_18114_1160", children: jsx("rect", { width: "8", height: "8", fill: "white" }) }) })] }));
+};
+
+const UpIcon8px = () => {
+    return (jsxs("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_18114_1146)", children: jsx("path", { d: "M1 7L6.5 1.5M6.5 1.5H1.5M6.5 1.5V6.5", stroke: "#29845A", strokeWidth: "1.5" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_18114_1146", children: jsx("rect", { width: "8", height: "8", fill: "white", transform: "matrix(0 -1 1 0 0 8)" }) }) })] }));
+};
+
+const MetricPercentage = ({ change }) => {
+    if (typeof change !== 'number') {
+        return jsx("div", { style: { height: '2px', width: '11px', backgroundColor: '#8A8A8A' } });
+    }
+    return (jsxs("div", { style: {
+            display: 'flex',
+            maxHeight: '20px',
+            width: 'fit-content',
+            alignItems: 'center',
+            gap: '4px',
+            borderRadius: '8px',
+            fontSize: '12px',
+            color: change > 0 ? TREND_TONE.POSITIVE : TREND_TONE.NEUTRAL,
+        }, children: [change < 0 && (jsx(InlineStack, { align: "center", children: jsx(DownIcon8px, {}) })), change > 0 && (jsx(InlineStack, { align: "center", children: jsx(UpIcon8px, {}) })), jsx(Text, { as: "span", variant: "bodyXs", fontWeight: "semibold", children: formatPercentage(Math.abs(change || 0)) })] }));
+};
+
+const MetricChartTooltip = ({ data, formatValue }) => {
+    const { activeIndex } = data;
+    const currentData = data?.dataSeries[0]?.data[activeIndex];
+    const previousData = data?.dataSeries[1]?.data[activeIndex];
+    const formatPercent = () => {
+        const value = currentData.trend?.value;
+        if (!value)
+            return PLACEHOLDER_VALUE$1;
+        const valueNumber = Number(value.replace(/[%~]/g, ''));
+        if (currentData.trend?.trend === 'negative') {
+            return valueNumber * -1;
+        }
+        return valueNumber;
+    };
+    return (jsx("div", { className: "w-fit min-w-[175px]", children: jsx(Card, { padding: '200', children: jsxs(BlockStack, { gap: '100', children: [jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: data.formatters?.titleFormatter?.(data.title || '') || data.title }), jsxs(BlockStack, { gap: '100', children: [jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]" }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: currentData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(currentData.value) }), jsx(MetricPercentage, { change: formatPercent() })] })] }), jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "w-[12px] border border-dashed border-[#A1CAE7]" }), jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: previousData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(previousData.value) }), jsx("div", { className: "opacity-0", children: jsx(MetricPercentage, { change: formatPercent() }) })] })] })] })] }) }) }));
+};
+
+const MetricInfoSkeleton = ({ isShowOneLine }) => {
+    if (isShowOneLine) {
+        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
+    }
+    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
+};
+
+const MetricDonutChartSkeleton = () => {
+    return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
+};
+
+const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", wrap: false, children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
+
+const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, onClickTitle, }) => {
+    const { key, title, totalValue } = item;
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
+    if (isLoading)
+        return jsx(MetricInfoSkeleton, {});
+    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: (e) => {
+                    e?.stopPropagation();
+                    onClickTitle?.(key);
+                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
+};
+
+const MetricChartTab = ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const isHighlighted = isActive || isHovered;
+    return (jsx("div", { className: "w-full cursor-pointer overflow-hidden", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(item.key), children: jsx(Box, { paddingBlock: "150", paddingInline: "300", borderRadius: "200", background: isHighlighted ? 'bg-surface-active' : undefined, children: jsx(MetricInfoBlock, { item: item, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, titleVariant: "headingSm", titleFontWeight: "semibold", onClickTitle: onClickTitle }) }) }));
+};
+
+const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab);
+    const lineChartData = useMemo(() => {
+        const chartData = activeTab ? dataChart[activeTab] : undefined;
+        if (!chartData)
+            return [];
+        const currentSeries = { name: currentPeriodLabel, data: chartData.current };
+        if (hideComparison)
+            return [currentSeries];
+        return [currentSeries, { name: previousPeriodLabel, data: chartData.previous, isComparison: true }];
+    }, [activeTab, dataChart, hideComparison, currentPeriodLabel, previousPeriodLabel]);
+    return (jsxs(Card, { children: [jsx("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
+                    gap: '16px',
+                    marginBottom: '16px',
+                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
+};
+
+EGroupOperator.OR;
+
+[
+    {
+        operator: EOperatorField.DEVICE_OPERATOR,
+        singleField: EFilterField.DEVICE,
+        multiField: EFilterField.DEVICES,
+        fieldName: EFilterField.DEVICE,
+    },
+    {
+        operator: EOperatorField.VISITOR_OPERATOR,
+        singleField: EFilterField.VISITOR,
+        multiField: EFilterField.VISITORS,
+        fieldName: EFilterField.VISITOR,
+    },
+    {
+        operator: EOperatorField.TRAFFIC_SOURCE_OPERATOR,
+        singleField: EFilterField.TRAFFIC_SOURCE,
+        multiField: EFilterField.TRAFFIC_SOURCES,
+        fieldName: EFilterField.TRAFFIC_SOURCE,
+    },
+    {
+        operator: EOperatorField.VERSION_OPERATOR,
+        singleField: EFilterField.VERSION,
+        multiField: EFilterField.VERSIONS,
+        fieldName: EFilterField.VERSION,
+    },
+    {
+        operator: EOperatorField.PAGE_OPERATOR,
+        singleField: EFilterField.SINGLE_PAGE,
+        multiField: EFilterField.LIST_PAGE,
+        fieldName: EFilterField.SINGLE_PAGE,
+    },
+    {
+        operator: EOperatorField.CAMPAIGN_ITEM_OPERATOR,
+        singleField: EFilterField.GROUP_CAMPAIGN_ITEM,
+        multiField: EFilterField.GROUP_CAMPAIGN_ITEMS,
+        condition: EFilterField.GROUP_CAMPAIGN,
+        fieldName: EFilterField.SINGLE_CAMPAIGN,
+    },
+    {
+        operatorVal: OPERATOR_IS,
+        singleField: EFilterField.SINGLE_CAMPAIGN,
+        multiField: EFilterField.GROUP_CAMPAIGN,
+    },
+];
+
+const calculatePercentageChange = (current, previous) => {
+    if (current === 0 && previous === 0) {
+        return undefined;
+    }
+    if (previous === 0) {
+        return current > 0 ? '100%' : '0%';
+    }
+    const change = ((current - previous) / previous) * 100;
+    return `${Math.abs(change).toFixed(0)}%`;
 };
-const GSelectorChoice = ({ options, selected, onSelect, maxWidth, minWidth, clearable, setPopoverActive, }) => {
-    const { t } = useTranslation();
-    const items = useMemo(() => {
-        if (!options?.length)
-            return [];
-        return options.map((option) => ({
-            value: option.id,
-            label: option.content || '',
-            selected: false,
-        }));
-    }, [options]);
-    const handleSelection = useCallback((value) => {
-        onSelect(value);
-    }, [onSelect]);
-    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, paddingBlock: "150", children: jsxs(BlockStack, { children: [jsx(BlockStack, { gap: "0", children: jsx(GCheckbox, { multiple: true, options: items, selected: selected, onChange: handleSelection }) }), clearable && (jsx(Box, { paddingBlock: "150", paddingInline: "200", children: jsx(InlineStack, { blockAlign: "center", align: "start", children: jsx(Button, { disabled: !selected?.length, onClick: () => {
-                                handleSelection([]);
-                                setPopoverActive(false);
-                            }, variant: "plain", children: t('Clear') }) }) }))] }) }));
+const computeDonutData = ({ name, currentValue, prevValue, hasPreviousData, }) => ({
+    name,
+    data: [{ key: 'value', value: currentValue }],
+    metadata: {
+        trend: {
+            value: hasPreviousData ? calculatePercentageChange(currentValue, prevValue) : undefined,
+            direction: currentValue >= prevValue ? 'upward' : 'downward',
+            trend: currentValue >= prevValue ? 'positive' : 'negative',
+        },
+    },
+});
+const getTotalCountByType = (stats, type) => {
+    const item = stats?.find((stat) => stat?.type?.toLowerCase() === type.toLowerCase());
+    return item?.total ?? 0;
 };
-const GSelectorActionList = ({ options, selected, onSelect, helpText, maxWidth, minWidth, setPopoverActive, }) => {
-    const handleSelection = useCallback((value) => {
-        onSelect(value);
-        setPopoverActive(false);
-    }, [onSelect, setPopoverActive]);
-    const items = useMemo(() => {
-        if (!options?.length)
-            return [];
-        return options.map((option) => ({
-            id: option.id,
-            content: option.content,
-            helpText: option.helpText,
-            onAction: () => handleSelection(option.id),
-            active: option.active || option.id === selected,
-            suffix: (option.active || option.id === selected) && jsx(Icon, { source: SvgCheckIcon, tone: "success" }),
-        }));
-    }, [options, selected, handleSelection]);
-    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, children: jsxs(BlockStack, { gap: "0", children: [jsx(ActionList, { actionRole: "menuitem", items: items }), helpText] }) }));
+const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTotalsRow, sort, }) => {
+    const items = parseBreakdownItems(totalsRow?.[metricKey]);
+    const comparisonItems = parseBreakdownItems(comparisonTotalsRow?.[metricKey]);
+    const hasPreviousData = !!comparisonTotalsRow?.[metricKey];
+    const result = targets.map(({ value, label }) => computeDonutData({
+        name: label,
+        currentValue: getTotalCountByType(items, value),
+        prevValue: getTotalCountByType(comparisonItems, value),
+        hasPreviousData,
+    }));
+    const getValue = (item) => item.data[0]?.value ?? 0;
+    return sort ? [...result].sort((a, b) => getValue(b) - getValue(a)) : result;
 };
 
-const GTextLink = ({ linkAction, isDisabled, disabledFocus, children }) => {
-    if (!linkAction || isDisabled) {
-        return jsx(Fragment, { children: children });
+const DONUT_CHART_MIN_HEIGHT = 294;
+const COMPACT_MAX_WIDTH = 1500;
+const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, onClick, }) => {
+    const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
+    const { windowWidth, windowSize } = useWindowSize();
+    const [isHovered, setIsHovered] = useState(false);
+    const data = useMemo(() => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }), [targets, metricKey, totalsRow, comparisonTotalsRow, sort]);
+    if (isLoading) {
+        return jsx(MetricDonutChartSkeleton, {});
     }
-    return (jsx("span", { className: cls('GTextLink', { 'GTextLink--disabled-focus': disabledFocus }), children: jsx(Link, { ...linkAction, children: jsx(Fragment, { children: children }) }) }));
+    const formatValue = (value) => {
+        return numberWithCommas(`${value}`);
+    };
+    const handleClickTitle = (event) => {
+        event.stopPropagation();
+        onClick();
+    };
+    const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
+                            'max-h-[250px] overflow-hidden': isCompactView,
+                        }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
+                                    valueFormatter: formatValue,
+                                }, labelFormatter: formatValue }) })) })] }) }) }));
 };
 
-const GSkeletonDisplayText = (props) => {
-    const height = props.height ?? '50px';
-    return (jsxs("div", { className: "Polaris-GSkeletonDisplayText", children: [jsx("style", { children: `.Polaris-GSkeletonDisplayText .Polaris-SkeletonDisplayText__DisplayText { height: ${height} !important; }` }), jsx(SkeletonDisplayText, { maxWidth: "100%", size: "extraLarge" })] }));
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
 };
 
-/**
- * Helper function to generate a variation class name.
- * @param name - Base name of the class.
- * @param value - Variation value to append.
- * @returns Combined class name.
- */
-function variationName(name, value) {
-    return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-}
-const GThumbnail = ({ source, alt, size, grayscale, defaultSource = THUMB_PRODUCT_DEFAULT, width = '80', height = '80', classRemoved = false, }) => {
-    const sizeClass = size && variationName('Polaris-Thumbnail--size', size);
-    const filterClass = grayscale && 'Polaris-GThumbnail--filter';
-    const className = cls('Polaris-Thumbnail', sizeClass);
-    const thumbnail = (jsx("img", { onError: (e) => {
-            e.currentTarget.src = defaultSource;
-        }, alt: alt ?? 'Thumbnail', src: `${source ?? defaultSource}`, width: width, height: height, style: {
-            '--gp-grayscale-percentage': grayscale || '100%',
-        }, className: cls('Polaris-GThumbnail', filterClass) }));
-    if (classRemoved)
-        return thumbnail;
-    return jsx("span", { className: className, children: thumbnail });
-};
+var IMAGE_FIRST_SESSION = "data:image/png;base64,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";
 
-const SIZE_CLASS = {
-    default: 'w-[210px]',
-    wide: 'w-[320px]',
-    large: 'w-[328px]',
-};
-const ALIGNMENT_MAP = {
-    start: 'flex justify-start',
-    center: 'flex justify-center',
-    end: 'flex justify-end',
-};
-const GTooltipCard = forwardRef((props, ref) => {
-    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
-    const { width = 'default' } = tooltip ?? {};
-    const [isMouseEnter, setIsMouseEnter] = useState(false);
-    const TooltipCardWrapper = wrapper;
-    const sizeClass = SIZE_CLASS[width];
-    const timeoutRef = useRef(null);
-    const handleMouseEnter = () => {
-        timeoutRef.current = setTimeout(() => {
-            setIsMouseEnter(true);
-        }, delay);
+var IMAGE_ALL_SESSION = "data:image/png;base64,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";
+
+const VIEW_BY_OPTIONS = [
+    {
+        id: EAnalyticMode.ALL_SESSION,
+        content: 'All sessions',
+        helpText: 'Count metrics for all sessions where this page shows up anywhere in the journey: before, during, or after other pages.',
+        icon: IMAGE_ALL_SESSION,
+    },
+    {
+        id: EAnalyticMode.FIRST_SESSION,
+        content: 'Entry session only',
+        helpText: 'Count metrics for sessions only where this page was the very first page visited, then track how they moved through the funnel.',
+        icon: IMAGE_FIRST_SESSION,
+    },
+];
+const AnalyticModeSelector = ({ activatorText = 'View by', value, onChange }) => {
+    const options = useMemo(() => {
+        return VIEW_BY_OPTIONS.map((option) => ({
+            ...option,
+        }));
+    }, []);
+    const onSelectMode = (value) => {
+        onChange(value);
     };
-    const handleMouseLeave = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
+    return (jsx(GViewBySelector, { activatorText: activatorText, options: options, selected: value, onSelect: onSelectMode, maxWidth: "650px" }));
+};
+
+const EXCHANGE_RATE_HELP_URL = 'https://help.shopify.com/en/manual/international/pricing/exchange-rates#auto-convert';
+const CurrencySelector = ({ currencies, selected, preferredAlignment = 'left', activatorText, onSelect, }) => {
+    const { t } = useTranslation();
+    const onSelectRef = useRef(onSelect);
+    const handleSelection = useCallback((value) => {
+        onSelectRef.current?.(value);
+    }, []);
+    const actionItems = useMemo(() => {
+        if (!currencies)
+            return [];
+        const formattedCurrencies = currencies.map((currency) => ({
+            content: currency,
+            id: currency,
+        }));
+        const hasCurrencyDefault = formattedCurrencies.some((item) => item.id === DEFAULT_CURRENCY_ANALYTIC);
+        if (!hasCurrencyDefault) {
+            formattedCurrencies.push({
+                content: DEFAULT_CURRENCY_ANALYTIC,
+                id: DEFAULT_CURRENCY_ANALYTIC,
+            });
         }
-        setIsMouseEnter(false);
-    };
-    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
-    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer', alignment && ALIGNMENT_MAP[alignment], {
-            'GTooltipCard--text-underline': textDecoration === 'underline',
-        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && (jsx("div", { className: "rounded-md font-mono", style: { fontSize: '12px' }, children: tooltip.formula }))] }) }) })) }) }));
-});
-GTooltipCard.displayName = 'GTooltipCard';
+        return sortByConditions(formattedCurrencies, [
+            { attr: 'content', order: 'asc', preferredValue: DEFAULT_CURRENCY_ANALYTIC },
+        ]);
+    }, [currencies]);
+    const actionListItems = useMemo(() => {
+        return actionItems.map((option) => ({
+            id: option.id,
+            content: option.content,
+            onAction: () => handleSelection(option.id),
+            active: option.id === selected,
+            suffix: option.id === selected && jsx(Icon, { source: SvgCheckIcon, tone: "success" }),
+            helpText: option.id === DEFAULT_CURRENCY_ANALYTIC && (jsx(Text, { as: "p", fontWeight: "semibold", children: t('Default') })),
+        }));
+    }, [actionItems, selected, handleSelection, t]);
+    const isHidden = useMemo(() => {
+        if (!actionItems?.length)
+            return true;
+        return actionItems.length === 1 && actionItems[0]?.id === DEFAULT_CURRENCY_ANALYTIC;
+    }, [actionItems]);
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    });
+    if (isHidden)
+        return null;
+    return (jsx(GSelector, { options: actionListItems, selected: selected, variant: "action-list", 
+        // value originates from our CurrencyCode option ids, so the widen-to-string round trip is safe
+        onSelect: (value) => handleSelection(value), activatorText: activatorText ?? t('Currency'), maxWidth: "225px", preferredAlignment: preferredAlignment, helpText: jsx(Box, { padding: "200", paddingBlockStart: "300", paddingBlockEnd: "300", borderColor: "border-tertiary", background: 'bg', children: jsx(GI18NText, { as: "p", variant: "bodyMd", transformers: {
+                    1: (text) => (jsx(GTextLink, { linkAction: {
+                            url: EXCHANGE_RATE_HELP_URL,
+                            target: '_blank',
+                        }, children: text }, text + 'text-link')),
+                }, children: t("This will follow Shopify's current exchange rate. [1]Read more[]") }) }) }));
+};
 
 var MainDateTimePickerAlias;
 (function (MainDateTimePickerAlias) {
@@ -1227,1341 +1626,903 @@ function getDateTimeFilterByAlias(alias) {
 
 const DATE_FORMAT = {
     YMD: 'YYYY-MM-DD', // 2025-01-01
-    MONTH_YEAR: 'MMM YYYY', // Jan 2025
-    FULL: 'MMMM D, YYYY', // January 1, 2025
-    FULL_WITH_TIME: 'MMMM D, YYYY [at] h:mm A', // January 1, 2025 at 12:00 AM
-    SHORT: 'MMM DD, YYYY', // Jan 01, 2025
-    SHORT_NO_PAD: 'MMM D, YYYY', // Jan 1, 2025
-    SHORT_WITH_TIME: 'MMM D, YYYY [at] h:mm A', // Jan 1, 2025 at 12:00 AM
-    MONTH_DAY: 'MMM D', // Jan 1
-    DAY_YEAR: 'D, YYYY', // 1, 2025
-    TIME: 'h:mm A', // 12:00 AM
-    MONTH_DAY_WITH_TIME: 'MMM D [at] h:mm A', // Jan 1 at 12:00 AM
-    YEAR: 'YYYY', // 2025
-};
-
-function parseYearMonthDayDateString(input) {
-    // Date-only strings (e.g. "1970-01-01") are treated as UTC, not local time
-    // when using new Date()
-    // We need to split year, month, day to pass into new Date() separately
-    // to get a localized Date
-    return dayjs(input).valueOf();
-}
-const VALID_YYYY_MM_DD_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}/;
-function isDate(date) {
-    return !isNaN(new Date(date).getDate());
-}
-function isValidYearMonthDayDateString(date) {
-    return VALID_YYYY_MM_DD_DATE_REGEX.test(date) && isDate(date);
-}
-function isValidDate(date) {
-    return date.length === 10 && isValidYearMonthDayDateString(date);
-}
-function formatDate(timestamp, type) {
-    const date = convertDateToTz(timestamp);
-    if (type === 'YMD') {
-        return date.format(DATE_FORMAT.YMD);
-    }
-    if (type === 'MY') {
-        return date.format(DATE_FORMAT.MONTH_YEAR);
-    }
-    if (type === 'FULL') {
-        return date.format(DATE_FORMAT.FULL);
-    }
-    if (type === 'FULL_WITH_TIME') {
-        return date.format(DATE_FORMAT.FULL_WITH_TIME);
-    }
-    return date.format(DATE_FORMAT.SHORT);
-}
-function formatTime(timestamp) {
-    const date = convertDateToTz(timestamp);
-    return date.format(DATE_FORMAT.TIME);
-}
-function isSameDayTimestamp(since, until) {
-    const sinceDate = convertDateToTz(since);
-    const untilDate = convertDateToTz(until);
-    return sinceDate.isSame(untilDate, 'day');
-}
-function formatTimeRange(data) {
-    const { since, until, format = DATE_FORMAT.TIME, showNow = false } = data;
-    const sinceDate = convertDateToTz(since);
-    const untilDate = convertDateToTz(until);
-    return `${sinceDate.format(format)} - ${showNow ? 'Now' : untilDate.format(format)}`;
-}
-function formatDateTimeRange(data) {
-    const { since, until, isShowNow } = data;
-    const sinceDate = convertDateToTz(since);
-    const untilDate = convertDateToTz(until);
-    const isToday = sinceDate.isSame(dayjsTz(), 'day');
-    const startTime = sinceDate.format(DATE_FORMAT.TIME);
-    const endTime = untilDate.format(DATE_FORMAT.TIME);
-    if (isToday) {
-        const formatEndTime = isShowNow ? 'Now' : endTime;
-        return `Today at ${startTime} - ${formatEndTime}`;
-    }
-    if (isShowNow) {
-        return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - Now`;
-    }
-    if (sinceDate.isSame(untilDate, 'day')) {
-        return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${endTime}`;
-    }
-    if (sinceDate.isSame(untilDate, 'day')) {
-        const time = formatTimeRange({ since, until });
-        return `${sinceDate.format(DATE_FORMAT.SHORT)} (${time})`;
-    }
-    if (sinceDate.isSame(untilDate, 'year')) {
-        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)}, ${untilDate.format(DATE_FORMAT.YEAR)}`;
-    }
-    return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.SHORT_WITH_TIME)}`;
-}
-const formatDayjs = (date, isEndDay = false, formatTemplate) => {
-    // const isUTC = date.isUTC?.() ?? false;
-    // if (isUTC) return date.format();
-    if (isEndDay && isMidnight(date)) {
-        return date.endOf('day').format(formatTemplate);
-    }
-    return date.format(formatTemplate);
-};
-const getEndOfDayBy = (value, formatTemplate) => {
-    if (!value) {
-        return formatDayjs(dayjsTz().endOf('day'), false, formatTemplate);
-    }
-    return formatDayjs(dayjsTz(value).endOf('day'), false, formatTemplate);
-};
-const isMidnight = (date) => {
-    return date.hour() === 0 && date.minute() === 0;
-};
-const formatMs = (ms) => {
-    const totalSeconds = Math.floor(ms / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-    return [hours, minutes, seconds].map((v) => String(v).padStart(2, '0')).join(':');
-};
-
-function getDateRangeTitle(since, until) {
-    const sinceDate = convertDateToTz(since);
-    const untilDate = convertDateToTz(until);
-    if (sinceDate.isSame(untilDate, 'day')) {
-        return sinceDate.format(DATE_FORMAT.SHORT);
-    }
-    if (sinceDate.isSame(untilDate, 'month') && sinceDate.isSame(untilDate, 'year')) {
-        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.DAY_YEAR)}`;
-    }
-    if (sinceDate.isSame(untilDate, 'year')) {
-        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
-    }
-    return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
-}
-/**
- * Resolves a { title, alias } pair from a since/until date range.
- * Matches against known presets (today, last 7 days, …); falls back to
- * a formatted custom range with alias "custom".
- */
-function getDateTimeFilterBase(since, until) {
-    const now = dayjsTz();
-    const sinceDate = convertDateToTz(since);
-    const untilDate = convertDateToTz(until);
-    const mappings = getDateTimeFilterMapping();
-    for (const mapping of Object.values(mappings)) {
-        const range = mapping.getDateRange(now);
-        const expectedSince = convertDateToTz(range.since);
-        const expectedUntil = convertDateToTz(range.until);
-        const isSameSince = sinceDate.isSame(expectedSince, 'day');
-        const isSameUntil = untilDate.isSame(expectedUntil, 'day');
-        if (isSameSince && isSameUntil) {
-            return { title: mapping.title, alias: mapping.alias };
-        }
-    }
-    return {
-        title: getDateRangeTitle(since, until),
-        alias: 'custom',
-    };
-}
-function getVersionDateRangeTitle(data) {
-    const { since, until, isShowNow } = data;
-    const sinceDate = convertDateToTz(since);
-    const isToday = sinceDate.isSame(dayjsTz(), 'day');
-    if (isToday)
-        return getDateTimeFilterByAlias(MainDateTimePickerAlias.TODAY).title;
-    if (isShowNow)
-        return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - Now`;
-    return getDateRangeTitle(since, until);
-}
-const getVersionDateDescription = ({ since, until, isShowNow }) => {
-    const isSameDay = isSameDayTimestamp(since, until);
-    if (!isSameDay)
-        return undefined;
-    return formatTimeRange({ since, until, showNow: isShowNow });
-};
-
-const convertToDateTimeFilters = (versions) => {
-    const dataVersions = [...versions].sort((a, b) => semverToNum(b.version) - semverToNum(a.version));
-    return dataVersions
-        .map((item) => {
-        if (!item.startedAt)
-            return false;
-        const isCurrentVersion = !item.completedAt;
-        const since = dayjsTzToLocalTZ(item.startedAt).valueOf();
-        const until = isCurrentVersion
-            ? dayjsTzToLocalTZ(getEndOfDayBy()).valueOf()
-            : dayjsTzToLocalTZ(item.completedAt).valueOf();
-        const title = getVersionDateRangeTitle({ since, until, isShowNow: isCurrentVersion });
-        const description = getVersionDateDescription({ since, until, isShowNow: isCurrentVersion });
-        return {
-            title,
-            alias: `${item.version}`,
-            since,
-            until,
-            isVersion: true,
-            isCurrentVersion,
-            description,
-            versionId: item.id,
-        };
-    })
-        .filter(Boolean);
-};
-
-const getNoComparison = () => {
-    return {
-        since: 0,
-        until: 0,
-    };
-};
-const getPreviousPeriod = (value) => {
-    const { since, until, alias } = value;
-    const sinceDate = dayjs(since);
-    const untilDate = dayjs(until);
-    if (alias === MainDateTimePickerAlias.LAST_MONTH) {
-        return getLastMonth(sinceDate);
-    }
-    if (alias === MainDateTimePickerAlias.LAST_12_MONTHS) {
-        return getLast12Months(sinceDate);
-    }
-    if (alias === MainDateTimePickerAlias.LAST_YEAR) {
-        return getLastYear(sinceDate);
-    }
-    const duration = untilDate.diff(sinceDate, 'day') + 1;
-    const previousSince = sinceDate.subtract(duration, 'day');
-    const previousUntil = untilDate.subtract(duration, 'day');
-    return {
-        since: previousSince.valueOf(),
-        until: previousUntil.valueOf(),
-    };
-};
-const createPreviousRange = (subtractAmount, subtractUnit) => (value) => {
-    const { since, until } = value;
-    const sinceDate = dayjs(since);
-    const untilDate = dayjs(until);
-    const duration = untilDate.diff(sinceDate, 'day');
-    const previousSince = sinceDate.subtract(subtractAmount, subtractUnit);
-    const previousUntil = previousSince.add(duration, 'day');
-    return {
-        since: previousSince.valueOf(),
-        until: previousUntil.valueOf(),
-    };
-};
-const getPreviousWeek = createPreviousRange(7, 'day');
-const getPreviousQuarter = createPreviousRange(3, 'month');
-const getPreviousMonth = createPreviousRange(1, 'month');
-const getPreviousYear = createPreviousRange(1, 'year');
-const createLastDaysRange = (subtractAmount) => (date) => {
-    return {
-        since: date.subtract(subtractAmount, 'day').valueOf(),
-        until: date.valueOf(),
-    };
-};
-const getToday = (currentDate) => {
-    return {
-        since: currentDate.valueOf(),
-        until: currentDate.valueOf(),
-    };
-};
-const getYesterday = (date) => {
-    return {
-        since: date.subtract(1, 'day').valueOf(),
-        until: date.subtract(1, 'day').valueOf(),
-    };
+    MONTH_YEAR: 'MMM YYYY', // Jan 2025
+    FULL: 'MMMM D, YYYY', // January 1, 2025
+    FULL_WITH_TIME: 'MMMM D, YYYY [at] h:mm A', // January 1, 2025 at 12:00 AM
+    SHORT: 'MMM DD, YYYY', // Jan 01, 2025
+    SHORT_NO_PAD: 'MMM D, YYYY', // Jan 1, 2025
+    SHORT_WITH_TIME: 'MMM D, YYYY [at] h:mm A', // Jan 1, 2025 at 12:00 AM
+    MONTH_DAY: 'MMM D', // Jan 1
+    DAY_YEAR: 'D, YYYY', // 1, 2025
+    TIME: 'h:mm A', // 12:00 AM
+    MONTH_DAY_WITH_TIME: 'MMM D [at] h:mm A', // Jan 1 at 12:00 AM
+    YEAR: 'YYYY', // 2025
 };
-const getLast7Days = createLastDaysRange(6);
-const getLast30Days = createLastDaysRange(29);
-const getLast90Days = createLastDaysRange(89);
-const getLast365Days = createLastDaysRange(364);
-function getLastMonth(date) {
-    return {
-        since: date.subtract(1, 'month').startOf('month').valueOf(),
-        until: date.subtract(1, 'month').endOf('month').valueOf(),
-    };
+
+function parseYearMonthDayDateString(input) {
+    // Date-only strings (e.g. "1970-01-01") are treated as UTC, not local time
+    // when using new Date()
+    // We need to split year, month, day to pass into new Date() separately
+    // to get a localized Date
+    return dayjs(input).valueOf();
 }
-function getLast12Months(date) {
-    return {
-        since: date.subtract(12, 'month').startOf('month').valueOf(),
-        until: date.subtract(1, 'month').endOf('month').valueOf(),
-    };
+const VALID_YYYY_MM_DD_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}/;
+function isDate(date) {
+    return !isNaN(new Date(date).getDate());
 }
-function getLastYear(date) {
-    return {
-        since: date.subtract(1, 'year').startOf('year').valueOf(),
-        until: date.subtract(1, 'year').endOf('year').valueOf(),
-    };
+function isValidYearMonthDayDateString(date) {
+    return VALID_YYYY_MM_DD_DATE_REGEX.test(date) && isDate(date);
 }
-const getMonthAndYearByDateFilter = (month, year, date) => {
-    const endDate = dayjs(date);
-    const endMonthFilter = endDate.month();
-    const endYearFilter = endDate.year();
-    if (endYearFilter !== year || endMonthFilter !== month) {
-        const prev = endDate.subtract(1, 'month');
-        return {
-            month: prev.month(),
-            year: prev.year(),
-        };
+function isValidDate(date) {
+    return date.length === 10 && isValidYearMonthDayDateString(date);
+}
+function formatDate(timestamp, type) {
+    const date = convertDateToTz(timestamp);
+    if (type === 'YMD') {
+        return date.format(DATE_FORMAT.YMD);
     }
-    return { month, year };
+    if (type === 'MY') {
+        return date.format(DATE_FORMAT.MONTH_YEAR);
+    }
+    if (type === 'FULL') {
+        return date.format(DATE_FORMAT.FULL);
+    }
+    if (type === 'FULL_WITH_TIME') {
+        return date.format(DATE_FORMAT.FULL_WITH_TIME);
+    }
+    return date.format(DATE_FORMAT.SHORT);
+}
+function formatTime(timestamp) {
+    const date = convertDateToTz(timestamp);
+    return date.format(DATE_FORMAT.TIME);
+}
+function isSameDayTimestamp(since, until) {
+    const sinceDate = convertDateToTz(since);
+    const untilDate = convertDateToTz(until);
+    return sinceDate.isSame(untilDate, 'day');
+}
+function formatTimeRange(data) {
+    const { since, until, format = DATE_FORMAT.TIME, showNow = false } = data;
+    const sinceDate = convertDateToTz(since);
+    const untilDate = convertDateToTz(until);
+    return `${sinceDate.format(format)} - ${showNow ? 'Now' : untilDate.format(format)}`;
+}
+function formatDateTimeRange(data) {
+    const { since, until, isShowNow } = data;
+    const sinceDate = convertDateToTz(since);
+    const untilDate = convertDateToTz(until);
+    const isToday = sinceDate.isSame(dayjsTz(), 'day');
+    const startTime = sinceDate.format(DATE_FORMAT.TIME);
+    const endTime = untilDate.format(DATE_FORMAT.TIME);
+    if (isToday) {
+        const formatEndTime = isShowNow ? 'Now' : endTime;
+        return `Today at ${startTime} - ${formatEndTime}`;
+    }
+    if (isShowNow) {
+        return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - Now`;
+    }
+    if (sinceDate.isSame(untilDate, 'day')) {
+        return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${endTime}`;
+    }
+    if (sinceDate.isSame(untilDate, 'day')) {
+        const time = formatTimeRange({ since, until });
+        return `${sinceDate.format(DATE_FORMAT.SHORT)} (${time})`;
+    }
+    if (sinceDate.isSame(untilDate, 'year')) {
+        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.MONTH_DAY_WITH_TIME)}, ${untilDate.format(DATE_FORMAT.YEAR)}`;
+    }
+    return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${untilDate.format(DATE_FORMAT.SHORT_WITH_TIME)}`;
+}
+const formatDayjs = (date, isEndDay = false, formatTemplate) => {
+    // const isUTC = date.isUTC?.() ?? false;
+    // if (isUTC) return date.format();
+    if (isEndDay && isMidnight(date)) {
+        return date.endOf('day').format(formatTemplate);
+    }
+    return date.format(formatTemplate);
 };
-
-var CompareDateTimePickerAlias;
-(function (CompareDateTimePickerAlias) {
-    CompareDateTimePickerAlias["NO_COMPARISON"] = "noComparison";
-    CompareDateTimePickerAlias["PREVIOUS_PERIOD"] = "previousPeriod";
-    CompareDateTimePickerAlias["PREVIOUS_WEEK"] = "previousWeek";
-    CompareDateTimePickerAlias["PREVIOUS_MONTH"] = "previousMonth";
-    CompareDateTimePickerAlias["PREVIOUS_QUARTER"] = "previousQuarter";
-    CompareDateTimePickerAlias["PREVIOUS_YEAR"] = "previousYear";
-})(CompareDateTimePickerAlias || (CompareDateTimePickerAlias = {}));
-const PREVIOUS_PERIOD_FILTER = {
-    title: 'Previous period',
-    alias: CompareDateTimePickerAlias.PREVIOUS_PERIOD,
-    since: 0,
-    until: 0,
+const getEndOfDayBy = (value, formatTemplate) => {
+    if (!value) {
+        return formatDayjs(dayjsTz().endOf('day'), false, formatTemplate);
+    }
+    return formatDayjs(dayjsTz(value).endOf('day'), false, formatTemplate);
 };
-const DATE_TIME_COMPARISON_FILTERS = [
-    {
-        title: 'No comparison',
-        alias: CompareDateTimePickerAlias.NO_COMPARISON,
-        since: 0,
-        until: 0,
-    },
-    PREVIOUS_PERIOD_FILTER,
-    {
-        title: 'Previous week',
-        alias: CompareDateTimePickerAlias.PREVIOUS_WEEK,
-        since: 0,
-        until: 0,
-    },
-    {
-        title: 'Previous quarter',
-        alias: CompareDateTimePickerAlias.PREVIOUS_QUARTER,
-        since: 0,
-        until: 0,
-    },
-    {
-        title: 'Previous month',
-        alias: CompareDateTimePickerAlias.PREVIOUS_MONTH,
-        since: 0,
-        until: 0,
-    },
-    {
-        title: 'Previous year',
-        alias: CompareDateTimePickerAlias.PREVIOUS_YEAR,
-        since: 0,
-        until: 0,
-    },
-];
-const COMPARE_DATE_TIME_FILTERS_MAP = {
-    [CompareDateTimePickerAlias.NO_COMPARISON]: getNoComparison,
-    [CompareDateTimePickerAlias.PREVIOUS_PERIOD]: getPreviousPeriod,
-    [CompareDateTimePickerAlias.PREVIOUS_WEEK]: getPreviousWeek,
-    [CompareDateTimePickerAlias.PREVIOUS_QUARTER]: getPreviousQuarter,
-    [CompareDateTimePickerAlias.PREVIOUS_MONTH]: getPreviousMonth,
-    [CompareDateTimePickerAlias.PREVIOUS_YEAR]: getPreviousYear,
+const isMidnight = (date) => {
+    return date.hour() === 0 && date.minute() === 0;
+};
+const formatMs = (ms) => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return [hours, minutes, seconds].map((v) => String(v).padStart(2, '0')).join(':');
 };
 
-const useDateTimeFilter = () => {
-    const currentDate = dayjsTzToLocalTZ().startOf('day');
-    const mappings = getDateTimeFilterMapping();
-    const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
-    const TODAY_DATE_RANGE = {
-        ...TODAY_CONFIG,
-        ...TODAY_CONFIG.getDateRange(currentDate),
-    };
-    const YESTERDAY_CONFIG = mappings[MainDateTimePickerAlias.YESTERDAY];
-    const YESTERDAY_DATE_RANGE = {
-        ...YESTERDAY_CONFIG,
-        ...YESTERDAY_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_7_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_7_DAYS];
-    const LAST_7_DAYS_DATE_RANGE = {
-        ...LAST_7_DAYS_CONFIG,
-        ...LAST_7_DAYS_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_30_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_30_DAYS];
-    const LAST_30_DAYS_DATE_RANGE = {
-        ...LAST_30_DAYS_CONFIG,
-        ...LAST_30_DAYS_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_90_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_90_DAYS];
-    const LAST_90_DAYS_DATE_RANGE = {
-        ...LAST_90_DAYS_CONFIG,
-        ...LAST_90_DAYS_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_365_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_365_DAYS];
-    const LAST_365_DAYS_DATE_RANGE = {
-        ...LAST_365_DAYS_CONFIG,
-        ...LAST_365_DAYS_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_MONTH_CONFIG = mappings[MainDateTimePickerAlias.LAST_MONTH];
-    const LAST_MONTH_DATE_RANGE = {
-        ...LAST_MONTH_CONFIG,
-        ...LAST_MONTH_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_12_MONTHS_CONFIG = mappings[MainDateTimePickerAlias.LAST_12_MONTHS];
-    const LAST_12_MONTHS_DATE_RANGE = {
-        ...LAST_12_MONTHS_CONFIG,
-        ...LAST_12_MONTHS_CONFIG.getDateRange(currentDate),
-    };
-    const LAST_YEAR_CONFIG = mappings[MainDateTimePickerAlias.LAST_YEAR];
-    const LAST_YEAR_DATE_RANGE = {
-        ...LAST_YEAR_CONFIG,
-        ...LAST_YEAR_CONFIG.getDateRange(currentDate),
-    };
-    const DATE_TIME_FILTERS = [
-        TODAY_DATE_RANGE,
-        YESTERDAY_DATE_RANGE,
-        LAST_7_DAYS_DATE_RANGE,
-        LAST_30_DAYS_DATE_RANGE,
-        LAST_90_DAYS_DATE_RANGE,
-        LAST_365_DAYS_DATE_RANGE,
-        LAST_MONTH_DATE_RANGE,
-        LAST_12_MONTHS_DATE_RANGE,
-        LAST_YEAR_DATE_RANGE,
-    ];
+function getDateRangeTitle(since, until) {
+    const sinceDate = convertDateToTz(since);
+    const untilDate = convertDateToTz(until);
+    if (sinceDate.isSame(untilDate, 'day')) {
+        return sinceDate.format(DATE_FORMAT.SHORT);
+    }
+    if (sinceDate.isSame(untilDate, 'month') && sinceDate.isSame(untilDate, 'year')) {
+        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.DAY_YEAR)}`;
+    }
+    if (sinceDate.isSame(untilDate, 'year')) {
+        return `${sinceDate.format(DATE_FORMAT.MONTH_DAY)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
+    }
+    return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - ${untilDate.format(DATE_FORMAT.SHORT_NO_PAD)}`;
+}
+/**
+ * Resolves a { title, alias } pair from a since/until date range.
+ * Matches against known presets (today, last 7 days, …); falls back to
+ * a formatted custom range with alias "custom".
+ */
+function getDateTimeFilterBase(since, until) {
+    const now = dayjsTz();
+    const sinceDate = convertDateToTz(since);
+    const untilDate = convertDateToTz(until);
+    const mappings = getDateTimeFilterMapping();
+    for (const mapping of Object.values(mappings)) {
+        const range = mapping.getDateRange(now);
+        const expectedSince = convertDateToTz(range.since);
+        const expectedUntil = convertDateToTz(range.until);
+        const isSameSince = sinceDate.isSame(expectedSince, 'day');
+        const isSameUntil = untilDate.isSame(expectedUntil, 'day');
+        if (isSameSince && isSameUntil) {
+            return { title: mapping.title, alias: mapping.alias };
+        }
+    }
     return {
-        DATE_TIME_FILTERS,
-        LAST_7_DAYS_DATE_RANGE,
-        LAST_30_DAYS_DATE_RANGE,
+        title: getDateRangeTitle(since, until),
+        alias: 'custom',
     };
+}
+function getVersionDateRangeTitle(data) {
+    const { since, until, isShowNow } = data;
+    const sinceDate = convertDateToTz(since);
+    const isToday = sinceDate.isSame(dayjsTz(), 'day');
+    if (isToday)
+        return getDateTimeFilterByAlias(MainDateTimePickerAlias.TODAY).title;
+    if (isShowNow)
+        return `${sinceDate.format(DATE_FORMAT.SHORT_NO_PAD)} - Now`;
+    return getDateRangeTitle(since, until);
+}
+const getVersionDateDescription = ({ since, until, isShowNow }) => {
+    const isSameDay = isSameDayTimestamp(since, until);
+    if (!isSameDay)
+        return undefined;
+    return formatTimeRange({ since, until, showNow: isShowNow });
 };
 
-const DateTimePickerContext = createContext({
-    dateTimePicked: {
-        since: dayjsTz().valueOf(),
-        until: dayjsTz().valueOf(),
-        title: 'Today',
-        alias: 'today',
-    },
-    compareDateTimePicked: PREVIOUS_PERIOD_FILTER,
-    setDateTimePicked: () => { },
-    setCompareDateTimePicked: () => { },
-    resetDateVersion: () => { },
-});
-const DateTimePickerProvider = ({ children, initDate, initDateCompare, }) => {
-    const [dateTimePicked, setDateTimePicked] = useState(initDate || {
-        since: dayjsTz().set('hour', 0).valueOf(),
-        until: dayjsTz().set('hour', 0).valueOf(),
-        title: 'Today',
-        alias: 'today',
-    });
-    const { DATE_TIME_FILTERS } = useDateTimeFilter();
-    const getCompareDateTimePicked = useCallback((alias, source = dateTimePicked) => {
+const convertToDateTimeFilters = (versions) => {
+    const dataVersions = [...versions].sort((a, b) => semverToNum(b.version) - semverToNum(a.version));
+    return dataVersions
+        .map((item) => {
+        if (!item.startedAt)
+            return false;
+        const isCurrentVersion = !item.completedAt;
+        const since = dayjsTzToLocalTZ(item.startedAt).valueOf();
+        const until = isCurrentVersion
+            ? dayjsTzToLocalTZ(getEndOfDayBy()).valueOf()
+            : dayjsTzToLocalTZ(item.completedAt).valueOf();
+        const title = getVersionDateRangeTitle({ since, until, isShowNow: isCurrentVersion });
+        const description = getVersionDateDescription({ since, until, isShowNow: isCurrentVersion });
         return {
-            ...PREVIOUS_PERIOD_FILTER,
-            ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
-                since: source.since,
-                until: source.until,
-                alias: source.alias,
-            }),
+            title,
+            alias: `${item.version}`,
+            since,
+            until,
+            isVersion: true,
+            isCurrentVersion,
+            description,
+            versionId: item.id,
         };
-    }, [dateTimePicked]);
-    const [compareDateTimePicked, setCompareDateTimePicked] = useState(initDateCompare || getCompareDateTimePicked(CompareDateTimePickerAlias.PREVIOUS_PERIOD));
-    const updateCompareDateTimePicked = useCallback((source) => {
-        if (compareDateTimePicked.alias === 'custom' ||
-            compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON)
-            return;
-        setCompareDateTimePicked(getCompareDateTimePicked(compareDateTimePicked.alias, source));
-    }, [compareDateTimePicked, getCompareDateTimePicked]);
-    const resetDateVersion = () => {
-        const since = dayjs(dateTimePicked.since).startOf('day').valueOf();
-        const until = dayjs(dateTimePicked.until).startOf('day').valueOf();
-        const dateFilter = DATE_TIME_FILTERS.find((filter) => filter.since === since && filter.until === until);
-        setDateTimePicked({
-            ...dateTimePicked,
-            isVersion: false,
-            versionId: undefined,
-            isCurrentVersion: false,
-            description: '',
-            title: dateFilter?.title || dateTimePicked.title,
-            alias: dateFilter?.alias || 'custom',
-        });
-    };
-    const onSetDateTimePicked = useCallback((value) => {
-        setDateTimePicked(value);
-        updateCompareDateTimePicked(value);
-    }, [updateCompareDateTimePicked]);
-    return (jsx(DateTimePickerContext.Provider, { value: {
-            dateTimePicked,
-            setDateTimePicked: onSetDateTimePicked,
-            compareDateTimePicked,
-            setCompareDateTimePicked,
-            resetDateVersion,
-        }, children: children }));
-};
-const useDateTimePickerContext = () => {
-    const context = useContext(DateTimePickerContext);
-    if (!context) {
-        throw new Error('useDateTimePickerContext must be used within a DateTimePickerProvider');
-    }
-    return context;
+    })
+        .filter(Boolean);
 };
 
-const useDateTimePicker = ({ ranges, initialPicked, onApply }) => {
-    const { DATE_TIME_FILTERS } = useDateTimeFilter();
-    const allRanges = ranges || DATE_TIME_FILTERS;
-    const { dateTimePicked, setDateTimePicked } = useDateTimePickerContext();
-    const [dateRange, setDateRange] = useState(dateTimePicked);
-    const [{ month, year }, setDate] = useState({
-        month: dayjs(dateTimePicked.since).month(),
-        year: dayjs(dateTimePicked.since).year(),
-    });
-    useEffect(() => {
-        if (dateTimePicked) {
-            const untilDate = new Date(dateTimePicked.until);
-            const monthDiff = (referenceDate, newDate) => {
-                return newDate.month - referenceDate.month + 12 * (referenceDate.year - newDate.year);
-            };
-            monthDiff({ year, month }, {
-                year: untilDate.getFullYear(),
-                month: untilDate.getMonth(),
-            });
-            // if (monthDifference > 1 || monthDifference < 0) {
-            //   setDate({
-            //     month: untilDate.getMonth(),
-            //     year: untilDate.getFullYear(),
-            //   });
-            // }
-        }
-    }, [dateTimePicked, month, year]);
-    const onMonthChange = (month, year) => {
-        setDate({ month, year });
-    };
-    const onCalendarChange = (value) => {
-        const { start, end, alias } = value;
-        const customDateRange = {
-            alias: 'custom',
-            title: 'Custom',
-            since: start.getTime(),
-            until: end.getTime(),
-        };
-        const newDateRange = allRanges.find((range) => {
-            const isSameAlias = range.alias === alias;
-            const isSameUntil = range.until === end.getTime();
-            const isSameSince = range.since === start.getTime();
-            // const isSameVersionId = !!range.versionId && !!versionId && range.versionId === versionId;
-            const isSameTime = isSameSince && isSameUntil;
-            return isSameAlias || isSameTime;
-        });
-        const finalDateRange = newDateRange || initialPicked || customDateRange;
-        setDateRange(finalDateRange);
+const getNoComparison = () => {
+    return {
+        since: 0,
+        until: 0,
     };
-    const onChange = ({ end }) => {
-        setDate(getMonthAndYearByDateFilter(month, year, end));
+};
+const getPreviousPeriod = (value) => {
+    const { since, until, alias } = value;
+    const sinceDate = dayjs(since);
+    const untilDate = dayjs(until);
+    if (alias === MainDateTimePickerAlias.LAST_MONTH) {
+        return getLastMonth(sinceDate);
+    }
+    if (alias === MainDateTimePickerAlias.LAST_12_MONTHS) {
+        return getLast12Months(sinceDate);
+    }
+    if (alias === MainDateTimePickerAlias.LAST_YEAR) {
+        return getLastYear(sinceDate);
+    }
+    const duration = untilDate.diff(sinceDate, 'day') + 1;
+    const previousSince = sinceDate.subtract(duration, 'day');
+    const previousUntil = untilDate.subtract(duration, 'day');
+    return {
+        since: previousSince.valueOf(),
+        until: previousUntil.valueOf(),
     };
-    const apply = () => {
-        setDateTimePicked(dateRange);
-        onApply?.(dateRange);
+};
+const createPreviousRange = (subtractAmount, subtractUnit) => (value) => {
+    const { since, until } = value;
+    const sinceDate = dayjs(since);
+    const untilDate = dayjs(until);
+    const duration = untilDate.diff(sinceDate, 'day');
+    const previousSince = sinceDate.subtract(subtractAmount, subtractUnit);
+    const previousUntil = previousSince.add(duration, 'day');
+    return {
+        since: previousSince.valueOf(),
+        until: previousUntil.valueOf(),
     };
-    const cancel = () => {
-        setDateRange(dateTimePicked);
+};
+const getPreviousWeek = createPreviousRange(7, 'day');
+const getPreviousQuarter = createPreviousRange(3, 'month');
+const getPreviousMonth = createPreviousRange(1, 'month');
+const getPreviousYear = createPreviousRange(1, 'year');
+const createLastDaysRange = (subtractAmount) => (date) => {
+    return {
+        since: date.subtract(subtractAmount, 'day').valueOf(),
+        until: date.valueOf(),
     };
-    useEffect(() => {
-        if (dateTimePicked) {
-            setDateRange(dateTimePicked);
-            setDate({
-                month: dayjs(dateTimePicked.since).month(),
-                year: dayjs(dateTimePicked.since).year(),
-            });
-        }
-    }, [dateTimePicked]);
+};
+const getToday = (currentDate) => {
     return {
-        month,
-        year,
-        setDate,
-        dateRange,
-        apply,
-        cancel,
-        dateTimePicked,
-        onChange,
-        onMonthChange,
-        onCalendarChange,
+        since: currentDate.valueOf(),
+        until: currentDate.valueOf(),
     };
 };
-
-const useVersionDateTimeFilters = (versions) => {
-    const { t } = useTranslation();
-    const rangers = useMemo(() => {
-        if (!versions?.length)
-            return [];
-        return convertToDateTimeFilters(versions);
-    }, [versions]);
-    const rangeAddition = {
-        title: t('Experiment periods'),
-        rangers,
+const getYesterday = (date) => {
+    return {
+        since: date.subtract(1, 'day').valueOf(),
+        until: date.subtract(1, 'day').valueOf(),
     };
-    return { rangeAddition };
 };
-
-function DateTimeFilterInputs({ onBlur, dateRange, setDateTimePicked }) {
-    const [isFocus, setIsFocus] = useState(false);
-    const [inputValues, setInputValues] = useState({});
-    const formatDisplayDate = useCallback((timestamp, isEnd = false) => {
-        if (!dateRange.isVersion || (isEnd && dateRange.isCurrentVersion))
-            return formatDate(timestamp, 'FULL');
-        return formatDate(timestamp, 'FULL_WITH_TIME');
-    }, [dateRange.isVersion, dateRange.isCurrentVersion]);
-    useEffect(() => {
-        if (isFocus)
-            return;
-        setInputValues({
-            since: formatDisplayDate(dateRange.since),
-            until: formatDisplayDate(dateRange.until, true),
-        });
-    }, [dateRange, formatDisplayDate]);
-    function handleStartInputValueChange(value) {
-        setInputValues((prevState) => {
-            return { ...prevState, since: value };
-        });
-        if (isValidDate(value)) {
-            const newSinceDate = convertDateToTz(value).startOf('day');
-            const untilDate = convertDateToTz(dateRange.until).endOf('day');
-            const endDate = newSinceDate.isAfter(untilDate) ? newSinceDate.endOf('day') : untilDate;
-            setDateTimePicked({
-                start: dayjsTzToLocalTZ(newSinceDate).toDate(),
-                end: dayjsTzToLocalTZ(endDate).toDate(),
-            });
-        }
-    }
-    function handleEndInputValueChange(value) {
-        setInputValues((prevState) => ({ ...prevState, until: value }));
-        if (isValidDate(value)) {
-            const nowEndOfDay = dayjsTz().endOf('day');
-            const newUntilDate = convertDateToTz(value).endOf('day');
-            const clampedUntil = newUntilDate.isAfter(nowEndOfDay) ? nowEndOfDay : newUntilDate;
-            const sinceDate = convertDateToTz(dateRange.since).startOf('day');
-            const startDate = clampedUntil.isBefore(sinceDate) ? clampedUntil.startOf('day') : sinceDate;
-            setDateTimePicked({
-                start: dayjsTzToLocalTZ(startDate).toDate(),
-                end: dayjsTzToLocalTZ(clampedUntil).toDate(),
-            });
-        }
-    }
-    function handleInputBlur() {
-        setIsFocus(false);
-        setInputValues({
-            since: formatDisplayDate(dateRange.since),
-            until: formatDisplayDate(dateRange.until, true),
-        });
-        onBlur && onBlur();
-    }
-    function handleFocusStartInput() {
-        setIsFocus(true);
-        setInputValues({
-            ...inputValues,
-            since: formatDate(dateRange.since, 'YMD'),
-        });
-    }
-    function handleFocusEndInput() {
-        setIsFocus(true);
-        setInputValues({
-            ...inputValues,
-            until: formatDate(dateRange.until, 'YMD'),
-        });
-    }
-    return (jsxs(InlineGrid, { gap: "200", columns: "1fr auto 1fr", children: [jsx(TextField, { role: "combobox", label: 'Since', labelHidden: true, 
-                // prefix={<Icon source={CalendarIcon} />}
-                value: dateRange.since ? inputValues.since : 'MMMM D, YYYY', onChange: handleStartInputValueChange, onBlur: () => handleInputBlur(), onFocus: () => handleFocusStartInput(), autoComplete: "off" }), jsx(InlineStack, { children: jsx(Icon, { source: SvgArrowRightIcon, tone: "subdued" }) }), jsx(TextField, { role: "combobox", label: 'Until', labelHidden: true, 
-                // prefix={<Icon source={CalendarIcon} />}
-                value: dateRange.until ? inputValues.until : 'MMMM D, YYYY', onChange: handleEndInputValueChange, onBlur: () => handleInputBlur(), onFocus: () => handleFocusEndInput(), autoComplete: "off" })] }));
+const getLast7Days = createLastDaysRange(6);
+const getLast30Days = createLastDaysRange(29);
+const getLast90Days = createLastDaysRange(89);
+const getLast365Days = createLastDaysRange(364);
+function getLastMonth(date) {
+    return {
+        since: date.subtract(1, 'month').startOf('month').valueOf(),
+        until: date.subtract(1, 'month').endOf('month').valueOf(),
+    };
 }
-
-/**
- * Returns a stateful value, and a set of memoized functions to toggle it,
- * set it to true and set it to false
- */
-function useToggle(initialState) {
-    const [value, setState] = useState(initialState);
+function getLast12Months(date) {
     return {
-        value,
-        toggle: useCallback(() => setState((state) => !state), []),
-        setTrue: useCallback(() => setState(true), []),
-        setFalse: useCallback(() => setState(false), []),
+        since: date.subtract(12, 'month').startOf('month').valueOf(),
+        until: date.subtract(1, 'month').endOf('month').valueOf(),
     };
 }
-
-function DateTimeFilterAddition(props) {
-    const { setDateTimePicked, dateTimePicked, rangeAddition, allRanges } = props;
-    const { value: isExpanded, toggle: toggleExpanded } = useToggle(true);
-    const rangesAdditions = rangeAddition?.rangers || [];
-    const handleChangeFilterByOption = (value) => {
-        const alias = value[0];
-        const result = allRanges.find((range) => range.alias === alias) || allRanges[0];
-        setDateTimePicked({
-            start: dayjsTz(result?.since).toDate(),
-            end: dayjsTz(result?.until).toDate(),
-            alias: result?.alias,
-        });
+function getLastYear(date) {
+    return {
+        since: date.subtract(1, 'year').startOf('year').valueOf(),
+        until: date.subtract(1, 'year').endOf('year').valueOf(),
     };
-    const options = rangesAdditions.map((range) => {
-        const selected = dateTimePicked.alias === range.alias;
+}
+const getMonthAndYearByDateFilter = (month, year, date) => {
+    const endDate = dayjs(date);
+    const endMonthFilter = endDate.month();
+    const endYearFilter = endDate.year();
+    if (endYearFilter !== year || endMonthFilter !== month) {
+        const prev = endDate.subtract(1, 'month');
         return {
-            value: range.alias,
-            label: (jsxs(Text, { as: "span", truncate: true, children: [jsx(Text, { as: "span", variant: 'bodyMd', fontWeight: selected ? 'semibold' : 'regular', children: range.title }), range.description && (jsxs(Fragment, { children: [' ', jsx(Text, { as: "span", variant: 'bodyXs', fontWeight: 'regular', tone: "subdued", children: `(${range.description})` })] }))] })),
+            month: prev.month(),
+            year: prev.year(),
         };
-    });
-    if (!rangeAddition || rangesAdditions.length === 0)
-        return;
-    return (jsxs(Box, { borderBlockEndWidth: '025', borderColor: 'border', paddingBlock: '200', children: [jsx("div", { className: "px-1.5", children: jsx(GDiv, { onClick: toggleExpanded, "aria-expanded": isExpanded, className: cls('hover:bg-surface-hover cursor-pointer rounded-lg p-1.5'), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", children: rangeAddition.title }), jsx(Box, { children: jsx(Icon, { source: isExpanded ? SvgChevronUpIcon : SvgChevronDownIcon }) })] }) }) }), jsx(Collapsible, { open: isExpanded, id: "date-time-filter-periods-collapsible", transition: { duration: '200ms', timingFunction: 'ease-in-out' }, children: jsx(GOptionList, { options: options, selected: dateTimePicked ? [dateTimePicked.alias] : [], onChange: handleChangeFilterByOption }) })] }));
-}
+    }
+    return { month, year };
+};
 
-function DateTimeFilters(props) {
-    const { setDateTimePicked, dateTimePicked, allRanges, isCompare } = props;
-    const { DATE_TIME_FILTERS } = useDateTimeFilter();
-    const { mdDown } = useBreakpoints();
-    const rangesDefault = isCompare ? [...DATE_TIME_COMPARISON_FILTERS] : [...DATE_TIME_FILTERS];
-    const handleChangeFilterBySelect = (value) => {
-        const result = allRanges.find(({ title, alias }) => title === value || alias === value) || allRanges[0];
-        setDateTimePicked({
-            start: dayjsTz(result?.since).toDate(),
-            end: dayjsTz(result?.until).toDate(),
-            alias: result?.alias,
-        });
-    };
-    const handleChangeFilterByOption = (value) => {
-        const result = allRanges.find((range) => range.alias === value[0]) || allRanges[0];
-        setDateTimePicked({
-            start: dayjsTz(result?.since).toDate(),
-            end: dayjsTz(result?.until).toDate(),
-            alias: result?.alias,
-        });
-    };
-    return (jsx(Box, { maxWidth: mdDown ? '516px' : '250px', width: mdDown ? '100%' : '250px', padding: { xs: '500', md: '0' }, paddingBlockEnd: { xs: '100', md: '0' }, children: mdDown ? (jsx(Select, { label: "dateRangeLabel", labelHidden: true, onChange: (value) => handleChangeFilterBySelect(value), value: dateTimePicked?.title || dateTimePicked?.alias || '', options: allRanges.map(({ alias, title }) => title || alias) })) : (jsx(Scrollable, { style: { maxHeight: '356px' }, children: jsx(Box, { children: jsxs(BlockStack, { children: [jsx(DateTimeFilterAddition, { ...props }), jsx(OptionList, { options: rangesDefault.map((range) => ({
-                                value: range.alias,
-                                label: range.title,
-                            })), selected: dateTimePicked ? [dateTimePicked.alias] : [], onChange: (value) => handleChangeFilterByOption(value) })] }) }) })) }));
-}
+var CompareDateTimePickerAlias;
+(function (CompareDateTimePickerAlias) {
+    CompareDateTimePickerAlias["NO_COMPARISON"] = "noComparison";
+    CompareDateTimePickerAlias["PREVIOUS_PERIOD"] = "previousPeriod";
+    CompareDateTimePickerAlias["PREVIOUS_WEEK"] = "previousWeek";
+    CompareDateTimePickerAlias["PREVIOUS_MONTH"] = "previousMonth";
+    CompareDateTimePickerAlias["PREVIOUS_QUARTER"] = "previousQuarter";
+    CompareDateTimePickerAlias["PREVIOUS_YEAR"] = "previousYear";
+})(CompareDateTimePickerAlias || (CompareDateTimePickerAlias = {}));
+const PREVIOUS_PERIOD_FILTER = {
+    title: 'Previous period',
+    alias: CompareDateTimePickerAlias.PREVIOUS_PERIOD,
+    since: 0,
+    until: 0,
+};
+const DATE_TIME_COMPARISON_FILTERS = [
+    {
+        title: 'No comparison',
+        alias: CompareDateTimePickerAlias.NO_COMPARISON,
+        since: 0,
+        until: 0,
+    },
+    PREVIOUS_PERIOD_FILTER,
+    {
+        title: 'Previous week',
+        alias: CompareDateTimePickerAlias.PREVIOUS_WEEK,
+        since: 0,
+        until: 0,
+    },
+    {
+        title: 'Previous quarter',
+        alias: CompareDateTimePickerAlias.PREVIOUS_QUARTER,
+        since: 0,
+        until: 0,
+    },
+    {
+        title: 'Previous month',
+        alias: CompareDateTimePickerAlias.PREVIOUS_MONTH,
+        since: 0,
+        until: 0,
+    },
+    {
+        title: 'Previous year',
+        alias: CompareDateTimePickerAlias.PREVIOUS_YEAR,
+        since: 0,
+        until: 0,
+    },
+];
+const COMPARE_DATE_TIME_FILTERS_MAP = {
+    [CompareDateTimePickerAlias.NO_COMPARISON]: getNoComparison,
+    [CompareDateTimePickerAlias.PREVIOUS_PERIOD]: getPreviousPeriod,
+    [CompareDateTimePickerAlias.PREVIOUS_WEEK]: getPreviousWeek,
+    [CompareDateTimePickerAlias.PREVIOUS_QUARTER]: getPreviousQuarter,
+    [CompareDateTimePickerAlias.PREVIOUS_MONTH]: getPreviousMonth,
+    [CompareDateTimePickerAlias.PREVIOUS_YEAR]: getPreviousYear,
+};
 
-const useCompareDateTimePicker = ({ ranges, onApply }) => {
-    const allRanges = ranges || DATE_TIME_COMPARISON_FILTERS;
-    const { compareDateTimePicked, setCompareDateTimePicked } = useDateTimePickerContext();
-    const { dateTimePicked: mainDateRange } = useDateTimePickerContext();
-    const [dateRange, setDateRange] = useState(compareDateTimePicked);
-    const [{ month, year }, setDate] = useState({
-        month: dayjsTz(compareDateTimePicked.since).month(),
-        year: dayjsTz(compareDateTimePicked.since).year(),
-    });
-    const onMonthChange = (month, year) => {
-        setDate({ month, year });
+const useDateTimeFilter = () => {
+    const currentDate = dayjsTzToLocalTZ().startOf('day');
+    const mappings = getDateTimeFilterMapping();
+    const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
+    const TODAY_DATE_RANGE = {
+        ...TODAY_CONFIG,
+        ...TODAY_CONFIG.getDateRange(currentDate),
+    };
+    const YESTERDAY_CONFIG = mappings[MainDateTimePickerAlias.YESTERDAY];
+    const YESTERDAY_DATE_RANGE = {
+        ...YESTERDAY_CONFIG,
+        ...YESTERDAY_CONFIG.getDateRange(currentDate),
     };
-    const onCalendarChange = ({ start, end, alias }) => {
-        const newDateRange = allRanges.find((range) => {
-            return range.alias === alias;
-        });
-        // If the alias is not found, set the custom date range
-        if (!newDateRange) {
-            setDateRange({
-                alias: 'custom',
-                title: 'Custom',
-                since: start.getTime(),
-                until: end.getTime(),
-            });
-            return;
-        }
-        setDateRange({
-            ...newDateRange,
-            ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
-                since: mainDateRange.since,
-                until: mainDateRange.until,
-            }),
-        });
+    const LAST_7_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_7_DAYS];
+    const LAST_7_DAYS_DATE_RANGE = {
+        ...LAST_7_DAYS_CONFIG,
+        ...LAST_7_DAYS_CONFIG.getDateRange(currentDate),
     };
-    const apply = () => {
-        setCompareDateTimePicked(dateRange);
-        onApply?.(dateRange);
+    const LAST_30_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_30_DAYS];
+    const LAST_30_DAYS_DATE_RANGE = {
+        ...LAST_30_DAYS_CONFIG,
+        ...LAST_30_DAYS_CONFIG.getDateRange(currentDate),
     };
-    const cancel = () => {
-        setDateRange(compareDateTimePicked);
+    const LAST_90_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_90_DAYS];
+    const LAST_90_DAYS_DATE_RANGE = {
+        ...LAST_90_DAYS_CONFIG,
+        ...LAST_90_DAYS_CONFIG.getDateRange(currentDate),
     };
-    const onChange = ({ end }) => {
-        setDate(getMonthAndYearByDateFilter(month, year, end));
+    const LAST_365_DAYS_CONFIG = mappings[MainDateTimePickerAlias.LAST_365_DAYS];
+    const LAST_365_DAYS_DATE_RANGE = {
+        ...LAST_365_DAYS_CONFIG,
+        ...LAST_365_DAYS_CONFIG.getDateRange(currentDate),
     };
-    return {
-        month,
-        year,
-        setDate,
-        dateRange,
-        apply,
-        cancel,
-        compareDateTimePicked,
-        onChange,
-        onMonthChange,
-        onCalendarChange,
+    const LAST_MONTH_CONFIG = mappings[MainDateTimePickerAlias.LAST_MONTH];
+    const LAST_MONTH_DATE_RANGE = {
+        ...LAST_MONTH_CONFIG,
+        ...LAST_MONTH_CONFIG.getDateRange(currentDate),
     };
-};
-
-const BaseTimePicker = (props) => {
-    const { dateTimeFilters, rangeAddition, popoverProps, activatorProps, actionProps, isCompare, buttonValue, activator, } = props;
-    const initialPicked = rangeAddition?.initialPicked;
-    const ranges = [...(dateTimeFilters || []), ...(rangeAddition?.rangers || [])];
-    const useHookDateTimePicker = isCompare ? useCompareDateTimePicker : useDateTimePicker;
-    const { month, year, dateRange, apply, cancel, onMonthChange, onCalendarChange, onChange } = useHookDateTimePicker({
-        ranges,
-        initialPicked,
-        onApply: props.onApply,
-    });
-    const { t } = useTranslation();
-    const { mdDown, lgUp } = useBreakpoints();
-    const shouldShowMultiMonth = lgUp;
-    const rawTooltipContent = useMemo(() => {
-        // Only show tooltip when selecting Period (isVersion)
-        if (!dateRange.isVersion || !dateRange.since || !dateRange.until)
-            return;
-        return formatDateTimeRange({
-            since: dateRange.since,
-            until: dateRange.until,
-            isShowNow: dateRange.isCurrentVersion,
-        });
-    }, [dateRange.since, dateRange.until, dateRange.isVersion, dateRange.isCurrentVersion]);
-    const [popoverActive, setPopoverActive] = useState(false);
-    // Freeze tooltip content while popover is open to prevent button remount (focus/CSS loss)
-    const datePickerRef = useRef(null);
-    const tooltipContentRef = useRef(rawTooltipContent);
-    if (!popoverActive)
-        tooltipContentRef.current = rawTooltipContent;
-    const tooltipContent = tooltipContentRef.current;
-    //@ts-ignore
-    function nodeContainsDescendant(rootNode, descendant) {
-        if (rootNode === descendant) {
-            return true;
-        }
-        let parent = descendant.parentNode;
-        while (parent != null) {
-            if (parent === rootNode) {
-                return true;
-            }
-            parent = parent.parentNode;
-        }
-        return false;
-    }
-    //@ts-ignore
-    function isNodeWithinPopover(node) {
-        return datePickerRef?.current ? nodeContainsDescendant(datePickerRef.current, node) : false;
-    }
-    //@ts-ignore
-    function handleInputBlur({ relatedTarget }) {
-        const isRelatedTargetWithinPopover = relatedTarget != null && isNodeWithinPopover(relatedTarget);
-        // If focus moves from the TextField to the Popover
-        // we don't want to close the popover
-        if (isRelatedTargetWithinPopover) {
-            return;
-        }
-        setPopoverActive(false);
-    }
-    function applyFunc() {
-        apply();
-        setPopoverActive(false);
-    }
-    function cancelFunc() {
-        cancel();
-        setPopoverActive(false);
-    }
-    const handleTogglePopover = () => {
-        if (isCompare) {
-            return;
-        }
-        setPopoverActive(!popoverActive);
+    const LAST_12_MONTHS_CONFIG = mappings[MainDateTimePickerAlias.LAST_12_MONTHS];
+    const LAST_12_MONTHS_DATE_RANGE = {
+        ...LAST_12_MONTHS_CONFIG,
+        ...LAST_12_MONTHS_CONFIG.getDateRange(currentDate),
     };
-    const onChangeDateTimeFilter = (data) => {
-        onCalendarChange(data);
-        onChange(data);
+    const LAST_YEAR_CONFIG = mappings[MainDateTimePickerAlias.LAST_YEAR];
+    const LAST_YEAR_DATE_RANGE = {
+        ...LAST_YEAR_CONFIG,
+        ...LAST_YEAR_CONFIG.getDateRange(currentDate),
     };
-    return (jsx(Popover, { active: popoverActive, autofocusTarget: "none", preferredAlignment: "right", preferredPosition: "below", fluidContent: true, sectioned: false, fullHeight: true, activator: jsx(GBlockCenter, { height: "100%", minHeight: "28px", align: "center", children: jsx(GTooltip, { content: tooltipContent, maxWidth: activator ? 'large' : 'extra-large', children: jsx(Box, { children: activator ? (activator({ onClick: handleTogglePopover, value: buttonValue })) : (jsx(Button, { size: "slim", icon: !isCompare ? SvgCalendarIcon : undefined, onClick: handleTogglePopover, ...activatorProps, children: buttonValue })) }) }) }), onClose: cancelFunc, ...popoverProps, children: jsxs(Scrollable, { vertical: true, scrollbarWidth: "thin", className: "max-w-[100%]", children: [jsx(Popover.Pane, { fixed: true, children: jsx("div", { ref: datePickerRef, children: jsxs(InlineGrid, { columns: {
-                                xs: '1fr',
-                                md: 'max-content max-content',
-                            }, gap: "0", children: [jsx(DateTimeFilters, { setDateTimePicked: onChangeDateTimeFilter, dateTimePicked: dateRange, rangeAddition: rangeAddition, allRanges: ranges, isCompare: isCompare }), jsx(Box, { padding: "400", maxWidth: mdDown ? '320px' : '516px', borderInlineStartWidth: "025", borderColor: "border-secondary", children: jsxs(BlockStack, { gap: "400", children: [jsx(DateTimeFilterInputs, { setDateTimePicked: onCalendarChange, dateRange: dateRange, onBlur: () => handleInputBlur }), jsx("div", { children: jsx(DatePicker, { month: month, year: year, selected: !dateRange.since && !dateRange.until
-                                                        ? undefined
-                                                        : {
-                                                            start: dayjs(dateRange.since).toDate(),
-                                                            end: dayjs(dateRange.until).toDate(),
-                                                        }, onMonthChange: onMonthChange, onChange: onCalendarChange, multiMonth: shouldShowMultiMonth, allowRange: true, disableDatesAfter: dayjsTzToDate() }) }), actionProps && (jsx(GButton, { ...actionProps, onClick: () => {
-                                                    setPopoverActive(false);
-                                                    actionProps.onClick?.();
-                                                } }))] }) })] }) }) }), jsx(Popover.Pane, { fixed: true, children: jsx(Box, { padding: "400", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsx(InlineStack, { align: "end", gap: "200", children: jsxs(ButtonGroup, { children: [jsx(Button, { onClick: cancelFunc, children: t('Cancel') }), jsx(Button, { variant: "primary", onClick: applyFunc, children: t('Apply') })] }) }) }) })] }) }));
-};
-
-const CompareTimePicker = (props) => {
-    const { rangeAddition, popoverProps } = props;
-    const initialPicked = rangeAddition?.initialPicked;
-    const dateTimeFilters = DATE_TIME_COMPARISON_FILTERS;
-    const ranges = [...dateTimeFilters, ...(rangeAddition?.rangers || [])];
-    const { t } = useTranslation();
-    const { compareDateTimePicked } = useCompareDateTimePicker({ ranges, initialPicked });
-    const buttonValue = useMemo(() => {
-        if (compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON) {
-            return t('No comparison');
-        }
-        return t('Compare to: {{value}}', {
-            value: getDateRangeTitle(compareDateTimePicked.since, compareDateTimePicked.until),
-        });
-    }, [compareDateTimePicked, t]);
-    return (jsx(BaseTimePicker, { dateTimeFilters: dateTimeFilters, rangeAddition: rangeAddition, popoverProps: popoverProps, isCompare: true, buttonValue: buttonValue }));
-};
-
-const MainTimePicker = (props) => {
-    const { rangeAddition, popoverProps, activator, onApply, activatorProps, actionProps } = props;
-    const { DATE_TIME_FILTERS } = useDateTimeFilter();
-    const dateTimeFilters = DATE_TIME_FILTERS;
-    const additionalRanges = rangeAddition?.rangers || [];
-    const initialPicked = rangeAddition?.initialPicked;
-    const ranges = [...dateTimeFilters, ...additionalRanges];
-    const { dateTimePicked } = useDateTimePicker({ ranges, initialPicked });
-    const getButtonValue = () => {
-        if (dateTimePicked.isVersion && additionalRanges.length > 0) {
-            const time = dateTimePicked.description ? `at ${dateTimePicked.description}` : '';
-            return `Period: ${dateTimePicked.title} ${time}`;
-        }
-        if (dateTimePicked.alias === 'custom') {
-            return getDateRangeTitle(dateTimePicked.since, dateTimePicked.until);
-        }
-        return dateTimePicked.title;
+    const DATE_TIME_FILTERS = [
+        TODAY_DATE_RANGE,
+        YESTERDAY_DATE_RANGE,
+        LAST_7_DAYS_DATE_RANGE,
+        LAST_30_DAYS_DATE_RANGE,
+        LAST_90_DAYS_DATE_RANGE,
+        LAST_365_DAYS_DATE_RANGE,
+        LAST_MONTH_DATE_RANGE,
+        LAST_12_MONTHS_DATE_RANGE,
+        LAST_YEAR_DATE_RANGE,
+    ];
+    return {
+        DATE_TIME_FILTERS,
+        LAST_7_DAYS_DATE_RANGE,
+        LAST_30_DAYS_DATE_RANGE,
     };
-    return (jsx(BaseTimePicker, { activatorProps: activatorProps, dateTimeFilters: dateTimeFilters, rangeAddition: rangeAddition, popoverProps: popoverProps, actionProps: actionProps, buttonValue: getButtonValue(), activator: activator, onApply: onApply }));
 };
 
-const GTimePicker = (props) => {
-    const { isCompare, ...timePickerProps } = props;
-    return (jsxs(InlineStack, { gap: "200", children: [jsx(MainTimePicker, { ...timePickerProps }), isCompare && (jsx(CompareTimePicker, { rangeAddition: timePickerProps.rangeAddition, popoverProps: timePickerProps.popoverProps }))] }));
-};
-
-const GViewBySelector = ({ activatorText, selected, options, minWidth, maxWidth, preferredAlignment = 'right', onSelect, }) => {
-    const [popoverActive, setPopoverActive] = useState(false);
-    const [itemHover, setItemHover] = useState(null);
-    const togglePopoverActive = () => setPopoverActive((prev) => !prev);
-    const selectedOption = useMemo(() => {
-        return options.find((item) => item.id === selected);
-    }, [options, selected]);
-    const activatorContent = useMemo(() => {
-        if (selectedOption) {
-            const content = selectedOption.title ?? selectedOption.content;
-            return activatorText ? `${activatorText}: ${content}` : content;
-        }
-        return activatorText;
-    }, [selectedOption, activatorText]);
-    const handleSelect = (value) => {
-        onSelect(value);
-        setPopoverActive(false);
+const DateTimePickerContext = createContext({
+    dateTimePicked: {
+        since: dayjsTz().valueOf(),
+        until: dayjsTz().valueOf(),
+        title: 'Today',
+        alias: 'today',
+    },
+    compareDateTimePicked: PREVIOUS_PERIOD_FILTER,
+    setDateTimePicked: () => { },
+    setCompareDateTimePicked: () => { },
+    resetDateVersion: () => { },
+});
+const DateTimePickerProvider = ({ children, initDate, initDateCompare, }) => {
+    const [dateTimePicked, setDateTimePicked] = useState(initDate || {
+        since: dayjsTz().set('hour', 0).valueOf(),
+        until: dayjsTz().set('hour', 0).valueOf(),
+        title: 'Today',
+        alias: 'today',
+    });
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const getCompareDateTimePicked = useCallback((alias, source = dateTimePicked) => {
+        return {
+            ...PREVIOUS_PERIOD_FILTER,
+            ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
+                since: source.since,
+                until: source.until,
+                alias: source.alias,
+            }),
+        };
+    }, [dateTimePicked]);
+    const [compareDateTimePicked, setCompareDateTimePicked] = useState(initDateCompare || getCompareDateTimePicked(CompareDateTimePickerAlias.PREVIOUS_PERIOD));
+    const updateCompareDateTimePicked = useCallback((source) => {
+        if (compareDateTimePicked.alias === 'custom' ||
+            compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON)
+            return;
+        setCompareDateTimePicked(getCompareDateTimePicked(compareDateTimePicked.alias, source));
+    }, [compareDateTimePicked, getCompareDateTimePicked]);
+    const resetDateVersion = () => {
+        const since = dayjs(dateTimePicked.since).startOf('day').valueOf();
+        const until = dayjs(dateTimePicked.until).startOf('day').valueOf();
+        const dateFilter = DATE_TIME_FILTERS.find((filter) => filter.since === since && filter.until === until);
+        setDateTimePicked({
+            ...dateTimePicked,
+            isVersion: false,
+            versionId: undefined,
+            isCurrentVersion: false,
+            description: '',
+            title: dateFilter?.title || dateTimePicked.title,
+            alias: dateFilter?.alias || 'custom',
+        });
     };
-    return (jsx(Popover, { active: popoverActive, activator: jsx(GActivatorPopover, { active: popoverActive, content: activatorContent, textProps: { variant: 'bodySm' }, onClick: togglePopoverActive }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, padding: "200", children: jsx(BlockStack, { gap: "200", children: options.map((option) => {
-                    const isSelected = option.id === selected;
-                    const isHover = itemHover === option.id;
-                    const borderColor = isSelected ? 'input-border' : isHover ? 'border-hover' : 'transparent';
-                    return (jsx(Box, { padding: "150", borderWidth: "025", borderColor: borderColor, borderRadius: "100", children: jsx("div", { onClick: () => handleSelect(option.id), className: "cursor-pointer", onMouseEnter: () => setItemHover(option.id), onMouseLeave: () => setItemHover(null), children: jsxs(InlineStack, { gap: "300", align: "space-between", blockAlign: "center", wrap: false, children: [jsxs(InlineStack, { gap: "300", blockAlign: "center", wrap: false, children: [jsx("div", { className: "bg-surface-secondary flex items-center justify-center rounded-md min-w-[184px] h-[92px]", children: jsx("img", { src: option.icon, alt: option.content, className: "w-full h-full object-contain" }) }), jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "semibold", children: option.content }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", children: option.helpText })] })] }), isSelected && (jsx(Box, { children: jsx(Icon, { source: SvgCheckIcon }) }))] }) }) }, option.id));
-                }) }) }) }));
+    const onSetDateTimePicked = useCallback((value) => {
+        setDateTimePicked(value);
+        updateCompareDateTimePicked(value);
+    }, [updateCompareDateTimePicked]);
+    return (jsx(DateTimePickerContext.Provider, { value: {
+            dateTimePicked,
+            setDateTimePicked: onSetDateTimePicked,
+            compareDateTimePicked,
+            setCompareDateTimePicked,
+            resetDateVersion,
+        }, children: children }));
 };
-
-const ChoiceHelpText = ({ item }) => {
-    return (jsxs(Text, { as: "p", variant: "bodyMd", children: [item.description, item.inlineAction && (jsx(Link, { monochrome: true, onClick: () => {
-                    if (item.inlineAction?.onAction) {
-                        item.inlineAction?.onAction();
-                    }
-                    else {
-                        window.open(item.inlineAction?.url, item.inlineAction?.target ?? '_blank');
-                    }
-                }, children: item.inlineAction?.content }))] }));
+const useDateTimePickerContext = () => {
+    const context = useContext(DateTimePickerContext);
+    if (!context) {
+        throw new Error('useDateTimePickerContext must be used within a DateTimePickerProvider');
+    }
+    return context;
 };
 
-const GChoice = ({ item, disabled, isActive, suffix, isMultipleSelect, onClick, children, position = 'right', boxProps, activeStyle, }) => {
-    const paddingBox = {
-        paddingBlockStart: '200',
-        paddingBlockEnd: '200',
-        paddingInlineStart: '400',
-        paddingInlineEnd: '400',
-    };
-    const emitOnClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (disabled)
-            return;
-        onClick?.(item.value, item.type);
-    };
-    const styleByState = useMemo(() => {
-        if (!isActive) {
-            return {
-                box: { outlineWidth: '025', outlineColor: 'border' },
-                text: { fontWeight: 'regular' },
+const useDateTimePicker = ({ ranges, initialPicked, onApply }) => {
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const allRanges = ranges || DATE_TIME_FILTERS;
+    const { dateTimePicked, setDateTimePicked } = useDateTimePickerContext();
+    const [dateRange, setDateRange] = useState(dateTimePicked);
+    const [{ month, year }, setDate] = useState({
+        month: dayjs(dateTimePicked.since).month(),
+        year: dayjs(dateTimePicked.since).year(),
+    });
+    useEffect(() => {
+        if (dateTimePicked) {
+            const untilDate = new Date(dateTimePicked.until);
+            const monthDiff = (referenceDate, newDate) => {
+                return newDate.month - referenceDate.month + 12 * (referenceDate.year - newDate.year);
             };
+            monthDiff({ year, month }, {
+                year: untilDate.getFullYear(),
+                month: untilDate.getMonth(),
+            });
+            // if (monthDifference > 1 || monthDifference < 0) {
+            //   setDate({
+            //     month: untilDate.getMonth(),
+            //     year: untilDate.getFullYear(),
+            //   });
+            // }
         }
-        if (activeStyle)
-            return activeStyle;
-        return {
-            box: { outlineWidth: '050', outlineColor: 'border-inverse' },
-            text: { fontWeight: 'semibold' },
-        };
-    }, [activeStyle, isActive]);
-    const checkBoxComponent = () => {
-        return (jsx(Checkbox, { label: jsx(InlineStack, { gap: "100", children: jsx(Text, { truncate: true, as: "p", variant: "bodyMd", fontWeight: styleByState.text.fontWeight, children: item.label }) }), disabled: disabled, checked: isActive, name: item.type, ...(item.description && { helpText: jsx(ChoiceHelpText, { item: item }) }) }));
+    }, [dateTimePicked, month, year]);
+    const onMonthChange = (month, year) => {
+        setDate({ month, year });
     };
-    const radioComponent = () => {
-        return (jsx(RadioButton, { label: jsxs(InlineStack, { gap: "100", children: [jsx(Text, { truncate: true, as: "p", variant: "bodyMd", fontWeight: styleByState.text.fontWeight, children: item.label }), item.icon] }), disabled: disabled, checked: isActive, name: item.type, ...(item.description && { helpText: jsx(ChoiceHelpText, { item: item }) }) }));
+    const onCalendarChange = (value) => {
+        const { start, end, alias } = value;
+        const customDateRange = {
+            alias: 'custom',
+            title: 'Custom',
+            since: start.getTime(),
+            until: end.getTime(),
+        };
+        const newDateRange = allRanges.find((range) => {
+            const isSameAlias = range.alias === alias;
+            const isSameUntil = range.until === end.getTime();
+            const isSameSince = range.since === start.getTime();
+            // const isSameVersionId = !!range.versionId && !!versionId && range.versionId === versionId;
+            const isSameTime = isSameSince && isSameUntil;
+            return isSameAlias || isSameTime;
+        });
+        const finalDateRange = newDateRange || initialPicked || customDateRange;
+        setDateRange(finalDateRange);
     };
-    const renderInputComponent = () => {
-        return isMultipleSelect ? checkBoxComponent() : radioComponent();
+    const onChange = ({ end }) => {
+        setDate(getMonthAndYearByDateFilter(month, year, end));
     };
-    return (jsx("div", { onClick: (e) => emitOnClick(e), className: 'GChoice-ChoiceBox', children: jsx(Box, { borderRadius: "300", padding: '050', children: jsx(Box, { ...paddingBox, ...styleByState.box, shadow: "100", borderRadius: "300", ...boxProps, children: jsx(BlockStack, { gap: "0", children: jsxs(InlineStack, { align: "space-between", children: [position === 'left' && children, renderInputComponent(), position === 'right' && children, suffix] }) }) }) }, item.value) }));
-};
-
-const GChartSkeleton = () => {
-    return jsx(GSkeletonDisplayText, { height: "188px" });
-};
-
-const LINE_SERIES_COLORS = {
-    comparison: SERIES_COLORS.comparison,
-    single: SERIES_COLORS.current,
-    all: [...SERIES_COLORS.all],
-};
-const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesColors = LINE_SERIES_COLORS, }) => {
-    return (jsx(PolarisVizProvider, { themes: {
-            Light: {
-                chartContainer: {
-                    minHeight,
-                },
-                grid: {
-                    horizontalOverflow: true,
-                    verticalOverflow: true,
-                    horizontalMargin: 0,
-                },
-                seriesColors,
-            },
-        }, children: children }));
-};
-
-const useFormatLineChartData = ({ metricKey, columnTypes }) => {
-    const { formatData } = useAnalyticData();
-    const formatter = metricKey ? columnTypes?.[metricKey] : undefined;
-    const formatValue = (value) => {
-        return String(formatData({ value, formatter }));
+    const apply = () => {
+        setDateTimePicked(dateRange);
+        onApply?.(dateRange);
     };
-    const yAxisOptions = {
-        labelFormatter: (value) => {
-            return formatValue(Number(value) || 0);
-        },
+    const cancel = () => {
+        setDateRange(dateTimePicked);
     };
-    return { formatValue, yAxisOptions };
-};
-
-const useWindowSize = () => {
-    const [windowSize, setWindowSize] = useState(() => ({
-        width: typeof window !== 'undefined' ? window.innerWidth : 0,
-        height: typeof window !== 'undefined' ? window.innerHeight : 0,
-    }));
-    const windowWidth = useMemo(() => {
-        return {
-            xs: windowSize.width <= 768,
-            md: 768 < windowSize.width && windowSize.width <= 1024,
-            lg: windowSize.width > 1024,
-            xsDown: windowSize.width < 768,
-            '1200Down': windowSize.width < 1200,
-            '1040Down': windowSize.width < 1040,
-        };
-    }, [windowSize.width]);
-    const isMobileTabletView = !windowWidth.lg;
-    const isMobileView = windowWidth.xs;
     useEffect(() => {
-        const windowSizeHandler = () => {
-            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-        };
-        window.addEventListener('resize', windowSizeHandler);
-        return () => {
-            window.removeEventListener('resize', windowSizeHandler);
-        };
-    }, []);
-    return { windowSize, windowWidth, isMobileTabletView, isMobileView };
-};
-
-const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
-    const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
-    if (!metricKey) {
-        return jsx(Fragment, {});
-    }
-    if (isLoading) {
-        return jsx(GChartSkeleton, {});
-    }
-    if (isEmptyMetricData) {
-        return jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" });
-    }
-    return (jsx(MetricChartProvider, { children: jsx(LineChart, { data: lineChartData, yAxisOptions: yAxisOptions, theme: "Light", tooltipOptions: {
-                titleFormatter: () => `${ANALYTICS_METRIC_TOOLTIP[metricKey]?.title ?? ''}`,
-                keyFormatter: (value) => {
-                    return value;
-                },
-                renderTooltipContent(data) {
-                    return jsx(MetricChartTooltip, { data: data, formatValue: formatValue });
-                },
-            }, showLegend: true }) }));
-};
-
-var IMAGE_ANALYTIC_EMPTY = "data:image/png;base64,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";
-
-const MetricChartEmpty = ({ boxProps, minHeight, description, title }) => {
-    return (jsx(Box, { minWidth: "100%", ...boxProps, children: jsx(GBlockCenter, { minHeight: minHeight, children: jsx(Box, { padding: '400', children: jsxs(BlockStack, { gap: "400", align: "center", inlineAlign: "center", children: [jsx("div", { className: "h-[80px] w-[80px]", children: jsx(GThumbnail, { source: IMAGE_ANALYTIC_EMPTY, width: "80px", height: "80px", alt: title, classRemoved: true }) }), jsxs(BlockStack, { gap: "200", align: "center", inlineAlign: "center", children: [jsx(Text, { as: "h4", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "h4", variant: "bodyMd", tone: "subdued", children: description })] })] }) }) }) }));
-};
-
-const DownIcon8px = () => {
-    return (jsxs("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_18114_1160)", children: jsx("path", { d: "M1 1L6.5 6.5M6.5 6.5V1.5M6.5 6.5H1.5", stroke: "#8A8A8A", strokeWidth: "1.5" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_18114_1160", children: jsx("rect", { width: "8", height: "8", fill: "white" }) }) })] }));
-};
-
-const UpIcon8px = () => {
-    return (jsxs("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("g", { clipPath: "url(#clip0_18114_1146)", children: jsx("path", { d: "M1 7L6.5 1.5M6.5 1.5H1.5M6.5 1.5V6.5", stroke: "#29845A", strokeWidth: "1.5" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_18114_1146", children: jsx("rect", { width: "8", height: "8", fill: "white", transform: "matrix(0 -1 1 0 0 8)" }) }) })] }));
-};
-
-const MetricPercentage = ({ change }) => {
-    if (typeof change !== 'number') {
-        return jsx("div", { style: { height: '2px', width: '11px', backgroundColor: '#8A8A8A' } });
-    }
-    return (jsxs("div", { style: {
-            display: 'flex',
-            maxHeight: '20px',
-            width: 'fit-content',
-            alignItems: 'center',
-            gap: '4px',
-            borderRadius: '8px',
-            fontSize: '12px',
-            color: change > 0 ? TREND_TONE.POSITIVE : TREND_TONE.NEUTRAL,
-        }, children: [change < 0 && (jsx(InlineStack, { align: "center", children: jsx(DownIcon8px, {}) })), change > 0 && (jsx(InlineStack, { align: "center", children: jsx(UpIcon8px, {}) })), jsx(Text, { as: "span", variant: "bodyXs", fontWeight: "semibold", children: formatPercentage(Math.abs(change || 0)) })] }));
-};
-
-const MetricChartTooltip = ({ data, formatValue }) => {
-    const { activeIndex } = data;
-    const currentData = data?.dataSeries[0]?.data[activeIndex];
-    const previousData = data?.dataSeries[1]?.data[activeIndex];
-    const formatPercent = () => {
-        const value = currentData.trend?.value;
-        if (!value)
-            return PLACEHOLDER_VALUE;
-        const valueNumber = Number(value.replace(/[%~]/g, ''));
-        if (currentData.trend?.trend === 'negative') {
-            return valueNumber * -1;
+        if (dateTimePicked) {
+            setDateRange(dateTimePicked);
+            setDate({
+                month: dayjs(dateTimePicked.since).month(),
+                year: dayjs(dateTimePicked.since).year(),
+            });
         }
-        return valueNumber;
+    }, [dateTimePicked]);
+    return {
+        month,
+        year,
+        setDate,
+        dateRange,
+        apply,
+        cancel,
+        dateTimePicked,
+        onChange,
+        onMonthChange,
+        onCalendarChange,
     };
-    return (jsx("div", { className: "w-fit min-w-[175px]", children: jsx(Card, { padding: '200', children: jsxs(BlockStack, { gap: '100', children: [jsx(Text, { as: "p", variant: "bodySm", fontWeight: "semibold", children: data.formatters?.titleFormatter?.(data.title || '') || data.title }), jsxs(BlockStack, { gap: '100', children: [jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "h-[2px] w-[12px] rounded-[10px] bg-[#4FA9EA]" }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", tone: "subdued", children: currentData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(currentData.value) }), jsx(MetricPercentage, { change: formatPercent() })] })] }), jsxs(InlineStack, { gap: '400', align: "space-between", blockAlign: "center", children: [jsxs(InlineStack, { gap: '100', blockAlign: "center", children: [jsx("div", { className: "w-[12px] border border-dashed border-[#A1CAE7]" }), jsx(Text, { as: "p", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: previousData.tooltipKey })] }), jsxs(InlineStack, { blockAlign: "center", gap: "100", children: [jsx(Text, { as: "span", variant: "bodySm", fontWeight: "semibold", children: formatValue(previousData.value) }), jsx("div", { className: "opacity-0", children: jsx(MetricPercentage, { change: formatPercent() }) })] })] })] })] }) }) }));
-};
-
-const MetricInfoSkeleton = ({ isShowOneLine }) => {
-    if (isShowOneLine) {
-        return (jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) }));
-    }
-    return (jsxs(BlockStack, { gap: "200", children: [jsx(Box, { width: "60%", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx(Box, { width: "40%", children: jsx(SkeletonBodyText, { lines: 1 }) })] }));
-};
-
-const MetricDonutChartSkeleton = () => {
-    return (jsx(Card, { children: jsxs(BlockStack, { gap: "400", children: [jsx(MetricInfoSkeleton, { isShowOneLine: true }), jsx(GChartSkeleton, {})] }) }));
-};
-
-const MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", wrap: false, children: [jsx(InlineStack, { blockAlign: "center", gap: "200", children: jsx(Text, { as: "span", variant: "headingSm", children: totalValue.value }) }), !hideComparison && jsx(MetricPercentage, { change: totalValue.change })] }) }));
-
-const MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, onClickTitle, }) => {
-    const { key, title, totalValue } = item;
-    const tooltip = ANALYTICS_METRIC_TOOLTIP[key];
-    if (isLoading)
-        return jsx(MetricInfoSkeleton, {});
-    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: (e) => {
-                    e?.stopPropagation();
-                    onClickTitle?.(key);
-                }, children: jsxs(InlineStack, { wrap: false, children: [jsx(Box, { maxWidth: "100%", overflowX: "hidden", children: jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "span", variant: titleVariant, fontWeight: titleFontWeight, truncate: true, children: title }) }) }), isHovered && (jsx("div", { className: "flex h-[20px] w-[20px] items-center", children: jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" }) }))] }) }), jsx(MetricValueSummary, { totalValue: totalValue, hideComparison: hideComparison })] }));
-};
-
-const MetricChartTab = ({ item, isActive, isLoading, hideComparison, onSelect, onClickTitle, }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    const isHighlighted = isActive || isHovered;
-    return (jsx("div", { className: "w-full cursor-pointer overflow-hidden", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(item.key), children: jsx(Box, { paddingBlock: "150", paddingInline: "300", borderRadius: "200", background: isHighlighted ? 'bg-surface-active' : undefined, children: jsx(MetricInfoBlock, { item: item, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, titleVariant: "headingSm", titleFontWeight: "semibold", onClickTitle: onClickTitle }) }) }));
 };
 
-const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
-    const [activeTab, setActiveTab] = useState(defaultActiveTab);
-    const lineChartData = useMemo(() => {
-        const chartData = activeTab ? dataChart[activeTab] : undefined;
-        if (!chartData)
+const useVersionDateTimeFilters = (versions) => {
+    const { t } = useTranslation();
+    const rangers = useMemo(() => {
+        if (!versions?.length)
             return [];
-        const currentSeries = { name: currentPeriodLabel, data: chartData.current };
-        if (hideComparison)
-            return [currentSeries];
-        return [currentSeries, { name: previousPeriodLabel, data: chartData.previous, isComparison: true }];
-    }, [activeTab, dataChart, hideComparison, currentPeriodLabel, previousPeriodLabel]);
-    return (jsxs(Card, { children: [jsx("div", { style: {
-                    display: 'grid',
-                    gridTemplateColumns: `repeat(${metricInfo.length}, 1fr)`,
-                    gap: '16px',
-                    marginBottom: '16px',
-                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, onSelect: setActiveTab }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
+        return convertToDateTimeFilters(versions);
+    }, [versions]);
+    const rangeAddition = {
+        title: t('Experiment periods'),
+        rangers,
+    };
+    return { rangeAddition };
 };
 
-const calculatePercentageChange = (current, previous) => {
-    if (current === 0 && previous === 0) {
-        return undefined;
+function DateTimeFilterInputs({ onBlur, dateRange, setDateTimePicked }) {
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValues, setInputValues] = useState({});
+    const formatDisplayDate = useCallback((timestamp, isEnd = false) => {
+        if (!dateRange.isVersion || (isEnd && dateRange.isCurrentVersion))
+            return formatDate(timestamp, 'FULL');
+        return formatDate(timestamp, 'FULL_WITH_TIME');
+    }, [dateRange.isVersion, dateRange.isCurrentVersion]);
+    useEffect(() => {
+        if (isFocus)
+            return;
+        setInputValues({
+            since: formatDisplayDate(dateRange.since),
+            until: formatDisplayDate(dateRange.until, true),
+        });
+    }, [dateRange, formatDisplayDate]);
+    function handleStartInputValueChange(value) {
+        setInputValues((prevState) => {
+            return { ...prevState, since: value };
+        });
+        if (isValidDate(value)) {
+            const newSinceDate = convertDateToTz(value).startOf('day');
+            const untilDate = convertDateToTz(dateRange.until).endOf('day');
+            const endDate = newSinceDate.isAfter(untilDate) ? newSinceDate.endOf('day') : untilDate;
+            setDateTimePicked({
+                start: dayjsTzToLocalTZ(newSinceDate).toDate(),
+                end: dayjsTzToLocalTZ(endDate).toDate(),
+            });
+        }
     }
-    if (previous === 0) {
-        return current > 0 ? '100%' : '0%';
+    function handleEndInputValueChange(value) {
+        setInputValues((prevState) => ({ ...prevState, until: value }));
+        if (isValidDate(value)) {
+            const nowEndOfDay = dayjsTz().endOf('day');
+            const newUntilDate = convertDateToTz(value).endOf('day');
+            const clampedUntil = newUntilDate.isAfter(nowEndOfDay) ? nowEndOfDay : newUntilDate;
+            const sinceDate = convertDateToTz(dateRange.since).startOf('day');
+            const startDate = clampedUntil.isBefore(sinceDate) ? clampedUntil.startOf('day') : sinceDate;
+            setDateTimePicked({
+                start: dayjsTzToLocalTZ(startDate).toDate(),
+                end: dayjsTzToLocalTZ(clampedUntil).toDate(),
+            });
+        }
     }
-    const change = ((current - previous) / previous) * 100;
-    return `${Math.abs(change).toFixed(0)}%`;
-};
-const computeDonutData = ({ name, currentValue, prevValue, hasPreviousData, }) => ({
-    name,
-    data: [{ key: 'value', value: currentValue }],
-    metadata: {
-        trend: {
-            value: hasPreviousData ? calculatePercentageChange(currentValue, prevValue) : undefined,
-            direction: currentValue >= prevValue ? 'upward' : 'downward',
-            trend: currentValue >= prevValue ? 'positive' : 'negative',
-        },
-    },
-});
-const getTotalCountByType = (stats, type) => {
-    const item = stats?.find((stat) => stat?.type?.toLowerCase() === type.toLowerCase());
-    return item?.total ?? 0;
-};
-const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTotalsRow, sort, }) => {
-    const items = parseBreakdownItems(totalsRow?.[metricKey]);
-    const comparisonItems = parseBreakdownItems(comparisonTotalsRow?.[metricKey]);
-    const hasPreviousData = !!comparisonTotalsRow?.[metricKey];
-    const result = targets.map(({ value, label }) => computeDonutData({
-        name: label,
-        currentValue: getTotalCountByType(items, value),
-        prevValue: getTotalCountByType(comparisonItems, value),
-        hasPreviousData,
-    }));
-    const getValue = (item) => item.data[0]?.value ?? 0;
-    return sort ? [...result].sort((a, b) => getValue(b) - getValue(a)) : result;
+    function handleInputBlur() {
+        setIsFocus(false);
+        setInputValues({
+            since: formatDisplayDate(dateRange.since),
+            until: formatDisplayDate(dateRange.until, true),
+        });
+        onBlur && onBlur();
+    }
+    function handleFocusStartInput() {
+        setIsFocus(true);
+        setInputValues({
+            ...inputValues,
+            since: formatDate(dateRange.since, 'YMD'),
+        });
+    }
+    function handleFocusEndInput() {
+        setIsFocus(true);
+        setInputValues({
+            ...inputValues,
+            until: formatDate(dateRange.until, 'YMD'),
+        });
+    }
+    return (jsxs(InlineGrid, { gap: "200", columns: "1fr auto 1fr", children: [jsx(TextField, { role: "combobox", label: 'Since', labelHidden: true, 
+                // prefix={<Icon source={CalendarIcon} />}
+                value: dateRange.since ? inputValues.since : 'MMMM D, YYYY', onChange: handleStartInputValueChange, onBlur: () => handleInputBlur(), onFocus: () => handleFocusStartInput(), autoComplete: "off" }), jsx(InlineStack, { children: jsx(Icon, { source: SvgArrowRightIcon, tone: "subdued" }) }), jsx(TextField, { role: "combobox", label: 'Until', labelHidden: true, 
+                // prefix={<Icon source={CalendarIcon} />}
+                value: dateRange.until ? inputValues.until : 'MMMM D, YYYY', onChange: handleEndInputValueChange, onBlur: () => handleInputBlur(), onFocus: () => handleFocusEndInput(), autoComplete: "off" })] }));
+}
+
+function DateTimeFilterAddition(props) {
+    const { setDateTimePicked, dateTimePicked, rangeAddition, allRanges } = props;
+    const { value: isExpanded, toggle: toggleExpanded } = useToggle(true);
+    const rangesAdditions = rangeAddition?.rangers || [];
+    const handleChangeFilterByOption = (value) => {
+        const alias = value[0];
+        const result = allRanges.find((range) => range.alias === alias) || allRanges[0];
+        setDateTimePicked({
+            start: dayjsTz(result?.since).toDate(),
+            end: dayjsTz(result?.until).toDate(),
+            alias: result?.alias,
+        });
+    };
+    const options = rangesAdditions.map((range) => {
+        const selected = dateTimePicked.alias === range.alias;
+        return {
+            value: range.alias,
+            label: (jsxs(Text, { as: "span", truncate: true, children: [jsx(Text, { as: "span", variant: 'bodyMd', fontWeight: selected ? 'semibold' : 'regular', children: range.title }), range.description && (jsxs(Fragment, { children: [' ', jsx(Text, { as: "span", variant: 'bodyXs', fontWeight: 'regular', tone: "subdued", children: `(${range.description})` })] }))] })),
+        };
+    });
+    if (!rangeAddition || rangesAdditions.length === 0)
+        return;
+    return (jsxs(Box, { borderBlockEndWidth: '025', borderColor: 'border', paddingBlock: '200', children: [jsx("div", { className: "px-1.5", children: jsx(GDiv, { onClick: toggleExpanded, "aria-expanded": isExpanded, className: cls('hover:bg-surface-hover cursor-pointer rounded-lg p-1.5'), children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", children: rangeAddition.title }), jsx(Box, { children: jsx(Icon, { source: isExpanded ? SvgChevronUpIcon : SvgChevronDownIcon }) })] }) }) }), jsx(Collapsible, { open: isExpanded, id: "date-time-filter-periods-collapsible", transition: { duration: '200ms', timingFunction: 'ease-in-out' }, children: jsx(GOptionList, { options: options, selected: dateTimePicked ? [dateTimePicked.alias] : [], onChange: handleChangeFilterByOption }) })] }));
+}
+
+function DateTimeFilters(props) {
+    const { setDateTimePicked, dateTimePicked, allRanges, isCompare } = props;
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const { mdDown } = useBreakpoints();
+    const rangesDefault = isCompare ? [...DATE_TIME_COMPARISON_FILTERS] : [...DATE_TIME_FILTERS];
+    const handleChangeFilterBySelect = (value) => {
+        const result = allRanges.find(({ title, alias }) => title === value || alias === value) || allRanges[0];
+        setDateTimePicked({
+            start: dayjsTz(result?.since).toDate(),
+            end: dayjsTz(result?.until).toDate(),
+            alias: result?.alias,
+        });
+    };
+    const handleChangeFilterByOption = (value) => {
+        const result = allRanges.find((range) => range.alias === value[0]) || allRanges[0];
+        setDateTimePicked({
+            start: dayjsTz(result?.since).toDate(),
+            end: dayjsTz(result?.until).toDate(),
+            alias: result?.alias,
+        });
+    };
+    return (jsx(Box, { maxWidth: mdDown ? '516px' : '250px', width: mdDown ? '100%' : '250px', padding: { xs: '500', md: '0' }, paddingBlockEnd: { xs: '100', md: '0' }, children: mdDown ? (jsx(Select, { label: "dateRangeLabel", labelHidden: true, onChange: (value) => handleChangeFilterBySelect(value), value: dateTimePicked?.title || dateTimePicked?.alias || '', options: allRanges.map(({ alias, title }) => title || alias) })) : (jsx(Scrollable, { style: { maxHeight: '356px' }, children: jsx(Box, { children: jsxs(BlockStack, { children: [jsx(DateTimeFilterAddition, { ...props }), jsx(OptionList, { options: rangesDefault.map((range) => ({
+                                value: range.alias,
+                                label: range.title,
+                            })), selected: dateTimePicked ? [dateTimePicked.alias] : [], onChange: (value) => handleChangeFilterByOption(value) })] }) }) })) }));
+}
+
+const useCompareDateTimePicker = ({ ranges, onApply }) => {
+    const allRanges = ranges || DATE_TIME_COMPARISON_FILTERS;
+    const { compareDateTimePicked, setCompareDateTimePicked } = useDateTimePickerContext();
+    const { dateTimePicked: mainDateRange } = useDateTimePickerContext();
+    const [dateRange, setDateRange] = useState(compareDateTimePicked);
+    const [{ month, year }, setDate] = useState({
+        month: dayjsTz(compareDateTimePicked.since).month(),
+        year: dayjsTz(compareDateTimePicked.since).year(),
+    });
+    const onMonthChange = (month, year) => {
+        setDate({ month, year });
+    };
+    const onCalendarChange = ({ start, end, alias }) => {
+        const newDateRange = allRanges.find((range) => {
+            return range.alias === alias;
+        });
+        // If the alias is not found, set the custom date range
+        if (!newDateRange) {
+            setDateRange({
+                alias: 'custom',
+                title: 'Custom',
+                since: start.getTime(),
+                until: end.getTime(),
+            });
+            return;
+        }
+        setDateRange({
+            ...newDateRange,
+            ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
+                since: mainDateRange.since,
+                until: mainDateRange.until,
+            }),
+        });
+    };
+    const apply = () => {
+        setCompareDateTimePicked(dateRange);
+        onApply?.(dateRange);
+    };
+    const cancel = () => {
+        setDateRange(compareDateTimePicked);
+    };
+    const onChange = ({ end }) => {
+        setDate(getMonthAndYearByDateFilter(month, year, end));
+    };
+    return {
+        month,
+        year,
+        setDate,
+        dateRange,
+        apply,
+        cancel,
+        compareDateTimePicked,
+        onChange,
+        onMonthChange,
+        onCalendarChange,
+    };
 };
 
-const DONUT_CHART_MIN_HEIGHT = 294;
-const COMPACT_MAX_WIDTH = 1500;
-const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, onClick, }) => {
-    const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
-    const { windowWidth, windowSize } = useWindowSize();
-    const [isHovered, setIsHovered] = useState(false);
-    const data = useMemo(() => buildBreakdownDonutData({ targets, metricKey, totalsRow, comparisonTotalsRow, sort }), [targets, metricKey, totalsRow, comparisonTotalsRow, sort]);
-    if (isLoading) {
-        return jsx(MetricDonutChartSkeleton, {});
+const BaseTimePicker = (props) => {
+    const { dateTimeFilters, rangeAddition, popoverProps, activatorProps, actionProps, isCompare, buttonValue, activator, } = props;
+    const initialPicked = rangeAddition?.initialPicked;
+    const ranges = [...(dateTimeFilters || []), ...(rangeAddition?.rangers || [])];
+    const useHookDateTimePicker = isCompare ? useCompareDateTimePicker : useDateTimePicker;
+    const { month, year, dateRange, apply, cancel, onMonthChange, onCalendarChange, onChange } = useHookDateTimePicker({
+        ranges,
+        initialPicked,
+        onApply: props.onApply,
+    });
+    const { t } = useTranslation();
+    const { mdDown, lgUp } = useBreakpoints();
+    const shouldShowMultiMonth = lgUp;
+    const rawTooltipContent = useMemo(() => {
+        // Only show tooltip when selecting Period (isVersion)
+        if (!dateRange.isVersion || !dateRange.since || !dateRange.until)
+            return;
+        return formatDateTimeRange({
+            since: dateRange.since,
+            until: dateRange.until,
+            isShowNow: dateRange.isCurrentVersion,
+        });
+    }, [dateRange.since, dateRange.until, dateRange.isVersion, dateRange.isCurrentVersion]);
+    const [popoverActive, setPopoverActive] = useState(false);
+    // Freeze tooltip content while popover is open to prevent button remount (focus/CSS loss)
+    const datePickerRef = useRef(null);
+    const tooltipContentRef = useRef(rawTooltipContent);
+    if (!popoverActive)
+        tooltipContentRef.current = rawTooltipContent;
+    const tooltipContent = tooltipContentRef.current;
+    //@ts-ignore
+    function nodeContainsDescendant(rootNode, descendant) {
+        if (rootNode === descendant) {
+            return true;
+        }
+        let parent = descendant.parentNode;
+        while (parent != null) {
+            if (parent === rootNode) {
+                return true;
+            }
+            parent = parent.parentNode;
+        }
+        return false;
     }
-    const formatValue = (value) => {
-        return numberWithCommas(`${value}`);
+    //@ts-ignore
+    function isNodeWithinPopover(node) {
+        return datePickerRef?.current ? nodeContainsDescendant(datePickerRef.current, node) : false;
+    }
+    //@ts-ignore
+    function handleInputBlur({ relatedTarget }) {
+        const isRelatedTargetWithinPopover = relatedTarget != null && isNodeWithinPopover(relatedTarget);
+        // If focus moves from the TextField to the Popover
+        // we don't want to close the popover
+        if (isRelatedTargetWithinPopover) {
+            return;
+        }
+        setPopoverActive(false);
+    }
+    function applyFunc() {
+        apply();
+        setPopoverActive(false);
+    }
+    function cancelFunc() {
+        cancel();
+        setPopoverActive(false);
+    }
+    const handleTogglePopover = () => {
+        if (isCompare) {
+            return;
+        }
+        setPopoverActive(!popoverActive);
     };
-    const handleClickTitle = (event) => {
-        event.stopPropagation();
-        onClick();
+    const onChangeDateTimeFilter = (data) => {
+        onCalendarChange(data);
+        onChange(data);
     };
-    const isCompactView = windowWidth.lg && windowSize.width < COMPACT_MAX_WIDTH;
-    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: "hover:cursor-pointer hover:text-[--p-color-text-link-hover]", onClick: handleClickTitle, children: jsxs(InlineStack, { children: [jsx(GTooltipCard, { tooltip: tooltip, children: jsx(Text, { as: "h3", variant: "headingMd", children: label }) }), isHovered && jsx(Icon, { source: SvgChevronRightIcon, tone: "inherit" })] }) }) }), jsx("div", { className: cls('flex items-center justify-center', {
-                            'max-h-[250px] overflow-hidden': isCompactView,
-                        }), children: isEmptyMetricData ? (jsx(MetricChartEmpty, { title: "No data yet", description: "Data needs time to gather" })) : (jsx(MetricChartProvider, { minHeight: minHeight, seriesColors: {}, children: jsx(DonutChart, { data: data, legendPosition: "left", showLegendValues: true, showLegend: true, theme: "Light", tooltipOptions: {
-                                    valueFormatter: formatValue,
-                                }, labelFormatter: formatValue }) })) })] }) }) }));
+    return (jsx(Popover, { active: popoverActive, autofocusTarget: "none", preferredAlignment: "right", preferredPosition: "below", fluidContent: true, sectioned: false, fullHeight: true, activator: jsx(GBlockCenter, { height: "100%", minHeight: "28px", align: "center", children: jsx(GTooltip, { content: tooltipContent, maxWidth: activator ? 'large' : 'extra-large', children: jsx(Box, { children: activator ? (activator({ onClick: handleTogglePopover, value: buttonValue })) : (jsx(Button, { size: "slim", icon: !isCompare ? SvgCalendarIcon : undefined, onClick: handleTogglePopover, ...activatorProps, children: buttonValue })) }) }) }), onClose: cancelFunc, ...popoverProps, children: jsxs(Scrollable, { vertical: true, scrollbarWidth: "thin", className: "max-w-[100%]", children: [jsx(Popover.Pane, { fixed: true, children: jsx("div", { ref: datePickerRef, children: jsxs(InlineGrid, { columns: {
+                                xs: '1fr',
+                                md: 'max-content max-content',
+                            }, gap: "0", children: [jsx(DateTimeFilters, { setDateTimePicked: onChangeDateTimeFilter, dateTimePicked: dateRange, rangeAddition: rangeAddition, allRanges: ranges, isCompare: isCompare }), jsx(Box, { padding: "400", maxWidth: mdDown ? '320px' : '516px', borderInlineStartWidth: "025", borderColor: "border-secondary", children: jsxs(BlockStack, { gap: "400", children: [jsx(DateTimeFilterInputs, { setDateTimePicked: onCalendarChange, dateRange: dateRange, onBlur: () => handleInputBlur }), jsx("div", { children: jsx(DatePicker, { month: month, year: year, selected: !dateRange.since && !dateRange.until
+                                                        ? undefined
+                                                        : {
+                                                            start: dayjs(dateRange.since).toDate(),
+                                                            end: dayjs(dateRange.until).toDate(),
+                                                        }, onMonthChange: onMonthChange, onChange: onCalendarChange, multiMonth: shouldShowMultiMonth, allowRange: true, disableDatesAfter: dayjsTzToDate() }) }), actionProps && (jsx(GButton, { ...actionProps, onClick: () => {
+                                                    setPopoverActive(false);
+                                                    actionProps.onClick?.();
+                                                } }))] }) })] }) }) }), jsx(Popover.Pane, { fixed: true, children: jsx(Box, { padding: "400", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsx(InlineStack, { align: "end", gap: "200", children: jsxs(ButtonGroup, { children: [jsx(Button, { onClick: cancelFunc, children: t('Cancel') }), jsx(Button, { variant: "primary", onClick: applyFunc, children: t('Apply') })] }) }) }) })] }) }));
 };
 
-const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
-    const [isHovered, setIsHovered] = useState(false);
-    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(MetricInfoBlock, { item: metricInfo, isHovered: isHovered, isLoading: isLoading, hideComparison: hideComparison, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
+const CompareTimePicker = (props) => {
+    const { rangeAddition, popoverProps } = props;
+    const initialPicked = rangeAddition?.initialPicked;
+    const dateTimeFilters = DATE_TIME_COMPARISON_FILTERS;
+    const ranges = [...dateTimeFilters, ...(rangeAddition?.rangers || [])];
+    const { t } = useTranslation();
+    const { compareDateTimePicked } = useCompareDateTimePicker({ ranges, initialPicked });
+    const buttonValue = useMemo(() => {
+        if (compareDateTimePicked.alias === CompareDateTimePickerAlias.NO_COMPARISON) {
+            return t('No comparison');
+        }
+        return t('Compare to: {{value}}', {
+            value: getDateRangeTitle(compareDateTimePicked.since, compareDateTimePicked.until),
+        });
+    }, [compareDateTimePicked, t]);
+    return (jsx(BaseTimePicker, { dateTimeFilters: dateTimeFilters, rangeAddition: rangeAddition, popoverProps: popoverProps, isCompare: true, buttonValue: buttonValue }));
 };
 
-var IMAGE_FIRST_SESSION = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXAAAAC4CAMAAADNC0dgAAAAulBMVEUAAAD39/f39/f39/f39/f39/f8/Pz39/fb5P+WrPj///8aHB3j4+P09vfKzdDo6Ojy8vLl5ebd5f7h6P7n7Pzr6+vu7u5wcXLx8/nt8PsxNDn7+/vGxscphFrEzOS8yfakt/je5Pecsfjh4+zQ2fZjZnDr7vdSVFaHm95UnXt4sZd6f41Ek2/H0visvfTk7+vZ3OSOkJZXY4ipqqvX6OBIUm+u0cGRwKqpqqo3i2Vvc4CwtcGFkba82cvy+RBRAAAAB3RSTlMAduu/IJ8QQSls1wAACLJJREFUeNrs1kEKwEAIBEHdNfH/P84lhJzmtsJA1xMaUeN1516NQ9bOir/ajcOuX/JkuAes/Ho3RiS9tTPFi30yZlVEXI0xO6Iag242+KwMPvBROziZo1Y0RhFcI7g7gmsEd0dwjeDuCK4R3B3BNYK7I7hGcHcE1wjujuAawd0RXCO4O4JrBHdHcI3g7giuEdwdwTWCuyO4RnB3BNcI7u5h1+x2nIaBMHo5ThkrcVpbLVGbJlsVFthQEFqEBO//WnizTUddb6bEPyJInKv26kvPTMZu4v/Cef4L/9dJK1wanVtMAYmRRSHBZYY5KYUbhRfydM4Lrc4ZWgIx05x0wg0iKlP0baERMU9jw6BF5VrnV3WdbU4q4TJH1LAYqJ6+G4hOoWxMUT1ngLEhfffNOCeRcKkw73WTcoOoITKmrypRFYhKAsw4J7Zw8l0tXgAqmnHyULwIqXJUBcB8c9IIt2oXLqBCpgrvgTB97802J4lw3fe3CyBG7L6i9+Bi0wFgrjkphEvE3reLielCDR7cu90AzDUnhfB8uEKHSsVrcYP5SAogSoCZ5iQQLlFVixGKeC2uEMZSNBqAmeYkEG7QOJf2+Ovc4tGar6DGcwBEAJhnTgLhudsS37f3sZtPu3Pr86chpZ9c88xJIByxcnz/+HaZKRqioLByPGy/XxZnAzDPnPjCJeZjvi0y1hBH5Xr4QCkaYJ458YUXqGluk+8z4CucH63kgVLmmRNR+PFQ1/t91g3Cf2wfyXc8FevNalmWzZDy6V6Sh3gpcrOyMUK8mjMH4U29z55ph5543Frj5DtEBWmwEnqaIeV+ey/JQxzh69VSiPGcvy98/dBmF1pUCzJOvv0XTfJQioFyECGfTJCHAOFUVCG4nL8u/Fk3ccKKjJPv0P3D+skDgViRCfIQWlZJRU2TEy780GbX7Gjn+nj2TeSeO2S5FNfcISwuJshD4G5/XYqkOeHCj132Alo1Ld9e+AZU4MPGFUH/Z+UH8uD5f5aqmjQnXDi1N9Hi+NMH49yDviIa5okNt9nn2zttTrjwOnuNGnXU53iyF+G2XjEmwu/57EaIZDnhwsm3S3sKf4LMNx7feoXX3FoJkTYnXPg+G6EbGSra4wrJt9t6eRXhNiLfaXPChdfZKDUq8H8LyM8TQqEJf3NKvtPmhAt/yBjqV99zM1tCD9+iVKhDzwbQ/E6bEy78kFlY4/n1SQ7lda5gyZqIdfplLUTanHDhxzbj6U6IWl7OKinE3f4IU1ndNIEGrqqKzRKmIksxPccAQ3zh++wWbW2Vo9Ln03inzhYBJiLFLe4UYj6cYLSf7xohNjCRlfDIKROdvOIHCk+3O2HPaddlTxxgGqW4SdkovGB1W1wVngOcz1kBQ2Thx332h7Rd17Xt5dsaGBgTLE1z19P09ZmuohR+OcyPiS28zjx5gCmUwhMJE9gIT5bAES6cXzF5mBaPbcJt8QRlZVo8rnCa4OEtnsjE1Cm+EanqGi6c36K8//rMe7bFwWHq5vjw5WPPLo6KpUcKU9cUwpvsNb6+OfOWNd4A4bVZ+3jJ2cUYr9I/hd+Ahgvnl8yP9treWd7eMF4D4TNRflIOuQhYNjd8in9dw4XzE+U3e+ffmzYMhOH9dypZotZ2h4OqxKA0TJqogGnSBP3+n2sLK7mxiEvI2/No1ecLvOjxxflxtpklj5OGaU+NB2LGzCgnOQVee3ZEChNl9Wx9wzBJ8vDyE3tqvCZmxIxymlPAtWeAlO5ziobwdN4jfPpTNF7RMKwsvMkRXBgahodSujdnjQpf9QmfsHFgEjeSCs4psIs9x1Is9YJXeNkrnI1Lwsd9t+rkFNDF7rAUQ73gFR5E4Zv2eQq7a/oe4ZwD3TUdkNJAAnGE386SF75CwvMe4ZxTILOrBVIaYqxLuRGENzx8/82mFd6BCBfOOahwICWS8EwQznw+Lzw7kFLDOjtyTw332ZG1KJxzzqgw1R01pFkLcSL/AjMs5d0Iv8uOfIGEd1mv+4TfvhHhhAjHp5RODjilvAHhARMeiD6Et1yPcA8IBx8L5ZT4j4XlUOHYiw8o3BOjJ9ySgLbw/eQvMhY+oucj3M66OQX0ag+lGFXhcoNtlnybMM0rGtCBEGbXTs4MeudOgZRYH6/qcw2f5bRlmSRbnc+zm39zduDnWSBF9/MsE6QWm9BoQxoQzO40Z1mBDQggRb0BIa9Ked7+aNk+I19n5QV/+91jy24Pt9iAlFgttvkNANBEFsCayDL/v4lMi/G+Aw3GxzFhgZhYOyBW44VXNByjbILH9doXAvnxS91qGo6LY8JqDSsuHC/xki4gvfLFnI5EcOF4iV+4ByKPY8LqDyu+IF9vBsdV2AtNePVhxYXTk9IjCq4C33KCD2vcTVX4HZNxUSovtfrDim8b1JxQGBul8rz6sOLCqdRYi48X37jNZbnCqywmHDde0ihSE+VKd+qXES6cguINk/FG0TfjIvjGj+9QrG/GW0XfjFP3jQunlYJvYB43ngCcgm+1I5hkFhVBpE5FhHwp4c8nmHBgT/JTTSi5URAxamCtJ4hPhFIFzfJmF4oimNzKKcalhIELp7pcCLpXLALDW23d/coR3Swcp66Cnm7GO1XdrFyjutUO+2VCOSeQs4f9MsbmsAfhsF+27QnnlY+znq/KEA6qQ1lWNengc2cP2o2xLvcpqZD+STnGvFbKxx+Y/mKHjmkAAGAgCPl3XQefrpeABL6EVwnfhNcJ34TXCd+E1wnfhNcJ34TXCd+E1wnfhNcJ34TXCd+E1wnfhNcJ34TXCd+E1wnfhNcJ34TXCd+E1wnfhNcJ34TXCd+E1wnfhNcJ34Rfe/VyAjEQA0G09LF12vzTXTA2vs3NDQP9QihEa3cOvubgu3PwNQffnYOvOfjuHFyMHBNKakyoiDGh4BwTarwpSgfQfpsy2YBXXCfAxYWCW3hVBDLg0cfYx6qBV0f5zL/yy4oTLn9JSvy4U7oaTQAAAABJRU5ErkJggg==";
-
-var IMAGE_ALL_SESSION = "data:image/png;base64,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";
-
-var EAnalyticMode;
-(function (EAnalyticMode) {
-    EAnalyticMode["ALL_SESSION"] = "ALL_SESSION";
-    EAnalyticMode["FIRST_SESSION"] = "FIRST_SESSION";
-    EAnalyticMode["PAGE_ONLY"] = "PAGE_ONLY";
-})(EAnalyticMode || (EAnalyticMode = {}));
-
-const VIEW_BY_OPTIONS = [
-    {
-        id: EAnalyticMode.ALL_SESSION,
-        content: 'All sessions',
-        helpText: 'Count metrics for all sessions where this page shows up anywhere in the journey: before, during, or after other pages.',
-        icon: IMAGE_ALL_SESSION,
-    },
-    {
-        id: EAnalyticMode.FIRST_SESSION,
-        content: 'Entry session only',
-        helpText: 'Count metrics for sessions only where this page was the very first page visited, then track how they moved through the funnel.',
-        icon: IMAGE_FIRST_SESSION,
-    },
-];
-const AnalyticModeSelector = ({ activatorText = 'View by', value, onChange }) => {
-    const options = useMemo(() => {
-        return VIEW_BY_OPTIONS.map((option) => ({
-            ...option,
-        }));
-    }, []);
-    const onSelectMode = (value) => {
-        onChange(value);
+const MainTimePicker = (props) => {
+    const { rangeAddition, popoverProps, activator, onApply, activatorProps, actionProps } = props;
+    const { DATE_TIME_FILTERS } = useDateTimeFilter();
+    const dateTimeFilters = DATE_TIME_FILTERS;
+    const additionalRanges = rangeAddition?.rangers || [];
+    const initialPicked = rangeAddition?.initialPicked;
+    const ranges = [...dateTimeFilters, ...additionalRanges];
+    const { dateTimePicked } = useDateTimePicker({ ranges, initialPicked });
+    const getButtonValue = () => {
+        if (dateTimePicked.isVersion && additionalRanges.length > 0) {
+            const time = dateTimePicked.description ? `at ${dateTimePicked.description}` : '';
+            return `Period: ${dateTimePicked.title} ${time}`;
+        }
+        if (dateTimePicked.alias === 'custom') {
+            return getDateRangeTitle(dateTimePicked.since, dateTimePicked.until);
+        }
+        return dateTimePicked.title;
     };
-    return (jsx(GViewBySelector, { activatorText: activatorText, options: options, selected: value, onSelect: onSelectMode, maxWidth: "650px" }));
+    return (jsx(BaseTimePicker, { activatorProps: activatorProps, dateTimeFilters: dateTimeFilters, rangeAddition: rangeAddition, popoverProps: popoverProps, actionProps: actionProps, buttonValue: getButtonValue(), activator: activator, onApply: onApply }));
 };
 
-const EXCHANGE_RATE_HELP_URL = 'https://help.shopify.com/en/manual/international/pricing/exchange-rates#auto-convert';
-const CurrencySelector = ({ currencies, selected, preferredAlignment = 'left', activatorText, onSelect, }) => {
-    const { t } = useTranslation();
-    const onSelectRef = useRef(onSelect);
-    const handleSelection = useCallback((value) => {
-        onSelectRef.current?.(value);
-    }, []);
-    const actionItems = useMemo(() => {
-        if (!currencies)
-            return [];
-        const formattedCurrencies = currencies.map((currency) => ({
-            content: currency,
-            id: currency,
-        }));
-        const hasCurrencyDefault = formattedCurrencies.some((item) => item.id === DEFAULT_CURRENCY_ANALYTIC);
-        if (!hasCurrencyDefault) {
-            formattedCurrencies.push({
-                content: DEFAULT_CURRENCY_ANALYTIC,
-                id: DEFAULT_CURRENCY_ANALYTIC,
-            });
-        }
-        return sortByConditions(formattedCurrencies, [
-            { attr: 'content', order: 'asc', preferredValue: DEFAULT_CURRENCY_ANALYTIC },
-        ]);
-    }, [currencies]);
-    const actionListItems = useMemo(() => {
-        return actionItems.map((option) => ({
-            id: option.id,
-            content: option.content,
-            onAction: () => handleSelection(option.id),
-            active: option.id === selected,
-            suffix: option.id === selected && jsx(Icon, { source: SvgCheckIcon, tone: "success" }),
-            helpText: option.id === DEFAULT_CURRENCY_ANALYTIC && (jsx(Text, { as: "p", fontWeight: "semibold", children: t('Default') })),
-        }));
-    }, [actionItems, selected, handleSelection, t]);
-    const isHidden = useMemo(() => {
-        if (!actionItems?.length)
-            return true;
-        return actionItems.length === 1 && actionItems[0]?.id === DEFAULT_CURRENCY_ANALYTIC;
-    }, [actionItems]);
-    useEffect(() => {
-        onSelectRef.current = onSelect;
-    });
-    if (isHidden)
-        return null;
-    return (jsx(GSelector, { options: actionListItems, selected: selected, variant: "action-list", 
-        // value originates from our CurrencyCode option ids, so the widen-to-string round trip is safe
-        onSelect: (value) => handleSelection(value), activatorText: activatorText ?? t('Currency'), maxWidth: "225px", preferredAlignment: preferredAlignment, helpText: jsx(Box, { padding: "200", paddingBlockStart: "300", paddingBlockEnd: "300", borderColor: "border-tertiary", background: 'bg', children: jsx(GI18NText, { as: "p", variant: "bodyMd", transformers: {
-                    1: (text) => (jsx(GTextLink, { linkAction: {
-                            url: EXCHANGE_RATE_HELP_URL,
-                            target: '_blank',
-                        }, children: text }, text + 'text-link')),
-                }, children: t("This will follow Shopify's current exchange rate. [1]Read more[]") }) }) }));
+const GTimePicker = (props) => {
+    const { isCompare, ...timePickerProps } = props;
+    return (jsxs(InlineStack, { gap: "200", children: [jsx(MainTimePicker, { ...timePickerProps }), isCompare && (jsx(CompareTimePicker, { rangeAddition: timePickerProps.rangeAddition, popoverProps: timePickerProps.popoverProps }))] }));
 };
 
-export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, ChoiceHelpText, CompareDateTimePickerAlias, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EAnalyticColumnKey, EAnalyticMode, EDeviceType, EMetricKey, ETrafficSourceType, EVisitorType, GActivatorPopover, GBlockCenter, GButton, GCheckbox, GCheckboxMultiple, GCheckboxSingle, GChoice, GClickable, GDiv, GI18NText, GOptionList, GSelectableMetricChartCard, GSelector, GSkeletonDisplayText, GTextLink, GThumbnail, GTimePicker, GTooltip, GTooltipCard, GViewBySelector, MainDateTimePickerAlias, MetricDonutChartCard, PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, convertToDateTimeFilters, createLastDaysRange, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useVersionDateTimeFilters, variationName };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CompareDateTimePickerAlias, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, GSelectableMetricChartCard, GTimePicker, MainDateTimePickerAlias, MetricDonutChartCard, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, SERIES_COLORS, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, convertDateToTz, convertToDateTimeFilters, createLastDaysRange, dayjsTz, dayjsTzToDate, dayjsTzToLocalTZ, formatDate, formatDateTimeRange, formatDayjs, formatMs, formatTime, formatTimeRange, getDateRangeTitle, getDateTimeFilterBase, getDateTimeFilterByAlias, getDateTimeFilterMapping, getEndOfDayBy, getInitialTimezone, getLast12Months, getLast30Days, getLast365Days, getLast7Days, getLast90Days, getLastMonth, getLastYear, getMonthAndYearByDateFilter, getNoComparison, getPreviousMonth, getPreviousPeriod, getPreviousQuarter, getPreviousWeek, getPreviousYear, getToday, getVersionDateDescription, getVersionDateRangeTitle, getYesterday, isDate, isMidnight, isSameDayTimestamp, isValidDate, isValidYearMonthDayDateString, parseYearMonthDayDateString, setTz, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useVersionDateTimeFilters };