@vimeo/iris/components/inputs/TextArea/TextArea.style.esm.js

Vimeo Design System

import { a as __makeTemplateObject } from '../../../tslib.es6-7f0e734f.js';
import styled, { css } from 'styled-components';
import { rem } from 'polished';
import { inputColors } from '../Shared.esm.js';
import { slate, red } from '../../../color/colors.esm.js';
import { CircleInfoSmall } from '../../../icons/ui/CircleInfoSmall.esm.js';
import 'react';

var TextAreaStyled = styled.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 1rem;\n  font-size: ", ";\n  line-height: 1.25rem;\n  height: auto;\n  border-radius: 0.2rem;\n  ", ";\n\n  &:placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"], ["\n  display: block;\n  width: 100%;\n  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  padding: 1rem;\n  font-size: ", ";\n  line-height: 1.25rem;\n  height: auto;\n  border-radius: 0.2rem;\n  ", ";\n\n  &:placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n"])), rem(14), inputColors, slate(200), function (props) {
    return props.hasIcon && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: 2.25rem;\n    "], ["\n      padding-left: 2.25rem;\n    "])));
});
var InfoIcon = styled(CircleInfoSmall)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  * {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  * {\n    fill: ", ";\n  }\n"])), rem(18), rem(10), rem(20), rem(20), red(500));
var templateObject_1, templateObject_2, templateObject_3;

export { InfoIcon, TextAreaStyled };