@comicrelief/component-library 8.18.4 → 8.19.1

package/dist/components/Atoms/ErrorText/ErrorText.js

@@ -8,27 +8,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
-var _CR_ErrorRed = _interopRequireDefault(require("../Input/assets/CR_Error--red.svg"));
 const ErrorIcon = _styledComponents.default.span.withConfig({
   displayName: "ErrorText__ErrorIcon",
   componentId: "sc-19bj17r-0"
-})(["display:inline-block;padding:", " ", " ", ";width:100%;z-index:1;margin-top:-10px;background-color:", ";border-radius:", ";font-weight:bold;:before{position:relative;content:'';top:1px;margin-right:3px;background:url(", ") left 0/100% no-repeat;width:18px;height:19px;display:inline-block;vertical-align:top;color:", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.color('error_pink');
-}, (0, _spacing.default)('sm'), _CR_ErrorRed.default, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.color('red');
-});
-const ErrorText = _ref3 => {
+})(["display:inline-block;width:100%;z-index:1;font-weight:bold;padding:0.6rem 0 1rem;"]);
+const ErrorText = _ref => {
   let {
     children,
     ...rest
-  } = _ref3;
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Text.default, Object.assign({}, rest, {
     color: "red"
   }), /*#__PURE__*/_react.default.createElement(ErrorIcon, null, children));

package/dist/components/Atoms/ErrorText/__snapshots__/ErrorText.test.js.snap

