react-timezone-range-picker 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -1,997 +0,0 @@
-import { forwardRef, createElement, useState, useMemo, useEffect, useRef, useCallback } from 'react';
-import { Flex, Box, Text, Popover, Button, Input, Select, useMantineColorScheme, useMantineTheme } from '@mantine/core';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import dayjs4 from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import { DatePickerInput, TimeInput } from '@mantine/dates';
-import { useForm } from '@mantine/form';
-
-// src/TimezonePanel/index.tsx
-function useTimeoutFn(fn, ms) {
-  var ready = useRef(false);
-  var timeout = useRef();
-  var callback = useRef(fn);
-  var isReady = useCallback(function() {
-    return ready.current;
-  }, []);
-  var set = useCallback(function() {
-    ready.current = false;
-    timeout.current && clearTimeout(timeout.current);
-    timeout.current = setTimeout(function() {
-      ready.current = true;
-      callback.current();
-    }, ms);
-  }, [ms]);
-  var clear = useCallback(function() {
-    ready.current = null;
-    timeout.current && clearTimeout(timeout.current);
-  }, []);
-  useEffect(function() {
-    callback.current = fn;
-  }, [fn]);
-  useEffect(function() {
-    set();
-    return clear;
-  }, [ms]);
-  return [isReady, clear, set];
-}
-
-// ../../node_modules/.pnpm/react-use@17.6.0_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-use/esm/useDebounce.js
-function useDebounce(fn, ms, deps) {
-  if (deps === void 0) {
-    deps = [];
-  }
-  var _a = useTimeoutFn(fn, ms), isReady = _a[0], cancel = _a[1], reset = _a[2];
-  useEffect(reset, deps);
-  return [isReady, cancel];
-}
-
-// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
-// src/TimezonePanel/components/TimezoneList/index.module.css
-var TimezoneList_default = {};
-var useAppTheme = () => {
-  const { colorScheme } = useMantineColorScheme();
-  const theme = useMantineTheme();
-  return { colorScheme, theme, appTheme: theme.other.appTheme[colorScheme] };
-};
-var TimezoneList = ({
-  name,
-  longName,
-  currentTime,
-  utcOffset,
-  selectedTimezone,
-  isBrowserTimezone = false,
-  handleTimezoneMouseClick = void 0
-}) => {
-  const { colorScheme } = useAppTheme();
-  const onClick = () => {
-    if (isBrowserTimezone) return;
-    handleTimezoneMouseClick({
-      name,
-      longName,
-      utcOffset
-    });
-  };
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      direction: "column",
-      className: clsx_default(
-        TimezoneList_default.row,
-        isBrowserTimezone ? void 0 : colorScheme === "dark" ? TimezoneList_default["row-dark"] : TimezoneList_default["row-light"],
-        selectedTimezone?.name === name ? colorScheme === "dark" ? TimezoneList_default["row-selected-dark"] : TimezoneList_default["row-selected-light"] : void 0
-      ),
-      onClick,
-      children: [
-        /* @__PURE__ */ jsxs(Flex, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", children: name }),
-          /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
-            currentTime,
-            " \u2022 UTC",
-            utcOffset
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Text, { size: "sm", children: longName })
-      ]
-    }
-  );
-};
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.mjs
-var defaultAttributes = {
-  outline: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  },
-  filled: {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none"
-  }
-};
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/createReactComponent.mjs
-var createReactComponent = (type, iconName, iconNamePascal, iconNode) => {
-  const Component = forwardRef(
-    ({ color = "currentColor", size = 24, stroke = 2, title, className, children, ...rest }, ref) => createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes[type],
-        width: size,
-        height: size,
-        className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(" "),
-        ...type === "filled" ? {
-          fill: color
-        } : {
-          strokeWidth: stroke,
-          stroke: color
-        },
-        ...rest
-      },
-      [
-        title && createElement("title", { key: "svg-title" }, title),
-        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    )
-  );
-  Component.displayName = `${iconNamePascal}`;
-  return Component;
-};
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCalendar.mjs
-var __iconNode = [["path", { "d": "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z", "key": "svg-0" }], ["path", { "d": "M16 3v4", "key": "svg-1" }], ["path", { "d": "M8 3v4", "key": "svg-2" }], ["path", { "d": "M4 11h16", "key": "svg-3" }], ["path", { "d": "M11 15h1", "key": "svg-4" }], ["path", { "d": "M12 15v3", "key": "svg-5" }]];
-var IconCalendar = createReactComponent("outline", "calendar", "Calendar", __iconNode);
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs
-var __iconNode2 = [["path", { "d": "M9 6l6 6l-6 6", "key": "svg-0" }]];
-var IconChevronRight = createReactComponent("outline", "chevron-right", "ChevronRight", __iconNode2);
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconClock.mjs
-var __iconNode3 = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M12 7v5l3 3", "key": "svg-1" }]];
-var IconClock = createReactComponent("outline", "clock", "Clock", __iconNode3);
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFilter2.mjs
-var __iconNode4 = [["path", { "d": "M4 6h16", "key": "svg-0" }], ["path", { "d": "M6 12h12", "key": "svg-1" }], ["path", { "d": "M9 18h6", "key": "svg-2" }]];
-var IconFilter2 = createReactComponent("outline", "filter-2", "Filter2", __iconNode4);
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconWorld.mjs
-var __iconNode5 = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M3.6 9h16.8", "key": "svg-1" }], ["path", { "d": "M3.6 15h16.8", "key": "svg-2" }], ["path", { "d": "M11.5 3a17 17 0 0 0 0 18", "key": "svg-3" }], ["path", { "d": "M12.5 3a17 17 0 0 1 0 18", "key": "svg-4" }]];
-var IconWorld = createReactComponent("outline", "world", "World", __iconNode5);
-
-// ../../node_modules/.pnpm/@tabler+icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconCalendarWeekFilled.mjs
-var __iconNode6 = [["path", { "d": "M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z", "key": "svg-0" }], ["path", { "d": "M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-1" }], ["path", { "d": "M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-2" }], ["path", { "d": "M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-3" }], ["path", { "d": "M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z", "key": "svg-4" }], ["path", { "d": "M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1", "key": "svg-5" }]];
-var IconCalendarWeekFilled = createReactComponent("filled", "calendar-week-filled", "CalendarWeekFilled", __iconNode6);
-var TimezoneSearch = ({ searchText, setSearchText }) => {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      placeholder: "Timezone search (Asia, Tokyo, +09:00, etc)",
-      leftSection: /* @__PURE__ */ jsx(IconFilter2, { stroke: 2 }),
-      value: searchText,
-      onChange: (e) => setSearchText(e.currentTarget.value)
-    }
-  );
-};
-
-// src/TimezonePanel/util/longTzName.ts
-var longTzName = (timezone3, locale = "en-US") => {
-  return new Intl.DateTimeFormat(locale, {
-    timeZone: timezone3,
-    timeZoneName: "long"
-  }).formatToParts(/* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value || "";
-};
-
-// src/TimezonePanel/util/parseOffest.ts
-var parseOffset = (offsetUtc) => {
-  const sign = offsetUtc[0] === "-" ? -1 : 1;
-  const [hours, minutes] = offsetUtc.slice(1).split(":").map(Number);
-  return sign * (hours * 60 + minutes);
-};
-
-// src/TimezonePanel/util/getTimezones.ts
-dayjs4.extend(utc);
-dayjs4.extend(timezone);
-var getTimezones = () => {
-  const timezones = Intl.supportedValuesOf("timeZone");
-  return timezones.map((timezone3) => {
-    const offset = dayjs4().tz(timezone3).format("Z");
-    return {
-      name: timezone3,
-      longName: longTzName(timezone3),
-      currentTime: dayjs4().tz(timezone3).format("h:mm A"),
-      utcOffset: offset,
-      offsetMinutes: parseOffset(offset)
-    };
-  }).sort((a, b) => a.offsetMinutes - b.offsetMinutes);
-};
-
-// src/TimezonePanel/index.module.css
-var TimezonePanel_default = {};
-
-// src/styles/index.module.css
-var styles_default = {};
-dayjs4.extend(utc);
-dayjs4.extend(timezone);
-var getBrowserTimezone = () => {
-  const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  const offset = dayjs4().tz(tz).format("Z");
-  return {
-    name: tz,
-    longName: longTzName(tz),
-    currentTime: dayjs4().tz(tz).format("h:mm A"),
-    utcOffset: offset,
-    offsetMinutes: parseOffset(offset)
-  };
-};
-var Footer = ({ handleCancelClick }) => {
-  const { theme } = useAppTheme();
-  return /* @__PURE__ */ jsx(Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxs(Flex, { columnGap: 16, children: [
-    /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", color: theme.primaryColor, onClick: handleCancelClick, children: "Cancel" }),
-    /* @__PURE__ */ jsx(Button, { type: "submit", size: "xs", color: theme.primaryColor, children: "Apply" })
-  ] }) });
-};
-var TimezonePanel = ({ tzRange }) => {
-  const [selectedTimezone, setSelectedTimezone] = useState(tzRange.timezone);
-  const [filteredTimezones, setFilteredTimezones] = useState([]);
-  const [searchText, setSearchText] = useState("");
-  const timezones = useMemo(() => getTimezones(), []);
-  useEffect(() => {
-    setFilteredTimezones(timezones);
-  }, []);
-  useDebounce(
-    () => {
-      if (searchText === "") {
-        setFilteredTimezones(timezones);
-        return;
-      }
-      setFilteredTimezones(
-        timezones.filter(
-          (timezone3) => timezone3.name.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.longName.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.currentTime.toLowerCase().includes(searchText.toLocaleLowerCase()) || timezone3.utcOffset.toLowerCase().includes(searchText.toLocaleLowerCase())
-        )
-      );
-    },
-    250,
-    [searchText]
-  );
-  useMemo(() => getBrowserTimezone(), []);
-  const handleTimezoneMouseClick = (selectedTimezone2) => {
-    setSelectedTimezone(selectedTimezone2);
-  };
-  const handleApply = (e) => {
-    e.preventDefault();
-    tzRange.onApply({
-      startDate: tzRange.startDate,
-      startTime: tzRange.startTime,
-      endDate: tzRange.endDate,
-      endTime: tzRange.endTime,
-      timezone: selectedTimezone || {
-        name: null,
-        longName: null,
-        utcOffset: null
-      }
-    });
-  };
-  const getCurrentTimeInTz = (tzName) => {
-    if (!tzName) return "";
-    return dayjs4().tz(tzName).format("h:mm A");
-  };
-  return /* @__PURE__ */ jsxs("form", { className: styles_default["form-container"], onSubmit: handleApply, children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { height: "calc(100% - 40px)" }, children: [
-      /* @__PURE__ */ jsx(Box, { style: { width: "95%" }, mx: "auto", children: /* @__PURE__ */ jsx(TimezoneSearch, { searchText, setSearchText }) }),
-      /* @__PURE__ */ jsxs(Box, { style: { overflowY: "scroll" }, children: [
-        /* @__PURE__ */ jsx(Text, { fw: 600, px: 12, children: "My Location" }),
-        /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(
-          TimezoneList,
-          {
-            isBrowserTimezone: true,
-            name: tzRange.timezone?.name,
-            longName: tzRange.timezone?.longName,
-            currentTime: getCurrentTimeInTz(tzRange.timezone?.name),
-            utcOffset: tzRange.timezone?.utcOffset,
-            selectedTimezone
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Text, { fw: 600, px: 12, children: "Locations" }),
-        /* @__PURE__ */ jsx(Flex, { direction: "column", className: TimezonePanel_default["list-container"], children: filteredTimezones.map((tz, idx) => /* @__PURE__ */ jsx(
-          TimezoneList,
-          {
-            name: tz.name,
-            longName: tz.longName,
-            currentTime: tz.currentTime,
-            utcOffset: tz.utcOffset,
-            selectedTimezone,
-            handleTimezoneMouseClick
-          },
-          idx
-        )) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { px: 12, children: /* @__PURE__ */ jsx(Footer, {}) })
-  ] });
-};
-
-// src/Sidebar/index.module.css
-var Sidebar_default = {};
-var getTimeOptions = (timezoneName) => [
-  {
-    label: "Today",
-    searchKey: "today",
-    startTime: dayjs4().tz(timezoneName).startOf("day").format(),
-    endTime: dayjs4().tz(timezoneName).endOf("day").format()
-  },
-  {
-    label: "Tomorrow",
-    searchKey: "tomorrow",
-    startTime: dayjs4().tz(timezoneName).add(1, "day").startOf("day").format(),
-    endTime: dayjs4().tz(timezoneName).add(1, "day").endOf("day").format()
-  },
-  {
-    label: "Yesterday",
-    searchKey: "yesterday",
-    startTime: dayjs4().tz(timezoneName).subtract(1, "day").startOf("day").format(),
-    endTime: dayjs4().tz(timezoneName).subtract(1, "day").endOf("day").format(),
-    lineBreak: true
-  },
-  {
-    label: "Last 15 seconds",
-    searchKey: "-15s",
-    startTime: dayjs4().tz(timezoneName).subtract(15, "second").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 30 seconds",
-    searchKey: "-30s",
-    startTime: dayjs4().tz(timezoneName).subtract(30, "second").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Next 15 seconds",
-    searchKey: "+15s",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(15, "second").format()
-  },
-  {
-    label: "Next 30 seconds",
-    searchKey: "+30s",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(30, "second").format(),
-    lineBreak: true
-  },
-  {
-    label: "Last 5 minutes",
-    searchKey: "-5m",
-    startTime: dayjs4().tz(timezoneName).subtract(5, "minute").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 10 minutes",
-    searchKey: "-10m",
-    startTime: dayjs4().tz(timezoneName).subtract(10, "minute").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 15 minutes",
-    searchKey: "-15m",
-    startTime: dayjs4().tz(timezoneName).subtract(15, "minute").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 30 minutes",
-    searchKey: "-30m",
-    startTime: dayjs4().tz(timezoneName).subtract(30, "minute").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 45 minutes",
-    searchKey: "-45m",
-    startTime: dayjs4().tz(timezoneName).subtract(45, "minute").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Next 5 minutes",
-    searchKey: "+5m",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(5, "minute").format()
-  },
-  {
-    label: "Next 10 minutes",
-    searchKey: "+10m",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(10, "minute").format()
-  },
-  {
-    label: "Next 15 minutes",
-    searchKey: "+15m",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(15, "minute").format()
-  },
-  {
-    label: "Next 30 minutes",
-    searchKey: "+30m",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(30, "minute").format()
-  },
-  {
-    label: "Next 45 minutes",
-    searchKey: "+45m",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(45, "minute").format(),
-    lineBreak: true
-  },
-  {
-    label: "Last 1 hour",
-    searchKey: "-1h",
-    startTime: dayjs4().tz(timezoneName).subtract(1, "hour").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 3 hours",
-    searchKey: "-3h",
-    startTime: dayjs4().tz(timezoneName).subtract(3, "hour").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 6 hours",
-    searchKey: "-6h",
-    startTime: dayjs4().tz(timezoneName).subtract(6, "hour").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 12 hours",
-    searchKey: "-12h",
-    startTime: dayjs4().tz(timezoneName).subtract(12, "hour").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Next 1 hour",
-    searchKey: "+1h",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(1, "hour").format()
-  },
-  {
-    label: "Next 3 hours",
-    searchKey: "+3h",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(3, "hour").format()
-  },
-  {
-    label: "Next 6 hours",
-    searchKey: "+6h",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(6, "hour").format()
-  },
-  {
-    label: "Next 12 hours",
-    searchKey: "+12h",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(12, "hour").format(),
-    lineBreak: true
-  },
-  {
-    label: "Last 1 day",
-    searchKey: "-1d",
-    startTime: dayjs4().tz(timezoneName).subtract(1, "day").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 2 days",
-    searchKey: "-2d",
-    startTime: dayjs4().tz(timezoneName).subtract(2, "day").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 7 days",
-    searchKey: "-7d",
-    startTime: dayjs4().tz(timezoneName).subtract(7, "day").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 14 days",
-    searchKey: "-14d",
-    startTime: dayjs4().tz(timezoneName).subtract(14, "day").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Last 30 days",
-    searchKey: "-30d",
-    startTime: dayjs4().tz(timezoneName).subtract(30, "day").format(),
-    endTime: dayjs4().tz(timezoneName).format()
-  },
-  {
-    label: "Next 1 day",
-    searchKey: "+1d",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(1, "day").format()
-  },
-  {
-    label: "Next 2 days",
-    searchKey: "+2d",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(2, "day").format()
-  },
-  {
-    label: "Next 7 days",
-    searchKey: "+7d",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(7, "day").format()
-  },
-  {
-    label: "Next 14 days",
-    searchKey: "+14d",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(14, "day").format()
-  },
-  {
-    label: "Next 30 days",
-    searchKey: "+30d",
-    startTime: dayjs4().tz(timezoneName).format(),
-    endTime: dayjs4().tz(timezoneName).add(30, "day").format()
-  }
-];
-
-// src/RelativeTimePanel/index.module.css
-var RelativeTimePanel_default = {};
-var RelativeTimePanel = ({ tzRange }) => {
-  const [filteredOptions, setFilteredOptions] = useState([]);
-  const [searchText, setSearchText] = useState("");
-  const { colorScheme } = useAppTheme();
-  useEffect(() => {
-    if (tzRange.timezone.name !== null) {
-      const timeOptions = getTimeOptions(tzRange.timezone.name);
-      setFilteredOptions(timeOptions);
-    }
-  }, [tzRange.timezone]);
-  useDebounce(
-    () => {
-      if (searchText === "") {
-        setFilteredOptions(getTimeOptions(tzRange.timezone.name));
-        return;
-      }
-      const newTimeOptions = filteredOptions.filter(
-        (value) => value.searchKey.includes(searchText)
-      );
-      setFilteredOptions(newTimeOptions);
-    },
-    250,
-    [searchText]
-  );
-  const handleRowClick = (option) => {
-    const [startDate, startTime] = option.startTime.split("T");
-    const [endDate, endTime] = option.endTime.split("T");
-    tzRange.onApply({
-      startDate,
-      startTime: startTime.slice(0, 8),
-      endDate,
-      endTime: endTime.slice(0, 8),
-      timezone: tzRange.timezone
-    });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { style: { width: "90%" }, mx: "auto", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        placeholder: "Relative time (15m, 1h, 1d, 1w)",
-        value: searchText,
-        onChange: (e) => setSearchText(e.currentTarget.value)
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Flex, { direction: "column", className: RelativeTimePanel_default["relative-time-panel-container"], children: filteredOptions.map((op) => /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        align: "center",
-        justify: "space-between",
-        className: clsx_default(
-          colorScheme === "dark" ? RelativeTimePanel_default["time-row-dark"] : RelativeTimePanel_default["time-row-light"],
-          RelativeTimePanel_default["time-row"]
-        ),
-        py: 4,
-        px: 12,
-        mb: op.lineBreak ? 8 : 0,
-        onClick: () => handleRowClick(op),
-        children: [
-          /* @__PURE__ */ jsx(Text, { size: "sm", children: op.label }),
-          /* @__PURE__ */ jsx(Text, { size: "xs", c: "#5f6368", children: op.searchKey })
-        ]
-      },
-      op.label
-    )) })
-  ] });
-};
-var Sidebar = ({ setSelectedPanel, tzRange }) => {
-  return /* @__PURE__ */ jsxs(Box, { className: Sidebar_default["sidebar-container"], flex: 1, children: [
-    /* @__PURE__ */ jsx(RelativeTimePanel, { tzRange }),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", rowGap: 16, py: 8, style: { borderTop: "1px solid #ddd" }, children: [
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          className: Sidebar_default["sidebar-row"],
-          justify: "space-between",
-          align: "center",
-          px: 12,
-          onClick: () => setSelectedPanel("Start and end times" /* START_END_TIME */),
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
-              /* @__PURE__ */ jsx(IconCalendarWeekFilled, { stroke: 1.5 }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", children: "Start and end times" })
-            ] }),
-            /* @__PURE__ */ jsx(IconChevronRight, { stroke: 1.5 })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          className: Sidebar_default["sidebar-row"],
-          justify: "space-between",
-          align: "center",
-          px: 12,
-          onClick: () => setSelectedPanel("Around a time" /* AROUND_TIME */),
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
-              /* @__PURE__ */ jsx(IconClock, { stroke: 1.5 }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", children: "Around a time" })
-            ] }),
-            /* @__PURE__ */ jsx(IconChevronRight, { stroke: 1.5 })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          className: Sidebar_default["sidebar-row"],
-          justify: "space-between",
-          align: "center",
-          px: 12,
-          onClick: () => setSelectedPanel("Time zone" /* TIMEZONE */),
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
-              /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", children: "Time zone" })
-            ] }),
-            /* @__PURE__ */ jsx(IconChevronRight, { stroke: 1.5 })
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-var getCurrentTime = () => dayjs4().format("HH:mm:ss");
-var getCurrentDate = () => dayjs4().format("YYYY-MM-DD");
-var getCurrentPlusDate = (amount) => dayjs4().add(amount, "day").format("YYYY-MM-DD");
-var getShortTimezoneName = (tz) => {
-  if (!tz) return tz;
-  return dayjs4().tz(tz).format("Z");
-};
-var getPopoverButtonText = (tzRange) => {
-  return `${dayjs4(tzRange.startDate).format("YYYY/MM/DD")} ${tzRange.startTime} - ${dayjs4(
-    tzRange.endDate
-  ).format("YYYY/MM/DD")} ${tzRange.endTime} (${getShortTimezoneName(tzRange.timezone.name)})`;
-};
-var getPastDateTime = (date, time, amount, unit) => {
-  const d = dayjs4(`${date} ${time}`).subtract(amount, unit);
-  return {
-    date: d.format("YYYY-MM-DD"),
-    time: d.format("HH:mm:ss")
-  };
-};
-var getFutureDateTime = (date, time, amount, unit) => {
-  const d = dayjs4(`${date} ${time}`).add(amount, unit);
-  return {
-    date: d.format("YYYY-MM-DD"),
-    time: d.format("HH:mm:ss")
-  };
-};
-
-// src/AroundTimePanel/util.ts
-var TIME_OPTIONS = [
-  "\xB1 30 seconds" /* ThirtySeconds */,
-  "\xB1 1 minute" /* OneMinute */,
-  "\xB1 15 minutes" /* FifteenMinutes */,
-  "\xB1 30 minutes" /* ThirtyMinutes */,
-  "\xB1 1 hour" /* OneHour */,
-  "\xB1 1 day" /* OneDay */
-];
-var getStartEndDateTime = (date, time, timeOption) => {
-  switch (timeOption) {
-    case "\xB1 30 seconds" /* ThirtySeconds */:
-      const startDateTime = getPastDateTime(date, time, 30, "second");
-      const endDateTime = getFutureDateTime(date, time, 30, "second");
-      return {
-        startDate: startDateTime.date,
-        startTime: startDateTime.time,
-        endDate: endDateTime.date,
-        endTime: endDateTime.time
-      };
-    case "\xB1 1 minute" /* OneMinute */:
-      const startDateTime1 = getPastDateTime(date, time, 1, "minute");
-      const endDateTime1 = getFutureDateTime(date, time, 1, "minute");
-      return {
-        startDate: startDateTime1.date,
-        startTime: startDateTime1.time,
-        endDate: endDateTime1.date,
-        endTime: endDateTime1.time
-      };
-    case "\xB1 15 minutes" /* FifteenMinutes */:
-      const startDateTime15 = getPastDateTime(date, time, 15, "minute");
-      const endDateTime15 = getFutureDateTime(date, time, 15, "minute");
-      return {
-        startDate: startDateTime15.date,
-        startTime: startDateTime15.time,
-        endDate: endDateTime15.date,
-        endTime: endDateTime15.time
-      };
-    case "\xB1 30 minutes" /* ThirtyMinutes */:
-      const startDateTime30 = getPastDateTime(date, time, 30, "minute");
-      const endDateTime30 = getFutureDateTime(date, time, 30, "minute");
-      return {
-        startDate: startDateTime30.date,
-        startTime: startDateTime30.time,
-        endDate: endDateTime30.date,
-        endTime: endDateTime30.time
-      };
-    case "\xB1 1 hour" /* OneHour */:
-      const startDateTime60 = getPastDateTime(date, time, 1, "hour");
-      const endDateTime60 = getFutureDateTime(date, time, 1, "hour");
-      return {
-        startDate: startDateTime60.date,
-        startTime: startDateTime60.time,
-        endDate: endDateTime60.date,
-        endTime: endDateTime60.time
-      };
-    case "\xB1 1 day" /* OneDay */:
-      const startDateTimeDay = getPastDateTime(date, time, 1, "day");
-      const endDateTimeDay = getFutureDateTime(date, time, 1, "day");
-      return {
-        startDate: startDateTimeDay.date,
-        startTime: startDateTimeDay.time,
-        endDate: endDateTimeDay.date,
-        endTime: endDateTimeDay.time
-      };
-    default:
-      return {
-        startDate: date,
-        startTime: time,
-        endDate: date,
-        endTime: time
-      };
-  }
-};
-var AroundTimePanel = ({ tzRange }) => {
-  const form = useForm({
-    initialValues: {
-      date: getCurrentDate(),
-      time: getCurrentTime(),
-      duration: "\xB1 1 day" /* OneDay */
-    }
-  });
-  const onSubmit = (values) => {
-    const { startDate, startTime, endDate, endTime } = getStartEndDateTime(
-      values.date,
-      values.time,
-      values.duration
-    );
-    tzRange.onApply({
-      startDate,
-      startTime,
-      endDate,
-      endTime,
-      timezone: tzRange.timezone
-    });
-  };
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 2, justify: "space-between", style: { height: "100%" }, px: 12, children: /* @__PURE__ */ jsxs("form", { className: styles_default["form-container"], onSubmit: form.onSubmit(onSubmit), children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { fw: 600, children: "Around a time" }),
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 8, mt: 12, children: [
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            label: "Pick date",
-            placeholder: "Pick date",
-            ...form.getInputProps("date"),
-            popoverProps: { withinPortal: false },
-            valueFormat: "YYYY/MM/DD",
-            leftSection: /* @__PURE__ */ jsx(IconCalendar, { stroke: 1.5 })
-          },
-          form.key("date")
-        ),
-        /* @__PURE__ */ jsx(
-          TimeInput,
-          {
-            label: "Pick time",
-            placeholder: "Pick time",
-            withSeconds: true,
-            defaultValue: getCurrentTime(),
-            ...form.getInputProps("time"),
-            leftSection: /* @__PURE__ */ jsx(IconClock, { stroke: 1.5 }),
-            rightSection: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontStyle: "italic", textAlign: "right" }, children: tzRange.timezone?.longName }),
-            rightSectionWidth: 180,
-            rightSectionProps: {
-              style: {
-                paddingRight: 1
-              }
-            }
-          },
-          form.key("time")
-        ),
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            label: "Duration",
-            placeholder: "Pick value",
-            data: TIME_OPTIONS,
-            ...form.getInputProps("duration"),
-            comboboxProps: { withinPortal: false }
-          },
-          form.key("duration")
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Footer, {})
-  ] }) });
-};
-var StartEndTimePanel = ({ tzRange }) => {
-  const form = useForm({
-    mode: "uncontrolled",
-    initialValues: {
-      startDate: getCurrentDate(),
-      startTime: getCurrentTime(),
-      endDate: getCurrentPlusDate(30),
-      endTime: getCurrentTime()
-    }
-  });
-  const onSubmit = (values) => {
-    tzRange.onApply({
-      startDate: values.startDate,
-      startTime: values.startTime,
-      endDate: values.endDate,
-      endTime: values.endTime,
-      timezone: tzRange.timezone
-    });
-  };
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 2, style: { height: "100%" }, px: 12, children: /* @__PURE__ */ jsxs("form", { className: styles_default["form-container"], onSubmit: form.onSubmit(onSubmit), children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { fw: 600, children: "Start and end times" }),
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 8, mt: 12, children: [
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            label: "Start time",
-            ...form.getInputProps("startDate"),
-            popoverProps: { withinPortal: false },
-            valueFormat: "YYYY/MM/DD",
-            leftSection: /* @__PURE__ */ jsx(IconCalendar, { stroke: 1.5 })
-          },
-          form.key("startDate")
-        ),
-        /* @__PURE__ */ jsx(
-          TimeInput,
-          {
-            withSeconds: true,
-            defaultValue: getCurrentTime(),
-            ...form.getInputProps("startTime"),
-            leftSection: /* @__PURE__ */ jsx(IconClock, { stroke: 1.5 }),
-            rightSection: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontStyle: "italic" }, children: tzRange.timezone?.longName }),
-            rightSectionWidth: 180,
-            rightSectionProps: {
-              style: {
-                paddingRight: 1
-              }
-            }
-          },
-          form.key("startTime")
-        ),
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            label: "End time",
-            ...form.getInputProps("endDate"),
-            popoverProps: { withinPortal: false },
-            valueFormat: "YYYY/MM/DD",
-            leftSection: /* @__PURE__ */ jsx(IconCalendar, { stroke: 1.5 })
-          },
-          form.key("endDate")
-        ),
-        /* @__PURE__ */ jsx(
-          TimeInput,
-          {
-            withSeconds: true,
-            defaultValue: getCurrentTime(),
-            ...form.getInputProps("endTime"),
-            leftSection: /* @__PURE__ */ jsx(IconClock, { stroke: 1.5 }),
-            rightSection: /* @__PURE__ */ jsx(Text, { style: { fontSize: 12, fontStyle: "italic" }, children: tzRange.timezone?.longName }),
-            rightSectionWidth: 180,
-            rightSectionProps: {
-              style: {
-                paddingRight: 1
-              }
-            }
-          },
-          form.key("endTime")
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(Footer, {})
-  ] }) });
-};
-var Panel = /* @__PURE__ */ ((Panel2) => {
-  Panel2["START_END_TIME"] = "Start and end times";
-  Panel2["AROUND_TIME"] = "Around a time";
-  Panel2["TIMEZONE"] = "Time zone";
-  return Panel2;
-})(Panel || {});
-var TimezoneRangePicker = (tzRange) => {
-  const [selectedPanel, setSelectedPanel] = useState("Start and end times" /* START_END_TIME */);
-  const renderPanel = () => {
-    switch (selectedPanel) {
-      case "Start and end times" /* START_END_TIME */:
-        return /* @__PURE__ */ jsx(StartEndTimePanel, { tzRange });
-      case "Around a time" /* AROUND_TIME */:
-        return /* @__PURE__ */ jsx(AroundTimePanel, { tzRange });
-      case "Time zone" /* TIMEZONE */:
-        return /* @__PURE__ */ jsx(TimezonePanel, { tzRange });
-      default:
-        return null;
-    }
-  };
-  const getButtonText = useMemo(
-    () => getPopoverButtonText(tzRange),
-    [tzRange.startDate, tzRange.startTime, tzRange.endDate, tzRange.endTime, tzRange.timezone]
-  );
-  return /* @__PURE__ */ jsxs(Popover, { position: "bottom", shadow: "md", children: [
-    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(Button, { children: getButtonText }) }),
-    /* @__PURE__ */ jsx(Popover.Dropdown, { style: { width: 700, height: 400, padding: 0 }, py: 8, children: /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
-      /* @__PURE__ */ jsx(Sidebar, { tzRange, setSelectedPanel }),
-      renderPanel()
-    ] }) })
-  ] });
-};
-/*! Bundled license information:
-
-@tabler/icons-react/dist/esm/defaultAttributes.mjs:
-@tabler/icons-react/dist/esm/createReactComponent.mjs:
-@tabler/icons-react/dist/esm/icons/IconCalendar.mjs:
-@tabler/icons-react/dist/esm/icons/IconChevronRight.mjs:
-@tabler/icons-react/dist/esm/icons/IconClock.mjs:
-@tabler/icons-react/dist/esm/icons/IconFilter2.mjs:
-@tabler/icons-react/dist/esm/icons/IconWorld.mjs:
-@tabler/icons-react/dist/esm/icons/IconCalendarWeekFilled.mjs:
-@tabler/icons-react/dist/esm/tabler-icons-react.mjs:
-  (**
-   * @license @tabler/icons-react v3.35.0 - MIT
-   *
-   * This source code is licensed under the MIT license.
-   * See the LICENSE file in the root directory of this source tree.
-   *)
-*/
-
-export { Panel, TimezonePanel, TimezoneRangePicker };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map