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

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Flex = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_1 = __importDefault(require("@emotion/styled"));
const common_1 = require("@workday/canvas-kit-react/common");
const Box_1 = require("./Box");
const flex_1 = require("./utils/flex");
const StyledFlex = (0, styled_1.default)(Box_1.Box)({
    display: 'flex',
}, flex_1.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>
 * );
 * ```
 */
exports.Flex = (0, common_1.createComponent)('div')({
    displayName: 'Flex',
    Component: ({ children, ...elemProps }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(StyledFlex, { as: Element, ref: ref, ...elemProps, children: children }));
    },
    subComponents: {
        Item: Box_1.Box,
    },
});