@perses-dev/components 0.55.0 → 0.56.0-beta.0

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -15,7 +16,7 @@ import { Box, MenuItem, Popover, Select, IconButton, TextField, Stack } from "@m
 import { isRelativeTimeRange, toAbsoluteTimeRange } from "@perses-dev/spec";
 import Calendar from "mdi-material-ui/Calendar";
 import EarthIcon from "mdi-material-ui/Earth";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useTimeZone } from "../context/index.js";
 import { getTimeZoneOptions } from "../model/timeZoneOption.js";
 import { SettingsAutocomplete } from "../SettingsAutocomplete/index.js";
@@ -27,230 +28,600 @@ import { buildCustomTimeOption, formatTimeRange } from "./utils.js";
  * This includes relative shortcuts and the ability to pick absolute start and end times.
  * @param props
  * @constructor
- */ export function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone: timeZoneProp, timeZoneOptions, onTimeZoneChange }) {
+ */ export function TimeRangeSelector(t0) {
+    const $ = _c(101);
+    const { value, timeOptions, onChange, height, showCustomTimeRange: t1, timeZone: timeZoneProp, timeZoneOptions, onTimeZoneChange } = t0;
+    const showCustomTimeRange = t1 === undefined ? true : t1;
     const { timeZone: ctxTimeZone } = useTimeZone();
     const timeZone = timeZoneProp ?? ctxTimeZone;
     const [anchorEl, setAnchorEl] = useState(null);
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
-    const convertedTimeRange = useMemo(()=>{
-        return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;
-    }, [
-        value
-    ]);
-    const lastOption = useMemo(()=>buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone), [
-        value,
-        timeZone
-    ]);
+    let t2;
+    if ($[0] !== value) {
+        t2 = isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;
+        $[0] = value;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+    const convertedTimeRange = t2;
+    const t3 = isRelativeTimeRange(value) ? undefined : value;
+    let t4;
+    if ($[2] !== t3 || $[3] !== timeZone) {
+        t4 = buildCustomTimeOption(t3, timeZone);
+        $[2] = t3;
+        $[3] = timeZone;
+        $[4] = t4;
+    } else {
+        t4 = $[4];
+    }
+    const lastOption = t4;
     const [open, setOpen] = useState(false);
-    const tzOptions = timeZoneOptions ?? getTimeZoneOptions();
+    let t5;
+    if ($[5] !== timeZoneOptions) {
+        t5 = timeZoneOptions ?? getTimeZoneOptions();
+        $[5] = timeZoneOptions;
+        $[6] = t5;
+    } else {
+        t5 = $[6];
+    }
+    const tzOptions = t5;
     const [tzAnchorEl, setTzAnchorEl] = useState(null);
     const tzOpen = Boolean(tzAnchorEl);
-    const tzLabel = tzOptions.find((o)=>o.value === timeZone)?.display ?? timeZone;
-    const tzOffset = getGMTOffset(timeZone);
-    const localOffset = getGMTOffset('local');
-    const tzAutocompleteOptions = tzOptions.map((o)=>({
-            id: o.value,
-            label: o.display
-        }));
-    const tzAutocompleteValue = tzAutocompleteOptions.find((option)=>option.id === timeZone);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsx(Popover, {
-                anchorEl: tzAnchorEl,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                },
-                open: tzOpen,
-                onClose: ()=>setTzAnchorEl(null),
-                sx: (theme)=>({
-                        padding: theme.spacing(1)
+    let t6;
+    if ($[7] !== timeZone || $[8] !== tzOptions) {
+        t6 = tzOptions.find((o)=>o.value === timeZone)?.display ?? timeZone;
+        $[7] = timeZone;
+        $[8] = tzOptions;
+        $[9] = t6;
+    } else {
+        t6 = $[9];
+    }
+    const tzLabel = t6;
+    let t7;
+    if ($[10] !== timeZone) {
+        t7 = getGMTOffset(timeZone);
+        $[10] = timeZone;
+        $[11] = t7;
+    } else {
+        t7 = $[11];
+    }
+    const tzOffset = t7;
+    let t8;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t8 = getGMTOffset("local");
+        $[12] = t8;
+    } else {
+        t8 = $[12];
+    }
+    const localOffset = t8;
+    let t9;
+    let tzAutocompleteOptions;
+    if ($[13] !== timeZone || $[14] !== tzOptions) {
+        tzAutocompleteOptions = tzOptions.map(_temp);
+        let t10;
+        if ($[17] !== timeZone) {
+            t10 = (option)=>option.id === timeZone;
+            $[17] = timeZone;
+            $[18] = t10;
+        } else {
+            t10 = $[18];
+        }
+        t9 = tzAutocompleteOptions.find(t10);
+        $[13] = timeZone;
+        $[14] = tzOptions;
+        $[15] = t9;
+        $[16] = tzAutocompleteOptions;
+    } else {
+        t9 = $[15];
+        tzAutocompleteOptions = $[16];
+    }
+    const tzAutocompleteValue = t9;
+    let t10;
+    if ($[19] !== timeOptions || $[20] !== timeZone || $[21] !== value) {
+        t10 = timeOptions.find((opt)=>formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ?? formatTimeRange(value, timeZone);
+        $[19] = timeOptions;
+        $[20] = timeZone;
+        $[21] = value;
+        $[22] = t10;
+    } else {
+        t10 = $[22];
+    }
+    const displayValue = t10;
+    let t11;
+    let t12;
+    if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = {
+            vertical: "bottom",
+            horizontal: "right"
+        };
+        t12 = {
+            vertical: "top",
+            horizontal: "right"
+        };
+        $[23] = t11;
+        $[24] = t12;
+    } else {
+        t11 = $[23];
+        t12 = $[24];
+    }
+    let t13;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+        t13 = ()=>setTzAnchorEl(null);
+        $[25] = t13;
+    } else {
+        t13 = $[25];
+    }
+    let t14;
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = {
+            p: 1,
+            minWidth: 260
+        };
+        $[26] = t14;
+    } else {
+        t14 = $[26];
+    }
+    let t15;
+    if ($[27] !== onTimeZoneChange || $[28] !== tzOptions) {
+        t15 = (_e, option_0)=>{
+            if (option_0) {
+                const selected = tzOptions.find((o_1)=>o_1.value === option_0.id);
+                if (selected) {
+                    onTimeZoneChange?.(selected);
+                }
+            }
+            setTzAnchorEl(null);
+        };
+        $[27] = onTimeZoneChange;
+        $[28] = tzOptions;
+        $[29] = t15;
+    } else {
+        t15 = $[29];
+    }
+    let t16;
+    if ($[30] !== t15 || $[31] !== tzAutocompleteOptions || $[32] !== tzAutocompleteValue) {
+        t16 = /*#__PURE__*/ _jsx(Box, {
+            sx: t14,
+            onClick: _temp3,
+            children: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                options: tzAutocompleteOptions,
+                value: tzAutocompleteValue,
+                onChange: t15,
+                disableClearable: true,
+                renderInput: _temp4
+            })
+        });
+        $[30] = t15;
+        $[31] = tzAutocompleteOptions;
+        $[32] = tzAutocompleteValue;
+        $[33] = t16;
+    } else {
+        t16 = $[33];
+    }
+    let t17;
+    if ($[34] !== t16 || $[35] !== tzAnchorEl || $[36] !== tzOpen) {
+        t17 = /*#__PURE__*/ _jsx(Popover, {
+            anchorEl: tzAnchorEl,
+            anchorOrigin: t11,
+            transformOrigin: t12,
+            open: tzOpen,
+            onClose: t13,
+            sx: _temp2,
+            children: t16
+        });
+        $[34] = t16;
+        $[35] = tzAnchorEl;
+        $[36] = tzOpen;
+        $[37] = t17;
+    } else {
+        t17 = $[37];
+    }
+    let t18;
+    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+        t18 = {
+            vertical: "bottom",
+            horizontal: "center"
+        };
+        $[38] = t18;
+    } else {
+        t18 = $[38];
+    }
+    let t19;
+    if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+        t19 = ()=>setShowCustomDateSelector(false);
+        $[39] = t19;
+    } else {
+        t19 = $[39];
+    }
+    let t20;
+    if ($[40] !== onChange) {
+        t20 = (value_0)=>{
+            onChange(value_0);
+            setShowCustomDateSelector(false);
+            setOpen(false);
+        };
+        $[40] = onChange;
+        $[41] = t20;
+    } else {
+        t20 = $[41];
+    }
+    let t21;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = ()=>setShowCustomDateSelector(false);
+        $[42] = t21;
+    } else {
+        t21 = $[42];
+    }
+    let t22;
+    if ($[43] !== convertedTimeRange || $[44] !== t20 || $[45] !== timeZone) {
+        t22 = /*#__PURE__*/ _jsx(DateTimeRangePicker, {
+            initialTimeRange: convertedTimeRange,
+            onChange: t20,
+            onCancel: t21,
+            timeZone: timeZone
+        });
+        $[43] = convertedTimeRange;
+        $[44] = t20;
+        $[45] = timeZone;
+        $[46] = t22;
+    } else {
+        t22 = $[46];
+    }
+    let t23;
+    if ($[47] !== anchorEl || $[48] !== showCustomDateSelector || $[49] !== t22) {
+        t23 = /*#__PURE__*/ _jsx(Popover, {
+            anchorEl: anchorEl,
+            anchorOrigin: t18,
+            open: showCustomDateSelector,
+            onClose: t19,
+            sx: _temp5,
+            children: t22
+        });
+        $[47] = anchorEl;
+        $[48] = showCustomDateSelector;
+        $[49] = t22;
+        $[50] = t23;
+    } else {
+        t23 = $[50];
+    }
+    let t24;
+    if ($[51] !== timeZone || $[52] !== value) {
+        t24 = formatTimeRange(value, timeZone);
+        $[51] = timeZone;
+        $[52] = value;
+        $[53] = t24;
+    } else {
+        t24 = $[53];
+    }
+    let t25;
+    if ($[54] !== open) {
+        t25 = ()=>setOpen(!open);
+        $[54] = open;
+        $[55] = t25;
+    } else {
+        t25 = $[55];
+    }
+    let t26;
+    if ($[56] !== displayValue || $[57] !== tzOffset) {
+        t26 = ()=>/*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        children: displayValue
                     }),
-                children: /*#__PURE__*/ _jsx(Box, {
-                    sx: {
-                        p: 1,
-                        minWidth: 260
-                    },
-                    onClick: (e)=>{
-                        e.stopPropagation();
-                    },
-                    children: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-                        options: tzAutocompleteOptions,
-                        value: tzAutocompleteValue,
-                        onChange: (_e, option)=>{
-                            if (option) {
-                                const selected = tzOptions.find((o)=>o.value === option.id);
-                                if (selected) onTimeZoneChange?.(selected);
-                            }
-                            setTzAnchorEl(null);
+                    tzOffset !== localOffset && /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            typography: "caption",
+                            color: "text.secondary"
                         },
-                        disableClearable: true,
-                        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                                ...params,
-                                placeholder: "Search timezones",
-                                size: "small"
-                            })
+                        children: [
+                            "· ",
+                            tzOffset
+                        ]
                     })
