@mastra/playground-ui 30.0.0-alpha.2 → 30.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # @mastra/playground-ui
 
+## 30.0.0-alpha.4
+
+### Patch Changes
+
+- Updated dependencies [[`b7286f4`](https://github.com/mastra-ai/mastra/commit/b7286f4308267f5fd70e6bfee10dba9472640906), [`a481027`](https://github.com/mastra-ai/mastra/commit/a481027b549ba1018414990c8f045eaee7b9f413), [`801baa0`](https://github.com/mastra-ai/mastra/commit/801baa07cccdbaec1d00942a92bdc831111744a2), [`b3c3b18`](https://github.com/mastra-ai/mastra/commit/b3c3b189121489a3a51a8fd8204b569be9a89fe5)]:
+  - @mastra/core@1.37.0-alpha.4
+  - @mastra/client-js@1.21.0-alpha.4
+  - @mastra/react@0.4.1-alpha.4
+
+## 30.0.0-alpha.3
+
+### Minor Changes
+
+- Added a Drawer component — a panel that slides in from any edge of the screen with swipe-to-dismiss gestures. ([#16958](https://github.com/mastra-ai/mastra/pull/16958))
+
+  The Drawer can be anchored to any of the four screen edges and supports snap points, nested stacking, controlled state, non-modal mode, swipe-to-open areas, and detached triggers.
+
+  ```tsx
+  import {
+    Drawer,
+    DrawerTrigger,
+    DrawerContent,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerClose,
+    Button,
+  } from '@mastra/playground-ui';
+
+  <Drawer side="right">
+    <DrawerTrigger asChild>
+      <Button>Open</Button>
+    </DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Library</DrawerTitle>
+        <DrawerDescription>A panel that slides in from the right edge.</DrawerDescription>
+      </DrawerHeader>
+      <DrawerFooter>
+        <DrawerClose asChild>
+          <Button variant="outline">Close</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>;
+  ```
+
+- Added a reusable `HoverCard` component (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) built on Base UI. You can now use these exported components to add hover card interactions anywhere in your UI. ([#16919](https://github.com/mastra-ai/mastra/pull/16919))
+
+  ```tsx
+  import { HoverCard, HoverCardTrigger, HoverCardContent } from '@mastra/playground-ui';
+
+  <HoverCard>
+    <HoverCardTrigger>Weather Agent</HoverCardTrigger>
+    <HoverCardContent>Answers questions about current conditions and forecasts.</HoverCardContent>
+  </HoverCard>;
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`ac442a4`](https://github.com/mastra-ai/mastra/commit/ac442a42fda0354ac2bcea772bf6691cb3e9dbb3), [`1e5c067`](https://github.com/mastra-ai/mastra/commit/1e5c067d2e20a781af670578180d1ee249806d41), [`008baaf`](https://github.com/mastra-ai/mastra/commit/008baafd8d851f831407045aebead5a2e3342eff), [`8116436`](https://github.com/mastra-ai/mastra/commit/81164363eb225d774e41ff27da6a5ea611406688), [`c27c4b9`](https://github.com/mastra-ai/mastra/commit/c27c4b9f137df5414fca4e45896aceccff6b0ed5), [`08b3b59`](https://github.com/mastra-ai/mastra/commit/08b3b590dd960dee6c9a6e39272f8927d803db6e)]:
+  - @mastra/core@1.37.0-alpha.3
+  - @mastra/client-js@1.21.0-alpha.3
+  - @mastra/react@0.4.1-alpha.3
+
 ## 30.0.0-alpha.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -27,8 +27,10 @@ const cmdk = require('cmdk');
 const dialog = require('@base-ui/react/dialog');
 const SelectPrimitive = require('@radix-ui/react-select');
 const tabs = require('@base-ui/react/tabs');
+const drawer = require('@base-ui/react/drawer');
 const menu = require('@base-ui/react/menu');
 const VisuallyHidden = require('@radix-ui/react-visually-hidden');
+const previewCard = require('@base-ui/react/preview-card');
 const Markdown = require('react-markdown');
 const remarkGfm = require('remark-gfm');
 const popover = require('@base-ui/react/popover');
@@ -40,7 +42,6 @@ const slider = require('@base-ui/react/slider');
 const _switch = require('@base-ui/react/switch');
 const dateFns = require('date-fns');
 const reactDayPicker = require('react-day-picker');
-const HoverCard = require('@radix-ui/react-hover-card');
 const reactSlot = require('@radix-ui/react-slot');
 const Dialog$1 = require('@radix-ui/react-dialog');
 const dnd = require('@hello-pangea/dnd');
@@ -76,7 +77,6 @@ function _interopNamespaceDefault(e) {
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
 const VisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(VisuallyHidden);
-const HoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(HoverCard);
 const Dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(Dialog$1);
 
 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}
@@ -6983,6 +6983,138 @@ function DashboardCard({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border border-border1 rounded-xl px-4 py-3 bg-surface-overlay-soft", className), children });
 }
 
+const sideToSwipeDirection = {
+  top: "up",
+  bottom: "down",
+  left: "left",
+  right: "right"
+};
+const DrawerSideContext = React__namespace.createContext("bottom");
+const useDrawerSide = () => React__namespace.useContext(DrawerSideContext);
+function Drawer({ side = "bottom", children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerSideContext.Provider, { value: side, children: /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Root, { swipeDirection: sideToSwipeDirection[side], ...props, children }) });
+}
+Drawer.displayName = "Drawer";
+function DrawerTrigger({ asChild, children, ...props }) {
+  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Trigger, { ...renderProps, ...props, children: asChild ? void 0 : children });
+}
+DrawerTrigger.displayName = "DrawerTrigger";
+const DrawerClose = React__namespace.forwardRef(({ asChild, children, ...props }, ref) => {
+  const renderProps = asChild && React__namespace.isValidElement(children) ? { render: children } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Close, { ref, ...renderProps, ...props, children: asChild ? void 0 : children });
+});
+DrawerClose.displayName = "DrawerClose";
+const DrawerPortal = drawer.Drawer.Portal;
+const DrawerProvider = drawer.Drawer.Provider;
+const DrawerIndent = drawer.Drawer.Indent;
+const DrawerIndentBackground = drawer.Drawer.IndentBackground;
+const DrawerSwipeArea = drawer.Drawer.SwipeArea;
+const createDrawerHandle = drawer.Drawer.createHandle;
+const DrawerBackdrop = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  drawer.Drawer.Backdrop,
+  {
+    ref,
+    "data-slot": "drawer-backdrop",
+    className: cn("drawer-backdrop fixed inset-0 z-50 bg-overlay backdrop-blur-xs", className),
+    ...props
+  }
+));
+DrawerBackdrop.displayName = "DrawerBackdrop";
+const viewportSideClasses = {
+  top: "items-start justify-center",
+  bottom: "items-end justify-center",
+  left: "items-stretch justify-start",
+  right: "items-stretch justify-end"
+};
+const DrawerViewport = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  const side = useDrawerSide();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drawer.Drawer.Viewport,
+    {
+      ref,
+      "data-slot": "drawer-viewport",
+      className: cn("fixed inset-0 z-50 flex", viewportSideClasses[side], className),
+      ...props
+    }
+  );
+});
+DrawerViewport.displayName = "DrawerViewport";
+const drawerPopupBaseClass = cn(
+  "drawer-popup group/popup relative z-50 box-border flex flex-col overflow-y-auto overscroll-contain outline-none [touch-action:auto] will-change-transform",
+  "border-border1 bg-surface3 text-neutral5 shadow-dialog",
+  "data-[swiping]:select-none",
+  // Dim layer drawn over a parent drawer while a nested drawer covers it.
+  "after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-[450ms] after:content-['']",
+  "data-[nested-drawer-open]:after:bg-black/25"
+);
+const popupSideClasses = {
+  bottom: "h-[var(--drawer-height,auto)] max-h-[calc(85vh_+_3rem)] w-full -mb-12 pb-12 rounded-t-xl border-x border-t",
+  top: "h-[var(--drawer-height,auto)] max-h-[calc(85vh_+_3rem)] w-full -mt-12 pt-12 rounded-b-xl border-x border-b",
+  left: "h-full w-[20rem] max-w-[85vw] rounded-r-xl border-y border-r",
+  right: "h-full w-[20rem] max-w-[85vw] rounded-l-xl border-y border-l"
+};
+const DrawerPopup = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  const side = useDrawerSide();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drawer.Drawer.Popup,
+    {
+      ref,
+      "data-slot": "drawer-popup",
+      className: cn(drawerPopupBaseClass, popupSideClasses[side], className),
+      ...props
+    }
+  );
+});
+DrawerPopup.displayName = "DrawerPopup";
+const nestedFadeClass = cn(
+  "transition-opacity duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:duration-0",
+  "group-data-[nested-drawer-open]/popup:opacity-0"
+);
+const HandleBar = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto my-2 h-1 w-12 shrink-0 rounded-full bg-surface5", nestedFadeClass) });
+const DrawerContent = React__namespace.forwardRef(
+  ({ className, children, container, hideBackdrop, hideCloseButton, hideHandle, ...props }, ref) => {
+    const side = useDrawerSide();
+    const showHandle = !hideHandle && (side === "top" || side === "bottom");
+    return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { container: container ?? void 0, children: [
+      !hideBackdrop && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackdrop, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(DrawerViewport, { className: hideBackdrop ? "pointer-events-none" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(DrawerPopup, { ref, className: cn(hideBackdrop && "pointer-events-auto", className), ...props, children: [
+        showHandle && side === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "drawer-content", className: cn("relative flex min-h-0 flex-1 flex-col", nestedFadeClass), children: [
+          children,
+          !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+            drawer.Drawer.Close,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", className: "absolute top-3 right-3", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+            }
+          )
+        ] }),
+        showHandle && side === "top" && /* @__PURE__ */ jsxRuntime.jsx(HandleBar, {})
+      ] }) })
+    ] });
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 px-4 py-3 text-left", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    "data-slot": "drawer-footer",
+    className: cn("mt-auto flex flex-col-reverse gap-1.5 px-4 py-3 sm:flex-row sm:justify-end", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "drawer-body", className: cn("flex-1 px-4 py-3", className), ...props });
+DrawerBody.displayName = "DrawerBody";
+const DrawerTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Title, { ref, className: cn("text-ui-md font-medium text-neutral6", className), ...props }));
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Description, { ref, className: cn("text-ui-sm text-neutral3", className), ...props })
+);
+DrawerDescription.displayName = "DrawerDescription";
+
 const DropdownMenuRoot = menu.Menu.Root;
 const DropdownMenuGroup = menu.Menu.Group;
 const DropdownMenuPortal = menu.Menu.Portal;
@@ -7541,6 +7673,32 @@ function SelectFieldBlock({
   ] });
 }
 
+const HoverCard = previewCard.PreviewCard.Root;
+const HoverCardTrigger = React__namespace.forwardRef(
+  ({ className, delay = 250, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Trigger, { ref, delay, className, ...props })
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
+const HoverCardContent = React__namespace.forwardRef(
+  ({ className, children, side = "top", align, sideOffset = 5, container, showArrow = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Positioner, { side, align, sideOffset, className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    previewCard.PreviewCard.Popup,
+    {
+      ref,
+      className: cn(
+        "w-auto max-w-100 rounded-md border border-border1 bg-surface5 p-2 px-4 text-ui-sm text-neutral5 origin-[var(--transform-origin)]",
+        "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsxRuntime.jsx(previewCard.PreviewCard.Arrow, { className: "fill-surface5" })
+      ]
+    }
+  ) }) })
+);
+HoverCardContent.displayName = "HoverCardContent";
+
 const InputGroupSizeContext = React__namespace.createContext("md");
 const inputGroupClassName = cn(
   "group/input-group relative flex w-full min-w-0 items-stretch",
@@ -10489,20 +10647,9 @@ function KeyValueList({ data, className, labelsAreHidden, isLoading, LinkCompone
   }) });
 }
 function RelationWrapper({ description, children }) {
-  return description ? /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      HoverCard__namespace.Content,
-      {
-        className: "z-50 w-auto max-w-60 rounded-md bg-surface5 p-2 px-4 text-ui-sm text-neutral5 text-center",
-        sideOffset: 5,
-        side: "top",
-        children: [
-          description,
-          /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
-        ]
-      }
-    ) })
+  return description ? /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCardTrigger, { render: React.isValidElement(children) ? children : void 0 }),
+    /* @__PURE__ */ jsxRuntime.jsx(HoverCardContent, { className: "max-w-60 text-center", children: description })
   ] }) : children;
 }
 
@@ -19195,9 +19342,9 @@ function TimelineTimingCol({
   const spanStartTimeDate = span.startTime ? new Date(span.startTime) : null;
   const spanStartTimeShift = spanStartTimeDate && overallStartTimeDate ? spanStartTimeDate.getTime() - overallStartTimeDate.getTime() : 0;
   const percentageSpanStartTime = overallLatency && Math.floor(spanStartTimeShift / overallLatency * 100);
-  return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard__namespace.Root, { openDelay: 250, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      HoverCard__namespace.Trigger,
+      HoverCardTrigger,
       {
         className: cn(
           "h-8 p-1 grid grid-cols-[1fr_auto] gap-2 items-center cursor-help pr-2 rounded-r-md",
@@ -19227,34 +19374,25 @@ function TimelineTimingCol({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      HoverCard__namespace.Content,
-      {
-        className: "z-50 w-auto max-w-100 rounded-md bg-surface4 p-2 px-4 pr-6 text-ui-sm text-neutral5 border border-border1",
-        sideOffset: 5,
-        side: "top",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-ui-sm flex items-center gap-2 mb-2 mt-1"), children: "Span Timing" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Latency" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
-              span.latency,
-              " ms"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started at" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended at" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
-            /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
-              spanStartTimeShift,
-              "ms"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(HoverCard__namespace.Arrow, { className: "fill-surface5" })
-        ]
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntime.jsxs(HoverCardContent, { className: "bg-surface4 pr-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-ui-sm flex items-center gap-2 mb-2 mt-1"), children: "Span Timing" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Latency" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
+          span.latency,
+          " ms"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Started at" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.startTime ? format.format(new Date(span.startTime), "hh:mm:ss:SSS a") : "-" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Ended at" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Value, { children: span.endTime ? format.format(new Date(span.endTime), "hh:mm:ss:SSS a") : "-" }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataKeysAndValues.Key, { children: "Start Shift" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(DataKeysAndValues.Value, { children: [
+          spanStartTimeShift,
+          "ms"
+        ] })
+      ] })
+    ] })
   ] });
 }
 
@@ -22038,6 +22176,23 @@ exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DividerIcon = DividerIcon;
 exports.DocsIcon = DocsIcon;
+exports.Drawer = Drawer;
+exports.DrawerBackdrop = DrawerBackdrop;
+exports.DrawerBody = DrawerBody;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerIndent = DrawerIndent;
+exports.DrawerIndentBackground = DrawerIndentBackground;
+exports.DrawerPopup = DrawerPopup;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerProvider = DrawerProvider;
+exports.DrawerSwipeArea = DrawerSwipeArea;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+exports.DrawerViewport = DrawerViewport;
 exports.DropdownMenu = DropdownMenu;
 exports.EXTENSION_TO_MIME = EXTENSION_TO_MIME;
 exports.ElementSelect = ElementSelect;
@@ -22079,6 +22234,9 @@ exports.HeaderGroup = HeaderGroup;
 exports.HeaderTitle = HeaderTitle;
 exports.HomeIcon = HomeIcon;
 exports.HorizontalBars = HorizontalBars;
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
 exports.HoverPopover = HoverPopover;
 exports.Icon = Icon;
 exports.InfoIcon = InfoIcon;
@@ -22309,6 +22467,7 @@ exports.comboboxStyles = comboboxStyles;
 exports.countLeafRules = countLeafRules;
 exports.createDefaultRule = createDefaultRule;
 exports.createDefaultRuleGroup = createDefaultRuleGroup;
+exports.createDrawerHandle = createDrawerHandle;
 exports.createField = createField;
 exports.createLogsPropertyFilterFields = createLogsPropertyFilterFields;
 exports.createMetricsPropertyFilterFields = createMetricsPropertyFilterFields;