@optiaxiom/react 1.7.13 → 1.8.0

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-CuL8Nhn8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-y6szX9hK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'wtozru']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'zum6u8']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_12qrlno']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'szjpnl']});
 
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BRtfBAek.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DN6T6NfM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-FnNV3P-x.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1bb9u38'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1imwipg']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'rwqowt'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1lxac8g']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/clock/Clock.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Select } from '../select/Select.js';
 import { SelectContent } from '../select/SelectContent.js';
 import { SelectTrigger } from '../select/SelectTrigger.js';
@@ -29,7 +29,7 @@ const Clock = forwardRef(
       (minute) => minute.padStart(2, "0")
     );
     const periods = ["AM", "PM"];
-    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Group, { gap: "4", ref, ...props, children: [
       /* @__PURE__ */ jsxs(
         Select,
         {

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-TOc_I2h0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-B_SYV4kd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'a8xv8i']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_2a54hf']});
 
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/command/CommandItem.css.ts.vanilla-B6j8sj5c.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/command/CommandItem.css.ts.vanilla-DMwQexME.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var detail = recipeRuntime({base:[{color:'fg.secondary'},'lto7v3']});
+var detail = recipeRuntime({base:[{color:'fg.secondary'},'iwwxzu']});
 
 export { detail };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CmnHkNLK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-4DhuLKkI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_15gqmg3','nxlo92'],true:{}},inset:{false:'_1sxl4b3',true:'_4rpvlc'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['y3zkgn','_1xlzv8x'],true:{}},inset:{false:'sok3ky',true:'_80c5dh'}}});
 
 export { cover };

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

@@ -1,21 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { DataTableProvider } from './DataTableContext.js';
 
 const DataTable = forwardRef(
   ({ children, table, ...props }, ref) => {
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    return /* @__PURE__ */ jsx(Flex, { gap: "8", maxH: "full", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsx(
-      DataTableProvider,
+    return /* @__PURE__ */ jsx(
+      Group,
       {
-        highlightedIndex,
-        setHighlightedIndex,
-        table,
-        children
+        flexDirection: "column",
+        gap: "8",
+        maxH: "full",
+        maxW: "full",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          DataTableProvider,
+          {
+            highlightedIndex,
+            setHighlightedIndex,
+            table,
+            children
+          }
+        )
       }
-    ) });
+    );
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";

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

@@ -1,13 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-B0oL7CJL.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-XFsfUWCO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-T1dTDIP1.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-Cn2Vqqum.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1vll2xw'],variants:{pinned:{left:'lz10qw',right:'_1u02suo'},pinnedType:{body:'_7xoinc',header:{}}}});
-var cellOffsetVar = 'var(--_19ll4fd)';
-var cellSizeVar = 'var(--bd9v4x)';
-var leftTotalSizeVar = 'var(--_1ysrcnn)';
-var rightTotalSizeVar = 'var(--_1wvt30t)';
-var totalSizeVar = 'var(--_1x73i60)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_11aiv0d'],variants:{pinned:{left:'ggy138',right:'_126xjgr'},pinnedType:{body:'qtdxq2',header:{}},resizable:{false:{},true:'nqgfyy'}}});
+var cellOffsetVar = 'var(--_1hmdsuo)';
+var cellSizeVar = 'var(--_18e5sgw)';
+var leftTotalSizeVar = 'var(--_1i6sh7d)';
+var rightTotalSizeVar = 'var(--khqduo)';
+var root = recipeRuntime({base:[{display:'flex',flexDirection:'column',maxW:'full',overflow:'hidden',rounded:'lg'},'_1hrb0ro']});
+var totalSizeVar = 'var(--rsk4aa)';
 
-export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };
+export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };

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

@@ -1,10 +1,13 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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, useMemo, useEffect } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Table } from '../table/Table.js';
 import '../table/TableAction.js';
 import { TableBody } from '../table/TableBody.js';
