@gem-sdk/analytics 2.0.0-dev.1 → 2.0.0

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 "use client"
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip as Tooltip$1, Popover, BlockStack, List, Button, Checkbox, RadioButton, ActionList, Link, SkeletonDisplayText, Pagination as Pagination$1, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup, Divider, Spinner, Badge } from '@shopify/polaris';
+import { Text, Box, InlineStack, Icon, InlineGrid, Tooltip as Tooltip$1, Popover, BlockStack, List, Button, Checkbox, RadioButton, ActionList, Link, SkeletonDisplayText, Pagination as Pagination$1, Spinner, Modal, Card, SkeletonBodyText, TextField, Collapsible, useBreakpoints, Select, Scrollable, OptionList, DatePicker, ButtonGroup, Divider, Badge } from '@shopify/polaris';
 import * as React from 'react';
 import React__default, { useMemo, useCallback, forwardRef, useState, useRef, useImperativeHandle, useEffect, Fragment as Fragment$1, createContext, useContext, createElement, useLayoutEffect, memo, Component } from 'react';
 import dayjs from 'dayjs';
@@ -15,6 +15,8 @@ import { PolarisVizProvider, LineChart, DonutChart } from '@shopify/polaris-viz'
 import chartStyle from '@shopify/polaris-viz/build/esm/styles.css?url';
 import { t as t$1 } from 'i18next';
 import { unstable_batchedUpdates, createPortal } from 'react-dom';
+import { arc } from 'd3-shape';
+import { scaleLinear, scaleBand } from 'd3-scale';
 import { persist } from 'zustand/middleware';
 
 var EMetricKey;
@@ -211,6 +213,11 @@ var ICampaignType;
     ICampaignType["TEMPLATE_BUNDLE"] = "TEMPLATE_BUNDLE";
     // THEME = 'THEME',
 })(ICampaignType || (ICampaignType = {}));
+var IVariantType$1;
+(function (IVariantType) {
+    IVariantType["VARIANT_A"] = "A";
+    IVariantType["VARIANT_B"] = "B";
+})(IVariantType$1 || (IVariantType$1 = {}));
 
 const TARGET_VISITOR = [
     { value: EVisitorType.NEW, label: 'New' },
@@ -305,6 +312,20 @@ var SvgCaretDownIcon = function SvgCaretDownIcon(props) {
 };
 SvgCaretDownIcon.displayName = "CaretDownIcon";
 
+var SvgCartIcon = function SvgCartIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M2.5 3.75a.75.75 0 0 1 .75-.75h1.612a1.75 1.75 0 0 1 1.732 1.5h9.656a.75.75 0 0 1 .748.808l-.358 4.653a2.75 2.75 0 0 1-2.742 2.539h-6.351l.093.78a.25.25 0 0 0 .248.22h6.362a.75.75 0 0 1 0 1.5h-6.362a1.75 1.75 0 0 1-1.738-1.543l-1.04-8.737a.25.25 0 0 0-.248-.22h-1.612a.75.75 0 0 1-.75-.75Zm4.868 7.25h6.53a1.25 1.25 0 0 0 1.246-1.154l.296-3.846h-8.667l.595 5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }));
+};
+SvgCartIcon.displayName = "CartIcon";
+
 var SvgChartLineIcon = function SvgChartLineIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -355,6 +376,39 @@ var SvgChevronUpIcon = function SvgChevronUpIcon(props) {
 };
 SvgChevronUpIcon.displayName = "ChevronUpIcon";
 
+var SvgCursorIcon = function SvgCursorIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10.5 3.75a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0v-2.5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.28 6.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 0 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.28 13.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 1 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7 9.75a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 1 .75.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M5.97 7.03a.75.75 0 0 0 1.06-1.06l-1.75-1.75a.75.75 0 0 0-1.06 1.06l1.75 1.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.22 8.22a.75.75 0 0 1 .767-.181l7.5 2.5a.75.75 0 0 1 .293 1.241l-1.97 1.97 1.97 1.97a.75.75 0 1 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 0 1-1.241-.293l-2.5-7.5a.75.75 0 0 1 .18-.767Zm4.998 5.001.002-.001.001-.002 1.64-1.64-4.925-1.642 1.642 4.926 1.64-1.64Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M10.5 3.75a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0v-2.5Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.28 6.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 0 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.28 13.28a.75.75 0 0 0-1.06-1.06l-1 1a.75.75 0 1 0 1.06 1.06l1-1Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7 9.75a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5a.75.75 0 0 1 .75.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M5.97 7.03a.75.75 0 0 0 1.06-1.06l-1.75-1.75a.75.75 0 0 0-1.06 1.06l1.75 1.75Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.22 8.22a.75.75 0 0 1 .767-.181l7.5 2.5a.75.75 0 0 1 .293 1.241l-1.97 1.97 1.97 1.97a.75.75 0 1 1-1.06 1.06l-1.97-1.97-1.97 1.97a.75.75 0 0 1-1.241-.293l-2.5-7.5a.75.75 0 0 1 .18-.767Zm4.998 5.001.002-.001.001-.002 1.64-1.64-4.925-1.642 1.642 4.926 1.64-1.64Z"
+  }));
+};
+SvgCursorIcon.displayName = "CursorIcon";
+
 var SvgDeleteIcon = function SvgDeleteIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -369,6 +423,17 @@ var SvgDeleteIcon = function SvgDeleteIcon(props) {
 };
 SvgDeleteIcon.displayName = "DeleteIcon";
 
+var SvgExternalSmallIcon = function SvgExternalSmallIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.75 4.5a.75.75 0 0 0 0 1.5h1.19l-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M15 11.25a.75.75 0 0 0-1.5 0v1c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5c0-.69.56-1.25 1.25-1.25h1a.75.75 0 0 0 0-1.5h-1a2.75 2.75 0 0 0-2.75 2.75v4.5a2.75 2.75 0 0 0 2.75 2.75h4.5a2.75 2.75 0 0 0 2.75-2.75v-1Z"
+  }));
+};
+SvgExternalSmallIcon.displayName = "ExternalSmallIcon";
+
 var SvgInfoIcon = function SvgInfoIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -405,6 +470,16 @@ var SvgOrderIcon = function SvgOrderIcon(props) {
 };
 SvgOrderIcon.displayName = "OrderIcon";
 
+var SvgPaymentIcon = function SvgPaymentIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M9.621 4h5.258c.395 0 .736 0 1.017.023.297.024.592.078.875.222.424.216.768.56.984.984.144.283.198.578.222.875.023.28.023.622.023 1.017v2.258c0 .395 0 .736-.023 1.017a2.29 2.29 0 0 1-.222.875 2.25 2.25 0 0 1-.983.984c-.284.144-.58.198-.876.222-.28.023-.622.023-1.017.023h-2.58c-.08.083-.169.16-.265.23l-2.73 1.965c-.565.407-.93.67-1.335.859-.358.167-.736.29-1.125.363-.44.083-.889.083-1.586.083h-1.508a.75.75 0 0 1 0-1.5h1.436c.794 0 1.095-.003 1.379-.057.266-.05.524-.134.77-.248.261-.122.508-.296 1.152-.76l2.67-1.923a.423.423 0 0 0-.35-.753l-4.875 1.219a.75.75 0 0 1-.364-1.456l.932-.233v-2.289c-.59.002-.821.011-1.033.062a2.25 2.25 0 0 0-.65.27c-.21.128-.398.31-.943.854l-.594.594a.75.75 0 0 1-1.06-1.06l.654-.655c.46-.46.78-.78 1.16-1.012a3.75 3.75 0 0 1 1.083-.45c.397-.095.813-.103 1.387-.103a6.79 6.79 0 0 1 .019-.396 2.29 2.29 0 0 1 .222-.875 2.25 2.25 0 0 1 .984-.984 2.29 2.29 0 0 1 .875-.222c.28-.023.622-.023 1.017-.023Zm5.229 7h-2.024a1.925 1.925 0 0 0-2.382-1.697l-2.444.611v-1.414h8.5v.85c0 .432 0 .712-.018.924-.017.204-.045.28-.064.317a.75.75 0 0 1-.328.327c-.037.02-.112.047-.316.064-.212.017-.492.018-.924.018Zm1.645-4.5h-8.49c.002-.104.006-.194.013-.274.017-.204.045-.28.064-.316a.75.75 0 0 1 .328-.328c.037-.02.112-.047.316-.064.212-.017.492-.018.924-.018h5.2c.432 0 .712 0 .924.018.204.017.28.045.316.064a.75.75 0 0 1 .328.328c.02.037.047.112.064.316.007.08.01.17.013.274Z"
+  }));
+};
+SvgPaymentIcon.displayName = "PaymentIcon";
+
 var SvgPlusIcon = function SvgPlusIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -414,6 +489,19 @@ var SvgPlusIcon = function SvgPlusIcon(props) {
 };
 SvgPlusIcon.displayName = "PlusIcon";
 
+var SvgProductRemoveIcon = function SvgProductRemoveIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.575 4.649a3.75 3.75 0 0 1 2.7-1.149h1.975a3.25 3.25 0 0 1 3.25 3.25v2.371c0 .766-.311 1.498-.863 2.029a.75.75 0 1 1-1.04-1.08c.258-.249.403-.591.403-.949v-2.371a1.75 1.75 0 0 0-1.75-1.75h-1.974a2.25 2.25 0 0 0-1.62.69l-4.254 4.417a1.25 1.25 0 0 0 .016 1.75l2.898 2.898a1 1 0 0 0 1.4.014l.451-.434a.75.75 0 1 1 1.04 1.08l-.45.434a2.5 2.5 0 0 1-3.502-.033l-2.898-2.898a2.75 2.75 0 0 1-.036-3.852l4.254-4.417Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12.25 12.25a.75.75 0 0 0 0 1.5h4a.75.75 0 0 0 0-1.5h-4Z"
+  }));
+};
+SvgProductRemoveIcon.displayName = "ProductRemoveIcon";
+
 var SvgSearchIcon = function SvgSearchIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({
     viewBox: "0 0 20 20"
@@ -594,21 +682,26 @@ function sortByArrayOrder(array, order, sortOrder = 'asc') {
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(quarterOfYear);
-let tz = 'UTC';
+// Stored on `globalThis` (not a module-local `let`): each entry-point bundle gets its
+// own copy of this module, so a local var would let `setTz` and the query builder read
+// different copies. A shared global slot keeps every bundle in sync.
+const TZ_GLOBAL_KEY = '__GEM_SDK_ANALYTICS_TZ__';
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 function getInitialTimezone() {
-    return tz;
+    return globalThis[TZ_GLOBAL_KEY] ?? 'UTC';
 }
 function setTz(value) {
-    tz = value;
+    globalThis[TZ_GLOBAL_KEY] = value;
     dayjs.tz.setDefault(value);
 }
 const dayjsTz = (date) => {
+    const tz = getInitialTimezone();
     if (!date)
         return dayjs().tz(tz);
     return dayjs(date).tz(tz);
 };
 const convertDateToTz = (date) => {
+    const tz = getInitialTimezone();
     if (!date)
         return dayjs.tz(dayjs().format(DEFAULT_DATE_FORMAT), tz);
     return dayjs.tz(dayjs(date).format(DEFAULT_DATE_FORMAT), tz);
@@ -691,7 +784,7 @@ const getFormattedByInterval = (value, interval, options) => {
 const deepCopy = (obj) => {
     if (typeof obj !== 'object' || obj === null)
         return obj;
-    return JSON.parse(JSON.stringify(obj));
+    return structuredClone(obj);
 };
 
 var TemplateType;
@@ -750,6 +843,25 @@ const toCapitalize = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);
 };
 
+function findLastIndex(array, predicate, thisArg) {
+    for (let i = array.length - 1; i >= 0; i--) {
+        if (predicate.call(thisArg, array[i], i, array)) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+const isBrowser$1 = () => {
+    return typeof window !== 'undefined';
+};
+
+const formatDateBy = (format, date) => {
+    if (!date)
+        date = new Date();
+    return dayjsTz(date).format(format) ?? '-';
+};
+
 const GClickable = ({ children, fullWidth = false, cursor = 'pointer', onClick, onMouseEnter, onMouseLeave, }) => {
     return (jsx("div", { role: "button", tabIndex: 0, className: cls({
             'w-full': fullWidth,
@@ -943,11 +1055,10 @@ const GCheckboxMultiple = ({ options, onChange, onChangeSingleValue, emptySelect
             }
             return [];
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selected]);
+    }, [selected, options]);
     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 isOnlyOneSelected = !!emptySelected && settingOptions.length === 1;
             const handleCheckboxClick = () => {
                 if (isOnlyOneSelected)
                     return;
@@ -1025,13 +1136,16 @@ function GOptionList({ options, selected, onChange }) {
             }) }) }));
 }
 
+const defaultFormatActivatorContent = (text) => text.join(', ');
 const GSelector = (props) => {
     const [popoverActive, setPopoverActive] = useState(false);
-    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = (text) => text.join(', '), } = props;
+    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = defaultFormatActivatorContent, } = props;
     const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
     const selectedOption = useMemo(() => {
+        // `choice` variant passes selected as string[]; `action-list` as a single string.
+        const isSelected = (id) => (Array.isArray(selected) ? selected.includes(id) : id === selected);
         return options
-            .filter((item) => item.active || item.id === selected)
+            .filter((item) => item.active || isSelected(item.id))
             .map((item) => item.content || '')
             .filter((item) => !!item);
     }, [options, selected]);
@@ -1045,15 +1159,15 @@ const GSelector = (props) => {
         }
         return activatorText;
     }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
-    const selectorMarkup = useMemo(() => {
+    const renderSelectorMarkup = () => {
         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 }));
+    };
+    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: renderSelectorMarkup() }));
 };
 const GSelectorChoice = ({ options, selected, onSelect, maxWidth, minWidth, clearable, setPopoverActive, }) => {
     const { t } = useTranslation();
@@ -1246,7 +1360,7 @@ const GPagination = ({ currentPage, totalPages, loading, handlePageChange, ...pa
     return (jsxs(InlineStack, { gap: "500", blockAlign: "center", children: [jsx(Pagination$1, { ...paginationProps, hasPrevious: !loading && hasPrevious, onPrevious: () => handlePageChange(GPaginationDirection.PREVIOUS), hasNext: !loading && hasNext, onNext: () => handlePageChange(GPaginationDirection.NEXT) }), totalPages > 1 && (jsxs(Text, { as: "span", variant: "bodyMd", numeric: true, children: [currentPage, "/", totalPages] }))] }));
 };
 
-const GInlineCenter = ({ align, inlineAlign, width, ...props }) => {
+const GInlineCenter = ({ align, inlineAlign, width, flexDirection, gap, ...props }) => {
     const stickyStyle = useMemo(() => {
         const style = {};
         return style;
@@ -1255,8 +1369,8 @@ const GInlineCenter = ({ align, inlineAlign, width, ...props }) => {
             ...stickyStyle,
             '--gp-inline-center-box-align': align,
             '--gp-inline-center-box-inline-align': inlineAlign,
-            '--gp-inline-center-box-flex-direction': props.flexDirection,
-            '--gp-inline-center-box-gap': props.gap ? `${(Number(props.gap) * 4) / 100}px` : undefined,
+            '--gp-inline-center-box-flex-direction': flexDirection,
+            '--gp-inline-center-box-gap': gap ? `${(Number(gap) * 4) / 100}px` : undefined,
             '--gp-inline-center-width': width,
         }, children: jsx(Box, { ...props, minWidth: "0" }) }));
 };
@@ -1797,7 +1911,7 @@ const fetchCurrencyRates = async () => {
 };
 const useFetchCurrencyRates = () => {
     const setCurrencyRates = useCurrencyRatesStore((state) => state.setCurrencyRates);
-    const { data } = useQuery({
+    const { data, error, isError } = useQuery({
         queryKey: ['sdk-currency-rates'],
         queryFn: fetchCurrencyRates,
         staleTime: 1000 * 60 * 60, // 1 hour — rates don't change often
@@ -1806,6 +1920,12 @@ const useFetchCurrencyRates = () => {
         if (data)
             setCurrencyRates(data);
     }, [data, setCurrencyRates]);
+    // Surface fetch failures: without rates, money renders in the base currency unconverted.
+    useEffect(() => {
+        if (isError)
+            console.error('[gem-sdk/analytics] Failed to fetch currency rates:', error);
+    }, [isError, error]);
+    return { isError, error };
 };
 
 const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options) => {
@@ -1816,34 +1936,26 @@ const getPriceByCurrency = (price, currency = DEFAULT_CURRENCY_ANALYTIC, options
     // Support legacy 3rd arg as locale string
     const opts = typeof options === 'string' ? { locale: options } : options;
     const locale = opts?.locale ?? 'en-US';
-    if (price >= 1_000_000_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(price / 1_000_000_000)}B`;
-    }
-    if (price >= 1_000_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        }).format(price / 1_000_000)}M`;
-    }
-    if (opts?.compact && Math.abs(price) >= 1_000) {
-        return `${new Intl.NumberFormat(locale, {
-            style: 'currency',
-            currency,
-            minimumFractionDigits: 1,
-            maximumFractionDigits: 1,
-        }).format(price / 1_000)}K`;
-    }
-    return new Intl.NumberFormat(locale, {
+    // Currency's natural minimum (USD → 2, JPY/KRW/VND → 0); used as the floor for scaled tiers.
+    const currencyMinDigits = new Intl.NumberFormat(locale, { style: 'currency', currency }).resolvedOptions().minimumFractionDigits ?? 0;
+    // For scaled tiers, allow extra precision but never force decimals on zero-decimal currencies.
+    const formatCurrency = (value, maxDigits) => new Intl.NumberFormat(locale, {
         style: 'currency',
         currency,
-    }).format(price);
+        ...(maxDigits != null && {
+            minimumFractionDigits: Math.min(currencyMinDigits, maxDigits),
+            maximumFractionDigits: maxDigits,
+        }),
+    }).format(value);
+    const magnitude = Math.abs(price);
+    if (magnitude >= 1_000_000_000)
+        return `${formatCurrency(price / 1_000_000_000, 2)}B`;
+    if (magnitude >= 1_000_000)
+        return `${formatCurrency(price / 1_000_000, 2)}M`;
+    if (opts?.compact && magnitude >= 1_000)
+        return `${formatCurrency(price / 1_000, 1)}K`;
+    // Let Intl pick fraction digits per currency (e.g. JPY/KRW have 0) instead of hardcoding.
+    return formatCurrency(price);
 };
 
 const ConvertMoneyContext = createContext({
@@ -1854,10 +1966,12 @@ const ConvertMoneyContext = createContext({
     },
 });
 const convertAmount = (amount, from, to, rates) => {
-    if (from === to || !rates[from] || !rates[to])
+    if (from === to)
         return amount;
+    if (!rates[from] || !rates[to])
+        return null;
     const converted = (amount * rates[from]) / rates[to];
-    return converted ? Number(converted.toFixed(2)) : amount;
+    return Number.isFinite(converted) ? converted : null;
 };
 const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
     useFetchCurrencyRates();
@@ -1869,10 +1983,16 @@ const ConvertMoneyProvider = ({ children, currency, locale = 'en-US' }) => {
             return '0';
         if (!currency)
             return price.toString();
-        const converted = currencyRates
-            ? convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates)
-            : price;
-        return trimDecimalZeros(getPriceByCurrency(converted, currency, { locale, compact: options?.compact }) ?? '0');
+        let displayAmount = price;
+        let displayCurrency = DEFAULT_CURRENCY_ANALYTIC;
+        if (currencyRates) {
+            const converted = convertAmount(price, DEFAULT_CURRENCY_ANALYTIC, currency, currencyRates);
+            if (converted !== null) {
+                displayAmount = converted;
+                displayCurrency = currency;
+            }
+        }
+        return trimDecimalZeros(getPriceByCurrency(displayAmount, displayCurrency, { locale, compact: options?.compact }) ?? '0');
     }, [currency, locale, currencyRates]);
     const value = useMemo(() => ({ getTextPrice }), [getTextPrice]);
     return jsx(ConvertMoneyContext.Provider, { value: value, children: children });
@@ -2131,7 +2251,13 @@ const parseBreakdownItems = (raw) => parseJsonArray(raw)?.map((item) => ({ ...it
 
 const readNumeric = (metric, key) => {
     const raw = metric?.[key];
-    return typeof raw === 'number' ? raw : 0;
+    if (typeof raw === 'number')
+        return raw;
+    if (typeof raw === 'string') {
+        const n = parseFloat(raw);
+        return isNaN(n) ? 0 : n;
+    }
+    return 0;
 };
 
 const useAnalyticData = ({ getTextPrice: getTextPriceParam, } = {}) => {
@@ -2187,10 +2313,11 @@ const usePopoverResizeObserver = ({ active, onHeightChange, selector = '.Polaris
                 resizeObserver.observe(popoverContent);
             }
         };
-        setTimeout(() => {
+        const timer = setTimeout(() => {
             setupResizeObserver();
         }, 200);
         return () => {
+            clearTimeout(timer);
             if (resizeObserver) {
                 resizeObserver.disconnect();
                 resizeObserver = null;
@@ -2242,6 +2369,18 @@ const useWindowSize = () => {
     return { windowSize, windowWidth, isMobileTabletView, isMobileView };
 };
 
+const usePreventBodyScroll = ({ enable }) => {
+    useEffect(() => {
+        if (!enable || !isBrowser$1())
+            return;
+        // Prevent layout shift from scrollbar removal
+        document.body.style.overflowY = 'hidden';
+        return () => {
+            document.body.style.overflowY = 'unset';
+        };
+    }, [enable]);
+};
+
 // This default value is used in our tests so that consumers of Polaris Viz don't need to mock or fire a ResizeObserver event
 const defaultEntry = process.env.NODE_ENV === 'test' ? { contentRect: { width: 500, height: 500 } } : null;
 function resizeObserver(callback) {
@@ -2439,6 +2578,43 @@ const GBoxCard = ({ children, ...props }) => {
     return (jsx(Box, { ...G_BOX_CARD_DEFAULT_PROPS, ...props, children: children }));
 };
 
+/**
+ * Wraps its children with a demo-experiment tooltip when `isMockData` is true.
+ * When `isMockData` is false it renders the children untouched.
+ *
+ * Keeps the demo copy in a single place so it only needs to be edited here.
+ */
+const GMockDataTooltip = ({ isMockData, content, children, ...props }) => {
+    const { t } = useTranslation();
+    return (jsx(GTooltip, { isEnabled: isMockData, content: content ?? t('This is just a demo experiment. Create a real one to view order listing.'), dismissOnMouseOut: true, ...props, children: children }));
+};
+
+const GDotInline = ({ tone }) => {
+    const textColor = getTextColorByTone();
+    return jsx("span", { className: textColor, children: "\u2022" });
+    function getTextColorByTone() {
+        switch (tone) {
+            case 'inherit':
+                return 'text-inherit';
+            case 'disabled':
+                return 'text-[#B5B5B5]';
+            default:
+                return 'text-inherit';
+        }
+    }
+};
+
+const GSpinner = (props) => {
+    return (jsx("div", { className: cls('Polaris-GSpinner', props.tone ? `Polaris-GSpinner--${props.tone}` : undefined), children: jsx(Spinner, { ...props }) }));
+};
+
+const GModal = ({ children, primaryAction, secondaryActions, ...props }) => {
+    const { isMobileView } = useWindowSize();
+    const resolvedSecondaryActions = secondaryActions ?? [];
+    const showMobileFooter = isMobileView && (primaryAction || resolvedSecondaryActions.length > 0);
+    return (jsxs(Modal, { ...props, size: isMobileView ? 'small' : props.size, primaryAction: showMobileFooter ? undefined : primaryAction, secondaryActions: showMobileFooter ? undefined : secondaryActions, children: [children, showMobileFooter && (jsx(Box, { padding: "400", borderBlockStartWidth: "025", borderColor: "border-secondary", children: jsxs(BlockStack, { gap: "200", children: [jsx(Button, { ...primaryAction, onClick: primaryAction?.onAction, variant: "primary", fullWidth: true, children: primaryAction?.content ?? 'Save' }), resolvedSecondaryActions.map((action, index) => (createElement(Button, { ...action, key: index, fullWidth: true, onClick: action.onAction }, action.content)))] }) }))] }));
+};
+
 const GChartSkeleton = () => {
     return jsx(GSkeletonDisplayText, { height: "188px" });
 };
@@ -2464,6 +2640,20 @@ const MetricChartProvider = ({ children, minHeight = CHART_MIN_HEIGHT, seriesCol
                 }, children: children })] }));
 };
 
+const TimezoneContext = createContext({ tz: 'UTC' });
+const TimezoneProvider = ({ children, tz }) => {
+    const [currentTz, setCurrentTz] = useState(() => {
+        setTz(tz);
+        return tz;
+    });
+    useEffect(() => {
+        setTz(tz);
+        setCurrentTz(tz);
+    }, [tz]);
+    return jsx(TimezoneContext.Provider, { value: { tz: currentTz }, children: children });
+};
+const useTimezoneContext = () => useContext(TimezoneContext);
+
 const MetricChart = ({ lineChartData, isLoading, isEmptyMetricData, columnTypes, metricKey, }) => {
     const { formatValue, yAxisOptions } = useFormatLineChartData({ metricKey, columnTypes: columnTypes || {} });
     if (!metricKey) {
@@ -2518,13 +2708,15 @@ const MetricPercentage = ({ change }) => {
 
 const MetricChartTooltip = ({ data, formatValue }) => {
     const { activeIndex } = data;
-    const currentData = data?.dataSeries[0]?.data[activeIndex];
-    const previousData = data?.dataSeries[1]?.data[activeIndex];
+    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 (!Number.isFinite(valueNumber))
+            return PLACEHOLDER_VALUE$1;
         if (currentData.trend?.trend === 'negative') {
             return valueNumber * -1;
         }
@@ -2544,26 +2736,28 @@ 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 MetricValueSummary = ({ totalValue, hideComparison }) => (jsx(BlockStack, { gap: "200", children: jsxs(InlineStack, { blockAlign: "center", gap: "200", 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 MetricInfoBlock = ({ item, isHovered, isLoading, hideComparison, titleVariant = 'headingMd', titleFontWeight, isMockData, 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) => {
+    return (jsxs(BlockStack, { gap: "200", children: [jsx("div", { className: isMockData ? undefined : 'hover:cursor-pointer hover:text-[--p-color-text-link-hover]', onClick: (e) => {
+                    if (isMockData)
+                        return;
                     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 })] }));
+                }, 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 && !isMockData && (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 MetricChartTab = ({ item, isActive, isLoading, hideComparison, isMockData, 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 }) }) }));
+    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", isMockData: isMockData, onClickTitle: onClickTitle }) }) }));
 };
 
-const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, }) => {
+const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, isLoading, isEmptyMetricData, hideComparison, currentPeriodLabel = DEFAULT_CURRENT_PERIOD_LABEL, previousPeriodLabel = DEFAULT_PREVIOUS_PERIOD_LABEL, columnTypes, isMockData, onclickMetric, }) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const lineChartData = useMemo(() => {
         const chartData = activeTab ? dataChart[activeTab] : undefined;
@@ -2579,7 +2773,7 @@ const GSelectableMetricChartCard = ({ metricInfo, dataChart, defaultActiveTab, i
                     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 })] }));
+                }, children: metricInfo.map((item) => (jsx(MetricChartTab, { item: item, isActive: activeTab === item.key, isLoading: isLoading, hideComparison: hideComparison, isMockData: isMockData, onSelect: setActiveTab, onClickTitle: onclickMetric }, item.key))) }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, metricKey: activeTab, columnTypes: columnTypes })] }));
 };
 
 EGroupOperator.OR;
