@tidbcloud/uikit 2.0.0-beta.44 → 2.0.0-beta.46

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.46
+
+### Minor Changes
+
+- Add DateTimePicker and update Calendar styles
+
+## 2.0.0-beta.45
+
+### Minor Changes
+
+- Update ActionIcon styles and added jsdoc preview for icon component
+
 ## 2.0.0-beta.44
 
 ### Patch Changes

package/dist/biz/DateTimePicker/constant.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CellHeight = 32;
+const CellStyle = {
+  height: CellHeight,
+  width: CellHeight,
+  lineHeight: `${CellHeight}px`,
+  borderRadius: 8
+};
+exports.CellHeight = CellHeight;
+exports.CellStyle = CellStyle;

package/dist/biz/DateTimePicker/constant.d.cts

@@ -0,0 +1,7 @@
+export declare const CellHeight = 32;
+export declare const CellStyle: {
+    height: number;
+    width: number;
+    lineHeight: string;
+    borderRadius: number;
+};

package/dist/biz/DateTimePicker/constant.d.ts

@@ -0,0 +1,7 @@
+export declare const CellHeight = 32;
+export declare const CellStyle: {
+    height: number;
+    width: number;
+    lineHeight: string;
+    borderRadius: number;
+};

package/dist/biz/DateTimePicker/constant.js

@@ -0,0 +1,11 @@
+const CellHeight = 32;
+const CellStyle = {
+  height: CellHeight,
+  width: CellHeight,
+  lineHeight: `${CellHeight}px`,
+  borderRadius: 8
+};
+export {
+  CellHeight,
+  CellStyle
+};

