@optiaxiom/react 0.13.7 → 0.13.8

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,207 +1,14 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { flexRender } from '@tanstack/react-table';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
-import { Pagination } from '../pagination/Pagination.js';
-import { Skeleton } from '../skeleton/Skeleton.js';
-import { Table } from '../table/Table.js';
-import { TableBody } from '../table-body/TableBody.js';
-import { TableCell } from '../table-cell/TableCell.js';
-import { TableHeader } from '../table-header/TableHeader.js';
-import { TableRow } from '../table-row/TableRow.js';
-import { table, header, cell, cellSizeVar, cellOffsetVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTable-css.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DataTableContextProvider } from '../data-table-context/DataTableContext.js';
+import { Flex } from '../flex/Flex.js';
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
 const DataTable = forwardRef(
-  ({ estimatedRowHeight = 52, loading, table: table$1, ...props }, ref) => {
-    const tableRef = useRef(null);
-    const { rows } = table$1.getRowModel();
-    const centerColumns = table$1.getCenterVisibleLeafColumns();
-    const columnVirtualizer = useVirtualizer({
-      count: centerColumns.length,
-      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
-      estimateSize: (index) => centerColumns[index].getSize(),
-      getScrollElement: () => tableRef.current,
-      horizontal: true
-    });
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
-    const rowVirtualizer = useVirtualizer({
-      count: rows.length,
-      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
-      estimateSize: () => estimatedRowHeight,
-      getScrollElement: () => tableRef.current
-    });
-    return /* @__PURE__ */ jsxs(
-      Box,
-      {
-        alignItems: "start",
-        display: "flex",
-        flexDirection: "column",
-        maxW: "full",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(
-            Table,
-            {
-              layout: "fixed",
-              ref: tableRef,
-              style: assignInlineVars({
-                [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
-                [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
-              }),
-              ...table({
-                pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
-              }),
-              children: [
-                /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-                  DataTableHeaderCell,
-                  {
-                    header,
-                    style: {
-                      ...assignInlineVars({
-                        [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                        [cellSizeVar]: `${header.getSize()}px`
-                      })
-                    },
-                    ...cell({
-                      pinned: header.column.getIsPinned() || void 0,
-                      pinnedType: header.column.getIsPinned() ? "header" : void 0
-                    }),
-                    children: header.isPlaceholder ? null : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  },
-                  header.id
-                )) }, headerGroup.id)) }),
-                /* @__PURE__ */ jsx(
-                  TableBody,
-                  {
-                    display: "grid",
-                    style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-                    children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
-                      row: fakeRow(table$1, rowIndex),
-                      virtualRow: void 0
-                    })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
-                      row: rows[virtualRow.index],
-                      virtualRow
-                    })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxs(
-                      TableRow,
-                      {
-                        "data-highlighted": row.getIsSelected() ? "" : void 0,
-                        "data-index": virtualRow?.index,
-                        display: "flex",
-                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                        style: virtualRow ? {
-                          minHeight: virtualRow.size,
-                          position: "absolute",
-                          transform: `translateY(${virtualRow.start}px)`
-                        } : void 0,
-                        children: [
-                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...assignInlineVars({
-                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell({
-                                pinned: "left",
-                                pinnedType: "body"
-                              }),
-                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          )),
-                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                            const cells = row.getCenterVisibleCells();
-                            return cells[virtualCell.index];
-                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...assignInlineVars({
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell(),
-                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          )),
-                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...assignInlineVars({
-                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell({
-                                pinned: "right",
-                                pinnedType: "body"
-                              }),
-                              children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          ))
-                        ]
-                      },
-                      row.id
-                    ))
-                  }
-                )
-              ]
-            }
-          ),
-          table$1.getPageCount() > 1 && /* @__PURE__ */ jsx(Box, { mt: "8", children: /* @__PURE__ */ jsx(
-            Pagination,
-            {
-              onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
-              page: table$1.getState().pagination.pageIndex + 1,
-              total: table$1.getPageCount()
-            }
-          ) })
-        ]
-      }
-    );
+  ({ children, table, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { alignItems: "start", gap: "8", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsx(DataTableContextProvider, { table, children }) });
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";
-const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
-  column,
-  getContext: () => ({}),
-  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
-}));
-const fakeCellWidth = (id) => id.split("-")[1];
-const fakeRow = (table, rowIndex) => ({
-  getCenterVisibleCells: fakeCellsFactory(
-    table.getCenterVisibleLeafColumns(),
-    rowIndex
-  ),
-  getIsSelected: () => false,
-  getLeftVisibleCells: fakeCellsFactory(
-    table.getLeftVisibleLeafColumns(),
-    rowIndex
-  ),
-  getRightVisibleCells: fakeCellsFactory(
-    table.getRightVisibleLeafColumns(),
-    rowIndex
-  ),
-  id: "loading" + rowIndex
-});
 
 export { DataTable };

