UNPKG

@navinc/base-react-components

Version:
70 lines 2.43 kB
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 } from 'styled-components'; const sizeVariants = { small: { fontSize: '12px', lineHeight: '18px', }, medium: { fontSize: '14px', lineHeight: '20px', }, regular: { fontSize: '16px', lineHeight: '24px', }, large: { fontSize: '18px', lineHeight: '28px', }, }; const boldVariants = { regular: { fontWeight: 400, }, semiBold: { fontWeight: 600, }, bold: { fontWeight: 800, }, }; const getBoldVariant = (props) => { const { bold, $bold, boldType } = props; const isBold = bold || $bold; if (isBold) { return boldVariants.bold; } return boldType ? boldVariants[boldType] : undefined; }; const getSize = ({ size = 'regular' }) => { var _a; return (_a = sizeVariants[size]) !== null && _a !== void 0 ? _a : sizeVariants.regular; }; /** * @deprecated Use `CopyVariant as Copy` instead. Use `component='span'` to turn any nested Copy component into a span tag. This component will be removed in a future release. CopyVariant replaces Header, Copy, and Text. * * The `span` of base-react-components. Text can be used inside of `Copy` to give isolated variant styles to what it wraps. Ei: `bold` or `light`. */ export const Text = styled((_a) => { var { bold: _bold, light: _light, size: _size, boldType: _boldType } = _a, props = __rest(_a, ["bold", "light", "size", "boldType"]); return _jsx("span", Object.assign({}, props)); }).withConfig({ displayName: "brc-sc-Text", componentId: "brc-sc-1emlbr7" }) ` color: ${({ theme }) => theme.navNeutralDark}; font-family: ${({ theme }) => theme.fontPrimary}; ${({ size }) => getSize({ size })}; ${({ bold, $bold, boldType }) => getBoldVariant({ bold, $bold, boldType })}; `; Text.displayName = 'Text'; //# sourceMappingURL=text.js.map