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

package/dist/traces-data-list-B6WI6noa.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-data-list-B6WI6noa.cjs","sources":["../src/ds/components/DataList/TracesDataList/traces-data-list-cells.tsx","../src/ds/components/DataList/TracesDataList/traces-data-list.tsx"],"sourcesContent":["import { CornerDownRightIcon, ListTreeIcon } from 'lucide-react';\nimport { DataListCell, DataListTextCell } from '../data-list-cells';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { cn } from '@/lib/utils';\n\n// ---------------------------------------------------------------------------\n// NameCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListNameCellProps {\n  name?: string | null;\n  /** `null`/missing → root span (Trace). Set → nested span (Subtrace). Drives the leading level icon. */\n  parentSpanId?: string | null;\n  /** When true, the leading level icon is wrapped in a Trace/Subtrace tooltip. Off by default —\n   *  only meaningful in branches mode, where rows mix root traces and subtraces. */\n  showLevelTooltip?: boolean;\n}\n\nexport function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }: TracesDataListNameCellProps) {\n  const isRoot = parentSpanId == null;\n  const Icon = isRoot ? ListTreeIcon : CornerDownRightIcon;\n  const label = isRoot ? 'Trace' : 'Subtrace';\n  const icon = (\n    <span aria-label={label} className=\"inline-flex shrink-0\">\n      <Icon className={cn('size-4 shrink-0', isRoot ? 'text-neutral3' : 'text-neutral2')} aria-hidden />\n    </span>\n  );\n  return (\n    <DataListCell className=\"text-ui-smd text-neutral4 flex min-w-0 items-center gap-2\">\n      {showLevelTooltip ? (\n        <Tooltip>\n          <TooltipTrigger asChild>{icon}</TooltipTrigger>\n          <TooltipContent>{label}</TooltipContent>\n        </Tooltip>\n      ) : (\n        icon\n      )}\n      <span className=\"min-w-0 truncate\">{name || '-'}</span>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListInputCellProps {\n  input?: string | null;\n}\n\nexport function TracesDataListInputCell({ input }: TracesDataListInputCellProps) {\n  return <DataListTextCell font=\"mono\">{input || '-'}</DataListTextCell>;\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nfunction EntityTypeIcon({ entityType, className }: { entityType: string; className?: string }) {\n  const iconClass = cn('size-3.5 shrink-0 text-neutral2', className);\n  const normalizedEntityType = entityType.toLowerCase();\n\n  switch (normalizedEntityType) {\n    case 'agent':\n      return <AgentIcon className={iconClass} aria-hidden />;\n    case 'workflow':\n    case 'workflow_run':\n      return <WorkflowIcon className={iconClass} aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport interface TracesDataListEntityCellProps {\n  entityType?: string | null;\n  entityName?: string | null;\n}\n\nexport function TracesDataListEntityCell({ entityType, entityName }: TracesDataListEntityCellProps) {\n  const type = entityType ?? '';\n\n  return (\n    <DataListCell className=\"flex min-w-0 items-center gap-2\">\n      <EntityTypeIcon entityType={type} />\n      {entityName ? <span className=\"text-ui-smd min-w-0 truncate\">{entityName}</span> : '-'}\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// StatusCell\n// ---------------------------------------------------------------------------\n\nconst UNSET_STATUS_CONFIG: { label: string; variant: BadgeVariant } = { label: '-', variant: 'neutral' };\n\nconst STATUS_CONFIG: Record<string, { label: string; variant: BadgeVariant }> = {\n  completed: { label: 'OK', variant: 'green' },\n  ok: { label: 'OK', variant: 'green' },\n  success: { label: 'OK', variant: 'green' },\n  error: { label: 'ERR', variant: 'red' },\n  running: { label: 'RUN', variant: 'neutral' },\n  unset: UNSET_STATUS_CONFIG,\n};\n\nexport interface TracesDataListStatusCellProps {\n  status?: string | null;\n}\n\nexport function TracesDataListStatusCell({ status }: TracesDataListStatusCellProps) {\n  const key = (status ?? 'unset').toLowerCase();\n  const config = STATUS_CONFIG[key] ?? UNSET_STATUS_CONFIG;\n\n  return (\n    <DataListCell>\n      <Badge size=\"xs\" variant={config.variant}>\n        {config.label}\n      </Badge>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListCreatedCell, DataListIdCell } from '../data-list-cells';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSpacer } from '../data-list-spacer';\nimport { DataListSubheader } from '../data-list-subheader';\nimport { DataListSubHeading } from '../data-list-subheading';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell, DataListTopCellWithTooltip } from '../data-list-top-cell';\nimport {\n  TracesDataListNameCell,\n  TracesDataListInputCell,\n  TracesDataListEntityCell,\n  TracesDataListStatusCell,\n} from './traces-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as ScoresDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as ScoresDataList\nfunction TracesDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const TracesDataList = Object.assign(TracesDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  IdCell: DataListIdCell,\n  CreatedCell: DataListCreatedCell,\n  NameCell: TracesDataListNameCell,\n  InputCell: TracesDataListInputCell,\n  EntityCell: TracesDataListEntityCell,\n  StatusCell: TracesDataListStatusCell,\n  NextPageLoading: DataListNextPageLoading,\n});\n"],"names":["ListTreeIcon","CornerDownRightIcon","jsx","cn","jsxs","DataListCell","Tooltip","TooltipTrigger","TooltipContent","DataListTextCell","AgentIcon","WorkflowIcon","Badge","DataListRoot","DataListTop","DataListTopCell","DataListTopCellWithTooltip","DataListRowButton","DataListNoMatch","DataListSubheader","DataListSubHeading","DataListSpacer","DataListIdCell","DataListCreatedCell","DataListNextPageLoading"],"mappings":"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"}

