@mastra/playground-ui 52.0.1-alpha.0 → 53.0.0-alpha.2

package/dist/data-list-BUK_v9ax.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-BUK_v9ax.js","sources":["../src/ds/components/DataList/data-list-pagination.tsx","../src/ds/components/DataList/data-list-row-static.tsx","../src/ds/components/DataList/data-list-subheader.tsx","../src/ds/components/DataList/data-list-subheading.tsx","../src/ds/components/DataList/data-list-top-cells.tsx","../src/ds/components/DataList/data-list.tsx"],"sourcesContent":["import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';\nimport { Button } from '@/ds/components/Button';\n\nexport type DataListPaginationProps = {\n  currentPage?: number;\n  hasMore?: boolean;\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n};\n\nexport function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }: DataListPaginationProps) {\n  const showNavigation = (typeof currentPage === 'number' && currentPage > 0) || hasMore;\n\n  return (\n    <div className=\"text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4\">\n      <span>\n        Page <b>{currentPage ? currentPage + 1 : '1'}</b>\n      </span>\n      {showNavigation && (\n        <div className=\"flex gap-4\">\n          {typeof currentPage === 'number' && currentPage > 0 && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onPrevPage}>\n              <ArrowLeftIcon />\n              Previous\n            </Button>\n          )}\n          {hasMore && (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onNextPage}>\n              Next\n              <ArrowRightIcon />\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { useDataListRowWrapperContext } from './data-list-row-wrapper-context';\nimport { dataListRowStaticStyles } from './shared';\nimport type { DataListRowSharedProps } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type DataListRowStaticProps = ComponentPropsWithoutRef<'div'> & DataListRowSharedProps;\n\n/**\n * Non-interactive row. Use when a row should *display* like a regular row but\n * has no link target or click handler\n */\nexport const DataListRowStatic = forwardRef<HTMLDivElement, DataListRowStaticProps>(\n  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {\n    const isWrapped = useDataListRowWrapperContext();\n    const hasColumnOverride = colStart !== undefined || colEnd !== undefined;\n    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          isWrapped ? 'grid grid-cols-subgrid gap-8 px-5 transition-colors duration-200' : dataListRowStaticStyles,\n          className,\n        )}\n        style={resolvedStyle}\n        data-featured={featured || undefined}\n        data-variant={variant ?? 'default'}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListRowStatic.displayName = 'DataListRowStatic';\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubheaderProps = ComponentPropsWithoutRef<'div'>;\n\nexport const DataListSubheader = forwardRef<HTMLDivElement, DataListSubheaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'data-list-subheader relative isolate col-span-full px-5 py-3 text-ui-md font-medium text-neutral4',\n          'bg-(--data-list-background)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListSubheader.displayName = 'DataListSubheader';\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListSubHeadingProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport function DataListSubHeading({ children, className }: DataListSubHeadingProps) {\n  return <span className={cn('text-ui-sm font-normal text-neutral2', className)}>{children}</span>;\n}\n","import { forwardRef } from 'react';\nimport type { ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type DataListTopCellsProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * Drop the group's default left margin. Use when this sits as the second\n   * child of a gap-0 `DataList.Top`, beside a `DataList.TopSelectCell` that\n   * owns the leading column.\n   */\n  flushLeft?: boolean;\n  /**\n   * Place the group starting at this column line, spanning through to the\n   * last column. Defaults to the full grid (`col-span-full`). Use when this\n   * sits beside a leading cell that owns column 1.\n   */\n  colStart?: number;\n};\n\n/**\n * Non-interactive header equivalent of `DataList.RowButton`. Groups a set of\n * `DataList.TopCell`s with the same horizontal layout (gap, mx, px) as\n * `RowButton`, so columns inside a wrapped `Top` line up cell-for-cell with the\n * columns inside a wrapped `Row`.\n */\nexport const DataListTopCells = forwardRef<HTMLDivElement, DataListTopCellsProps>(\n  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto',\n          !colStart && 'col-span-full',\n          flushLeft && 'pl-0!',\n          className,\n        )}\n        style={colStart ? { ...style, gridColumn: `${colStart} / -1` } : style}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDataListTopCells.displayName = 'DataListTopCells';\n","import {\n  DataListActionsCell,\n  DataListCell,\n  DataListTextCell,\n  DataListNameCell,\n  DataListDescriptionCell,\n  DataListIdCell,\n  DataListRowHeaderCell,\n  DataListNumberCell,\n  DataListSelectCell,\n  DataListDateCell,\n  DataListTimeCell,\n} from './data-list-cells';\nimport { DataListNextPageLoading } from './data-list-next-page-loading';\nimport { DataListNoMatch } from './data-list-no-match';\nimport { DataListPagination } from './data-list-pagination';\nimport { DataListRoot } from './data-list-root';\nimport { DataListRowButton } from './data-list-row-button';\nimport { DataListRowLink } from './data-list-row-link';\nimport { DataListRowStatic } from './data-list-row-static';\nimport { DataListRowWrapper } from './data-list-row-wrapper';\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 {\n  DataListTopCell,\n  DataListTopCellWithTooltip,\n  DataListTopCellSmart,\n  DataListTopSelectCell,\n} from './data-list-top-cell';\nimport { DataListTopCells } from './data-list-top-cells';\n\nexport type { DataListRootProps, DataListVariant } from './data-list-root';\n\nexport const DataList = Object.assign(DataListRoot, {\n  Top: DataListTop,\n  TopCells: DataListTopCells,\n  TopCell: DataListTopCell,\n  TopCellWithTooltip: DataListTopCellWithTooltip,\n  TopCellSmart: DataListTopCellSmart,\n  RowWrapper: DataListRowWrapper,\n  RowButton: DataListRowButton,\n  RowLink: DataListRowLink,\n  RowStatic: DataListRowStatic,\n  Cell: DataListCell,\n  ActionsCell: DataListActionsCell,\n  TextCell: DataListTextCell,\n  NameCell: DataListNameCell,\n  DescriptionCell: DataListDescriptionCell,\n  IdCell: DataListIdCell,\n  RowHeaderCell: DataListRowHeaderCell,\n  NumberCell: DataListNumberCell,\n  DateCell: DataListDateCell,\n  TimeCell: DataListTimeCell,\n  SelectCell: DataListSelectCell,\n  TopSelectCell: DataListTopSelectCell,\n  NoMatch: DataListNoMatch,\n  Subheader: DataListSubheader,\n  SubHeading: DataListSubHeading,\n  Spacer: DataListSpacer,\n  NextPageLoading: DataListNextPageLoading,\n  Pagination: DataListPagination,\n});\n"],"names":[],"mappings":"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"}