@@ -2670,7 +2864,7 @@ const buildBreakdownDonutData = ({ targets, metricKey, totalsRow, comparisonTota
 
 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 MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparisonTotalsRow, sort, isLoading, isEmptyMetricData, minHeight = DONUT_CHART_MIN_HEIGHT, isMockData, onClick, }) => {
     const tooltip = ANALYTICS_METRIC_TOOLTIP[metricKey];
     const { windowWidth, windowSize } = useWindowSize();
     const [isHovered, setIsHovered] = useState(false);
@@ -2682,20 +2876,22 @@ const MetricDonutChartCard = ({ label, metricKey, targets, totalsRow, comparison
         return numberWithCommas(`${value}`);
     };
     const handleClickTitle = (event) => {
+        if (isMockData)
+            return;
         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', {
+    return (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: jsx(Card, { children: jsxs(BlockStack, { gap: "200", children: [jsx(InlineStack, { children: jsx("div", { className: isMockData ? undefined : '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 && !isMockData && 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 SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, onClickTitle, }) => {
+const SingleMetricChartCard = ({ metricInfo, lineChartData, isLoading, hideComparison, columnTypes, isEmptyMetricData, isMockData, 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 })] }) }) }));
+    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, isMockData: isMockData, onClickTitle: onClickTitle }), jsx(MetricChart, { lineChartData: lineChartData, isLoading: isLoading, isEmptyMetricData: isEmptyMetricData, columnTypes: columnTypes, metricKey: metricInfo.key })] }) }) }));
 };
 
 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==";