package/dist/traces-data-list-DC2gtmyd.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as DataListCell, e as DataListTextCell, f as DataListNextPageLoading, p as DataListCreatedCell, q as DataListIdCell, j as DataListSpacer, i as DataListNoMatch, l as DataListRowButton, o as DataListTopCellWithTooltip, b as DataListTopCell, a as DataListTop, D as DataListRoot } from './data-list-top-BA2UVl0j.js';
+import { a as DataListSubHeading, b as DataListSubheader } from './data-list-CIUOCtR5.js';
+import { ListTreeIcon, CornerDownRightIcon } from 'lucide-react';
+import { B as Badge } from './Badge-5RAaa8U3.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-D1PLTHDf.js';
+import { AgentIcon } from './icons/AgentIcon.es.js';
+import { WorkflowIcon } from './icons/WorkflowIcon.es.js';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }) {
+  const isRoot = parentSpanId == null;
+  const Icon = isRoot ? ListTreeIcon : CornerDownRightIcon;
+  const label = isRoot ? "Trace" : "Subtrace";
+  const icon = /* @__PURE__ */ jsx("span", { "aria-label": label, className: "inline-flex shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: cn("size-4 shrink-0", isRoot ? "text-neutral3" : "text-neutral2"), "aria-hidden": true }) });
+  return /* @__PURE__ */ jsxs(DataListCell, { className: "text-ui-smd text-neutral4 flex min-w-0 items-center gap-2", children: [
+    showLevelTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: icon }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: label })
+    ] }) : icon,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: name || "-" })
+  ] });
+}
+function TracesDataListInputCell({ input }) {
+  return /* @__PURE__ */ jsx(DataListTextCell, { font: "mono", children: input || "-" });
+}
+function EntityTypeIcon({ entityType, className }) {
+  const iconClass = cn("size-3.5 shrink-0 text-neutral2", className);
+  const normalizedEntityType = entityType.toLowerCase();
+  switch (normalizedEntityType) {
+    case "agent":
+      return /* @__PURE__ */ jsx(AgentIcon, { className: iconClass, "aria-hidden": true });
+    case "workflow":
+    case "workflow_run":
+      return /* @__PURE__ */ jsx(WorkflowIcon, { className: iconClass, "aria-hidden": true });
+    default:
+      return null;
+  }
+}
+function TracesDataListEntityCell({ entityType, entityName }) {
+  const type = entityType ?? "";
+  return /* @__PURE__ */ jsxs(DataListCell, { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx(EntityTypeIcon, { entityType: type }),
+    entityName ? /* @__PURE__ */ jsx("span", { className: "text-ui-smd min-w-0 truncate", children: entityName }) : "-"
+  ] });
+}
+const UNSET_STATUS_CONFIG = { label: "-", variant: "neutral" };
+const STATUS_CONFIG = {
+  completed: { label: "OK", variant: "green" },
+  ok: { label: "OK", variant: "green" },
+  success: { label: "OK", variant: "green" },
+  error: { label: "ERR", variant: "red" },
+  running: { label: "RUN", variant: "neutral" },
+  unset: UNSET_STATUS_CONFIG
+};
+function TracesDataListStatusCell({ status }) {
+  const key = (status ?? "unset").toLowerCase();
+  const config = STATUS_CONFIG[key] ?? UNSET_STATUS_CONFIG;
+  return /* @__PURE__ */ jsx(DataListCell, { children: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: config.variant, children: config.label }) });
+}
+
+function TracesDataListRoot(props) {
+  return /* @__PURE__ */ jsx(DataListRoot, { ...props });
+}
+const TracesDataList = Object.assign(TracesDataListRoot, {
+  Top: DataListTop,
+  TopCell: DataListTopCell,
+  TopCellWithTooltip: DataListTopCellWithTooltip,
+  RowButton: DataListRowButton,
+  NoMatch: DataListNoMatch,
+  Subheader: DataListSubheader,
+  SubHeading: DataListSubHeading,
+  Spacer: DataListSpacer,
+  IdCell: DataListIdCell,
+  CreatedCell: DataListCreatedCell,
+  NameCell: TracesDataListNameCell,
+  InputCell: TracesDataListInputCell,
+  EntityCell: TracesDataListEntityCell,
+  StatusCell: TracesDataListStatusCell,
+  NextPageLoading: DataListNextPageLoading
+});
+
+export { TracesDataList as T };
+//# sourceMappingURL=traces-data-list-DC2gtmyd.js.map

