@cimpress/react-components/dist/src/Carousel/CarouselIndicator.js

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const css_1 = require("@emotion/css");
const react_1 = __importDefault(require("react"));
const internal_1 = require("../internal");
const cvar_1 = __importDefault(require("../theme/cvar"));
const activeCss = (0, css_1.css) `
  border: 1px solid ${(0, cvar_1.default)('color-interactive')};
`;
const inactiveCss = (0, css_1.css) `
  border: 1px solid ${(0, cvar_1.default)('color-border-light')};
`;
const CarouselIndicator = ({ active, children, goToSlide, slideNumber, offset }) => {
    const onSlideClick = () => {
        goToSlide(slideNumber);
    };
    return (react_1.default.createElement(internal_1.BlockButton, { as: "li", style: Object.assign(Object.assign({}, offset), { textIndent: '0', overflow: 'hidden' }), className: (0, css_1.cx)({ [activeCss]: active, [inactiveCss]: !active }), onClick: onSlideClick }, children));
};
exports.default = CarouselIndicator;
//# sourceMappingURL=CarouselIndicator.js.map