package/dist/data-list-skeleton-BZR_Hkvj.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const dataListTopCell = require('./data-list-top-cell-CIs1L8gy.cjs');
+const utils_cn = require('./cn-DCPcv4xv.cjs');
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const headerWidths = ["3rem", "5rem", "4rem", "3.5rem", "4.5rem", "3rem"];
+function SkeletonBar({ width, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn("h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none", className),
+      style: { width }
+    }
+  );
+}
+function DataListSkeleton({
+  columns = "auto 1fr auto auto",
+  numberOfRows = 3,
+  fit,
+  variant
+}) {
+  const columnParts = columns.trim().split(/\s+/);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index] ?? widths[0];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(dataListTopCell.DataListRoot, { columns: skeletonColumns, fit, variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListTop, { children: Array.from({ length: columnCount }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListTopCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: headerWidths[colIdx % headerWidths.length] ?? headerWidths[0], className: "h-3" }) }, colIdx)) }),
+    Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid grid-cols-subgrid gap-8 px-5", ...dataListTopCell.dataListRowOuterStyles), children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(dataListTopCell.DataListCell, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBar, { width: getPseudoRandomWidth(rowIdx, colIdx) }) }, colIdx)) }, rowIdx))
+  ] });
+}
+
+exports.DataListSkeleton = DataListSkeleton;
+//# sourceMappingURL=data-list-skeleton-BZR_Hkvj.cjs.map

