diginet-core-ui 1.4.39 → 1.4.40

package/components/form-control/toggle/index.js

@@ -1,222 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Typography } from "../..";
-import PropTypes from 'prop-types';
-import { Fragment, forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { borderRadius, cursorNoDrop, cursorPointer, displayBlock, flexRow, itemsCenter, parseMinHeight, parseMinWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../../utils";
-const Toggle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Toggle'
-  });
-  const {
-    checked,
-    disabled,
-    height,
-    hoverTooltip,
-    id,
-    inputProps,
-    inputRef: inputRefProp,
-    label,
-    lineClamp,
-    name,
-    readOnly,
-    required,
-    width,
-    defaultChecked,
-    onChange,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const inputRef = inputRefProp || useRef(null);
-  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-  const isEnable = !readOnly && !disabled;
-  const _FormCheckCSS = FormCheckCSS(height, theme);
-  const _ToggleCSS = ToggleCSS(theme);
-  const _SliderCSS = SliderCSS(checkedState, disabled, isEnable, width, height, theme);
-  const handleChange = () => {
-    if (!isEnable) return;
-    setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
-    const e = {
-      value: !checkedState,
-      target: {
-        ...inputRef.current,
-        checked: !checkedState
-      }
-    };
-    if (onChange) onChange(e);
-  };
-  useEffect(() => {
-    if (checked !== undefined) setCheckedState(Boolean(checked));
-  }, [checked]);
-  return jsx("div", {
-    css: _FormCheckCSS,
-    ref: ref,
-    id: 'DGN-Core-Toggle' + (id ? `-${id}` : ''),
-    ...other
-  }, jsx("input", {
-    ...inputProps,
-    ref: inputRef,
-    hidden: true,
-    name: name,
-    type: "checkbox",
-    disabled: disabled,
-    readOnly: readOnly,
-    checked: checkedState,
-    onChange: handleChange
-  }), jsx("label", {
-    css: _ToggleCSS,
-    onClick: handleChange
-  }, jsx("span", {
-    css: _SliderCSS,
-    className: classNames(disabled && 'disabled', readOnly && 'readOnly')
-  }), label !== undefined && jsx(Typography, {
-    type: 'p1',
-    color: disabled ? 'system/disabled' : 'text/main',
-    hoverTooltip: hoverTooltip,
-    lineClamp: lineClamp || null,
-    mapping: 'label'
-  }, jsx(Fragment, null, label, required && jsx(Typography, {
-    color: 'danger',
-    fullWidth: false
-  }, "*")))));
-}));
-const FormCheckCSS = (height, {
-  spacing
-}) => css`
-    ${positionRelative};
-    ${parseMinHeight(height)};
-    padding: ${spacing([0.5])};
-`;
-const ToggleCSS = ({
-  spacing
-}) => css`
-    ${flexRow};
-    ${itemsCenter};
-    ${positionRelative};
-    ${cursorPointer};
-    gap: ${spacing([1.5])};
-`;
-const CheckedSliderCSS = (isEnable, disabled, width, height, colors) => css`
-    background: ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
-    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
-    &::after {
-        left: ${width - height}px;
-        background: ${getProp(colors, 'system/standard')};
-    }
-    ${isEnable && css`
-        &:hover {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
-        }
-        &:focus {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
-        }
-        &:active {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
-        }
-    `}
-`;
-const NotCheckedSliderCSS = (isEnable, disabled, colors) => css`
-    background: ${getProp(colors, 'system/standard')};
-    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
-    &::after {
-        left: 2px;
-        background: ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
-    }
-    ${isEnable && css`
-        &:hover {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
-            outline-color: ${getProp(colors, 'system/active')};
-            background-color: ${getProp(colors, 'fill/hover')};
-        }
-        &:focus {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
-            background-color: ${getProp(colors, 'fill/focus')};
-        }
-        &:active {
-            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
-            background-color: ${getProp(colors, 'fill/pressed')};
-        }
-        &:hover:after {
-            background-color: ${getProp(colors, 'system/active')};
-        }
-    `}
-`;
-const SliderCSS = (checkedState, disabled, isEnable, width, height, {
-  colors,
-  spacing
-}) => css`
-    ${positionRelative};
-    ${displayBlock};
-    ${parseWidthHeight(width, height)};
-    ${parseMinWidth(width)};
-    ${borderRadius(height)};
-    ${!isEnable && cursorNoDrop}
-    &::after {
-        ${positionAbsolute};
-        ${parseWidthHeight(height - spacing(1), height - spacing(1))};
-        content: '';
-        top: 2px;
-        border-radius: 100%;
-        transition: 0.3s ease-in-out;
-        margin: 0px auto;
-    }
-    ${checkedState ? CheckedSliderCSS(isEnable, disabled, width, height, colors) : NotCheckedSliderCSS(isEnable, disabled, colors)};
-`;
-
-// Toggle.defaultProps = {
-//     disabled: false,
-//     readOnly: false,
-//     defaultChecked: false,
-//     label: '',
-//     value: '',
-//     id: '',
-//     width: 40,
-//     height: 20,
-//     lineClamp: null,
-//     required: false,
-// };
-
-Toggle.propTypes = {
-  /** * If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** prevent all event if true */
-  readOnly: PropTypes.bool,
-  /** If `true`, the component is defaultChecked. */
-  defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
-  /** If `true`, the component is checked. */
-  checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
-  /** Id is randomized randomly to avoid duplication. */
-  id: PropTypes.string,
-  /** Name attribute of the `input` element. */
-  name: PropTypes.string,
-  /** The name of the Radio is displayed on the interface */
-  label: PropTypes.string,
-  /** height is a number, height of Toggle default 20 */
-  height: PropTypes.number,
-  /** width is a number, width of Toggle default 40 */
-  width: PropTypes.number,
-  /** props for input */
-  inputProps: PropTypes.object,
-  /** The line-clamp property truncates text at a specific number of Label. */
-  lineClamp: PropTypes.number,
-  /** Shows tooltip containing Label on hover */
-  hoverTooltip: PropTypes.bool,
-  /** * Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
-   */
-  onChange: PropTypes.func,
-  /** If `true`, the label will indicate that the checkbox is required. */
-  required: PropTypes.bool
-};
-export default Toggle;