@@ -2930,7 +3126,7 @@ function formatDateTimeRange(data) {
     if (sinceDate.isSame(untilDate, 'day')) {
         return `${sinceDate.format(DATE_FORMAT.SHORT_WITH_TIME)} - ${endTime}`;
     }
-    if (sinceDate.isSame(untilDate, 'day')) {
+    if (sinceDate.isSame(untilDate, 'month')) {
         const time = formatTimeRange({ since, until });
         return `${sinceDate.format(DATE_FORMAT.SHORT)} (${time})`;
     }
@@ -3202,6 +3398,7 @@ const COMPARE_DATE_TIME_FILTERS_MAP = {
 };
 
 const useDateTimeFilter = () => {
+    useTimezoneContext();
     const currentDate = dayjsTzToLocalTZ().startOf('day');
     const mappings = getDateTimeFilterMapping();
     const TODAY_CONFIG = mappings[MainDateTimePickerAlias.TODAY];
@@ -3347,24 +3544,6 @@ const useDateTimePicker = ({ ranges, initialPicked, onApply }) => {
         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 });
     };
@@ -3575,8 +3754,9 @@ const useCompareDateTimePicker = ({ ranges, onApply }) => {
         const newDateRange = allRanges.find((range) => {
             return range.alias === alias;
         });
-        // If the alias is not found, set the custom date range
-        if (!newDateRange) {
+        const mapper = COMPARE_DATE_TIME_FILTERS_MAP[alias];
+        // If the alias is not found (or has no mapper), set the custom date range
+        if (!newDateRange || !mapper) {
             setDateRange({
                 alias: 'custom',
                 title: 'Custom',
@@ -3587,7 +3767,7 @@ const useCompareDateTimePicker = ({ ranges, onApply }) => {
         }
         setDateRange({
             ...newDateRange,
-            ...COMPARE_DATE_TIME_FILTERS_MAP[alias]({
+            ...mapper({
                 since: mainDateRange.since,
                 until: mainDateRange.until,
             }),
@@ -3762,10 +3942,11 @@ const DEFAULT_CONFIG = {
         isEnabledV2: false,
         onView: () => { },
     },
+    autoExpandLevels: false,
 };
 const PathAnalysisConfigContext = createContext(DEFAULT_CONFIG);
-const PathAnalysisConfigProvider = ({ children, pricing, heatmap }) => {
-    const value = useMemo(() => ({ pricing, heatmap }), [pricing, heatmap]);
+const PathAnalysisConfigProvider = ({ children, pricing, heatmap, autoExpandLevels, }) => {
+    const value = useMemo(() => ({ pricing, heatmap, autoExpandLevels }), [pricing, heatmap, autoExpandLevels]);
     return jsx(PathAnalysisConfigContext.Provider, { value: value, children: children });
 };
 const usePathAnalysisConfig = () => useContext(PathAnalysisConfigContext);
@@ -3856,8 +4037,9 @@ const toNumber = (value) => value ?? 0;
 const divideRatio = (part, total) => {
     const numerator = toNumber(part);
     const denominator = toNumber(total);
-    const ratio = numerator > 0 && denominator > 0 ? numerator / denominator : 0;
-    return ratio ? ratio : undefined;
+    if (denominator <= 0 || !Number.isFinite(numerator))
+        return undefined;
+    return numerator / denominator;
 };
 const getTotalSessionMetric = ({ metric }) => detectDataV2By({
     data: metric,
@@ -3964,7 +4146,6 @@ const getNewReturningCustomerMetric = ({ metric }) => detectDataV2By({
     formatter: IMetricFormatter.NORMAL,
 });
 
-const PA_METRIC_TOOLTIP = {};
 const METRICS_COLUMNS = {
     [IPAMetricKey.PAGE_SESSIONS]: { label: 'Sessions' },
     [IPAMetricKey.PAGE_BR]: { label: 'Bounce rate' },
@@ -4070,14 +4251,19 @@ const buildTree = (items) => {
             return;
         map[item.parentID] = [...(map[item.parentID] || []), item];
     });
-    const buildChildren = (parentId) => {
+    const buildChildren = (parentId, visited) => {
         const children = map[parentId] || [];
-        return children.map((child) => ({ ...child, children: buildChildren(child.id) }));
+        return children
+            .filter((child) => child.id !== parentId && !visited.has(child.id))
+            .map((child) => ({
+            ...child,
+            children: buildChildren(child.id, new Set(visited).add(child.id)),
+        }));
     };
     items
         .filter((item) => item.level === 1)
         .forEach((rootItem) => {
-        tree.push({ ...rootItem, children: buildChildren(rootItem.id) });
+        tree.push({ ...rootItem, children: buildChildren(rootItem.id, new Set([rootItem.id])) });
     });
     return tree;
 };
@@ -4268,7 +4454,7 @@ const calculateConversionFunnelTrends = ({ pageWithMetric, previousPathAnalytics
     return trends;
 };
 
-const usePathAnalysisFunnel = ({ pathAnalytics, pathAnalysisCacheKey, dataFirstLevels, locationPath, }) => {
+const usePathAnalysisFunnel = ({ pathAnalytics, pathAnalysisCacheKey, dataFirstLevels, locationPath, autoExpandLevels, }) => {
     const setFirstLevelLocationPath = usePathAnalysisStore((state) => state.setFirstLevelLocationPath);
     const firstLevelLocationPath = usePathAnalysisStore((state) => state.firstLevelLocationPath) || locationPath;
     const setCachedFunnelChartData = useFunnelChartStore((state) => state.setCachedFunnelChartData);
@@ -4379,6 +4565,25 @@ const usePathAnalysisFunnel = ({ pathAnalytics, pathAnalysisCacheKey, dataFirstL
             dynamicLevels: dynamicLevels,
         });
     }, [dynamicLevels]);
+    // Auto-expand the dominant path down every level when the flag is enabled:
+    // first level → highest-traffic child → ... up to MAX_FUNNEL_ADDITIONAL_LEVEL,
+    // stopping as soon as a level has no further paths.
+    useEffect(() => {
+        if (!autoExpandLevels || !pageWithMetric)
+            return;
+        const expandedLevels = [];
+        let currentPage = pageWithMetric;
+        while (expandedLevels.length < MAX_FUNNEL_ADDITIONAL_LEVEL) {
+            const childrenPages = getFunnelChildrenPages(currentPage);
+            if (!childrenPages.length)
+                break;
+            // Pick the dominant child (highest sessions) — matches the top of the "+" popover.
+            const nextPage = childrenPages.reduce((prev, curr) => (curr.metric?.totalSessions || 0) > (prev.metric?.totalSessions || 0) ? curr : prev);
+            expandedLevels.push(nextPage);
+            currentPage = nextPage;
+        }
+        setDynamicLevels(expandedLevels);
+    }, [autoExpandLevels, pageWithMetric]);
     useEffect(() => {
         return () => {
             setFirstLevelLocationPath(undefined);
@@ -4437,12 +4642,14 @@ const PathAnalysisProvider = (props) => {
     const locationPath = analyticsData?.locationPath;
     const shopifyPageType = analyticsData?.shopifyPageType;
     const pathAnalysisCacheKey = JSON.stringify({ mode, campaignVariantID, campaignVersionID });
+    const { autoExpandLevels } = usePathAnalysisConfig();
     const { processedPathAnalytics } = usePathAnalyticsMerger({ pathAnalytics, dataFirstLevels });
     const pathAnalysisFunnelData = usePathAnalysisFunnel({
         pathAnalytics: processedPathAnalytics,
         pathAnalysisCacheKey,
         dataFirstLevels,
         locationPath,
+        autoExpandLevels,
     });
     const isLoading = isLoadingMetric || isFetchingFirstLevelPaths;
     return (jsx(PathAnalysisContext.Provider, { value: {
@@ -5034,341 +5241,150 @@ function clamp$1({
   return amount;
 }
 
-function ascending(a, b) {
-  return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+function isGradientStopType(item) {
+  return item.offset != null && typeof item.offset === 'number' && item.color != null && typeof item.color === 'string';
 }
-
-function descending(a, b) {
-  return a == null || b == null ? NaN
-    : b < a ? -1
-    : b > a ? 1
-    : b >= a ? 0
-    : NaN;
+function isGradientType(color) {
+  return Array.isArray(color) && color.every(item => isGradientStopType(item));
 }
 
-function bisector(f) {
-  let compare1, compare2, delta;
-
-  // If an accessor is specified, promote it to a comparator. In this case we
-  // can test whether the search value is (self-) comparable. We can’t do this
-  // for a comparator (except for specific, known comparators) because we can’t
-  // tell if the comparator is symmetric, and an asymmetric comparator can’t be
-  // used to test whether a single value is comparable.
-  if (f.length !== 2) {
-    compare1 = ascending;
-    compare2 = (d, x) => ascending(f(d), x);
-    delta = (d, x) => f(d) - x;
-  } else {
-    compare1 = f === ascending || f === descending ? f : zero$1;
-    compare2 = f;
-    delta = f;
-  }
+const uniqueId = (() => {
+  let num = 0;
+  return prefix => {
+    num++;
+    return `${prefix}-${num}`;
+  };
+})();
 
-  function left(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) < 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
-    }
-    return lo;
-  }
+const isValidNumber$1 = value => {
+  if (value === 0) return true;
+  return value != null;
+};
+const paddingStringToObject = paddingString => {
+  var _paddingString$match;
+  const numberPattern = /\d+/g;
+  const [top, right, bottom, left] = ((_paddingString$match = paddingString.match(numberPattern)) === null || _paddingString$match === void 0 ? void 0 : _paddingString$match.map(paddingSide => isValidNumber$1(paddingSide) ? paddingSide : null)) || [];
+  const hasValidRight = isValidNumber$1(right);
+  const alternateLeft = hasValidRight ? right : top;
+  return {
+    paddingTop: Number(top),
+    paddingRight: Number(hasValidRight ? right : top),
+    paddingBottom: Number(isValidNumber$1(bottom) ? bottom : top),
+    paddingLeft: Number(isValidNumber$1(left) ? left : alternateLeft)
+  };
+};
 
-  function right(a, x, lo = 0, hi = a.length) {
-    if (lo < hi) {
-      if (compare1(x, x) !== 0) return hi;
-      do {
-        const mid = (lo + hi) >>> 1;
-        if (compare2(a[mid], x) <= 0) lo = mid + 1;
-        else hi = mid;
-      } while (lo < hi);
+const DEFAULT_WIDTH = 11.63;
+function estimateStringWidth(string, characterWidths) {
+  let sum = 0;
+  for (const char of string) {
+    let charWidth = characterWidths[char];
+    if (charWidth == null || isNaN(charWidth)) {
+      var _characterWidths$W;
+      charWidth = (_characterWidths$W = characterWidths.W) !== null && _characterWidths$W !== void 0 ? _characterWidths$W : DEFAULT_WIDTH;
     }
-    return lo;
-  }
-
-  function center(a, x, lo = 0, hi = a.length) {
-    const i = left(a, x, lo, hi - 1);
-    return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+    sum += charWidth;
   }
-
-  return {left, center, right};
+  return sum;
 }
 
-function zero$1() {
-  return 0;
+function getColorVisionEventAttrs({
+  type,
+  index,
+  watch = true
+}) {
+  return {
+    [`${COLOR_VISION_EVENT.dataAttribute}-watch`]: watch,
+    [`${COLOR_VISION_EVENT.dataAttribute}-type`]: type,
+    [`${COLOR_VISION_EVENT.dataAttribute}-index`]: index
+  };
 }
 
-function number$1(x) {
-  return x === null ? NaN : +x;
+function getColorVisionStylesForActiveIndex({
+  activeIndex,
+  index,
+  fadedOpacity = COLOR_VISION_FADED_OPACITY
+}) {
+  const activeOpacity = activeIndex === index ? COLOR_VISION_ACTIVE_OPACITY : fadedOpacity;
+  return {
+    opacity: activeIndex === -1 ? COLOR_VISION_ACTIVE_OPACITY : activeOpacity,
+    transition: 'opacity 100ms ease'
+  };
 }
 
-const ascendingBisect = bisector(ascending);
-const bisectRight = ascendingBisect.right;
-bisector(number$1).center;
-var bisect = bisectRight;
+const isValidNumber = value => {
+  if (value === 0) return true;
+  return value != null;
+};
+const borderRadiusStringToObject = borderRadiusString => {
+  var _borderRadiusString$m;
+  const numberPattern = /\d+/g;
+  const [topLeft, topRight, bottomRight, bottomLeft] = ((_borderRadiusString$m = borderRadiusString.match(numberPattern)) === null || _borderRadiusString$m === void 0 ? void 0 : _borderRadiusString$m.map(corner => isValidNumber(corner) ? corner : null)) || [];
+  const hasValidRight = isValidNumber(topRight);
+  const alternateLeft = hasValidRight ? topRight : topLeft;
+  return {
+    topLeft: Number(topLeft),
+    topRight: Number(hasValidRight ? topRight : topLeft),
+    bottomRight: Number(isValidNumber(bottomRight) ? bottomRight : topLeft),
+    bottomLeft: Number(isValidNumber(bottomLeft) ? bottomLeft : alternateLeft)
+  };
+};
 
-class InternMap extends Map {
-  constructor(entries, key = keyof) {
-    super();
-    Object.defineProperties(this, {_intern: {value: new Map()}, _key: {value: key}});
-    if (entries != null) for (const [key, value] of entries) this.set(key, value);
-  }
-  get(key) {
-    return super.get(intern_get(this, key));
-  }
-  has(key) {
-    return super.has(intern_get(this, key));
-  }
-  set(key, value) {
-    return super.set(intern_set(this, key), value);
-  }
-  delete(key) {
-    return super.delete(intern_delete(this, key));
-  }
+function keepValuePositive(amount) {
+  return Math.abs(clamp$1({
+    amount,
+    min: 0
+  }));
 }
-
-function intern_get({_intern, _key}, value) {
-  const key = _key(value);
-  return _intern.has(key) ? _intern.get(key) : value;
+function getRoundedRectPath({
+  borderRadius,
+  height,
+  width
+}) {
+  if (height == null || width == null) {
+    return '';
+  }
+  let {
+    topLeft,
+    topRight,
+    bottomRight,
+    bottomLeft
+  } = borderRadiusStringToObject(borderRadius);
+  const smallestSize = Math.min(height, width);
+  topLeft = Math.min(topLeft, smallestSize / 2);
+  topRight = Math.min(topRight, smallestSize / 2);
+  bottomRight = Math.min(bottomRight, smallestSize / 2);
+  bottomLeft = Math.min(bottomLeft, smallestSize / 2);
+  const top = topLeft + topRight;
+  const right = topRight + bottomRight;
+  const bottom = bottomRight + bottomLeft;
+  const left = bottomLeft + topLeft;
+  return `
+  M${topLeft},0
+  h${keepValuePositive(width - top)}
+  a${topRight},${topRight} 0 0 1 ${topRight},${topRight}
+  v${keepValuePositive(height - right)}
+  a${bottomRight},${bottomRight} 0 0 1 -${bottomRight},${bottomRight}
+  h-${keepValuePositive(width - bottom)}
+  a${bottomLeft},${bottomLeft} 0 0 1 -${bottomLeft},-${bottomLeft}
+  v-${keepValuePositive(height - left)}
+  a${topLeft},${topLeft} 0 0 1 ${topLeft},-${topLeft}
+  Z
+`;
 }
 
-function intern_set({_intern, _key}, value) {
-  const key = _key(value);
-  if (_intern.has(key)) return _intern.get(key);
-  _intern.set(key, value);
-  return value;
+function define(constructor, factory, prototype) {
+  constructor.prototype = factory.prototype = prototype;
+  prototype.constructor = constructor;
 }
 
-function intern_delete({_intern, _key}, value) {
-  const key = _key(value);
-  if (_intern.has(key)) {
-    value = _intern.get(key);
-    _intern.delete(key);
-  }
-  return value;
+function extend(parent, definition) {
+  var prototype = Object.create(parent.prototype);
+  for (var key in definition) prototype[key] = definition[key];
+  return prototype;
 }
 
-function keyof(value) {
-  return value !== null && typeof value === "object" ? value.valueOf() : value;
-}
-
-const e10 = Math.sqrt(50),
-    e5 = Math.sqrt(10),
-    e2 = Math.sqrt(2);
-
-function tickSpec(start, stop, count) {
-  const step = (stop - start) / Math.max(0, count),
-      power = Math.floor(Math.log10(step)),
-      error = step / Math.pow(10, power),
-      factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
-  let i1, i2, inc;
-  if (power < 0) {
-    inc = Math.pow(10, -power) / factor;
-    i1 = Math.round(start * inc);
-    i2 = Math.round(stop * inc);
-    if (i1 / inc < start) ++i1;
-    if (i2 / inc > stop) --i2;
-    inc = -inc;
-  } else {
-    inc = Math.pow(10, power) * factor;
-    i1 = Math.round(start / inc);
-    i2 = Math.round(stop / inc);
-    if (i1 * inc < start) ++i1;
-    if (i2 * inc > stop) --i2;
-  }
-  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
-  return [i1, i2, inc];
-}
-
-function ticks(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  if (!(count > 0)) return [];
-  if (start === stop) return [start];
-  const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
-  if (!(i2 >= i1)) return [];
-  const n = i2 - i1 + 1, ticks = new Array(n);
-  if (reverse) {
-    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;
-    else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
-  } else {
-    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;
-    else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
-  }
-  return ticks;
-}
-
-function tickIncrement(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  return tickSpec(start, stop, count)[2];
-}
-
-function tickStep(start, stop, count) {
-  stop = +stop, start = +start, count = +count;
-  const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);
-  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
-}
-
-function range(start, stop, step) {
-  start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
-
-  var i = -1,
-      n = Math.max(0, Math.ceil((stop - start) / step)) | 0,
-      range = new Array(n);
-
-  while (++i < n) {
-    range[i] = start + i * step;
-  }
-
-  return range;
-}
-
-function initRange(domain, range) {
-  switch (arguments.length) {
-    case 0: break;
-    case 1: this.range(domain); break;
-    default: this.range(range).domain(domain); break;
-  }
-  return this;
-}
-
-const implicit = Symbol("implicit");
-
-function ordinal() {
-  var index = new InternMap(),
-      domain = [],
-      range = [],
-      unknown = implicit;
-
-  function scale(d) {
-    let i = index.get(d);
-    if (i === undefined) {
-      if (unknown !== implicit) return unknown;
-      index.set(d, i = domain.push(d) - 1);
-    }
-    return range[i % range.length];
-  }
-
-  scale.domain = function(_) {
-    if (!arguments.length) return domain.slice();
-    domain = [], index = new InternMap();
-    for (const value of _) {
-      if (index.has(value)) continue;
-      index.set(value, domain.push(value) - 1);
-    }
-    return scale;
-  };
-
-  scale.range = function(_) {
-    return arguments.length ? (range = Array.from(_), scale) : range.slice();
-  };
-
-  scale.unknown = function(_) {
-    return arguments.length ? (unknown = _, scale) : unknown;
-  };
-
-  scale.copy = function() {
-    return ordinal(domain, range).unknown(unknown);
-  };
-
-  initRange.apply(scale, arguments);
-
-  return scale;
-}
-
-function band() {
-  var scale = ordinal().unknown(undefined),
-      domain = scale.domain,
-      ordinalRange = scale.range,
-      r0 = 0,
-      r1 = 1,
-      step,
-      bandwidth,
-      round = false,
-      paddingInner = 0,
-      paddingOuter = 0,
-      align = 0.5;
-
-  delete scale.unknown;
-
-  function rescale() {
-    var n = domain().length,
-        reverse = r1 < r0,
-        start = reverse ? r1 : r0,
-        stop = reverse ? r0 : r1;
-    step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
-    if (round) step = Math.floor(step);
-    start += (stop - start - step * (n - paddingInner)) * align;
-    bandwidth = step * (1 - paddingInner);
-    if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
-    var values = range(n).map(function(i) { return start + step * i; });
-    return ordinalRange(reverse ? values.reverse() : values);
-  }
-
-  scale.domain = function(_) {
-    return arguments.length ? (domain(_), rescale()) : domain();
-  };
-
-  scale.range = function(_) {
-    return arguments.length ? ([r0, r1] = _, r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
-  };
-
-  scale.rangeRound = function(_) {
-    return [r0, r1] = _, r0 = +r0, r1 = +r1, round = true, rescale();
-  };
-
-  scale.bandwidth = function() {
-    return bandwidth;
-  };
-
-  scale.step = function() {
-    return step;
-  };
-
-  scale.round = function(_) {
-    return arguments.length ? (round = !!_, rescale()) : round;
-  };
-
-  scale.padding = function(_) {
-    return arguments.length ? (paddingInner = Math.min(1, paddingOuter = +_), rescale()) : paddingInner;
-  };
-
-  scale.paddingInner = function(_) {
-    return arguments.length ? (paddingInner = Math.min(1, _), rescale()) : paddingInner;
-  };
-
-  scale.paddingOuter = function(_) {
-    return arguments.length ? (paddingOuter = +_, rescale()) : paddingOuter;
-  };
-
-  scale.align = function(_) {
-    return arguments.length ? (align = Math.max(0, Math.min(1, _)), rescale()) : align;
-  };
-
-  scale.copy = function() {
-    return band(domain(), [r0, r1])
-        .round(round)
-        .paddingInner(paddingInner)
-        .paddingOuter(paddingOuter)
-        .align(align);
-  };
-
-  return initRange.apply(rescale(), arguments);
-}
-
-function define(constructor, factory, prototype) {
-  constructor.prototype = factory.prototype = prototype;
-  prototype.constructor = constructor;
-}
-
-function extend(parent, definition) {
-  var prototype = Object.create(parent.prototype);
-  for (var key in definition) prototype[key] = definition[key];
-  return prototype;
-}
-
-function Color() {}
+function Color() {}
 
 var darker = 0.7;
 var brighter = 1 / darker;
@@ -5601,7 +5617,7 @@ function rgbConvert(o) {
   return new Rgb(o.r, o.g, o.b, o.opacity);
 }
 
-function rgb$2(r, g, b, opacity) {
+function rgb$1(r, g, b, opacity) {
   return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
 }
 
@@ -5612,7 +5628,7 @@ function Rgb(r, g, b, opacity) {
   this.opacity = +opacity;
 }
 
-define(Rgb, rgb$2, extend(Color, {
+define(Rgb, rgb$1, extend(Color, {
   brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
@@ -5725,919 +5741,42 @@ define(Hsl, hsl$1, extend(Color, {
         l = this.l,
         m2 = l + (l < 0.5 ? l : 1 - l) * s,
         m1 = 2 * l - m2;
-    return new Rgb(
-      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-      hsl2rgb(h, m1, m2),
-      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
-      this.opacity
-    );
-  },
-  clamp() {
-    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
-  },
-  displayable() {
-    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
-        && (0 <= this.l && this.l <= 1)
-        && (0 <= this.opacity && this.opacity <= 1);
-  },
-  formatHsl() {
-    const a = clampa(this.opacity);
-    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
-  }
-}));
-
-function clamph(value) {
-  value = (value || 0) % 360;
-  return value < 0 ? value + 360 : value;
-}
-
-function clampt(value) {
-  return Math.max(0, Math.min(1, value || 0));
-}
-
-/* From FvD 13.37, CSS Color Module Level 3 */
-function hsl2rgb(h, m1, m2) {
-  return (h < 60 ? m1 + (m2 - m1) * h / 60
-      : h < 180 ? m2
-      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
-      : m1) * 255;
-}
-
-var constant$1 = x => () => x;
-
-function linear$1(a, d) {
-  return function(t) {
-    return a + t * d;
-  };
-}
-
-function exponential(a, b, y) {
-  return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
-    return Math.pow(a + t * b, y);
-  };
-}
-
-function gamma(y) {
-  return (y = +y) === 1 ? nogamma : function(a, b) {
-    return b - a ? exponential(a, b, y) : constant$1(isNaN(a) ? b : a);
-  };
-}
-
-function nogamma(a, b) {
-  var d = b - a;
-  return d ? linear$1(a, d) : constant$1(isNaN(a) ? b : a);
-}
-
-var rgb$1 = (function rgbGamma(y) {
-  var color = gamma(y);
-
-  function rgb(start, end) {
-    var r = color((start = rgb$2(start)).r, (end = rgb$2(end)).r),
-        g = color(start.g, end.g),
-        b = color(start.b, end.b),
-        opacity = nogamma(start.opacity, end.opacity);
-    return function(t) {
-      start.r = r(t);
-      start.g = g(t);
-      start.b = b(t);
-      start.opacity = opacity(t);
-      return start + "";
-    };
-  }
-
-  rgb.gamma = rgbGamma;
-
-  return rgb;
-})(1);
-
-function numberArray(a, b) {
-  if (!b) b = [];
-  var n = a ? Math.min(b.length, a.length) : 0,
-      c = b.slice(),
-      i;
-  return function(t) {
-    for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
-    return c;
-  };
-}
-
-function isNumberArray(x) {
-  return ArrayBuffer.isView(x) && !(x instanceof DataView);
-}
-
-function genericArray(a, b) {
-  var nb = b ? b.length : 0,
-      na = a ? Math.min(nb, a.length) : 0,
-      x = new Array(na),
-      c = new Array(nb),
-      i;
-
-  for (i = 0; i < na; ++i) x[i] = interpolate$1(a[i], b[i]);
-  for (; i < nb; ++i) c[i] = b[i];
-
-  return function(t) {
-    for (i = 0; i < na; ++i) c[i] = x[i](t);
-    return c;
-  };
-}
-
-function date(a, b) {
-  var d = new Date;
-  return a = +a, b = +b, function(t) {
-    return d.setTime(a * (1 - t) + b * t), d;
-  };
-}
-
-function interpolateNumber(a, b) {
-  return a = +a, b = +b, function(t) {
-    return a * (1 - t) + b * t;
-  };
-}
-
-function object(a, b) {
-  var i = {},
-      c = {},
-      k;
-
-  if (a === null || typeof a !== "object") a = {};
-  if (b === null || typeof b !== "object") b = {};
-
-  for (k in b) {
-    if (k in a) {
-      i[k] = interpolate$1(a[k], b[k]);
-    } else {
-      c[k] = b[k];
-    }
-  }
-
-  return function(t) {
-    for (k in i) c[k] = i[k](t);
-    return c;
-  };
-}
-
-var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
-    reB = new RegExp(reA.source, "g");
-
-function zero(b) {
-  return function() {
-    return b;
-  };
-}
-
-function one(b) {
-  return function(t) {
-    return b(t) + "";
-  };
-}
-
-function string(a, b) {
-  var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
-      am, // current match in a
-      bm, // current match in b
-      bs, // string preceding current number in b, if any
-      i = -1, // index in s
-      s = [], // string constants and placeholders
-      q = []; // number interpolators
-
-  // Coerce inputs to strings.
-  a = a + "", b = b + "";
-
-  // Interpolate pairs of numbers in a & b.
-  while ((am = reA.exec(a))
-      && (bm = reB.exec(b))) {
-    if ((bs = bm.index) > bi) { // a string precedes the next number in b
-      bs = b.slice(bi, bs);
-      if (s[i]) s[i] += bs; // coalesce with previous string
-      else s[++i] = bs;
-    }
-    if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
-      if (s[i]) s[i] += bm; // coalesce with previous string
-      else s[++i] = bm;
-    } else { // interpolate non-matching numbers
-      s[++i] = null;
-      q.push({i: i, x: interpolateNumber(am, bm)});
-    }
-    bi = reB.lastIndex;
-  }
-
-  // Add remains of b.
-  if (bi < b.length) {
-    bs = b.slice(bi);
-    if (s[i]) s[i] += bs; // coalesce with previous string
-    else s[++i] = bs;
-  }
-
-  // Special optimization for only a single match.
-  // Otherwise, interpolate each of the numbers and rejoin the string.
-  return s.length < 2 ? (q[0]
-      ? one(q[0].x)
-      : zero(b))
-      : (b = q.length, function(t) {
-          for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
-          return s.join("");
-        });
-}
-
-function interpolate$1(a, b) {
-  var t = typeof b, c;
-  return b == null || t === "boolean" ? constant$1(b)
-      : (t === "number" ? interpolateNumber
-      : t === "string" ? ((c = color(b)) ? (b = c, rgb$1) : string)
-      : b instanceof color ? rgb$1
-      : b instanceof Date ? date
-      : isNumberArray(b) ? numberArray
-      : Array.isArray(b) ? genericArray
-      : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
-      : interpolateNumber)(a, b);
-}
-
-function interpolateRound(a, b) {
-  return a = +a, b = +b, function(t) {
-    return Math.round(a * (1 - t) + b * t);
-  };
-}
-
-function constants(x) {
-  return function() {
-    return x;
-  };
-}
-
-function number(x) {
-  return +x;
-}
-
-var unit = [0, 1];
-
-function identity$1(x) {
-  return x;
-}
-
-function normalize(a, b) {
-  return (b -= (a = +a))
-      ? function(x) { return (x - a) / b; }
-      : constants(isNaN(b) ? NaN : 0.5);
-}
-
-function clamper(a, b) {
-  var t;
-  if (a > b) t = a, a = b, b = t;
-  return function(x) { return Math.max(a, Math.min(b, x)); };
-}
-
-// normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
-// interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
-function bimap(domain, range, interpolate) {
-  var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
-  if (d1 < d0) d0 = normalize(d1, d0), r0 = interpolate(r1, r0);
-  else d0 = normalize(d0, d1), r0 = interpolate(r0, r1);
-  return function(x) { return r0(d0(x)); };
-}
-
-function polymap(domain, range, interpolate) {
-  var j = Math.min(domain.length, range.length) - 1,
-      d = new Array(j),
-      r = new Array(j),
-      i = -1;
-
-  // Reverse descending domains.
-  if (domain[j] < domain[0]) {
-    domain = domain.slice().reverse();
-    range = range.slice().reverse();
-  }
-
-  while (++i < j) {
-    d[i] = normalize(domain[i], domain[i + 1]);
-    r[i] = interpolate(range[i], range[i + 1]);
-  }
-
-  return function(x) {
-    var i = bisect(domain, x, 1, j) - 1;
-    return r[i](d[i](x));
-  };
-}
-
-function copy(source, target) {
-  return target
-      .domain(source.domain())
-      .range(source.range())
-      .interpolate(source.interpolate())
-      .clamp(source.clamp())
-      .unknown(source.unknown());
-}
-
-function transformer() {
-  var domain = unit,
-      range = unit,
-      interpolate = interpolate$1,
-      transform,
-      untransform,
-      unknown,
-      clamp = identity$1,
-      piecewise,
-      output,
-      input;
-
-  function rescale() {
-    var n = Math.min(domain.length, range.length);
-    if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]);
-    piecewise = n > 2 ? polymap : bimap;
-    output = input = null;
-    return scale;
-  }
-
-  function scale(x) {
-    return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x)));
-  }
-
-  scale.invert = function(y) {
-    return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
-  };
-
-  scale.domain = function(_) {
-    return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice();
-  };
-
-  scale.range = function(_) {
-    return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
-  };
-
-  scale.rangeRound = function(_) {
-    return range = Array.from(_), interpolate = interpolateRound, rescale();
-  };
-
-  scale.clamp = function(_) {
-    return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1;
-  };
-
-  scale.interpolate = function(_) {
-    return arguments.length ? (interpolate = _, rescale()) : interpolate;
-  };
-
-  scale.unknown = function(_) {
-    return arguments.length ? (unknown = _, scale) : unknown;
-  };
-
-  return function(t, u) {
-    transform = t, untransform = u;
-    return rescale();
-  };
-}
-
-function continuous() {
-  return transformer()(identity$1, identity$1);
-}
-
-function formatDecimal(x) {
-  return Math.abs(x = Math.round(x)) >= 1e21
-      ? x.toLocaleString("en").replace(/,/g, "")
-      : x.toString(10);
-}
-
-// Computes the decimal coefficient and exponent of the specified number x with
-// significant digits p, where x is positive and p is in [1, 21] or undefined.
-// For example, formatDecimalParts(1.23) returns ["123", 0].
-function formatDecimalParts(x, p) {
-  if (!isFinite(x) || x === 0) return null; // NaN, ±Infinity, ±0
-  var i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e"), coefficient = x.slice(0, i);
-
-  // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
-  // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
-  return [
-    coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
-    +x.slice(i + 1)
-  ];
-}
-
-function exponent(x) {
-  return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
-}
-
-function formatGroup(grouping, thousands) {
-  return function(value, width) {
-    var i = value.length,
-        t = [],
-        j = 0,
-        g = grouping[0],
-        length = 0;
-
-    while (i > 0 && g > 0) {
-      if (length + g + 1 > width) g = Math.max(1, width - length);
-      t.push(value.substring(i -= g, i + g));
-      if ((length += g + 1) > width) break;
-      g = grouping[j = (j + 1) % grouping.length];
-    }
-
-    return t.reverse().join(thousands);
-  };
-}
-
-function formatNumerals(numerals) {
-  return function(value) {
-    return value.replace(/[0-9]/g, function(i) {
-      return numerals[+i];
-    });
-  };
-}
-
-// [[fill]align][sign][symbol][0][width][,][.precision][~][type]
-var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
-
-function formatSpecifier(specifier) {
-  if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
-  var match;
-  return new FormatSpecifier({
-    fill: match[1],
-    align: match[2],
-    sign: match[3],
-    symbol: match[4],
-    zero: match[5],
-    width: match[6],
-    comma: match[7],
-    precision: match[8] && match[8].slice(1),
-    trim: match[9],
-    type: match[10]
-  });
-}
-
-formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
-
-function FormatSpecifier(specifier) {
-  this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
-  this.align = specifier.align === undefined ? ">" : specifier.align + "";
-  this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
-  this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
-  this.zero = !!specifier.zero;
-  this.width = specifier.width === undefined ? undefined : +specifier.width;
-  this.comma = !!specifier.comma;
-  this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
-  this.trim = !!specifier.trim;
-  this.type = specifier.type === undefined ? "" : specifier.type + "";
-}
-
-FormatSpecifier.prototype.toString = function() {
-  return this.fill
-      + this.align
-      + this.sign
-      + this.symbol
-      + (this.zero ? "0" : "")
-      + (this.width === undefined ? "" : Math.max(1, this.width | 0))
-      + (this.comma ? "," : "")
-      + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
-      + (this.trim ? "~" : "")
-      + this.type;
-};
-
-// Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
-function formatTrim(s) {
-  out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
-    switch (s[i]) {
-      case ".": i0 = i1 = i; break;
-      case "0": if (i0 === 0) i0 = i; i1 = i; break;
-      default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
-    }
-  }
-  return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
-}
-
-var prefixExponent;
-
-function formatPrefixAuto(x, p) {
-  var d = formatDecimalParts(x, p);
-  if (!d) return prefixExponent = undefined, x.toPrecision(p);
-  var coefficient = d[0],
-      exponent = d[1],
-      i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
-      n = coefficient.length;
-  return i === n ? coefficient
-      : i > n ? coefficient + new Array(i - n + 1).join("0")
-      : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
-      : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
-}
-
-function formatRounded(x, p) {
-  var d = formatDecimalParts(x, p);
-  if (!d) return x + "";
-  var coefficient = d[0],
-      exponent = d[1];
-  return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
-      : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
-      : coefficient + new Array(exponent - coefficient.length + 2).join("0");
-}
-
-var formatTypes = {
-  "%": (x, p) => (x * 100).toFixed(p),
-  "b": (x) => Math.round(x).toString(2),
-  "c": (x) => x + "",
-  "d": formatDecimal,
-  "e": (x, p) => x.toExponential(p),
-  "f": (x, p) => x.toFixed(p),
-  "g": (x, p) => x.toPrecision(p),
-  "o": (x) => Math.round(x).toString(8),
-  "p": (x, p) => formatRounded(x * 100, p),
-  "r": formatRounded,
-  "s": formatPrefixAuto,
-  "X": (x) => Math.round(x).toString(16).toUpperCase(),
-  "x": (x) => Math.round(x).toString(16)
-};
-
-function identity(x) {
-  return x;
-}
-
-var map = Array.prototype.map,
-    prefixes$1 = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
-
-function formatLocale(locale) {
-  var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
-      currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
-      currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
-      decimal = locale.decimal === undefined ? "." : locale.decimal + "",
-      numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
-      percent = locale.percent === undefined ? "%" : locale.percent + "",
-      minus = locale.minus === undefined ? "−" : locale.minus + "",
-      nan = locale.nan === undefined ? "NaN" : locale.nan + "";
-
-  function newFormat(specifier, options) {
-    specifier = formatSpecifier(specifier);
-
-    var fill = specifier.fill,
-        align = specifier.align,
-        sign = specifier.sign,
-        symbol = specifier.symbol,
-        zero = specifier.zero,
-        width = specifier.width,
-        comma = specifier.comma,
-        precision = specifier.precision,
-        trim = specifier.trim,
-        type = specifier.type;
-
-    // The "n" type is an alias for ",g".
-    if (type === "n") comma = true, type = "g";
-
-    // The "" type, and any invalid type, is an alias for ".12~g".
-    else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
-
-    // If zero fill is specified, padding goes after sign and before digits.
-    if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
-
-    // Compute the prefix and suffix.
-    // For SI-prefix, the suffix is lazily computed.
-    var prefix = (options && options.prefix !== undefined ? options.prefix : "") + (symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : ""),
-        suffix = (symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "") + (options && options.suffix !== undefined ? options.suffix : "");
-
-    // What format function should we use?
-    // Is this an integer type?
-    // Can this type generate exponential notation?
-    var formatType = formatTypes[type],
-        maybeSuffix = /[defgprs%]/.test(type);
-
-    // Set the default precision if not specified,
-    // or clamp the specified precision to the supported range.
-    // For significant precision, it must be in [1, 21].
-    // For fixed precision, it must be in [0, 20].
-    precision = precision === undefined ? 6
-        : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
-        : Math.max(0, Math.min(20, precision));
-
-    function format(value) {
-      var valuePrefix = prefix,
-          valueSuffix = suffix,
-          i, n, c;
-
-      if (type === "c") {
-        valueSuffix = formatType(value) + valueSuffix;
-        value = "";
-      } else {
-        value = +value;
-
-        // Determine the sign. -0 is not less than 0, but 1 / -0 is!
-        var valueNegative = value < 0 || 1 / value < 0;
-
-        // Perform the initial formatting.
-        value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
-
-        // Trim insignificant zeros.
-        if (trim) value = formatTrim(value);
-
-        // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
-        if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
-
-        // Compute the prefix and suffix.
-        valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
-        valueSuffix = (type === "s" && !isNaN(value) && prefixExponent !== undefined ? prefixes$1[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
-
-        // Break the formatted value into the integer “value” part that can be
-        // grouped, and fractional or exponential “suffix” part that is not.
-        if (maybeSuffix) {
-          i = -1, n = value.length;
-          while (++i < n) {
-            if (c = value.charCodeAt(i), 48 > c || c > 57) {
-              valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
-              value = value.slice(0, i);
-              break;
-            }
-          }
-        }
-      }
-
-      // If the fill character is not "0", grouping is applied before padding.
-      if (comma && !zero) value = group(value, Infinity);
-
-      // Compute the padding.
-      var length = valuePrefix.length + value.length + valueSuffix.length,
-          padding = length < width ? new Array(width - length + 1).join(fill) : "";
-
-      // If the fill character is "0", grouping is applied after padding.
-      if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
-
-      // Reconstruct the final output based on the desired alignment.
-      switch (align) {
-        case "<": value = valuePrefix + value + valueSuffix + padding; break;
-        case "=": value = valuePrefix + padding + value + valueSuffix; break;
-        case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
-        default: value = padding + valuePrefix + value + valueSuffix; break;
-      }
-
-      return numerals(value);
-    }
-
-    format.toString = function() {
-      return specifier + "";
-    };
-
-    return format;
-  }
-
-  function formatPrefix(specifier, value) {
-    var e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
-        k = Math.pow(10, -e),
-        f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier), {suffix: prefixes$1[8 + e / 3]});
-    return function(value) {
-      return f(k * value);
-    };
-  }
-
-  return {
-    format: newFormat,
-    formatPrefix: formatPrefix
-  };
-}
-
-var locale;
-var format;
-var formatPrefix;
-
-defaultLocale({
-  thousands: ",",
-  grouping: [3],
-  currency: ["$", ""]
-});
-
-function defaultLocale(definition) {
-  locale = formatLocale(definition);
-  format = locale.format;
-  formatPrefix = locale.formatPrefix;
-  return locale;
-}
-
-function precisionFixed(step) {
-  return Math.max(0, -exponent(Math.abs(step)));
-}
-
-function precisionPrefix(step, value) {
-  return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
-}
-
-function precisionRound(step, max) {
-  step = Math.abs(step), max = Math.abs(max) - step;
-  return Math.max(0, exponent(max) - exponent(step)) + 1;
-}
-
-function tickFormat(start, stop, count, specifier) {
-  var step = tickStep(start, stop, count),
-      precision;
-  specifier = formatSpecifier(specifier == null ? ",f" : specifier);
-  switch (specifier.type) {
-    case "s": {
-      var value = Math.max(Math.abs(start), Math.abs(stop));
-      if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
-      return formatPrefix(specifier, value);
-    }
-    case "":
-    case "e":
-    case "g":
-    case "p":
-    case "r": {
-      if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
-      break;
-    }
-    case "f":
-    case "%": {
-      if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
-      break;
-    }
-  }
-  return format(specifier);
-}
-
-function linearish(scale) {
-  var domain = scale.domain;
-
-  scale.ticks = function(count) {
-    var d = domain();
-    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
-  };
-
-  scale.tickFormat = function(count, specifier) {
-    var d = domain();
-    return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
-  };
-
-  scale.nice = function(count) {
-    if (count == null) count = 10;
-
-    var d = domain();
-    var i0 = 0;
-    var i1 = d.length - 1;
-    var start = d[i0];
-    var stop = d[i1];
-    var prestep;
-    var step;
-    var maxIter = 10;
-
-    if (stop < start) {
-      step = start, start = stop, stop = step;
-      step = i0, i0 = i1, i1 = step;
-    }
-    
-    while (maxIter-- > 0) {
-      step = tickIncrement(start, stop, count);
-      if (step === prestep) {
-        d[i0] = start;
-        d[i1] = stop;
-        return domain(d);
-      } else if (step > 0) {
-        start = Math.floor(start / step) * step;
-        stop = Math.ceil(stop / step) * step;
-      } else if (step < 0) {
-        start = Math.ceil(start * step) / step;
-        stop = Math.floor(stop * step) / step;
-      } else {
-        break;
-      }
-      prestep = step;
-    }
-
-    return scale;
-  };
-
-  return scale;
-}
-
-function linear() {
-  var scale = continuous();
-
-  scale.copy = function() {
-    return copy(scale, linear());
-  };
-
-  initRange.apply(scale, arguments);
-
-  return linearish(scale);
-}
-
-function isGradientStopType(item) {
-  return item.offset != null && typeof item.offset === 'number' && item.color != null && typeof item.color === 'string';
-}
-function isGradientType(color) {
-  return Array.isArray(color) && color.every(item => isGradientStopType(item));
-}
-
-const uniqueId = (() => {
-  let num = 0;
-  return prefix => {
-    num++;
-    return `${prefix}-${num}`;
-  };
-})();
-
-const isValidNumber$1 = value => {
-  if (value === 0) return true;
-  return value != null;
-};
-const paddingStringToObject = paddingString => {
-  var _paddingString$match;
-  const numberPattern = /\d+/g;
-  const [top, right, bottom, left] = ((_paddingString$match = paddingString.match(numberPattern)) === null || _paddingString$match === void 0 ? void 0 : _paddingString$match.map(paddingSide => isValidNumber$1(paddingSide) ? paddingSide : null)) || [];
-  const hasValidRight = isValidNumber$1(right);
-  const alternateLeft = hasValidRight ? right : top;
-  return {
-    paddingTop: Number(top),
-    paddingRight: Number(hasValidRight ? right : top),
-    paddingBottom: Number(isValidNumber$1(bottom) ? bottom : top),
-    paddingLeft: Number(isValidNumber$1(left) ? left : alternateLeft)
-  };
-};
-
-const DEFAULT_WIDTH = 11.63;
-function estimateStringWidth(string, characterWidths) {
-  let sum = 0;
-  for (const char of string) {
-    let charWidth = characterWidths[char];
-    if (charWidth == null || isNaN(charWidth)) {
-      var _characterWidths$W;
-      charWidth = (_characterWidths$W = characterWidths.W) !== null && _characterWidths$W !== void 0 ? _characterWidths$W : DEFAULT_WIDTH;
-    }
-    sum += charWidth;
-  }
-  return sum;
-}
-
-function getColorVisionEventAttrs({
-  type,
-  index,
-  watch = true
-}) {
-  return {
-    [`${COLOR_VISION_EVENT.dataAttribute}-watch`]: watch,
-    [`${COLOR_VISION_EVENT.dataAttribute}-type`]: type,
-    [`${COLOR_VISION_EVENT.dataAttribute}-index`]: index
-  };
-}
-
-function getColorVisionStylesForActiveIndex({
-  activeIndex,
-  index,
-  fadedOpacity = COLOR_VISION_FADED_OPACITY
-}) {
-  const activeOpacity = activeIndex === index ? COLOR_VISION_ACTIVE_OPACITY : fadedOpacity;
-  return {
-    opacity: activeIndex === -1 ? COLOR_VISION_ACTIVE_OPACITY : activeOpacity,
-    transition: 'opacity 100ms ease'
-  };
-}
-
-const isValidNumber = value => {
-  if (value === 0) return true;
-  return value != null;
-};
-const borderRadiusStringToObject = borderRadiusString => {
-  var _borderRadiusString$m;
-  const numberPattern = /\d+/g;
-  const [topLeft, topRight, bottomRight, bottomLeft] = ((_borderRadiusString$m = borderRadiusString.match(numberPattern)) === null || _borderRadiusString$m === void 0 ? void 0 : _borderRadiusString$m.map(corner => isValidNumber(corner) ? corner : null)) || [];
-  const hasValidRight = isValidNumber(topRight);
-  const alternateLeft = hasValidRight ? topRight : topLeft;
-  return {
-    topLeft: Number(topLeft),
-    topRight: Number(hasValidRight ? topRight : topLeft),
-    bottomRight: Number(isValidNumber(bottomRight) ? bottomRight : topLeft),
-    bottomLeft: Number(isValidNumber(bottomLeft) ? bottomLeft : alternateLeft)
-  };
-};
-
-function keepValuePositive(amount) {
-  return Math.abs(clamp$1({
-    amount,
-    min: 0
-  }));
-}
-function getRoundedRectPath({
-  borderRadius,
-  height,
-  width
-}) {
-  if (height == null || width == null) {
-    return '';
-  }
-  let {
-    topLeft,
-    topRight,
-    bottomRight,
-    bottomLeft
-  } = borderRadiusStringToObject(borderRadius);
-  const smallestSize = Math.min(height, width);
-  topLeft = Math.min(topLeft, smallestSize / 2);
-  topRight = Math.min(topRight, smallestSize / 2);
-  bottomRight = Math.min(bottomRight, smallestSize / 2);
-  bottomLeft = Math.min(bottomLeft, smallestSize / 2);
-  const top = topLeft + topRight;
-  const right = topRight + bottomRight;
-  const bottom = bottomRight + bottomLeft;
-  const left = bottomLeft + topLeft;
-  return `
-  M${topLeft},0
-  h${keepValuePositive(width - top)}
-  a${topRight},${topRight} 0 0 1 ${topRight},${topRight}
-  v${keepValuePositive(height - right)}
-  a${bottomRight},${bottomRight} 0 0 1 -${bottomRight},${bottomRight}
-  h-${keepValuePositive(width - bottom)}
-  a${bottomLeft},${bottomLeft} 0 0 1 -${bottomLeft},-${bottomLeft}
-  v-${keepValuePositive(height - left)}
-  a${topLeft},${topLeft} 0 0 1 ${topLeft},-${topLeft}
-  Z
-`;
+    return new Rgb(
+      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+      hsl2rgb(h, m1, m2),
+      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+      this.opacity
+    );
+  },
+  clamp() {
+    return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+  },
+  displayable() {
+    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+        && (0 <= this.l && this.l <= 1)
+        && (0 <= this.opacity && this.opacity <= 1);
+  },
+  formatHsl() {
+    const a = clampa(this.opacity);
+    return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
+  }
+}));
+
+function clamph(value) {
+  value = (value || 0) % 360;
+  return value < 0 ? value + 360 : value;
+}
+
+function clampt(value) {
+  return Math.max(0, Math.min(1, value || 0));
+}
+
+/* From FvD 13.37, CSS Color Module Level 3 */
+function hsl2rgb(h, m1, m2) {
+  return (h < 60 ? m1 + (m2 - m1) * h / 60
+      : h < 180 ? m2
+      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+      : m1) * 255;
 }
 
 function changeColorOpacity(colorString, opacity = 1) {
@@ -8163,462 +7302,6 @@ function useSpringConfig({
   };
 }
 
-function constant(x) {
-  return function constant() {
-    return x;
-  };
-}
-
-const abs = Math.abs;
-const atan2 = Math.atan2;
-const cos = Math.cos;
-const max = Math.max;
-const min = Math.min;
-const sin = Math.sin;
-const sqrt = Math.sqrt;
-
-const epsilon$1 = 1e-12;
-const pi$1 = Math.PI;
-const halfPi = pi$1 / 2;
-const tau$1 = 2 * pi$1;
-
-function acos(x) {
-  return x > 1 ? 0 : x < -1 ? pi$1 : Math.acos(x);
-}
-
-function asin(x) {
-  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);
-}
-
-const pi = Math.PI,
-    tau = 2 * pi,
-    epsilon = 1e-6,
-    tauEpsilon = tau - epsilon;
-
-function append(strings) {
-  this._ += strings[0];
-  for (let i = 1, n = strings.length; i < n; ++i) {
-    this._ += arguments[i] + strings[i];
-  }
-}
-
-function appendRound(digits) {
-  let d = Math.floor(digits);
-  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
-  if (d > 15) return append;
-  const k = 10 ** d;
-  return function(strings) {
-    this._ += strings[0];
-    for (let i = 1, n = strings.length; i < n; ++i) {
-      this._ += Math.round(arguments[i] * k) / k + strings[i];
-    }
-  };
-}
-
-class Path {
-  constructor(digits) {
-    this._x0 = this._y0 = // start of current subpath
-    this._x1 = this._y1 = null; // end of current subpath
-    this._ = "";
-    this._append = digits == null ? append : appendRound(digits);
-  }
-  moveTo(x, y) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
-  }
-  closePath() {
-    if (this._x1 !== null) {
-      this._x1 = this._x0, this._y1 = this._y0;
-      this._append`Z`;
-    }
-  }
-  lineTo(x, y) {
-    this._append`L${this._x1 = +x},${this._y1 = +y}`;
-  }
-  quadraticCurveTo(x1, y1, x, y) {
-    this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  bezierCurveTo(x1, y1, x2, y2, x, y) {
-    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
-  }
-  arcTo(x1, y1, x2, y2, r) {
-    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let x0 = this._x1,
-        y0 = this._y1,
-        x21 = x2 - x1,
-        y21 = y2 - y1,
-        x01 = x0 - x1,
-        y01 = y0 - y1,
-        l01_2 = x01 * x01 + y01 * y01;
-
-    // Is this path empty? Move to (x1,y1).
-    if (this._x1 === null) {
-      this._append`M${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
-    else if (!(l01_2 > epsilon));
-
-    // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
-    // Equivalently, is (x1,y1) coincident with (x2,y2)?
-    // Or, is the radius zero? Line to (x1,y1).
-    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
-      this._append`L${this._x1 = x1},${this._y1 = y1}`;
-    }
-
-    // Otherwise, draw an arc!
-    else {
-      let x20 = x2 - x0,
-          y20 = y2 - y0,
-          l21_2 = x21 * x21 + y21 * y21,
-          l20_2 = x20 * x20 + y20 * y20,
-          l21 = Math.sqrt(l21_2),
-          l01 = Math.sqrt(l01_2),
-          l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
-          t01 = l / l01,
-          t21 = l / l21;
-
-      // If the start tangent is not coincident with (x0,y0), line to.
-      if (Math.abs(t01 - 1) > epsilon) {
-        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
-      }
-
-      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
-    }
-  }
-  arc(x, y, r, a0, a1, ccw) {
-    x = +x, y = +y, r = +r, ccw = !!ccw;
-
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error(`negative radius: ${r}`);
-
-    let dx = r * Math.cos(a0),
-        dy = r * Math.sin(a0),
-        x0 = x + dx,
-        y0 = y + dy,
-        cw = 1 ^ ccw,
-        da = ccw ? a0 - a1 : a1 - a0;
-
-    // Is this path empty? Move to (x0,y0).
-    if (this._x1 === null) {
-      this._append`M${x0},${y0}`;
-    }
-
-    // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
-    else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
-      this._append`L${x0},${y0}`;
-    }
-
-    // Is this arc empty? We’re done.
-    if (!r) return;
-
-    // Does the angle go the wrong way? Flip the direction.
-    if (da < 0) da = da % tau + tau;
-
-    // Is this a complete circle? Draw two arcs to complete the circle.
-    if (da > tauEpsilon) {
-      this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
-    }
-
-    // Is this arc non-empty? Draw an arc!
-    else if (da > epsilon) {
-      this._append`A${r},${r},0,${+(da >= pi)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
-    }
-  }
-  rect(x, y, w, h) {
-    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
-  }
-  toString() {
-    return this._;
-  }
-}
-
-function withPath(shape) {
-  let digits = 3;
-
-  shape.digits = function(_) {
-    if (!arguments.length) return digits;
-    if (_ == null) {
-      digits = null;
-    } else {
-      const d = Math.floor(_);
-      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
-      digits = d;
-    }
-    return shape;
-  };
-
-  return () => new Path(digits);
-}
-
-function arcInnerRadius(d) {
-  return d.innerRadius;
-}
-
-function arcOuterRadius(d) {
-  return d.outerRadius;
-}
-
-function arcStartAngle(d) {
-  return d.startAngle;
-}
-
-function arcEndAngle(d) {
-  return d.endAngle;
-}
-
-function arcPadAngle(d) {
-  return d && d.padAngle; // Note: optional!
-}
-
-function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
-  var x10 = x1 - x0, y10 = y1 - y0,
-      x32 = x3 - x2, y32 = y3 - y2,
-      t = y32 * x10 - x32 * y10;
-  if (t * t < epsilon$1) return;
-  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;
-  return [x0 + t * x10, y0 + t * y10];
-}
-
-// Compute perpendicular offset line of length rc.
-// http://mathworld.wolfram.com/Circle-LineIntersection.html
-function cornerTangents(x0, y0, x1, y1, r1, rc, cw) {
-  var x01 = x0 - x1,
-      y01 = y0 - y1,
-      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),
-      ox = lo * y01,
-      oy = -lo * x01,
-      x11 = x0 + ox,
-      y11 = y0 + oy,
-      x10 = x1 + ox,
-      y10 = y1 + oy,
-      x00 = (x11 + x10) / 2,
-      y00 = (y11 + y10) / 2,
-      dx = x10 - x11,
-      dy = y10 - y11,
-      d2 = dx * dx + dy * dy,
-      r = r1 - rc,
-      D = x11 * y10 - x10 * y11,
-      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),
-      cx0 = (D * dy - dx * d) / d2,
-      cy0 = (-D * dx - dy * d) / d2,
-      cx1 = (D * dy + dx * d) / d2,
-      cy1 = (-D * dx + dy * d) / d2,
-      dx0 = cx0 - x00,
-      dy0 = cy0 - y00,
-      dx1 = cx1 - x00,
-      dy1 = cy1 - y00;
-
-  // Pick the closer of the two intersection points.
-  // TODO Is there a faster way to determine which intersection to use?
-  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;
-
-  return {
-    cx: cx0,
-    cy: cy0,
-    x01: -ox,
-    y01: -oy,
-    x11: cx0 * (r1 / r - 1),
-    y11: cy0 * (r1 / r - 1)
-  };
-}
-
-function arc() {
-  var innerRadius = arcInnerRadius,
-      outerRadius = arcOuterRadius,
-      cornerRadius = constant(0),
-      padRadius = null,
-      startAngle = arcStartAngle,
-      endAngle = arcEndAngle,
-      padAngle = arcPadAngle,
-      context = null,
-      path = withPath(arc);
-
-  function arc() {
-    var buffer,
-        r,
-        r0 = +innerRadius.apply(this, arguments),
-        r1 = +outerRadius.apply(this, arguments),
-        a0 = startAngle.apply(this, arguments) - halfPi,
-        a1 = endAngle.apply(this, arguments) - halfPi,
-        da = abs(a1 - a0),
-        cw = a1 > a0;
-
-    if (!context) context = buffer = path();
-
-    // Ensure that the outer radius is always larger than the inner radius.
-    if (r1 < r0) r = r1, r1 = r0, r0 = r;
-
-    // Is it a point?
-    if (!(r1 > epsilon$1)) context.moveTo(0, 0);
-
-    // Or is it a circle or annulus?
-    else if (da > tau$1 - epsilon$1) {
-      context.moveTo(r1 * cos(a0), r1 * sin(a0));
-      context.arc(0, 0, r1, a0, a1, !cw);
-      if (r0 > epsilon$1) {
-        context.moveTo(r0 * cos(a1), r0 * sin(a1));
-        context.arc(0, 0, r0, a1, a0, cw);
-      }
-    }
-
-    // Or is it a circular or annular sector?
-    else {
-      var a01 = a0,
-          a11 = a1,
-          a00 = a0,
-          a10 = a1,
-          da0 = da,
-          da1 = da,
-          ap = padAngle.apply(this, arguments) / 2,
-          rp = (ap > epsilon$1) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),
-          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),
-          rc0 = rc,
-          rc1 = rc,
-          t0,
-          t1;
-
-      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.
-      if (rp > epsilon$1) {
-        var p0 = asin(rp / r0 * sin(ap)),
-            p1 = asin(rp / r1 * sin(ap));
-        if ((da0 -= p0 * 2) > epsilon$1) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;
-        else da0 = 0, a00 = a10 = (a0 + a1) / 2;
-        if ((da1 -= p1 * 2) > epsilon$1) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;
-        else da1 = 0, a01 = a11 = (a0 + a1) / 2;
-      }
-
-      var x01 = r1 * cos(a01),
-          y01 = r1 * sin(a01),
-          x10 = r0 * cos(a10),
-          y10 = r0 * sin(a10);
-
-      // Apply rounded corners?
-      if (rc > epsilon$1) {
-        var x11 = r1 * cos(a11),
-            y11 = r1 * sin(a11),
-            x00 = r0 * cos(a00),
-            y00 = r0 * sin(a00),
-            oc;
-
-        // Restrict the corner radius according to the sector angle. If this
-        // intersection fails, it’s probably because the arc is too small, so
-        // disable the corner radius entirely.
-        if (da < pi$1) {
-          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {
-            var ax = x01 - oc[0],
-                ay = y01 - oc[1],
-                bx = x11 - oc[0],
-                by = y11 - oc[1],
-                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),
-                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);
-            rc0 = min(rc, (r0 - lc) / (kc - 1));
-            rc1 = min(rc, (r1 - lc) / (kc + 1));
-          } else {
-            rc0 = rc1 = 0;
-          }
-        }
-      }
-
-      // Is the sector collapsed to a line?
-      if (!(da1 > epsilon$1)) context.moveTo(x01, y01);
-
-      // Does the sector’s outer ring have rounded corners?
-      else if (rc1 > epsilon$1) {
-        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);
-        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);
-
-        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);
-
-        // Have the corners merged?
-        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
-
-        // Otherwise, draw the two corners and the ring.
-        else {
-          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
-          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);
-          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
-        }
-      }
-
-      // Or is the outer ring just a circular arc?
-      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);
-
-      // Is there no inner ring, and it’s a circular sector?
-      // Or perhaps it’s an annular sector collapsed due to padding?
-      if (!(r0 > epsilon$1) || !(da0 > epsilon$1)) context.lineTo(x10, y10);
-
-      // Does the sector’s inner ring (or point) have rounded corners?
-      else if (rc0 > epsilon$1) {
-        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);
-        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);
-
-        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);
-
-        // Have the corners merged?
-        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
-
-        // Otherwise, draw the two corners and the ring.
-        else {
-          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
-          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);
-          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
-        }
-      }
-
-      // Or is the inner ring just a circular arc?
-      else context.arc(0, 0, r0, a10, a00, cw);
-    }
-
-    context.closePath();
-
-    if (buffer) return context = null, buffer + "" || null;
-  }
-
-  arc.centroid = function() {
-    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,
-        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi$1 / 2;
-    return [cos(a) * r, sin(a) * r];
-  };
-
-  arc.innerRadius = function(_) {
-    return arguments.length ? (innerRadius = typeof _ === "function" ? _ : constant(+_), arc) : innerRadius;
-  };
-
-  arc.outerRadius = function(_) {
-    return arguments.length ? (outerRadius = typeof _ === "function" ? _ : constant(+_), arc) : outerRadius;
-  };
-
-  arc.cornerRadius = function(_) {
-    return arguments.length ? (cornerRadius = typeof _ === "function" ? _ : constant(+_), arc) : cornerRadius;
-  };
-
-  arc.padRadius = function(_) {
-    return arguments.length ? (padRadius = _ == null ? null : typeof _ === "function" ? _ : constant(+_), arc) : padRadius;
-  };
-
-  arc.startAngle = function(_) {
-    return arguments.length ? (startAngle = typeof _ === "function" ? _ : constant(+_), arc) : startAngle;
-  };
-
-  arc.endAngle = function(_) {
-    return arguments.length ? (endAngle = typeof _ === "function" ? _ : constant(+_), arc) : endAngle;
-  };
-
-  arc.padAngle = function(_) {
-    return arguments.length ? (padAngle = typeof _ === "function" ? _ : constant(+_), arc) : padAngle;
-  };
-
-  arc.context = function(_) {
-    return arguments.length ? ((context = _ == null ? null : _), arc) : context;
-  };
-
-  return arc;
-}
-
 function LinearGradientWithStops({
   gradient,
   id,
@@ -23407,6 +22090,8 @@ function FunnelChartLabels({ formattedValues, labels, labelWidth, barWidth, perc
 }
 
 function calculateDropOff(value, nextValue) {
+    if (!value)
+        return 0;
     return ((nextValue - value) / value) * 100;
 }
 
@@ -23457,9 +22142,7 @@ function Tooltip({ activeIndex, dataSeries, trends, tooltipLabels, funnelColors,
     return (jsx(TooltipContentContainer, { maxWidth: TOOLTIP_WIDTH, minWidth: TOOLTIP_WIDTH, theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.backgroundColor, children: () => (jsxs(Fragment$1, { children: [jsx(TooltipTitle, { theme: DEFAULT_THEME_NAME, color: selectedTheme.tooltip.textColor, "aria-label": `Step: ${point.key}`, children: point.key }), jsx("div", { className: "GFunnelChartNextTooltip-rows", children: data.map(({ key, value, color, percent, trendKey }, index) => {
                         const formattedPercent = percent === null ? '-' : percentageFormatter(percent);
                         const ariaLabel = `${key}: ${value}, ${formattedPercent}`;
-                        const { trendIndicatorProps } = getTrendIndicatorData(index === 0
-                            ? trends?.[activeIndex]
-                            : trends?.[activeIndex]);
+                        const { trendIndicatorProps } = getTrendIndicatorData(trends?.[activeIndex]);
                         const trendByKey = trendIndicatorProps[trendKey];
                         return (jsxs("div", { className: "GFunnelChartNextTooltip-row", "aria-label": ariaLabel, children: [jsxs("div", { className: "GFunnelChartNextTooltip-keys", children: [jsx(SeriesIcon, { color: color }), jsx("span", { children: key })] }), jsxs("div", { className: "GFunnelChartNextTooltip-values", children: [jsx("span", { children: jsx("strong", { children: value }) }), jsx("span", { children: jsx("strong", { children: formattedPercent }) }), trendIndicatorProps && (jsx("div", { className: "GFunnelChartNextTooltip-trendIndicator", children: jsx(TrendIndicator, { ...trendByKey }) }))] })] }, `row-${index}-${key}`));
                     }) })] })) }));
@@ -23625,7 +22308,7 @@ function Chart({ data, tooltipLabels, showTooltip = true, showPercentages = true
         y: 0,
     };
     const highestYValue = Math.max(...sanitizedYValues);
-    const yScale = linear()
+    const yScale = scaleLinear()
         .range([0, drawableHeight - LABELS_HEIGHT - barHeightAdjustment])
         .domain([0, highestYValue]);
     const { getBarHeight, shouldApplyScaling } = useFunnelBarScaling({
@@ -23642,8 +22325,8 @@ function Chart({ data, tooltipLabels, showTooltip = true, showPercentages = true
     const totalStepWidth = drawableWidth / xValues.length;
     const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
     const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
-    const xScale = band().domain(xValues).range([0, drawableWidthWithLastConnector]);
-    const labelXScale = band()
+    const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
+    const labelXScale = scaleBand()
         .range([0, drawableWidthWithLastConnector])
         .domain(labels.map((_, index) => index.toString()));
     const sectionWidth = xScale.bandwidth();
@@ -23707,6 +22390,10 @@ const ChartContainerWrapper = ({ props, children, height, }) => {
 };
 
 const GChartProvider = ({ children, minHeight = 228, seriesColors, }) => {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    if (!mounted)
+        return null;
     return (jsxs(Fragment, { children: [jsx("link", { rel: "stylesheet", href: chartStyle }), jsx(PolarisVizProvider, { themes: {
                     Light: {
                         chartContainer: {
@@ -23814,7 +22501,7 @@ const FunnelSelectionPopover = (props) => {
 const FunnelChartActionIcon = ({ level, isLastLevel, isFinalFixedLevel, actionProps, }) => {
     const { t } = useTranslation();
     const { isMobileView } = useWindowSize();
-    const { listFunnelSelection, onAddNextFunnel, onNotify, isDisabledAddICon } = actionProps || {};
+    const { listFunnelSelection, onAddNextFunnel, onNotify, isDisabledAddICon, hideAddIcon } = actionProps || {};
     const lengthDisplayedLevels = actionProps?.lengthDisplayedLevels || 0;
     const [isOpenPathSelectionPopover, setIsOpenPathSelectionPopover] = useState(false);
     if (isLastLevel)
@@ -23822,7 +22509,7 @@ const FunnelChartActionIcon = ({ level, isLastLevel, isFinalFixedLevel, actionPr
     if (level < lengthDisplayedLevels || isFinalFixedLevel) {
         return jsx(Icon, { source: SvgArrowRightIcon });
     }
-    if (isMobileView)
+    if (isMobileView || hideAddIcon)
         return null;
     const tooltip = isDisabledAddICon ? t('Funnel step limit reached.') : t('Add funnel step');
     return (jsx(FunnelSelectionPopover, { open: isOpenPathSelectionPopover, onClose: () => setIsOpenPathSelectionPopover(false), listFunnelSelection: listFunnelSelection, onAddNextFunnel: onAddNextFunnel, onNotify: onNotify, activator: jsx(GTooltip, { content: tooltip, children: jsx(Button, { icon: jsx(Icon, { source: SvgPlusIcon }), onClick: () => setIsOpenPathSelectionPopover((prev) => !prev), disabled: isDisabledAddICon }) }) }));
@@ -23852,12 +22539,15 @@ const FunnelChartAction = ({ dataSeries, actionProps }) => {
     const { containerBounds } = useChartContext();
     const { LINE_OFFSET, LINE_WIDTH, SEGMENT_WIDTH_RATIO, GAP } = FUNNEL_CHART_NEXT_CONSTANTS;
     const drawableWidth = containerBounds?.width ?? 0;
-    const dataPoints = dataSeries[0].data;
+    const dataPoints = dataSeries[0]?.data ?? [];
+    // Layout math below relies on at least two steps (rectX[0]/rectX[1]); bail out on loading/empty/single-step.
+    if (dataPoints.length < 2)
+        return null;
     const xValues = dataPoints.map(({ key }) => key);
     const totalStepWidth = drawableWidth / xValues.length;
     const connectorWidth = totalStepWidth * (1 - SEGMENT_WIDTH_RATIO);
     const drawableWidthWithLastConnector = drawableWidth + connectorWidth;
-    const xScale = band().domain(xValues).range([0, drawableWidthWithLastConnector]);
+    const xScale = scaleBand().domain(xValues).range([0, drawableWidthWithLastConnector]);
     const sectionWidth = xScale.bandwidth();
     const barWidth = sectionWidth * SEGMENT_WIDTH_RATIO;
     const rectX = dataPoints.map((dataPoint) => {
@@ -24057,7 +22747,7 @@ const NON_HEATMAP_PAGE_TYPES = new Set([TemplateType.CHECKOUT]);
 const usePathAnalysisChart = () => {
     const { t } = useTranslation();
     const { getTextPrice } = useConvertMoneyContext();
-    const { heatmap } = usePathAnalysisConfig();
+    const { heatmap, autoExpandLevels } = usePathAnalysisConfig();
     const { shopifyPageType, pageWithMetric, nextLevelPages, dynamicLevels, previousPathAnalyticsMap, handleAddNextLevel, handleChangeLevel, getPagesByParentID, handleDeleteLevel, } = usePathAnalysisContext();
     const orderedPages = useMemo(() => [pageWithMetric, ...dynamicLevels].filter(Boolean), [pageWithMetric, dynamicLevels]);
     const chartTooltipPrimaryAction = useMemo(() => {
@@ -24097,17 +22787,17 @@ const usePathAnalysisChart = () => {
             {
                 value: Number(totalAddedToCart ?? 0),
                 key: METRICS_COLUMNS[IPAMetricKey.PAGE_ADDED_TO_CART]?.label ?? t('Added to cart'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_CART_ADDITION],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.CART_ADDITION],
             },
             {
                 value: Number(totalReachedCheckout ?? 0),
                 key: t('Reached checkout'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_REACHED_CHECKOUT],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.REACHED_CHECKOUT],
             },
             {
                 value: Number(totalCompletedCheckout ?? 0),
                 key: t('Completed checkout'),
-                labelTooltip: PA_METRIC_TOOLTIP[IPAMetricKey.PAGE_COMPLETE_CHECKOUT],
+                labelTooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.COMPLETE_CHECKOUT],
             },
         ];
     }, [t]);
@@ -24124,12 +22814,15 @@ const usePathAnalysisChart = () => {
                 getTextPrice,
             }),
             chartTooltipPrimaryAction: heatmap.isEnabledV2 ? getTooltipAction(item?.pageType ?? undefined) : undefined,
-            secondaryActions: [
-                {
-                    onAction: () => onDeleteFunnel(item.id),
-                    icon: SvgDeleteIcon,
-                },
-            ],
+            // Auto-expand mode is a read-only view: hide the delete (trash) action.
+            secondaryActions: autoExpandLevels
+                ? undefined
+                : [
+                    {
+                        onAction: () => onDeleteFunnel(item.id),
+                        icon: SvgDeleteIcon,
+                    },
+                ],
             title: item.pageTitle ?? undefined,
         });
         // Previous data
@@ -24139,7 +22832,15 @@ const usePathAnalysisChart = () => {
             title: item.pageTitle ?? undefined,
         });
         return acc;
-    }, { currentData: [], previousData: [] }), [dynamicLevels, previousPathAnalyticsMap, onDeleteFunnel, getTextPrice, getTooltipAction, heatmap.isEnabledV2]);
+    }, { currentData: [], previousData: [] }), [
+        dynamicLevels,
+        previousPathAnalyticsMap,
+        onDeleteFunnel,
+        getTextPrice,
+        getTooltipAction,
+        heatmap.isEnabledV2,
+        autoExpandLevels,
+    ]);
     const lastLevelPreviousData = previousPathAnalyticsMap[lastLevel?.id ?? ''];
     const funnelData = useMemo(() => {
         const firstLevelKey = pageWithMetric?.pageTitle ||
@@ -24223,6 +22924,9 @@ const usePathAnalysisChart = () => {
     }, [nextLevelPages]);
     //list funnel selection to change funnel
     const getListFunnelByID = (data) => {
+        // Auto-expand mode is read-only: collapse the change-path popover to a static label.
+        if (autoExpandLevels)
+            return [];
         const { level, parentID } = data;
         const availableChildPages = getPagesByParentID({ level, parentID });
         // if (level === 0) {
@@ -24242,6 +22946,7 @@ const usePathAnalysisChart = () => {
         lengthDisplayedLevels,
         listFunnelSelection,
         isDisabledAddICon,
+        hideAddIcon: !!autoExpandLevels,
         funnelData,
         onDeleteFunnel,
         onAddNextFunnel,
@@ -24251,7 +22956,7 @@ const usePathAnalysisChart = () => {
 };
 
 const PathAnalysisChart = ({ funnelColors, isEnabled }) => {
-    const { lengthDisplayedLevels, listFunnelSelection, isDisabledAddICon, funnelData, getListFunnelByID, onAddNextFunnel, onChangeFunnel, } = usePathAnalysisChart();
+    const { lengthDisplayedLevels, listFunnelSelection, isDisabledAddICon, hideAddIcon, funnelData, getListFunnelByID, onAddNextFunnel, onChangeFunnel, } = usePathAnalysisChart();
     const dataSeries = useMemo(() => {
         if (!isEnabled)
             return MOCK_DATA_PATH_ANALYSIS;
@@ -24262,6 +22967,7 @@ const PathAnalysisChart = ({ funnelColors, isEnabled }) => {
                         lengthDisplayedLevels,
                         listFunnelSelection,
                         isDisabledAddICon,
+                        hideAddIcon,
                         getListFunnelByID,
                         onAddNextFunnel,
                         onChangeFunnel,
@@ -24334,11 +23040,17 @@ const CardJourneyAnalysis = ({ analyticMode, config, ...props }) => {
     return (jsx(PathAnalysisConfigProvider, { ...config, children: jsx(CardPathAnalysis, { analyticMode: analyticMode || EAnalyticMode.ALL_SESSION, ...props, children: jsx(InlineStack, { gap: "200", children: jsx(GTooltipCard, { tooltip: ANALYTICS_METRIC_TOOLTIP[EMetricKey.PAGE_PATH_ANALYSIS], children: jsx(Text, { as: "h3", variant: "headingMd", children: t('Journey analysis') }) }) }) }) }));
 };
 
-var EReportSource;
-(function (EReportSource) {
-    EReportSource["CAMPAIGN"] = "campaign";
-    EReportSource["PAGE"] = "page";
-})(EReportSource || (EReportSource = {}));
+var EReportColumnKey;
+(function (EReportColumnKey) {
+    EReportColumnKey["ORDER_ID"] = "order_id";
+    EReportColumnKey["ORDER_DATE"] = "order_date";
+    EReportColumnKey["TOTAL"] = "total_price";
+    EReportColumnKey["CAMPAIGNS"] = "experiments";
+    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
+    EReportColumnKey["ITEMS"] = "items";
+    EReportColumnKey["DEVICE"] = "device";
+    EReportColumnKey["VISITOR"] = "visitor_type";
+})(EReportColumnKey || (EReportColumnKey = {}));
 
 var EReportDataType;
 (function (EReportDataType) {
@@ -24394,17 +23106,74 @@ var IRMetricKey;
     IRMetricKey["VISITOR_BY_TYPE"] = "visitor_type";
 })(IRMetricKey || (IRMetricKey = {}));
 
-var EReportColumnKey;
-(function (EReportColumnKey) {
-    EReportColumnKey["ORDER_ID"] = "order_id";
-    EReportColumnKey["ORDER_DATE"] = "order_date";
-    EReportColumnKey["TOTAL"] = "total_price";
-    EReportColumnKey["CAMPAIGNS"] = "experiments";
-    EReportColumnKey["TRAFFIC_SOURCE"] = "traffic_source";
-    EReportColumnKey["ITEMS"] = "items";
-    EReportColumnKey["DEVICE"] = "device";
-    EReportColumnKey["VISITOR"] = "visitor_type";
-})(EReportColumnKey || (EReportColumnKey = {}));
+[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
+({
+    [IRVariantType.VARIANT_A]: 'Control',
+    [IRVariantType.VARIANT_B]: 'Variant',
+});
+
+const COLUMN_SEPARATOR = '___';
+const DIMENSION_SEPARATOR = '__';
+const COMPARISON_PREFIX = 'comparison';
+const PREVIOUS_PERIOD_KEY = 'previous_period';
+const TOTAL_SUFFIX = 'totals';
+
+const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
+const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
+function getPreviousColumnName(key) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
+}
+function getPreviousTotalColumnName(key) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
+}
+function getTotalColumnName(key) {
+    return joinColumnParts(key, TOTAL_SUFFIX);
+}
+function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
+    return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
+}
+function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
+    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
+}
+function getMetricPreviousValue(row, key) {
+    return row[getPreviousColumnName(key)];
+}
+
+const convertOrderItemsToReportTableRows = (orderItems) => {
+    return orderItems.map((orderItem) => {
+        const { events: _events, ...restOrderItem } = orderItem;
+        return {
+            ...restOrderItem,
+            items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
+            experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
+        };
+    });
+};
+const applyTotalToSummaryRow = (rows) => {
+    let totalPrice = 0;
+    let totalItems = 0;
+    rows.forEach((row) => {
+        const rowTotal = row[EReportColumnKey.TOTAL];
+        const rowItems = row[EReportColumnKey.ITEMS];
+        if (typeof rowTotal === 'number') {
+            totalPrice += rowTotal;
+        }
+        if (Array.isArray(rowItems)) {
+            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
+        }
+    });
+    return rows.map((row, index) => {
+        const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
+        return {
+            // Only add totals to first row (used by SummaryRow)
+            ...(index === 0 && {
+                [getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
+                [getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
+            }),
+            ...row,
+        };
+    });
+};
 
 const ORDER_LISTING_DIMENSION_LAYOUT = {
     width: '158px',
@@ -24614,79 +23383,6 @@ const DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT = [
     EReportColumnKey.VISITOR,
 ];
 
-const OrderListingTableEmpty = ({ title, description }) => {
-    return (jsx(GBlockCenter, { paddingBlock: "400", children: jsxs(BlockStack, { gap: "400", inlineAlign: "center", children: [jsx("img", { src: ANALYTIC_EMPTY, alt: "No orders", width: 80, height: 80 }), jsxs(BlockStack, { gap: "200", inlineAlign: "center", children: [jsx(Text, { as: "p", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", alignment: "center", children: description })] })] }) }));
-};
-
-[IRVariantType.VARIANT_A, IRVariantType.VARIANT_B];
-({
-    [IRVariantType.VARIANT_A]: 'Control',
-    [IRVariantType.VARIANT_B]: 'Variant',
-});
-
-const COLUMN_SEPARATOR = '___';
-const DIMENSION_SEPARATOR = '__';
-const COMPARISON_PREFIX = 'comparison';
-const PREVIOUS_PERIOD_KEY = 'previous_period';
-const TOTAL_SUFFIX = 'totals';
-
-const joinColumnParts = (...parts) => parts.join(COLUMN_SEPARATOR);
-const getDimensionPathKey = (dimensions, dimensionIndex) => dimensions.slice(0, dimensionIndex + 1).join(DIMENSION_SEPARATOR);
-function getPreviousColumnName(key) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY);
-}
-function getPreviousTotalColumnName(key) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, TOTAL_SUFFIX);
-}
-function getTotalColumnName(key) {
-    return joinColumnParts(key, TOTAL_SUFFIX);
-}
-function getTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
-    return joinColumnParts(key, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
-}
-function getPreviousTotalColumnNameByDimensions(dimensions, key, dimensionIndex) {
-    return joinColumnParts(COMPARISON_PREFIX, key, PREVIOUS_PERIOD_KEY, getDimensionPathKey(dimensions, dimensionIndex), TOTAL_SUFFIX);
-}
-function getMetricPreviousValue(row, key) {
-    return row[getPreviousColumnName(key)];
-}
-
-const convertOrderItemsToReportTableRows = (orderItems) => {
-    return orderItems.map((orderItem) => {
-        const { events: _events, ...restOrderItem } = orderItem;
-        return {
-            ...restOrderItem,
-            items: typeof orderItem.items === 'string' ? JSON.parse(orderItem.items) : (orderItem.items ?? []),
-            experiments: typeof orderItem.experiments === 'string' ? JSON.parse(orderItem.experiments) : (orderItem.experiments ?? []),
-        };
-    });
-};
-const applyTotalToSummaryRow = (rows) => {
-    let totalPrice = 0;
-    let totalItems = 0;
-    rows.forEach((row) => {
-        const rowTotal = row[EReportColumnKey.TOTAL];
-        const rowItems = row[EReportColumnKey.ITEMS];
-        if (typeof rowTotal === 'number') {
-            totalPrice += rowTotal;
-        }
-        if (Array.isArray(rowItems)) {
-            totalItems += rowItems.reduce((acc, item) => acc + Number(item.quantity), 0);
-        }
-    });
-    return rows.map((row, index) => {
-        const totalItemsLabel = totalItems > 1 ? `${totalItems} items` : `${totalItems} item`;
-        return {
-            // Only add totals to first row (used by SummaryRow)
-            ...(index === 0 && {
-                [getTotalColumnName(EReportColumnKey.TOTAL)]: totalPrice,
-                [getTotalColumnName(EReportColumnKey.ITEMS)]: totalItemsLabel,
-            }),
-            ...row,
-        };
-    });
-};
-
 const SKELETON_METRICS = [
     EReportColumnKey.ORDER_DATE,
     EReportColumnKey.TOTAL,
@@ -24772,6 +23468,10 @@ const OrderListingTableSkeleton = ({ rowCount = 5 }) => {
     return (jsxs("div", { className: "GReportTable__Container rounded-xl overflow-hidden", children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx("div", { className: "GReportTable__StickyHeader", children: jsxs("div", { children: [jsx(SkeletonHeader, {}), jsx(SkeletonSummaryRow, {})] }) }), jsx("div", { className: "GReportTable__ScrollWrap", children: Array.from({ length: rowCount }).map((_, index) => (jsx(SkeletonRow, {}, index))) })] }), jsx("div", { className: "GReportTable__Pagination", children: jsx(InlineStack, { align: "space-between", blockAlign: "center", gap: "400", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }) })] }));
 };
 
+const OrderListingTableEmpty = ({ title, description }) => {
+    return (jsx(GBlockCenter, { paddingBlock: "400", children: jsxs(BlockStack, { gap: "400", inlineAlign: "center", children: [jsx("img", { src: ANALYTIC_EMPTY, alt: "No orders", width: 80, height: 80 }), jsxs(BlockStack, { gap: "200", inlineAlign: "center", children: [jsx(Text, { as: "p", variant: "headingSm", fontWeight: "semibold", children: title }), jsx(Text, { as: "p", variant: "bodyMd", tone: "subdued", alignment: "center", children: description })] })] }) }));
+};
+
 var EOrderDirectionType;
 (function (EOrderDirectionType) {
     EOrderDirectionType["ASC"] = "ASC";
@@ -24784,8 +23484,6 @@ const useOrderControlStore = create()((set) => ({
 }));
 
 const useOrderColumnsSelectorStore = create()(persist((set) => ({
-    isChangeSelectedColumnsPreviously: false,
-    setIsChangeSelectedColumnsPreviously: () => set({ isChangeSelectedColumnsPreviously: true }),
     selectedColumns: DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT,
     columnsOrder: Object.values(ORDER_COLUMN_MAPPING).map((column) => column.value),
     setColumnsOrder: (columnsOrder) => set({ columnsOrder }),
@@ -24795,8 +23493,8 @@ const useOrderColumnsSelectorStore = create()(persist((set) => ({
 const useOrderListingData = ({ limitRowAmount, orderListing = [], fixedColumns }) => {
     const selectedColumns = useOrderColumnsSelectorStore((state) => state.selectedColumns);
     const columnsOrder = useOrderColumnsSelectorStore((state) => state.columnsOrder);
-    const showColumns = ORDER_LISTING_COLUMNS.filter((column) => (fixedColumns ?? selectedColumns).includes(column.name));
-    const sortedMetrics = sortByArrayOrder(ORDER_LISTING_METRICS ?? [], columnsOrder);
+    const showColumns = useMemo(() => ORDER_LISTING_COLUMNS.filter((column) => (fixedColumns ?? selectedColumns).includes(column.name)), [fixedColumns, selectedColumns]);
+    const sortedMetrics = useMemo(() => sortByArrayOrder(ORDER_LISTING_METRICS ?? [], columnsOrder), [columnsOrder]);
     const tableData = useMemo(() => {
         const rows = convertOrderItemsToReportTableRows(orderListing);
         const showRows = limitRowAmount ? rows.slice(0, limitRowAmount) : rows;
@@ -25182,7 +23880,7 @@ const useReportData = () => {
     };
 };
 
-const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, }) => {
+const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
     const { t } = useTranslation();
     const { onViewAllStoreOrders } = useReportTableActionsContext();
     const isHasTotalRows = Boolean(totalRows && totalRows > 0);
@@ -25197,7 +23895,7 @@ const Pagination = ({ totalRows, itemCount, viewAllMetricContent = 'order', show
             'justify-end': isShowViewAllStoreOrders,
             'justify-center': isHasTotalRows,
             'justify-between': (isHasTotalRows || paginationProps) && isShowViewAllStoreOrders,
-        }), children: [paginationProps && jsx(GPagination, { ...paginationProps }), isHasTotalRows && (jsx(Text, { variant: "bodyMd", as: "span", children: t(`${totalRows} rows`) })), isShowViewAllStoreOrders && (jsx(Button, { variant: "plain", onClick: handleClickViewAllStoreOrders, children: getViewAllStoreOrdersText() }))] }));
+        }), children: [paginationProps && jsx(GPagination, { ...paginationProps }), isHasTotalRows && (jsx(Text, { variant: "bodyMd", as: "span", children: t('{{count}} rows', { count: totalRows }) })), isShowViewAllStoreOrders && (jsx(GMockDataTooltip, { isMockData: isMockData, children: jsx(Button, { variant: "plain", disabled: isMockData, onClick: handleClickViewAllStoreOrders, children: getViewAllStoreOrdersText() }) }))] }));
     function getViewAllStoreOrdersText() {
         if (itemCount && itemCount > 1) {
             return t('View all store {{metric}}s by date range ({{itemCount}})', {
@@ -25216,8 +23914,8 @@ const ScrollBar = forwardRef(({ isPaginationHidden }, ref) => {
 });
 ScrollBar.displayName = 'ScrollBar';
 
-const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, }) => {
-    return (jsxs("div", { className: "GReportTable__FooterWrapper", children: [scrollbarContainerRef && jsx(ScrollBar, { ref: scrollbarContainerRef, isPaginationHidden: isPaginationHidden }), jsx(Pagination, { totalRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden })] }));
+const WrapperFooter = ({ scrollbarContainerRef, itemCount, totalPaginationRows, showViewAllButton, paginationProps, isPaginationHidden, isMockData, }) => {
+    return (jsxs("div", { className: "GReportTable__FooterWrapper", children: [scrollbarContainerRef && jsx(ScrollBar, { ref: scrollbarContainerRef, isPaginationHidden: isPaginationHidden }), jsx(Pagination, { totalRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData })] }));
 };
 
 const PreviousCell = ({ previousValue, isMergedWithPrev }) => {
@@ -25235,16 +23933,21 @@ const DefaultCell = ({ isMergedWithPrev, value, previousValue, columnLayout, isT
     return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-full min-w-0", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", truncate: true, fontWeight: isTotalRow && !isDimensionCol ? 'semibold' : 'regular', alignment: columnLayout?.align, children: isMergedWithPrev ? '' : toCapitalize(valueString) }) }) }));
 };
 
+const LoadingData = () => {
+    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
+};
+
+const NoData = () => {
+    const { t } = useTranslation();
+    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
+};
+
 const OrderCellBase = ({ value, justifyContent, isPrevious, isTotalRow, interactive, }) => {
     const { onClick, hovering, onHoverChange } = interactive ?? {};
     const ableInteractive = !!interactive;
     return (jsx("div", { className: cls('GReportTable__CellContent--clickable flex h-7 w-full items-center px-[8px] pl-3', { 'hover:bg-surface-hover cursor-pointer': ableInteractive }, { 'GReportTable__CellContent--noClick': !ableInteractive }), style: { justifyContent }, onClick: onClick ?? undefined, onMouseEnter: ableInteractive ? () => onHoverChange?.(true) : undefined, onMouseLeave: ableInteractive ? () => onHoverChange?.(false) : undefined, children: jsxs(InlineStack, { blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: isTotalRow ? 'semibold' : 'regular', tone: isPrevious ? 'subdued' : 'inherit', children: value }), jsx(Box, { opacity: hovering && ableInteractive ? '1' : '0', children: jsx(Icon, { source: SvgCaretDownIcon }) })] }) }));
 };
 
-const LoadingData = () => {
-    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Spinner, { accessibilityLabel: "Fetching orders", size: "small" }) }));
-};
-
 const OrderItem = ({ order }) => {
     const { t } = useTranslation();
     const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
@@ -25258,18 +23961,13 @@ const OrderItem = ({ order }) => {
     return (jsx(Box, { padding: "300", borderBlockEndWidth: "025", borderColor: "border", children: jsxs(InlineStack, { align: "space-between", blockAlign: "center", gap: "200", children: [jsxs(BlockStack, { gap: "200", children: [jsx(Text, { as: "p", variant: "bodyMd", children: `ID: ${orderId}` }), jsx(Text, { as: "p", variant: "bodyXs", tone: "subdued", children: formatDate(date) })] }), jsxs(InlineStack, { gap: "100", children: [jsx(Tooltip$1, { content: t('View order details'), children: jsx(Button, { icon: jsx(Icon, { source: SvgOrderIcon, tone: "critical" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderDetails?.(orderId) }) }), jsx(Tooltip$1, { content: t('View order journey'), children: jsx(Button, { icon: jsx(Icon, { source: SvgChartLineIcon, tone: "primary" }), variant: "tertiary", size: "slim", onClick: () => onViewOrderJourney?.(orderId) }) })] })] }) }));
 };
 
-const NoData = () => {
-    const { t } = useTranslation();
-    return (jsx(GInlineCenter, { minHeight: "200px", align: "center", inlineAlign: "center", children: jsx(Text, { as: "p", children: t('No orders found.') }) }));
-};
-
-const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow, }) => {
+const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow, isMockData, }) => {
     const { value: itemHovering, setTrue, setFalse } = useToggle(false);
     const { value: active, toggle: toggleActive } = useToggle(false);
     const { orderList, onClickOrderCell, isFetching } = orderCellProps ?? {};
     if (typeof value !== 'string')
         return null;
-    if (isTotalRow || value === '0') {
+    if (isMockData || isTotalRow || value === '0') {
         return (jsx(OrderCellBase, { value: value, justifyContent: columnLayout?.align, isPrevious: isPrevious, isTotalRow: !!isTotalRow }));
     }
     const openOrderModal = () => {
@@ -25290,8 +23988,8 @@ const OrderCell = ({ value, columnLayout, orderCellProps, isPrevious, isTotalRow
             }, isPrevious: isPrevious }), onClose: toggleActive, children: jsx(Box, { width: "291px", children: getContent() }) }));
 };
 
-const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, }) => {
-    return (jsxs(BlockStack, { align: "center", children: [jsx(Box, { width: "100%", children: jsx(OrderCell, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, isTotalRow: isTotalRow }) }), typeof previousValue === 'string' && (jsx(Box, { width: "100%", children: jsx(OrderCell, { value: previousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, isPrevious: true, isTotalRow: isTotalRow }) }))] }));
+const OrderCellContainer = ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData, }) => {
+    return (jsxs(BlockStack, { align: "center", children: [jsx(Box, { width: "100%", children: jsx(OrderCell, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, isTotalRow: isTotalRow, isMockData: isMockData }) }), typeof previousValue === 'string' && (jsx(Box, { width: "100%", children: jsx(OrderCell, { value: previousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, isPrevious: true, isTotalRow: isTotalRow, isMockData: isMockData }) }))] }));
 };
 
 var GVariantBadgeType;
@@ -25407,11 +24105,14 @@ const VersionCell = ({ value, previousValue, isMergedWithPrev, columnLayout }) =
     return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: variantValue && (jsx(GVariantBadge, { variant: variantValue.value, tone: variantValue.value === 'A' ? 'active' : 'inactive', size: "xs" })) }));
 };
 
-const OrderIdCell = ({ value }) => {
+const OrderIdCell = ({ value, isMockData }) => {
     const { t } = useTranslation();
     const [active, setActive] = useState(false);
     const { onViewOrderJourney, onViewOrderDetails } = useReportTableActionsContext();
     const toggleActive = useCallback(() => setActive((active) => !active), []);
+    if (isMockData) {
+        return (jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }));
+    }
     return (jsx(Popover, { active: active, activator: jsx("div", { className: "GReportTable__CellContent--clickable flex h-full w-full cursor-pointer items-center rounded-md pl-3", onClick: toggleActive, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: value }), jsx("span", { className: "opacity-0 group-hover/GReportTable__Row:opacity-100", children: jsx(Icon, { source: SvgCaretDownIcon }) })] }) }), onClose: toggleActive, children: jsx(ActionList, { actionRole: "menuitem", items: [
                 {
                     id: 'view_order_journey',
@@ -25430,7 +24131,7 @@ const OrderIdCell = ({ value }) => {
 
 const DateCell = ({ value, isMergedWithPrev }) => (jsx(Text, { as: "span", variant: "bodySm", children: isMergedWithPrev ? '' : value }));
 
-const CheckoutStartedDetail = ({ lineItems = [], activatorWrapperProps }) => {
+const CheckoutStartedDetail$1 = ({ lineItems = [], activatorWrapperProps }) => {
     const { t } = useTranslation();
     const [active, setActive] = useState(false);
     const toggleActive = useCallback(() => setActive((active) => !active), []);
@@ -25454,16 +24155,16 @@ const ItemsCell = ({ value }) => {
     const lineItems = value.map((item) => ({
         imageURL: item.image_url,
         productTitle: item.product_title,
-        quantity: Number(item.quantity),
+        quantity: Number(item.quantity) || 0,
         title: item.title,
     }));
     const getItemText = () => {
-        const itemQuantity = value.reduce((acc, item) => acc + Number(item.quantity), 0);
+        const itemQuantity = value.reduce((acc, item) => acc + (Number(item.quantity) || 0), 0);
         if (itemQuantity === 1)
             return t('{{itemQuantity}} item', { itemQuantity });
         return t('{{itemQuantity}} items', { itemQuantity });
     };
-    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail, { lineItems: lineItems, activatorWrapperProps: {
+    return (jsx("div", { onMouseEnter: setTrue, onMouseLeave: setFalse, children: jsxs(InlineStack, { gap: "200", blockAlign: "center", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: getItemText() }), jsx(CheckoutStartedDetail$1, { lineItems: lineItems, activatorWrapperProps: {
                         paddingBlockStart: '100',
                         opacity: itemHovering ? '1' : '0',
                     } })] }) }));
@@ -25483,10 +24184,10 @@ const cellMap = {
             return null;
         return jsx(VersionCell, { value: value, isMergedWithPrev: isMergedWithPrev });
     },
-    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow }) => {
+    [IRMetricKey.ORDERS]: ({ value, columnLayout, orderCellProps, previousValue, isTotalRow, isMockData }) => {
         if (!isString(value))
             return null;
-        return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow }));
+        return (jsx(OrderCellContainer, { value: value, columnLayout: columnLayout, orderCellProps: orderCellProps, previousValue: previousValue, isTotalRow: isTotalRow, isMockData: isMockData }));
     },
     [EReportColumnKey.ORDER_DATE]: ({ value, isMergedWithPrev }) => {
         if (!isString(value))
@@ -25503,10 +24204,10 @@ const cellMap = {
             return null;
         return jsx(CampaignsCell, { value: value, campaignsCellProps: campaignsCellProps });
     },
-    [EReportColumnKey.ORDER_ID]: ({ value }) => {
+    [EReportColumnKey.ORDER_ID]: ({ value, isMockData }) => {
         if (!isString(value))
             return null;
-        return jsx(OrderIdCell, { value: value });
+        return jsx(OrderIdCell, { value: value, isMockData: isMockData });
     },
 };
 
@@ -25516,7 +24217,7 @@ const NoneCell = ({ isMergedWithPrev, previousValue, columnLayout }) => {
     return (jsx(WrapperCell, { previousValue: previousValue, isMergedWithPrev: isMergedWithPrev, columnLayout: columnLayout, children: jsx("div", { className: "w-[11px] h-[2px] bg-[#8A8A8A]" }) }));
 };
 
-const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, }) => {
+const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, formatter, hasTooltipCard, previousValue, orderCellProps, campaignsCellProps, isTotalRow, isMockData, }) => {
     const columnLayoutStyles = getColumnLayoutStyles(columnLayout, hasTooltipCard);
     const { formatData } = useReportData();
     const formattedValue = formatData({ value, formatter, name });
@@ -25533,12 +24234,12 @@ const Cell = ({ value, isMergedWithPrev, columnLayout, name, isDimensionCol, for
         if (formattedValue === NONE_VALUE) {
             Renderer = NoneCell;
         }
-        return (jsx(Renderer, { value: formattedValue, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol }));
+        return (jsx(Renderer, { value: formattedValue, name: name, isMergedWithPrev: isMergedWithPrev, previousValue: formattedPreviousValue, columnLayout: columnLayout, orderCellProps: orderCellProps, campaignsCellProps: campaignsCellProps, isTotalRow: isTotalRow, isDimensionCol: isDimensionCol, isMockData: isMockData }));
     };
     return (jsx("div", { className: cls('GReportTable__Cell', { 'GReportTable__Cell--dimension': isDimensionCol }), style: cellStyles, children: jsx("div", { className: "GReportTable__CellContent", style: columnLayoutStyles, children: renderContent() }) }));
 };
 
-const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, }) => {
+const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, orderCellProps, isHideCampaignContent, minWidth, isMockData, }) => {
     const checkMergedWithPrev = (col) => {
         const isDimensionCol = dimensions.includes(col);
         let isMergedWithPrev = false;
@@ -25558,7 +24259,7 @@ const Row = ({ row, rowIndex, columns, dimensions, prevRow, columnLayoutMap, ord
     return (jsx("div", { className: "GReportTable__Row group/GReportTable__Row", style: { minWidth }, children: columns.map((col) => {
             const hasTooltipCard = !!col.tooltipCardProps;
             const orderId = row[EReportColumnKey.ORDER_ID]?.toString() ?? '';
-            return (jsx(Cell, { value: row[col.name], isTotalRow: row[IS_TOTAL_ROW_FIELD], previousValue: getMetricPreviousValue(row, col.name), isMergedWithPrev: checkMergedWithPrev(col.name), columnLayout: columnLayoutMap[col.name], name: col.name, campaignsCellProps: { orderId, isHideCampaignContent }, isDimensionCol: dimensions.includes(col.name), formatter: col.dataType, hasTooltipCard: hasTooltipCard, orderCellProps: customOrderCellProps }, col.name));
+            return (jsx(Cell, { value: row[col.name], isTotalRow: row[IS_TOTAL_ROW_FIELD], previousValue: getMetricPreviousValue(row, col.name), isMergedWithPrev: checkMergedWithPrev(col.name), columnLayout: columnLayoutMap[col.name], name: col.name, campaignsCellProps: { orderId, isHideCampaignContent }, isDimensionCol: dimensions.includes(col.name), formatter: col.dataType, hasTooltipCard: hasTooltipCard, orderCellProps: customOrderCellProps, isMockData: isMockData }, col.name));
         }) }));
 };
 
@@ -25581,10 +24282,8 @@ const SummaryRow = ({ columns, row, dimensions, summary, columnLayoutMap }) => {
             return '';
         const cellValue = row?.[getTotalColumnName(columnName)];
         const previousValue = row?.[getPreviousTotalColumnName(columnName)];
-        const formattedValue = cellValue ? formatData({ value: cellValue, formatter, name: columnName }) : cellValue;
-        const formattedPreviousValue = previousValue
-            ? formatData({ value: previousValue, formatter, name: columnName })
-            : previousValue;
+        const formattedValue = cellValue == null ? cellValue : formatData({ value: cellValue, formatter, name: columnName });
+        const formattedPreviousValue = previousValue == null ? previousValue : formatData({ value: previousValue, formatter, name: columnName });
         if (typeof formattedValue === 'object')
             return '';
         return (jsx(SummaryCell, { currentValue: formattedValue, showPrevious: showPrevious, previousValue: formattedPreviousValue, columnLayout: layout }));
@@ -25657,7 +24356,7 @@ WrapperHeader.displayName = 'WrapperHeader';
 
 const mockDimensions = ['session_device_type', 'month', 'session_country', 'session_device_os'];
 const mockMetrics = ['online_store_visitors', 'sessions', 'bounces'];
-const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data, activeColumn, orderBy, options, paginationProps, itemCount, dimensionLayout, metricLayouts, orderCellProps, isHideCampaignContent = false, showViewAllButton, emptyStateComponent, isLoading, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
+const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data, activeColumn, orderBy, options, paginationProps, itemCount, dimensionLayout, metricLayouts, orderCellProps, isHideCampaignContent = false, showViewAllButton, emptyStateComponent, isLoading, isMockData, onChangeOrderBy, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, skeletons, }) => {
     const { summary = {}, hideBorderTop, hidePaginationRow } = options ?? {};
     const { columns, rows } = useReportTable({ dimensions, metrics, tableData: data ?? { columns: [], rows: [] } });
     const { headerRef, bodyRef, scrollbarContainerRef, leftShadowRef, rightShadowRef } = useSyncedScroll({ columns });
@@ -25688,15 +24387,15 @@ const ReportTable = ({ dimensions = mockDimensions, metrics = mockMetrics, data,
     return (jsx(ReportTableActionsProvider, { onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, onViewAllStoreOrders: onViewAllStoreOrders, children: jsxs("div", { className: cls('GReportTable__Container', {
                 'GReportTable__Container--border-top': !hideBorderTop,
                 'GReportTable__Container--pagination-hidden': isPaginationHidden,
-            }), children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx(WrapperHeader, { columns: columns, dimensions: dimensions, row: data?.rows[0], ref: headerRef, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, summary: summary, onChangeOrderBy: onChangeOrderBy, minWidth: totalTableWidth }), jsx("div", { className: "GReportTable__ScrollWrap", ref: bodyRef, children: rows.map((row, index) => (jsx(Row, { row: row, rowIndex: index, columns: columns, dimensions: dimensions, prevRow: rows[index - 1], columnLayoutMap: columnLayoutMap, orderCellProps: orderCellProps, isHideCampaignContent: isHideCampaignContent, minWidth: totalTableWidth }, index))) })] }), jsx(WrapperFooter, { scrollbarContainerRef: scrollbarContainerRef, totalPaginationRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden }), jsx("div", { className: "GReportTable__LeftShadow", style: { left: tableDimensionLayout.width }, ref: leftShadowRef }), jsx("div", { className: "GReportTable__RightShadow", ref: rightShadowRef })] }) }));
+            }), children: [jsxs("div", { className: "GReportTable__Wrapper", children: [jsx(WrapperHeader, { columns: columns, dimensions: dimensions, row: data?.rows[0], ref: headerRef, columnLayoutMap: columnLayoutMap, activeColumn: activeColumn, orderBy: orderBy, summary: summary, onChangeOrderBy: onChangeOrderBy, minWidth: totalTableWidth }), jsx("div", { className: "GReportTable__ScrollWrap", ref: bodyRef, children: rows.map((row, index) => (jsx(Row, { row: row, rowIndex: index, columns: columns, dimensions: dimensions, prevRow: rows[index - 1], columnLayoutMap: columnLayoutMap, orderCellProps: orderCellProps, isHideCampaignContent: isHideCampaignContent, minWidth: totalTableWidth, isMockData: isMockData }, index))) })] }), jsx(WrapperFooter, { scrollbarContainerRef: scrollbarContainerRef, totalPaginationRows: totalPaginationRows, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: isPaginationHidden, isMockData: isMockData }), jsx("div", { className: "GReportTable__LeftShadow", style: { left: tableDimensionLayout.width }, ref: leftShadowRef }), jsx("div", { className: "GReportTable__RightShadow", ref: rightShadowRef })] }) }));
     function renderEmptyState() {
         return (jsxs("div", { className: cls('GReportTable__Container', {
                 'GReportTable__Container--border-top': !hideBorderTop,
-            }), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true })] }));
+            }), children: [emptyStateComponent, jsx(WrapperFooter, { totalPaginationRows: 0, itemCount: itemCount, showViewAllButton: showViewAllButton, paginationProps: paginationProps, isPaginationHidden: true, isMockData: isMockData })] }));
     }
 };
 
-const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
+const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, paginationProps, tableOptions, isMockData, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails, }) => {
     const { hideSummary, limitRowAmount, hidePaginationRow, hideBorderTop, fixedColumns, isLatestTable } = tableOptions ?? {};
     const { t } = useTranslation();
     const orderBy = useOrderControlStore((state) => state.orderBy);
@@ -25722,7 +24421,7 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
     };
     if (isLatestTable && isLoading)
         return jsx(OrderListingTableSkeleton, {});
