styled-components

export default merge(
  {},
  {
    responsiveProps: {
      breakpoints: BREAKPOINTS,
    },
    login: {
      animationBackground: false,
      buttonBorder: white,
      linkColor: white,
      hover: {
        color: white,
        background: blue.light,
        buttonBorder: 'transparent',
      },
    },
    primary: blue.light,
    background: '#F9F9F9',
    text: grey.xdark,
    textDisabled: grey.light,
    infoColor: blue.light,
    errorColor: red.base,
    warningColor: yellow.base,
    successColor: green.base,
    backgroundHoverColorDefault: grey.xxlight,
    inputBorderRadius: INPUT_BORDER_RADIUS,
    icon: {
      fleetIcon: 'fleet',
    },
    userMenu: {
      iconColor: blue.light,
    },
    linkColor: {
      text: blue.light,
      underline: 'none',
      hover: green.base,
      hoverUnderline: 'none',
    },
    cardLabel: {
      base: grey.xdark,
    },
    iconColor: {
      base: grey.xdark,
    },
    borderColor: {
      light: grey.xlight,
      base: grey.base,
    },
    borderRadius: '3px',
    backgroundColor: {
      white: {
        background: white,
        color: grey.xdark,
      },
      blue: {
        background: blue.light,
        color: white,
      },
      green: {
        background: green.dark,
        color: white,
      },
      red: {
        background: red.base,
        color: white,
      },
      xxlight: {
        background: grey.xxlight,
        color: grey.xdark,
      },
      xlight: {
        background: grey.xlight,
        color: grey.xdark,
      },
      light: {
        background: grey.light,
        color: grey.xdark,
      },
      dark: {
        background: grey.xdark,
        color: white,
      },
      xdark: {
        background: grey.xdark,
        color: white,
      },
      xxdark: {
        background: grey.xxdark,
        color: white,
      },
    },
    whiteSpace: {
      xsmall,
      small,
      medium,
      large,
    },
    distance: {
      xsmall,
      small,
      medium,
      large,
    },
    transition,
    colors,
    pageBrand,
    topBarBrand,
  },
  componentThemes,
);

export const StyledComponent= styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  &:last-child {
    // code here
  }
`;