@sybilion/uilib 1.2.24 → 1.3.0

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.js

@@ -6,23 +6,19 @@ import 'recharts';
 import '../../../Chart/Chart.context.js';
 import '../../../Chart/Chart.styl.js';
 import { useDebounceCallback } from '../../../../../hooks/useDebounceCallback.js';
-import useElemDrag from '../../../../../hooks/useDragElem.js';
 import { ChevronsLeftRight } from 'lucide-react';
 import S from '../../ChartAreaInteractive.styl.js';
 import { useChartYRange } from '../useChartYRange.js';
 import S$1 from './PinOverlay.styl.js';
 
-function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange, className, }) {
+function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonthChange: _onPreviewMonthChange, className, }) {
     const { chartData } = baseChartProps;
     const chartRef = useRef(null);
     const pinRef = useRef(null);
     const pinPlaceholderRef = useRef(null);
     const pinContainerRef = useRef(null);
-    const [isDraggingPin, setIsDraggingPin] = useState(false);
-    const [isPinAnimating, setIsPinAnimating] = useState(true);
     const [isPinHovered, setIsPinHovered] = useState(false);
     const pinPosRef = useRef(0);
-    const containerRectRef = useRef(null);
     const currPinMonthRef = useRef(pinMonth);
     const debouncedOnPinMonthChange = useDebounceCallback((...args) => onPinMonthChange?.(args[0]), 500, [onPinMonthChange]);
     const { yMin, yMax } = useChartYRange({
@@ -38,7 +34,6 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             pinPlaceholderRef.current.style.left = `${position}%`;
         }
     };
-    // Get full month and year for pin position to send to parent component
     const getPinMonthAndYear = (position) => {
         if (!chartData.length)
             return null;
@@ -54,18 +49,15 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             return `${month} ${year}`;
         }
     };