+                ]
+            });
+        $[56] = displayValue;
+        $[57] = tzOffset;
+        $[58] = t26;
+    } else {
+        t26 = $[58];
+    }
+    const t27 = `Select time range. Currently set to ${displayValue}`;
+    let t28;
+    if ($[59] !== t27) {
+        t28 = {
+            "aria-label": t27
+        };
+        $[59] = t27;
+        $[60] = t28;
+    } else {
+        t28 = $[60];
+    }
+    let t29;
+    let t30;
+    if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+        t29 = {
+            marginTop: "1px",
+            transform: "none"
+        };
+        t30 = {
+            paddingRight: "36px"
+        };
+        $[61] = t29;
+        $[62] = t30;
+    } else {
+        t29 = $[61];
+        t30 = $[62];
+    }
+    let t31;
+    if ($[63] !== height) {
+        t31 = {
+            ".MuiSelect-icon": t29,
+            ".MuiSelect-select.MuiSelect-outlined.MuiInputBase-input": t30,
+            ".MuiSelect-select": height ? {
+                lineHeight: height,
+                paddingY: 0
+            } : {}
+        };
+        $[63] = height;
+        $[64] = t31;
+    } else {
+        t31 = $[64];
+    }
+    let t32;
+    if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+        t32 = {
+            cursor: "default",
+            "&:hover": {
+                backgroundColor: "transparent"
+            },
+            py: 0.5,
+            px: 1
+        };
+        $[65] = t32;
+    } else {
+        t32 = $[65];
+    }
+    let t33;
+    if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+        t33 = {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            justifyContent: "space-between"
+        };
+        $[66] = t33;
+    } else {
+        t33 = $[66];
+    }
+    let t34;
+    if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+        t34 = {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start"
+        };
+        $[67] = t34;
+    } else {
+        t34 = $[67];
+    }
+    let t35;
+    if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+        t35 = /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                typography: "subtitle1"
+            },
+            children: "Time Range"
+        });
+        $[68] = t35;
+    } else {
+        t35 = $[68];
+    }
+    let t36;
+    if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
+        t36 = {
+            color: "text.secondary",
+            typography: "caption",
+            mt: 0.25
+        };
+        $[69] = t36;
+    } else {
+        t36 = $[69];
+    }
+    let t37;
+    if ($[70] !== tzLabel) {
+        t37 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t34,
+            children: [
+                t35,
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: t36,
+                    children: [
+                        "Timezone: ",
+                        tzLabel
+                    ]
                 })