@@ -12,7 +15,7 @@ import { TableCell } from '../table/TableCell.js';
 import { TableHeader } from '../table/TableHeader.js';
 import '../table/TableHeaderCell.js';
 import { TableRow } from '../table/TableRow.js';
-import { cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
+import { root, cell, cellSizeVar, cellOffsetVar, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 import { useDataTableContext } from './DataTableContext.js';
 import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 import { DataTableRow } from './DataTableRow.js';
@@ -21,7 +24,7 @@ import { fakeRow } from './DataTableRowContext.js';
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
 const DataTableBody = forwardRef(
-  ({ estimatedRowHeight = 52, loading, ...props }, outerRef) => {
+  ({ className, estimatedRowHeight = 52, loading, style, ...props }, outerRef) => {
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     const { table } = useDataTableContext("@optiaxiom/react/DataTableBody");
@@ -41,13 +44,26 @@ const DataTableBody = forwardRef(
     useEffect(() => {
       previousRowsRef.current = rows;
     });
+    const scrollContainerRef = useRef(null);
+    const calculateScrollTimeline = () => {
+      if (!innerRef.current || !scrollContainerRef.current) {
+        return;
+      }
+      const { offsetWidth, scrollLeft, scrollWidth } = scrollContainerRef.current;
+      if (scrollWidth > offsetWidth) {
+        innerRef.current.dataset.scrollTimeline = scrollLeft === 0 ? "left" : scrollLeft >= scrollWidth - offsetWidth ? "right" : "middle";
+      } else {
+        delete innerRef.current.dataset.scrollTimeline;
+      }
+    };
+    useEffect(calculateScrollTimeline, []);
     const centerColumns = table.getCenterVisibleLeafColumns();
     const columnVirtualizer = useVirtualizer({
       count: centerColumns.length,
       enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
       estimateSize: (index) => centerColumns[index].getSize(),
       getItemKey: (index) => centerColumns[index].id,
-      getScrollElement: () => innerRef.current,
+      getScrollElement: () => scrollContainerRef.current,
       horizontal: true
     });
     const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -57,138 +73,156 @@ const DataTableBody = forwardRef(
       enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
       estimateSize: () => estimatedRowHeight,
       getItemKey: (index) => rows[index].id,
-      getScrollElement: () => innerRef.current
+      getScrollElement: () => scrollContainerRef.current
     });
     const virtualRows = rowVirtualizer.getVirtualItems();
-    return /* @__PURE__ */ jsxs(
-      Table,
+    return /* @__PURE__ */ jsx(
+      Box,
       {
-        layout: "fixed",
         ref,
-        style: assignInlineVars({
-          [leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
-          [rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
-          [totalSizeVar]: `${table.getTotalSize()}`
-        }),
+        style: {
+          ...assignInlineVars({
+            [leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
+            [rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
+            [totalSizeVar]: (table.getHeaderGroups()[0]?.headers.reduce(
+              (sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0),
+              0
+            ) ?? 0).toString()
+          }),
+          ...style
+        },
+        ...root({}, className),
         ...props,
-        children: [
-          /* @__PURE__ */ jsx(TableHeader, { display: "grid", pinned: true, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-            DataTableHeaderCell,
-            {
-              header,
-              pinned: !!header.column.getIsPinned(),
-              style: {
-                ...assignInlineVars({
-                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                  [cellSizeVar]: `${header.getSize()}`
-                })
-              },
-              ...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 === true ? Array.from({ length: 10 }, (_, rowIndex) => ({
-                row: fakeRow(table, rowIndex),
-                virtualRow: void 0
-              })) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? (
-                /**
-                 * If virtualization was just enabled in this render then
-                 * virtualRows will be empty so we render the rows from the
-                 * previous render instead temporarily.
-                 */
-                previousRowsRef.current.map((row) => ({
-                  row,
-                  virtualRow: void 0
-                }))
-              ) : virtualRows.map((virtualRow) => ({
-                row: rows[virtualRow.index],
-                virtualRow
-              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
-                DataTableRow,
+        children: /* @__PURE__ */ jsxs(
+          Table,
+          {
+            layout: "fixed",
+            onScroll: calculateScrollTimeline,
+            ref: scrollContainerRef,
+            children: [
+              /* @__PURE__ */ jsx(TableHeader, { display: "grid", pinned: true, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+                DataTableHeaderCell,
                 {
-                  "data-index": virtualRow?.index,
-                  display: "flex",
-                  index: virtualRow?.index ?? index,
-                  ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                  row,
-                  style: virtualRow ? {
-                    minHeight: virtualRow.size,
-                    position: "absolute",
-                    transform: `translateY(${virtualRow.start}px)`
-                  } : void 0,
-                  children: [
-                    row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        pinned: true,
-                        style: {
-                          ...assignInlineVars({
-                            [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}`
-                          })
-                        },
-                        ...cell({
-                          pinned: "left",
-                          pinnedType: "body"
-                        }),
-                        children: 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()}`
-                          })
-                        },
-                        ...cell(),
-                        children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                      },
-                      cell$1.id
-                    )),
-                    row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                      TableCell,
-                      {
-                        pinned: true,
-                        style: {
-                          ...assignInlineVars({
-                            [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}`
-                          })
-                        },
-                        ...cell({
-                          pinned: "right",
-                          pinnedType: "body"
-                        }),
-                        children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                      },
-                      cell$1.id
-                    ))
-                  ]
+                  header,
+                  pinned: !!header.column.getIsPinned(),
+                  style: {
+                    ...assignInlineVars({
+                      [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                      [cellSizeVar]: `${header.getSize()}`
+                    })
+                  },
+                  ...cell({
+                    pinned: header.column.getIsPinned() || void 0,
+                    pinnedType: header.column.getIsPinned() ? "header" : void 0,
+                    resizable: header.column.getCanResize()
+                  }),
+                  children: header.isPlaceholder ? null : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )
                 },
-                row.id
-              ))
-            }
-          )
-        ]
+                header.id
+              )) }, headerGroup.id)) }),
+              /* @__PURE__ */ jsx(
+                TableBody,
+                {
+                  display: "grid",
+                  style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+                  children: (loading === true ? Array.from({ length: 10 }, (_, rowIndex) => ({
+                    row: fakeRow(table, rowIndex),
+                    virtualRow: void 0
+                  })) : rowVirtualizer.options.enabled ? virtualRows.length === 0 && rows.length > 0 ? (
+                    /**
+                     * If virtualization was just enabled in this render then
+                     * virtualRows will be empty so we render the rows from the
+                     * previous render instead temporarily.
+                     */
+                    previousRowsRef.current.map((row) => ({
+                      row,
+                      virtualRow: void 0
+                    }))
+                  ) : virtualRows.map((virtualRow) => ({
+                    row: rows[virtualRow.index],
+                    virtualRow
+                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
+                    DataTableRow,
+                    {
+                      "data-index": virtualRow?.index,
+                      display: "flex",
+                      index: virtualRow?.index ?? index,
+                      ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                      row,
+                      style: virtualRow ? {
+                        position: "absolute",
+                        transform: `translateY(${virtualRow.start}px)`
+                      } : void 0,
+                      children: [
+                        row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            pinned: true,
+                            style: {
+                              ...assignInlineVars({
+                                [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                [cellSizeVar]: `${cell$1.column.getSize()}`
+                              })
+                            },
+                            ...cell({
+                              pinned: "left",
+                              pinnedType: "body",
+                              resizable: cell$1.column.getCanResize()
+                            }),
+                            children: 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()}`
+                              })
+                            },
+                            ...cell({
+                              resizable: cell$1.column.getCanResize()
+                            }),
+                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                          },
+                          cell$1.id
+                        )),
+                        row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            pinned: true,
+                            style: {
+                              ...assignInlineVars({
+                                [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                [cellSizeVar]: `${cell$1.column.getSize()}`
+                              })
+                            },
+                            ...cell({
+                              pinned: "right",
+                              pinnedType: "body",
+                              resizable: cell$1.column.getCanResize()
+                            }),
+                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                          },
+                          cell$1.id
+                        ))
+                      ]
+                    },
+                    row.id
+                  ))
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }

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

@@ -7,7 +7,7 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { useDataTableRowContext } from './DataTableRowContext.js';
@@ -21,7 +21,7 @@ function DataTableExpandableCell({
   const { labelId } = useDataTableRowContext(
     "@optiaxiom/react/DataTableExpandableCell"
   );
-  return /* @__PURE__ */ jsxs(Flex, { alignItems: "start", flexDirection: "row", gap: "8", children: [
+  return /* @__PURE__ */ jsxs(Group, { alignItems: "start", gap: "8", children: [
     Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ jsx(Box, { flex: "none", w: "sm" }, index)),
     row.getCanExpand() ? /* @__PURE__ */ jsx(
       Button,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-Ckzxm9dq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-DkFVHHB9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'jvi781',variants:{slot:{after:{textAlign:'end'},before:{}}}});
+var addon = recipeRuntime({base:'_1mk6z2c',variants:{slot:{after:{textAlign:'end'},before:{}}}});
 
 export { addon };

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

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Select } from '../select/Select.js';
 import { SelectContent } from '../select/SelectContent.js';
@@ -24,17 +24,17 @@ const DataTableFooter = forwardRef(
     const { pagination } = table.getState();
     const pageSizeId = useId();
     return /* @__PURE__ */ jsxs(
-      Flex,
+      Group,
       {
         alignSelf: "stretch",
-        flexDirection: "row",
         fontSize: "md",
+        gap: "16",
         justifyContent: "space-between",
         mt: "auto",
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Box, { ...addon({ slot: "before" }), children: showPageSizeOptions && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+          /* @__PURE__ */ jsx(Box, { ...addon({ slot: "before" }), children: showPageSizeOptions && /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
             /* @__PURE__ */ jsx(Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
             /* @__PURE__ */ jsxs(
               Select,

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-fQYI72Ka.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BYHRDTl4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'wsqsce']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'tszb1e'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'zu4bin'],variants:{active:{false:'c47d5f',true:'_1s1iw4u'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1nv73v9']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'tb766k'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1sv9gaw'],variants:{active:{false:'_13ruvmm',true:'_16d4540'}}});
 
 export { button, handle, icon };

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Njg55wY5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Dr-Csikw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1u7esd']});
-var date = recipeRuntime({base:'_1xwbyr6'});
-var input = recipeRuntime({base:'_1fl862b'});
-var picker = recipeRuntime({base:'_1ty4c5n'});
+var clear = recipeRuntime({base:[{size:'sm'},'k33v16']});
+var date = recipeRuntime({base:'_1cr261m'});
+var input = recipeRuntime({base:'_12ttscv'});
+var picker = recipeRuntime({base:'_1423zrz'});
 
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
+var panels = recipeRuntime({base:[{alignItems:'stretch',gap:'0'}]});
 
 export { panels };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Calendar } from '../calendar/Calendar.js';
 import { useFieldContext } from '../field/FieldContext.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import '../popover/Popover.js';
 import '../popover/PopoverAnchor.js';
 import { PopoverContent } from '../popover/PopoverContent.js';
@@ -42,7 +42,7 @@ const DateRangePickerContent = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: ariaLabel || "Calendar" }),
-          /* @__PURE__ */ jsxs(Flex, { ...panels(), children: [
+          /* @__PURE__ */ jsxs(Group, { ...panels(), children: [
             addonBefore,
             /* @__PURE__ */ jsx(
               Calendar,