text: import React from 'react';
  import { Attraction, Car, TreeOption } from 'grommet-icons';
  
  import { Grommet, Box, Carousel } from 'grommet';
  
  const customTheme = {
    carousel: {
      animation: {
        duration: 400,
      },
      icons: {
        color: 'blue',
      },
      disabled: {
        icons: {
          color: 'grey',
        },
      },
    },
  };
  
  export const CustomCarousel = ({ controls, ...rest }) => (
    <Grommet theme={customTheme}>
      <Box align="center" pad="large">
        <Carousel controls={controls} {...rest}>
          <Box pad="xlarge" background="accent-1">
            <Attraction size="xlarge" />
          </Box>
          <Box pad="xlarge" background="accent-2">
            <TreeOption size="xlarge" />
          </Box>
          <Box pad="xlarge" background="accent-3">
            <Car size="xlarge" />
          </Box>
        </Carousel>
      </Box>
    </Grommet>
  );
  
  CustomCarousel.story = {
    name: 'Custom controls',
  };
  