@parkassist/pa-ui-library/dist/components/Box/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Title } from "../Menu";
import { Row, Column } from "../Layout/Flex";
import Theme from "../../constants/Theme";
import Font from "../../constants/Font";
import Measures from "../../constants/Measures";
import Separator from "../Separator";
const Content = styled.div(({
  noPadding
}) => Object.assign({
  height: "100%",
  backgroundColor: Theme.BACKGROUND_COLOR,
  borderRadius: 10,
  padding: !noPadding && Measures.minMargin
}, Font));
const BoxWrapper = styled.div(({
  width = 100,
  height = 100,
  noMargin
}) => ({
  display: "flex",
  flexDirection: "column",
  height,
  width,
  marginBottom: !noMargin && Measures.minMargin
}));
const Box = ({
  width,
  height,
  title,
  leftSide,
  rightSide,
  children,
  noMargin,
  noPadding
}) => _jsxs(BoxWrapper, {
  width: width,
  height: height,
  noMargin: noMargin,
  children: [_jsx(Title, {
    children: title
  }), _jsxs(Content, {
    noPadding: noPadding,
    children: [children, (leftSide || rightSide) && _jsxs(_Fragment, {
      children: [_jsx(Separator, {}), _jsxs(Row, {
        style: {
          justifyContent: "space-between",
          alignItems: "center"
        },
        children: [_jsx(Column, {
          children: leftSide
        }), _jsx(Column, {
          children: rightSide
        })]
      })]
    })]
  })]
});
export default Box;