package/dist/traces-data-list-DC2gtmyd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traces-data-list-DC2gtmyd.js","sources":["../src/ds/components/DataList/TracesDataList/traces-data-list-cells.tsx","../src/ds/components/DataList/TracesDataList/traces-data-list.tsx"],"sourcesContent":["import { CornerDownRightIcon, ListTreeIcon } from 'lucide-react';\nimport { DataListCell, DataListTextCell } from '../data-list-cells';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { AgentIcon } from '@/ds/icons/AgentIcon';\nimport { WorkflowIcon } from '@/ds/icons/WorkflowIcon';\nimport { cn } from '@/lib/utils';\n\n// ---------------------------------------------------------------------------\n// NameCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListNameCellProps {\n  name?: string | null;\n  /** `null`/missing → root span (Trace). Set → nested span (Subtrace). Drives the leading level icon. */\n  parentSpanId?: string | null;\n  /** When true, the leading level icon is wrapped in a Trace/Subtrace tooltip. Off by default —\n   *  only meaningful in branches mode, where rows mix root traces and subtraces. */\n  showLevelTooltip?: boolean;\n}\n\nexport function TracesDataListNameCell({ name, parentSpanId, showLevelTooltip }: TracesDataListNameCellProps) {\n  const isRoot = parentSpanId == null;\n  const Icon = isRoot ? ListTreeIcon : CornerDownRightIcon;\n  const label = isRoot ? 'Trace' : 'Subtrace';\n  const icon = (\n    <span aria-label={label} className=\"inline-flex shrink-0\">\n      <Icon className={cn('size-4 shrink-0', isRoot ? 'text-neutral3' : 'text-neutral2')} aria-hidden />\n    </span>\n  );\n  return (\n    <DataListCell className=\"text-ui-smd text-neutral4 flex min-w-0 items-center gap-2\">\n      {showLevelTooltip ? (\n        <Tooltip>\n          <TooltipTrigger asChild>{icon}</TooltipTrigger>\n          <TooltipContent>{label}</TooltipContent>\n        </Tooltip>\n      ) : (\n        icon\n      )}\n      <span className=\"min-w-0 truncate\">{name || '-'}</span>\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// InputCell\n// ---------------------------------------------------------------------------\n\nexport interface TracesDataListInputCellProps {\n  input?: string | null;\n}\n\nexport function TracesDataListInputCell({ input }: TracesDataListInputCellProps) {\n  return <DataListTextCell font=\"mono\">{input || '-'}</DataListTextCell>;\n}\n\n// ---------------------------------------------------------------------------\n// EntityCell\n// ---------------------------------------------------------------------------\n\nfunction EntityTypeIcon({ entityType, className }: { entityType: string; className?: string }) {\n  const iconClass = cn('size-3.5 shrink-0 text-neutral2', className);\n  const normalizedEntityType = entityType.toLowerCase();\n\n  switch (normalizedEntityType) {\n    case 'agent':\n      return <AgentIcon className={iconClass} aria-hidden />;\n    case 'workflow':\n    case 'workflow_run':\n      return <WorkflowIcon className={iconClass} aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport interface TracesDataListEntityCellProps {\n  entityType?: string | null;\n  entityName?: string | null;\n}\n\nexport function TracesDataListEntityCell({ entityType, entityName }: TracesDataListEntityCellProps) {\n  const type = entityType ?? '';\n\n  return (\n    <DataListCell className=\"flex min-w-0 items-center gap-2\">\n      <EntityTypeIcon entityType={type} />\n      {entityName ? <span className=\"text-ui-smd min-w-0 truncate\">{entityName}</span> : '-'}\n    </DataListCell>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// StatusCell\n// ---------------------------------------------------------------------------\n\nconst UNSET_STATUS_CONFIG: { label: string; variant: BadgeVariant } = { label: '-', variant: 'neutral' };\n\nconst STATUS_CONFIG: Record<string, { label: string; variant: BadgeVariant }> = {\n  completed: { label: 'OK', variant: 'green' },\n  ok: { label: 'OK', variant: 'green' },\n  success: { label: 'OK', variant: 'green' },\n  error: { label: 'ERR', variant: 'red' },\n  running: { label: 'RUN', variant: 'neutral' },\n  unset: UNSET_STATUS_CONFIG,\n};\n\nexport interface TracesDataListStatusCellProps {\n  status?: string | null;\n}\n\nexport function TracesDataListStatusCell({ status }: TracesDataListStatusCellProps) {\n  const key = (status ?? 'unset').toLowerCase();\n  const config = STATUS_CONFIG[key] ?? UNSET_STATUS_CONFIG;\n\n  return (\n    <DataListCell>\n      <Badge size=\"xs\" variant={config.variant}>\n        {config.label}\n      </Badge>\n    </DataListCell>\n  );\n}\n","import type { ComponentProps } from 'react';\nimport { DataListCreatedCell, DataListIdCell } from '../data-list-cells';\nimport { DataListNextPageLoading } from '../data-list-next-page-loading';\nimport { DataListNoMatch } from '../data-list-no-match';\nimport { DataListRoot } from '../data-list-root';\nimport { DataListRowButton } from '../data-list-row-button';\nimport { DataListSpacer } from '../data-list-spacer';\nimport { DataListSubheader } from '../data-list-subheader';\nimport { DataListSubHeading } from '../data-list-subheading';\nimport { DataListTop } from '../data-list-top';\nimport { DataListTopCell, DataListTopCellWithTooltip } from '../data-list-top-cell';\nimport {\n  TracesDataListNameCell,\n  TracesDataListInputCell,\n  TracesDataListEntityCell,\n  TracesDataListStatusCell,\n} from './traces-data-list-cells';\n\n// oxlint-disable-next-line react/only-export-components -- compound component root, same pattern as ScoresDataList\n// eslint-disable-next-line react-refresh/only-export-components -- compound component root, same pattern as ScoresDataList\nfunction TracesDataListRoot(props: ComponentProps<typeof DataListRoot>) {\n  return <DataListRoot {...props} />;\n}\n\nexport const TracesDataList = Object.assign(TracesDataListRoot, {\n  Top: DataListTop,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  RowButton: DataListRowButton,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  IdCell: DataListIdCell,\n  CreatedCell: DataListCreatedCell,\n  NameCell: TracesDataListNameCell,\n  InputCell: TracesDataListInputCell,\n  EntityCell: TracesDataListEntityCell,\n  StatusCell: TracesDataListStatusCell,\n  NextPageLoading: DataListNextPageLoading,\n});\n"],"names":[],"mappings":"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"}

