From ef04e8f341d307fd73a5cf6eadf247ccc3d8abc7 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 1 Dec 2023 14:41:56 +0300
Subject: [PATCH] packages/ui: add Box

---
 .../Components/Calculation/Form/Payments/index.jsx   | 12 +++---------
 packages/ui/grid.ts                                  | 11 ++++++-----
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/web/Components/Calculation/Form/Payments/index.jsx b/apps/web/Components/Calculation/Form/Payments/index.jsx
index b2c00d6..7c6e931 100644
--- a/apps/web/Components/Calculation/Form/Payments/index.jsx
+++ b/apps/web/Components/Calculation/Form/Payments/index.jsx
@@ -2,23 +2,17 @@ import elementsRender from '../../config/elements-render';
 import { id, title } from './config';
 import PaymentsParams from './PaymentsParams';
 import PaymentsTable from './PaymentsTable';
-import { Box, Flex } from 'ui/grid';
+import { Flex, Grid } from 'ui/grid';
 
 function Payments() {
   const radioGraphType = elementsRender.radioGraphType.render();
 
   return (
     <Flex flexDirection="column">
-      <Box
-        sx={{
-          display: 'grid',
-          gap: '10px',
-          gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
-        }}
-      >
+      <Grid gap="10px" gridTemplateColumns={['1fr', '1fr', '1fr 1fr']}>
         {radioGraphType}
         <PaymentsParams />
-      </Box>
+      </Grid>
       <PaymentsTable />
     </Flex>
   );
diff --git a/packages/ui/grid.ts b/packages/ui/grid.ts
index 7fdaf68..954aa22 100644
--- a/packages/ui/grid.ts
+++ b/packages/ui/grid.ts
@@ -1,18 +1,14 @@
 import type { Theme } from './utils';
 import { getStyles } from './utils';
-import type { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-export type { BoxProps } from 'rebass/styled-components';
-export { Box } from 'rebass/styled-components';
-
 type WithArrayType<T> = {
   [K in keyof T]: Array<T[K]> | T[K];
 };
 
 type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;
 
-export type GridProps = Partial<WithArrayType<AllowedProps>> & PropsWithChildren;
+export type GridProps = Partial<WithArrayType<AllowedProps>>;
 export const Grid = styled.div<GridProps>`
   display: grid;
   ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
@@ -23,3 +19,8 @@ export const Flex = styled.div<GridProps>`
   display: flex;
   ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
 `;
+
+export type BoxProps = GridProps;
+export const Box = styled.div<GridProps>`
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
+`;