package/dist/data-list-skeleton-BZR_Hkvj.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-BZR_Hkvj.cjs","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit, DataListVariant } from './data-list-root';\nimport { DataListTop } from './data-list-top';\nimport { DataListTopCell } from './data-list-top-cell';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'] as const;\nconst headerWidths = ['3rem', '5rem', '4rem', '3.5rem', '4.5rem', '3rem'] as const;\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n  variant?: DataListVariant;\n};\n\nfunction SkeletonBar({ width, className }: { width: string; className?: string }) {\n  return (\n    <div\n      className={cn('h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none', className)}\n      style={{ width }}\n    />\n  );\n}\n\n/**\n * Loading placeholder mirroring the real list: same root, a sticky header\n * band with one placeholder label per column, then rows of placeholder cells.\n */\nexport function DataListSkeleton({\n  columns = 'auto 1fr auto auto',\n  numberOfRows = 3,\n  fit,\n  variant,\n}: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index] ?? widths[0];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit} variant={variant}>\n      <DataListTop>\n        {Array.from({ length: columnCount }).map((_, colIdx) => (\n          <DataListTopCell key={colIdx}>\n            <SkeletonBar width={headerWidths[colIdx % headerWidths.length] ?? headerWidths[0]} className=\"h-3\" />\n          </DataListTopCell>\n        ))}\n      </DataListTop>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div key={rowIdx} className={cn('grid grid-cols-subgrid gap-8 px-5', ...dataListRowOuterStyles)}>\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <SkeletonBar width={getPseudoRandomWidth(rowIdx, colIdx)} />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["jsx","cn","jsxs","DataListRoot","DataListTop","DataListTopCell","dataListRowOuterStyles","_","DataListCell"],"mappings":";;;;;;AAQA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AACxD,MAAM,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAA,EAAQ,QAAA,EAAU,UAAU,MAAM,CAAA;AASxE,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,SAAA,EAAU,EAA0C;AAChF,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA,CAAG,uFAAA,EAAyF,SAAS,CAAA;AAAA,MAChH,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ;AAMO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,oBAAA;AAAA,EACV,YAAA,GAAe,CAAA;AAAA,EACf,GAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,uBACEC,eAAA,CAACC,4BAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KAAU,OAAA,EAChD,QAAA,EAAA;AAAA,oBAAAH,cAAA,CAACI,2BAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,MAAA,oCAC1CC,+BAAA,EAAA,EACC,QAAA,kBAAAL,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,MAAM,CAAA,IAAK,YAAA,CAAa,CAAC,CAAA,EAAG,SAAA,EAAU,KAAA,EAAM,CAAA,EAAA,EAD/E,MAEtB,CACD,CAAA,EACH,CAAA;AAAA,IACC,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,2BAC5CA,cAAA,CAAC,KAAA,EAAA,EAAiB,WAAWC,WAAA,CAAG,mCAAA,EAAqC,GAAGK,sCAAsB,CAAA,EAC3F,gBAAM,IAAA,CAAK,EAAE,QAAQ,WAAA,EAAa,EAAE,GAAA,CAAI,CAACC,IAAG,MAAA,qBAC3CP,cAAA,CAACQ,gCACC,QAAA,kBAAAR,cAAA,CAAC,WAAA,EAAA,EAAY,OAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA,EAAA,EADzC,MAEnB,CACD,CAAA,EAAA,EALO,MAMV,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/data-list-skeleton-BoaQlbOY.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { D as DataListRoot, a as DataListTop, b as DataListTopCell, c as DataListCell, d as dataListRowOuterStyles } from './data-list-top-cell-D4-Hbz2H.js';
+import { c as cn } from './cn-B4oPhFx9.js';
+
+const widths = ["75%", "50%", "65%", "90%", "60%", "80%"];
+const headerWidths = ["3rem", "5rem", "4rem", "3.5rem", "4.5rem", "3rem"];
+function SkeletonBar({ width, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none", className),
+      style: { width }
+    }
+  );
+}
+function DataListSkeleton({
+  columns = "auto 1fr auto auto",
+  numberOfRows = 3,
+  fit,
+  variant
+}) {
+  const columnParts = columns.trim().split(/\s+/);
+  const columnCount = columnParts.length;
+  const skeletonColumns = columnParts.map((col) => col === "auto" ? "minmax(6rem, auto)" : col).join(" ");
+  const getPseudoRandomWidth = (rowIdx, colIdx) => {
+    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;
+    return widths[index] ?? widths[0];
+  };
+  return /* @__PURE__ */ jsxs(DataListRoot, { columns: skeletonColumns, fit, variant, children: [
+    /* @__PURE__ */ jsx(DataListTop, { children: Array.from({ length: columnCount }).map((_, colIdx) => /* @__PURE__ */ jsx(DataListTopCell, { children: /* @__PURE__ */ jsx(SkeletonBar, { width: headerWidths[colIdx % headerWidths.length] ?? headerWidths[0], className: "h-3" }) }, colIdx)) }),
+    Array.from({ length: numberOfRows }).map((_, rowIdx) => /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-subgrid gap-8 px-5", ...dataListRowOuterStyles), children: Array.from({ length: columnCount }).map((_2, colIdx) => /* @__PURE__ */ jsx(DataListCell, { children: /* @__PURE__ */ jsx(SkeletonBar, { width: getPseudoRandomWidth(rowIdx, colIdx) }) }, colIdx)) }, rowIdx))
+  ] });
+}
+
+export { DataListSkeleton as D };
+//# sourceMappingURL=data-list-skeleton-BoaQlbOY.js.map

package/dist/data-list-skeleton-BoaQlbOY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-skeleton-BoaQlbOY.js","sources":["../src/ds/components/DataList/data-list-skeleton.tsx"],"sourcesContent":["import { DataListCell } from './data-list-cells';\nimport { DataListRoot } from './data-list-root';\nimport type { DataListFit, DataListVariant } from './data-list-root';\nimport { DataListTop } from './data-list-top';\nimport { DataListTopCell } from './data-list-top-cell';\nimport { dataListRowOuterStyles } from './shared';\nimport { cn } from '@/lib/utils';\n\nconst widths = ['75%', '50%', '65%', '90%', '60%', '80%'] as const;\nconst headerWidths = ['3rem', '5rem', '4rem', '3.5rem', '4.5rem', '3rem'] as const;\n\nexport type DataListSkeletonProps = {\n  columns?: string;\n  numberOfRows?: number;\n  fit?: DataListFit;\n  variant?: DataListVariant;\n};\n\nfunction SkeletonBar({ width, className }: { width: string; className?: string }) {\n  return (\n    <div\n      className={cn('h-4 animate-pulse rounded-lg bg-(--data-list-background) text-transparent select-none', className)}\n      style={{ width }}\n    />\n  );\n}\n\n/**\n * Loading placeholder mirroring the real list: same root, a sticky header\n * band with one placeholder label per column, then rows of placeholder cells.\n */\nexport function DataListSkeleton({\n  columns = 'auto 1fr auto auto',\n  numberOfRows = 3,\n  fit,\n  variant,\n}: DataListSkeletonProps) {\n  const columnParts = columns.trim().split(/\\s+/);\n  const columnCount = columnParts.length;\n  const skeletonColumns = columnParts.map(col => (col === 'auto' ? 'minmax(6rem, auto)' : col)).join(' ');\n\n  const getPseudoRandomWidth = (rowIdx: number, colIdx: number) => {\n    const index = (rowIdx + colIdx + columnCount + numberOfRows) % widths.length;\n    return widths[index] ?? widths[0];\n  };\n\n  return (\n    <DataListRoot columns={skeletonColumns} fit={fit} variant={variant}>\n      <DataListTop>\n        {Array.from({ length: columnCount }).map((_, colIdx) => (\n          <DataListTopCell key={colIdx}>\n            <SkeletonBar width={headerWidths[colIdx % headerWidths.length] ?? headerWidths[0]} className=\"h-3\" />\n          </DataListTopCell>\n        ))}\n      </DataListTop>\n      {Array.from({ length: numberOfRows }).map((_, rowIdx) => (\n        <div key={rowIdx} className={cn('grid grid-cols-subgrid gap-8 px-5', ...dataListRowOuterStyles)}>\n          {Array.from({ length: columnCount }).map((_, colIdx) => (\n            <DataListCell key={colIdx}>\n              <SkeletonBar width={getPseudoRandomWidth(rowIdx, colIdx)} />\n            </DataListCell>\n          ))}\n        </div>\n      ))}\n    </DataListRoot>\n  );\n}\n"],"names":["_"],"mappings":";;;;AAQA,MAAM,SAAS,CAAC,KAAA,EAAO,OAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AACxD,MAAM,eAAe,CAAC,MAAA,EAAQ,QAAQ,MAAA,EAAQ,QAAA,EAAU,UAAU,MAAM,CAAA;AASxE,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,SAAA,EAAU,EAA0C;AAChF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,uFAAA,EAAyF,SAAS,CAAA;AAAA,MAChH,KAAA,EAAO,EAAE,KAAA;AAAM;AAAA,GACjB;AAEJ;AAMO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,OAAA,GAAU,oBAAA;AAAA,EACV,YAAA,GAAe,CAAA;AAAA,EACf,GAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA;AAC9C,EAAA,MAAM,cAAc,WAAA,CAAY,MAAA;AAChC,EAAA,MAAM,eAAA,GAAkB,WAAA,CAAY,GAAA,CAAI,CAAA,GAAA,KAAQ,GAAA,KAAQ,SAAS,oBAAA,GAAuB,GAAI,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEtG,EAAA,MAAM,oBAAA,GAAuB,CAAC,MAAA,EAAgB,MAAA,KAAmB;AAC/D,IAAA,MAAM,KAAA,GAAA,CAAS,MAAA,GAAS,MAAA,GAAS,WAAA,GAAc,gBAAgB,MAAA,CAAO,MAAA;AACtE,IAAA,OAAO,MAAA,CAAO,KAAK,CAAA,IAAK,MAAA,CAAO,CAAC,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,eAAA,EAAiB,KAAU,OAAA,EAChD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,WAAA,EAAa,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,MAAA,yBAC1C,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,MAAM,CAAA,IAAK,YAAA,CAAa,CAAC,CAAA,EAAG,SAAA,EAAU,KAAA,EAAM,CAAA,EAAA,EAD/E,MAEtB,CACD,CAAA,EACH,CAAA;AAAA,IACC,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,cAAc,CAAA,CAAE,IAAI,CAAC,CAAA,EAAG,2BAC5C,GAAA,CAAC,KAAA,EAAA,EAAiB,WAAW,EAAA,CAAG,mCAAA,EAAqC,GAAG,sBAAsB,CAAA,EAC3F,gBAAM,IAAA,CAAK,EAAE,QAAQ,WAAA,EAAa,EAAE,GAAA,CAAI,CAACA,IAAG,MAAA,qBAC3C,GAAA,CAAC,gBACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,OAAO,oBAAA,CAAqB,MAAA,EAAQ,MAAM,CAAA,EAAG,CAAA,EAAA,EADzC,MAEnB,CACD,CAAA,EAAA,EALO,MAMV,CACD;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}

package/dist/{data-list-CE6USbK0.cjs → data-list-top-cell-CIs1L8gy.cjs}

@@ -3,42 +3,35 @@
 const jsxRuntime = require('react/jsx-runtime');
 const dateFns = require('date-fns');
 const React = require('react');
-const index = require('./index-BRtrE4oe.cjs');
 const checkbox = require('./checkbox-z-Yfud4v.cjs');
 const utils_cn = require('./cn-DCPcv4xv.cjs');
-const lucideReact = require('lucide-react');
-const Button = require('./Button-D10WB4vc.cjs');
-const scrollArea = require('./scroll-area-D_-TyC0c.cjs');
+const scrollArea = require('./scroll-area-B1vdOFuC.cjs');
 const tooltip = require('./tooltip-DIi_oOxO.cjs');
 
 const dataListRowOuterStyles = [
-  "group/data-list-row data-list-row col-span-full relative min-h-9",
-  "transition-colors duration-200 rounded-lg"
+  "group/data-list-row data-list-row col-span-full relative min-h-9 bg-surface2",
+  "transition-colors duration-200"
+];
+const dataListRowStateStyles = [
+  "hover:bg-surface3 active:bg-surface4",
+  "data-featured:bg-surface3 has-data-featured:bg-surface3 has-data-selected:bg-surface3",
+  "data-featured:hover:bg-surface4 has-data-featured:hover:bg-surface4 has-data-selected:hover:bg-surface4",
+  "data-[variant=error]:bg-notice-destructive/10 has-data-[variant=error]:bg-notice-destructive/10"
 ];
 const dataListRowInteractiveStyles = [
-  "grid grid-cols-subgrid gap-8 px-5 outline-none cursor-pointer",
-  "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1",
-  "transition-colors duration-200 rounded-lg"
+  "grid grid-cols-subgrid gap-8 px-5 cursor-pointer",
+  "outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent1"
+];
+const dataListRowStyles = [
+  ...dataListRowInteractiveStyles,
+  ...dataListRowOuterStyles,
+  ...dataListRowStateStyles
 ];
-const dataListRowStyles = [...dataListRowInteractiveStyles, ...dataListRowOuterStyles];
 const dataListRowStaticStyles = ["grid grid-cols-subgrid gap-8 px-5", ...dataListRowOuterStyles];
-const dataListRowRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
-const dataListTopRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-top:opacity-100 group-hover/data-list-top:opacity-100";
+const dataListRowActionRevealStyles = "opacity-0 pointer-coarse:opacity-100 group-focus-within/data-list-row:opacity-100 group-hover/data-list-row:opacity-100";
 const dataListStickyStartStyles = [
-  "data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible",
-  'after:absolute after:-right-4 after:top-1/2 after:-translate-y-1/2 after:h-4 after:w-px after:bg-border2 after:content-[""] after:pointer-events-none'
+  "data-list-sticky-start sticky left-0 z-10 isolate self-stretch overflow-visible"
 ];
-const dataListRowVariants = index.cva("", {
-  variants: {
-    variant: {
-      default: "",
-      error: "bg-notice-destructive/10! hover:bg-notice-destructive/15!"
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
 
 function DataListCell({ children, className, as, sticky, ...rest }) {
   const Component = as || "span";
@@ -61,7 +54,7 @@ function DataListActionsCell({ children, className, ...rest }) {
     {
       className: utils_cn.cn(
         "flex w-full items-center justify-end gap-1 pr-3 transition-opacity duration-200",
-        dataListRowRevealStyles
+        dataListRowActionRevealStyles
       ),
       children
     }
@@ -106,7 +99,7 @@ function DataListRowHeaderCell({ children, className, ...rest }) {
     {
       sticky: "start",
       className: utils_cn.cn(
-        "data-list-row-header -mr-4 -ml-5 w-auto max-w-none rounded-l-lg pr-4 pl-5 text-left text-ui-sm font-medium text-neutral2",
+        "data-list-row-header -mr-4 -ml-5 w-auto max-w-none pr-4 pl-5 text-left text-ui-sm font-medium text-neutral2",
         className
       ),
       ...rest,
@@ -141,10 +134,10 @@ function DataListSelectCell({ checked, onToggle, disabled, ...rest }) {
       as: "label",
       className: utils_cn.cn(
         "size-8 justify-items-center self-center overflow-visible px-0",
-        !checked && dataListRowRevealStyles,
         disabled ? "cursor-not-allowed" : "cursor-pointer"
       ),
       onClick: (e) => e.stopPropagation(),
+      "data-selected": checked || void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         checkbox.Checkbox,
         {
@@ -197,9 +190,8 @@ function DataListNextPageLoading({
     "div",
     {
       ref: setEndOfListElement,
-      className: utils_cn.cn("col-span-full flex min-h-1 justify-center text-ui-md text-neutral3 opacity-50", {
-        "py-4": isLoading,
-        "py-0": !hasMore
+      className: utils_cn.cn("col-span-full -mt-px flex justify-center text-ui-md text-neutral3 opacity-50", {
+        "py-4": isLoading
       }),
       children: isLoading && loadingText
     }
@@ -214,102 +206,68 @@ function DataListNoMatch({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: utils_cn.cn("col-span-full flex flex-col items-center justify-center gap-2 py-12 text-neutral3", className),
+      className: utils_cn.cn(
+        "col-span-full flex flex-col items-center justify-center gap-2 rounded-lg bg-surface2 py-12 text-neutral3",
+        className
+      ),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-md", children: message })
     }
   );
 }
 
-function DataListPagination({ currentPage, hasMore, onNextPage, onPrevPage }) {
-  const showNavigation = typeof currentPage === "number" && currentPage > 0 || hasMore;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-ui-md text-neutral3 col-span-full flex items-center justify-center gap-8 py-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "Page ",
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: currentPage ? currentPage + 1 : "1" })
-    ] }),
-    showNavigation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-      typeof currentPage === "number" && currentPage > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { type: "button", variant: "outline", size: "sm", onClick: onPrevPage, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}),
-        "Previous"
-      ] }),
-      hasMore && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { type: "button", variant: "outline", size: "sm", onClick: onNextPage, children: [
-        "Next",
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, {})
-      ] })
-    ] })
-  ] });
-}
-
-const stickyHeaderBackgroundValues = {
-  tinted: {
-    background: "var(--surface-header)",
-    hoverBackground: "var(--surface-header-hover)"
-  },
-  surface: {
-    background: "var(--surface2)",
-    hoverBackground: "color-mix(in oklch, var(--surface2), var(--neutral6) 10%)"
-  },
-  transparent: {
-    background: "transparent",
-    hoverBackground: "transparent"
-  }
-};
 function getDataListMask(mask) {
   if (mask === void 0) return { top: false };
   if (typeof mask === "object") return { top: false, ...mask };
   return mask;
 }
-const borderlessTableStyles = [
+const dataListGridStyles = [
   "gap-y-px",
-  // A shared opaque tint gives both column headers and sticky row headers the
-  // same treatment without revealing scrolled content beneath sticky surfaces.
-  "[&_.data-list-top]:bg-[var(--data-list-sticky-header-background)] [&_.data-list-top]:rounded-lg",
-  "[&_.data-list-row]:rounded-lg",
-  "[&_.data-list-row]:hover:bg-surface-overlay-strong!",
-  "[&_.data-list-row:focus-within]:bg-surface-overlay-strong!",
-  "[&_.data-list-row>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-background)]",
+  // Rows are siblings of the header, so first/last are found via sibling combinators.
+  "[&_.data-list-row:not(.data-list-row~.data-list-row)]:rounded-t-lg",
+  "[&_.data-list-row:not(:has(~.data-list-row))]:rounded-b-lg",
+  "[&_.data-list-row:not(.data-list-row~.data-list-row)>.data-list-sticky-start]:rounded-tl-lg",
+  "[&_.data-list-row:not(:has(~.data-list-row))>.data-list-sticky-start]:rounded-bl-lg",
+  // Subheaders split the rows into sections; each section gets its own rounded ends.
+  "[&_.data-list-subheader+.data-list-row]:rounded-t-lg",
+  "[&_.data-list-row:has(+.data-list-subheader)]:rounded-b-lg",
+  "[&_.data-list-subheader+.data-list-row>.data-list-sticky-start]:rounded-tl-lg",
+  "[&_.data-list-row:has(+.data-list-subheader)>.data-list-sticky-start]:rounded-bl-lg",
+  "[&_.data-list-top]:bg-(--data-list-background)",
+  "[&_.data-list-row>.data-list-sticky-start]:bg-surface2",
   "[&_.data-list-row>.data-list-sticky-start]:after:right-0",
-  "[&_.data-list-row:hover>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-hover-background)]",
-  "[&_.data-list-row:focus-within>.data-list-sticky-start]:bg-[var(--data-list-sticky-header-hover-background)]",
   "[&_.data-list-top>.data-list-sticky-start]:after:right-0"
 ];
+const dataListVariantClasses = {
+  default: "bg-surface4",
+  light: ""
+};
+const dataListVariantBackground = {
+  default: "var(--surface4)",
+  light: "var(--surface1)"
+};
 const dataListFitClasses = {
   content: "w-max max-w-none min-w-full",
   container: "w-full max-w-full"
 };
-const dataListRootVariants = index.cva(utils_cn.cn("grid content-start", ...borderlessTableStyles), {
-  variants: {
-    variant: {
-      striped: "[&_.data-list-row]:even:bg-surface-overlay-soft",
-      plain: ""
-    }
-  },
-  defaultVariants: {
-    variant: "plain"
-  }
-});
 function DataListRoot({
   children,
   columns,
   className,
-  variant = "plain",
   fit = "content",
-  stickyHeaderBackground = "tinted",
+  variant = "default",
   mask,
   scrollRef,
   ...props
 }) {
-  const stickyHeaderColors = stickyHeaderBackgroundValues[stickyHeaderBackground];
   const gridStyle = {
-    "--data-list-sticky-header-background": stickyHeaderColors.background,
-    "--data-list-sticky-header-hover-background": stickyHeaderColors.hoverBackground,
+    "--data-list-background": dataListVariantBackground[variant],
     gridTemplateColumns: columns
   };
   const grid = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: utils_cn.cn(dataListRootVariants({ variant }), dataListFitClasses[fit]),
+      className: utils_cn.cn("grid content-start", ...dataListGridStyles, dataListFitClasses[fit]),
       style: gridStyle,
       children
     }
@@ -321,8 +279,12 @@ function DataListRoot({
       orientation: "both",
       mask: getDataListMask(mask),
       viewportRef: scrollRef,
-      viewPortClassName: "max-h-[inherit]",
-      className: utils_cn.cn("size-full", className),
+      viewPortClassName: "min-h-0 flex-1 basis-auto",
+      className: utils_cn.cn(
+        "flex max-h-full w-full flex-col self-start rounded-xl px-1 pb-1",
+        dataListVariantClasses[variant],
+        className
+      ),
       children: grid
     }
   );
@@ -343,16 +305,10 @@ const DataListRowButton = React.forwardRef(
       {
         ref,
         type,
-        className: utils_cn.cn(
-          ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
-          "text-left",
-          // `!` so the selection fill wins over borderless table root styling
-          // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface-row-featured!",
-          dataListRowVariants({ variant }),
-          className
-        ),
+        className: utils_cn.cn(...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles, "text-left", className),
         style: resolvedStyle,
+        "data-featured": featured || void 0,
+        "data-variant": variant ?? "default",
         ...rest,
         children
       }
@@ -380,50 +336,32 @@ function DataListRowLink({
     Link,
     {
       href: to,
-      className: utils_cn.cn(
-        ...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles,
-        // `!` so the selection fill wins over borderless table root styling
-        // (higher-specificity descendant rules); same color in `default`.
-        featured && "bg-surface-row-featured!",
-        dataListRowVariants({ variant }),
-        className
-      ),
+      className: utils_cn.cn(...isWrapped ? dataListRowInteractiveStyles : dataListRowStyles, className),
       style: resolvedStyle,
+      "data-featured": featured || void 0,
+      "data-variant": variant ?? "default",
       ...rest,
       children
     }
   );
 }
 
-const DataListRowStatic = React.forwardRef(
-  ({ children, className, colStart, colEnd, featured, variant, style, ...rest }, ref) => {
-    const isWrapped = useDataListRowWrapperContext();
-    const hasColumnOverride = colStart !== void 0 || colEnd !== void 0;
-    const resolvedStyle = hasColumnOverride ? { ...style, gridColumn: `${colStart ?? 1} / ${colEnd ?? -1}` } : style;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+const DataListRowWrapper = React.forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(DataListRowWrapperContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: utils_cn.cn(
-          isWrapped ? "grid grid-cols-subgrid gap-8 rounded-lg px-5 transition-colors duration-200" : dataListRowStaticStyles,
-          // `!` so the selection fill wins over borderless table root styling
-          // (higher-specificity descendant rules); same color in `default`.
-          featured && "bg-surface-row-featured!",
-          dataListRowVariants({ variant }),
+          "grid grid-cols-subgrid gap-0",
+          ...dataListRowOuterStyles,
+          ...dataListRowStateStyles,
           className
         ),
-        style: resolvedStyle,
         ...rest,
         children
       }
-    );
-  }
-);
-DataListRowStatic.displayName = "DataListRowStatic";
-
-const DataListRowWrapper = React.forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(DataListRowWrapperContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils_cn.cn("grid grid-cols-subgrid gap-0", ...dataListRowOuterStyles, className), ...rest, children }) });
+    ) });
   }
 );
 DataListRowWrapper.displayName = "DataListRowWrapper";
