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

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chevron = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const carrot_left_js_1 = __importDefault(require("./icons/actions/carrot-left.js"));
const setColor = ({ isInvalid, disabled, theme }) => {
    if (isInvalid)
        return theme.navStatusNegative;
    return disabled ? theme.navNeutral400 : theme.navPrimary;
};
const ChevronWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-yupxyd" }) `
  pointer-events: none;
`;
const StyledChevron = (0, styled_components_1.default)(carrot_left_js_1.default).withConfig({ displayName: "brc-sc-StyledChevron", componentId: "brc-sc-15j0i7d" }) `
  fill: ${({ isInvalid, disabled, theme }) => setColor({ isInvalid, disabled, theme })};
  transform: ${({ $isOpen }) => `rotate(${$isOpen ? '0turn' : '-0.25turn'})}`};
  transition: transform 0.2s ease-in-out;
  transition-delay: 0.1s;
`;
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
 */
const _Chevron = ({ className, disabled = false, isInvalid = false, isOpen = false }) => ((0, jsx_runtime_1.jsx)(ChevronWrapper, { className: className, children: (0, jsx_runtime_1.jsx)(StyledChevron, { "$isOpen": isOpen, disabled: disabled, isInvalid: isInvalid }) }));
_Chevron.displayName = 'Chevron';
exports.Chevron = (0, styled_components_1.default)(_Chevron).withConfig({ displayName: "brc-sc-Chevron", componentId: "brc-sc-1wabdil" }) ``;
//# sourceMappingURL=chevron.js.map