package/dist/esm/packages/react/src/data-table-body/DataTableBody-css.js

@@ -0,0 +1,14 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BmmNePA-.css';
+import './../../../../assets/src/data-table-body/DataTableBody.css.ts.vanilla-uUstIJUJ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'ntq9ga'],variants:{pinned:{left:'zgsyjz',right:'_1sz1kwm'},pinnedType:{body:'sq2m94',header:{}}}});
+var cellOffsetVar = 'var(--jabh0m)';
+var cellSizeVar = 'var(--uzup92)';
+var header = recipeRuntime({base:[{display:'grid'},'eb11ai']});
+var leftTotalSizeVar = 'var(--au6a8r)';
+var rightTotalSizeVar = 'var(--ge1nff)';
+var table = recipeRuntime({base:'_21dycs',variants:{pinned:{both:'_113hicb',left:'_2tc7zg',none:{},right:'euk9u9'}}});
+
+export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/esm/packages/react/src/data-table-body/DataTableBody.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { forwardRef, useRef } from 'react';
+import { useDataTableContext } from '../data-table-context/DataTableContext.js';
+import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { Table } from '../table/Table.js';
+import { TableBody } from '../table-body/TableBody.js';
+import { TableCell } from '../table-cell/TableCell.js';
+import { TableHeader } from '../table-header/TableHeader.js';
+import { TableRow } from '../table-row/TableRow.js';
+import { table, header, cell, cellSizeVar, cellOffsetVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const DataTableBody = forwardRef(
+  ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    const { table: table$1 } = useDataTableContext("DataTableBody");
+    const { rows } = table$1.getRowModel();
+    const centerColumns = table$1.getCenterVisibleLeafColumns();
+    const columnVirtualizer = useVirtualizer({
+      count: centerColumns.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+      estimateSize: (index) => centerColumns[index].getSize(),
+      getScrollElement: () => innerRef.current,
+      horizontal: true
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+    const rowVirtualizer = useVirtualizer({
+      count: rows.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+      estimateSize: () => estimatedRowHeight,
+      getScrollElement: () => innerRef.current
+    });
+    return /* @__PURE__ */ jsxs(
+      Table,
+      {
+        layout: "fixed",
+        ref,
+        style: assignInlineVars({
+          [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+        }),
+        ...table(
+          {
+            pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+          },
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+            DataTableHeaderCell,
+            {
+              header,
+              style: {
+                ...assignInlineVars({
+                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                  [cellSizeVar]: `${header.getSize()}px`
+                })
+              },
+              ...cell({
+                pinned: header.column.getIsPinned() || void 0,
+                pinnedType: header.column.getIsPinned() ? "header" : void 0
+              }),
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          )) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx(
+            TableBody,
+            {
+              display: "grid",
+              style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+              children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
+                row: fakeRow(table$1, rowIndex),
+                virtualRow: void 0
+              })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
+                row: rows[virtualRow.index],
+                virtualRow
+              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxs(
+                TableRow,
+                {
+                  "data-highlighted": row.getIsSelected() ? "" : void 0,
+                  "data-index": virtualRow?.index,
+                  display: "flex",
+                  ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                  style: virtualRow ? {
+                    minHeight: virtualRow.size,
+                    position: "absolute",
+                    transform: `translateY(${virtualRow.start}px)`
+                  } : void 0,
+                  children: [
+                    row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        style: {
+                          ...assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell({
+                          pinned: "left",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                    (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                      const cells = row.getCenterVisibleCells();
+                      return cells[virtualCell.index];
+                    }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        style: {
+                          ...assignInlineVars({
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell(),
+                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        style: {
+                          ...assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell({
+                          pinned: "right",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsx(Skeleton, { w: fakeCellWidth(cell$1.id) }) : flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    ))
+                  ]
+                },
+                row.id
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
+const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
+  column,
+  getContext: () => ({}),
+  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+}));
+const fakeCellWidth = (id) => id.split("-")[1];
+const fakeRow = (table, rowIndex) => ({
+  getCenterVisibleCells: fakeCellsFactory(
+    table.getCenterVisibleLeafColumns(),
+    rowIndex
+  ),
+  getIsSelected: () => false,
+  getLeftVisibleCells: fakeCellsFactory(
+    table.getLeftVisibleLeafColumns(),
+    rowIndex
+  ),
+  getRightVisibleCells: fakeCellsFactory(
+    table.getRightVisibleLeafColumns(),
+    rowIndex
+  ),
+  id: "loading" + rowIndex
+});
+
+export { DataTableBody };

package/dist/esm/packages/react/src/data-table-context/DataTableContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [DataTableContextProvider, useDataTableContext] = createContext("DataTable");
+
+export { DataTableContextProvider, useDataTableContext };

package/dist/esm/packages/react/src/data-table-footer/DataTableFooter.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
+import { useDataTableContext } from '../data-table-context/DataTableContext.js';
+import { Flex } from '../flex/Flex.js';
+import { Pagination } from '../pagination/Pagination.js';
+import { Select } from '../select/Select.js';
+import { SelectContent } from '../select-content/SelectContent.js';
+import { SelectRadioItem } from '../select-radio-item/SelectRadioItem.js';
+import { SelectTrigger } from '../select-trigger/SelectTrigger.js';
+import { SelectValue } from '../select-value/SelectValue.js';
+import { Text } from '../text/Text.js';
+
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
+const DataTableFooter = forwardRef(
+  ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
+    const { table } = useDataTableContext("DataTableFooter");
+    const { pagination } = table.getState();
+    const pageSizeId = useId();
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        alignSelf: "stretch",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                items: pageSizeOptions,
+                onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                value: pagination.pageSize.toString(),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { appearance: "subtle", "aria-labelledby": pageSizeId, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((rows) => /* @__PURE__ */ jsx(SelectRadioItem, { item: rows, children: rows }, rows)) })
+                ]
+              }
+            )
+          ] }) }),
+          table.getPageCount() > 1 && /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+              page: pagination.pageIndex + 1,
+              total: table.getPageCount()
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { children: table.getRowCount() > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            pagination.pageIndex * pagination.pageSize + 1,
+            " -",
+            " ",
+            Math.min(
+              (pagination.pageIndex + 1) * pagination.pageSize,
+              table.getRowCount()
+            ),
+            " ",
+            "of ",
+            table.getRowCount()
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+DataTableFooter.displayName = "@optiaxiom/react/DataTableFooter";
+
+export { DataTableFooter };

package/dist/esm/packages/react/src/data-table-header-cell/DataTableHeaderCell-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BjOnpX9U.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-B4SwGoqq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1u1vg3x']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1cqfb0o'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_3qfsao'],variants:{active:{false:'lli230',true:'_1oyvjvj'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'ql5m7w']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1vmum53'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1qaw493'],variants:{active:{false:'lqoft',true:'jjz7si'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-bxzaBZC2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-D1MMMFvP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_1pzvmwa'});
+var picker = recipeRuntime({base:'_1rbnf1h'});
 
 export { picker };

package/dist/esm/packages/react/src/dialog-body/DialogBody-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-DwFVMKZt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-BgZpCG4V.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'start',overflow:'auto',px:'24',py:'16'},'_1fbcchz']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'start',overflow:'auto',px:'24',py:'16'},'itq5vd']});
 
 export { body };

