@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/data-code-section-c2n-IXav.js

@@ -0,0 +1,191 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Chunk } from '@codemirror/merge';
+import { Text } from '@codemirror/state';
+import { SearchIcon, AlignLeftIcon, AlignJustifyIcon, ExpandIcon } from 'lucide-react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { B as Button } from './Button-D76HGlPP.js';
+import { B as ButtonsGroup } from './buttons-group-BU9ErJSH.js';
+import { C as Code } from './code-DAXWNzvf.js';
+import { C as CopyButton } from './copy-button-CRWQE6VF.js';
+import { D as DataPanelSectionHeading } from './data-panel-section-heading-D20aa5uF.js';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, a as DialogBody } from './dialog-BXtm6e9u.js';
+import { S as SearchInput } from './search-input-DRbe8Fm2.js';
+import { raisedSurfaceStyle } from './primitives/raised-surface.es.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+function changedLines(doc, { against, side }) {
+  const [a, b] = side === "a" ? [doc, against] : [against, doc];
+  const text = Text.of(doc.split("\n"));
+  const lines = /* @__PURE__ */ new Set();
+  for (const chunk of Chunk.build(Text.of(a.split("\n")), Text.of(b.split("\n")))) {
+    const from = side === "a" ? chunk.fromA : chunk.fromB;
+    const to = side === "a" ? chunk.endA : chunk.endB;
+    if (from >= to) continue;
+    for (let pos = from; pos <= Math.min(to, text.length); ) {
+      const line = text.lineAt(pos);
+      lines.add(line.number - 1);
+      if (line.to >= to) break;
+      pos = line.to + 1;
+    }
+  }
+  return lines;
+}
+const diffLineStyles = {
+  removed: "code-diff-removed bg-destructive-subtle",
+  added: "code-diff-added bg-success-subtle"
+};
+const searchMatchStyle = "code-search-match rounded-sm bg-badge-amber-strong";
+function CodeView({ code, changed, diffSide, searchQuery }) {
+  const ref = useRef(null);
+  const query = searchQuery.toLowerCase();
+  useEffect(() => {
+    if (query) ref.current?.querySelector(".code-search-match")?.scrollIntoView({ block: "nearest" });
+  }, [query]);
+  const lineClassName = useCallback(
+    (index, text) => {
+      const classes = [];
+      if (diffSide && changed?.has(index)) classes.push(diffLineStyles[diffSide === "a" ? "removed" : "added"]);
+      if (query && text.toLowerCase().includes(query)) classes.push(searchMatchStyle);
+      return classes.length ? classes.join(" ") : void 0;
+    },
+    [changed, diffSide, query]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
+    Code,
+    {
+      code,
+      lang: "json",
+      lineClassName,
+      className: "font-mono text-caption break-all whitespace-pre-wrap"
+    }
+  ) });
+}
+function DataCodeSection({
+  codeStr = "",
+  title,
+  dialogTitle,
+  icon,
+  simplified = false,
+  className,
+  diff,
+  actions
+}) {
+  const changed = useMemo(() => diff ? changedLines(codeStr, diff) : void 0, [codeStr, diff]);
+  const [showAsMultilineText, setShowAsMultilineText] = useState(false);
+  const [searchMinimized, setSearchMinimized] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedOpen, setExpandedOpen] = useState(false);
+  const [expandedSearchQuery, setExpandedSearchQuery] = useState("");
+  const [expandedMultiline, setExpandedMultiline] = useState(false);
+  const hasMultilineText = useMemo(() => {
+    try {
+      const parsed = JSON.parse(codeStr);
+      return containsInnerNewline(parsed || "");
+    } catch {
+      return false;
+    }
+  }, [codeStr]);
+  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  const expandedFinalCodeStr = expandedMultiline ? codeStr?.replace(/\\n/g, "\n") : codeStr;
+  const usePlainTextView = simplified || showAsMultilineText;
+  if (!codeStr || codeStr === "null") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(DataPanelSectionHeading, { icon, children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        actions,
+        !usePlainTextView && (searchMinimized ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            "aria-label": "Search code",
+            tooltip: "Search code",
+            onClick: () => setSearchMinimized(false),
+            children: /* @__PURE__ */ jsx(SearchIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            label: "Search code",
+            placeholder: "Search...",
+            size: "sm",
+            value: searchQuery,
+            onValueChange: setSearchQuery,
+            onClose: () => setSearchMinimized(true),
+            autoFocus: true
+          }
+        )),
+        /* @__PURE__ */ jsxs(ButtonsGroup, { size: "sm", children: [
+          /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content" }),
+          hasMultilineText && /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+              tooltip: showAsMultilineText ? "Show escaped newlines" : "Show multiline text",
+              onClick: () => setShowAsMultilineText((v) => !v),
+              children: showAsMultilineText ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { "aria-label": "Expand", tooltip: "Expand", onClick: () => setExpandedOpen(true), children: /* @__PURE__ */ jsx(ExpandIcon, {}) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          raisedSurfaceStyle,
+          "max-h-[30vh] overflow-hidden overflow-y-auto rounded-lg p-3 text-caption break-all text-muted-foreground"
+        ),
+        children: usePlainTextView ? /* @__PURE__ */ jsx("div", { className: "font-mono break-all text-muted-foreground", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsx(CodeView, { code: codeStr, changed, diffSide: diff?.side, searchQuery })
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: expandedOpen, onOpenChange: setExpandedOpen, children: /* @__PURE__ */ jsxs(DialogContent, { size: "full", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "flex min-w-0 items-center gap-1.5 truncate [&>svg]:size-3.5", children: dialogTitle ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          title
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          !expandedMultiline && /* @__PURE__ */ jsx(
+            SearchInput,
+            {
+              label: "Search code",
+              placeholder: "Search...",
+              size: "sm",
+              value: expandedSearchQuery,
+              onValueChange: setExpandedSearchQuery
+            }
+          ),
+          /* @__PURE__ */ jsxs(ButtonsGroup, { size: "sm", children: [
+            /* @__PURE__ */ jsx(CopyButton, { content: codeStr || "No content" }),
+            hasMultilineText && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": expandedMultiline ? "Show escaped newlines" : "Show multiline text",
+                tooltip: expandedMultiline ? "Show escaped newlines" : "Show multiline text",
+                onClick: () => setExpandedMultiline((v) => !v),
+                children: expandedMultiline ? /* @__PURE__ */ jsx(AlignLeftIcon, {}) : /* @__PURE__ */ jsx(AlignJustifyIcon, {})
+              }
+            )
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(DialogBody, { layout: "fill", children: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: expandedMultiline ? /* @__PURE__ */ jsx("div", { className: cn(raisedSurfaceStyle, "rounded-lg p-3 text-caption break-all text-muted-foreground"), children: /* @__PURE__ */ jsx("div", { className: "font-mono break-all text-muted-foreground", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: expandedFinalCodeStr }) }) }) : /* @__PURE__ */ jsx(CodeView, { code: codeStr, changed, diffSide: diff?.side, searchQuery: expandedSearchQuery }) }) })
+    ] }) })
+  ] });
+}
+function containsInnerNewline(obj) {
+  if (typeof obj === "string") {
+    const idx = obj.indexOf("\n");
+    return idx !== -1 && idx !== obj.length - 1;
+  } else if (Array.isArray(obj)) {
+    return obj.some((item) => containsInnerNewline(item));
+  } else if (obj && typeof obj === "object") {
+    return Object.values(obj).some((value) => containsInnerNewline(value));
+  }
+  return false;
+}
+
+export { DataCodeSection as D };
+//# sourceMappingURL=data-code-section-c2n-IXav.js.map

