@optiaxiom/react 1.7.13 → 1.8.1

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-BqIfkBSM.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-BnIfDF23.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'jvi781',variants:{slot:{after:{textAlign:'end'},before:{}}}});
+var addon = recipeRuntime({base:'_1gzhtjn',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-BqIfkBSM.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-Cszsl-d8.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'},'o03mvb']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1bq80qm'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1wzgstk'],variants:{active:{false:'_19nslt4',true:'_1g55knz'}}});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-Dwlu-gGo.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'},'_177ui45']});
+var date = recipeRuntime({base:'w3kj6p'});
+var input = recipeRuntime({base:'_4urawi'});
+var picker = recipeRuntime({base:'msnp3i'});
 
 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-BqIfkBSM.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,

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-ChJgPlrQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-D7Vo8OLW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'luc1fn']});
+var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'pfky6s']});
 
 export { root };

package/dist/esm/packages/react/src/details-panel/DetailsPanelBody.js

@@ -1,10 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 
 const DetailsPanelBody = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { flex: "1", fontSize: "md", px: "16", ref, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      flex: "1",
+      flexDirection: "column",
+      fontSize: "md",
+      gap: "16",
+      px: "16",
+      ref,
+      ...props,
+      children
+    }
+  );
 });
 DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
 

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-H98Xh3Lv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BaBSfzS0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'cc252s']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'_1bkg23p']});
 
 export { footer };

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter.js

@@ -2,11 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { ButtonProvider } from '../button/ButtonContext.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { footer } from './DetailsPanelFooter-css.js';
 
 const DetailsPanelFooter = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Flex, { ref, ...footer({}, className), ...props, children }) });
+  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Group, { ref, ...footer({}, className), ...props, children }) });
 });
 DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
 

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-CZLojlL4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BpsCuq_K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_16669pq']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'n5io5v']});
 
 export { header };

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader.js

@@ -5,7 +5,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { ButtonProvider } from '../button/ButtonContext.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
@@ -20,7 +20,7 @@ const DetailsPanelHeader = forwardRef(
       "@optiaxiom/react/DetailsPanelHeader"
     );
     return /* @__PURE__ */ jsx(ButtonProvider, { size: "sm", children: /* @__PURE__ */ jsxs(Box, { ref, ...header({}, className), ...props, children: [
-      addonBefore && /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children: addonBefore }),
+      addonBefore && /* @__PURE__ */ jsx(Group, { gap: "8", children: addonBefore }),
       /* @__PURE__ */ jsx(
         Heading,
         {
@@ -32,7 +32,7 @@ const DetailsPanelHeader = forwardRef(
           children
         }
       ),
-      addonAfter && /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children: addonAfter }),
+      addonAfter && /* @__PURE__ */ jsx(Group, { gap: "8", children: addonAfter }),
       description && /* @__PURE__ */ jsx(
         Text,
         {

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1rby5gl']});
+var body = recipeRuntime({base:[{flex:'1',flexDirection:'column',fontSize:'md',gap:'16',px:'24',py:'16',z:'0'},'e4vhny']});
 
 export { body };

package/dist/esm/packages/react/src/dialog/DialogBody.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { body } from './DialogBody-css.js';
 
 const DialogBody = forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { ref, ...body({}, className), ...props, children });
+    return /* @__PURE__ */ jsx(Group, { ref, ...body({}, className), ...props, children });
   }
 );
 DialogBody.displayName = "@optiaxiom/react/DialogBody";

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-DvxCM94i.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-B13kLuUc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'hu5f50'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1wrxqaa'],variants:{size:{sm:'_1cjxif3',md:'zd1i8q',lg:'_7bouoq',fullscreen:'xq6yvn'}}});
-var nestedDialogCountVar = 'var(--_16my7q2)';
-var scrollPaddingBottomVar = 'var(--vqukdw)';
-var scrollPaddingTopVar = 'var(--fxvdbt)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'ac4ezc'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'p0v015'],variants:{size:{sm:'_14jcsls',md:'_8l0cds',lg:'pdgc7r',fullscreen:'foj1ih'}}});
+var nestedDialogCountVar = 'var(--_1rej5it)';
+var scrollPaddingBottomVar = 'var(--_15m8oxl)';
+var scrollPaddingTopVar = 'var(--ey6w0n)';
 
 export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-CJ015n_y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogFooter.css.ts.vanilla-CbQN7HmK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_12sosvo']});
+var footer = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderT:'1',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'j7coga']});
 
 export { footer };