-    return (jsx(Fragment, { children: jsx(ReportTable, { metrics: sortedMetrics, dimensions: ORDER_LISTING_DIMENSIONS, options: getOptionsProps(), paginationProps: paginationProps, data: reportTableData, itemCount: totalStoreOrders, dimensionLayout: ORDER_LISTING_DIMENSION_LAYOUT, metricLayouts: ORDER_LISTING_METRIC_LAYOUTS, orderBy: orderBy ? { [orderBy.field]: orderBy } : undefined, showViewAllButton: showViewAllButton, isHideCampaignContent: !!isLatestTable, emptyStateComponent: renderEmptyState(), onChangeOrderBy: handleChangeOrderBy, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails }) }));
+    return (jsx(Fragment, { children: jsx(ReportTable, { metrics: sortedMetrics, dimensions: ORDER_LISTING_DIMENSIONS, options: getOptionsProps(), paginationProps: paginationProps, data: reportTableData, itemCount: totalStoreOrders, dimensionLayout: ORDER_LISTING_DIMENSION_LAYOUT, metricLayouts: ORDER_LISTING_METRIC_LAYOUTS, orderBy: orderBy ? { [orderBy.field]: orderBy } : undefined, showViewAllButton: showViewAllButton, isHideCampaignContent: !!isLatestTable, isMockData: isMockData, emptyStateComponent: renderEmptyState(), onChangeOrderBy: handleChangeOrderBy, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails }) }));
     function renderEmptyState() {
         const isNoOrderWithCurrentFilters = orders.length === 0;
         return (jsx(GBlockCenter, { paddingBlockStart: isNoOrderWithCurrentFilters ? '500' : '0', paddingBlockEnd: isNoOrderWithCurrentFilters ? '800' : '0', children: jsx(GBlockCenter, { paddingBlock: "1600", children: jsx(OrderListingTableEmpty, { title: isNoOrderWithCurrentFilters ? t('No order') : t('No order found'), description: isNoOrderWithCurrentFilters ? t('Try changing the filters') : t('Try changing the filters or search term') }) }) }));
@@ -25740,7 +24439,13 @@ const OrderListingTable = ({ orders, isLoading, totalStoreOrders, queryValue, pa
 };
 var OrderListingTable$1 = memo(OrderListingTable);
 
-const OrderListingLatestTable = ({ source, data, callbacks }) => {
+var EReportSource;
+(function (EReportSource) {
+    EReportSource["CAMPAIGN"] = "campaign";
+    EReportSource["PAGE"] = "page";
+})(EReportSource || (EReportSource = {}));
+
+const OrderListingLatestTable = ({ source, data, callbacks, isMockData }) => {
     const { orders, isLoading, totalFilteredOrders, totalStoreOrders } = data;
     const { onViewAllOrders, onViewAllStoreOrders, onViewOrderJourney, onViewOrderDetails } = callbacks ?? {};
     const { t } = useTranslation();
@@ -25752,10 +24457,10 @@ const OrderListingLatestTable = ({ source, data, callbacks }) => {
             return ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE;
         return ORDER_LISTING_COLUMNS;
     }, [source]);
-    return (jsxs(GBoxCard, { padding: "0", overflowX: "hidden", children: [jsx(Box, { padding: "400", borderStartStartRadius: "400", borderStartEndRadius: "400", background: "bg-fill", children: jsxs(InlineStack, { blockAlign: "center", align: "space-between", children: [jsx(GTextTooltip, { tooltipProps: tooltipContent ? { content: tooltipContent } : undefined, as: "p", variant: "headingMd", fontWeight: "semibold", children: t('Orders from {{source}}', { source: sourceText }) }), !isEmpty && (jsx(Button, { variant: "secondary", onClick: onViewAllOrders, children: t('View {{source}} orders ({{totalOrders}})', {
-                                source: sourceText,
-                                totalOrders: totalFilteredOrders,
-                            }) }))] }) }), isEmpty ? (jsx(OrderListingTableEmpty, { title: t('No order yet'), description: t('There are no orders from this {{source}} yet', { source }) })) : (jsx(OrderListingTable$1, { orders: orders, isLoading: isLoading, totalStoreOrders: totalStoreOrders, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, tableOptions: {
+    return (jsxs(GBoxCard, { padding: "0", overflowX: "hidden", children: [jsx(Box, { padding: "400", borderStartStartRadius: "400", borderStartEndRadius: "400", background: "bg-fill", children: jsxs(InlineStack, { blockAlign: "center", align: "space-between", children: [jsx(GTextTooltip, { tooltipProps: tooltipContent ? { content: tooltipContent } : undefined, as: "p", variant: "headingMd", fontWeight: "semibold", children: t('Orders from {{source}}', { source: sourceText }) }), !isEmpty && (jsx(GMockDataTooltip, { isMockData: isMockData, children: jsx(Button, { variant: "secondary", disabled: isMockData, onClick: onViewAllOrders, children: t('View {{source}} orders ({{totalOrders}})', {
+                                    source: sourceText,
+                                    totalOrders: totalFilteredOrders,
+                                }) }) }))] }) }), isEmpty ? (jsx(OrderListingTableEmpty, { title: t('No order yet'), description: t('There are no orders from this {{source}} yet', { source }) })) : (jsx(OrderListingTable$1, { orders: orders, isLoading: isLoading, totalStoreOrders: totalStoreOrders, isMockData: isMockData, onViewAllStoreOrders: onViewAllStoreOrders, onViewOrderJourney: onViewOrderJourney, onViewOrderDetails: onViewOrderDetails, tableOptions: {
                     hideSummary: true,
                     hidePaginationRow: true,
                     limitRowAmount: ORDER_LISTING_CONFIG.SHOW_LATEST_ORDER_LISTING_AMOUNT,
@@ -25792,6 +24497,440 @@ var EJourneyEvent;
     EJourneyEvent["SEARCH_SUBMITTED"] = "SEARCH_SUBMITTED";
 })(EJourneyEvent || (EJourneyEvent = {}));
 
+const useGModalOrderJourney = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [initialValues, setInitialValues] = useState(null);
+    const handleOpenModalOrderJourney = useCallback((data) => {
+        setInitialValues(data);
+        setIsOpen(true);
+    }, []);
+    const handleCloseModalOrderJourney = useCallback(() => {
+        setIsOpen(false);
+        setInitialValues(null);
+    }, []);
+    return {
+        isOpen,
+        initialValues,
+        handleOpenModalOrderJourney,
+        handleCloseModalOrderJourney,
+    };
+};
+
+const OrderJourneyContext = createContext(undefined);
+const OrderJourneyProvider = OrderJourneyContext.Provider;
+const useOrderJourneyContext = () => {
+    const context = useContext(OrderJourneyContext);
+    if (!context)
+        throw new Error('useOrderJourneyContext must be used within OrderJourneyProvider');
+    return context;
+};
+
+const EventMarkerIcon = ({ icon, tone = 'base', hasPadding = true }) => {
+    const wrapperBackground = getWrapperBackground();
+    const iconSource = isIconSource(icon) ? jsx(Icon, { source: icon, tone: tone }) : icon;
+    return (jsx(Box, { padding: hasPadding ? '100' : '0', background: wrapperBackground, borderRadius: "full", children: iconSource }));
+    function getWrapperBackground() {
+        switch (tone) {
+            case 'success':
+                return 'bg-surface-success';
+            default:
+                return 'bg-surface-secondary';
+        }
+    }
+    function isIconSource(x) {
+        return typeof x === 'string' || (typeof x === 'object' && x.body) || typeof x === 'function';
+    }
+};
+
+const JourneyDetail = ({ title, children }) => {
+    return (jsx(Box, { padding: "300", overflowX: "hidden", children: jsxs(BlockStack, { gap: "050", children: [typeof title === 'string' ? (jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: title })) : (title), children] }) }));
+};
+
+var JourneyTimeFormat;
+(function (JourneyTimeFormat) {
+    JourneyTimeFormat["HH_MM_SS"] = "HH:mm:ss";
+})(JourneyTimeFormat || (JourneyTimeFormat = {}));
+const JourneyTime = ({ time, format = JourneyTimeFormat.HH_MM_SS }) => {
+    const formattedTime = formatDateBy(format, time);
+    const width = getWidthByFormat();
+    return (jsx("div", { style: { minWidth: width, maxWidth: width }, children: jsx(Text, { as: "span", variant: "bodyXs", children: formattedTime }) }));
+    function getWidthByFormat() {
+        switch (format) {
+            case JourneyTimeFormat.HH_MM_SS:
+                return '48px';
+            default:
+                return '48px';
+        }
+    }
+};
+
+const JourneyItem = ({ time, title, eventMarker, children }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "center", gap: "400", wrap: false, children: [jsx(JourneyTime, { time: time }), jsx(EventMarkerIcon, { ...eventMarker }), jsx(JourneyDetail, { title: title, children: children })] }) }));
+};
+
+const QuantityWrapper = ({ quantity }) => {
+    if (!quantity)
+        return null;
+    return (jsx(Box, { paddingBlock: "050", paddingInline: "200", borderRadius: "200", background: "bg-fill-secondary", minWidth: "24px", children: jsx(Text, { as: "span", variant: "bodySm", fontWeight: "medium", tone: "subdued", alignment: "center", children: quantity }) }));
+};
+
+const CheckoutStarted = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Started checkout'), eventMarker: { icon: SvgPaymentIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const CheckoutStartedDetail = ({ lineItems = [], activatorWrapperProps }) => {
+    const { t } = useTranslation();
+    const [active, setActive] = useState(false);
+    const toggleActive = useCallback(() => setActive((active) => !active), []);
+    if (!lineItems || lineItems.length === 0) {
+        return null;
+    }
+    return (jsx(Popover, { active: active, activator: jsx(Box, { ...activatorWrapperProps, children: jsx(Button, { variant: "tertiary", icon: active ? SvgChevronUpIcon : SvgChevronDownIcon, onClick: toggleActive }) }), onClose: toggleActive, children: jsx(Box, { padding: "300", width: "340px", children: jsx(BlockStack, { gap: "300", children: lineItems.map((product, index, self) => {
+                    const isLast = index === self.length - 1;
+                    const boxProps = {
+                        borderBlockEndWidth: '025',
+                        borderColor: 'border-secondary',
+                        paddingBlockEnd: '300',
+                    };
+                    return (jsx(Box, { ...(!isLast && boxProps), children: jsxs(InlineStack, { gap: "300", wrap: false, children: [jsx("div", { className: "size-10", children: jsx(GThumbnail, { source: product.imageURL ?? '', alt: product.productTitle ?? '', size: "small" }) }), jsxs("div", { className: "flex flex-col gap-1 w-full", children: [jsxs(InlineStack, { gap: "200", align: "space-between", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: product.productTitle }), jsx("div", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: t('x {{quantity}}', { quantity: product.quantity }) }) })] }), product.title && (jsx("span", { children: jsx(Badge, { children: product.title }) }))] })] }) }, product.productID));
+                }) }) }) }));
+};
+
+const CheckoutItems = ({ lineItems }) => {
+    const { t } = useTranslation();
+    const cartQuantity = lineItems.reduce((acc, curr) => acc + (curr.quantity ?? 0), 0);
+    return (jsxs(InlineStack, { gap: "100", children: [jsx(QuantityWrapper, { quantity: cartQuantity }), jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", children: cartQuantity > 1 ? t('items') : t('item') }), jsx(CheckoutStartedDetail, { lineItems: lineItems })] }));
+};
+
+const CheckoutCompleted = ({ event }) => {
+    const { t } = useTranslation();
+    const { orderId } = useOrderJourneyContext();
+    const isCheckoutCompletedEventOfCurrentOrder = event.orderID === orderId;
+    const titleMarkup = renderTitleMarkup();
+    return (jsx(JourneyItem, { time: event.date, title: titleMarkup, eventMarker: {
+            icon: SvgCheckIcon,
+            tone: isCheckoutCompletedEventOfCurrentOrder ? 'success' : 'base',
+        }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+    function renderTitleMarkup() {
+        return (jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", children: t('Completed checkout') }), event.orderID && (jsxs(Fragment, { children: [jsx(GDotInline, { tone: "disabled" }), jsxs(InlineStack, { gap: "025", blockAlign: "center", wrap: false, children: [jsx(Icon, { source: SvgOrderIcon, tone: "base" }), jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", children: event.orderID })] })] }))] }));
+    }
+};
+
+/**
+ * Slices journey items based on the analytic metric mode.
+ *
+ * - FIRST_SESSION: Returns all items (no slicing)
+ * - PAGE_ONLY: Slices from the LAST matching event (most recent relevant interaction)
+ * - ALL_SESSION: Slices from the FIRST matching event (entire journey from first interaction)
+ */
+const sliceJourneyItems = ({ journeyItems, mode, source, filteredCampaignId, pageAnalytic, }) => {
+    if (mode === EAnalyticMode.FIRST_SESSION)
+        return journeyItems;
+    const isCampaignVariant = ({ campaignGroupID = '', campaignID = '' }) => !isCampaignOfAnother({ campaignGroupID: campaignGroupID ?? '', campaignID: campaignID ?? '', filteredCampaignId });
+    const isMatchingPage = ({ locationPath = '' }) => locationPath === pageAnalytic?.path;
+    const sliceFromIndex = (index) => (index !== -1 ? journeyItems.slice(index) : journeyItems);
+    const predicate = source === EReportSource.CAMPAIGN ? isCampaignVariant : isMatchingPage;
+    // PAGE_ONLY: slice from LAST matching event (most recent relevant interaction)
+    if (mode === EAnalyticMode.PAGE_ONLY) {
+        return sliceFromIndex(findLastIndex(journeyItems, predicate));
+    }
+    // ALL_SESSION: slice from FIRST matching event (entire journey from first interaction)
+    if (mode === EAnalyticMode.ALL_SESSION) {
+        return sliceFromIndex(journeyItems.findIndex(predicate));
+    }
+    return journeyItems;
+};
+const getEventCampaignIdByType = ({ campaignGroupID, campaignID, }) => {
+    return campaignGroupID !== '0' ? campaignGroupID : campaignID;
+};
+const isCampaignOfAnother = ({ campaignGroupID, campaignID, filteredCampaignId, }) => {
+    const eventCampaignIdByType = getEventCampaignIdByType({ campaignGroupID, campaignID });
+    const isEventOfAnotherCampaign = filteredCampaignId && eventCampaignIdByType !== filteredCampaignId;
+    return isEventOfAnotherCampaign;
+};
+
+const PageViewed = ({ event }) => {
+    const { t } = useTranslation();
+    const { date, locationPath, campaignGroupID = '', campaignID = '', filteredCampaignId, campaignName, campaignGroupName, campaignVariantType, } = event;
+    const eventCampaignName = filteredCampaignId ? '' : campaignGroupName || campaignName;
+    const isEventWithNoCampaign = !campaignVariantType;
+    const eventCampaignIdByType = getEventCampaignIdByType({
+        campaignGroupID: campaignGroupID ?? '',
+        campaignID: campaignID ?? '',
+    });
+    const isEventOfAnotherCampaign = isCampaignOfAnother({
+        campaignGroupID: campaignGroupID ?? '',
+        campaignID: campaignID ?? '',
+        filteredCampaignId,
+    });
+    const pageViewEventMarkerIcon = getPageViewEventMarkerIcon();
+    const titleMarkup = renderTitleMarkup();
+    const hasPadding = useMemo(() => {
+        if (isEventWithNoCampaign)
+            return true;
+        if (!filteredCampaignId)
+            return false;
+        return eventCampaignIdByType !== filteredCampaignId;
+    }, [filteredCampaignId, eventCampaignIdByType, isEventWithNoCampaign]);
+    return (jsx(JourneyItem, { time: date, title: titleMarkup, eventMarker: { icon: pageViewEventMarkerIcon, hasPadding }, children: jsx(InlineStack, { gap: "200", wrap: false, blockAlign: "center", children: jsx("div", { className: "min-w-0 w-full", children: jsx(GTextTruncated, { as: "span", variant: "bodySm", tone: "subdued", children: locationPath ?? '' }) }) }) }));
+    function getPageViewEventMarkerIcon() {
+        if (isEventOfAnotherCampaign)
+            return SvgCursorIcon;
+        switch (campaignVariantType) {
+            case IVariantType$1.VARIANT_A:
+                return jsx(GVariantBadge, { variant: "A", size: "md", tone: "active" });
+            case IVariantType$1.VARIANT_B:
+                return jsx(GVariantBadge, { variant: "B", size: "md" });
+            default:
+                return SvgCursorIcon;
+        }
+    }
+    function renderTitleMarkup() {
+        return (jsxs(InlineStack, { gap: "200", blockAlign: "center", wrap: false, children: [jsx("span", { className: "text-nowrap", children: jsx(Text, { as: "span", variant: "bodyMd", fontWeight: "medium", breakWord: false, children: t('Visited page') }) }), eventCampaignName && !isEventOfAnotherCampaign && (jsxs(Fragment, { children: [jsx(GDotInline, { tone: "disabled" }), jsx("div", { className: "min-w-0 w-full", children: jsx(GI18NText, { as: "span", variant: "bodySm", tone: "subdued", truncate: true, transformers: {
+                                    1: (name) => (jsx(Text, { as: "span", variant: "bodySm", tone: "subdued", fontWeight: "medium", children: name })),
+                                }, children: t('Experiment: [1]{{name}}[]', { name: eventCampaignName }) }) })] }))] }));
+    }
+};
+
+const ProductAddedToCart = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Added product to cart'), eventMarker: { icon: SvgCartIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const ProductRemovedFromCart = ({ event }) => {
+    const { t } = useTranslation();
+    return (jsx(JourneyItem, { time: event.date, title: t('Remove product from cart'), eventMarker: { icon: SvgProductRemoveIcon }, children: jsx(CheckoutItems, { lineItems: event.lineItems ?? [] }) }));
+};
+
+const DefaultEventComponent = () => null;
+const JOURNEY_EVENT_COMPONENTS_MAP = {
+    [EJourneyEvent.ADDED_TO_CART]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_ADDRESS_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_COMPLETED]: CheckoutCompleted,
+    [EJourneyEvent.CHECKOUT_CONTACT_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_SHIPPING_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.CHECKOUT_STARTED]: CheckoutStarted,
+    [EJourneyEvent.COLLECTION_VIEWED]: DefaultEventComponent,
+    [EJourneyEvent.ORDER]: DefaultEventComponent,
+    [EJourneyEvent.PAGE_VIEWED]: PageViewed,
+    [EJourneyEvent.PAYMENT_INFO_SUBMITTED]: DefaultEventComponent,
+    [EJourneyEvent.PRODUCT_ADDED_TO_CART]: ProductAddedToCart,
+    [EJourneyEvent.PRODUCT_REMOVED_FROM_CART]: ProductRemovedFromCart,
+    [EJourneyEvent.PRODUCT_VIEWED]: DefaultEventComponent,
+    [EJourneyEvent.SEARCH_SUBMITTED]: DefaultEventComponent,
+};
+
+const JourneyDateBadge = ({ content }) => {
+    return (jsx(Box, { background: "bg-surface-secondary", paddingBlock: "100", paddingInline: "200", borderRadius: "200", minWidth: "110px", children: jsx(GBlockCenter, { children: jsx(Text, { as: "p", variant: "bodyMd", fontWeight: "medium", children: content }) }) }));
+};
+
+const BOX_BACKGROUND = {
+    default: 'bg-surface-secondary-active',
+    onHover: 'bg-surface-secondary',
+};
+const JourneyLoadMore = ({ isFetching, onLoadMode }) => {
+    const [boxBackground, setBoxBackground] = useState(BOX_BACKGROUND.default);
+    const { t } = useTranslation();
+    if (isFetching) {
+        return (jsx(Box, { paddingBlock: "100", paddingInline: "300", background: BOX_BACKGROUND.onHover, borderRadius: "200", children: jsx(GSpinner, { size: "small" }) }));
+    }
+    return (jsx("div", { className: "cursor-pointer", onMouseEnter: () => setBoxBackground(BOX_BACKGROUND.onHover), onMouseLeave: () => setBoxBackground(BOX_BACKGROUND.default), onClick: onLoadMode, children: jsx(Box, { paddingBlock: "100", paddingInline: "200", background: boxBackground, borderRadius: "200", children: jsxs(InlineStack, { gap: "050", wrap: false, blockAlign: "center", children: [jsx(Icon, { source: SvgChevronUpIcon }), jsx(Text, { as: "p", variant: "bodySm", fontWeight: "medium", children: t('More steps') })] }) }) }));
+};
+
+const JourneyIdBadge = ({ id, type = 'order' }) => {
+    const { t } = useTranslation();
+    const idContent = getIdContent();
+    const { onViewOrderDetails } = useOrderJourneyContext();
+    return (jsx(GTooltip, { content: t('View order details'), children: jsx("div", { className: "cursor-pointer", onClick: () => onViewOrderDetails?.(id), children: jsx(Box, { background: "bg-surface-secondary-active", paddingBlock: "100", paddingInline: "200", borderRadius: "200", children: jsxs(InlineStack, { gap: "100", blockAlign: "center", children: [jsx(GI18NText, { as: "p", variant: "bodyMd", fontWeight: "medium", tone: "subdued", transformers: {
+                                1: (text) => {
+                                    return (jsx(Text, { as: "span", tone: "base", children: text }));
+                                },
+                            }, children: idContent }), jsx(Icon, { source: SvgExternalSmallIcon })] }) }) }) }));
+    function getIdContent() {
+        switch (type) {
+            case 'order':
+                return t('Order ID: [1]{{id}}[]', { id });
+            default:
+                return id;
+        }
+    }
+};
+
+const JourneyTitle = ({ content, id, hasMoreSteps, isFetching = false, onLoadMode }) => {
+    const isStickyHeader = !!id;
+    const isShowLoadMore = isStickyHeader && hasMoreSteps && onLoadMode;
+    return (jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsxs(InlineStack, { align: "space-between", gap: "100", children: [jsxs(InlineStack, { gap: "400", children: [jsx(JourneyDateBadge, { content: content }), id && jsx(JourneyIdBadge, { id: id })] }), isShowLoadMore && jsx(JourneyLoadMore, { isFetching: isFetching, onLoadMode: onLoadMode })] }), jsx(JourneyTitleLine, {})] }));
+};
+const JourneyTitleLine = () => {
+    return jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" });
+};
+
+const JourneyGroup = ({ eventsByDate, sectionRefs }) => {
+    return eventsByDate.map(({ dateKey, date, events }, index) => {
+        const isLatestDate = index === 0;
+        return (jsxs("div", { ref: (el) => {
+                if (el)
+                    sectionRefs.current.set(dateKey, el);
+            }, className: "relative", children: [!isLatestDate && jsx(JourneyTitle, { content: date }), events.map((event, eventIndex) => (jsx(JourneyEventRenderer, { event: event }, `${event.eventType}-${event.date}-${eventIndex}`))), jsx(JourneyTimeline, {})] }, dateKey));
+    });
+};
+function JourneyEventRenderer({ event }) {
+    const Component = JOURNEY_EVENT_COMPONENTS_MAP[event.eventType];
+    if (!Component)
+        return null;
+    return jsx(Component, { event: event });
+}
+
+const JourneyContainer = ({ orderId, eventsByDate, hasMoreSteps, isFetchingMoreSteps, onLoadMore, }) => {
+    const firstEventsByDate = eventsByDate[0];
+    const { isMobileView } = useWindowSize();
+    const [currentDate, setCurrentDate] = useState(firstEventsByDate?.date || '');
+    const [showShadow, setShowShadow] = useState(false);
+    const scrollContainerRef = useRef(null);
+    const sectionRefs = useRef(new Map());
+    const scrollableRef = useRef(null);
+    const prevIsFetchingRef = useRef(isFetchingMoreSteps);
+    useEffect(() => {
+        // Find the Polaris Scrollable container after mount
+        if (!isBrowser$1() || !scrollContainerRef.current)
+            return;
+        let element = scrollContainerRef.current.parentElement;
+        // Traverse up to find the scrollable container
+        while (element) {
+            const overflow = getComputedStyle(element).overflowY;
+            if (overflow === 'auto' || overflow === 'scroll') {
+                scrollableRef.current = element;
+                break;
+            }
+            element = element.parentElement;
+        }
+        const scrollableElement = scrollableRef.current;
+        if (!scrollableElement)
+            return;
+        const handleScroll = () => {
+            const scrollTop = scrollableElement.scrollTop;
+            setShowShadow(scrollTop > 10);
+            // Find which date section is currently visible at the top
+            let currentSection = firstEventsByDate;
+            const headerOffset = 20; // Account for fixed header height
+            const scrollableContainerRect = scrollableElement.getBoundingClientRect();
+            for (const dateGroup of eventsByDate) {
+                const element = sectionRefs.current.get(dateGroup.dateKey);
+                if (!element)
+                    continue;
+                const rect = element.getBoundingClientRect();
+                // If section top is above or near the header position
+                if (rect.top - scrollableContainerRect.top <= headerOffset) {
+                    currentSection = dateGroup;
+                }
+            }
+            setCurrentDate(currentSection?.date || firstEventsByDate?.date || '');
+        };
+        scrollableElement.addEventListener('scroll', handleScroll);
+        handleScroll(); // Initial call
+        return () => scrollableElement.removeEventListener('scroll', handleScroll);
+    }, [eventsByDate, firstEventsByDate]);
+    const handleScrollToTop = () => {
+        if (!scrollableRef.current)
+            return;
+        scrollableRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    // Auto-scroll to top when more steps are fetched
+    useEffect(() => {
+        const wasFetching = prevIsFetchingRef.current;
+        const isNowDone = !isFetchingMoreSteps;
+        // If we were fetching and now we're done, scroll to top
+        if (wasFetching && isNowDone) {
+            handleScrollToTop();
+        }
+        // Update ref for next render
+        prevIsFetchingRef.current = isFetchingMoreSteps;
+    }, [isFetchingMoreSteps]);
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "pb-5", style: { maxHeight: isMobileView ? '100vh' : 'calc(100vh - 120px)' }, children: [jsx(GBox, { ariaShadow: showShadow ? 'shadow-outset-200' : undefined, position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsx(JourneyTitle, { content: currentDate, id: orderId, hasMoreSteps: hasMoreSteps, isFetching: isFetchingMoreSteps, onLoadMode: () => {
+                        onLoadMore();
+                        handleScrollToTop();
+                    } }) }), jsx("div", { ref: scrollContainerRef, className: "min-h-[100vh] md:min-h-[calc(100vh-192px)]", children: jsx(JourneyGroup, { eventsByDate: eventsByDate, sectionRefs: sectionRefs }) })] }));
+};
+
+const JourneyTimeline = () => {
+    const journeyItemPaddingInlineStart = 24;
+    const journeyItemTimeWidth = 48;
+    const journeyItemInlineGap = 16;
+    const eventMarkerIconSize = 28;
+    const journeyTimeLineWidth = 2;
+    const timelineLeft = journeyItemPaddingInlineStart +
+        journeyItemTimeWidth +
+        journeyItemInlineGap +
+        eventMarkerIconSize / 2 -
+        journeyTimeLineWidth / 2;
+    return jsx("div", { className: cls('w-[2px] absolute top-5 bottom-7 bg-[#F3F3F3] -z-[1]'), style: { left: timelineLeft } });
+};
+
+const OrderJourneySkeleton = () => {
+    return (jsxs(Scrollable, { scrollbarWidth: "thin", vertical: true, horizontal: true, className: "max-h-[100vh] md:max-h-[calc(100vh-120px)] pb-5", children: [jsx(GBox, { position: "sticky", insetBlockStart: "0", zIndex: "10", background: "bg-fill", children: jsxs(Box, { paddingBlock: "300", paddingInline: "400", position: "relative", children: [jsx(InlineStack, { align: "space-between", gap: "100", children: jsxs(InlineStack, { gap: "400", children: [jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-24", children: jsx(SkeletonBodyText, { lines: 1 }) }) }), jsx("div", { className: "bg-surface-secondary rounded-md px-3 py-1.5", children: jsx("div", { className: "w-40", children: jsx(SkeletonBodyText, { lines: 1 }) }) })] }) }), jsx("div", { className: "absolute top-[50%] right-0 left-0 translate-y-[-50%] h-[1px] bg-border -z-[1]" })] }) }), jsxs("div", { className: "min-h-[100vh] md:min-h-[calc(100vh-120px)] relative mt-4", children: [jsx("div", { className: "w-[2px] absolute top-4 bottom-4 bg-[#F3F3F3] -z-[1]", style: { left: 110 } }), Array.from({ length: 8 }).map((_, index) => (jsx(JourneyEventSkeleton, { isLast: index === 7 }, index)))] })] }));
+};
+const JourneyEventSkeleton = ({ isLast }) => {
+    return (jsx(Box, { paddingInlineStart: "600", children: jsxs(InlineStack, { blockAlign: "start", gap: "400", wrap: false, children: [jsx("div", { className: "w-12 pt-1", children: jsx(SkeletonBodyText, { lines: 1 }) }), jsx("div", { className: "shrink-0 mt-0.5", children: jsx("div", { className: "w-7 h-7 bg-border-secondary rounded-full animate-pulse" }) }), jsxs(Box, { paddingBlockEnd: "400", width: "100%", children: [jsx("div", { className: "mb-2", children: jsx(SkeletonDisplayText, { size: "small" }) }), !isLast ? (jsx("div", { className: "max-w-[70%]", children: jsx(SkeletonBodyText, { lines: Math.random() > 0.5 ? 1 : 2 }) })) : (jsx("div", { className: "max-w-[40%]", children: jsx(SkeletonBodyText, { lines: 1 }) }))] })] }) }));
+};
+
+const GModalOrderJourney = ({ open, onClose, title, orderId, journeyItems, isLoading = false, hasNextPage = false, isFetchingNextPage = false, fetchNextPage, reportCampaign, pageAnalytic, mode, journeySource, onViewOrderDetails, }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    usePreventBodyScroll({ enable: open });
+    const source = useMemo(() => {
+        if (journeySource)
+            return journeySource;
+        if (reportCampaign)
+            return EReportSource.CAMPAIGN;
+        if (pageAnalytic)
+            return EReportSource.PAGE;
+    }, [reportCampaign, pageAnalytic, journeySource]);
+    const filteredCampaignId = reportCampaign?.id;
+    const slicedJourneyItems = useMemo(() => {
+        if (!source)
+            return journeyItems;
+        return sliceJourneyItems({
+            journeyItems,
+            mode,
+            source,
+            pageAnalytic,
+            filteredCampaignId,
+        });
+    }, [journeyItems, mode, source, pageAnalytic, filteredCampaignId]);
+    const isSliced = slicedJourneyItems.length < journeyItems.length;
+    const displayedItems = isExpanded ? journeyItems : slicedJourneyItems;
+    const hasMoreSteps = (!isExpanded && isSliced) || hasNextPage;
+    const handleLoadMore = useCallback(() => {
+        if (!isExpanded && isSliced) {
+            setIsExpanded(true);
+        }
+        else if (hasNextPage) {
+            fetchNextPage?.();
+        }
+    }, [isExpanded, isSliced, hasNextPage, fetchNextPage]);
+    const eventsByDate = useMemo(() => {
+        const grouped = new Map();
+        displayedItems?.forEach((journeyItem) => {
+            const dateKey = formatDateBy('MMMM D', journeyItem.date);
+            if (!grouped.has(dateKey))
+                grouped.set(dateKey, []);
+            grouped.get(dateKey)?.push(journeyItem);
+        });
+        return Array.from(grouped.entries()).map(([date, events]) => ({
+            date,
+            dateKey: date,
+            events: events.map((event) => ({ ...event, filteredCampaignId })),
+        }));
+    }, [displayedItems, filteredCampaignId]);
+    useEffect(() => {
+        if (!open)
+            setIsExpanded(false);
+    }, [open]);
+    if (!orderId)
+        return null;
+    return (jsx(GModal, { open: open, title: title, onClose: onClose, children: jsx(OrderJourneyProvider, { value: { orderId, onViewOrderDetails }, children: isLoading ? (jsx(OrderJourneySkeleton, {})) : (jsx(JourneyContainer, { orderId: orderId, eventsByDate: eventsByDate, hasMoreSteps: hasMoreSteps, isFetchingMoreSteps: isFetchingNextPage, onLoadMore: handleLoadMore })) }) }));
+};
+
 function isBrowser() {
     return typeof window !== 'undefined';
 }
@@ -25835,4 +24974,4 @@ const useStickyFilterBoxProps = ({ id }) => {
     };
 };
 
-export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderListingLatestTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, 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, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useVersionDateTimeFilters };
+export { ANALYTICS_METRIC_TOOLTIP, AnalyticModeSelector, CAMPAIGN_BACKGROUND_MAIN, CHART_MIN_HEIGHT, COMPARE_DATE_TIME_FILTERS_MAP, CardJourneyAnalysis, CardPathAnalysis, CompareDateTimePickerAlias, ConvertMoneyProvider, CurrencySelector, DATE_TIME_COMPARISON_FILTERS, DEFAULT_CURRENCY_ANALYTIC, DEFAULT_CURRENT_PERIOD_LABEL, DEFAULT_PREVIOUS_PERIOD_LABEL, DEFAULT_SELECTED_COLUMNS_FOR_EXPERIMENT, DateTimeFilterInputs, DateTimeFilters, DateTimePickerContext, DateTimePickerProvider, EJourneyEvent, EReportSource, FUNNEL_POPOVER_KEY, GModalOrderJourney, GSelectableMetricChartCard, GTimePicker, IVariantType, MOCK_DATA_PATH_ANALYSIS, MainDateTimePickerAlias, MetricChartProvider, MetricDonutChartCard, ORDER_COLUMN_MAPPING, ORDER_LISTING_COLUMNS, ORDER_LISTING_CONFIG, ORDER_LISTING_DIMENSIONS, ORDER_LISTING_DIMENSION_LAYOUT, ORDER_LISTING_LATEST_COLUMNS_FOR_PAGE, ORDER_LISTING_METRICS, ORDER_LISTING_METRIC_LAYOUTS, OrderJourneyProvider, OrderListingLatestTable, PLACEHOLDER_VALUE$1 as PLACEHOLDER_VALUE, PREVIOUS_PERIOD_FILTER, PathAnalysisConfigProvider, PathAnalysisContext, PathAnalysisProvider, SERIES_COLORS, SORT_ORDER_LISTING_DEFAULT, SingleMetricChartCard, TARGET_CHANNEL, TARGET_DEVICES, TARGET_VISITOR, THUMB_PRODUCT_DEFAULT, TREND_TONE, TimezoneProvider, 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, useConvertMoneyContext, useCurrencyRatesStore, useDateTimeFilter, useDateTimePicker, useDateTimePickerContext, useFunnelChartStore, useGModalOrderJourney, useIsStickyById, useOrderColumnsSelectorStore, useOrderControlStore, useOrderJourneyContext, usePathAnalysisCampaignStore, usePathAnalysisConfig, usePathAnalysisContext, usePathAnalysisStore, useStickyFilterBoxProps, useTimezoneContext, useVersionDateTimeFilters };