@devseed-ui/form/src/group/index.js

devseed UI Kit Form

import styled from 'styled-components';

import { glsp, visuallyHidden } from '@devseed-ui/theme-provider';

export const FormGroup = styled.div`
  display: grid;
  grid-template-rows: auto;
  grid-gap: ${glsp(1 / 2)};
`;

export const FormGroupHeader = styled.div`
  display: flex;
  flex-flow: wrap nowrap;
  justify-content: space-between;
  min-width: 0;

  ${({ isHidden }) => isHidden && visuallyHidden()}
`;

export const FormGroupBody = styled.div`
  display: grid;
  grid-template-rows: auto;
  grid-gap: ${glsp(1 / 4)};
`;

export const FormGroupFooter = styled.div`
  /* styled-component */
`;