import * as React from 'react' ; import styled from '@emotion/styled' ; import { createComponent , StyledType } from '@workday/canvas-kit-react/common' ; import { Box , BoxProps } from '@workday/canvas-kit-labs-react/common' ; import { flex , FlexStyleProps } from './utils/flex' ; export type FlexProps = BoxProps & FlexStyleProps ; const StyledFlex = styled ( Box ) < StyledType & FlexProps > ( { display : 'flex' , } , flex ) ; example export const Flex = createComponent ( 'div' ) ( { displayName : 'Flex' , Component : ( { children , ... elemProps } , ref , Element ) => { return ( < StyledFlex as = { Element } ref = { ref } { ... elemProps } > { children } < /StyledFlex>); } , } ) ;