-            }),
-            /*#__PURE__*/ _jsx(Popover, {
-                anchorEl: anchorEl,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
+            ]
+        });
+        $[70] = tzLabel;
+        $[71] = t37;
+    } else {
+        t37 = $[71];
+    }
+    let t38;
+    if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+        t38 = {
+            display: "flex",
+            alignItems: "center",
+            pr: 1,
+            ml: 1.5
+        };
+        $[72] = t38;
+    } else {
+        t38 = $[72];
+    }
+    let t39;
+    if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+        t39 = /*#__PURE__*/ _jsx(Box, {
+            sx: t38,
+            children: /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                "aria-label": "Select timezone",
+                onClick: (e_1)=>{
+                    e_1.preventDefault();
+                    e_1.stopPropagation();
+                    setTzAnchorEl(e_1.currentTarget);
                 },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ _jsx(DateTimeRangePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (value)=>{
-                        onChange(value);
-                        setShowCustomDateSelector(false);
-                        setOpen(false);
-                    },
-                    onCancel: ()=>setShowCustomDateSelector(false),
-                    timeZone: timeZone
+                children: /*#__PURE__*/ _jsx(EarthIcon, {
+                    fontSize: "small"
                 })
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                ref: setAnchorEl,
-                children: /*#__PURE__*/ _jsxs(Select, {
-                    open: open,
-                    value: formatTimeRange(value, timeZone),
-                    onClick: ()=>setOpen(!open),
-                    IconComponent: Calendar,
-                    renderValue: ()=>/*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            alignItems: "center",
-                            spacing: 1,
-                            children: [
-                                /*#__PURE__*/ _jsx("span", {
-                                    children: timeOptions.find((opt)=>formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ?? formatTimeRange(value, timeZone)
-                                }),
-                                tzOffset !== localOffset && /*#__PURE__*/ _jsxs(Box, {
-                                    sx: {
-                                        typography: 'caption',
-                                        color: 'text.secondary'
-                                    },
-                                    children: [
-                                        "· ",
-                                        tzOffset
-                                    ]
-                                })
-                            ]
-                        }),
-                    inputProps: {
-                        'aria-label': `Select time range. Currently set to ${value}`
-                    },
-                    sx: {
-                        '.MuiSelect-icon': {
-                            marginTop: '1px',
-                            transform: 'none'
-                        },
-                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
-                            paddingRight: '36px'
-                        },
-                        '.MuiSelect-select': height ? {
-                            lineHeight: height,
-                            paddingY: 0
-                        } : {}
+            })
+        });
+        $[73] = t39;
+    } else {
+        t39 = $[73];
+    }
+    let t40;
+    if ($[74] !== t37) {
+        t40 = /*#__PURE__*/ _jsx(MenuItem, {
+            disableRipple: true,
+            onClick: _temp6,
+            sx: t32,
+            children: /*#__PURE__*/ _jsxs(Box, {
+                sx: t33,
+                children: [
+                    t37,
+                    t39
+                ]
+            })
+        });
+        $[74] = t37;
+        $[75] = t40;
+    } else {
+        t40 = $[75];
+    }
+    let t41;
+    if ($[76] !== onChange || $[77] !== timeOptions || $[78] !== timeZone) {
+        let t42;
+        if ($[80] !== onChange || $[81] !== timeZone) {
+            t42 = (item, idx)=>/*#__PURE__*/ _jsx(MenuItem, {
+                    value: formatTimeRange(item.value, timeZone),
+                    onClick: ()=>{
+                        onChange(item.value);
                     },
-                    children: [
-                        /*#__PURE__*/ _jsx(MenuItem, {
-                            disableRipple: true,
-                            onClick: (e)=>{
-                                e.preventDefault();
-                                e.stopPropagation();
-                            },
-                            sx: {
-                                cursor: 'default',
-                                '&:hover': {
-                                    backgroundColor: 'transparent'
-                                },
-                                py: 0.5,
-                                px: 1
-                            },
-                            children: /*#__PURE__*/ _jsxs(Box, {
-                                sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    width: '100%',
-                                    justifyContent: 'space-between'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Box, {
-                                        sx: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            alignItems: 'flex-start'
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Box, {
-                                                sx: {
-                                                    typography: 'subtitle1'
-                                                },
-                                                children: "Time Range"
-                                            }),
-                                            /*#__PURE__*/ _jsxs(Box, {
-                                                sx: {
-                                                    color: 'text.secondary',
-                                                    typography: 'caption',
-                                                    mt: 0.25
-                                                },
-                                                children: [
-                                                    "Timezone: ",
-                                                    tzLabel
-                                                ]
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(Box, {
-                                        sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            pr: 1,
-                                            ml: 1.5
-                                        },
-                                        children: /*#__PURE__*/ _jsx(IconButton, {
-                                            size: "small",
-                                            "aria-label": "Select timezone",
-                                            onClick: (e)=>{
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                setTzAnchorEl(e.currentTarget);
-                                            },
-                                            children: /*#__PURE__*/ _jsx(EarthIcon, {
-                                                fontSize: "small"
-                                            })
-                                        })
-                                    })
-                                ]
-                            })
-                        }),
-                        timeOptions.map((item, idx)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                value: formatTimeRange(item.value, timeZone),
-                                onClick: ()=>{
-                                    onChange(item.value);
-                                },
-                                children: item.display
-                            }, idx)),
-                        showCustomTimeRange && /*#__PURE__*/ _jsx(MenuItem, {
-                            value: formatTimeRange(lastOption.value, timeZone),
-                            onClick: ()=>setShowCustomDateSelector(true),
-                            children: lastOption.display
-                        })
-                    ]
-                })
+                    children: item.display
+                }, idx);
+            $[80] = onChange;
+            $[81] = timeZone;
+            $[82] = t42;
+        } else {
+            t42 = $[82];
+        }
+        t41 = timeOptions.map(t42);
+        $[76] = onChange;
+        $[77] = timeOptions;
+        $[78] = timeZone;
+        $[79] = t41;
+    } else {
+        t41 = $[79];
+    }
+    let t42;
+    if ($[83] !== lastOption || $[84] !== showCustomTimeRange || $[85] !== timeZone) {
+        t42 = showCustomTimeRange && /*#__PURE__*/ _jsx(MenuItem, {
+            value: formatTimeRange(lastOption.value, timeZone),
+            onClick: ()=>setShowCustomDateSelector(true),
+            children: lastOption.display
+        });
+        $[83] = lastOption;
+        $[84] = showCustomTimeRange;
+        $[85] = timeZone;
+        $[86] = t42;
+    } else {
+        t42 = $[86];
+    }
+    let t43;
+    if ($[87] !== open || $[88] !== t24 || $[89] !== t25 || $[90] !== t26 || $[91] !== t28 || $[92] !== t31 || $[93] !== t40 || $[94] !== t41 || $[95] !== t42) {
+        t43 = /*#__PURE__*/ _jsx(Box, {
+            ref: setAnchorEl,
+            children: /*#__PURE__*/ _jsxs(Select, {
+                open: open,
+                value: t24,
+                onClick: t25,
+                IconComponent: Calendar,
+                renderValue: t26,
+                inputProps: t28,
+                sx: t31,
+                children: [
+                    t40,
+                    t41,
+                    t42
+                ]
             })
-        ]
+        });
+        $[87] = open;
+        $[88] = t24;
+        $[89] = t25;
+        $[90] = t26;
+        $[91] = t28;
+        $[92] = t31;
+        $[93] = t40;
+        $[94] = t41;
+        $[95] = t42;
+        $[96] = t43;
+    } else {
+        t43 = $[96];
+    }
+    let t44;
+    if ($[97] !== t17 || $[98] !== t23 || $[99] !== t43) {
+        t44 = /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                t17,
+                t23,
+                t43
+            ]
+        });
+        $[97] = t17;
+        $[98] = t23;
+        $[99] = t43;
+        $[100] = t44;
+    } else {
+        t44 = $[100];
+    }
+    return t44;
+}
+function _temp6(e_0) {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+}
+function _temp5(theme_0) {
+    return {
+        padding: theme_0.spacing(2)
+    };
+}
+function _temp4(params) {
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...params,
+        placeholder: "Search timezones",
+        size: "small"
     });
 }
+function _temp3(e) {
+    e.stopPropagation();
+}
+function _temp2(theme) {
+    return {
+        padding: theme.spacing(1)
+    };
+}
+function _temp(o_0) {
+    return {
+        id: o_0.value,
+        label: o_0.display
+    };
+}
 
 //# sourceMappingURL=TimeRangeSelector.js.map