@mastra/playground-ui 56.0.0-alpha.12 → 56.0.0-alpha.13

package/dist/ee/topics/components/topic-trace-summary-list.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"topic-trace-summary-list.cjs.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup variant=\"outline\">\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":["useState","useMemo","getVisibleTraceSummaries","useDataListKeyboard","jsxs","InputGroup","jsx","InputGroupAddon","SearchIcon","InputGroupInput","DataList","Button","ChevronDown"],"mappings":"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"}
+{"version":3,"file":"topic-trace-summary-list.cjs.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup>\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":["useState","useMemo","getVisibleTraceSummaries","useDataListKeyboard","jsxs","InputGroup","jsx","InputGroupAddon","SearchIcon","InputGroupInput","DataList","Button","ChevronDown"],"mappings":"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"}

package/dist/ee/topics/components/topic-trace-summary-list.es.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { SearchIcon, ChevronDown } from 'lucide-react';
 import { useState, useMemo } from 'react';
 import { getVisibleTraceSummaries } from '../utils.es.js';
-import { B as Button } from '../../../Button-CtuSHFtc.js';
-import { D as DataList } from '../../../data-list-CGB8KPW9.js';
+import { B as Button } from '../../../Button-agleFztW.js';
+import { D as DataList } from '../../../data-list-BE4apku9.js';
 import { u as useDataListKeyboard } from '../../../use-data-list-keyboard-DFQr4t38.js';