package/components/form-view/helper-text.js

@@ -1,33 +0,0 @@
-/* eslint-disable react/display-name */
-import { Typography } from "./..";
-import PropTypes from 'prop-types';
-import React, { memo } from 'react';
-const HelperText = /*#__PURE__*/memo(({
-  text,
-  style,
-  ...props
-}) => {
-  const helperText = {
-    display: 'block',
-    marginTop: 5,
-    marginBottom: 5
-  };
-  return /*#__PURE__*/React.createElement(Typography, {
-    type: 'p3',
-    style: {
-      ...helperText,
-      ...style
-    },
-    ...props
-  }, text);
-});
-HelperText.defaultProps = {
-  text: ''
-};
-HelperText.propTypes = {
-  /** helper text for input */
-  text: PropTypes.string,
-  /** style inline of helper text in HelperText component */
-  style: PropTypes.object
-};
-export default HelperText;

package/components/form-view/index.js

@@ -1,95 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { borderColor, fill, pointerEventsNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { getProp } from "../../utils";
-import HelperText from "../form-view/helper-text";
-import Input from "../form-view/input";
-import Label from "../form-view/label";
-const FormLabel = ({
-  dataType,
-  format,
-  helperTextProps,
-  inputProps,
-  inputStyleProps,
-  label,
-  text,
-  thousandChar,
-  thousandSeparator,
-  utc,
-  value,
-  viewType
-}) => {
-  const theme = useTheme();
-  const InformCSS = css`
-        margin-bottom: 1rem;
-        &.disabled {
-            ${pointerEventsNone};
-            ${borderColor(getProp(theme.colors, 'system/disabled'))};
-            path {
-                ${fill('transparent')};
-            }
-            &::before {
-                ${borderColor(getProp(theme.colors, 'system/disabled'))};
-            }
-        }
-    `;
-  return jsx("div", {
-    css: InformCSS
-  }, jsx(Label, {
-    label: label
-  }), jsx(Input, {
-    value: value,
-    inputProps: inputProps,
-    inputStyleProps: inputStyleProps,
-    dataType: dataType,
-    viewType: viewType,
-    format: format,
-    utc: utc,
-    thousandSeparator: thousandSeparator,
-    thousandChar: thousandChar
-  }), jsx(HelperText, {
-    text: text,
-    ...helperTextProps
-  }));
-};
-FormLabel.defaultProps = {
-  dataType: 'none',
-  format: 'MM/DD/YYYY',
-  label: '',
-  text: '',
-  thousandChar: ',',
-  thousandSeparator: 'false',
-  utc: 'false',
-  value: '',
-  viewType: 'underlined'
-};
-FormLabel.propTypes = {
-  /** utc for Form label */
-  utc: PropTypes.bool,
-  /** thousandSeparator for Form label */
-  thousandSeparator: PropTypes.bool,
-  /** thousandChar for Form label */
-  thousandChar: PropTypes.string,
-  /** label for Form label */
-  label: PropTypes.string,
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
-  /** text for Form label */
-  text: PropTypes.string,
-  /** viewType for Form label */
-  viewType: PropTypes.string,
-  /** dataType for Form label */
-  dataType: PropTypes.string,
-  /** props of span in InputView comp** dataType for Form label */
-  format: PropTypes.string,
-  /** props of span in format component */
-  inputProps: PropTypes.object,
-  /** style inline of span in InputView component */
-  inputStyleProps: PropTypes.object,
-  /** props for helper text */
-  helperTextProps: PropTypes.object
-};
-export default FormLabel;

package/components/form-view/input.js

@@ -1,117 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
-import { border, borderBottom, borderRadius, bottom, boxBorder, displayFlex, inset, insetX, itemsCenter, parseHeight, pointerEventsNone, positionAbsolute, positionRelative, scale } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { formatDate, getProp } from "../../utils";
-const InputView = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  inputProps,
-  inputStyleProps,
-  value,
-  viewType,
-  dataType,
-  format,
-  utc,
-  thousandChar
-}, reference) => {
-  if (!reference) reference = useRef(null);
-  const ref = useRef(null);
-  const theme = useTheme();
-  const {
-    colors,
-    spacing,
-    typography
-  } = theme;
-  const TextInput = viewType !== 'outlined' ? css`
-                      ${displayFlex};
-                      ${itemsCenter};
-                      ${positionRelative};
-                      flex: 1 1 auto;
-                      ${typography.paragraph1};
-                      padding-top: ${spacing([1.5])};
-                      padding-bottom: ${spacing([1.5])};
-                      &::before {
-                          content: '';
-                          ${positionAbsolute};
-                          ${insetX(0)};
-                          ${bottom(0)};
-                          ${borderBottom(1, getProp(colors, 'system/disabled'))};
-                      }
-                      &::after {
-                          content: '';
-                          ${positionAbsolute};
-                          ${insetX(0)};
-                          ${bottom(-1)};
-                          ${borderBottom(2, 'transparent')}
-                          ${scale(0)};
-                          transform-origin: center;
-                          transition: all 0.2s ease;
-                      }
-                  ` : css`
-                      ${displayFlex};
-                      ${itemsCenter};
-                      ${positionRelative};
-                      flex: 1 1 auto;
-                      ${typography.paragraph1};
-                      ${border(1, getProp(colors, 'system/disabled'))};
-                      ${borderRadius(4)};
-                      ${parseHeight(40)};
-                      ${boxBorder};
-                      &::after {
-                          content: '';
-                          ${positionAbsolute};
-                          ${inset(-2)};
-                          ${border(2, 'transparent')};
-                          ${borderRadius(4)};
-                          ${pointerEventsNone};
-                      }
-                  `;
-  const numberWithFormat = (x, thousandChar) => {
-    let a = '';
-    switch (thousandChar) {
-      case ',':
-        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        break;
-      case '.':
-        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-        break;
-      default:
-        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-    }
-    return a;
-  };
-  const dateWithFormat = date => {
-    value = formatDate(date, format, utc);
-    return value;
-  };
-  useEffect(() => {
-    if (dataType === 'integer' && format !== null) {
-      ref.current.innerHTML = numberWithFormat(value, thousandChar);
-    }
-    if (dataType === 'date' && format !== null) {
-      ref.current.innerHTML = dateWithFormat(value);
-    }
-  }, [value]);
-  return useMemo(() => {
-    return jsx("span", {
-      ...inputProps,
-      style: inputStyleProps,
-      css: TextInput,
-      ref: ref
-    }, value);
-  }, [inputProps, inputStyleProps, value, theme]);
-}));
-InputView.defaultProps = {
-  label: ''
-};
-InputView.propTypes = {
-  /** the displayed value for each change */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
-  /** props of span in InputView component */
-  inputProps: PropTypes.object,
-  /** style inline of span in InputView component */
-  inputStyleProps: PropTypes.object
-};
-export default InputView;