@@ -10,26 +10,10 @@ exports[`renders correctly 1`] = `
 
 .c1 {
   display: inline-block;
-  padding: 1.5rem 1rem 1rem;
   width: 100%;
   z-index: 1;
-  margin-top: -10px;
-  background-color: #FAE1E2;
-  border-radius: 0.5rem;
   font-weight: bold;
-}
-
-.c1:before {
-  position: relative;
-  content: '';
-  top: 1px;
-  margin-right: 3px;
-  background: url(mock.asset) left 0/100% no-repeat;
-  width: 18px;
-  height: 19px;
-  display: inline-block;
-  vertical-align: top;
-  color: #E52630;
+  padding: 0.6rem 0 1rem;
 }
 
 <span

package/dist/components/Atoms/Input/Input.js

@@ -9,48 +9,61 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _errorAlertIconRed = _interopRequireDefault(require("./assets/error-alert-icon-red.svg"));
 var _Label = _interopRequireDefault(require("../Label/Label"));
 var _ErrorText = _interopRequireDefault(require("../ErrorText/ErrorText"));
-var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 // This seems to get a decent approximation of the necessary width (without resorting to measuring
 //  the element with JS)
-const getPrefixWidth = prefixLength => "calc(".concat((0, _spacing.default)('m'), " + (").concat(prefixLength, " * ").concat((0, _spacing.default)('sm'), "))");
-const InputField = _styledComponents.default.input.withConfig({
-  displayName: "Input__InputField",
+const getPrefixWidth = prefixLength => "calc(1.5rem + (".concat(prefixLength, " * 0.5rem))");
+const InputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Input__InputWrapper",
   componentId: "sc-bcqy1o-0"
-})(["", ""], _ref => {
+})(["position:relative;font-size:", ";"], _ref => {
   let {
-    theme,
-    error,
-    prefixLength
+    theme
   } = _ref;
-  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:", " ", ";", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:", ";font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), (0, _spacing.default)('sm'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'), theme.allBreakpoints('M'));
+  return theme.fontSize('m');
 });
-const InputWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Input__InputWrapper",
+const InputFieldContainer = _styledComponents.default.div.withConfig({
+  displayName: "Input__InputFieldContainer",
   componentId: "sc-bcqy1o-1"
-})(["position:relative;font-size:", ";"], _ref2 => {
+})(["position:relative;width:100%;display:flex;justify-content:flex-end;align-items:center;@media ", "{max-width:290px;}"], _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.fontSize('m');
+  return theme.allBreakpoints('M');
 });
+const InputField = _styledComponents.default.input.withConfig({
+  displayName: "Input__InputField",
+  componentId: "sc-bcqy1o-2"
+})(["", ""], _ref3 => {
+  let {
+    theme,
+    error,
+    prefixLength
+  } = _ref3;
+  return (0, _styledComponents.css)(["position:relative;box-sizing:border-box;width:100%;height:48px;padding:1rem 2.4rem 1rem 1.5rem;", " background-color:", ";border:1px solid;border-color:", ";box-shadow:none;appearance:none;color:", ";border-radius:0.5rem;font-size:inherit;z-index:2;font-family:", ";:focus{border:1px solid ", ";}@media ", "{max-width:290px;}"], prefixLength > 0 ? "padding-left: ".concat(getPrefixWidth(prefixLength), ";") : '', theme.color('grey_light'), error ? theme.color('red') : theme.color('grey_medium'), theme.color('black'), theme.fontFamilies(theme.font.regular), theme.color('grey_for_forms'), theme.allBreakpoints('M'));
+});
+const ErrorIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Input__ErrorIconWrapper",
+  componentId: "sc-bcqy1o-3"
+})(["position:absolute;right:0.6rem;background:url(", ") center/contain no-repeat;--iconSize:19px;width:var(--iconSize);height:var(--iconSize);z-index:3;"], _errorAlertIconRed.default);
 const Prefix = _styledComponents.default.div.withConfig({
   displayName: "Input__Prefix",
-  componentId: "sc-bcqy1o-2"
-})(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref3 => {
+  componentId: "sc-bcqy1o-4"
+})(["position:absolute;left:0;top:0;", " display:flex;height:100%;width:", ";justify-content:center;align-items:center;color:", ";font-weight:700;font-size:inherit;margin-left:2px;"], (0, _zIndex.default)('high'), _ref4 => {
   let {
     length
-  } = _ref3;
+  } = _ref4;
   return getPrefixWidth(length);
-}, _ref4 => {
+}, _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.color('grey_dark');
 });
-const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const Input = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     errorMsg = '',
     id,
@@ -64,7 +77,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     prefix = '',
     optional = null,
     ...rest
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/_react.default.createElement(_Label.default, Object.assign({
     className: className,
     htmlFor: id,
@@ -72,18 +85,20 @@ const Input = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     hideLabel: !showLabel,
     errorMsg: errorMsg,
     optional: optional
-  }, labelProps), /*#__PURE__*/_react.default.createElement(InputWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
+  }, labelProps), /*#__PURE__*/_react.default.createElement(InputWrapper, {
+    error: Boolean(errorMsg)
+  }, prefix && /*#__PURE__*/_react.default.createElement(Prefix, {
     length: prefix.length
-  }, prefix), /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
+  }, prefix), /*#__PURE__*/_react.default.createElement(InputFieldContainer, null, /*#__PURE__*/_react.default.createElement(InputField, Object.assign({
     id: id,
     type: type,
     placeholder: placeholder,
-    error: !!errorMsg,
+    error: Boolean(errorMsg),
     "aria-describedby": hasAria ? id : undefined,
     ref: ref,
     prefixLength: prefix.length,
     required: optional === false
-  }, rest))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
+  }, rest)), errorMsg && /*#__PURE__*/_react.default.createElement(ErrorIconWrapper, null))), errorMsg && /*#__PURE__*/_react.default.createElement(_ErrorText.default, {
     size: "sm",
     weight: "bold",
     "data-test": "error-message"

package/dist/components/Atoms/Input/Input.md

@@ -19,7 +19,6 @@
     label="Label"
     errorMsg="This is an error message"
     id="input-example-2"
-    showLabel={false}
   />
 ```
 
@@ -103,6 +102,6 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
       const price = event.target.value;
       if (typeof Number(price) === 'number') {
         event.target.value = Number(price).toFixed(2);
-      } 
+      }
     }}
   />

