@aurora-ds/components 0.17.15 → 0.17.16

package/dist/cjs/index.js

@@ -1900,7 +1900,7 @@ Card.displayName = 'Card';
  * - auto-fill: keeps empty column tracks, items don't stretch to fill container
  * - auto-fit: collapses empty tracks, items stretch to fill available space
  */
-const getGridTemplateColumns = (columns, minChildWidth) => {
+const getGridTemplateColumns = (columns, minChildWidth, columnGap) => {
     const minWidthValue = typeof minChildWidth === 'number' ? `${minChildWidth}px` : minChildWidth;
     if (minChildWidth && typeof columns === 'number') {
         // Responsive grid with max columns limit
@@ -1908,7 +1908,8 @@ const getGridTemplateColumns = (columns, minChildWidth) => {
         // The min value ensures items are at least minChildWidth
         // The max value is 1fr to distribute space evenly within the max columns constraint
         // The calc ensures we never exceed the specified number of columns
-        const minColumnWidth = `calc((100% - ${columns - 1} * var(--grid-gap, 0px)) / ${columns})`;
+        const gapValue = columnGap || '0px';
+        const minColumnWidth = `calc((100% - (${columns} - 1) * ${gapValue}) / ${columns})`;
         return `repeat(auto-fill, minmax(max(${minWidthValue}, ${minColumnWidth}), 1fr))`;
     }
     if (minChildWidth) {
@@ -1934,13 +1935,15 @@ const getGridTemplateRows = (rows) => {
  * Grid styles using createStyles from @aurora-ds/theme
  */
 const GRID_STYLES = theme.createStyles((theme) => ({
-    root: ({ columns, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+    root: ({ columns, rows, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+        const columnGapValue = columnGap ? theme.spacing[columnGap] : undefined;
+        const rowGapValue = rowGap ? theme.spacing[rowGap] : undefined;
         return {
             display: 'grid',
-            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
+            gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth, columnGapValue),
             gridTemplateRows: getGridTemplateRows(rows),
-            columnGap: theme.spacing[columnGap],
-            rowGap: theme.spacing[rowGap],
+            columnGap: columnGapValue,
+            rowGap: rowGapValue,
             width,
             height,
             minHeight,
@@ -1964,7 +1967,7 @@ const GRID_STYLES = theme.createStyles((theme) => ({
  * - Use `minChildWidth` for responsive auto-fill grids
  * - Combine `columns` + `minChildWidth` for responsive grid with max columns limit
  */
-const Grid = ({ children, columns = 1, rows, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 1, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,