From eae2cefe7ad554405b67beb9733399fb45c7e9b0 Mon Sep 17 00:00:00 2001
From: Lloyd Francis <lloydaf@gmail.com>
Date: Mon, 30 May 2022 19:10:15 +0200
Subject: [PATCH] fix: adding layout to the compose styles

---
 src/components/Table/components/TableCell.tsx       | 4 ++--
 src/components/Table/components/TableHeaderCell.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Table/components/TableCell.tsx b/src/components/Table/components/TableCell.tsx
index a23915b1d..0f8141480 100644
--- a/src/components/Table/components/TableCell.tsx
+++ b/src/components/Table/components/TableCell.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, FC, useContext } from 'react';
 import styled from 'styled-components';
-import { compose, LayoutProps, textAlign, TextAlignProps } from 'styled-system';
+import { compose, LayoutProps, textAlign, TextAlignProps, layout } from 'styled-system';
 import { TableContext } from '../context/TableContext';
 import { TableProps } from './Table';
 
@@ -23,7 +23,7 @@ const TableCellElement = styled.td<TableCellProps>`
         padding-right: ${p => p.columnSpace};
     }
 
-    ${compose(textAlign)}
+    ${compose(textAlign, layout)}
 `;
 
 const TableCell: FC<TableCellProps> = (props: TableCellProps) => {
diff --git a/src/components/Table/components/TableHeaderCell.tsx b/src/components/Table/components/TableHeaderCell.tsx
index 2241fe995..d5652626f 100644
--- a/src/components/Table/components/TableHeaderCell.tsx
+++ b/src/components/Table/components/TableHeaderCell.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithoutRef, FC, useContext } from 'react';
 import styled from 'styled-components';
-import { compose, LayoutProps, textAlign, TextAlignProps } from 'styled-system';
+import { compose, LayoutProps, textAlign, TextAlignProps, layout } from 'styled-system';
 import { Colors } from '../../../essentials';
 import { theme } from '../../../essentials/theme';
 import { get } from '../../../utils/themeGet';
@@ -29,7 +29,7 @@ const TableHeaderCellElement = styled.th.attrs({ theme })<TableHeaderCellProps>`
         padding-right: ${p => p.columnSpace};
     }
 
-    ${compose(textAlign)}
+    ${compose(textAlign, layout)}
 `;
 
 const TableHeaderCell: FC<TableHeaderCellProps> = (props: TableHeaderCellProps) => {