orcs-design-system/es/components/Flex/index.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import styled, { ThemeProvider } from "styled-components";
import { space, layout, flexbox, color, border, position, compose } from "styled-system";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import styledPropTypes from "@styled-system/prop-types";
import { jsx as _jsx } from "react/jsx-runtime";
const FlexStyles = compose(space, layout, flexbox, color, border, position);
const FlexWrapper = styled("div").withConfig({
  shouldForwardProp,
  displayName: "Flex__FlexWrapper",
  componentId: "sc-1f3kfw7-0"
}).attrs(props => ({
  "data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(props => css({
  boxSizing: "border-box",
  gap: props.gap
}), FlexStyles);
const FlexItem = styled("div").withConfig({
  displayName: "Flex__FlexItem",
  componentId: "sc-1f3kfw7-1"
})(css({
  boxSizing: "border-box"
}), FlexStyles);
export default function Flex(_ref) {
  let {
    children,
    gap,
    theme,
    ...props
  } = _ref;
  const component = /*#__PURE__*/_jsx(FlexWrapper, {
    gap: gap,
    ...props,
    children: children
  });
  if (theme) {
    return /*#__PURE__*/_jsx(ThemeProvider, {
      theme: theme,
      children: /*#__PURE__*/_jsx(FlexWrapper, {
        ...props,
        children: children
      })
    });
  }
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
}
Flex.propTypes = {
  /** Children of `Flex` are taken as node elements */
  children: PropTypes.node,
  gap: PropTypes.string,
  theme: PropTypes.object,
  ...styledPropTypes.space,
  ...styledPropTypes.layout,
  ...styledPropTypes.flexbox
};
Flex.defaultProps = {
  display: "flex",
  flexDirection: "row",
  flexWrap: "nowrap",
  justifyContent: "flex-start",
  alignItems: "stretch"
};
export { FlexItem };
Flex.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Flex",
  "props": {
    "display": {
      "defaultValue": {
        "value": "\"flex\"",
        "computed": false
      },
      "required": false
    },
    "flexDirection": {
      "defaultValue": {
        "value": "\"row\"",
        "computed": false
      },
      "required": false
    },
    "flexWrap": {
      "defaultValue": {
        "value": "\"nowrap\"",
        "computed": false
      },
      "required": false
    },
    "justifyContent": {
      "defaultValue": {
        "value": "\"flex-start\"",
        "computed": false
      },
      "required": false
    },
    "alignItems": {
      "defaultValue": {
        "value": "\"stretch\"",
        "computed": false
      },
      "required": false
    },
    "children": {
      "description": "Children of `Flex` are taken as node elements",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "gap": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "theme": {
      "description": "",
      "type": {
        "name": "object"
      },
      "required": false
    }
  },
  "composes": ["@styled-system/prop-types"]
};