package/dist/utils/cn.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
 
 
 

package/dist/utils/cn.es.js

@@ -1,2 +1,2 @@
-export { c as cn } from '../cn-ByEbywDh.js';
+export { c as cn } from '../cn-Dxjsbr9n.js';
 //# sourceMappingURL=cn.es.js.map

package/dist/utils/colors.cjs.js

@@ -10,6 +10,13 @@ const stringToColor = (str, lightness = 90, saturation = 100) => {
   }
   return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
 };
+const themedHueColor = (hue, saturation = 60) => `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;
+const stringToThemedColor = (str, saturation = 60) => {
+  const hue = Number(stringToColor(str).match(/hsl\((-?\d+)/)?.[1] ?? 0);
+  return themedHueColor(hue, saturation);
+};
 
 exports.stringToColor = stringToColor;
+exports.stringToThemedColor = stringToThemedColor;
+exports.themedHueColor = themedHueColor;
 //# sourceMappingURL=colors.cjs.js.map

package/dist/utils/colors.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;;;;"}
+{"version":3,"file":"colors.cjs.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n\n/** A hue rendered with the theme's lightness for generated accents (see `--generated-accent-lightness`). */\nexport const themedHueColor = (hue: number, saturation = 60) =>\n  `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;\n\n/** `stringToColor` counterpart: same stable hue, lightness follows the active theme. */\nexport const stringToThemedColor = (str: string, saturation = 60) => {\n  const hue = Number(stringToColor(str).match(/hsl\\((-?\\d+)/)?.[1] ?? 0);\n  return themedHueColor(hue, saturation);\n};\n"],"names":[],"mappings":";;;;AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;AAGO,MAAM,cAAA,GAAiB,CAAC,GAAA,EAAa,UAAA,GAAa,OACvD,CAAA,IAAA,EAAO,GAAG,IAAI,UAAU,CAAA,yCAAA;AAGnB,MAAM,mBAAA,GAAsB,CAAC,GAAA,EAAa,UAAA,GAAa,EAAA,KAAO;AACnE,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,aAAA,CAAc,GAAG,CAAA,CAAE,MAAM,cAAc,CAAA,GAAI,CAAC,CAAA,IAAK,CAAC,CAAA;AACrE,EAAA,OAAO,cAAA,CAAe,KAAK,UAAU,CAAA;AACvC;;;;;;"}

package/dist/utils/colors.es.js

@@ -6,6 +6,11 @@ const stringToColor = (str, lightness = 90, saturation = 100) => {
   }
   return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;
 };