package/dist/data-code-section-c2n-IXav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-code-section-c2n-IXav.js","sources":["../src/ds/components/DataCodeSection/data-code-section.tsx"],"sourcesContent":["import { Chunk } from '@codemirror/merge';\nimport { Text } from '@codemirror/state';\nimport { AlignJustifyIcon, AlignLeftIcon, ExpandIcon, SearchIcon } from 'lucide-react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@/ds/components/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup';\nimport { Code } from '@/ds/components/Code/code';\nimport { CopyButton } from '@/ds/components/CopyButton';\nimport { DataPanelSectionHeading } from '@/ds/components/DataPanel/data-panel-section-heading';\nimport { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface DataCodeSectionDiff {\n  /** The other document to compare against. */\n  against: string;\n  /** `a` = this document is the \"before\" (changes in red), `b` = \"after\" (changes in green). */\n  side: 'a' | 'b';\n}\n\n/** Zero-based indexes of the lines of `doc` that differ from `diff.against`. */\nfunction changedLines(doc: string, { against, side }: DataCodeSectionDiff): Set<number> {\n  const [a, b] = side === 'a' ? [doc, against] : [against, doc];\n  const text = Text.of(doc.split('\\n'));\n  const lines = new Set<number>();\n  for (const chunk of Chunk.build(Text.of(a.split('\\n')), Text.of(b.split('\\n')))) {\n    const from = side === 'a' ? chunk.fromA : chunk.fromB;\n    const to = side === 'a' ? chunk.endA : chunk.endB;\n    if (from >= to) continue;\n    for (let pos = from; pos <= Math.min(to, text.length);) {\n      const line = text.lineAt(pos);\n      lines.add(line.number - 1);\n      if (line.to >= to) break;\n      pos = line.to + 1;\n    }\n  }\n  return lines;\n}\n\nconst diffLineStyles = {\n  removed: 'code-diff-removed bg-destructive-subtle',\n  added: 'code-diff-added bg-success-subtle',\n};\nconst searchMatchStyle = 'code-search-match rounded-sm bg-badge-amber-strong';\n\ninterface CodeViewProps {\n  code: string;\n  changed?: Set<number>;\n  diffSide?: DataCodeSectionDiff['side'];\n  searchQuery: string;\n}\n\nfunction CodeView({ code, changed, diffSide, searchQuery }: CodeViewProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const query = searchQuery.toLowerCase();\n\n  useEffect(() => {\n    if (query) ref.current?.querySelector('.code-search-match')?.scrollIntoView({ block: 'nearest' });\n  }, [query]);\n\n  const lineClassName = useCallback(\n    (index: number, text: string) => {\n      const classes: string[] = [];\n      if (diffSide && changed?.has(index)) classes.push(diffLineStyles[diffSide === 'a' ? 'removed' : 'added']);\n      if (query && text.toLowerCase().includes(query)) classes.push(searchMatchStyle);\n      return classes.length ? classes.join(' ') : undefined;\n    },\n    [changed, diffSide, query],\n  );\n\n  return (\n    <div ref={ref}>\n      <Code\n        code={code}\n        lang=\"json\"\n        lineClassName={lineClassName}\n        className=\"font-mono text-caption break-all whitespace-pre-wrap\"\n      />\n    </div>\n  );\n}\n\nexport interface DataCodeSectionProps {\n  title: React.ReactNode;\n  dialogTitle?: React.ReactNode;\n  icon?: React.ReactNode;\n  codeStr?: string;\n  simplified?: boolean;\n  className?: string;\n  /** Highlight lines that differ from another document. */\n  diff?: DataCodeSectionDiff;\n  /** Extra controls rendered in the header, before the built-in copy/expand buttons. */\n  actions?: React.ReactNode;\n}\n\nexport function DataCodeSection({\n  codeStr = '',\n  title,\n  dialogTitle,\n  icon,\n  simplified = false,\n  className,\n  diff,\n  actions,\n}: DataCodeSectionProps) {\n  const changed = useMemo(() => (diff ? changedLines(codeStr, diff) : undefined), [codeStr, diff]);\n  const [showAsMultilineText, setShowAsMultilineText] = useState(false);\n  const [searchMinimized, setSearchMinimized] = useState(true);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [expandedOpen, setExpandedOpen] = useState(false);\n  const [expandedSearchQuery, setExpandedSearchQuery] = useState('');\n  const [expandedMultiline, setExpandedMultiline] = useState(false);\n\n  const hasMultilineText = useMemo(() => {\n    try {\n      const parsed = JSON.parse(codeStr);\n      return containsInnerNewline(parsed || '');\n    } catch {\n      return false;\n    }\n  }, [codeStr]);\n\n  const finalCodeStr = showAsMultilineText ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n  const expandedFinalCodeStr = expandedMultiline ? codeStr?.replace(/\\\\n/g, '\\n') : codeStr;\n  const usePlainTextView = simplified || showAsMultilineText;\n\n  if (!codeStr || codeStr === 'null') return null;\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      <div className=\"flex items-center justify-between\">\n        <DataPanelSectionHeading icon={icon}>{title}</DataPanelSectionHeading>\n        <div className=\"flex items-center gap-2\">\n          {actions}\n          {!usePlainTextView &&\n            (searchMinimized ? (\n              <Button\n                size=\"sm\"\n                aria-label=\"Search code\"\n                tooltip=\"Search code\"\n                onClick={() => setSearchMinimized(false)}\n              >\n                <SearchIcon />\n              </Button>\n            ) : (\n              <SearchInput\n                label=\"Search code\"\n                placeholder=\"Search...\"\n                size=\"sm\"\n                value={searchQuery}\n                onValueChange={setSearchQuery}\n                onClose={() => setSearchMinimized(true)}\n                autoFocus\n              />\n            ))}\n          <ButtonsGroup size=\"sm\">\n            <CopyButton content={codeStr || 'No content'} />\n            {hasMultilineText && (\n              <Button\n                aria-label={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n                tooltip={showAsMultilineText ? 'Show escaped newlines' : 'Show multiline text'}\n                onClick={() => setShowAsMultilineText(v => !v)}\n              >\n                {showAsMultilineText ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n              </Button>\n            )}\n            <Button aria-label=\"Expand\" tooltip=\"Expand\" onClick={() => setExpandedOpen(true)}>\n              <ExpandIcon />\n            </Button>\n          </ButtonsGroup>\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          raisedSurfaceStyle,\n          'max-h-[30vh] overflow-hidden overflow-y-auto rounded-lg p-3 text-caption break-all text-muted-foreground',\n        )}\n      >\n        {usePlainTextView ? (\n          <div className=\"font-mono break-all text-muted-foreground\">\n            <pre className=\"text-wrap\">{finalCodeStr}</pre>\n          </div>\n        ) : (\n          <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={searchQuery} />\n        )}\n      </div>\n\n      <Dialog open={expandedOpen} onOpenChange={setExpandedOpen}>\n        <DialogContent size=\"full\">\n          <DialogHeader>\n            <div className=\"flex min-w-0 items-center justify-between gap-2\">\n              <DialogTitle className=\"flex min-w-0 items-center gap-1.5 truncate [&>svg]:size-3.5\">\n                {dialogTitle ?? (\n                  <>\n                    {icon}\n                    {title}\n                  </>\n                )}\n              </DialogTitle>\n              <div className=\"flex shrink-0 items-center gap-2\">\n                {!expandedMultiline && (\n                  <SearchInput\n                    label=\"Search code\"\n                    placeholder=\"Search...\"\n                    size=\"sm\"\n                    value={expandedSearchQuery}\n                    onValueChange={setExpandedSearchQuery}\n                  />\n                )}\n                <ButtonsGroup size=\"sm\">\n                  <CopyButton content={codeStr || 'No content'} />\n                  {hasMultilineText && (\n                    <Button\n                      aria-label={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n                      tooltip={expandedMultiline ? 'Show escaped newlines' : 'Show multiline text'}\n                      onClick={() => setExpandedMultiline(v => !v)}\n                    >\n                      {expandedMultiline ? <AlignLeftIcon /> : <AlignJustifyIcon />}\n                    </Button>\n                  )}\n                </ButtonsGroup>\n              </div>\n            </div>\n          </DialogHeader>\n          <DialogBody layout=\"fill\">\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              {expandedMultiline ? (\n                <div className={cn(raisedSurfaceStyle, 'rounded-lg p-3 text-caption break-all text-muted-foreground')}>\n                  <div className=\"font-mono break-all text-muted-foreground\">\n                    <pre className=\"text-wrap\">{expandedFinalCodeStr}</pre>\n                  </div>\n                </div>\n              ) : (\n                <CodeView code={codeStr} changed={changed} diffSide={diff?.side} searchQuery={expandedSearchQuery} />\n              )}\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n}\n\nfunction containsInnerNewline(obj: unknown): boolean {\n  if (typeof obj === 'string') {\n    const idx = obj.indexOf('\\n');\n    return idx !== -1 && idx !== obj.length - 1;\n  } else if (Array.isArray(obj)) {\n    return obj.some(item => containsInnerNewline(item));\n  } else if (obj && typeof obj === 'object') {\n    return Object.values(obj).some(value => containsInnerNewline(value));\n  }\n  return false;\n}\n"],"names":[],"mappings":"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"}

package/dist/data-keys-and-values-B1u00ihh.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './cn-coERSHz5.js';
+import { ExternalLinkIcon, Link2Icon, CheckIcon, CopyIcon } from 'lucide-react';
+import { controlStateColorTransition } from './primitives/transitions.es.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-CCZcMbgy.js';
+import { useCopyToClipboard } from './hooks/use-copy-to-clipboard.es.js';
+
+function DataKeysAndValuesHeader({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("col-span-full py-3 text-caption tracking-widest text-placeholder uppercase", className), children });
+}
+
+function DataKeysAndValuesKey({ className, children }) {
+  return /* @__PURE__ */ jsx("dt", { className: cn("shrink-0 py-0.5 text-body-sm text-placeholder", className), children });
+}
+
+const DENSITY_GAP_Y = {
+  default: "gap-y-1.5",
+  dense: "gap-y-0"
+};
+function DataKeysAndValuesRoot({ className, children, density = "default" }) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid grid-cols-[auto_1fr] gap-x-4", DENSITY_GAP_Y[density], className), children });
+}
+
+const dataKeysAndValuesValueStyles = "text-body-sm text-muted-foreground min-w-0 py-0.5 pr-6";
+
+function DataKeysAndValuesValue({ className, children }) {
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, "truncate", className), children });
+}
+
+function isExternalUrl(href) {
+  return /^https?:\/\//.test(href);
+}
+function DataKeysAndValuesValueLink({ className, children, href, as }) {
+  const isExternal = isExternalUrl(href);
+  const Component = as || "a";
+  const navigationProps = as ? { href, to: href } : { href };
+  const linkClassName = cn(
+    "flex items-center gap-2 truncate hover:text-foreground",
+    controlStateColorTransition,
+    "[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70"
+  );
+  if (isExternal) {
+    return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: linkClassName, children: [
+      /* @__PURE__ */ jsx("span", { children }),
+      /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Component, { ...navigationProps, className: linkClassName, children: [
+    /* @__PURE__ */ jsx("span", { children }),
+    /* @__PURE__ */ jsx(Link2Icon, {})
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithCopyBtn({
+  className,
+  children,
+  copyValue,
+  copyTooltip = "Copy to clipboard"
+}) {
+  const { isCopied, handleCopy } = useCopyToClipboard({
+    text: copyValue,
+    copyMessage: "Copied!"
+  });
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { open: isCopied || void 0, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleCopy,
+        type: "button",
+        className: cn(
+          "flex items-center gap-2 text-left whitespace-nowrap",
+          "[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70",
+          { "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-success-indicator": isCopied }
+        ),
+        "aria-label": isCopied ? "Copied!" : copyTooltip,
+        children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: isCopied ? "Copied!" : copyTooltip })
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithTooltip({
+  className,
+  children,
+  tooltip
+}) {
+  return /* @__PURE__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { tabIndex: 0, className: "inline cursor-help truncate", children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
+}
+
+const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
+  Key: DataKeysAndValuesKey,
+  Value: DataKeysAndValuesValue,
+  ValueLink: DataKeysAndValuesValueLink,
+  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,
+  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,
+  Header: DataKeysAndValuesHeader
+});
+
+export { DataKeysAndValues as D };
+//# sourceMappingURL=data-keys-and-values-B1u00ihh.js.map

package/dist/data-keys-and-values-B1u00ihh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-keys-and-values-B1u00ihh.js","sources":["../src/ds/components/DataKeysAndValues/data-keys-and-values-header.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-key.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-root.tsx","../src/ds/components/DataKeysAndValues/shared.ts","../src/ds/components/DataKeysAndValues/data-keys-and-values-value.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-link.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-copy-btn.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-tooltip.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesHeader({ className, children }: DataKeysAndValuesHeaderProps) {\n  return (\n    <dt className={cn('col-span-full py-3 text-caption tracking-widest text-placeholder uppercase', className)}>\n      {children}\n    </dt>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesKeyProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesKey({ className, children }: DataKeysAndValuesKeyProps) {\n  return <dt className={cn('shrink-0 py-0.5 text-body-sm text-placeholder', className)}>{children}</dt>;\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesProps {\n  className?: string;\n  children: React.ReactNode;\n  density?: 'default' | 'dense';\n}\n\nconst DENSITY_GAP_Y: Record<NonNullable<DataKeysAndValuesProps['density']>, string> = {\n  default: 'gap-y-1.5',\n  dense: 'gap-y-0',\n};\n\nexport function DataKeysAndValuesRoot({ className, children, density = 'default' }: DataKeysAndValuesProps) {\n  return <dl className={cn('grid grid-cols-[auto_1fr] gap-x-4', DENSITY_GAP_Y[density], className)}>{children}</dl>;\n}\n","export const dataKeysAndValuesValueStyles = 'text-body-sm text-muted-foreground min-w-0 py-0.5 pr-6';\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesValue({ className, children }: DataKeysAndValuesValueProps) {\n  return <dd className={cn(dataKeysAndValuesValueStyles, 'truncate', className)}>{children}</dd>;\n}\n","import { ExternalLinkIcon, Link2Icon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueLinkProps {\n  className?: string;\n  children: React.ReactNode;\n  href: string;\n  as?: React.ElementType;\n}\n\nfunction isExternalUrl(href: string) {\n  return /^https?:\\/\\//.test(href);\n}\n\nexport function DataKeysAndValuesValueLink({ className, children, href, as }: DataKeysAndValuesValueLinkProps) {\n  const isExternal = isExternalUrl(href);\n  const Component = as || 'a';\n  // Pass `to` only for custom components so React-Router's `Link` (which reads `to`) works\n  // while native anchors don't get an unknown `to` attribute warning.\n  const navigationProps = as ? { href, to: href } : { href };\n\n  const linkClassName = cn(\n    'flex items-center gap-2 truncate hover:text-foreground',\n    controlStateColorTransition,\n    '[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70',\n  );\n\n  if (isExternal) {\n    return (\n      <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={linkClassName}>\n          <span>{children}</span>\n          <ExternalLinkIcon />\n        </a>\n      </dd>\n    );\n  }\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Component {...navigationProps} className={linkClassName}>\n        <span>{children}</span>\n        <Link2Icon />\n      </Component>\n    </dd>\n  );\n}\n","import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithCopyBtnProps {\n  className?: string;\n  children: React.ReactNode;\n  copyValue: string;\n  copyTooltip?: string;\n}\n\nexport function DataKeysAndValuesValueWithCopyBtn({\n  className,\n  children,\n  copyValue,\n  copyTooltip = 'Copy to clipboard',\n}: DataKeysAndValuesValueWithCopyBtnProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: copyValue,\n    copyMessage: 'Copied!',\n  });\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip open={isCopied || undefined}>\n        <TooltipTrigger asChild>\n          <button\n            onClick={handleCopy}\n            type=\"button\"\n            className={cn(\n              'flex items-center gap-2 text-left whitespace-nowrap',\n              '[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70',\n              { '[&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-success-indicator': isCopied },\n            )}\n            aria-label={isCopied ? 'Copied!' : copyTooltip}\n          >\n            <span>{children}</span>\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent>{isCopied ? 'Copied!' : copyTooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithTooltipProps {\n  className?: string;\n  children: React.ReactNode;\n  tooltip: string;\n}\n\nexport function DataKeysAndValuesValueWithTooltip({\n  className,\n  children,\n  tooltip,\n}: DataKeysAndValuesValueWithTooltipProps) {\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <div tabIndex={0} className=\"inline cursor-help truncate\">\n            {children}\n          </div>\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { DataKeysAndValuesHeader } from './data-keys-and-values-header';\nimport { DataKeysAndValuesKey } from './data-keys-and-values-key';\nimport { DataKeysAndValuesRoot } from './data-keys-and-values-root';\nimport { DataKeysAndValuesValue } from './data-keys-and-values-value';\nimport { DataKeysAndValuesValueLink } from './data-keys-and-values-value-link';\nimport { DataKeysAndValuesValueWithCopyBtn } from './data-keys-and-values-value-with-copy-btn';\nimport { DataKeysAndValuesValueWithTooltip } from './data-keys-and-values-value-with-tooltip';\n\nexport const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {\n  Key: DataKeysAndValuesKey,\n  Value: DataKeysAndValuesValue,\n  ValueLink: DataKeysAndValuesValueLink,\n  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,\n  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,\n  Header: DataKeysAndValuesHeader,\n});\n"],"names":[],"mappings":"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"}

package/dist/data-keys-and-values-C1I--hWn.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-TqD01zH-.cjs');
+const lucideReact = require('lucide-react');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const tooltip = require('./tooltip-C4txPRSa.cjs');
+const hooks_useCopyToClipboard = require('./hooks/use-copy-to-clipboard.cjs.js');
+
+function DataKeysAndValuesHeader({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: utils_cn.cn("col-span-full py-3 text-caption tracking-widest text-placeholder uppercase", className), children });
+}
+
+function DataKeysAndValuesKey({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: utils_cn.cn("shrink-0 py-0.5 text-body-sm text-placeholder", className), children });
+}
+
+const DENSITY_GAP_Y = {
+  default: "gap-y-1.5",
+  dense: "gap-y-0"
+};
+function DataKeysAndValuesRoot({ className, children, density = "default" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: utils_cn.cn("grid grid-cols-[auto_1fr] gap-x-4", DENSITY_GAP_Y[density], className), children });
+}
+
+const dataKeysAndValuesValueStyles = "text-body-sm text-muted-foreground min-w-0 py-0.5 pr-6";
+
+function DataKeysAndValuesValue({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils_cn.cn(dataKeysAndValuesValueStyles, "truncate", className), children });
+}
+
+function isExternalUrl(href) {
+  return /^https?:\/\//.test(href);
+}
+function DataKeysAndValuesValueLink({ className, children, href, as }) {
+  const isExternal = isExternalUrl(href);
+  const Component = as || "a";
+  const navigationProps = as ? { href, to: href } : { href };
+  const linkClassName = utils_cn.cn(
+    "flex items-center gap-2 truncate hover:text-foreground",
+    primitives_transitions.controlStateColorTransition,
+    "[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70"
+  );
+  if (isExternal) {
+    return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils_cn.cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", className: linkClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLinkIcon, {})
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils_cn.cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...navigationProps, className: linkClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2Icon, {})
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithCopyBtn({
+  className,
+  children,
+  copyValue,
+  copyTooltip = "Copy to clipboard"
+}) {
+  const { isCopied, handleCopy } = hooks_useCopyToClipboard.useCopyToClipboard({
+    text: copyValue,
+    copyMessage: "Copied!"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils_cn.cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { open: isCopied || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleCopy,
+        type: "button",
+        className: utils_cn.cn(
+          "flex items-center gap-2 text-left whitespace-nowrap",
+          "[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70",
+          { "[&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-success-indicator": isCopied }
+        ),
+        "aria-label": isCopied ? "Copied!" : copyTooltip,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          isCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: isCopied ? "Copied!" : copyTooltip })
+  ] }) });
+}
+
+function DataKeysAndValuesValueWithTooltip({
+  className,
+  children,
+  tooltip: tooltip$1
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: utils_cn.cn(dataKeysAndValuesValueStyles, className), children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: 0, className: "inline cursor-help truncate", children }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: tooltip$1 })
+  ] }) });
+}
+
+const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {
+  Key: DataKeysAndValuesKey,
+  Value: DataKeysAndValuesValue,
+  ValueLink: DataKeysAndValuesValueLink,
+  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,
+  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,
+  Header: DataKeysAndValuesHeader
+});
+
+exports.DataKeysAndValues = DataKeysAndValues;
+//# sourceMappingURL=data-keys-and-values-C1I--hWn.cjs.map

package/dist/data-keys-and-values-C1I--hWn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-keys-and-values-C1I--hWn.cjs","sources":["../src/ds/components/DataKeysAndValues/data-keys-and-values-header.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-key.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-root.tsx","../src/ds/components/DataKeysAndValues/shared.ts","../src/ds/components/DataKeysAndValues/data-keys-and-values-value.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-link.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-copy-btn.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values-value-with-tooltip.tsx","../src/ds/components/DataKeysAndValues/data-keys-and-values.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesHeaderProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesHeader({ className, children }: DataKeysAndValuesHeaderProps) {\n  return (\n    <dt className={cn('col-span-full py-3 text-caption tracking-widest text-placeholder uppercase', className)}>\n      {children}\n    </dt>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesKeyProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesKey({ className, children }: DataKeysAndValuesKeyProps) {\n  return <dt className={cn('shrink-0 py-0.5 text-body-sm text-placeholder', className)}>{children}</dt>;\n}\n","import { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesProps {\n  className?: string;\n  children: React.ReactNode;\n  density?: 'default' | 'dense';\n}\n\nconst DENSITY_GAP_Y: Record<NonNullable<DataKeysAndValuesProps['density']>, string> = {\n  default: 'gap-y-1.5',\n  dense: 'gap-y-0',\n};\n\nexport function DataKeysAndValuesRoot({ className, children, density = 'default' }: DataKeysAndValuesProps) {\n  return <dl className={cn('grid grid-cols-[auto_1fr] gap-x-4', DENSITY_GAP_Y[density], className)}>{children}</dl>;\n}\n","export const dataKeysAndValuesValueStyles = 'text-body-sm text-muted-foreground min-w-0 py-0.5 pr-6';\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function DataKeysAndValuesValue({ className, children }: DataKeysAndValuesValueProps) {\n  return <dd className={cn(dataKeysAndValuesValueStyles, 'truncate', className)}>{children}</dd>;\n}\n","import { ExternalLinkIcon, Link2Icon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { controlStateColorTransition } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueLinkProps {\n  className?: string;\n  children: React.ReactNode;\n  href: string;\n  as?: React.ElementType;\n}\n\nfunction isExternalUrl(href: string) {\n  return /^https?:\\/\\//.test(href);\n}\n\nexport function DataKeysAndValuesValueLink({ className, children, href, as }: DataKeysAndValuesValueLinkProps) {\n  const isExternal = isExternalUrl(href);\n  const Component = as || 'a';\n  // Pass `to` only for custom components so React-Router's `Link` (which reads `to`) works\n  // while native anchors don't get an unknown `to` attribute warning.\n  const navigationProps = as ? { href, to: href } : { href };\n\n  const linkClassName = cn(\n    'flex items-center gap-2 truncate hover:text-foreground',\n    controlStateColorTransition,\n    '[&:hover>svg]:opacity-100 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:opacity-70',\n  );\n\n  if (isExternal) {\n    return (\n      <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" className={linkClassName}>\n          <span>{children}</span>\n          <ExternalLinkIcon />\n        </a>\n      </dd>\n    );\n  }\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Component {...navigationProps} className={linkClassName}>\n        <span>{children}</span>\n        <Link2Icon />\n      </Component>\n    </dd>\n  );\n}\n","import { CheckIcon, CopyIcon } from 'lucide-react';\nimport { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithCopyBtnProps {\n  className?: string;\n  children: React.ReactNode;\n  copyValue: string;\n  copyTooltip?: string;\n}\n\nexport function DataKeysAndValuesValueWithCopyBtn({\n  className,\n  children,\n  copyValue,\n  copyTooltip = 'Copy to clipboard',\n}: DataKeysAndValuesValueWithCopyBtnProps) {\n  const { isCopied, handleCopy } = useCopyToClipboard({\n    text: copyValue,\n    copyMessage: 'Copied!',\n  });\n\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip open={isCopied || undefined}>\n        <TooltipTrigger asChild>\n          <button\n            onClick={handleCopy}\n            type=\"button\"\n            className={cn(\n              'flex items-center gap-2 text-left whitespace-nowrap',\n              '[&:hover>svg]:opacity-100 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:opacity-70',\n              { '[&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-success-indicator': isCopied },\n            )}\n            aria-label={isCopied ? 'Copied!' : copyTooltip}\n          >\n            <span>{children}</span>\n            {isCopied ? <CheckIcon /> : <CopyIcon />}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent>{isCopied ? 'Copied!' : copyTooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { dataKeysAndValuesValueStyles } from './shared';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nexport interface DataKeysAndValuesValueWithTooltipProps {\n  className?: string;\n  children: React.ReactNode;\n  tooltip: string;\n}\n\nexport function DataKeysAndValuesValueWithTooltip({\n  className,\n  children,\n  tooltip,\n}: DataKeysAndValuesValueWithTooltipProps) {\n  return (\n    <dd className={cn(dataKeysAndValuesValueStyles, className)}>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <div tabIndex={0} className=\"inline cursor-help truncate\">\n            {children}\n          </div>\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    </dd>\n  );\n}\n","import { DataKeysAndValuesHeader } from './data-keys-and-values-header';\nimport { DataKeysAndValuesKey } from './data-keys-and-values-key';\nimport { DataKeysAndValuesRoot } from './data-keys-and-values-root';\nimport { DataKeysAndValuesValue } from './data-keys-and-values-value';\nimport { DataKeysAndValuesValueLink } from './data-keys-and-values-value-link';\nimport { DataKeysAndValuesValueWithCopyBtn } from './data-keys-and-values-value-with-copy-btn';\nimport { DataKeysAndValuesValueWithTooltip } from './data-keys-and-values-value-with-tooltip';\n\nexport const DataKeysAndValues = Object.assign(DataKeysAndValuesRoot, {\n  Key: DataKeysAndValuesKey,\n  Value: DataKeysAndValuesValue,\n  ValueLink: DataKeysAndValuesValueLink,\n  ValueWithTooltip: DataKeysAndValuesValueWithTooltip,\n  ValueWithCopyBtn: DataKeysAndValuesValueWithCopyBtn,\n  Header: DataKeysAndValuesHeader,\n});\n"],"names":["cn","jsx","controlStateColorTransition","jsxs","ExternalLinkIcon","Link2Icon","useCopyToClipboard","Tooltip","TooltipTrigger","CheckIcon","CopyIcon","TooltipContent","tooltip"],"mappings":"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"}