package/dist/esm/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-C0BHGIaG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-C-g4SchC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1cbaf3m'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'gaa4vv'],variants:{size:{sm:'_13jarnd',md:'nn9mor',lg:'_1mqwa7b',fullscreen:'_1b251sf'}}});
-var nestedDialogCountVar = 'var(--_1jlbvuk)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'qbwsie'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_2hc3af'],variants:{size:{sm:'_1mta528',md:'_1hgixlt',lg:'_1u8xuk9',fullscreen:'_5ku80i'}}});
+var nestedDialogCountVar = 'var(--mlgsmt)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog-content/DialogContent.js

@@ -40,7 +40,7 @@ const DialogContent = forwardRef(
         Paper,
         {
           asChild: true,
-          elevation: size === "fullscreen" ? void 0 : "dialog",
+          elevation: size === "fullscreen" ? "screen" : "dialog",
           onBlur: onReactSelectInputBlur,
           style: {
             ...assignInlineVars({

package/dist/esm/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/esm/packages/react/src/dialog-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CS0Gn5ov.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CXAAvV-_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1ubg32c']});
-var close = recipeRuntime({base:['_19cf4nc']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_2m6y4k']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'iaq5l9']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1hnipzb']});
+var close = recipeRuntime({base:['_1fvso9c']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_18ki0ts']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_3rf6p']});
 
 export { actions, close, description, title };

package/dist/esm/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DkQqQuTv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-cCeSyIu6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['_1c1kxah']});
-var outer = recipeRuntime({base:[{display:'grid'},'_3rxim2']});
+var inner = recipeRuntime({base:['_1md47gq']});
+var outer = recipeRuntime({base:[{display:'grid'},'_1e7s8ba']});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CXBlDYb7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-U4k8Ssru.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1q75nph',start:'_37iq3t'}}});
-var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',p:'8',transition:'colors'},'_1mlw1kn']});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1ly6o0e']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1ruxuhc',start:'_45mp7k'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',p:'8',transition:'colors'},'_7qmdok']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_149fb8x']});
 
 export { icon, root, trigger };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-GdlluXgm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-5Bk3kmtQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'qg0ji5'});
+var mark = recipeRuntime({base:'_15man6o'});
 
 export { mark };