@aurora-ds/components 0.17.14 → 0.17.15

package/dist/cjs/components/layout/grid/Grid.props.d.ts

@@ -7,8 +7,6 @@ export type GridProps = {
     columns?: number | string;
     /** Number of rows (number or CSS grid-template-rows value). */
     rows?: number | string;
-    /** Gap between items (theme spacing key) */
-    gap?: keyof Theme['spacing'];
     /** Gap between columns (theme spacing key) */
     columnGap?: keyof Theme['spacing'];
     /** Gap between rows (theme spacing key) */
@@ -45,7 +43,6 @@ export type GridProps = {
 export type GridStyleParams = {
     columns?: number | string;
     rows?: number | string;
-    gap?: keyof Theme['spacing'];
     columnGap?: keyof Theme['spacing'];
     rowGap?: keyof Theme['spacing'];
     width?: CSSProperties['width'];

package/dist/cjs/index.js

@@ -1934,16 +1934,13 @@ const getGridTemplateRows = (rows) => {
  * Grid styles using createStyles from @aurora-ds/theme
  */
 const GRID_STYLES = theme.createStyles((theme) => ({
-    root: ({ columns, rows, gap, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
-        const gapValue = gap ? theme.spacing[gap] : undefined;
-        const columnGapValue = columnGap ? theme.spacing[columnGap] : gapValue;
+    root: ({ columns, rows, columnGap = 'md', rowGap = 'md', width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
         return {
             display: 'grid',
             gridTemplateColumns: getGridTemplateColumns(columns, minChildWidth),
             gridTemplateRows: getGridTemplateRows(rows),
-            gap: gapValue,
-            columnGap: columnGap ? theme.spacing[columnGap] : undefined,
-            rowGap: rowGap ? theme.spacing[rowGap] : undefined,
+            columnGap: theme.spacing[columnGap],
+            rowGap: theme.spacing[rowGap],
             width,
             height,
             minHeight,
@@ -1951,8 +1948,7 @@ const GRID_STYLES = theme.createStyles((theme) => ({
             justifyItems,
             alignContent,
             justifyContent,
-            padding: padding ? theme.spacing[padding] : undefined,
-            '--grid-gap': columnGapValue || gapValue || '0px',
+            padding: padding ? theme.spacing[padding] : undefined
         };
     },
 }));
@@ -1968,11 +1964,10 @@ 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, gap = 'sm', columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Grid = ({ children, columns = 1, rows, columnGap, rowGap, width, height, minHeight, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsxRuntime.jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,
-            gap,
             columnGap,
             rowGap,
             width,
@@ -2485,7 +2480,7 @@ const TAB_ITEM_STYLES = theme.createStyles((theme) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: theme.spacing.md,
+        gap: theme.spacing.sm,
         backgroundColor: isActive ? theme.colors.background : 'transparent',
         color: isActive ? theme.colors.text : theme.colors.textSecondary,
         boxShadow: isActive ? theme.shadows.sm : undefined,