-import { I as InputGroup, a as InputGroupAddon, c as InputGroupInput } from '../../../input-group-Cjcx7BFu.js';
+import { I as InputGroup, a as InputGroupAddon, c as InputGroupInput } from '../../../input-group-BkqYi1zD.js';
 
 function TopicTraceSummaryList({
   traces,
@@ -21,7 +21,7 @@ function TopicTraceSummaryList({
   );
   const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });
   return /* @__PURE__ */ jsxs("section", { className: "flex min-h-0 flex-1 flex-col gap-4", "aria-label": "Topic trace summaries", children: [
-    /* @__PURE__ */ jsxs(InputGroup, { variant: "outline", children: [
+    /* @__PURE__ */ jsxs(InputGroup, { children: [
       /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
       /* @__PURE__ */ jsx(
         InputGroupInput,

package/dist/ee/topics/components/topic-trace-summary-list.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"topic-trace-summary-list.es.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup variant=\"outline\">\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,qBAAA,CAAsB;AAAA,EACpC,MAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,EAA+B;AAC7B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,EAAE,CAAA;AACvC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAElC,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACd,MAAM,yBAAyB,MAAA,EAAQ,EAAE,QAAQ,IAAA,EAAM,QAAA,EAAU,IAAA,EAAM,QAAA,EAAU,CAAA;AAAA,IACjF,CAAC,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,MAAM;AAAA,GACjC;AAEA,EAAA,MAAM,EAAE,YAAA,EAAc,WAAA,EAAY,GAAI,mBAAA,CAAoB,EAAE,KAAA,EAAO,OAAA,CAAQ,MAAA,CAAO,MAAA,EAAQ,CAAA;AAE1F,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAU,oCAAA,EAAqC,cAAW,uBAAA,EACjE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAQ,SAAA,EAClB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAM,cAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd,CAAA;AAAA,sBACA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,eAAA;AAAA,UACX,WAAA,EAAY,eAAA;AAAA,UACZ,UAAU,CAAA,KAAA,KAAS;AACjB,YAAA,SAAA,CAAU,KAAA,CAAM,OAAO,KAAK,CAAA;AAC5B,YAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,UACX;AAAA;AAAA;AACF,KAAA,EACF,CAAA;AAAA,yBAEC,QAAA,EAAA,EAAS,OAAA,EAAQ,qBAAoB,SAAA,EAAU,gBAAA,EAAiB,WAAW,YAAA,EAC1E,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAA,CAAS,GAAA,EAAT,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,CAAS,QAAA,EAAT,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,CAAS,OAAA,EAAT,EAAiB,QAAA,EAAA,eAAA,EAAa,GACjC,CAAA,EACF,CAAA;AAAA,MAEC,QAAQ,MAAA,CAAO,MAAA,KAAW,CAAA,mBACzB,GAAA,CAAC,SAAS,OAAA,EAAT,EAAiB,OAAA,EAAQ,gCAAA,EAAiC,IAE3D,OAAA,CAAQ,MAAA,CAAO,GAAA,CAAI,CAAC,OAAO,KAAA,qBACzB,GAAA;AAAA,QAAC,QAAA,CAAS,SAAA;AAAA,QAAT;AAAA,UAEE,GAAG,YAAY,KAAK,CAAA;AAAA,UACrB,QAAA,EAAU,oBAAoB,KAAA,CAAM,EAAA;AAAA,UACpC,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,UAClC,cAAA,EAAc,oBAAoB,KAAA,CAAM,EAAA;AAAA,UAExC,8BAAC,QAAA,CAAS,QAAA,EAAT,EAAmB,QAAA,EAAA,KAAA,CAAM,IAAA,IAAQ,MAAM,EAAA,EAAG;AAAA,SAAA;AAAA,QANtC,KAAA,CAAM;AAAA,OAQd;AAAA,KAAA,EAEL,CAAA;AAAA,IAEC,QAAQ,OAAA,mBACP,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,sBAAO,WAAA,EAAA,EAAY,CAAA;AAAA,QACnB,OAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAS,MAAM,OAAA,CAAQ,CAAA,WAAA,KAAe,cAAc,CAAC,CAAA;AAAA,QACtD,QAAA,EAAA;AAAA,UAAA,oBAAA;AAAA,UACoB,QAAQ,MAAA,CAAO,MAAA;AAAA,UAAO,MAAA;AAAA,UAAK,OAAA,CAAQ,KAAA;AAAA,UAAM;AAAA;AAAA;AAAA,KAC9D,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"topic-trace-summary-list.es.js","sources":["../../../../src/ee/topics/components/topic-trace-summary-list.tsx"],"sourcesContent":["import { SearchIcon, ChevronDown } from 'lucide-react';\nimport { useMemo, useState } from 'react';\nimport type { TopicTraceSummary } from '../types';\nimport { getVisibleTraceSummaries } from '../utils';\nimport { Button } from '@/ds/components/Button';\nimport { DataList } from '@/ds/components/DataList/data-list';\nimport { useDataListKeyboard } from '@/ds/components/DataList/use-data-list-keyboard';\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '@/ds/components/InputGroup';\n\nexport interface TopicTraceSummaryListProps {\n  traces: TopicTraceSummary[];\n  selectedTraceId?: string | null;\n  onTraceSelect: (trace: TopicTraceSummary) => void;\n  pageSize?: number;\n}\n\nexport function TopicTraceSummaryList({\n  traces,\n  selectedTraceId,\n  onTraceSelect,\n  pageSize = 25,\n}: TopicTraceSummaryListProps) {\n  const [search, setSearch] = useState('');\n  const [page, setPage] = useState(1);\n\n  const visible = useMemo(\n    () => getVisibleTraceSummaries(traces, { search, sort: 'newest', page, pageSize }),\n    [page, pageSize, search, traces],\n  );\n\n  const { containerRef, getRowProps } = useDataListKeyboard({ count: visible.traces.length });\n\n  return (\n    <section className=\"flex min-h-0 flex-1 flex-col gap-4\" aria-label=\"Topic trace summaries\">\n      <InputGroup>\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupInput\n          type=\"search\"\n          aria-label=\"Search traces\"\n          placeholder=\"Search traces\"\n          onChange={event => {\n            setSearch(event.target.value);\n            setPage(1);\n          }}\n        />\n      </InputGroup>\n\n      <DataList columns=\"minmax(12rem,1fr)\" className=\"min-h-0 flex-1\" scrollRef={containerRef}>\n        <DataList.Top>\n          <DataList.TopCells>\n            <DataList.TopCell>Trace summary</DataList.TopCell>\n          </DataList.TopCells>\n        </DataList.Top>\n\n        {visible.traces.length === 0 ? (\n          <DataList.NoMatch message=\"No traces match this subtopic.\" />\n        ) : (\n          visible.traces.map((trace, index) => (\n            <DataList.RowButton\n              key={trace.id}\n              {...getRowProps(index)}\n              featured={selectedTraceId === trace.id}\n              onClick={() => onTraceSelect(trace)}\n              aria-pressed={selectedTraceId === trace.id}\n            >\n              <DataList.TextCell>{trace.name ?? trace.id}</DataList.TextCell>\n            </DataList.RowButton>\n          ))\n        )}\n      </DataList>\n\n      {visible.hasMore ? (\n        <Button\n          icon={<ChevronDown />}\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setPage(currentPage => currentPage + 1)}\n        >\n          Load more traces ({visible.traces.length} of {visible.total})\n        </Button>\n      ) : null}\n    </section>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/ee/topics/components/topics-layout.cjs.js

@@ -10,8 +10,8 @@ const resize_separator = require('../../../resize/separator.cjs.js');
 
 function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }) {
   const hasContent = Boolean(children || tracePanel);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface2 text-muted-foreground flex h-full min-h-0", children: [
-    sidebar ? /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-border1 min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background text-muted-foreground flex h-full min-h-0", children: [
+    sidebar ? /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "border-border min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
     hasContent ? /* @__PURE__ */ jsxRuntime.jsx("main", { className: contentPadding ? "min-w-0 flex-1 p-4" : "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(resize_panelGroup.PanelGroup, { className: "size-full min-h-0 min-w-0", orientation: "horizontal", children: [
       children ? /* @__PURE__ */ jsxRuntime.jsx(reactResizablePanels.Panel, { id: "topic-main", className: "min-w-0 pr-2", minSize: 35, children }) : null,
       tracePanel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/ee/topics/components/topics-layout.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"topics-layout.cjs.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-surface2 text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border1 min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","PanelGroup","Panel","Fragment","PanelSeparator","CollapsiblePanel"],"mappings":";;;;;;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAUC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,+CAAA,EAAiD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC/F,UAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAAD,eAAA,CAACE,4BAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACCD,cAAA,CAACE,8BAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACCH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAWH,cAAA,CAACI,mCAAe,CAAA,GAAK,IAAA;AAAA,wBACjCJ,cAAA;AAAA,UAACK,wCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"topics-layout.cjs.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-background text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","PanelGroup","Panel","Fragment","PanelSeparator","CollapsiblePanel"],"mappings":";;;;;;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAUC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,8CAAA,EAAgD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC9F,UAAA,mBACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAAD,eAAA,CAACE,4BAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACCD,cAAA,CAACE,8BAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACCH,eAAA,CAAAI,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAWH,cAAA,CAACI,mCAAe,CAAA,GAAK,IAAA;AAAA,wBACjCJ,cAAA;AAAA,UAACK,wCAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/ee/topics/components/topics-layout.es.js

@@ -6,8 +6,8 @@ import { PanelSeparator } from '../../../resize/separator.es.js';
 
 function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }) {
   const hasContent = Boolean(children || tracePanel);
-  return /* @__PURE__ */ jsxs("div", { className: "bg-surface2 text-muted-foreground flex h-full min-h-0", children: [
-    sidebar ? /* @__PURE__ */ jsx("aside", { className: "border-border1 min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background text-muted-foreground flex h-full min-h-0", children: [
+    sidebar ? /* @__PURE__ */ jsx("aside", { className: "border-border min-h-0 w-88 shrink-0 border-r", children: sidebar }) : null,
     hasContent ? /* @__PURE__ */ jsx("main", { className: contentPadding ? "min-w-0 flex-1 p-4" : "min-w-0 flex-1", children: /* @__PURE__ */ jsxs(PanelGroup, { className: "size-full min-h-0 min-w-0", orientation: "horizontal", children: [
       children ? /* @__PURE__ */ jsx(Panel, { id: "topic-main", className: "min-w-0 pr-2", minSize: 35, children }) : null,
       tracePanel ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/ee/topics/components/topics-layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"topics-layout.es.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-surface2 text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border1 min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAU,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,+CAAA,EAAiD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC/F,UAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACC,GAAA,CAAC,SAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACC,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAW,GAAA,CAAC,kBAAe,CAAA,GAAK,IAAA;AAAA,wBACjC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"topics-layout.es.js","sources":["../../../../src/ee/topics/components/topics-layout.tsx"],"sourcesContent":["import { Panel } from 'react-resizable-panels';\nimport { CollapsiblePanel } from '@/lib/resize/collapsible-panel';\nimport { PanelGroup } from '@/lib/resize/panel-group';\nimport { PanelSeparator } from '@/lib/resize/separator';\n\nexport interface TopicsLayoutProps {\n  sidebar?: React.ReactNode;\n  children?: React.ReactNode;\n  tracePanel?: React.ReactNode;\n  contentPadding?: boolean;\n}\n\nexport function TopicsLayout({ sidebar, children, tracePanel, contentPadding = true }: TopicsLayoutProps) {\n  const hasContent = Boolean(children || tracePanel);\n\n  return (\n    <div className=\"bg-background text-muted-foreground flex h-full min-h-0\">\n      {sidebar ? <aside className=\"border-border min-h-0 w-88 shrink-0 border-r\">{sidebar}</aside> : null}\n      {hasContent ? (\n        <main className={contentPadding ? 'min-w-0 flex-1 p-4' : 'min-w-0 flex-1'}>\n          <PanelGroup className=\"size-full min-h-0 min-w-0\" orientation=\"horizontal\">\n            {children ? (\n              <Panel id=\"topic-main\" className=\"min-w-0 pr-2\" minSize={35}>\n                {children}\n              </Panel>\n            ) : null}\n            {tracePanel ? (\n              <>\n                {children ? <PanelSeparator /> : null}\n                <CollapsiblePanel\n                  direction=\"right\"\n                  id=\"topic-trace-details\"\n                  minSize={300}\n                  maxSize=\"70%\"\n                  defaultSize={children ? '40%' : '100%'}\n                  collapsedSize={60}\n                  collapsible\n                  className=\"min-w-0 pl-2\"\n                >\n                  {tracePanel}\n                </CollapsiblePanel>\n              </>\n            ) : null}\n          </PanelGroup>\n        </main>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAYO,SAAS,aAAa,EAAE,OAAA,EAAS,UAAU,UAAA,EAAY,cAAA,GAAiB,MAAK,EAAsB;AACxG,EAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,QAAA,IAAY,UAAU,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACZ,QAAA,EAAA;AAAA,IAAA,OAAA,mBAAU,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,8CAAA,EAAgD,mBAAQ,CAAA,GAAW,IAAA;AAAA,IAC9F,UAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,cAAA,GAAiB,oBAAA,GAAuB,gBAAA,EACvD,QAAA,kBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,2BAAA,EAA4B,WAAA,EAAY,YAAA,EAC3D,QAAA,EAAA;AAAA,MAAA,QAAA,mBACC,GAAA,CAAC,SAAM,EAAA,EAAG,YAAA,EAAa,WAAU,cAAA,EAAe,OAAA,EAAS,EAAA,EACtD,QAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,6BACC,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAW,GAAA,CAAC,kBAAe,CAAA,GAAK,IAAA;AAAA,wBACjC,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,OAAA;AAAA,YACV,EAAA,EAAG,qBAAA;AAAA,YACH,OAAA,EAAS,GAAA;AAAA,YACT,OAAA,EAAQ,KAAA;AAAA,YACR,WAAA,EAAa,WAAW,KAAA,GAAQ,MAAA;AAAA,YAChC,aAAA,EAAe,EAAA;AAAA,YACf,WAAA,EAAW,IAAA;AAAA,YACX,SAAA,EAAU,cAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,GACE;AAAA,KAAA,EACN,GACF,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/{field-block-Cux0sH4A.js → field-block-DWkbNcsV.js}

@@ -1,9 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import './new-theme.css';/* empty css                   */
-import { c as cn } from './cn-BmQQRqRs.js';
+import { c as cn } from './cn-65Adrsfj.js';
 
 function FieldBlockColumn({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("new-theme grid gap-2 text-foreground", className), children });
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 text-foreground", className), children });
 }
 
 function FieldBlockErrorMsg({ children, name, className }) {
@@ -12,14 +11,14 @@ function FieldBlockErrorMsg({ children, name, className }) {
     {
       role: "alert",
       id: name !== void 0 ? `error-${name}` : void 0,
-      className: cn("new-theme text-ui-sm text-destructive", className),
+      className: cn("text-caption text-destructive", className),
       children
     }
   );
 }
 
 function FieldBlockHelpText({ children }) {
-  return /* @__PURE__ */ jsx("p", { className: "new-theme text-ui-sm text-muted-foreground", children });
+  return /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children });
 }
 
 function FieldBlockLabel({
@@ -36,9 +35,9 @@ function FieldBlockLabel({
     {
       htmlFor,
       className: cn(
-        "new-theme inline-flex items-center text-ui-smd font-medium",
+        "inline-flex items-center text-label",
         {
-          "text-ui-md": size === "bigger",
+          "text-body": size === "bigger",
           "text-foreground": !disabled,
           "text-muted-foreground": disabled
         },
@@ -65,7 +64,7 @@ function FieldBlockLayout({
     "div",
     {
       className: cn(
-        "new-theme relative grid gap-2 text-foreground",
+        "relative grid gap-2 text-foreground",
         {
           "horizontal-field-block grid-cols-[auto_1fr] items-baseline": layout === "horizontal"
         },
@@ -78,7 +77,7 @@ function FieldBlockLayout({
 }
 
 function FieldBlockMessage({ name, helpText, errorMsg }) {
-  return /* @__PURE__ */ jsx("div", { className: "new-theme text-ui-sm h-[1lh] min-w-0 overflow-hidden [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsx(FieldBlockHelpText, { children: helpText }) : null });
+  return /* @__PURE__ */ jsx("div", { className: "text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsx(FieldBlockHelpText, { children: helpText }) : null });
 }
 
 const FieldBlock = Object.assign(
@@ -94,4 +93,4 @@ const FieldBlock = Object.assign(
 );
 
 export { FieldBlock as F };
-//# sourceMappingURL=field-block-Cux0sH4A.js.map
+//# sourceMappingURL=field-block-DWkbNcsV.js.map

package/dist/field-block-DWkbNcsV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-DWkbNcsV.js","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.tsx","../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx","../src/ds/components/FormFieldBlocks/block/field-block-help-text.tsx","../src/ds/components/FormFieldBlocks/block/field-block-label.tsx","../src/ds/components/FormFieldBlocks/block/field-block-layout.tsx","../src/ds/components/FormFieldBlocks/block/field-block-message.tsx","../src/ds/components/FormFieldBlocks/block/field-block.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type FieldBlockColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function FieldBlockColumn({ children, className }: FieldBlockColumnProps) {\n  return <div className={cn('grid gap-2 text-foreground', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockErrorMsgProps = {\n  children?: React.ReactNode;\n  /**\n   * The field this message belongs to, matching the `name` given to `FieldBlock.Label`.\n   * Sets a stable `error-<name>` id so the control can point at it with\n   * `aria-describedby` and a screen reader reads the message with the field.\n   */\n  name?: string;\n  className?: string;\n};\n\nexport function FieldBlockErrorMsg({ children, name, className }: FieldBlockErrorMsgProps) {\n  return (\n    <p\n      // `role=\"alert\"` lives here rather than in a wrapper at every call site, so an\n      // error announces itself wherever it is used instead of depending on each caller\n      // remembering to wrap it.\n      role=\"alert\"\n      id={name !== undefined ? `error-${name}` : undefined}\n      className={cn('text-caption text-destructive', className)}\n    >\n      {children}\n    </p>\n  );\n}\n","export type FieldBlockHelpTextProps = {\n  children?: React.ReactNode;\n};\n\nexport function FieldBlockHelpText({ children }: FieldBlockHelpTextProps) {\n  return <p className=\"text-caption text-muted-foreground\">{children}</p>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLabelProps = {\n  children: React.ReactNode;\n  name: string;\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  size?: 'default' | 'bigger';\n  className?: string;\n};\n\nexport function FieldBlockLabel({\n  children,\n  name,\n  htmlFor = `input-${name}`,\n  required,\n  disabled = false,\n  size = 'default',\n  className,\n}: FieldBlockLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'inline-flex items-center text-label',\n        {\n          'text-body': size === 'bigger',\n          'text-foreground': !disabled,\n          'text-muted-foreground': disabled,\n        },\n        className,\n      )}\n    >\n      {children}\n      {required ? (\n        <>\n          <span aria-hidden className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive')}>\n            *\n          </span>\n          <span className=\"sr-only\"> (required)</span>\n        </>\n      ) : null}\n    </label>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLayoutProps = {\n  children: React.ReactNode;\n  className?: string;\n  layout?: 'vertical' | 'horizontal';\n  // Optional prop to specify label column width in horizontal layout\n  labelColumnWidth?: string; // e.g., '150px' or '30%'\n};\n\nexport function FieldBlockLayout({\n  children,\n  className,\n  layout = 'vertical',\n  labelColumnWidth,\n}: FieldBlockLayoutProps) {\n  return (\n    <div\n      className={cn(\n        'relative grid gap-2 text-foreground',\n        {\n          'horizontal-field-block grid-cols-[auto_1fr] items-baseline': layout === 'horizontal',\n        },\n        className,\n      )}\n      style={\n        layout === 'horizontal' && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : undefined\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\n\nexport type FieldBlockMessageProps = {\n  name: string;\n  helpText?: React.ReactNode;\n  errorMsg?: React.ReactNode;\n};\n\nexport function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps) {\n  return (\n    <div className=\"text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate\">\n      {errorMsg ? (\n        <FieldBlockErrorMsg name={name} className=\"truncate\">\n          {errorMsg}\n        </FieldBlockErrorMsg>\n      ) : helpText ? (\n        <FieldBlockHelpText>{helpText}</FieldBlockHelpText>\n      ) : null}\n    </div>\n  );\n}\n","import { FieldBlockColumn } from './field-block-column';\nimport { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\nimport { FieldBlockLabel } from './field-block-label';\nimport { FieldBlockLayout } from './field-block-layout';\nimport { FieldBlockMessage } from './field-block-message';\n\nexport const FieldBlock = Object.assign(\n  {},\n  {\n    Layout: FieldBlockLayout,\n    Column: FieldBlockColumn,\n    Label: FieldBlockLabel,\n    HelpText: FieldBlockHelpText,\n    ErrorMsg: FieldBlockErrorMsg,\n    Message: FieldBlockMessage,\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/{field-block-DjOm7woP.cjs → field-block-Dy1IaWbv.cjs}

@@ -1,11 +1,10 @@
 'use strict';
 
-require('./new-theme.css');const jsxRuntime = require('react/jsx-runtime');
-;/* empty css                     */
-const utils_cn = require('./cn-DqcFobIY.cjs');
+const jsxRuntime = require('react/jsx-runtime');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
 
 function FieldBlockColumn({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("new-theme grid gap-2 text-foreground", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-2 text-foreground", className), children });
 }
 
 function FieldBlockErrorMsg({ children, name, className }) {
@@ -14,14 +13,14 @@ function FieldBlockErrorMsg({ children, name, className }) {
     {
       role: "alert",
       id: name !== void 0 ? `error-${name}` : void 0,
-      className: utils_cn.cn("new-theme text-ui-sm text-destructive", className),
+      className: utils_cn.cn("text-caption text-destructive", className),
       children
     }
   );
 }
 
 function FieldBlockHelpText({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "new-theme text-ui-sm text-muted-foreground", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-caption text-muted-foreground", children });
 }
 
 function FieldBlockLabel({
@@ -38,9 +37,9 @@ function FieldBlockLabel({
     {
       htmlFor,
       className: utils_cn.cn(
-        "new-theme inline-flex items-center text-ui-smd font-medium",
+        "inline-flex items-center text-label",
         {
-          "text-ui-md": size === "bigger",
+          "text-body": size === "bigger",
           "text-foreground": !disabled,
           "text-muted-foreground": disabled
         },
@@ -67,7 +66,7 @@ function FieldBlockLayout({
     "div",
     {
       className: utils_cn.cn(
-        "new-theme relative grid gap-2 text-foreground",
+        "relative grid gap-2 text-foreground",
         {
           "horizontal-field-block grid-cols-[auto_1fr] items-baseline": layout === "horizontal"
         },
@@ -80,7 +79,7 @@ function FieldBlockLayout({
 }
 
 function FieldBlockMessage({ name, helpText, errorMsg }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "new-theme text-ui-sm h-[1lh] min-w-0 overflow-hidden [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockHelpText, { children: helpText }) : null });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate", children: errorMsg ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockErrorMsg, { name, className: "truncate", children: errorMsg }) : helpText ? /* @__PURE__ */ jsxRuntime.jsx(FieldBlockHelpText, { children: helpText }) : null });
 }
 
 const FieldBlock = Object.assign(
@@ -96,4 +95,4 @@ const FieldBlock = Object.assign(
 );
 
 exports.FieldBlock = FieldBlock;
-//# sourceMappingURL=field-block-DjOm7woP.cjs.map
+//# sourceMappingURL=field-block-Dy1IaWbv.cjs.map

package/dist/field-block-Dy1IaWbv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-block-Dy1IaWbv.cjs","sources":["../src/ds/components/FormFieldBlocks/block/field-block-column.tsx","../src/ds/components/FormFieldBlocks/block/field-block-error-msg.tsx","../src/ds/components/FormFieldBlocks/block/field-block-help-text.tsx","../src/ds/components/FormFieldBlocks/block/field-block-label.tsx","../src/ds/components/FormFieldBlocks/block/field-block-layout.tsx","../src/ds/components/FormFieldBlocks/block/field-block-message.tsx","../src/ds/components/FormFieldBlocks/block/field-block.tsx"],"sourcesContent":["import { cn } from '@/lib/utils';\n\nexport type FieldBlockColumnProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport function FieldBlockColumn({ children, className }: FieldBlockColumnProps) {\n  return <div className={cn('grid gap-2 text-foreground', className)}>{children}</div>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockErrorMsgProps = {\n  children?: React.ReactNode;\n  /**\n   * The field this message belongs to, matching the `name` given to `FieldBlock.Label`.\n   * Sets a stable `error-<name>` id so the control can point at it with\n   * `aria-describedby` and a screen reader reads the message with the field.\n   */\n  name?: string;\n  className?: string;\n};\n\nexport function FieldBlockErrorMsg({ children, name, className }: FieldBlockErrorMsgProps) {\n  return (\n    <p\n      // `role=\"alert\"` lives here rather than in a wrapper at every call site, so an\n      // error announces itself wherever it is used instead of depending on each caller\n      // remembering to wrap it.\n      role=\"alert\"\n      id={name !== undefined ? `error-${name}` : undefined}\n      className={cn('text-caption text-destructive', className)}\n    >\n      {children}\n    </p>\n  );\n}\n","export type FieldBlockHelpTextProps = {\n  children?: React.ReactNode;\n};\n\nexport function FieldBlockHelpText({ children }: FieldBlockHelpTextProps) {\n  return <p className=\"text-caption text-muted-foreground\">{children}</p>;\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLabelProps = {\n  children: React.ReactNode;\n  name: string;\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  size?: 'default' | 'bigger';\n  className?: string;\n};\n\nexport function FieldBlockLabel({\n  children,\n  name,\n  htmlFor = `input-${name}`,\n  required,\n  disabled = false,\n  size = 'default',\n  className,\n}: FieldBlockLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'inline-flex items-center text-label',\n        {\n          'text-body': size === 'bigger',\n          'text-foreground': !disabled,\n          'text-muted-foreground': disabled,\n        },\n        className,\n      )}\n    >\n      {children}\n      {required ? (\n        <>\n          <span aria-hidden className={cn('ml-0.5', disabled ? 'text-muted-foreground' : 'text-destructive')}>\n            *\n          </span>\n          <span className=\"sr-only\"> (required)</span>\n        </>\n      ) : null}\n    </label>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport type FieldBlockLayoutProps = {\n  children: React.ReactNode;\n  className?: string;\n  layout?: 'vertical' | 'horizontal';\n  // Optional prop to specify label column width in horizontal layout\n  labelColumnWidth?: string; // e.g., '150px' or '30%'\n};\n\nexport function FieldBlockLayout({\n  children,\n  className,\n  layout = 'vertical',\n  labelColumnWidth,\n}: FieldBlockLayoutProps) {\n  return (\n    <div\n      className={cn(\n        'relative grid gap-2 text-foreground',\n        {\n          'horizontal-field-block grid-cols-[auto_1fr] items-baseline': layout === 'horizontal',\n        },\n        className,\n      )}\n      style={\n        layout === 'horizontal' && labelColumnWidth ? { gridTemplateColumns: `${labelColumnWidth} 1fr` } : undefined\n      }\n    >\n      {children}\n    </div>\n  );\n}\n","import { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\n\nexport type FieldBlockMessageProps = {\n  name: string;\n  helpText?: React.ReactNode;\n  errorMsg?: React.ReactNode;\n};\n\nexport function FieldBlockMessage({ name, helpText, errorMsg }: FieldBlockMessageProps) {\n  return (\n    <div className=\"text-caption h-[1lh] min-w-0 overflow-hidden [&>p]:truncate\">\n      {errorMsg ? (\n        <FieldBlockErrorMsg name={name} className=\"truncate\">\n          {errorMsg}\n        </FieldBlockErrorMsg>\n      ) : helpText ? (\n        <FieldBlockHelpText>{helpText}</FieldBlockHelpText>\n      ) : null}\n    </div>\n  );\n}\n","import { FieldBlockColumn } from './field-block-column';\nimport { FieldBlockErrorMsg } from './field-block-error-msg';\nimport { FieldBlockHelpText } from './field-block-help-text';\nimport { FieldBlockLabel } from './field-block-label';\nimport { FieldBlockLayout } from './field-block-layout';\nimport { FieldBlockMessage } from './field-block-message';\n\nexport const FieldBlock = Object.assign(\n  {},\n  {\n    Layout: FieldBlockLayout,\n    Column: FieldBlockColumn,\n    Label: FieldBlockLabel,\n    HelpText: FieldBlockHelpText,\n    ErrorMsg: FieldBlockErrorMsg,\n    Message: FieldBlockMessage,\n  },\n);\n"],"names":["cn","jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/{filter-bar-chip-sj0_hRnm.cjs → filter-bar-chip-C-cZ8evS.cjs}

@@ -3,15 +3,16 @@
 require('./filter-bar-chip.css');const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const comboboxStyles = require('./combobox-styles-BqX8XbIZ.cjs');
+const comboboxStyles = require('./combobox-styles-Dbc8PEdI.cjs');
 const combobox = require('@base-ui/react/combobox');
-const spinner = require('./spinner-DSLa_M-f.cjs');
+const spinner = require('./spinner-CqP-NaB2.cjs');
 const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
-const utils_cn = require('./cn-DqcFobIY.cjs');
-const Button = require('./Button-CSmXdQ09.cjs');
-const kbd = require('./kbd-oFN7OUs5.cjs');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+const Button = require('./Button-DVIyS81j.cjs');
+const kbd = require('./kbd-B-Z2sNvK.cjs');
 const primitives_controlSize = require('./primitives/control-size.cjs.js');
 const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
 const primitives_menuItem = require('./primitives/menu-item.cjs.js');
 const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
 const hooks_useKeyboardShortcutLabel = require('./hooks/use-keyboard-shortcut-label.cjs.js');
@@ -68,10 +69,36 @@ function FilterBarProvider({
   draftRef.current = draft;
   const [lastCommit, setLastCommit] = React.useState(null);
   const settleCommit = React.useCallback(() => setLastCommit((prev) => prev ? { ...prev, glint: false } : null), []);
-  const items = React.useMemo(
-    () => lastCommit && !value.some((item) => item.id === lastCommit.item.id) ? [...value, lastCommit.item] : value,
-    [value, lastCommit]
+  const [leavingItems, setLeavingItems] = React.useState(
+    () => /* @__PURE__ */ new Map()
   );
+  const settleRemove = React.useCallback((id) => {
+    setLeavingItems((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const markLeaving = React.useCallback((removed) => {
+    if (removed.length === 0) return;
+    setLeavingItems((prev) => {
+      const next = new Map(prev);
+      for (const entry of removed) next.set(entry.item.id, entry);
+      return next;
+    });
+  }, []);
+  const { items, leaving } = React.useMemo(() => {
+    const present = new Set(value.map((item) => item.id));
+    const items2 = lastCommit && !present.has(lastCommit.item.id) ? [...value, lastCommit.item] : [...value];
+    const leaving2 = /* @__PURE__ */ new Set();
+    const pending = [...leavingItems.values()].filter((entry) => !present.has(entry.item.id)).sort((a, b) => a.index - b.index);
+    for (const entry of pending) {
+      items2.splice(Math.min(entry.index, items2.length), 0, entry.item);
+      leaving2.add(entry.item.id);
+    }
+    return { items: items2, leaving: leaving2 };
+  }, [value, lastCommit, leavingItems]);
   const newItemId = React.useCallback(
     (fieldId) => createItemId ? createItemId(fieldId) : createFilterId(),
     [createItemId]
@@ -104,16 +131,21 @@ function FilterBarProvider({
   );
   const removeItem = React.useCallback(
     (id) => {
-      onValueChange(itemsRef.current.filter((item) => item.id !== id));
+      const index = itemsRef.current.findIndex((item2) => item2.id === id);
+      const item = itemsRef.current[index];
+      if (item) markLeaving([{ item, index }]);
+      onValueChange(itemsRef.current.filter((item2) => item2.id !== id));
       setLastCommit(null);
       announce("Filter removed");
     },
-    [onValueChange, announce]
+    [onValueChange, announce, markLeaving]
   );
   const clear = React.useCallback(() => {
+    const removed = itemsRef.current.map((item, index) => ({ item, index })).filter(({ item }) => !nonRemovableIds.has(item.id));
+    markLeaving(removed);
     onValueChange(itemsRef.current.filter((item) => nonRemovableIds.has(item.id)));
     announce("All filters removed");
-  }, [onValueChange, announce, nonRemovableIds]);
+  }, [onValueChange, announce, nonRemovableIds, markLeaving]);
   const hasRemovableItems = value.some((item) => !nonRemovableIds.has(item.id));
   const registerNonRemovable = React.useCallback((itemId, nonRemovable) => {
     setNonRemovableIds((prev) => {
@@ -135,8 +167,10 @@ function FilterBarProvider({
   const focusInput = React.useCallback(() => {
     inputRef.current?.focus();
   }, []);
+  const renderedRef = React.useRef(items);
+  renderedRef.current = items;
   const focusChip = React.useCallback((fromIndex, direction, segment) => {
-    const items2 = itemsRef.current;
+    const items2 = renderedRef.current;
     const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
     for (let i = fromIndex; i >= 0 && i < items2.length; i += direction) {
       const item = items2[i];
@@ -153,17 +187,10 @@ function FilterBarProvider({
   }, []);
   const focusAfterRemove = React.useCallback(
     (removedIndex) => {
-      const next = itemsRef.current[removedIndex + 1] ?? itemsRef.current[removedIndex - 1];
-      if (next) {
-        const el = segments.current.get(`${next.id}:value`) ?? segments.current.get(`${next.id}:field`);
-        if (el) {
-          el.focus();
-          return;
-        }
-      }
+      if (focusChip(removedIndex + 1, 1, "value") || focusChip(removedIndex - 1, -1, "value")) return;
       focusInput();
     },
-    [focusInput]
+    [focusChip, focusInput]
   );
   const ctx = React.useMemo(
     () => ({
@@ -177,6 +204,8 @@ function FilterBarProvider({
       settleCommit,
       updateItem,
       removeItem,
+      leaving,
+      settleRemove,
       clear,
       hasRemovableItems,
       registerNonRemovable,
@@ -203,6 +232,8 @@ function FilterBarProvider({
       settleCommit,
       updateItem,
       removeItem,
+      leaving,
+      settleRemove,
       clear,
       hasRemovableItems,
       registerNonRemovable,
@@ -248,7 +279,7 @@ function FilterBarOptionList({
       {
         className: utils_cn.cn(
           comboboxStyles.comboboxStyles.listScroller,
-          "max-h-[min(var(--max-height-dropdown-max-height),60dvh)]",
+          "max-h-[min(var(--spacing-dropdown),60dvh)]",
           menu.containerClassName
         ),
         ...menu.getContainerProps({}),
@@ -433,17 +464,18 @@ function useValueStep({ field, operator, query, enabled, initialValue, onCommit
 }
 
 const segmentClass = utils_cn.cn(
-  "filter-bar-segment flex max-w-48 min-w-0 items-center gap-1 overflow-hidden px-2 text-ui-smd leading-ui-smd whitespace-nowrap outline-none",
-  "first:rounded-l-full last:rounded-r-full"
+  "filter-bar-segment flex max-w-48 min-w-0 items-center gap-1 overflow-hidden px-2 text-label whitespace-nowrap outline-none"
 );
+const FILTER_BAR_CONTROL_SIZE = "sm";
 const chipClass = utils_cn.cn(
-  "filter-bar-chip relative flex max-w-full items-stretch divide-x divide-border1 rounded-full border border-border1 bg-surface5 text-foreground",
-  primitives_controlSize.controlHeight.md
+  "filter-bar-chip relative flex max-w-full items-stretch divide-x divide-border overflow-hidden rounded-full",
+  primitives_formElement.inputSurfaceAndFocusWithinStyle,
+  primitives_controlSize.controlHeight[FILTER_BAR_CONTROL_SIZE]
 );
 const editableSegmentClass = utils_cn.cn(
   segmentClass,
-  "cursor-pointer transition-colors hover:bg-neutral6/5 hover:text-foreground",
-  "focus-visible:bg-neutral6/10 focus-visible:text-foreground data-[popup-open]:bg-neutral6/10 data-[popup-open]:text-foreground"
+  "cursor-pointer hover:bg-fill-subtle hover:text-foreground",
+  "focus-visible:bg-fill-hover focus-visible:text-foreground data-[popup-open]:bg-fill-hover data-[popup-open]:text-foreground"
 );
 function FilterBarFieldLabel({ field, label }) {
   const Icon = field?.icon;
@@ -487,12 +519,30 @@ function FilterBarChip({
   const operator = ctx.getOperator(item.operatorId);
   const index = ctx.items.findIndex((i) => i.id === item.id);
   const rootRef = React.useRef(null);
+  const leaving = ctx.leaving.has(item.id);
   const pinned = !draft && (readOnly || !removable);
-  const { registerNonRemovable } = ctx;
+  const { registerNonRemovable, settleRemove } = ctx;
   React.useEffect(() => {
     registerNonRemovable(item.id, pinned);
     return () => registerNonRemovable(item.id, false);
   }, [registerNonRemovable, item.id, pinned]);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!leaving || !root) return;
+    const animations = typeof root.getAnimations === "function" ? root.getAnimations({ subtree: true }) : [];
+    if (animations.length === 0) {
+      settleRemove(item.id);
+      return;
+    }
+    let cancelled = false;
+    Promise.all(animations.map((animation) => animation.finished)).then(() => {
+      if (!cancelled) settleRemove(item.id);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [leaving, item.id, settleRemove]);
   const operatorImplied = field ? ctx.getFieldOperators(field).length === 1 : false;
   const label = [
     field?.label ?? item.fieldId,
@@ -505,7 +555,7 @@ function FilterBarChip({
   const shine = commit?.glint ?? false;
   const handleKeyDown = React.useCallback(
     (event) => {
-      if (readOnly || draft || isInsidePopup(event.target)) return;
+      if (readOnly || draft || leaving || isInsidePopup(event.target)) return;
       const segments = Array.from(rootRef.current?.querySelectorAll("[data-filter-bar-segment]") ?? []);
       const current = segments.findIndex((el) => el === event.target);
       switch (event.key) {
@@ -532,11 +582,11 @@ function FilterBarChip({
           return;
       }
     },
-    [readOnly, draft, removable, ctx, index, item.id]
+    [readOnly, draft, leaving, removable, ctx, index, item.id]
   );
   const chipValue = React.useMemo(
-    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, draft, operatorImplied }),
-    [item, index, field, operator, openSegment, readOnly, draft, operatorImplied]
+    () => ({ item, index, field, operator, openSegment, setOpenSegment, readOnly, draft, leaving, operatorImplied }),
+    [item, index, field, operator, openSegment, readOnly, draft, leaving, operatorImplied]
   );
   const content = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(FilterBarChipField, {}),
@@ -550,12 +600,13 @@ function FilterBarChip({
       ref: rootRef,
       role: "group",
       "aria-label": label,
-      "aria-hidden": draft || void 0,
+      "aria-hidden": draft || leaving || void 0,
       "data-slot": "filter-bar-chip",
       "data-draft": draft || void 0,
       "data-readonly": readOnly || void 0,
-      "data-shine": shine || void 0,
-      className: utils_cn.cn(chipClass, className),
+      "data-leaving": leaving || void 0,
+      "data-shine": shine && !leaving || void 0,
+      className: utils_cn.cn(chipClass, leaving && "pointer-events-none", className),
       style: {
         "--filter-bar-segments-settled": settled,
         "--filter-bar-chip-shine": field?.color ?? "currentColor"
@@ -621,7 +672,7 @@ function SegmentCombobox({
   const [highlighted, setHighlighted] = React.useState(null);
   const isField = segment === "field";
   const content = isField ? /* @__PURE__ */ jsxRuntime.jsx(FilterBarFieldLabel, { field: chip.field, label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label });
-  if (chip.readOnly || chip.draft) {
+  if (chip.readOnly || chip.draft || chip.leaving) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -839,9 +890,9 @@ function ValueOptions({ step, onCancel }) {
         emptyText: step.allowFreeText ? "No suggestions — press Enter to use your text." : "No matching value."
       }
     ),
-    step.isMany && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border1 flex items-center justify-end gap-1 border-t p-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "xs", variant: "ghost", onClick: onCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "xs", variant: "default", onClick: () => step.commitSelection() || step.commitFreeText(), children: [
+    step.isMany && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center justify-end gap-1 border-t p-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { size: "sm", variant: "ghost", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { size: "sm", variant: "default", onClick: () => step.commitSelection() || step.commitFreeText(), children: [
         "Done",
         /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: modEnterLabel })
       ] })
@@ -903,6 +954,10 @@ function FilterBarChipRemove() {
   const ctx = useFilterBarContext();
   const chip = useChip();
   if (chip.readOnly || chip.draft) return null;
+  const removeClass = utils_cn.cn(editableSegmentClass, "px-1.5 text-muted-foreground [--filter-bar-segment-padding:0.375rem]");
+  if (chip.leaving) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: removeClass, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-[1.1em]" }) });
+  }
   const label = `Remove ${chip.field?.label ?? chip.item.fieldId} filter`;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -913,7 +968,7 @@ function FilterBarChipRemove() {
       "aria-label": label,
       title: label,
       ref: (el) => ctx.registerSegment(chip.item.id, "remove", el),
-      className: utils_cn.cn(editableSegmentClass, "px-1.5 text-muted-foreground [--filter-bar-segment-padding:0.375rem]"),
+      className: removeClass,
       onClick: () => {
         ctx.removeItem(chip.item.id);
         ctx.focusAfterRemove(chip.index);
@@ -927,6 +982,7 @@ FilterBarChip.Operator = FilterBarChipOperator;
 FilterBarChip.Value = FilterBarChipValue;
 FilterBarChip.Remove = FilterBarChipRemove;
 
+exports.FILTER_BAR_CONTROL_SIZE = FILTER_BAR_CONTROL_SIZE;
 exports.FilterBarChip = FilterBarChip;
 exports.FilterBarChipField = FilterBarChipField;
 exports.FilterBarChipOperator = FilterBarChipOperator;
@@ -941,4 +997,4 @@ exports.matchesQueryFilter = matchesQueryFilter;
 exports.segmentClass = segmentClass;
 exports.useFilterBarContext = useFilterBarContext;
 exports.useValueStep = useValueStep;
-//# sourceMappingURL=filter-bar-chip-sj0_hRnm.cjs.map
+//# sourceMappingURL=filter-bar-chip-C-cZ8evS.cjs.map