-    // Handle chart click to move pin to specific position
     const snapPinToPosition = (eventX, needMonthUpdate = true, immediateMonthUpdate = false) => {
         if (!pinContainerRef.current || !chartData.length)
             return;
         const pinContainerRect = pinContainerRef.current.getBoundingClientRect();
         const effectiveLeft = pinContainerRect.left;
         const effectiveWidth = pinContainerRect.width;
-        // Calculate relative position within plotted area
         const relativeX = eventX - effectiveLeft;
         const rawPercentage = effectiveWidth > 0 ? (relativeX / effectiveWidth) * 100 : 0;
         const percentage = Math.max(0, Math.min(100, isNaN(rawPercentage) ? 0 : rawPercentage));
-        // Snap to nearest data point
         const totalPoints = chartData.length;
         if (totalPoints > 1) {
             const nearestIndex = Math.round((percentage / 100) * (totalPoints - 1));
@@ -73,13 +65,11 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             const snappedPercentage = (clampedIndex / (totalPoints - 1)) * 100;
             setPinPosition(isNaN(snappedPercentage) ? 0 : snappedPercentage);
             if (needMonthUpdate) {
-                // Update news for all months (historical and forecast)
                 const monthAndYear = getPinMonthAndYear();
                 if (monthAndYear) {
                     const isNewMonth = monthAndYear !== currPinMonthRef.current;
                     if (isNewMonth)
                         currPinMonthRef.current = monthAndYear;
-                    // When immediate (e.g. dragEnd), always notify parent so showFutureOutlook is correct
                     if (immediateMonthUpdate) {
                         onPinMonthChange?.(monthAndYear);
                     }
@@ -90,11 +80,9 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             }
         }
     };
-    // Update pin position when pinMonth prop changes
     useEffect(() => {
         if (!pinMonth || !chartData.length)
             return;
-        // Find the data point index for the given month
         const dataPointIndex = chartData.findIndex(point => {
             const date = new Date(point.date);
             const month = date.toLocaleDateString('en-US', { month: 'short' });
@@ -109,57 +97,16 @@ function PinOverlay({ baseChartProps, pinMonth, onPinMonthChange, onPreviewMonth
             currPinMonthRef.current = pinMonth;
         }
     }, [pinMonth, chartData]);
-    useElemDrag({
-        elem: [chartRef],
-        onDragStart: () => {
-            setIsDraggingPin(true);
-            containerRectRef.current =
-                pinContainerRef.current?.getBoundingClientRect() || null;
-        },
-        onDrag: (delta) => {
-            if (pinRef.current) {
-                const containerRect = containerRectRef.current;
-                if (!containerRect)
-                    return;
-                const pinCurrentLeft = (pinPosRef.current / 100) * containerRect.width;
-                const leftLimit = -pinCurrentLeft;
-                const rightLimit = containerRect.width - pinCurrentLeft;
-                const clampedDeltaX = Math.max(leftLimit, Math.min(rightLimit, delta.x));
-                setIsPinAnimating(false);
-                pinRef.current.style.transform = `translateX(${clampedDeltaX}px)`;
-                // Calculate preview month based on current drag position
-                if (onPreviewMonthChange && chartData.length > 0) {
-                    const newPositionPixels = pinCurrentLeft + clampedDeltaX;
-                    const newPercentage = (newPositionPixels / containerRect.width) * 100;
-                    const clampedPercentage = Math.max(0, Math.min(100, newPercentage));
-                    const previewMonth = getPinMonthAndYear(clampedPercentage);
-                    if (previewMonth) {
-                        onPreviewMonthChange(previewMonth);
-                    }
-                }
-            }
-        },
-        onDragEnd: (e) => {
-            setIsDraggingPin(false);
-            setTimeout(() => setIsPinAnimating(true), 200);
-            if (pinRef.current)
-                pinRef.current.style.transform = '';
-            // Snap first so onPinMonthChange runs before we clear preview (avoids showFutureOutlook fallback)
-            snapPinToPosition(e.clientX, true, true);
-            if (onPreviewMonthChange) {
-                onPreviewMonthChange(undefined);
-            }
-        },
-    });
-    const onPointerDown = (e) => {
-        if (e.target.tagName !== 'svg')
+    const onChartClick = (e) => {
+        if (e.button !== 0)
+            return;
+        const target = e.target;
+        if (!target.closest?.('svg'))
             return;
         snapPinToPosition(e.clientX, true, false);
     };
     const overlay = (jsxs(Fragment, { children: [jsx("div", { className: cn(S.overlay, S$1.pinContainer), ref: pinContainerRef, children: jsx("div", { className: S$1.pinLineBase, style: { left: `${pinPosRef.current}%` }, ref: pinRef, children: jsx("div", { className: S$1.pinButton, "aria-label": "News pin", title: `Current month: ${getPinMonthAndYear() || 'Loading...'}`, children: jsx(ChevronsLeftRight, { className: S$1.pinIcon, "aria-hidden": "true" }) }) }) }), jsx("div", { className: S$1.pinPlaceholder, style: { left: `${pinPosRef.current}%` }, ref: pinPlaceholderRef, onPointerEnter: () => setIsPinHovered(true), onPointerLeave: () => setIsPinHovered(false) })] }));
-    return (jsx("div", { className: cn(className, S$1.root, isDraggingPin && S$1.pinDragging, isPinAnimating && S$1.pinAnimating, isPinHovered && S$1.pinHovered), onPointerDown: onPointerDown, 
-        // onClick={e => snapPinToPosition(e.clientX)}
-        ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
+    return (jsx("div", { className: cn(className, S$1.root, S$1.pinAnimating, isPinHovered && S$1.pinHovered), onClick: onChartClick, ref: chartRef, children: jsx(BaseChartWrapper, { ...baseChartProps, yMin: yMin, yMax: yMax, autoScaleYAxis: false, overlayElements: overlay }) }));
 }
 
 export { PinOverlay };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background-alpha-700)}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:grab;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinDragging__gu3xp .PinOverlay_pinButton__cnV1K{transition:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:grab;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
-var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinDragging":"PinOverlay_pinDragging__gu3xp","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
+var css_248z = ".PinOverlay_root__RUZxO{touch-action:pan-y}.PinOverlay_pinContainer__6sc1J{height:calc(var(--chart-height) - 70px);inset:0;margin:var(--p-5) var(--p-8) var(--p-24) var(--p-12);pointer-events:none;position:absolute;touch-action:pan-y;transition:transform .2s ease-out,z-index 0ms;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinContainer__6sc1J{z-index:10}.PinOverlay_pinLineBase__0BWsD{height:100%;pointer-events:none;position:absolute;width:3px}.PinOverlay_pinLineBase__0BWsD:before{border-radius:50%;box-shadow:0 4px 6px -1px var(--shadow-color);content:\"\";height:36px;left:-16px;position:absolute;top:-8px;width:36px;z-index:-1}.PinOverlay_pinLineBase__0BWsD:after{background-color:var(--background);border-radius:12px;bottom:0;content:\"\";left:0;position:absolute;top:0;transform:translate3d(.5px,0,0);transition:background-color .3s ease-out;width:100%;z-index:1}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinLineBase__0BWsD{transition:left .3s ease-out}.PinOverlay_pinButton__cnV1K{position:absolute;--offset:-8px;align-items:center;background-color:var(--background);border-radius:9999px;cursor:pointer;display:flex;justify-content:center;left:-8px;left:var(--offset);margin-left:-8px;margin-left:var(--offset);padding:10px;pointer-events:auto;top:-18px;touch-action:none;transition:transform .2s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none}.PinOverlay_pinHovered__cGPjN .PinOverlay_pinButton__cnV1K{transform:scale(1.1)}.PinOverlay_pinButton__cnV1K:active{cursor:grabbing}.PinOverlay_pinIcon__s7Ze0{color:var(--foreground);height:16px;width:16px}.PinOverlay_pinPlaceholder__JhKcQ{cursor:pointer;height:72px;margin-left:-40px;margin-top:-40px;pointer-events:auto;position:absolute;top:var(--p-5);touch-action:none;width:72px;z-index:20}.PinOverlay_pinAnimating__5XMJG .PinOverlay_pinPlaceholder__JhKcQ{transition:left .3s ease-out}.PinOverlay_pinPlaceholder__JhKcQ:active{cursor:grabbing}";
+var S = {"root":"PinOverlay_root__RUZxO","pinContainer":"PinOverlay_pinContainer__6sc1J","pinHovered":"PinOverlay_pinHovered__cGPjN","pinLineBase":"PinOverlay_pinLineBase__0BWsD","pinAnimating":"PinOverlay_pinAnimating__5XMJG","pinButton":"PinOverlay_pinButton__cnV1K","pinIcon":"PinOverlay_pinIcon__s7Ze0","pinPlaceholder":"PinOverlay_pinPlaceholder__JhKcQ"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/ChartAreaInteractive/overlays/ThresholdsOverlay/ThresholdsOverlay.hooks.js

@@ -70,6 +70,7 @@ function useThresholdButton({ lineRef, overlayContainerRef, initialValue, minVal
         onValueChangeThrottled(clampedValue);
     }, [clientYToValue, valueToPercent, minValue, maxValue]);
     const handleDragStart = useCallback((e) => {
+        e.stopPropagation();
         initialValueRef.current = initialValue;
         startYRef.current = e.clientY;
         setIsDragging(true);

package/dist/esm/components/ui/ChartAreaInteractive/overlays/useChartYRange.js

@@ -15,11 +15,9 @@ function useChartYRange({ baseChartProps, chartData, disableRescaleWhenQuantileC
             Object.entries(point).forEach(([key, value]) => {
                 if (key === 'date')
                     return;
-                // When selectedForecastId is provided, scale only from selected forecast + its quantile band
-                // (exclude historical, other forecasts, and other forecasts' quantile values)
+                // When selectedForecastId is provided, scale from historical + selected forecast + its
+                // quantile band (exclude other forecasts and their quantile values only).
                 if (forecastId !== undefined) {
-                    if (key === 'historical')
-                        return;
                     if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
                         return;
                     // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.js

@@ -32,7 +32,7 @@ function ChatSelector({ id, className, onChatDeleted, }) {
             return (firstMessage.text.slice(0, 30) +
                 (firstMessage.text.length > 30 ? '...' : ''));
         }
-        return `Chat ${chat.session_id}`;
+        return 'New chat';
     };
     return (jsxs("div", { className: S.wrapper, children: [jsx("div", { className: S.selectGrow, children: jsxs(Select, { variant: "clear", value: currentChatId?.toString() ?? '', onValueChange: handleValueChange, children: [jsx(SelectTrigger, { size: "sm", className: className ? cn(S.selectTrigger, className) : S.selectTrigger, children: jsx(SelectValue, { placeholder: "Select chat" }) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "new", children: "+ New Chat" }), chats.map(chat => (jsx(SelectItem, { value: chat.session_id.toString(), selected: chat.session_id === currentChatId, children: getChatDisplayName(chat) }, chat.session_id)))] })] }) }), jsx(Button, { type: "button", variant: "ghost", size: "sm", className: S.deleteBtn, "aria-label": "Delete chat", disabled: !currentChatId || chats.length === 0, onClick: handleDeleteChat, children: jsx(Trash2Icon, { size: 16 }) })] }));
 }

package/dist/esm/components/ui/Chat/ChatSheet/ChatSelector.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:.3}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatSelector_wrapper__8Z4wN{align-items:center;display:flex;gap:var(--p-2);min-width:200px;z-index:1000}.ChatSelector_selectGrow__bGR0A{flex:1;min-width:0}.ChatSelector_selectTrigger__DASfc{width:100%}.ChatSelector_deleteBtn__oJ-9b{border-radius:50px;flex-shrink:0;opacity:0;pointer-events:none}.ChatSelector_wrapper__8Z4wN:hover .ChatSelector_deleteBtn__oJ-9b{opacity:1;pointer-events:auto}";
 var S = {"wrapper":"ChatSelector_wrapper__8Z4wN","selectGrow":"ChatSelector_selectGrow__bGR0A","selectTrigger":"ChatSelector_selectTrigger__DASfc","deleteBtn":"ChatSelector_deleteBtn__oJ-9b"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/DropdownMenu/DropdownMenu.js

@@ -13,8 +13,8 @@ function DropdownMenuPortal({ ...props }) {
 function DropdownMenuTrigger({ ...props }) {
     return (jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
 }
-function DropdownMenuContent({ className, sideOffset = 4, elevation = 'sm', ...props }) {
-    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn(S.content, S[`elevation-${elevation}`], className), ...props }) }));
+function DropdownMenuContent({ className, sideOffset = 4, collisionPadding = 8, elevation = 'sm', ...props }) {
+    return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(S.content, S[`elevation-${elevation}`], className), ...props }) }));
 }
 function DropdownMenuGroup({ ...props }) {
     return (jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
@@ -46,8 +46,8 @@ function DropdownMenuSub({ ...props }) {
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
     return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn(S.subTrigger, className), ...props, children: [children, jsx(CaretRight, { className: "ml-auto size-4" })] }));
 }
-function DropdownMenuSubContent({ className, ...props }) {
-    return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn(S.subContent, className), ...props }));
+function DropdownMenuSubContent({ className, collisionPadding = 8, ...props }) {
+    return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", collisionPadding: collisionPadding, className: cn(S.subContent, className), ...props }));
 }
 
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/esm/components/ui/TimeRangeControls/TimeRangeControls.js