package/dist/components/Atoms/Input/assets/error-alert-icon-red.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2432_14605)">
+<path d="M12 0.5C5.6585 0.5 0.5 5.659 0.5 12C0.5 18.341 5.6585 23.5 12 23.5C18.3415 23.5 23.5 18.341 23.5 12C23.5 5.659 18.3415 0.5 12 0.5ZM10.5 6C10.5 5.1715 11.1715 4.5 12 4.5C12.8285 4.5 13.5 5.1715 13.5 6V13C13.5 13.8285 12.8285 14.5 12 14.5C11.1715 14.5 10.5 13.8285 10.5 13V6ZM12 19.5C10.897 19.5 10 18.603 10 17.5C10 16.397 10.897 15.5 12 15.5C13.103 15.5 14 16.397 14 17.5C14 18.603 13.103 19.5 12 19.5Z" fill="#E52630"/>
+</g>
+<defs>
+<clipPath id="clip0_2432_14605">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Atoms/Input/input.test.js

@@ -14,5 +14,5 @@ it('renders correctly', () => {
     errorMsg: "",
     id: "Accessibility info go here"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c4 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c4:focus {\n      border: 1px solid #666;\n    }\n\n    .c3 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        max-width: 290px;\n      }\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Accessibility info go here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <div\n        className=\"c3\"\n      >\n        \n        <input\n          aria-describedby=\"Accessibility info go here\"\n          className=\"c4\"\n          id=\"Accessibility info go here\"\n          name=\"fullname\"\n          placeholder=\"This is the hint text\"\n          required={false}\n          type=\"text\"\n        />\n      </div>\n      \n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c3 {\n      position: relative;\n      font-size: 1.25rem;\n    }\n\n    .c4 {\n      position: relative;\n      width: 100%;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-pack: end;\n      -webkit-justify-content: flex-end;\n      -ms-flex-pack: end;\n      justify-content: flex-end;\n      -webkit-align-items: center;\n      -webkit-box-align: center;\n      -ms-flex-align: center;\n      align-items: center;\n    }\n\n    .c5 {\n      position: relative;\n      box-sizing: border-box;\n      width: 100%;\n      height: 48px;\n      padding: 1rem 2.4rem 1rem 1.5rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      border-radius: 0.5rem;\n      font-size: inherit;\n      z-index: 2;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c5:focus {\n      border: 1px solid #666;\n    }\n\n    @media (min-width:740px) {\n      .c4 {\n        max-width: 290px;\n      }\n    }\n\n    @media (min-width:740px) {\n      .c5 {\n        max-width: 290px;\n      }\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Accessibility info go here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <div\n        className=\"c3\"\n      >\n        \n        <div\n          className=\"c4\"\n        >\n          <input\n            aria-describedby=\"Accessibility info go here\"\n            className=\"c5\"\n            id=\"Accessibility info go here\"\n            name=\"fullname\"\n            placeholder=\"This is the hint text\"\n            required={false}\n            type=\"text\"\n          />\n          \n        </div>\n      </div>\n      \n    </label>\n  ");
 });

package/dist/components/Atoms/Label/Label.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Text = _interopRequireDefault(require("../Text/Text"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
@@ -13,11 +14,12 @@ var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVi
 const LabelElement = _styledComponents.default.label.withConfig({
   displayName: "Label__LabelElement",
   componentId: "sc-2nrw50-0"
-})(["position:relative;display:flex;flex-direction:column;color:", ";width:100%;", ""], _ref => {
+})(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], _ref => {
   let {
-    theme
+    theme,
+    errorMsg
   } = _ref;
-  return theme.color('grey_label');
+  return errorMsg ? theme.color('red') : theme.color('grey_label');
 }, _ref2 => {
   let {
     optional,
@@ -25,12 +27,10 @@ const LabelElement = _styledComponents.default.label.withConfig({
   } = _ref2;
   return optional === true && "\n  :after {\n    position: absolute;\n    top: 0;\n    right: 0;\n    content: 'Optional';\n    font-family: ".concat(theme.fontFamilies(theme.font.regular), ";\n    font-size: ").concat(theme.fontSize('s'), ";\n  }");
 });
-const VisibleText = (0, _styledComponents.default)(_Text.default).attrs({
-  weight: 'bold'
-}).withConfig({
+const VisibleText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Label__VisibleText",
   componentId: "sc-2nrw50-1"
-})(["margin-bottom:", ";"], (0, _spacing.default)('sm'));
+})(["margin-bottom:", ";font-weight:normal;"], (0, _spacing.default)('sm'));
 const HiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Label__HiddenText",
   componentId: "sc-2nrw50-2"
@@ -65,13 +65,19 @@ const Label = _ref4 => {
     label,
     hideLabel = false,
     optional = null,
+    errorMsg = '',
     ...rest
   } = _ref4;
-  return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({}, rest, {
-    optional: optional
-  }), /*#__PURE__*/_react.default.createElement(LabelText, {
+  return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
+    optional: optional,
+    errorMsg: errorMsg
+  }, rest), /*#__PURE__*/_react.default.createElement(LabelText, {
     label: label,
     hideLabel: hideLabel
   }), children);
 };