package/dist/biz/DateTimePicker/index.cjs

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const ahooks = require("ahooks");
+const React = require("react");
+const index = require("../../icons/index.cjs");
+const index$1 = require("../../primitive/Typography/index.cjs");
+const dayjs = require("dayjs");
+const helpers = require("../TimeRangePicker/helpers.cjs");
+const usePickerScroll = require("./usePickerScroll.cjs");
+const useDisclosure = require("../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.cjs");
+const Popover = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Popover/Popover.cjs");
+const TextInput = require("../../primitive/TextInput/TextInput.cjs");
+const Calendar = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/Calendar/Calendar.cjs");
+const TimeInput = require("../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.cjs");
+const Loader = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Loader/Loader.cjs");
+const Box = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.cjs");
+const Stack = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Stack/Stack.cjs");
+const Group = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.cjs");
+const Divider = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Divider/Divider.cjs");
+const Flex = require("../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Flex/Flex.cjs");
+const DateTimePicker = ({
+  placeholder = "Select time",
+  format = helpers.DEFAULT_TIME_FORMAT,
+  defaultValue,
+  value,
+  startDate = dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs().add(10, "year").toDate(),
+  onChange,
+  disable = false,
+  utcOffset = dayjs().utcOffset(),
+  withinPortal = true,
+  sx,
+  loading = false,
+  size
+}) => {
+  const [opened, { close, open }] = useDisclosure.useDisclosure(false);
+  const [currentValue, setCurrentValue] = React.useState(
+    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
+  );
+  const updateCurrentValue = ahooks.useMemoizedFn((val) => {
+    setCurrentValue(val);
+    onChange == null ? void 0 : onChange(val.toDate());
+  });
+  const inputStr = currentValue.format(format);
+  const utcStr = React.useMemo(() => {
+    const h = Math.floor(utcOffset / 60);
+    const m = utcOffset % 60;
+    return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
+  }, [utcOffset]);
+  const scroll = usePickerScroll.useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
+  const calendarChange = ahooks.useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  const timeInputChange = ahooks.useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      updateCurrentValue(dayjs(startDate));
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      updateCurrentValue(dayjs(endDate));
+    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  ahooks.useUpdateEffect(() => {
+    let next = currentValue;
+    const [h, m, s] = scroll.value;
+    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  }, [scroll.value]);
+  ahooks.useUpdateEffect(() => {
+    if (value && dayjs(value).unix() !== currentValue.unix()) {
+      updateCurrentValue(dayjs(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      TextInput.TextInput,
+      {
+        readOnly: true,
+        disabled: disable,
+        placeholder,
+        value: inputStr,
+        rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
+        onClick: open,
+        sx,
+        size
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Stack.Stack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { align: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          Calendar.Calendar,
+          {
+            minDate: startDate,
+            maxDate: endDate,
+            value: currentValue.toDate(),
+            onChange: calendarChange,
+            size: "sm",
+            styles: () => ({
+              calendarHeaderLevel: {
+                height: 32
+              },
+              calendarHeaderControl: {
+                height: 32,
+                width: 32
+              },
+              weekdayCell: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              },
+              month: {
+                "& thead tr": {
+                  display: "flex",
+                  gap: 8
+                },
+                "& tbody tr": {
+                  display: "flex",
+                  gap: 8
+                }
+              },
+              day: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Stack.Stack, { justify: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            TimeInput.TimeInput,
+            {
+              w: 112,
+              withSeconds: true,
+              value: currentValue.toDate(),
+              onChange: timeInputChange,
+              size: "sm",
+              styles: {
+                controls: {
+                  height: 30
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+            Box.Box,
+            {
+              pos: "relative",
+              fz: 14,
+              fw: 400,
+              h: 224,
+              sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Flex.Flex, { mah: "100%", gap: 8, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 0,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 40,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                    Box.Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 80,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Flex.Flex, { mah: "100%", gap: 8, children: scroll.content })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Divider.Divider, { mx: -16 }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Group.Group, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(index$1.Typography, { size: "sm", children: [
+        "Use",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.Typography, { fw: 600, component: "span", children: utcStr }),
+        " ",
+        "from your local time zone"
+      ] }) })
+    ] }) })
+  ] });
+};
+exports.DateTimePicker = DateTimePicker;

package/dist/biz/DateTimePicker/index.d.cts

@@ -0,0 +1,18 @@
+import { Sx, MantineSize } from '../../primitive/index.js';
+
+export interface DateTimePickerProps {
+    placeholder?: string;
+    format?: string;
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    sx?: Sx;
+    loading?: boolean;
+    size?: MantineSize;
+}
+export declare const DateTimePicker: React.FC<React.PropsWithChildren<DateTimePickerProps>>;

package/dist/biz/DateTimePicker/index.d.ts

@@ -0,0 +1,18 @@
+import { Sx, MantineSize } from '../../primitive/index.js';
+
+export interface DateTimePickerProps {
+    placeholder?: string;
+    format?: string;
+    utcOffset?: number;
+    defaultValue?: Date;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+    onChange?: (val: Date) => void;
+    disable?: boolean;
+    withinPortal?: boolean;
+    sx?: Sx;
+    loading?: boolean;
+    size?: MantineSize;
+}
+export declare const DateTimePicker: React.FC<React.PropsWithChildren<DateTimePickerProps>>;

package/dist/biz/DateTimePicker/index.js

@@ -0,0 +1,219 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMemoizedFn, useUpdateEffect } from "ahooks";
+import { useState, useMemo } from "react";
+import { IconClock } from "../../icons/index.js";
+import { Typography } from "../../primitive/Typography/index.js";
+import dayjs from "dayjs";
+import { DEFAULT_TIME_FORMAT } from "../TimeRangePicker/helpers.js";
+import { useTimePickerScroll } from "./usePickerScroll.js";
+import { useDisclosure } from "../../node_modules/.pnpm/@mantine_hooks@5.10.4_react@18.3.1/node_modules/@mantine/hooks/esm/use-disclosure/use-disclosure.js";
+import { Popover } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Popover/Popover.js";
+import { TextInput } from "../../primitive/TextInput/TextInput.js";
+import { Calendar } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/Calendar/Calendar.js";
+import { TimeInput } from "../../node_modules/.pnpm/@mantine_dates@5.10.4_@mantine_core@5.10.4_@mantine_hooks@5.10.4_dayjs@1.11.12_react@18.3.1/node_modules/@mantine/dates/esm/components/TimeInput/TimeInput.js";
+import { Loader } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Loader/Loader.js";
+import { Box } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Box/Box.js";
+import { Stack } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Stack/Stack.js";
+import { Group } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Group/Group.js";
+import { Divider } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Divider/Divider.js";
+import { Flex } from "../../node_modules/.pnpm/@mantine_core@5.10.4_patch_hash_k3wzpm5n4esvq7igbvcsgyfoja_@emotion_react@11.13.0_@mantine_ho_u2jurujayhgo5kjqawpkatsdsi/node_modules/@mantine/core/esm/Flex/Flex.js";
+const DateTimePicker = ({
+  placeholder = "Select time",
+  format = DEFAULT_TIME_FORMAT,
+  defaultValue,
+  value,
+  startDate = dayjs().subtract(10, "year").toDate(),
+  endDate = dayjs().add(10, "year").toDate(),
+  onChange,
+  disable = false,
+  utcOffset = dayjs().utcOffset(),
+  withinPortal = true,
+  sx,
+  loading = false,
+  size
+}) => {
+  const [opened, { close, open }] = useDisclosure(false);
+  const [currentValue, setCurrentValue] = useState(
+    defaultValue ? dayjs(defaultValue) : value ? dayjs(value) : dayjs()
+  );
+  const updateCurrentValue = useMemoizedFn((val) => {
+    setCurrentValue(val);
+    onChange == null ? void 0 : onChange(val.toDate());
+  });
+  const inputStr = currentValue.format(format);
+  const utcStr = useMemo(() => {
+    const h = Math.floor(utcOffset / 60);
+    const m = utcOffset % 60;
+    return `UTC${h >= 0 ? "+" : "-"}${Math.abs(h)}:${m < 10 ? "0" : ""}${m}`;
+  }, [utcOffset]);
+  const scroll = useTimePickerScroll(currentValue, opened, startDate, endDate, utcOffset);
+  const calendarChange = useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).year(v.getFullYear()).month(v.getMonth()).date(v.getDate());
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  const timeInputChange = useMemoizedFn((v) => {
+    let next = currentValue;
+    next = next.utcOffset(utcOffset).hour(v.getHours()).minute(v.getMinutes()).second(v.getSeconds());
+    if (startDate && next.valueOf() < startDate.valueOf()) {
+      updateCurrentValue(dayjs(startDate));
+    } else if (endDate && next.valueOf() > endDate.valueOf()) {
+      updateCurrentValue(dayjs(endDate));
+    } else if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  });
+  useUpdateEffect(() => {
+    let next = currentValue;
+    const [h, m, s] = scroll.value;
+    next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
+    if ((currentValue == null ? void 0 : currentValue.unix()) !== next.unix()) {
+      updateCurrentValue(next);
+    }
+  }, [scroll.value]);
+  useUpdateEffect(() => {
+    if (value && dayjs(value).unix() !== currentValue.unix()) {
+      updateCurrentValue(dayjs(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TextInput,
+      {
+        readOnly: true,
+        disabled: disable,
+        placeholder,
+        value: inputStr,
+        rightSection: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
+        onClick: open,
+        sx,
+        size
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { align: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Calendar,
+          {
+            minDate: startDate,
+            maxDate: endDate,
+            value: currentValue.toDate(),
+            onChange: calendarChange,
+            size: "sm",
+            styles: () => ({
+              calendarHeaderLevel: {
+                height: 32
+              },
+              calendarHeaderControl: {
+                height: 32,
+                width: 32
+              },
+              weekdayCell: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              },
+              month: {
+                "& thead tr": {
+                  display: "flex",
+                  gap: 8
+                },
+                "& tbody tr": {
+                  display: "flex",
+                  gap: 8
+                }
+              },
+              day: {
+                height: 32,
+                width: 32,
+                lineHeight: "32px"
+              }
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { justify: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TimeInput,
+            {
+              w: 112,
+              withSeconds: true,
+              value: currentValue.toDate(),
+              onChange: timeInputChange,
+              size: "sm",
+              styles: {
+                controls: {
+                  height: 30
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Box,
+            {
+              pos: "relative",
+              fz: 14,
+              fw: 400,
+              h: 224,
+              sx: (theme) => ({ color: theme.colors.carbon[8], overflow: "hidden", zIndex: 9999 }),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { mah: "100%", gap: 8, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 0,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 40,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      bg: "carbon.3",
+                      pos: "absolute",
+                      top: 0,
+                      left: 80,
+                      h: 32,
+                      w: 32,
+                      sx: (theme) => ({ zIndex: -1, borderRadius: theme.defaultRadius, pointerEvents: "none" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { mah: "100%", gap: 8, children: scroll.content })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { mx: -16 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { size: "sm", children: [
+        "Use",
+        " ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fw: 600, component: "span", children: utcStr }),
+        " ",
+        "from your local time zone"
+      ] }) })
+    ] }) })
+  ] });
+};
+export {
+  DateTimePicker
+};