@workday/canvas-kit-react/dist/es6/layout/lib/Flex.js

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import styled from '@emotion/styled';
import { createComponent } from '@workday/canvas-kit-react/common';
import { Box } from './Box';
import { flex } from './utils/flex';
const StyledFlex = styled(Box)({
    display: 'flex',
}, flex);
/**
 * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
 * It is highly flexible, and can be used on its own or to build other components.
 * `Flex` is built on top of `Box` and has access to all `BoxProps`.
 *
 * @example
 * ```tsx
 * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
 *
 * interface CardProps extends FlexProps {
 *   // card-specific props
 * }
 *
 * // `Card`'s default values are set using `FlexProps`
 * const Card = (props: CardProps) => (
 *   <Flex flexDirection="column" alignItems="flex-start" depth={1} space="m" {...props}>
 *     <h1>Hello, Card!</h1>
 *     <p>This card uses flexbox to set its layout.</p>
 *   </Flex>
 * );
 * ```
 */
export const Flex = createComponent('div')({
    displayName: 'Flex',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return (React.createElement(StyledFlex, { as: Element, ref: ref, ...elemProps }, children));
    },
    subComponents: {
        Item: Box,
    },
});