+LabelElement.propTypes = {
+  optional: _propTypes.default.bool,
+  errorMsg: _propTypes.default.string
+};
 var _default = exports.default = Label;

package/dist/components/Atoms/Select/__snapshots__/Select.test.js.snap

@@ -5,12 +5,12 @@ exports[`renders correctly 1`] = `
   font-size: 1rem;
   line-height: 1rem;
   text-transform: inherit;
-  font-weight: bold;
   line-height: normal;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
 .c0 {
+  width: 100%;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -20,11 +20,11 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   color: #5C5C5E;
-  width: 100%;
 }
 
 .c2 {
   margin-bottom: 0.5rem;
+  font-weight: normal;
 }
 
 .c3 {

package/dist/components/Atoms/TextArea/TextArea.test.js

@@ -14,5 +14,5 @@ it('renders correctly', () => {
     errorMsg: "",
     id: "Please leave your comment here"
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      font-weight: bold;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n      width: 100%;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n    }\n\n    .c3 {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 0;\n      padding: 1rem 1.5rem;\n      font-size: 1.25rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-radius: 0.5rem;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n      resize: vertical;\n    }\n\n    .c3:focus {\n      border: 1px solid #666;\n    }\n\n    .c3:focus::-webkit-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::-moz-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus:-ms-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::placeholder {\n      visibility: hidden;\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Please leave your comment here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <textarea\n        aria-describedby=\"Please leave your comment here\"\n        className=\"c3\"\n        name=\"description\"\n        placeholder=\"This is text area\"\n        rows={5}\n      />\n      \n    </label>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c1 {\n      font-size: 1rem;\n      line-height: 1rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c0 {\n      width: 100%;\n      position: relative;\n      display: -webkit-box;\n      display: -webkit-flex;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-flex-direction: column;\n      -ms-flex-direction: column;\n      flex-direction: column;\n      color: #5C5C5E;\n    }\n\n    .c2 {\n      margin-bottom: 0.5rem;\n      font-weight: normal;\n    }\n\n    .c3 {\n      box-sizing: border-box;\n      width: 100%;\n      margin: 0;\n      padding: 1rem 1.5rem;\n      font-size: 1.25rem;\n      background-color: #F4F3F5;\n      border: 1px solid;\n      border-radius: 0.5rem;\n      border-color: #E1E2E3;\n      box-shadow: none;\n      -webkit-appearance: none;\n      -moz-appearance: none;\n      appearance: none;\n      color: #000000;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n      resize: vertical;\n    }\n\n    .c3:focus {\n      border: 1px solid #666;\n    }\n\n    .c3:focus::-webkit-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::-moz-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus:-ms-input-placeholder {\n      visibility: hidden;\n    }\n\n    .c3:focus::placeholder {\n      visibility: hidden;\n    }\n\n    <label\n      className=\"c0\"\n      htmlFor=\"Please leave your comment here\"\n    >\n      <span\n        className=\"c1 c2\"\n        color=\"inherit\"\n        dangerouslySetInnerHTML={\n          Object {\n            \"__html\": \"Label\",\n          }\n        }\n        size=\"s\"\n      />\n      <textarea\n        aria-describedby=\"Please leave your comment here\"\n        className=\"c3\"\n        name=\"description\"\n        placeholder=\"This is text area\"\n        rows={5}\n      />\n      \n    </label>\n  ");
 });