+const themedHueColor = (hue, saturation = 60) => `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;
+const stringToThemedColor = (str, saturation = 60) => {
+  const hue = Number(stringToColor(str).match(/hsl\((-?\d+)/)?.[1] ?? 0);
+  return themedHueColor(hue, saturation);
+};
 
-export { stringToColor };
+export { stringToColor, stringToThemedColor, themedHueColor };
 //# sourceMappingURL=colors.es.js.map

package/dist/utils/colors.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.es.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;;;;"}
+{"version":3,"file":"colors.es.js","sources":["../../src/lib/colors.ts"],"sourcesContent":["export const stringToColor = (str: string, lightness: number = 90, saturation = 100) => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    hash = hash & hash;\n  }\n  return `hsl(${hash % 360}, ${saturation}%, ${lightness}%)`;\n};\n\n/** A hue rendered with the theme's lightness for generated accents (see `--generated-accent-lightness`). */\nexport const themedHueColor = (hue: number, saturation = 60) =>\n  `hsl(${hue} ${saturation}% var(--generated-accent-lightness, 60%))`;\n\n/** `stringToColor` counterpart: same stable hue, lightness follows the active theme. */\nexport const stringToThemedColor = (str: string, saturation = 60) => {\n  const hue = Number(stringToColor(str).match(/hsl\\((-?\\d+)/)?.[1] ?? 0);\n  return themedHueColor(hue, saturation);\n};\n"],"names":[],"mappings":"AAAO,MAAM,gBAAgB,CAAC,GAAA,EAAa,SAAA,GAAoB,EAAA,EAAI,aAAa,GAAA,KAAQ;AACtF,EAAA,IAAI,IAAA,GAAO,CAAA;AACX,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,GAAA,CAAI,QAAQ,CAAA,EAAA,EAAK;AACnC,IAAA,IAAA,GAAO,GAAA,CAAI,UAAA,CAAW,CAAC,CAAA,IAAA,CAAM,QAAQ,CAAA,IAAK,IAAA,CAAA;AAC1C,IAAA,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,EAChB;AACA,EAAA,OAAO,OAAO,IAAA,GAAO,GAAG,CAAA,EAAA,EAAK,UAAU,MAAM,SAAS,CAAA,EAAA,CAAA;AACxD;AAGO,MAAM,cAAA,GAAiB,CAAC,GAAA,EAAa,UAAA,GAAa,OACvD,CAAA,IAAA,EAAO,GAAG,IAAI,UAAU,CAAA,yCAAA;AAGnB,MAAM,mBAAA,GAAsB,CAAC,GAAA,EAAa,UAAA,GAAa,EAAA,KAAO;AACnE,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,aAAA,CAAc,GAAG,CAAA,CAAE,MAAM,cAAc,CAAA,GAAI,CAAC,CAAA,IAAK,CAAC,CAAA;AACrE,EAAA,OAAO,cAAA,CAAe,KAAK,UAAU,CAAA;AACvC;;;;"}

package/dist/utils/toast.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const toast = require('../toast-FypW736q.cjs');
+const toast = require('../toast-DF-uDV6R.cjs');
 
 
 

package/dist/utils/toast.es.js

@@ -1,2 +1,2 @@
-export { t as toast } from '../toast-Xv8jgrMR.js';
+export { t as toast } from '../toast-BfIhbri4.js';
 //# sourceMappingURL=toast.es.js.map

package/new-theme.css

@@ -0,0 +1,31 @@
+.new-theme {
+  --background: var(--background-2);
+  --sidebar: var(--background-1);
+  --card: var(--background-3);
+  --popover: var(--background-3);
+  --muted: var(--gray-1);
+  --foreground: var(--gray-10);
+  --muted-foreground: var(--gray-9);
+  --border: var(--gray-alpha-2);
+  --ring: var(--gray-8);
+  --sidebar-accent: var(--gray-alpha-1);
+  --selected: var(--gray-alpha-2);
+}
+
+html.light .new-theme {
+  --border: var(--gray-alpha-3);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-sidebar: var(--sidebar);
+  --color-card: var(--card);
+  --color-popover: var(--popover);
+  --color-muted: var(--muted);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-selected: var(--selected);
+}

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "55.0.0",
+  "version": "56.0.0-alpha.5",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
     "dist",
-    "theme.css"
+    "theme.css",
+    "new-theme.css"
   ],
   "exports": {
     "./style.css": "./dist/style.css",
     "./theme.css": "./theme.css",
+    "./new-theme.css": "./new-theme.css",
     "./tokens": {
       "import": {
         "types": "./dist/tokens.d.ts",
@@ -118,6 +120,12 @@
         "default": "./dist/new/settings.es.js"
       }
     },
+    "./new/sidebar": {
+      "import": {
+        "types": "./dist/new/sidebar.d.ts",
+        "default": "./dist/new/sidebar.es.js"
+      }
+    },
     "./new/layout/app-shell": {
       "import": {
         "types": "./dist/new/layout/app-shell.d.ts",
@@ -183,8 +191,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.46.0",
-    "@mastra/react": "1.5.0"
+    "@mastra/client-js": "^1.47.0-alpha.5",
+    "@mastra/react": "1.6.0-alpha.5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -204,7 +212,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.2.0",
-    "@vitest/ui": "4.1.10",
+    "@vitest/ui": "4.1.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -225,12 +233,12 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "@internal/lint": "0.0.133",
-    "@mastra/client-js": "^1.46.0",
-    "@mastra/core": "1.67.0",
-    "@mastra/react": "1.5.0",
-    "@mastra/memory": "1.30.0"
+    "@mastra/core": "1.68.0-alpha.5",
+    "@mastra/memory": "1.31.0-alpha.3",
+    "@mastra/client-js": "^1.47.0-alpha.5",
+    "@mastra/react": "1.6.0-alpha.5"
   },
   "homepage": "https://mastra.ai",
   "repository": {
@@ -255,6 +263,6 @@
     "build:publish": "pnpm build && yalc push",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006 --no-open",
-    "build-storybook": "storybook build"
+    "build-storybook": "pnpm -w build:core && storybook build"
   }
 }

package/theme.css

@@ -15,6 +15,30 @@
   --surface5: oklch(24.35% 0 0deg / 90%);
   --surface6: oklch(30.92% 0 0deg);
 
+  --background-1: oklch(0 0 0);
+  --background-2: oklch(0.1591 0 0);
+  --background-3: oklch(0.1913 0 0);
+  --gray-1: oklch(0.2178 0 0);
+  --gray-2: oklch(0.2435 0 0);
+  --gray-3: oklch(0.2686 0 0);
+  --gray-4: oklch(0.3092 0 0);
+  --gray-5: oklch(0.3715 0 0);
+  --gray-6: oklch(0.4495 0 0);
+  --gray-7: oklch(0.5208 0 0);
+  --gray-8: oklch(0.65 0 0);
+  --gray-9: oklch(0.7699 0 0);
+  --gray-10: oklch(0.9851 0 0);
+  --gray-alpha-1: rgb(255 255 255 / 4%);
+  --gray-alpha-2: rgb(255 255 255 / 7%);
+  --gray-alpha-3: rgb(255 255 255 / 10%);
+  --gray-alpha-4: rgb(255 255 255 / 14%);
+  --gray-alpha-5: rgb(255 255 255 / 18%);
+  --gray-alpha-6: rgb(255 255 255 / 30%);
+  --gray-alpha-7: rgb(255 255 255 / 45%);
+  --gray-alpha-8: rgb(255 255 255 / 60%);
+  --gray-alpha-9: rgb(255 255 255 / 75%);
+  --gray-alpha-10: rgb(255 255 255 / 90%);
+
   --accent1: oklch(0.723 0.219 149.579);
   --accent2: oklch(0.637 0.237 25.331);
   --accent3: oklch(0.623 0.214 259.815);
@@ -41,6 +65,8 @@
   --neutral6: oklch(0.985 0 0);
 
   --error: oklch(0.637 0.237 25.331);
+  /* Lightness for hue-only generated accents (e.g. per-filter colors) — legible on each theme. */
+  --generated-accent-lightness: 72%;
   --overlay: oklch(0% 0 0deg / 75%);
   --border1: oklch(100% 0 0deg / 7%);
   --border2: oklch(100% 0 0deg / 11%);
@@ -132,6 +158,30 @@ html.light {
   --surface5: oklch(94.4% 0 0deg / 94%);
   --surface6: oklch(89.5% 0 0deg);
 
+  --background-1: oklch(0.9642 0 0);
+  --background-2: oklch(0.9851 0 0);
+  --background-3: oklch(1 0 0);
+  --gray-1: oklch(0.9431 0 0);
+  --gray-2: oklch(0.9189 0 0);
+  --gray-3: oklch(0.8945 0 0);
+  --gray-4: oklch(0.8452 0 0);
+  --gray-5: oklch(0.7604 0 0);
+  --gray-6: oklch(0.6201 0 0);
+  --gray-7: oklch(0.5486 0 0);
+  --gray-8: oklch(0.4459 0 0);
+  --gray-9: oklch(0.3092 0 0);
+  --gray-10: oklch(0.1286 0 0);
+  --gray-alpha-1: rgb(0 0 0 / 4%);
+  --gray-alpha-2: rgb(0 0 0 / 7%);
+  --gray-alpha-3: rgb(0 0 0 / 10%);
+  --gray-alpha-4: rgb(0 0 0 / 14%);
+  --gray-alpha-5: rgb(0 0 0 / 18%);
+  --gray-alpha-6: rgb(0 0 0 / 30%);
+  --gray-alpha-7: rgb(0 0 0 / 45%);
+  --gray-alpha-8: rgb(0 0 0 / 60%);
+  --gray-alpha-9: rgb(0 0 0 / 75%);
+  --gray-alpha-10: rgb(0 0 0 / 90%);
+
   --accent1: oklch(0.627 0.194 149.214);
   --accent2: oklch(0.577 0.245 27.325);
   --accent3: oklch(0.546 0.245 262.881);
@@ -158,6 +208,7 @@ html.light {
   --neutral6: oklch(0.13 0 0);
 
   --error: oklch(0.577 0.245 27.325);
+  --generated-accent-lightness: 38%;
   --overlay: oklch(20.8% 0 0deg / 45%);
   --border1: oklch(20.8% 0 0deg / 10%);
   --border2: oklch(20.8% 0 0deg / 16%);
@@ -361,6 +412,8 @@ html.light {
   --max-height-avatar-lg: 40px;
   --max-height-dropdown-max-height: 300px;
 
+  --min-height-header-default: 40px;
+
   --width-icon-default: 16px;
   --width-icon-lg: 20px;
   --width-icon-sm: 12px;

package/dist/Badge-B-LKnrNk.cjs

@@ -1,125 +0,0 @@
-'use strict';
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons_Icon = require('./icons/Icon.cjs.js');
-const primitives_transitions = require('./primitives/transitions.cjs.js');
-const utils_cn = require('./cn-DnbTIGXa.cjs');
-
-const badgeToneStyles = {
-  neutral: {
-    default: "bg-neutral6/5 text-badge-neutral-fg",
-    muted: "bg-neutral6/[0.025] text-badge-neutral-fg",
-    indicator: "bg-neutral3"
-  },
-  green: {
-    default: "bg-badge-green/20 text-badge-green-fg",
-    muted: "bg-badge-green/10 text-badge-green-fg",
-    indicator: "bg-badge-green"
-  },
-  red: {
-    default: "bg-badge-red/20 text-badge-red-fg",
-    muted: "bg-badge-red/10 text-badge-red-fg",
-    indicator: "bg-badge-red"
-  },
-  blue: {
-    default: "bg-badge-blue/20 text-badge-blue-fg",
-    muted: "bg-badge-blue/10 text-badge-blue-fg",
-    indicator: "bg-badge-blue"
-  },
-  yellow: {
-    default: "bg-badge-yellow/20 text-badge-yellow-fg",
-    muted: "bg-badge-yellow/10 text-badge-yellow-fg",
-    indicator: "bg-badge-yellow"
-  },
-  purple: {
-    default: "bg-badge-purple/20 text-badge-purple-fg",
-    muted: "bg-badge-purple/10 text-badge-purple-fg",
-    indicator: "bg-badge-purple"
-  },
-  orange: {
-    default: "bg-badge-orange/20 text-badge-orange-fg",
-    muted: "bg-badge-orange/10 text-badge-orange-fg",
-    indicator: "bg-badge-orange"
-  },
-  cyan: {
-    default: "bg-badge-cyan/20 text-badge-cyan-fg",
-    muted: "bg-badge-cyan/10 text-badge-cyan-fg",
-    indicator: "bg-badge-cyan"
-  },
-  pink: {
-    default: "bg-badge-pink/20 text-badge-pink-fg",
-    muted: "bg-badge-pink/10 text-badge-pink-fg",
-    indicator: "bg-badge-pink"
-  }
-};
-const badgeSizeStyles = {
-  xs: {
-    badge: "h-[18px] gap-0.5 text-ui-xs",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "pl-1 pr-1.5",
-    indicator: "size-1"
-  },
-  sm: {
-    badge: "h-5 gap-1 text-ui-xs",
-    withoutLeadingVisual: "px-1.5",
-    withLeadingVisual: "px-1.5",
-    indicator: "size-1"
-  },
-  md: {
-    badge: "h-5 gap-1 text-ui-sm",
-    withoutLeadingVisual: "px-2",
-    withLeadingVisual: "pl-1.5 pr-2",
-    indicator: "size-1.5"
-  }
-};
-const Badge = ({
-  icon,
-  indicator,
-  variant = "neutral",
-  emphasis = "default",
-  size = "md",
-  className,
-  children,
-  ...props
-}) => {
-  const hasIcon = Boolean(icon);
-  const withLeadingVisual = hasIcon || indicator !== void 0;
-  const sizeStyles = badgeSizeStyles[size];
-  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: utils_cn.cn(
-        "inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium",
-        "inset-ring-1 inset-ring-current/5",
-        "inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7",
-        "dark:bg-linear-to-b dark:from-white/3 dark:to-white/0",
-        badgeToneStyles[variant][emphasis],
-        sizeStyles.badge,
-        paddingClass,
-        primitives_transitions.transitions.colors,
-        className
-      ),
-      ...props,
-      children: [
-        indicator !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: utils_cn.cn(
-              "shrink-0 rounded-full",
-              badgeToneStyles[variant].indicator,
-              sizeStyles.indicator,
-              indicator === "pulse" && "motion-safe:animate-pulse motion-reduce:animate-none"
-            )
-          }
-        ) : null,
-        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { size: "sm", children: icon }) : null,
-        children
-      ]
-    }
-  );
-};
-
-exports.Badge = Badge;
-//# sourceMappingURL=Badge-B-LKnrNk.cjs.map

package/dist/Badge-B-LKnrNk.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge-B-LKnrNk.cjs","sources":["../src/ds/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { Icon } from '../../icons/Icon';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type BadgeEmphasis = 'default' | 'muted';\nexport type BadgeIndicator = 'dot' | 'pulse';\n\ntype BadgeToneStyles = Record<BadgeEmphasis, string> & { indicator: string };\n\nconst badgeToneStyles = {\n  neutral: {\n    default: 'bg-neutral6/5 text-badge-neutral-fg',\n    muted: 'bg-neutral6/[0.025] text-badge-neutral-fg',\n    indicator: 'bg-neutral3',\n  },\n  green: {\n    default: 'bg-badge-green/20 text-badge-green-fg',\n    muted: 'bg-badge-green/10 text-badge-green-fg',\n    indicator: 'bg-badge-green',\n  },\n  red: {\n    default: 'bg-badge-red/20 text-badge-red-fg',\n    muted: 'bg-badge-red/10 text-badge-red-fg',\n    indicator: 'bg-badge-red',\n  },\n  blue: {\n    default: 'bg-badge-blue/20 text-badge-blue-fg',\n    muted: 'bg-badge-blue/10 text-badge-blue-fg',\n    indicator: 'bg-badge-blue',\n  },\n  yellow: {\n    default: 'bg-badge-yellow/20 text-badge-yellow-fg',\n    muted: 'bg-badge-yellow/10 text-badge-yellow-fg',\n    indicator: 'bg-badge-yellow',\n  },\n  purple: {\n    default: 'bg-badge-purple/20 text-badge-purple-fg',\n    muted: 'bg-badge-purple/10 text-badge-purple-fg',\n    indicator: 'bg-badge-purple',\n  },\n  orange: {\n    default: 'bg-badge-orange/20 text-badge-orange-fg',\n    muted: 'bg-badge-orange/10 text-badge-orange-fg',\n    indicator: 'bg-badge-orange',\n  },\n  cyan: {\n    default: 'bg-badge-cyan/20 text-badge-cyan-fg',\n    muted: 'bg-badge-cyan/10 text-badge-cyan-fg',\n    indicator: 'bg-badge-cyan',\n  },\n  pink: {\n    default: 'bg-badge-pink/20 text-badge-pink-fg',\n    muted: 'bg-badge-pink/10 text-badge-pink-fg',\n    indicator: 'bg-badge-pink',\n  },\n} satisfies Record<string, BadgeToneStyles>;\n\nexport type BadgeVariant = keyof typeof badgeToneStyles;\n\nconst badgeSizeStyles = {\n  xs: {\n    badge: 'h-[18px] gap-0.5 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'pl-1 pr-1.5',\n    indicator: 'size-1',\n  },\n  sm: {\n    badge: 'h-5 gap-1 text-ui-xs',\n    withoutLeadingVisual: 'px-1.5',\n    withLeadingVisual: 'px-1.5',\n    indicator: 'size-1',\n  },\n  md: {\n    badge: 'h-5 gap-1 text-ui-sm',\n    withoutLeadingVisual: 'px-2',\n    withLeadingVisual: 'pl-1.5 pr-2',\n    indicator: 'size-1.5',\n  },\n};\n\nexport type BadgeSize = keyof typeof badgeSizeStyles;\n\ntype BadgeLeadingVisual = { icon?: ReactNode; indicator?: never } | { icon?: never; indicator?: BadgeIndicator };\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  BadgeLeadingVisual & {\n    variant?: BadgeVariant;\n    emphasis?: BadgeEmphasis;\n    size?: BadgeSize;\n    children?: ReactNode;\n  };\n\nexport const Badge = ({\n  icon,\n  indicator,\n  variant = 'neutral',\n  emphasis = 'default',\n  size = 'md',\n  className,\n  children,\n  ...props\n}: BadgeProps) => {\n  const hasIcon = Boolean(icon);\n  const withLeadingVisual = hasIcon || indicator !== undefined;\n  const sizeStyles = badgeSizeStyles[size];\n  const paddingClass = withLeadingVisual ? sizeStyles.withLeadingVisual : sizeStyles.withoutLeadingVisual;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex w-fit max-w-full shrink-0 items-center rounded-[7px] font-medium',\n        'inset-ring-1 inset-ring-current/5',\n        'inset-shadow-xs inset-shadow-white/5 dark:inset-shadow-[0_3px_10px_-2px_white] dark:inset-shadow-white/7',\n        'dark:bg-linear-to-b dark:from-white/3 dark:to-white/0',\n        badgeToneStyles[variant][emphasis],\n        sizeStyles.badge,\n        paddingClass,\n        transitions.colors,\n        className,\n      )}\n      {...props}\n    >\n      {indicator !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'shrink-0 rounded-full',\n            badgeToneStyles[variant].indicator,\n            sizeStyles.indicator,\n            indicator === 'pulse' && 'motion-safe:animate-pulse motion-reduce:animate-none',\n          )}\n        />\n      ) : null}\n      {hasIcon ? <Icon size=\"sm\">{icon}</Icon> : null}\n      {children}\n    </span>\n  );\n};\n"],"names":["jsxs","cn","transitions","jsx","Icon"],"mappings":"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"}