package/components/form-view/label.js

@@ -1,37 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import PropTypes from 'prop-types';
-import { memo } from 'react';
-import { displayBlock, textColor } from "../../styles/general";
-import { useTheme } from "../../theme";
-import { getProp } from "../../utils";
-const Label = /*#__PURE__*/memo(({
-  label,
-  labelProps
-}) => {
-  const theme = useTheme();
-  const {
-    spacing
-  } = theme;
-  const LabelTextCSS = css`
-        ${displayBlock};
-        ${textColor(getProp(theme.colors, 'text/label'))};
-        ${theme.typography.paragraph3};
-        margin-bottom: ${spacing([1.25])};
-    `;
-  return jsx("label", {
-    style: labelProps,
-    css: LabelTextCSS
-  }, label);
-});
-Label.defaultProps = {
-  label: ''
-};
-Label.propTypes = {
-  /** label for input */
-  label: PropTypes.string,
-  /** style inline of label in Label component */
-  labelProps: PropTypes.object
-};
-export default Label;

package/components/grid/Col.js

@@ -1,91 +0,0 @@
-/** @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 jsx(Grid, {
-    ...other,
-    className: classNames(`DGN-UI-Col ${classes.customCol}`, className),
-    item: true
-  });
-};
-
-// 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/components/grid/Container.js

@@ -1,85 +0,0 @@
-/** @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) ? jsx(Grid, {
-    ...other,
-    className: classNames('DGN-UI-Container', className),
-    container: true
-  }, {
-    children
-  }) : 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;