diginet-core-ui 1.4.39 → 1.4.40

package/src/components/grid/Col.js

@@ -0,0 +1,89 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { makeStyles } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames } from 'utils';
+import Grid from '.';
+
+const Col = inProps => {
+    // props priority: `inProps` > `themeDefaultProps`
+    const props = useThemeProps({ props: inProps, name: 'Col' });
+    const { className, ...other } = props;
+
+    const useStyles = makeStyles({
+        customCol: {
+            '& .DGN-UI-Control': {
+                marginBottom: 0,
+            },
+            '& .DGN-UI-TextInput': {
+                marginBottom: 0,
+            },
+            '& .DGN-UI-Dropdown': {
+                marginBottom: 0,
+            },
+            '& .DGN-UI-FormGroup': {
+                marginBottom: 0,
+            },
+            '& .DGN-UI-Money-Input': {
+                marginBottom: 0,
+            },
+            '& .DGN-UI-NumberInput': {
+                marginBottom: 0,
+            },
+        },
+    });
+    const classes = useStyles();
+
+    return <Grid {...other} className={classNames(`DGN-UI-Col ${classes.customCol}`, className)} item />;
+};
+
+// Col.defaultProps = {
+//     className: '',
+//     columns: 12,
+//     lg: false,
+//     md: false,
+//     sm: false,
+//     style: {},
+//     verticalAlign: 'auto',
+//     wrap: 'wrap',
+//     xl: false,
+//     xs: true,
+//     zeroMinWidth: false,
+// };
+
+Col.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The number of columns. */
+    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+    /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+    direction: PropTypes.oneOfType([
+        PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+        PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+        PropTypes.object,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+    md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Self-align of the grid item. */
+    verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
+    /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+    zeroMinWidth: PropTypes.bool,
+};
+
+export default Col;

package/src/components/grid/Container.js

@@ -0,0 +1,99 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames } from 'utils';
+import Grid from '.';
+
+const checkChildren = children => {
+    if (!children) return false;
+    if (Array.isArray(children)) {
+        return !children.every(v => v === false);
+    }
+    return true;
+};
+
+const Container = inProps => {
+    // props priority: `inProps` > `themeDefaultProps`
+    const props = useThemeProps({ props: inProps, name: 'Container' });
+    const { className, children, ...other } = props;
+
+    return checkChildren(children) ? (
+        <Grid {...other} className={classNames('DGN-UI-Container', className)} container>
+            {{ children }}
+        </Grid>
+    ) : null;
+};
+
+// Container.defaultProps = {
+//     className: '',
+//     columns: 12,
+//     columnSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 6 },
+//     direction: 'row',
+//     lg: false,
+//     md: false,
+//     rowSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4 },
+//     sm: false,
+//     spacing: 0,
+//     style: {},
+//     topSpacing: { xs: 2, sm: 2, md: 2, lg: 2, xl: 2 },
+//     wrap: 'wrap',
+//     xl: false,
+//     xs: false,
+//     zeroMinWidth: false,
+// };
+
+Container.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The number of columns. */
+    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+    /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
+    columnSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+    direction: PropTypes.oneOfType([
+        PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+        PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+        PropTypes.object,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+    md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
+    rowSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the space between the type `Col` components */
+    spacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+    zeroMinWidth: PropTypes.bool,
+};
+
+export default Container;

package/src/components/grid/Row.js

@@ -0,0 +1,97 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames } from 'utils';
+import Grid from '.';
+
+const checkChildren = children => {
+    if (!children) return false;
+    if (Array.isArray(children)) {
+        return !children.every(v => v === false);
+    }
+    return true;
+};
+
+const Row = inProps => {
+    const props = useThemeProps({ props: inProps, name: 'Row' });
+    const { className, children, ...other } = props;
+
+    return checkChildren(children) ? (
+        <Grid {...other} className={classNames('DGN-UI-Row', className)} container>
+            {children}
+        </Grid>
+    ) : null;
+};
+
+// Row.defaultProps = {
+//     className: '',
+//     columns: 12,
+//     columnSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 6 },
+//     direction: 'row',
+//     lg: false,
+//     md: false,
+//     rowSpacing: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4 },
+//     sm: false,
+//     spacing: 0,
+//     style: {},
+//     wrap: 'wrap',
+//     xl: false,
+//     xs: false,
+//     zeroMinWidth: false,
+// };
+
+Row.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The number of columns. */
+    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+    /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
+    columnSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+    direction: PropTypes.oneOfType([
+        PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+        PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+        PropTypes.object,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+    md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
+    rowSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the space between the type `Col` components */
+    spacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+    zeroMinWidth: PropTypes.bool,
+};
+
+export default Row;

package/src/components/grid/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const GridContext = createContext();
+
+export default GridContext;

package/src/components/grid/index.js

@@ -0,0 +1,323 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { boxBorder } from 'styles/general';
+import { useTheme } from 'theme';
+import { breakpointKeys } from 'theme/createBreakpoints';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, handleBreakpoints } from 'utils';
+import GridContext from './context';
+
+const Grid = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { breakpoints: themeBreakpoints, spacing: themeSpacing } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Grid' });
+        const {
+            action = {},
+            children,
+            className,
+            columns: columnsProp,
+            columnSpacing: columnSpacingProp,
+            container,
+            direction,
+            id,
+            item,
+            leftSpacing: leftSpacingProp,
+            lg,
+            md,
+            rowSpacing: rowSpacingProp,
+            sm,
+            spacing,
+            style,
+            topSpacing: topSpacingProp,
+            verticalAlign,
+            wrap,
+            xl,
+            xs,
+            zeroMinWidth,
+            ...other
+        } = props;
+        const columnsContext = useContext(GridContext);
+
+        const rowSpacing = rowSpacingProp || spacing;
+        const columnSpacing = columnSpacingProp || spacing;
+        const columns = container ? columnsProp : columnsContext;
+        const topSpacing = topSpacingProp ?? rowSpacing;
+        const leftSpacing = leftSpacingProp ?? columnSpacing;
+
+        const ref = useRef(null);
+
+        const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap, verticalAlign);
+        const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing, themeSpacing);
+        const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns, themeBreakpoints);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return useMemo(() => {
+            return (
+                <div
+                    id={id}
+                    ref={ref}
+                    css={[_GridCSS, container && (rowSpacing || columnSpacing) && _GridSpacingCSS, _HandleGridCSS]}
+                    style={style}
+                    className={classNames(`DGN-UI-Grid${item ? '-item' : ''}`, className)}
+                    {...other}
+                >
+                    <GridContext.Provider value={columns}>{children}</GridContext.Provider>
+                </div>
+            );
+        }, [
+            columns,
+            columnSpacing,
+            leftSpacing,
+            rowSpacing,
+            topSpacing,
+            children,
+            className,
+            container,
+            direction,
+            id,
+            item,
+            lg,
+            md,
+            sm,
+            spacing,
+            style,
+            verticalAlign,
+            wrap,
+            xl,
+            xs,
+            zeroMinWidth,
+            other,
+            theme,
+        ]);
+    })
+);
+
+const getOffset = val => {
+    const parse = parseFloat(val);
+    return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
+};
+
+const processSizeArray = sizeArr => {
+    let lastValue = false;
+    sizeArr = sizeArr.map(item => {
+        if (item === false) return lastValue;
+        else lastValue = item;
+        return item;
+    });
+    return sizeArr;
+};
+
+const handleGrid = (size, value, columns, themeBreakpoints) => {
+    let css = '';
+    if (value === true) {
+        css = `
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+        `;
+    } else if (value === 'auto') {
+        css = `
+            flex-basis: auto;
+            flex-grow: 0;
+            flex-shrink: 0;
+            max-width: none;
+            width: auto;
+        `;
+    } else if (typeof value === 'number' && value !== 0) {
+        css = handleBreakpoints(columns, propValue => {
+            return `
+            flex-basis: ${Math.round((value / propValue) * 10e7) / 10e5}%;
+            flex-grow: 0;
+            max-width: ${Math.round((value / propValue) * 10e7) / 10e5}%;
+        `;
+        });
+    }
+    return `${themeBreakpoints.up(size)} {
+        ${css}
+    }`;
+};
+
+const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign) => css`
+    ${boxBorder};
+    ${container &&
+    `
+        display: flex;
+        flex-wrap: ${wrap};
+        width: 100%;
+    `};
+    ${item &&
+    `
+        margin: 0;
+        align-self: ${verticalAlign}
+    `};
+    ${zeroMinWidth && `min-width: 0;`}
+    ${handleBreakpoints(direction, propValue => {
+        return `flex-direction: ${propValue}`;
+    })};
+`;
+
+const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing, themeSpacing) => css`
+    ${topSpacing &&
+    handleBreakpoints(topSpacing, propValue => {
+        const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+        if (spacing !== '0px') {
+            return `
+            margin-top: -${getOffset(spacing)};
+            `;
+        }
+        return '';
+    })};
+    ${rowSpacing &&
+    handleBreakpoints(rowSpacing, propValue => {
+        const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+        if (spacing !== '0px') {
+            return `
+            & > .DGN-UI-Grid-item {
+                padding-top: ${getOffset(spacing)};
+            }
+            `;
+        }
+        return '';
+    })};
+    ${leftSpacing &&
+    handleBreakpoints(leftSpacing, propValue => {
+        const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+        if (spacing !== '0px') {
+            return `
+                margin-left: -${getOffset(spacing)};
+                `;
+        }
+        return '';
+    })};
+    ${columnSpacing &&
+    handleBreakpoints(columnSpacing, propValue => {
+        const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+        if (spacing !== '0px') {
+            return `
+                width: calc(100% + ${getOffset(spacing)});
+                & > .DGN-UI-Grid-item {
+                padding-left: ${getOffset(spacing)};
+            }
+            `;
+        }
+        return '';
+    })};
+`;
+
+const HandleGridCSS = (sizeArr, columns, themeBreakpoints) => css`
+    ${processSizeArray(sizeArr).map((item, idx) => {
+        return handleGrid(breakpointKeys[idx], item, columns, themeBreakpoints);
+    })}
+`;
+
+// Grid.defaultProps = {
+//     className: '',
+//     columns: 12,
+//     container: false,
+//     direction: 'row',
+//     item: false,
+//     lg: false,
+//     md: false,
+//     sm: false,
+//     spacing: 0,
+//     style: {},
+//     verticalAlign: 'auto',
+//     wrap: 'wrap',
+//     xl: false,
+//     xs: false,
+//     zeroMinWidth: false,
+// };
+
+Grid.propTypes = {
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The number of columns. */
+    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+    /** Defines the horizontal space between the type `item` components. It overrides the value of the `spacing` prop. */
+    columnSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** If true, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. */
+    container: PropTypes.bool,
+    /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+    direction: PropTypes.oneOfType([
+        PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+        PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+        PropTypes.object,
+    ]),
+    /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
+    item: PropTypes.bool,
+    /** Defines the horizontal space of `container` components. */
+    leftSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+    md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the vertical space between the type `item` components. It overrides the value of the `spacing` prop. */
+    rowSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
+    spacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Defines the vertical space of `container` components. */
+    topSpacing: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+        PropTypes.number,
+        PropTypes.object,
+        PropTypes.string,
+    ]),
+    /** Self-align of the grid item. */
+    verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
+    /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+    /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+    zeroMinWidth: PropTypes.bool,
+};
+
+export { Grid };
+export default OptionWrapper(Grid);