@@ -433,29 +371,6 @@ function DataListSpacer({ height }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full", style: { height } });
 }
 
-const DataListSubheader = React.forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils_cn.cn(
-          "relative isolate col-span-full mt-2 border-none px-5 py-3 text-ui-md font-medium text-neutral4",
-          "before:absolute before:inset-0 before:-z-1 before:rounded-lg before:bg-[var(--data-list-sticky-header-background)]",
-          className
-        ),
-        ...rest,
-        children
-      }
-    );
-  }
-);
-DataListSubheader.displayName = "DataListSubheader";
-
-function DataListSubHeading({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("text-ui-sm font-normal text-neutral2", className), children });
-}
-
 function DataListTop({ children, className, hasLeadingCell, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -482,8 +397,8 @@ const DataListTopCell = React.forwardRef(
         className: utils_cn.cn(
           "flex h-10 max-w-full min-w-0 items-center overflow-hidden py-1 text-ui-sm font-medium whitespace-nowrap text-neutral2",
           sticky === "start" && dataListStickyStartStyles,
-          sticky === "start" && "-mr-4 -ml-5 w-auto max-w-none rounded-l-lg pr-4 pl-5",
-          sticky === "start" && "z-20 bg-[var(--data-list-sticky-header-background)]",
+          sticky === "start" && "-mr-4 -ml-5 w-auto max-w-none pr-4 pl-5",
+          sticky === "start" && "z-20",
           className
         ),
         ...rest,
@@ -528,86 +443,38 @@ function DataListTopSelectCell({ checked, onToggle, ...rest }) {
     DataListTopCell,
     {
       as: "label",
-      className: utils_cn.cn(
-        "w-8 cursor-pointer justify-center overflow-visible px-0 py-0!",
-        checked === false && dataListTopRevealStyles
-      ),
+      className: "w-8 cursor-pointer justify-center overflow-visible px-0 py-0!",
       onClick: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox, { checked, onCheckedChange: () => onToggle(), "aria-label": rest["aria-label"] })
     }
   );
 }
 
-const DataListTopCells = React.forwardRef(
-  ({ children, className, flushLeft, colStart, style, ...rest }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils_cn.cn(
-          "pointer-events-none grid grid-cols-subgrid gap-8 px-5 [&>*]:pointer-events-auto",
-          !colStart && "col-span-full",
-          flushLeft && "pl-0!",
-          className
-        ),
-        style: colStart ? { ...style, gridColumn: `${colStart} / -1` } : style,
-        ...rest,
-        children
-      }
-    );
-  }
-);
-DataListTopCells.displayName = "DataListTopCells";
-
-const DataList = Object.assign(DataListRoot, {
-  Top: DataListTop,
-  TopCells: DataListTopCells,
-  TopCell: DataListTopCell,
-  TopCellWithTooltip: DataListTopCellWithTooltip,
-  TopCellSmart: DataListTopCellSmart,
-  RowWrapper: DataListRowWrapper,
-  RowButton: DataListRowButton,
-  RowLink: DataListRowLink,
-  RowStatic: DataListRowStatic,
-  Cell: DataListCell,
-  ActionsCell: DataListActionsCell,
-  TextCell: DataListTextCell,
-  NameCell: DataListNameCell,
-  DescriptionCell: DataListDescriptionCell,
-  IdCell: DataListIdCell,
-  RowHeaderCell: DataListRowHeaderCell,
-  NumberCell: DataListNumberCell,
-  DateCell: DataListDateCell,
-  TimeCell: DataListTimeCell,
-  SelectCell: DataListSelectCell,
-  TopSelectCell: DataListTopSelectCell,
-  NoMatch: DataListNoMatch,
-  Subheader: DataListSubheader,
-  SubHeading: DataListSubHeading,
-  Spacer: DataListSpacer,
-  NextPageLoading: DataListNextPageLoading,
-  Pagination: DataListPagination
-});
-
-exports.DataList = DataList;
+exports.DataListActionsCell = DataListActionsCell;
 exports.DataListCell = DataListCell;
 exports.DataListCreatedCell = DataListCreatedCell;
 exports.DataListDateCell = DataListDateCell;
