import React from 'react';
import PropTypes from 'prop-types';
import { b as classNames, a as withNano } from '../chunk-566df01b.js';
import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../chunk-aad905a2.js';
import '../chunk-aeb80e51.js';

var styles = (function (theme) {
	var typography = theme.typography,
	    palette = theme.palette;

	return {
		root: {
			fontStyle: typography.fontStyle,
			fontStretch: typography.fontStretch,
			lineHeight: typography.lineHeight,
			letterSpacing: typography.letterSpacing,
			fontWeight: typography.fontWeight,
			fontSize: typography.fontSize,
			fontFamily: typography.fontFamily,
			margin: 0
		},
		bold: {
			fontWeight: typography.fontWeightBold
		},
		customSize: {
			fontSize: function fontSize(_ref) {
				var size = _ref.size;

				if (typeof size === 'string') {
					if (size === 'sm') return typography.fontSize;
					if (size === 'md') return typography.fontSizeMd;
					if (size === 'lg') return typography.fontSizeLg;
				} else if (typeof size === 'number') {
					return size;
				}
				return typography.fontSize;
			}
		},
		underlined: {
			textDecoration: 'underline'
		},
		italic: {
			fontStyle: 'italic'
		},
		strikethrough: {
			textDecoration: 'line-through'
		},
		capitalized: {
			textTransform: 'capitalize'
		},
		uppercase: {
			textTransform: 'uppercase'
		},
		color: function color(_ref2) {
			var _color = _ref2.color;
			return {
				color: palette[_color] || _color
			};
		},
		black: {
			color: palette.black
		},
		grey: {
			color: palette.grey90
		},
		white: {
			color: palette.white
		},
		red: {
			color: palette.red
		},
		blue: {
			color: palette.blue
		}
	};
});

var Text = function Text(_ref) {
	var children = _ref.children,
	    bold = _ref.bold,
	    _ref$color = _ref.color,
	    color = _ref$color === undefined ? 'black' : _ref$color,
	    _ref$size = _ref.size,
	    size = _ref$size === undefined ? 12 : _ref$size,
	    className = _ref.className,
	    classes = _ref.classes,
	    _ref$inline = _ref.inline,
	    inline = _ref$inline === undefined ? false : _ref$inline,
	    _ref$underlined = _ref.underlined,
	    underlined = _ref$underlined === undefined ? false : _ref$underlined,
	    _ref$italic = _ref.italic,
	    italic = _ref$italic === undefined ? false : _ref$italic,
	    _ref$capitalized = _ref.capitalized,
	    capitalized = _ref$capitalized === undefined ? false : _ref$capitalized,
	    _ref$uppercase = _ref.uppercase,
	    uppercase = _ref$uppercase === undefined ? false : _ref$uppercase,
	    _ref$strikethrough = _ref.strikethrough,
	    strikethrough = _ref$strikethrough === undefined ? false : _ref$strikethrough,
	    rest = objectWithoutProperties(_ref, ['children', 'bold', 'color', 'size', 'className', 'classes', 'inline', 'underlined', 'italic', 'capitalized', 'uppercase', 'strikethrough']);

	var Component = inline ? 'span' : 'p';
	return React.createElement(
		Component,
		_extends({
			className: classNames(classes.root, bold && classes.bold, color && classes.color, size && classes.customSize, underlined && classes.underlined, italic && classes.italic, capitalized && classes.capitalized, uppercase && classes.uppercase, strikethrough && classes.strikethrough, className)
		}, rest),
		children || null
	);
};

Text.displayName = 'Text';

Text.defaultProps = {
	bold: false
};

Text.propTypes = {
	children: PropTypes.node,
	bold: PropTypes.bool,
	// size can be "lg/md/sm" or number {12}
	size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
	className: PropTypes.string,
	classes: PropTypes.object,
	inline: PropTypes.bool,
	color: PropTypes.string,
	underlined: PropTypes.bool,
	italic: PropTypes.bool,
	strikethrough: PropTypes.bool,
	capitalized: PropTypes.bool,
	uppercase: PropTypes.bool
};

var Text$1 = withNano(styles, {
	observableProps: ['size', 'color']
})(Text);

export default Text$1;
//# sourceMappingURL=index.js.map