@@ -5,9 +5,14 @@ import { ToggleGroup, ToggleGroupItem } from '../ToggleGroup/ToggleGroup.js';
 import { TIME_RANGES } from './TimeRangeControls.constants.js';
 import S from './TimeRangeControls.styl.js';
 
-const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: timeRange, onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
+function toggleValueForTimeRange(timeRange) {
+    return TIME_RANGES.includes(timeRange)
+        ? timeRange
+        : '';
+}
+const TimeRangeControls = memo(({ timeRange, onTimeRangeChange, loading }) => (jsx("div", { className: S.timeRangeContainer, children: jsx(ToggleGroup, { type: "single", value: toggleValueForTimeRange(timeRange), onValueChange: onTimeRangeChange, variant: "outline", disabled: loading, className: S.timeRangeToggleGroup, children: TIME_RANGES.map(range => (jsx(ToggleGroupItem, { value: range, className: S.timeRangeToggleItem, children: range }, range))) }) })));
 TimeRangeControls.displayName = 'TimeRangeControls';
-const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: timeRange, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
+const TimeRangeSelect = memo(({ timeRange, onTimeRangeChange, loading, }) => (jsxs(Select, { value: toggleValueForTimeRange(timeRange) || undefined, onValueChange: onTimeRangeChange, disabled: loading, children: [jsx(SelectTrigger, { className: S.timeRangeSelectTrigger, size: "sm", "aria-label": "Select a value", children: jsx(SelectValue, { placeholder: "1 year" }) }), jsx(SelectContent, { className: S.timeRangeSelectContent, children: TIME_RANGES.map(range => (jsx(SelectItem, { value: range, className: S.timeRangeSelectItem, children: range }, range))) })] })));
 TimeRangeSelect.displayName = 'TimeRangeSelect';
 
 export { TimeRangeControls, TimeRangeSelect };

package/dist/esm/components/ui/WorldMap/WorldMap.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './WorldMap.styl.js';
+import mapBgUrl from './map.svg.js';
+
+function WorldMap({ className }) {
+    const src = mapBgUrl;
+    return (jsx("img", { alt: "", className: cn(S.worldMap, className), decoding: "async", draggable: false, src: src }));
+}
+
+export { WorldMap };

package/dist/esm/components/ui/WorldMap/WorldMap.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".WorldMap_worldMap__XTiex{aspect-ratio:623.2/341.276;display:block;height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}";
+var S = {"worldMap":"WorldMap_worldMap__XTiex"};
+styleInject(css_248z);
+
+export { S as default };