@tidbcloud/uikit 2.0.0-beta.115 → 2.0.0-beta.117

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.117
+
+### Patch Changes
+
+- feat(primitive): prism ([#416](https://github.com/tidbcloud/tidbcloud-uikit/pull/416))
+
+## 2.0.0-beta.116
+
+### Patch Changes
+
+- feat(DateTimePicker): enhance user interaction and styling ([#413](https://github.com/tidbcloud/tidbcloud-uikit/pull/413))
+
 ## 2.0.0-beta.115
 
 ### Patch Changes

package/dist/biz/CodeBlock/index.cjs

@@ -5,20 +5,18 @@ const React = require("react");
 const index = require("../../icons/index.cjs");
 ;/* empty css                                                                                                                                                                                        */
 ;/* empty css                                                                                                                                                                                         */
-;/* empty css                                                                                                                                                                                                  */
 ;/* empty css                                                                                                                                                                                                 */
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */
 require("clsx");
 const styles = require("../../utils/styles.cjs");
 const Box = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.cjs");
-const CodeHighlight = require("../../node_modules/.pnpm/@mantine_code-highlight@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@ma_ba252il5m53wxwys6sp7krkgpi/node_modules/@mantine/code-highlight/esm/CodeHighlight.cjs");
+const Prism = require("../../primitive/Prism/Prism.cjs");
 const Group = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
 const HoverCard = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/HoverCard/HoverCard.cjs");
 const ActionIcon = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
 const CopyButton = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.cjs");
 const Code = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Code/Code.cjs");
-const Tooltip = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.cjs");
 const useLocalStorage = require("../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-local-storage/use-local-storage.cjs");
 function useFold(persistenceKey) {
   const foldPersistenceKey = `${persistenceKey}.codeblock.fold`;
@@ -54,83 +52,82 @@ const CodeBlock = ({
     }
     return void 0;
   }, [foldIconVisible, folded, defaultHeight]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { ...rest, sx: styles.mergeSxList([{ position: "relative" }, rest == null ? void 0 : rest.sx]), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Box.Box,
-      {
-        p: "md",
-        mah,
-        bg: "carbon.2",
-        sx: (theme) => ({
-          border: `1px solid ${theme.colors.carbon[4]}`,
-          borderRadius: theme.defaultRadius,
-          overflow: "auto"
-        }),
-        children: codeRender ? codeRender(children) : /* @__PURE__ */ jsxRuntime.jsx(
-          CodeHighlight.CodeHighlight,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Box.Box,
+    {
+      p: "md",
+      mah,
+      bg: "carbon.2",
+      sx: (theme) => ({
+        display: "flex",
+        border: `1px solid ${theme.colors.carbon[4]}`,
+        borderRadius: theme.defaultRadius,
+        overflow: "auto"
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { sx: { flexGrow: 1 }, children: codeRender ? codeRender(children) : /* @__PURE__ */ jsxRuntime.jsx(
+          Prism.Prism,
           {
             ...codeHighlightProps,
-            withCopyButton: false,
-            code: children,
+            noCopy: true,
             language,
             styles: styles.mergeStylesList([
               {
-                root: {
-                  backgroundColor: `transparent !important`
-                },
-                pre: {
+                code: {
                   padding: 0,
+                  backgroundColor: `transparent !important`,
                   wordBreak: "break-all"
+                },
+                line: {
+                  paddingLeft: 0
+                },
+                lineContent: {
+                  whiteSpace: "pre-wrap"
                 }
-                // line: {
-                //   paddingLeft: 0
-                // },
-                // lineContent: {
-                //   whiteSpace: 'pre-wrap'
-                // }
               },
               codeHighlightProps == null ? void 0 : codeHighlightProps.styles
-            ])
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
-      foldIconVisible && /* @__PURE__ */ jsxRuntime.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionIcon.ActionIcon,
-          {
-            "aria-hidden": true,
-            size: "sm",
-            variant: "subtle",
-            onClick: () => {
-              const v = !folded;
-              setFolded(v);
-              onFoldIconClick == null ? void 0 : onFoldIconClick(v);
-            },
-            children: folded ? /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Dropdown, { children: folded ? "Expand" : "Collapse" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionIcon.ActionIcon,
-          {
-            "aria-label": "Copy",
-            size: "sm",
-            variant: "subtle",
-            onClick: () => {
-              copy();
-              onCopyClick == null ? void 0 : onCopyClick();
-            },
-            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(index.IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconCopy01, { size: 14, strokeWidth: 2.5 })
+            ]),
+            children
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Dropdown, { children: copied ? "Copied" : "Copy" })
-      ] }) })
-    ] })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: 4, sx: (theme) => ({ flexShrink: 0, alignContent: "flex-start", color: theme.colors.carbon[8] }), children: [
+          foldIconVisible && /* @__PURE__ */ jsxRuntime.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ActionIcon.ActionIcon,
+              {
+                "aria-hidden": true,
+                size: "sm",
+                variant: "subtle",
+                onClick: () => {
+                  const v = !folded;
+                  setFolded(v);
+                  onFoldIconClick == null ? void 0 : onFoldIconClick(v);
+                },
+                children: folded ? /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Dropdown, { p: "xs", children: folded ? "Expand" : "Collapse" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              ActionIcon.ActionIcon,
+              {
+                "aria-label": "Copy",
+                size: "sm",
+                variant: "subtle",
+                onClick: () => {
+                  copy();
+                  onCopyClick == null ? void 0 : onCopyClick();
+                },
+                children: copied ? /* @__PURE__ */ jsxRuntime.jsx(index.IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconCopy01, { size: 14, strokeWidth: 2.5 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Dropdown, { p: "xs", children: copied ? "Copied" : "Copy" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
 };
 const CopyText = ({ children, value, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -153,20 +150,23 @@ const CopyText = ({ children, value, ...rest }) => {
       },
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ActionIcon.ActionIcon,
-          {
-            "aria-label": "Copy",
-            variant: "subtle",
-            size: "sm",
-            ml: 8,
-            display: "inline-block",
-            onClick: () => {
-              copy();
-            },
-            children: copied ? /* @__PURE__ */ jsxRuntime.jsx(index.IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconCopy01, { size: 14, strokeWidth: 2.5 })
-          }
-        ) }) })
+        /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxs(HoverCard.HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            ActionIcon.ActionIcon,
+            {
+              "aria-label": "Copy",
+              variant: "subtle",
+              size: "sm",
+              ml: 8,
+              display: "inline-block",
+              onClick: () => {
+                copy();
+              },
+              children: copied ? /* @__PURE__ */ jsxRuntime.jsx(index.IconCheck, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(index.IconCopy01, { size: 14, strokeWidth: 2.5 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(HoverCard.HoverCard.Dropdown, { p: "xs", children: copied ? "Copied" : "Copy" })
+        ] }) })
       ]
     }
   );

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

@@ -1,13 +1,13 @@
-import { CodeHighlightProps } from '@mantine/code-highlight';
 import { default as React } from 'react';
 import { BoxProps, CodeProps } from '../../primitive/index.cjs';
+import { PrismProps } from '../../primitive/Prism/index.cjs';
 export interface CodeBlockProps extends BoxProps {
-    children: string;
-    language?: CodeHighlightProps['language'];
-    codeRender?: (content: string) => React.ReactNode;
+    children: PrismProps['children'];
+    language?: PrismProps['language'];
     copyContent?: string;
     onCopyClick?: () => void;
-    codeHighlightProps?: Omit<CodeHighlightProps, 'language' | 'children' | 'code'>;
+    codeRender?: (content: string) => React.ReactNode;
+    codeHighlightProps?: Omit<PrismProps, 'language' | 'children'>;
     foldProps?: {
         defaultHeight?: number;
         persistenceKey?: string;

package/dist/biz/CodeBlock/index.d.mts

@@ -1,13 +1,13 @@
-import { CodeHighlightProps } from '@mantine/code-highlight';
 import { default as React } from 'react';
 import { BoxProps, CodeProps } from '../../primitive/index.mjs';
+import { PrismProps } from '../../primitive/Prism/index.mjs';
 export interface CodeBlockProps extends BoxProps {
-    children: string;
-    language?: CodeHighlightProps['language'];
-    codeRender?: (content: string) => React.ReactNode;
+    children: PrismProps['children'];
+    language?: PrismProps['language'];
     copyContent?: string;
     onCopyClick?: () => void;
-    codeHighlightProps?: Omit<CodeHighlightProps, 'language' | 'children' | 'code'>;
+    codeRender?: (content: string) => React.ReactNode;
+    codeHighlightProps?: Omit<PrismProps, 'language' | 'children'>;
     foldProps?: {
         defaultHeight?: number;
         persistenceKey?: string;

package/dist/biz/CodeBlock/index.mjs

@@ -3,20 +3,18 @@ import { useMemo, useState } from "react";
 import { IconChevronVerticalExpand, IconChevronVerticalShrink, IconCheck, IconCopy01 } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
-/* empty css                                                                                                                                                                                                 */
 /* empty css                                                                                                                                                                                                */
 /* empty css                                                                                                                                                                                           */
 /* empty css                                                                                                                                                                                           */
 import "clsx";
-import { mergeSxList, mergeStylesList } from "../../utils/styles.mjs";
+import { mergeStylesList, mergeSxList } from "../../utils/styles.mjs";
 import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
-import { CodeHighlight } from "../../node_modules/.pnpm/@mantine_code-highlight@7.15.2_@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@ma_ba252il5m53wxwys6sp7krkgpi/node_modules/@mantine/code-highlight/esm/CodeHighlight.mjs";
+import { Prism } from "../../primitive/Prism/Prism.mjs";
 import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
 import { HoverCard } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/HoverCard/HoverCard.mjs";
 import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.mjs";
 import { CopyButton } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/CopyButton/CopyButton.mjs";
 import { Code } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Code/Code.mjs";
-import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.mjs";
 import { useLocalStorage } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-local-storage/use-local-storage.mjs";
 function useFold(persistenceKey) {
   const foldPersistenceKey = `${persistenceKey}.codeblock.fold`;
@@ -52,83 +50,82 @@ const CodeBlock = ({
     }
     return void 0;
   }, [foldIconVisible, folded, defaultHeight]);
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: mergeSxList([{ position: "relative" }, rest == null ? void 0 : rest.sx]), children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        p: "md",
-        mah,
-        bg: "carbon.2",
-        sx: (theme) => ({
-          border: `1px solid ${theme.colors.carbon[4]}`,
-          borderRadius: theme.defaultRadius,
-          overflow: "auto"
-        }),
-        children: codeRender ? codeRender(children) : /* @__PURE__ */ jsx(
-          CodeHighlight,
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      p: "md",
+      mah,
+      bg: "carbon.2",
+      sx: (theme) => ({
+        display: "flex",
+        border: `1px solid ${theme.colors.carbon[4]}`,
+        borderRadius: theme.defaultRadius,
+        overflow: "auto"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 }, children: codeRender ? codeRender(children) : /* @__PURE__ */ jsx(
+          Prism,
           {
             ...codeHighlightProps,
-            withCopyButton: false,
-            code: children,
+            noCopy: true,
             language,
             styles: mergeStylesList([
               {
-                root: {
-                  backgroundColor: `transparent !important`
-                },
-                pre: {
+                code: {
                   padding: 0,
+                  backgroundColor: `transparent !important`,
                   wordBreak: "break-all"
+                },
+                line: {
+                  paddingLeft: 0
+                },
+                lineContent: {
+                  whiteSpace: "pre-wrap"
                 }
-                // line: {
-                //   paddingLeft: 0
-                // },
-                // lineContent: {
-                //   whiteSpace: 'pre-wrap'
-                // }
               },
               codeHighlightProps == null ? void 0 : codeHighlightProps.styles
-            ])
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(Group, { gap: 4, sx: (theme) => ({ position: "absolute", top: 16, right: 16, color: theme.colors.carbon[8] }), children: [
-      foldIconVisible && /* @__PURE__ */ jsxs(HoverCard, { withArrow: true, position: "top", children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            "aria-hidden": true,
-            size: "sm",
-            variant: "subtle",
-            onClick: () => {
-              const v = !folded;
-              setFolded(v);
-              onFoldIconClick == null ? void 0 : onFoldIconClick(v);
-            },
-            children: folded ? /* @__PURE__ */ jsx(IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(HoverCard.Dropdown, { children: folded ? "Expand" : "Collapse" })
-      ] }),
-      /* @__PURE__ */ jsx(CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(HoverCard, { withArrow: true, position: "top", children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            "aria-label": "Copy",
-            size: "sm",
-            variant: "subtle",
-            onClick: () => {
-              copy();
-              onCopyClick == null ? void 0 : onCopyClick();
-            },
-            children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
+            ]),
+            children
           }
         ) }),
-        /* @__PURE__ */ jsx(HoverCard.Dropdown, { children: copied ? "Copied" : "Copy" })
-      ] }) })
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs(Group, { gap: 4, sx: (theme) => ({ flexShrink: 0, alignContent: "flex-start", color: theme.colors.carbon[8] }), children: [
+          foldIconVisible && /* @__PURE__ */ jsxs(HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+            /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                "aria-hidden": true,
+                size: "sm",
+                variant: "subtle",
+                onClick: () => {
+                  const v = !folded;
+                  setFolded(v);
+                  onFoldIconClick == null ? void 0 : onFoldIconClick(v);
+                },
+                children: folded ? /* @__PURE__ */ jsx(IconChevronVerticalExpand, { size: 14, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(IconChevronVerticalShrink, { size: 14, strokeWidth: 2.5 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(HoverCard.Dropdown, { p: "xs", children: folded ? "Expand" : "Collapse" })
+          ] }),
+          /* @__PURE__ */ jsx(CopyButton, { value: copyContent ?? children, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+            /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                "aria-label": "Copy",
+                size: "sm",
+                variant: "subtle",
+                onClick: () => {
+                  copy();
+                  onCopyClick == null ? void 0 : onCopyClick();
+                },
+                children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(HoverCard.Dropdown, { p: "xs", children: copied ? "Copied" : "Copy" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
 };
 const CopyText = ({ children, value, ...rest }) => {
   return /* @__PURE__ */ jsxs(
@@ -151,20 +148,23 @@ const CopyText = ({ children, value, ...rest }) => {
       },
       children: [
         children,
-        /* @__PURE__ */ jsx(CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            "aria-label": "Copy",
-            variant: "subtle",
-            size: "sm",
-            ml: 8,
-            display: "inline-block",
-            onClick: () => {
-              copy();
-            },
-            children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
-          }
-        ) }) })
+        /* @__PURE__ */ jsx(CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(HoverCard, { withArrow: true, position: "top", shadow: "xs", children: [
+          /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              "aria-label": "Copy",
+              variant: "subtle",
+              size: "sm",
+              ml: 8,
+              display: "inline-block",
+              onClick: () => {
+                copy();
+              },
+              children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy01, { size: 14, strokeWidth: 2.5 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(HoverCard.Dropdown, { p: "xs", children: copied ? "Copied" : "Copy" })
+        ] }) })
       ]
     }
   );

package/dist/biz/DateTimePicker/TimeScollerPicker.cjs

@@ -6,7 +6,6 @@ const lodashEs = require("lodash-es");
 const React = require("react");
 ;/* empty css                                                                                                                                                                                        */
 ;/* empty css                                                                                                                                                                                         */
-;/* empty css                                                                                                                                                                                                  */
 ;/* empty css                                                                                                                                                                                                 */
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */

package/dist/biz/DateTimePicker/TimeScollerPicker.mjs

@@ -4,7 +4,6 @@ import { range, padStart } from "lodash-es";
 import { useMemo, useRef, useEffect } from "react";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
-/* empty css                                                                                                                                                                                                 */
 /* empty css                                                                                                                                                                                                */
 /* empty css                                                                                                                                                                                           */
 /* empty css                                                                                                                                                                                           */

package/dist/biz/DateTimePicker/index.cjs

@@ -6,7 +6,6 @@ const React = require("react");
 const index = require("../../icons/index.cjs");
 ;/* empty css                                                                                                                                                                                        */
 ;/* empty css                                                                                                                                                                                         */
-;/* empty css                                                                                                                                                                                                  */
 ;/* empty css                                                                                                                                                                                                 */
 ;/* empty css                                                                                                                                                                                            */
 ;/* empty css                                                                                                                                                                                            */
@@ -92,7 +91,7 @@ const DateTimePicker = ({
     next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
     updateCurrentValue(next, "timeScroller");
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
       TextInput.TextInput,
       {
@@ -101,9 +100,10 @@ const DateTimePicker = ({
         placeholder,
         value: inputStr,
         rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
-        onClick: open,
         sx,
-        size
+        size,
+        onFocus: open,
+        onBlur: close
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
@@ -115,34 +115,8 @@ const DateTimePicker = ({
             maxDate: endDate,
             value: currentValue.toDate(),
             onChange: calendarChange,
-            size: "sm",
-            styles: () => ({
-              calendarHeaderLevel: {
-                height: 32
-              },
-              calendarHeaderControl: {
-                height: 32,
-                width: 32
-              },
-              weekdaysRow: {
-                display: "flex",
-                gap: 8
-              },
-              weekday: {
-                height: 32,
-                width: 32,
-                lineHeight: "32px"
-              },
-              monthRow: {
-                display: "flex",
-                gap: 8
-              },
-              day: {
-                height: 32,
-                width: 32,
-                lineHeight: "32px"
-              }
-            })
+            withCellSpacing: false,
+            size: "md"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),

package/dist/biz/DateTimePicker/index.mjs

@@ -4,7 +4,6 @@ import { useState, useMemo } from "react";
 import { IconClock } from "../../icons/index.mjs";
 /* empty css                                                                                                                                                                                       */
 /* empty css                                                                                                                                                                                        */
-/* empty css                                                                                                                                                                                                 */
 /* empty css                                                                                                                                                                                                */
 /* empty css                                                                                                                                                                                           */
 /* empty css                                                                                                                                                                                           */
@@ -90,7 +89,7 @@ const DateTimePicker = ({
     next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
     updateCurrentValue(next, "timeScroller");
   });
-  return /* @__PURE__ */ jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
+  return /* @__PURE__ */ jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
     /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
       TextInput,
       {
@@ -99,9 +98,10 @@ const DateTimePicker = ({
         placeholder,
         value: inputStr,
         rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
-        onClick: open,
         sx,
-        size
+        size,
+        onFocus: open,
+        onBlur: close
       }
     ) }),
     /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, { children: [
@@ -113,34 +113,8 @@ const DateTimePicker = ({
             maxDate: endDate,
             value: currentValue.toDate(),
             onChange: calendarChange,
-            size: "sm",
-            styles: () => ({
-              calendarHeaderLevel: {
-                height: 32
-              },
-              calendarHeaderControl: {
-                height: 32,
-                width: 32
-              },
-              weekdaysRow: {
-                display: "flex",
-                gap: 8
-              },
-              weekday: {
-                height: 32,
-                width: 32,
-                lineHeight: "32px"
-              },
-              monthRow: {
-                display: "flex",
-                gap: 8
-              },
-              day: {
-                height: 32,
-                width: 32,
-                lineHeight: "32px"
-              }
-            })
+            withCellSpacing: false,
+            size: "md"
           }
         ),
         /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),