@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/data-panel-3TqqdlmK.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import { B as Button } from './Button-XSiL3zvL.js';
+import { Drawer } from '@base-ui/react/drawer';
+import { c as cn } from './cn-Dxjsbr9n.js';
+import { controlSizeClasses } from './primitives/control-size.es.js';
+import { S as Spinner } from './spinner-RdQ_iJAG.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-D1PLTHDf.js';
+import { Icon } from './icons/Icon.es.js';
+import { transitions } from './primitives/transitions.es.js';
+import { B as ButtonsGroup } from './buttons-group-ACr7Jau0.js';
+import * as React from 'react';
+import { PortalContainerProvider } from './primitives/portal-container.es.js';
+import './drawer.css';/* empty css                */
+import { D as DataPanelSectionHeading } from './data-panel-section-heading-DhzuleNL.js';
+import { D as DataCodeSection } from './data-code-section-AstkW2b3.js';
+
+function DataPanelCloseButton({
+  onClick,
+  tooltip = "Close panel",
+  className,
+  variant = "ghost"
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "sm",
+      variant,
+      onClick,
+      "aria-label": "Close Panel",
+      tooltip,
+      className,
+      children: /* @__PURE__ */ jsx(XIcon, {})
+    }
+  );
+}
+
+function DataPanelContent({ children, ref, className }) {
+  return /* @__PURE__ */ jsx(Drawer.Content, { ref, className: cn("min-h-0 flex-1 overflow-y-auto px-2 py-3", className), children });
+}
+
+function DataPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Same box as the app `Header`: `items-center` + a column left block (`HeaderContent`)
+        // is what centers `HeaderActions` against heading + metadata, not just the heading.
+        // `py-1.5` lets a two-line header grow without touching the border.
+        "flex min-h-header-default w-full items-center gap-2 px-2 py-1.5",
+        // Bottom border only when something follows the header (i.e. the panel is expanded).
+        // When the panel is collapsed and the header is the only child, the border auto-hides.
+        "not-last:border-b not-last:border-border1",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function DataPanelHeaderActions({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2 self-center", children });
+}
+
+function DataPanelHeaderContent({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0", children });
+}
+
+function DataPanelHeading({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(
+        // Same recipe as a current `Crumb` in the page header, so a panel title reads like the
+        // route title: the pill box sits on the header `px-2`, like a crumb in the page header.
+        "inline-flex max-w-full min-w-0 items-center gap-2 self-start rounded-full px-[.9em]",
+        controlSizeClasses.sm,
+        "cursor-default font-medium text-neutral6 [&>b]:font-normal [&>b]:text-neutral3",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function DataPanelLoadingData({ children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "text-ui-sm text-neutral2 flex min-h-32 items-center justify-center gap-2 px-3 py-4", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "pulse", className: "text-neutral1" }),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataPanelMetadata({ children }) {
+  return /* @__PURE__ */ jsx("ul", { className: "text-ui-xs flex min-w-0 flex-wrap items-center gap-0.5 overflow-hidden", children });
+}
+function DataPanelMeta({ as, icon, tooltip, children, className, ...props }) {
+  const Root = as ?? "span";
+  const isInteractive = Boolean(as || props.href || props.to || props.onClick);
+  const hasTooltip = tooltip != null;
+  const root = /* @__PURE__ */ jsxs(
+    Root,
+    {
+      "aria-label": !isInteractive && typeof tooltip === "string" ? tooltip : void 0,
+      tabIndex: !isInteractive && hasTooltip ? 0 : void 0,
+      className: cn(
+        // Same recipe as `Crumb`, one size down so the pills sit under the heading.
+        "inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]",
+        controlSizeClasses.xs,
+        transitions.colors,
+        isInteractive ? "cursor-pointer text-neutral4 hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10" : cn("text-neutral3", hasTooltip && "cursor-help"),
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { size: "sm", className: cn("shrink-0 opacity-50 group-hover:opacity-100", transitions.opacity), children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("li", { className: "group h-form-xs flex min-w-0 shrink-0 items-center", children: !hasTooltip ? root : /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: root }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
+}
+
+function DataPanelNextPrevNav({
+  onPrevious,
+  onNext,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  variant = "ghost"
+}) {
+  return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant, tooltip: previousLabel, onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsx(ArrowUpIcon, {}) }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant, tooltip: nextLabel, onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsx(ArrowDownIcon, {}) })
+  ] });
+}
+
+function DataPanelNoData({ children }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-ui-sm text-neutral2 px-3 py-4", children: children ?? "No data found." });
+}
+
+const DEPTH_WIDTH = { 1: "w-xl", 2: "w-lg", 3: "w-md" };
+const SIZE_WIDTH = { half: "w-1/2", wide: "w-4/5", full: "w-full" };
+const SIZE_PERCENT = { half: "50%", wide: "80%", full: "100%" };
+const DEPTH_PEEK_REM = 1.5;
+function DataPanelRoot({
+  open,
+  onClose,
+  title,
+  description,
+  depth = 1,
+  size = "md",
+  children,
+  className
+}) {
+  const [portalHost, setPortalHost] = React.useState(null);
+  return /* @__PURE__ */ jsx(
+    Drawer.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose?.();
+      },
+      swipeDirection: "right",
+      children: /* @__PURE__ */ jsxs(Drawer.Portal, { children: [
+        /* @__PURE__ */ jsx(Drawer.Backdrop, { className: "drawer-backdrop bg-overlay/30 fixed inset-0 z-50" }),
+        /* @__PURE__ */ jsx(Drawer.Viewport, { className: "fixed inset-0 z-50", children: /* @__PURE__ */ jsxs(
+          Drawer.Popup,
+          {
+            "data-slot": "data-panel-popup",
+            "data-depth": depth,
+            "data-size": size,
+            className: cn(
+              "drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none",
+              size === "md" ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size]
+            ),
+            style: size !== "md" && depth > 1 ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` } : void 0,
+            children: [
+              /* @__PURE__ */ jsx(Drawer.Title, { render: /* @__PURE__ */ jsx("span", {}), className: "sr-only", children: title }),
+              description && /* @__PURE__ */ jsx(Drawer.Description, { className: "sr-only", children: description }),
+              /* @__PURE__ */ jsx(Drawer.Content, { render: /* @__PURE__ */ jsx("div", { ref: setPortalHost, className: "absolute" }) }),
+              /* @__PURE__ */ jsx(PortalContainerProvider, { container: portalHost, children: /* @__PURE__ */ jsx(
+                Drawer.Content,
+                {
+                  render: /* @__PURE__ */ jsx("section", {}),
+                  className: cn(
+                    "flex max-h-full w-full flex-col overflow-hidden rounded-xl border border-border1 bg-surface2",
+                    className
+                  ),
+                  children
+                }
+              ) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+const DataPanel = Object.assign(DataPanelRoot, {
+  Header: DataPanelHeader,
+  HeaderContent: DataPanelHeaderContent,
+  HeaderActions: DataPanelHeaderActions,
+  Heading: DataPanelHeading,
+  Metadata: DataPanelMetadata,
+  Meta: DataPanelMeta,
+  CloseButton: DataPanelCloseButton,
+  NextPrevNav: DataPanelNextPrevNav,
+  LoadingData: DataPanelLoadingData,
+  NoData: DataPanelNoData,
+  Content: DataPanelContent,
+  CodeSection: DataCodeSection,
+  SectionHeading: DataPanelSectionHeading
+});
+
+export { DataPanel as D };
+//# sourceMappingURL=data-panel-3TqqdlmK.js.map

package/dist/data-panel-3TqqdlmK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-3TqqdlmK.js","sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelCloseButtonProps {\n  onClick: () => void;\n  tooltip?: string;\n  className?: string;\n  variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n  onClick,\n  tooltip = 'Close panel',\n  className,\n  variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n  return (\n    <Button\n      size=\"sm\"\n      variant={variant}\n      onClick={onClick}\n      aria-label=\"Close Panel\"\n      tooltip={tooltip}\n      className={className}\n    >\n      <XIcon />\n    </Button>\n  );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n  /** Layout overrides (e.g. padding) for the scroll container. */\n  className?: string;\n}\n\n// `DrawerPrimitive.Content` marks the region as swipe-exempt so scrolling or\n// selecting text inside the panel body doesn't start a swipe-to-dismiss.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n  return (\n    <DrawerPrimitive.Content ref={ref} className={cn('min-h-0 flex-1 overflow-y-auto px-2 py-3', className)}>\n      {children}\n    </DrawerPrimitive.Content>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n  return (\n    <div\n      className={cn(\n        // Same box as the app `Header`: `items-center` + a column left block (`HeaderContent`)\n        // is what centers `HeaderActions` against heading + metadata, not just the heading.\n        // `py-1.5` lets a two-line header grow without touching the border.\n        'flex min-h-header-default w-full items-center gap-2 px-2 py-1.5',\n        // Bottom border only when something follows the header (i.e. the panel is expanded).\n        // When the panel is collapsed and the header is the only child, the border auto-hides.\n        'not-last:border-b not-last:border-border1',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","export interface DataPanelHeaderActionsProps {\n  children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n  return <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","export interface DataPanelHeaderContentProps {\n  children: React.ReactNode;\n}\n\n/** Left block of a `DataPanel.Header`: heading on top, optional `Metadata` below. */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n  return <div className=\"flex min-w-0 flex-1 flex-col justify-center gap-0\">{children}</div>;\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n  return (\n    <h3\n      className={cn(\n        // Same recipe as a current `Crumb` in the page header, so a panel title reads like the\n        // route title: the pill box sits on the header `px-2`, like a crumb in the page header.\n        'inline-flex max-w-full min-w-0 items-center gap-2 self-start rounded-full px-[.9em]',\n        controlSizeClasses.sm,\n        'cursor-default font-medium text-neutral6 [&>b]:font-normal [&>b]:text-neutral3',\n        className,\n      )}\n    >\n      {children}\n    </h3>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n  children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n  return (\n    <div className=\"text-ui-sm text-neutral2 flex min-h-32 items-center justify-center gap-2 px-3 py-4\">\n      <Spinner size=\"sm\" variant=\"pulse\" className=\"text-neutral1\" /> {children ?? 'Loading...'}\n    </div>\n  );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n  children: React.ReactNode;\n}\n\n/** Row of small `Meta` pills under a `DataPanel.Heading`. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n  return <ul className=\"text-ui-xs flex min-w-0 flex-wrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n  /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n  as?: React.ElementType;\n  href?: string;\n  to?: string;\n  /** Prefix icon (bare SVG). */\n  icon?: React.ReactNode;\n  /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n  tooltip?: React.ReactNode;\n  children: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n  const Root = as ?? 'span';\n  const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n  const hasTooltip = tooltip != null;\n  const root = (\n    <Root\n      aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n      tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n      className={cn(\n        // Same recipe as `Crumb`, one size down so the pills sit under the heading.\n        'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n        controlSizeClasses.xs,\n        transitions.colors,\n        isInteractive\n          ? 'cursor-pointer text-neutral4 hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10'\n          : cn('text-neutral3', hasTooltip && 'cursor-help'),\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <Icon size=\"sm\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n          {icon}\n        </Icon>\n      )}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </Root>\n  );\n\n  return (\n    <li className=\"group h-form-xs flex min-w-0 shrink-0 items-center\">\n      {!hasTooltip ? (\n        root\n      ) : (\n        <Tooltip>\n          <TooltipTrigger render={root} />\n          <TooltipContent>{tooltip}</TooltipContent>\n        </Tooltip>\n      )}\n    </li>\n  );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\n\nexport interface DataPanelNextPrevNavProps {\n  onPrevious?: () => void;\n  onNext?: () => void;\n  previousLabel?: string;\n  nextLabel?: string;\n  variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelNextPrevNav({\n  onPrevious,\n  onNext,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n  return (\n    <ButtonsGroup spacing=\"close\">\n      <Button size=\"sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n        <ArrowUpIcon />\n      </Button>\n      <Button size=\"sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n        <ArrowDownIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n","export interface DataPanelNoDataProps {\n  children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n  return <p className=\"text-ui-sm text-neutral2 px-3 py-4\">{children ?? 'No data found.'}</p>;\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\nexport interface DataPanelProps {\n  /** Whether the panel is shown. The panel is always a modal Drawer dialog. */\n  open: boolean;\n  /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n  onClose?: () => void;\n  /** Accessible dialog name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n  title: string;\n  /** Accessible dialog description (screen-reader only). */\n  description?: string;\n  /**\n   * Elevation level when several sibling panels are open at once (not nested in\n   * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n   * narrower so the one beneath peeks out on the left. Siblings stack in mount\n   * order: render the deeper panel after the shallower one.\n   */\n  depth?: 1 | 2 | 3;\n  /**\n   * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n   * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n   * trace panel); each `depth` level trims them by a small fixed amount so a\n   * same-size parent still peeks out beneath.\n   */\n  size?: 'md' | 'half' | 'wide' | 'full';\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot({\n  open,\n  onClose,\n  title,\n  description,\n  depth = 1,\n  size = 'md',\n  children,\n  className,\n}: DataPanelProps) {\n  // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n  // stay inside Base UI's modal focus region and don't start a drawer swipe on\n  // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n  const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <DrawerPrimitive.Root\n      open={open}\n      onOpenChange={nextOpen => {\n        if (!nextOpen) onClose?.();\n      }}\n      swipeDirection=\"right\"\n    >\n      <DrawerPrimitive.Portal>\n        {/* Lighter than the shared `--overlay`: a side panel should keep the page beneath readable. */}\n        <DrawerPrimitive.Backdrop className=\"drawer-backdrop bg-overlay/30 fixed inset-0 z-50\" />\n        <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n          <DrawerPrimitive.Popup\n            data-slot=\"data-panel-popup\"\n            data-depth={depth}\n            data-size={size}\n            className={cn(\n              'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n              size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n            )}\n            style={\n              size !== 'md' && depth > 1\n                ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n                : undefined\n            }\n          >\n            {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n            <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n              {title}\n            </DrawerPrimitive.Title>\n            {description && (\n              <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n            )}\n\n            <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n            <PortalContainerProvider container={portalHost}>\n              {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n              <DrawerPrimitive.Content\n                render={<section />}\n                className={cn(\n                  'flex max-h-full w-full flex-col overflow-hidden rounded-xl border border-border1 bg-surface2',\n                  className,\n                )}\n              >\n                {children}\n              </DrawerPrimitive.Content>\n            </PortalContainerProvider>\n          </DrawerPrimitive.Popup>\n        </DrawerPrimitive.Viewport>\n      </DrawerPrimitive.Portal>\n    </DrawerPrimitive.Root>\n  );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n  Header: DataPanelHeader,\n  HeaderContent: DataPanelHeaderContent,\n  HeaderActions: DataPanelHeaderActions,\n  Heading: DataPanelHeading,\n  Metadata: DataPanelMetadata,\n  Meta: DataPanelMeta,\n  CloseButton: DataPanelCloseButton,\n  NextPrevNav: DataPanelNextPrevNav,\n  LoadingData: DataPanelLoadingData,\n  NoData: DataPanelNoData,\n  Content: DataPanelContent,\n  CodeSection: DataCodeSection,\n  SectionHeading: DataPanelSectionHeading,\n});\n"],"names":["DrawerPrimitive"],"mappings":";;;;;;;;;;;;;;;;;AAWO,SAAS,oBAAA,CAAqB;AAAA,EACnC,OAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,SAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,EAA8B;AAC5B,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,IAAA;AAAA,MACL,OAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA,EAAW,aAAA;AAAA,MACX,OAAA;AAAA,MACA,SAAA;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAM;AAAA;AAAA,GACT;AAEJ;;ACfO,SAAS,gBAAA,CAAiB,EAAE,QAAA,EAAU,GAAA,EAAK,WAAU,EAA0B;AACpF,EAAA,uBACE,GAAA,CAACA,MAAA,CAAgB,OAAA,EAAhB,EAAwB,GAAA,EAAU,WAAW,EAAA,CAAG,0CAAA,EAA4C,SAAS,CAAA,EACnG,QAAA,EACH,CAAA;AAEJ;;ACbO,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,QAAA,EAAS,EAAyB;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA;AAAA,QAIT,iEAAA;AAAA;AAAA;AAAA,QAGA,2CAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;AChBO,SAAS,sBAAA,CAAuB,EAAE,QAAA,EAAS,EAAgC;AAChF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4EAAA,EAA8E,QAAA,EAAS,CAAA;AAC/G;;ACLO,SAAS,sBAAA,CAAuB,EAAE,QAAA,EAAS,EAAgC;AAChF,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EAAqD,QAAA,EAAS,CAAA;AACtF;;ACCO,SAAS,gBAAA,CAAiB,EAAE,SAAA,EAAW,QAAA,EAAS,EAA0B;AAC/E,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA,QAGT,qFAAA;AAAA,QACA,kBAAA,CAAmB,EAAA;AAAA,QACnB,gFAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;AChBO,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAS,EAA8B;AAC5E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oFAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAQ,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,WAAU,eAAA,EAAgB,CAAA;AAAA,IAAE,GAAA;AAAA,IAAE,QAAA,IAAY;AAAA,GAAA,EAC/E,CAAA;AAEJ;;ACFO,SAAS,iBAAA,CAAkB,EAAE,QAAA,EAAS,EAA2B;AACtE,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,wEAAA,EAA0E,QAAA,EAAS,CAAA;AAC1G;AAeO,SAAS,aAAA,CAAc,EAAE,EAAA,EAAI,IAAA,EAAM,SAAS,QAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAM,EAAuB;AACtG,EAAA,MAAM,OAAO,EAAA,IAAM,MAAA;AACnB,EAAA,MAAM,aAAA,GAAgB,QAAQ,EAAA,IAAM,KAAA,CAAM,QAAQ,KAAA,CAAM,EAAA,IAAM,MAAM,OAAO,CAAA;AAE3E,EAAA,MAAM,aAAa,OAAA,IAAW,IAAA;AAC9B,EAAA,MAAM,IAAA,mBACJ,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAY,CAAC,aAAA,IAAiB,OAAO,OAAA,KAAY,WAAW,OAAA,GAAU,MAAA;AAAA,MACtE,QAAA,EAAU,CAAC,aAAA,IAAiB,UAAA,GAAa,CAAA,GAAI,MAAA;AAAA,MAC7C,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,+EAAA;AAAA,QACA,kBAAA,CAAmB,EAAA;AAAA,QACnB,WAAA,CAAY,MAAA;AAAA,QACZ,aAAA,GACI,4FAAA,GACA,EAAA,CAAG,eAAA,EAAiB,cAAc,aAAa,CAAA;AAAA,QACnD;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAK,SAAA,EAAW,GAAG,6CAAA,EAA+C,WAAA,CAAY,OAAO,CAAA,EAC7F,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAGF,EAAA,uBACE,GAAA,CAAC,QAAG,SAAA,EAAU,oDAAA,EACX,WAAC,UAAA,GACA,IAAA,wBAEC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,QAAQ,IAAA,EAAM,CAAA;AAAA,oBAC9B,GAAA,CAAC,kBAAgB,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC3B,CAAA,EAEJ,CAAA;AAEJ;;ACzDO,SAAS,oBAAA,CAAqB;AAAA,EACnC,UAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,UAAA;AAAA,EAChB,SAAA,GAAY,MAAA;AAAA,EACZ,OAAA,GAAU;AACZ,CAAA,EAA8B;AAC5B,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAQ,OAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,OAAA,EAAkB,OAAA,EAAS,aAAA,EAAe,OAAA,EAAS,UAAA,EAAY,QAAA,EAAU,CAAC,UAAA,EAC1F,QAAA,kBAAA,GAAA,CAAC,eAAY,CAAA,EACf,CAAA;AAAA,oBACA,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,SAAkB,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,MAAA,EAAQ,QAAA,EAAU,CAAC,MAAA,EAClF,QAAA,kBAAA,GAAA,CAAC,iBAAc,CAAA,EACjB;AAAA,GAAA,EACF,CAAA;AAEJ;;AC1BO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAS,EAAyB;AAClE,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,sBAAY,gBAAA,EAAiB,CAAA;AACzF;;AC8BA,MAAM,cAAc,EAAE,CAAA,EAAG,QAAQ,CAAA,EAAG,MAAA,EAAQ,GAAG,MAAA,EAAO;AACtD,MAAM,aAAa,EAAE,IAAA,EAAM,SAAS,IAAA,EAAM,OAAA,EAAS,MAAM,QAAA,EAAS;AAClE,MAAM,eAAe,EAAE,IAAA,EAAM,OAAO,IAAA,EAAM,KAAA,EAAO,MAAM,MAAA,EAAO;AAE9D,MAAM,cAAA,GAAiB,GAAA;AAEhB,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA;AACF,CAAA,EAAmB;AAIjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,KAAA,CAAM,SAAgC,IAAI,CAAA;AAE9E,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,IAAA;AAAA,MACA,cAAc,CAAA,QAAA,KAAY;AACxB,QAAA,IAAI,CAAC,UAAU,OAAA,IAAU;AAAA,MAC3B,CAAA;AAAA,MACA,cAAA,EAAe,OAAA;AAAA,MAEf,QAAA,kBAAA,IAAA,CAACA,MAAA,CAAgB,MAAA,EAAhB,EAEC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,MAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAU,kDAAA,EAAmD,CAAA;AAAA,wBACvF,GAAA,CAACA,MAAA,CAAgB,QAAA,EAAhB,EAAyB,WAAU,oBAAA,EAClC,QAAA,kBAAA,IAAA;AAAA,UAACA,MAAA,CAAgB,KAAA;AAAA,UAAhB;AAAA,YACC,WAAA,EAAU,kBAAA;AAAA,YACV,YAAA,EAAY,KAAA;AAAA,YACZ,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAW,EAAA;AAAA,cACT,4EAAA;AAAA,cACA,SAAS,IAAA,GAAO,WAAA,CAAY,KAAK,CAAA,GAAI,WAAW,IAAI;AAAA,aACtD;AAAA,YACA,OACE,IAAA,KAAS,IAAA,IAAQ,KAAA,GAAQ,CAAA,GACrB,EAAE,KAAA,EAAO,CAAA,KAAA,EAAQ,YAAA,CAAa,IAAI,CAAC,CAAA,GAAA,EAAA,CAAO,KAAA,GAAQ,CAAA,IAAK,cAAc,QAAO,GAC5E,MAAA;AAAA,YAIN,QAAA,EAAA;AAAA,8BAAA,GAAA,CAACA,MAAA,CAAgB,OAAhB,EAAsB,MAAA,sBAAS,MAAA,EAAA,EAAK,CAAA,EAAI,SAAA,EAAU,SAAA,EAChD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,cACC,+BACC,GAAA,CAACA,MAAA,CAAgB,aAAhB,EAA4B,SAAA,EAAU,WAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,8BAGhE,GAAA,CAACA,MAAA,CAAgB,OAAA,EAAhB,EAAwB,MAAA,kBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,aAAA,EAAe,SAAA,EAAU,UAAA,EAAW,CAAA,EAAI,CAAA;AAAA,8BAEnF,GAAA,CAAC,uBAAA,EAAA,EAAwB,SAAA,EAAW,UAAA,EAElC,QAAA,kBAAA,GAAA;AAAA,gBAACA,MAAA,CAAgB,OAAA;AAAA,gBAAhB;AAAA,kBACC,MAAA,sBAAS,SAAA,EAAA,EAAQ,CAAA;AAAA,kBACjB,SAAA,EAAW,EAAA;AAAA,oBACT,8FAAA;AAAA,oBACA;AAAA,mBACF;AAAA,kBAEC;AAAA;AAAA,eACH,EACF;AAAA;AAAA;AAAA,SACF,EACF;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ;;AChGO,MAAM,SAAA,GAAY,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACpD,MAAA,EAAQ,eAAA;AAAA,EACR,aAAA,EAAe,sBAAA;AAAA,EACf,aAAA,EAAe,sBAAA;AAAA,EACf,OAAA,EAAS,gBAAA;AAAA,EACT,QAAA,EAAU,iBAAA;AAAA,EACV,IAAA,EAAM,aAAA;AAAA,EACN,WAAA,EAAa,oBAAA;AAAA,EACb,WAAA,EAAa,oBAAA;AAAA,EACb,WAAA,EAAa,oBAAA;AAAA,EACb,MAAA,EAAQ,eAAA;AAAA,EACR,OAAA,EAAS,gBAAA;AAAA,EACT,WAAA,EAAa,eAAA;AAAA,EACb,cAAA,EAAgB;AAClB,CAAC;;;;"}

package/dist/data-panel-BmQlOkMA.cjs

@@ -0,0 +1,241 @@
+'use strict';
+
+require('./drawer.css');const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const Button = require('./Button-B1TWWXCy.cjs');
+const drawer = require('@base-ui/react/drawer');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+const primitives_controlSize = require('./primitives/control-size.cjs.js');
+const spinner = require('./spinner-DcDI1lhS.cjs');
+const tooltip = require('./tooltip-D9ylrXmx.cjs');
+const icons_Icon = require('./icons/Icon.cjs.js');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const buttonsGroup = require('./buttons-group-CdQdd_cj.cjs');
+const React = require('react');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+;/* empty css                  */
+const dataPanelSectionHeading = require('./data-panel-section-heading-BmSBR8A5.cjs');
+const dataCodeSection = require('./data-code-section-CKb8P3pZ.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function DataPanelCloseButton({
+  onClick,
+  tooltip = "Close panel",
+  className,
+  variant = "ghost"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      size: "sm",
+      variant,
+      onClick,
+      "aria-label": "Close Panel",
+      tooltip,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    }
+  );
+}
+
+function DataPanelContent({ children, ref, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Content, { ref, className: utils_cn.cn("min-h-0 flex-1 overflow-y-auto px-2 py-3", className), children });
+}
+
+function DataPanelHeader({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        // Same box as the app `Header`: `items-center` + a column left block (`HeaderContent`)
+        // is what centers `HeaderActions` against heading + metadata, not just the heading.
+        // `py-1.5` lets a two-line header grow without touching the border.
+        "flex min-h-header-default w-full items-center gap-2 px-2 py-1.5",
+        // Bottom border only when something follows the header (i.e. the panel is expanded).
+        // When the panel is collapsed and the header is the only child, the border auto-hides.
+        "not-last:border-b not-last:border-border1",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function DataPanelHeaderActions({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2 self-center", children });
+}
+
+function DataPanelHeaderContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0", children });
+}
+
+function DataPanelHeading({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      className: utils_cn.cn(
+        // Same recipe as a current `Crumb` in the page header, so a panel title reads like the
+        // route title: the pill box sits on the header `px-2`, like a crumb in the page header.
+        "inline-flex max-w-full min-w-0 items-center gap-2 self-start rounded-full px-[.9em]",
+        primitives_controlSize.controlSizeClasses.sm,
+        "cursor-default font-medium text-neutral6 [&>b]:font-normal [&>b]:text-neutral3",
+        className
+      ),
+      children
+    }
+  );
+}
+
+function DataPanelLoadingData({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-sm text-neutral2 flex min-h-32 items-center justify-center gap-2 px-3 py-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "sm", variant: "pulse", className: "text-neutral1" }),
+    " ",
+    children ?? "Loading..."
+  ] });
+}
+
+function DataPanelMetadata({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "text-ui-xs flex min-w-0 flex-wrap items-center gap-0.5 overflow-hidden", children });
+}
+function DataPanelMeta({ as, icon, tooltip: tooltip$1, children, className, ...props }) {
+  const Root = as ?? "span";
+  const isInteractive = Boolean(as || props.href || props.to || props.onClick);
+  const hasTooltip = tooltip$1 != null;
+  const root = /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      "aria-label": !isInteractive && typeof tooltip$1 === "string" ? tooltip$1 : void 0,
+      tabIndex: !isInteractive && hasTooltip ? 0 : void 0,
+      className: utils_cn.cn(
+        // Same recipe as `Crumb`, one size down so the pills sit under the heading.
+        "inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]",
+        primitives_controlSize.controlSizeClasses.xs,
+        primitives_transitions.transitions.colors,
+        isInteractive ? "cursor-pointer text-neutral4 hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10" : utils_cn.cn("text-neutral3", hasTooltip && "cursor-help"),
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", className: utils_cn.cn("shrink-0 opacity-50 group-hover:opacity-100", primitives_transitions.transitions.opacity), children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "group h-form-xs flex min-w-0 shrink-0 items-center", children: !hasTooltip ? root : /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: root }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] }) });
+}
+
+function DataPanelNextPrevNav({
+  onPrevious,
+  onNext,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  variant = "ghost"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(buttonsGroup.ButtonsGroup, { spacing: "close", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", variant, tooltip: previousLabel, onClick: onPrevious, disabled: !onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", variant, tooltip: nextLabel, onClick: onNext, disabled: !onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) })
+  ] });
+}
+
+function DataPanelNoData({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-sm text-neutral2 px-3 py-4", children: children ?? "No data found." });
+}
+
+const DEPTH_WIDTH = { 1: "w-xl", 2: "w-lg", 3: "w-md" };
+const SIZE_WIDTH = { half: "w-1/2", wide: "w-4/5", full: "w-full" };
+const SIZE_PERCENT = { half: "50%", wide: "80%", full: "100%" };
+const DEPTH_PEEK_REM = 1.5;
+function DataPanelRoot({
+  open,
+  onClose,
+  title,
+  description,
+  depth = 1,
+  size = "md",
+  children,
+  className
+}) {
+  const [portalHost, setPortalHost] = React__namespace.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    drawer.Drawer.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose?.();
+      },
+      swipeDirection: "right",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(drawer.Drawer.Portal, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Backdrop, { className: "drawer-backdrop bg-overlay/30 fixed inset-0 z-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Viewport, { className: "fixed inset-0 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          drawer.Drawer.Popup,
+          {
+            "data-slot": "data-panel-popup",
+            "data-depth": depth,
+            "data-size": size,
+            className: utils_cn.cn(
+              "drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none",
+              size === "md" ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size]
+            ),
+            style: size !== "md" && depth > 1 ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` } : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Title, { render: /* @__PURE__ */ jsxRuntime.jsx("span", {}), className: "sr-only", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Description, { className: "sr-only", children: description }),
+              /* @__PURE__ */ jsxRuntime.jsx(drawer.Drawer.Content, { render: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalHost, className: "absolute" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(primitives_portalContainer.PortalContainerProvider, { container: portalHost, children: /* @__PURE__ */ jsxRuntime.jsx(
+                drawer.Drawer.Content,
+                {
+                  render: /* @__PURE__ */ jsxRuntime.jsx("section", {}),
+                  className: utils_cn.cn(
+                    "flex max-h-full w-full flex-col overflow-hidden rounded-xl border border-border1 bg-surface2",
+                    className
+                  ),
+                  children
+                }
+              ) })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+const DataPanel = Object.assign(DataPanelRoot, {
+  Header: DataPanelHeader,
+  HeaderContent: DataPanelHeaderContent,
+  HeaderActions: DataPanelHeaderActions,
+  Heading: DataPanelHeading,
+  Metadata: DataPanelMetadata,
+  Meta: DataPanelMeta,
+  CloseButton: DataPanelCloseButton,
+  NextPrevNav: DataPanelNextPrevNav,
+  LoadingData: DataPanelLoadingData,
+  NoData: DataPanelNoData,
+  Content: DataPanelContent,
+  CodeSection: dataCodeSection.DataCodeSection,
+  SectionHeading: dataPanelSectionHeading.DataPanelSectionHeading
+});
+
+exports.DataPanel = DataPanel;
+//# sourceMappingURL=data-panel-BmQlOkMA.cjs.map

package/dist/data-panel-BmQlOkMA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-BmQlOkMA.cjs","sources":["../src/ds/components/DataPanel/data-panel-close-button.tsx","../src/ds/components/DataPanel/data-panel-content.tsx","../src/ds/components/DataPanel/data-panel-header.tsx","../src/ds/components/DataPanel/data-panel-header-actions.tsx","../src/ds/components/DataPanel/data-panel-header-content.tsx","../src/ds/components/DataPanel/data-panel-heading.tsx","../src/ds/components/DataPanel/data-panel-loading-data.tsx","../src/ds/components/DataPanel/data-panel-metadata.tsx","../src/ds/components/DataPanel/data-panel-next-prev-nav.tsx","../src/ds/components/DataPanel/data-panel-no-data.tsx","../src/ds/components/DataPanel/data-panel-root.tsx","../src/ds/components/DataPanel/data-panel.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\n\nexport interface DataPanelCloseButtonProps {\n  onClick: () => void;\n  tooltip?: string;\n  className?: string;\n  variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelCloseButton({\n  onClick,\n  tooltip = 'Close panel',\n  className,\n  variant = 'ghost',\n}: DataPanelCloseButtonProps) {\n  return (\n    <Button\n      size=\"sm\"\n      variant={variant}\n      onClick={onClick}\n      aria-label=\"Close Panel\"\n      tooltip={tooltip}\n      className={className}\n    >\n      <XIcon />\n    </Button>\n  );\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport type { ReactNode, Ref } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelContentProps {\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n  /** Layout overrides (e.g. padding) for the scroll container. */\n  className?: string;\n}\n\n// `DrawerPrimitive.Content` marks the region as swipe-exempt so scrolling or\n// selecting text inside the panel body doesn't start a swipe-to-dismiss.\nexport function DataPanelContent({ children, ref, className }: DataPanelContentProps) {\n  return (\n    <DrawerPrimitive.Content ref={ref} className={cn('min-h-0 flex-1 overflow-y-auto px-2 py-3', className)}>\n      {children}\n    </DrawerPrimitive.Content>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataPanelHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataPanelHeader({ className, children }: DataPanelHeaderProps) {\n  return (\n    <div\n      className={cn(\n        // Same box as the app `Header`: `items-center` + a column left block (`HeaderContent`)\n        // is what centers `HeaderActions` against heading + metadata, not just the heading.\n        // `py-1.5` lets a two-line header grow without touching the border.\n        'flex min-h-header-default w-full items-center gap-2 px-2 py-1.5',\n        // Bottom border only when something follows the header (i.e. the panel is expanded).\n        // When the panel is collapsed and the header is the only child, the border auto-hides.\n        'not-last:border-b not-last:border-border1',\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n","export interface DataPanelHeaderActionsProps {\n  children: React.ReactNode;\n}\n\n/**\n * Right-side action slot of a `DataPanel.Header`. Mirrors `HeaderAction` with `gap-2`\n * (these are `size=\"sm\"` controls, like the page header actions) and wraps when the panel is too narrow.\n */\nexport function DataPanelHeaderActions({ children }: DataPanelHeaderActionsProps) {\n  return <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2 self-center\">{children}</div>;\n}\n","export interface DataPanelHeaderContentProps {\n  children: React.ReactNode;\n}\n\n/** Left block of a `DataPanel.Header`: heading on top, optional `Metadata` below. */\nexport function DataPanelHeaderContent({ children }: DataPanelHeaderContentProps) {\n  return <div className=\"flex min-w-0 flex-1 flex-col justify-center gap-0\">{children}</div>;\n}\n","import { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelHeadingProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataPanelHeading({ className, children }: DataPanelHeadingProps) {\n  return (\n    <h3\n      className={cn(\n        // Same recipe as a current `Crumb` in the page header, so a panel title reads like the\n        // route title: the pill box sits on the header `px-2`, like a crumb in the page header.\n        'inline-flex max-w-full min-w-0 items-center gap-2 self-start rounded-full px-[.9em]',\n        controlSizeClasses.sm,\n        'cursor-default font-medium text-neutral6 [&>b]:font-normal [&>b]:text-neutral3',\n        className,\n      )}\n    >\n      {children}\n    </h3>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport interface DataPanelLoadingDataProps {\n  children?: ReactNode;\n}\n\nexport function DataPanelLoadingData({ children }: DataPanelLoadingDataProps) {\n  return (\n    <div className=\"text-ui-sm text-neutral2 flex min-h-32 items-center justify-center gap-2 px-3 py-4\">\n      <Spinner size=\"sm\" variant=\"pulse\" className=\"text-neutral1\" /> {children ?? 'Loading...'}\n    </div>\n  );\n}\n","import { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\nimport { controlSizeClasses } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelMetadataProps {\n  children: React.ReactNode;\n}\n\n/** Row of small `Meta` pills under a `DataPanel.Heading`. */\nexport function DataPanelMetadata({ children }: DataPanelMetadataProps) {\n  return <ul className=\"text-ui-xs flex min-w-0 flex-wrap items-center gap-0.5 overflow-hidden\">{children}</ul>;\n}\n\nexport interface DataPanelMetaProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> {\n  /** Element/component to render as (e.g. a router `Link`). Defaults to `span`. */\n  as?: React.ElementType;\n  href?: string;\n  to?: string;\n  /** Prefix icon (bare SVG). */\n  icon?: React.ReactNode;\n  /** Shown on hover/focus; for a static (non-link) meta a string tooltip also becomes the accessible name. */\n  tooltip?: React.ReactNode;\n  children: React.ReactNode;\n  'data-testid'?: string;\n}\n\nexport function DataPanelMeta({ as, icon, tooltip, children, className, ...props }: DataPanelMetaProps) {\n  const Root = as ?? 'span';\n  const isInteractive = Boolean(as || props.href || props.to || props.onClick);\n\n  const hasTooltip = tooltip != null;\n  const root = (\n    <Root\n      aria-label={!isInteractive && typeof tooltip === 'string' ? tooltip : undefined}\n      tabIndex={!isInteractive && hasTooltip ? 0 : undefined}\n      className={cn(\n        // Same recipe as `Crumb`, one size down so the pills sit under the heading.\n        'inline-flex min-w-0 items-center gap-2 overflow-hidden rounded-full px-[.9em]',\n        controlSizeClasses.xs,\n        transitions.colors,\n        isInteractive\n          ? 'cursor-pointer text-neutral4 hover:bg-neutral6/5 hover:text-neutral6 active:bg-neutral6/10'\n          : cn('text-neutral3', hasTooltip && 'cursor-help'),\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <Icon size=\"sm\" className={cn('shrink-0 opacity-50 group-hover:opacity-100', transitions.opacity)}>\n          {icon}\n        </Icon>\n      )}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </Root>\n  );\n\n  return (\n    <li className=\"group h-form-xs flex min-w-0 shrink-0 items-center\">\n      {!hasTooltip ? (\n        root\n      ) : (\n        <Tooltip>\n          <TooltipTrigger render={root} />\n          <TooltipContent>{tooltip}</TooltipContent>\n        </Tooltip>\n      )}\n    </li>\n  );\n}\n","import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\n\nexport interface DataPanelNextPrevNavProps {\n  onPrevious?: () => void;\n  onNext?: () => void;\n  previousLabel?: string;\n  nextLabel?: string;\n  variant?: ButtonProps['variant'];\n}\n\nexport function DataPanelNextPrevNav({\n  onPrevious,\n  onNext,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  variant = 'ghost',\n}: DataPanelNextPrevNavProps) {\n  return (\n    <ButtonsGroup spacing=\"close\">\n      <Button size=\"sm\" variant={variant} tooltip={previousLabel} onClick={onPrevious} disabled={!onPrevious}>\n        <ArrowUpIcon />\n      </Button>\n      <Button size=\"sm\" variant={variant} tooltip={nextLabel} onClick={onNext} disabled={!onNext}>\n        <ArrowDownIcon />\n      </Button>\n    </ButtonsGroup>\n  );\n}\n","export interface DataPanelNoDataProps {\n  children?: React.ReactNode;\n}\n\nexport function DataPanelNoData({ children }: DataPanelNoDataProps) {\n  return <p className=\"text-ui-sm text-neutral2 px-3 py-4\">{children ?? 'No data found.'}</p>;\n}\n","import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';\nimport * as React from 'react';\n\nimport { PortalContainerProvider } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\n// `drawer-popup` / `drawer-backdrop` carry the slide + fade transitions.\nimport '../Drawer/drawer.css';\n\nexport interface DataPanelProps {\n  /** Whether the panel is shown. The panel is always a modal Drawer dialog. */\n  open: boolean;\n  /** Called when the user dismisses the panel (close button, Escape, backdrop, swipe). */\n  onClose?: () => void;\n  /** Accessible dialog name (screen-reader only; the visible title comes from `DataPanel.Heading`). */\n  title: string;\n  /** Accessible dialog description (screen-reader only). */\n  description?: string;\n  /**\n   * Elevation level when several sibling panels are open at once (not nested in\n   * the React tree, so Base UI's own stacking doesn't apply). A deeper panel is\n   * narrower so the one beneath peeks out on the left. Siblings stack in mount\n   * order: render the deeper panel after the shallower one.\n   */\n  depth?: 1 | 2 | 3;\n  /**\n   * Drawer width. `md` (default) is a narrow detail panel whose width shrinks\n   * with `depth`. `half`/`wide`/`full` are for multi-column content (e.g. the\n   * trace panel); each `depth` level trims them by a small fixed amount so a\n   * same-size parent still peeks out beneath.\n   */\n  size?: 'md' | 'half' | 'wide' | 'full';\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst DEPTH_WIDTH = { 1: 'w-xl', 2: 'w-lg', 3: 'w-md' } as const;\nconst SIZE_WIDTH = { half: 'w-1/2', wide: 'w-4/5', full: 'w-full' } as const;\nconst SIZE_PERCENT = { half: '50%', wide: '80%', full: '100%' } as const;\n// Each extra depth level trims a stacked non-`md` panel so the parent peeks out beneath it.\nconst DEPTH_PEEK_REM = 1.5;\n\nexport function DataPanelRoot({\n  open,\n  onClose,\n  title,\n  description,\n  depth = 1,\n  size = 'md',\n  children,\n  className,\n}: DataPanelProps) {\n  // Swipe-exempt mount point for nested popups (Select, DropdownMenu, …) so they\n  // stay inside Base UI's modal focus region and don't start a drawer swipe on\n  // pointerdown. Same pattern as `SideDialogRoot`; see `portal-container.tsx`.\n  const [portalHost, setPortalHost] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <DrawerPrimitive.Root\n      open={open}\n      onOpenChange={nextOpen => {\n        if (!nextOpen) onClose?.();\n      }}\n      swipeDirection=\"right\"\n    >\n      <DrawerPrimitive.Portal>\n        {/* Lighter than the shared `--overlay`: a side panel should keep the page beneath readable. */}\n        <DrawerPrimitive.Backdrop className=\"drawer-backdrop bg-overlay/30 fixed inset-0 z-50\" />\n        <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n          <DrawerPrimitive.Popup\n            data-slot=\"data-panel-popup\"\n            data-depth={depth}\n            data-size={size}\n            className={cn(\n              'drawer-popup fixed inset-y-0 right-0 z-50 flex max-w-full p-4 outline-none',\n              size === 'md' ? DEPTH_WIDTH[depth] : SIZE_WIDTH[size],\n            )}\n            style={\n              size !== 'md' && depth > 1\n                ? { width: `calc(${SIZE_PERCENT[size]} - ${(depth - 1) * DEPTH_PEEK_REM}rem)` }\n                : undefined\n            }\n          >\n            {/* Not a heading: the visible `DataPanel.Heading` already is one; this only names the dialog. */}\n            <DrawerPrimitive.Title render={<span />} className=\"sr-only\">\n              {title}\n            </DrawerPrimitive.Title>\n            {description && (\n              <DrawerPrimitive.Description className=\"sr-only\">{description}</DrawerPrimitive.Description>\n            )}\n\n            <DrawerPrimitive.Content render={<div ref={setPortalHost} className=\"absolute\" />} />\n\n            <PortalContainerProvider container={portalHost}>\n              {/* Whole card is swipe-exempt: pointerdown on tabs/buttons/text must not start a dismiss gesture. */}\n              <DrawerPrimitive.Content\n                render={<section />}\n                className={cn(\n                  'flex max-h-full w-full flex-col overflow-hidden rounded-xl border border-border1 bg-surface2',\n                  className,\n                )}\n              >\n                {children}\n              </DrawerPrimitive.Content>\n            </PortalContainerProvider>\n          </DrawerPrimitive.Popup>\n        </DrawerPrimitive.Viewport>\n      </DrawerPrimitive.Portal>\n    </DrawerPrimitive.Root>\n  );\n}\n","import { DataPanelCloseButton } from './data-panel-close-button';\nimport { DataPanelContent } from './data-panel-content';\nimport { DataPanelHeader } from './data-panel-header';\nimport { DataPanelHeaderActions } from './data-panel-header-actions';\nimport { DataPanelHeaderContent } from './data-panel-header-content';\nimport { DataPanelHeading } from './data-panel-heading';\nimport { DataPanelLoadingData } from './data-panel-loading-data';\nimport { DataPanelMeta, DataPanelMetadata } from './data-panel-metadata';\nimport { DataPanelNextPrevNav } from './data-panel-next-prev-nav';\nimport { DataPanelNoData } from './data-panel-no-data';\nimport { DataPanelRoot } from './data-panel-root';\nimport { DataPanelSectionHeading } from './data-panel-section-heading';\nimport { DataCodeSection } from '@/ds/components/DataCodeSection';\n\nexport const DataPanel = Object.assign(DataPanelRoot, {\n  Header: DataPanelHeader,\n  HeaderContent: DataPanelHeaderContent,\n  HeaderActions: DataPanelHeaderActions,\n  Heading: DataPanelHeading,\n  Metadata: DataPanelMetadata,\n  Meta: DataPanelMeta,\n  CloseButton: DataPanelCloseButton,\n  NextPrevNav: DataPanelNextPrevNav,\n  LoadingData: DataPanelLoadingData,\n  NoData: DataPanelNoData,\n  Content: DataPanelContent,\n  CodeSection: DataCodeSection,\n  SectionHeading: DataPanelSectionHeading,\n});\n"],"names":["jsx","Button","XIcon","DrawerPrimitive","cn","controlSizeClasses","jsxs","Spinner","tooltip","transitions","Icon","Tooltip","TooltipTrigger","TooltipContent","ButtonsGroup","ArrowUpIcon","ArrowDownIcon","React","PortalContainerProvider","DataCodeSection","DataPanelSectionHeading"],"mappings":"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"}

package/dist/data-panel-section-heading-BmSBR8A5.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+function DataPanelSectionHeading({ icon, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils_cn.cn(
+        "flex items-center gap-1.5 text-ui-sm tracking-widest text-neutral2 uppercase [&>svg]:size-3.5",
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
+exports.DataPanelSectionHeading = DataPanelSectionHeading;
+//# sourceMappingURL=data-panel-section-heading-BmSBR8A5.cjs.map

package/dist/data-panel-section-heading-BmSBR8A5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-section-heading-BmSBR8A5.cjs","sources":["../src/ds/components/DataPanel/data-panel-section-heading.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelSectionHeadingProps {\n  /** Optional leading icon. Rendered before `children` and sized via `[&>svg]:size-3.5`. */\n  icon?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Section heading inside a DataPanel.Content (e.g. above a code block or a key-values list).\n * Used by `DataCodeSection` and any consumer that needs a matching small-caps label.\n */\nexport function DataPanelSectionHeading({ icon, className, children }: DataPanelSectionHeadingProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-ui-sm tracking-widest text-neutral2 uppercase [&>svg]:size-3.5',\n        className,\n      )}\n    >\n      {icon}\n      {children}\n    </div>\n  );\n}\n"],"names":["jsxs","cn"],"mappings":";;;;;AAcO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAM,SAAA,EAAW,UAAS,EAAiC;AACnG,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/data-panel-section-heading-DhzuleNL.js

@@ -0,0 +1,21 @@
+import { jsxs } from 'react/jsx-runtime';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+function DataPanelSectionHeading({ icon, className, children }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 text-ui-sm tracking-widest text-neutral2 uppercase [&>svg]:size-3.5",
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
+export { DataPanelSectionHeading as D };
+//# sourceMappingURL=data-panel-section-heading-DhzuleNL.js.map

package/dist/data-panel-section-heading-DhzuleNL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-panel-section-heading-DhzuleNL.js","sources":["../src/ds/components/DataPanel/data-panel-section-heading.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface DataPanelSectionHeadingProps {\n  /** Optional leading icon. Rendered before `children` and sized via `[&>svg]:size-3.5`. */\n  icon?: ReactNode;\n  className?: string;\n  children: ReactNode;\n}\n\n/**\n * Section heading inside a DataPanel.Content (e.g. above a code block or a key-values list).\n * Used by `DataCodeSection` and any consumer that needs a matching small-caps label.\n */\nexport function DataPanelSectionHeading({ icon, className, children }: DataPanelSectionHeadingProps) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-ui-sm tracking-widest text-neutral2 uppercase [&>svg]:size-3.5',\n        className,\n      )}\n    >\n      {icon}\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,uBAAA,CAAwB,EAAE,IAAA,EAAM,SAAA,EAAW,UAAS,EAAiC;AACnG,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,+FAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;;;;"}