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

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
const neutralStyles = css `
  color: ${({ theme }) => theme.neutral400};
  background: ${({ theme }) => theme.neutral200};
`;
const positiveStyles = css `
  color: ${({ theme }) => theme.seaturtleGreen200};
  background: ${({ theme }) => theme.seaturtleGreen100};
`;
const informationStyles = css `
  color: ${({ theme }) => theme.navBlue};
  background: ${({ theme }) => theme.lightBlue200};
`;
const negativeStyles = css `
  color: ${({ theme }) => theme.sebastianRed200};
  background: ${({ theme }) => theme.sebastianRed100};
`;
const variantStylesMap = {
    neutral: neutralStyles,
    positive: positiveStyles,
    information: informationStyles,
    negative: negativeStyles,
};
const variantStyles = ({ variant }) => variantStylesMap[variant];
const Span = styled.span.withConfig({ displayName: "brc-sc-Span", componentId: "brc-sc-ric8us" }) `
  font-family: ${({ theme }) => theme.fontPrimary};
  font-size: 12px;
  font-weight: bold;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.5;
  border-radius: 16px;
  ${variantStyles}
`;
export const Pill = (_a) => {
    var { label, variant, name, id } = _a, rest = __rest(_a, ["label", "variant", "name", "id"]);
    const testID = `pill:${label}`;
    return (_jsx(Span, Object.assign({ "data-testid": testID, variant: variant, name: name !== null && name !== void 0 ? name : testID, id: id !== null && id !== void 0 ? id : testID }, rest, { children: label })));
};
const StyledPill = styled(Pill).withConfig({ displayName: "brc-sc-StyledPill", componentId: "brc-sc-1etjyq1" }) ``;
export default StyledPill;
//# sourceMappingURL=pill.js.map