fix(FlexGrid): BIG-378 Reports drawers columns css conflict.

src/components/FlexGrid/Flex.style.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { FlexProps } from './interfaces';
+
+export const FlexStyled = styled.div<FlexProps>`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: ${({ align }) => align || 'center'};
+
+  &:after {
+    content: '';
+    max-width: ${({ col, gap = 1 }) =>
+      col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+    width: 100%;
+  }
+`;

src/components/FlexGrid/Flex.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { FlexProps } from './interfaces';
+import { FlexItem } from './FlexItem';
+import { FlexStyled } from './Flex.style';
+
+export function Flex({
+  children,
+  col = 12,
+  gap,
+  align,
+  className,
+  style,
+}: FlexProps) {
+  return (
+    <FlexStyled
+      col={col}
+      gap={gap}
+      align={align}
+      className={className}
+      style={style}
+    >
+      {children}
+      <FlexItem col={col} gap={gap} />
+    </FlexStyled>
+  );
+}

src/components/FlexGrid/FlexItem.style.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { ItemProps } from './interfaces';
+
+export const FlexItem = styled.div<ItemProps>`
+  width: 100%;
+  max-width: ${({ col, gap = 1 }) =>
+    col && col < 12 ? `${(100 * col) / 12 - gap}%` : '100%'};
+  ${({ marginBottom }) =>
+    marginBottom &&
+    `
+		margin-bottom: ${marginBottom}px;
+	`}
+  ${({ stretch }) =>
+    stretch &&
+    `
+    display: flex;
+    align-self: stretch;
+  `}
+`;

src/components/FlexGrid/FlexItem.tsx

@@ -0,0 +1 @@
+export * from './FlexItem.style';

src/components/FlexGrid/index.ts

@@ -0,0 +1,4 @@
+export * from './Flex.style';
+export * from './Flex';
+export * from './FlexItem.style';
+export * from './interfaces';

src/components/FlexGrid/interfaces.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, Component, StyleHTMLAttributes } from 'react';
+
+export type Range = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ItemProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  col: Range;
+  marginBottom?: number;
+  stretch?: boolean;
+  as?: string | Component;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+}
+
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: number;
+  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+  col?: Range;
+  className?: string;
+  style?: StyleHTMLAttributes<HTMLDivElement>;
+  as?: string | Component;
+}

src/components/index.js

@@ -101,10 +101,11 @@ export * from './ExchangeRate';
 export * from './Branches';
 export * from './Warehouses';
 export * from './Currencies';
-export * from './FormTopbar'
+export * from './FormTopbar';
 export * from './Paper';
-export * from './Accounts'
+export * from './Accounts';
 export * from './DataTableCells';
+export * from './FlexGrid';
 
 const Hint = FieldHint;