+exports.DataListDescriptionCell = DataListDescriptionCell;
 exports.DataListIdCell = DataListIdCell;
+exports.DataListNameCell = DataListNameCell;
 exports.DataListNextPageLoading = DataListNextPageLoading;
 exports.DataListNoMatch = DataListNoMatch;
+exports.DataListNumberCell = DataListNumberCell;
 exports.DataListRoot = DataListRoot;
 exports.DataListRowButton = DataListRowButton;
+exports.DataListRowHeaderCell = DataListRowHeaderCell;
 exports.DataListRowLink = DataListRowLink;
 exports.DataListRowWrapper = DataListRowWrapper;
+exports.DataListSelectCell = DataListSelectCell;
 exports.DataListSpacer = DataListSpacer;
-exports.DataListSubHeading = DataListSubHeading;
-exports.DataListSubheader = DataListSubheader;
 exports.DataListTextCell = DataListTextCell;
 exports.DataListTimeCell = DataListTimeCell;
 exports.DataListTop = DataListTop;
 exports.DataListTopCell = DataListTopCell;
 exports.DataListTopCellSmart = DataListTopCellSmart;
 exports.DataListTopCellWithTooltip = DataListTopCellWithTooltip;
+exports.DataListTopSelectCell = DataListTopSelectCell;
 exports.dataListRowOuterStyles = dataListRowOuterStyles;
-//# sourceMappingURL=data-list-CE6USbK0.cjs.map
+exports.dataListRowStaticStyles = dataListRowStaticStyles;
+exports.useDataListRowWrapperContext = useDataListRowWrapperContext;
+//# sourceMappingURL=data-list-top-cell-CIs1L8gy.cjs.map