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 (
-
+
{radioGraphType}
-
+
);
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 = {
[K in keyof T]: Array | T[K];
};
type AllowedProps = Omit;
-export type GridProps = Partial> & PropsWithChildren;
+export type GridProps = Partial>;
export const Grid = styled.div`
display: grid;
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
@@ -23,3 +19,8 @@ export const Flex = styled.div`
display: flex;
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;
+
+export type BoxProps = GridProps;
+export const Box = styled.div`
+ ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
+`;