@cimpress/react-components/dist/esm/src/Carousel/CarouselControl.js

React components to support the MCP styleguide

import React from 'react';
import { css } from '@emotion/css';
import { ArrowAlt } from '../accordion/ArrowAlt';
import { BlockButton } from '../internal';
import cvar from '../theme/cvar';
const carouselControlCss = css `
  background: 0 0;
  position: relative;
  width: 20px;
  color: ${cvar('color-interactive')};
  text-shadow: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 20px;
  text-align: center;
  opacity: 0.5;
`;
const srOnlyCss = css `
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
`;
const CarouselControl = ({ disabled, onClick, direction, large, hintText }) => (React.createElement(BlockButton, { className: carouselControlCss, style: disabled ? { visibility: 'hidden' } : {}, onClick: !disabled ? onClick : undefined },
    React.createElement(ArrowAlt, { direction: direction, size: large ? 16 : 14, "aria-hidden": "true", color: cvar('color-icon-interactive'), outlineWidth: "0" }),
    React.createElement("span", { className: srOnlyCss }, hintText)));
export default CarouselControl;
//# sourceMappingURL=CarouselControl.js.map