diff --git a/packages/ui/grid.ts b/packages/ui/grid.ts
index e8b526d..954aa22 100644
--- a/packages/ui/grid.ts
+++ b/packages/ui/grid.ts
@@ -8,19 +8,19 @@ type WithArrayType<T> = {
 
 type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;
 
-export type GridProps = Partial<WithArrayType<AllowedProps>> & { theme: Theme };
+export type GridProps = Partial<WithArrayType<AllowedProps>>;
 export const Grid = styled.div<GridProps>`
   display: grid;
-  ${({ theme, ...props }: GridProps) => getStyles(props, theme)}
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
 `;
 
 export type FlexProps = GridProps;
 export const Flex = styled.div<GridProps>`
   display: flex;
-  ${({ theme, ...props }: GridProps) => getStyles(props, theme)}
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
 `;
 
 export type BoxProps = GridProps;
 export const Box = styled.div<GridProps>`
-  ${({ theme, ...props }: GridProps) => getStyles(props, theme)}
+  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
 `;
diff --git a/packages/ui/utils.ts b/packages/ui/utils.ts
index 95c33ee..41d80f2 100644
--- a/packages/ui/utils.ts
+++ b/packages/ui/utils.ts
@@ -1,12 +1,14 @@
 import { dash, omit } from 'radash';
 
 export type Theme = { breakpoints: string[] };
+
 function min(breakpoint: string, style: string) {
   return `@media (min-width: ${breakpoint})
     {
       ${style}
     }`;
 }
+
 export function getStyles<T>(props: Record<string, T | T[]>, theme: Theme) {
   const cleanProps = omit(props, ['children', 'id', 'key', 'className']);