@navinc/base-react-components/dist/chevron.js

Nav's Pattern Library

import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import CarrotLeft from './icons/actions/carrot-left';
import PropTypes from 'prop-types';
const ChevronWrapper = styled.div `
  pointer-events: none;
`;
ChevronWrapper.displayName = 'ChevronWrapper';
/**
 *
 * @param {*} props You can not access props directly. | optional | {}
 * @property {string} className
 * @property {boolean} disabled
 * @property {boolean} isInvalid
 * @property {boolean} $isOpen
 * @returns React.ReactElement
 */
export const Chevron = ({ className, disabled, isInvalid, $isOpen }) => (_jsx(ChevronWrapper, Object.assign({ className: className, disabled: disabled, isInvalid: isInvalid }, { children: _jsx(CarrotLeft, { style: {
            color: ({ isInvalid, disabled, theme }) => isInvalid ? theme.error : disabled ? theme.scuttleGray500 : theme.azure,
            transform: `rotate(${$isOpen ? '0turn' : '-0.25turn'})`,
            transition: 'transform 0.2s ease-in-out',
            transitionDelay: '0.1s',
            willChange: 'transform',
        } }, void 0) }), void 0));
Chevron.propTypes = {
    className: PropTypes.string,
    disabled: PropTypes.bool,
    isInvalid: PropTypes.bool,
    /** Shares the isOpen state with styled-components, but does not pass down to the child as a prop */
    $isOpen: PropTypes.bool,
};
Chevron.defaultProps = {
    disabled: false,
    isInvalid: false,
    $isOpen: false,
};
Chevron.displayName = 'Chevron';
export default styled(Chevron) ``;
//# sourceMappingURL=chevron.js.map