@flodesk/grain 11.29.2 → 11.30.0

package/es/components/textarea.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-const _excluded = ["value", "placeholder", "label", "id", "hasError", "errorMessage", "isReadOnly", "isDisabled", "hint", "maxLength", "children", "rows", "backgroundColor"];
+const _excluded = ["value", "placeholder", "label", "id", "hasError", "errorMessage", "isReadOnly", "isDisabled", "hint", "maxLength", "children", "rows", "backgroundColor", "contenteditable"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -11,35 +11,45 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { componentVars, FieldHint, FieldLabel, getFieldStyles } from '../foundational';
 import { Box } from './box';
-import { Text } from './text';
 import { types } from '../types';
-import { getSpace } from '../utilities';
+import { getColor, getRadius, getSpace, getTextSize } from '../utilities';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-const paddingY = '8px';
+const counterBarHeight = '28px';
 
-const Counter = _ref => {
+const CounteeRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1hvcshh1"
+} : {
+  target: "e1hvcshh1",
+  label: "CounteeRoot"
+})("display:grid;justify-content:end;align-items:center;grid-auto-flow:column;gap:", getSpace('xs'), ";padding-inline:", getSpace('s'), ";height:", counterBarHeight, ";position:absolute;bottom:", componentVars.strokeSize, ";left:", componentVars.strokeSize, ";right:", componentVars.strokeSize, ";background:", _ref => {
   let {
-    length,
-    maxLength
+    backgroundColor
   } = _ref;
-  return ___EmotionJSX(Box, {
-    position: "absolute",
-    paddingX: "fieldPaddingX",
-    paddingY: paddingY,
-    right: componentVars.strokeSize,
-    bottom: componentVars.strokeSize,
-    backgroundColor: "background"
-  }, ___EmotionJSX(Text, {
-    color: "content2",
-    display: "inline"
-  }, length, "/"), maxLength);
+  return getColor(backgroundColor);
+}, ";border-bottom-left-radius:calc(", getRadius('s'), " - ", componentVars.strokeSize, ");border-bottom-right-radius:calc(", getRadius('s'), " - ", componentVars.strokeSize, ");font-size:", getTextSize('s'), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVOEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dGFyZWEuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgRmllbGRIaW50LCBGaWVsZExhYmVsLCBnZXRGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFNwYWNlLCBnZXRUZXh0U2l6ZSB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmNvbnN0IGNvdW50ZXJCYXJIZWlnaHQgPSAnMjhweCc7XG5cbmNvbnN0IENvdW50ZWVSb290ID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAganVzdGlmeS1jb250ZW50OiBlbmQ7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIGdhcDogJHtnZXRTcGFjZSgneHMnKX07XG4gIHBhZGRpbmctaW5saW5lOiAke2dldFNwYWNlKCdzJyl9O1xuICBoZWlnaHQ6ICR7Y291bnRlckJhckhlaWdodH07XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm90dG9tOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX07XG4gIGxlZnQ6ICR7Y29tcG9uZW50VmFycy5zdHJva2VTaXplfTtcbiAgcmlnaHQ6ICR7Y29tcG9uZW50VmFycy5zdHJva2VTaXplfTtcbiAgYmFja2dyb3VuZDogJHsoeyBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0Q29sb3IoYmFja2dyb3VuZENvbG9yKX07XG4gIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IGNhbGMoJHtnZXRSYWRpdXMoJ3MnKX0gLSAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0pO1xuICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogY2FsYygke2dldFJhZGl1cygncycpfSAtICR7Y29tcG9uZW50VmFycy5zdHJva2VTaXplfSk7XG4gIGZvbnQtc2l6ZTogJHtnZXRUZXh0U2l6ZSgncycpfTtcbmA7XG5cbmNvbnN0IENvdW50ZXIgPSAoeyBsZW5ndGgsIG1heExlbmd0aCwgYmFja2dyb3VuZENvbG9yID0gJ2JhY2tncm91bmQnIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q291bnRlZVJvb3RcbiAgICAgIHBhZGRpbmdYPVwic1wiXG4gICAgICBwYWRkaW5nWT1cInhzXCJcbiAgICAgIGJhY2tncm91bmRDb2xvcj17YmFja2dyb3VuZENvbG9yfVxuICAgICAgd2lkdGg9XCIxMDAlXCJcbiAgICAgIGp1c3RpZnlDb250ZW50PVwiZW5kXCJcbiAgICA+XG4gICAgICB7bGVuZ3RofVxuICAgICAgPEJveCBjb2xvcj1cImNvbnRlbnQyXCI+LyB7bWF4TGVuZ3RofTwvQm94PlxuICAgIDwvQ291bnRlZVJvb3Q+XG4gICk7XG59O1xuXG5jb25zdCBUZXh0YXJlYVdyYXBwZXIgPSAoeyBjaGlsZHJlbiwgbWF4TGVuZ3RoIH0pID0+IHtcbiAgaWYgKCFtYXhMZW5ndGgpIHJldHVybiBjaGlsZHJlbjtcblxuICByZXR1cm4gPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+e2NoaWxkcmVufTwvQm94Pjtcbn07XG5cbmNvbnN0IFRleHRhcmVhRmllbGQgPSBzdHlsZWQudGV4dGFyZWFgXG4gICR7KHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBnZXRGaWVsZFN0eWxlcyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSl9O1xuICByZXNpemU6IG5vbmU7XG4gIHBhZGRpbmc6ICR7Z2V0U3BhY2UoJ3MnKX0gJHtnZXRTcGFjZSgnZmllbGRQYWRkaW5nWCcpfTtcblxuICAvKlxuICAgIHVzaW5nIGJvcmRlciB0byBjcmVhdGUgYm90dG9tIHNwYWNlLFxuICAgIHNwZWNpZmljYWxseSBib3JkZXIgbWV0aG9kLCB0byBtYWtlIHN1cmUgdGhlIHNjcm9sbCBiZWhhdmVzIGNvcnJlY3RseVxuICAqL1xuICAkeyh7IGhhc0NvdW50ZXIgfSkgPT4gaGFzQ291bnRlciAmJiBgYm9yZGVyLWJvdHRvbS13aWR0aDogJHtjb3VudGVyQmFySGVpZ2h0fWB9XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dGFyZWEgPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgdmFsdWUsXG4gICAgICBwbGFjZWhvbGRlcixcbiAgICAgIGxhYmVsLFxuICAgICAgaWQsXG4gICAgICBoYXNFcnJvcixcbiAgICAgIGVycm9yTWVzc2FnZSxcbiAgICAgIGlzUmVhZE9ubHksXG4gICAgICBpc0Rpc2FibGVkLFxuICAgICAgaGludCxcbiAgICAgIG1heExlbmd0aCxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgcm93cyA9IDMsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBjb250ZW50ZWRpdGFibGUsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBoYXNDb3VudGVyID0gQm9vbGVhbihtYXhMZW5ndGgpO1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2PlxuICAgICAgICB7KGxhYmVsIHx8IGhpbnQpICYmIChcbiAgICAgICAgICA8Qm94IG1hcmdpbkJvdHRvbT1cImJldHdlZW5Gb3JtQ29udHJvbEFuZExhYmVsXCI+XG4gICAgICAgICAgICB7bGFiZWwgJiYgPEZpZWxkTGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0ZpZWxkTGFiZWw+fVxuICAgICAgICAgICAge2hpbnQgJiYgPEZpZWxkSGludD57aGludH08L0ZpZWxkSGludD59XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgICl9XG5cbiAgICAgICAgPFRleHRhcmVhV3JhcHBlciBtYXhMZW5ndGg9e21heExlbmd0aH0+XG4gICAgICAgICAgPFRleHRhcmVhRmllbGRcbiAgICAgICAgICAgIHJlZj17cmVmfVxuICAgICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgICAgbmFtZT17aWR9XG4gICAgICAgICAgICByb3dzPXtyb3dzfVxuICAgICAgICAgICAgbWF4TGVuZ3RoPXttYXhMZW5ndGh9XG4gICAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgICByZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICAgICAgICBoYXNDb3VudGVyPXtoYXNDb3VudGVyfVxuICAgICAgICAgICAgY29udGVudGVkaXRhYmxlPXtjb250ZW50ZWRpdGFibGV9XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7aGFzQ291bnRlciAmJiAoXG4gICAgICAgICAgICA8Q291bnRlclxuICAgICAgICAgICAgICBsZW5ndGg9e3ZhbHVlLmxlbmd0aH1cbiAgICAgICAgICAgICAgbWF4TGVuZ3RoPXttYXhMZW5ndGh9XG4gICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcj17YmFja2dyb3VuZENvbG9yfVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICApfVxuICAgICAgICA8L1RleHRhcmVhV3JhcHBlcj5cblxuICAgICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgICA8Qm94IGNvbG9yPVwiZGFuZ2VyXCIgbWFyZ2luVG9wPVwiYmV0d2VlbkZvcm1Db250cm9sQW5kTGFiZWxcIj5cbiAgICAgICAgICAgIHtlcnJvck1lc3NhZ2V9XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9LFxuKTtcblxuVGV4dGFyZWEucHJvcFR5cGVzID0ge1xuICB2YWx1ZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgcGxhY2Vob2xkZXI6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGxhYmVsOiB0eXBlcy5sYWJlbCxcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaGludDogdHlwZXMuaGludCxcbiAgbWF4TGVuZ3RoOiBQcm9wVHlwZXMubnVtYmVyLFxuICByb3dzOiBQcm9wVHlwZXMubnVtYmVyLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBjb250ZW50ZWRpdGFibGU6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
+
+const Counter = _ref2 => {
+  let {
+    length,
+    maxLength,
+    backgroundColor = 'background'
+  } = _ref2;
+  return ___EmotionJSX(CounteeRoot, {
+    paddingX: "s",
+    paddingY: "xs",
+    backgroundColor: backgroundColor,
+    width: "100%",
+    justifyContent: "end"
+  }, length, ___EmotionJSX(Box, {
+    color: "content2"
+  }, "/ ", maxLength));
 };
 
-const TextareaWrapper = _ref2 => {
+const TextareaWrapper = _ref3 => {
   let {
     children,
     maxLength
-  } = _ref2;
+  } = _ref3;
   if (!maxLength) return children;
   return ___EmotionJSX(Box, {
     position: "relative"
@@ -51,23 +61,23 @@ const TextareaField = /*#__PURE__*/_styled("textarea", process.env.NODE_ENV ===
 } : {
   target: "e1hvcshh0",
   label: "TextareaField"
-})(_ref3 => {
+})(_ref4 => {
   let {
     hasError,
     backgroundColor
-  } = _ref3;
+  } = _ref4;
   return getFieldStyles({
     hasError,
     backgroundColor
   });
-}, ";resize:none;padding:", paddingY, " ", getSpace('fieldPaddingX'), " ", _ref4 => {
+}, ";resize:none;padding:", getSpace('s'), " ", getSpace('fieldPaddingX'), ";", _ref5 => {
   let {
-    bottomPadding
-  } = _ref4;
-  return bottomPadding;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQ3FDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgZ2V0RmllbGRTdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4vdGV4dCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGdldFNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuY29uc3QgcGFkZGluZ1kgPSAnOHB4JztcblxuY29uc3QgQ291bnRlciA9ICh7IGxlbmd0aCwgbWF4TGVuZ3RoIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHBhZGRpbmdYPVwiZmllbGRQYWRkaW5nWFwiXG4gICAgICBwYWRkaW5nWT17cGFkZGluZ1l9XG4gICAgICByaWdodD17Y29tcG9uZW50VmFycy5zdHJva2VTaXplfVxuICAgICAgYm90dG9tPXtjb21wb25lbnRWYXJzLnN0cm9rZVNpemV9XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I9XCJiYWNrZ3JvdW5kXCJcbiAgICA+XG4gICAgICA8VGV4dCBjb2xvcj1cImNvbnRlbnQyXCIgZGlzcGxheT1cImlubGluZVwiPlxuICAgICAgICB7bGVuZ3RofS9cbiAgICAgIDwvVGV4dD5cbiAgICAgIHttYXhMZW5ndGh9XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5jb25zdCBUZXh0YXJlYVdyYXBwZXIgPSAoeyBjaGlsZHJlbiwgbWF4TGVuZ3RoIH0pID0+IHtcbiAgaWYgKCFtYXhMZW5ndGgpIHJldHVybiBjaGlsZHJlbjtcblxuICByZXR1cm4gPEJveCBwb3NpdGlvbj1cInJlbGF0aXZlXCI+e2NoaWxkcmVufTwvQm94Pjtcbn07XG5cbmNvbnN0IFRleHRhcmVhRmllbGQgPSBzdHlsZWQudGV4dGFyZWFgXG4gICR7KHsgaGFzRXJyb3IsIGJhY2tncm91bmRDb2xvciB9KSA9PiBnZXRGaWVsZFN0eWxlcyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSl9O1xuICByZXNpemU6IG5vbmU7XG4gIHBhZGRpbmc6ICR7cGFkZGluZ1l9ICR7Z2V0U3BhY2UoJ2ZpZWxkUGFkZGluZ1gnKX0gJHsoeyBib3R0b21QYWRkaW5nIH0pID0+IGJvdHRvbVBhZGRpbmd9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFRleHRhcmVhID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBsYWJlbCxcbiAgICAgIGlkLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBlcnJvck1lc3NhZ2UsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGhpbnQsXG4gICAgICBtYXhMZW5ndGgsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIHJvd3MgPSAzLFxuICAgICAgYmFja2dyb3VuZENvbG9yLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgYm90dG9tUGFkZGluZyA9IG1heExlbmd0aFxuICAgICAgPyBgY2FsYygke3BhZGRpbmdZfSAqIDIgKyB2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpKWBcbiAgICAgIDogcGFkZGluZ1k7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgeyhsYWJlbCB8fCBoaW50KSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgICAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQ+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuXG4gICAgICAgIDxUZXh0YXJlYVdyYXBwZXIgbWF4TGVuZ3RoPXttYXhMZW5ndGh9PlxuICAgICAgICAgIDxUZXh0YXJlYUZpZWxkXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgIG5hbWU9e2lkfVxuICAgICAgICAgICAgcm93cz17cm93c31cbiAgICAgICAgICAgIG1heExlbmd0aD17bWF4TGVuZ3RofVxuICAgICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgICAgcmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICAgIGJvdHRvbVBhZGRpbmc9e2JvdHRvbVBhZGRpbmd9XG4gICAgICAgICAgICBoYXNFcnJvcj17aGFzRXJyb3J9XG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I9e2JhY2tncm91bmRDb2xvcn1cbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAvPlxuICAgICAgICAgIHttYXhMZW5ndGggJiYgPENvdW50ZXIgbGVuZ3RoPXt2YWx1ZS5sZW5ndGh9IG1heExlbmd0aD17bWF4TGVuZ3RofSAvPn1cbiAgICAgICAgPC9UZXh0YXJlYVdyYXBwZXI+XG5cbiAgICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgICAgPEJveCBjb2xvcj1cImRhbmdlclwiIG1hcmdpblRvcD1cImJldHdlZW5Gb3JtQ29udHJvbEFuZExhYmVsXCI+XG4gICAgICAgICAgICB7ZXJyb3JNZXNzYWdlfVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSxcbik7XG5cblRleHRhcmVhLnByb3BUeXBlcyA9IHtcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBpc1JlYWRPbmx5OiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGhpbnQ6IHR5cGVzLmhpbnQsXG4gIG1heExlbmd0aDogUHJvcFR5cGVzLm51bWJlcixcbiAgcm93czogUHJvcFR5cGVzLm51bWJlcixcbiAgYmFja2dyb3VuZENvbG9yOiB0eXBlcy5jb2xvcixcbn07XG4iXX0= */"));
+    hasCounter
+  } = _ref5;
+  return hasCounter && "border-bottom-width: ".concat(counterBarHeight);
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRHFDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgZ2V0RmllbGRTdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmFkaXVzLCBnZXRTcGFjZSwgZ2V0VGV4dFNpemUgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBjb3VudGVyQmFySGVpZ2h0ID0gJzI4cHgnO1xuXG5jb25zdCBDb3VudGVlUm9vdCA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGp1c3RpZnktY29udGVudDogZW5kO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICBnYXA6ICR7Z2V0U3BhY2UoJ3hzJyl9O1xuICBwYWRkaW5nLWlubGluZTogJHtnZXRTcGFjZSgncycpfTtcbiAgaGVpZ2h0OiAke2NvdW50ZXJCYXJIZWlnaHR9O1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvdHRvbTogJHtjb21wb25lbnRWYXJzLnN0cm9rZVNpemV9O1xuICBsZWZ0OiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX07XG4gIHJpZ2h0OiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX07XG4gIGJhY2tncm91bmQ6ICR7KHsgYmFja2dyb3VuZENvbG9yIH0pID0+IGdldENvbG9yKGJhY2tncm91bmRDb2xvcil9O1xuICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiBjYWxjKCR7Z2V0UmFkaXVzKCdzJyl9IC0gJHtjb21wb25lbnRWYXJzLnN0cm9rZVNpemV9KTtcbiAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IGNhbGMoJHtnZXRSYWRpdXMoJ3MnKX0gLSAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX0pO1xuICBmb250LXNpemU6ICR7Z2V0VGV4dFNpemUoJ3MnKX07XG5gO1xuXG5jb25zdCBDb3VudGVyID0gKHsgbGVuZ3RoLCBtYXhMZW5ndGgsIGJhY2tncm91bmRDb2xvciA9ICdiYWNrZ3JvdW5kJyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPENvdW50ZWVSb290XG4gICAgICBwYWRkaW5nWD1cInNcIlxuICAgICAgcGFkZGluZ1k9XCJ4c1wiXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I9e2JhY2tncm91bmRDb2xvcn1cbiAgICAgIHdpZHRoPVwiMTAwJVwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImVuZFwiXG4gICAgPlxuICAgICAge2xlbmd0aH1cbiAgICAgIDxCb3ggY29sb3I9XCJjb250ZW50MlwiPi8ge21heExlbmd0aH08L0JveD5cbiAgICA8L0NvdW50ZWVSb290PlxuICApO1xufTtcblxuY29uc3QgVGV4dGFyZWFXcmFwcGVyID0gKHsgY2hpbGRyZW4sIG1heExlbmd0aCB9KSA9PiB7XG4gIGlmICghbWF4TGVuZ3RoKSByZXR1cm4gY2hpbGRyZW47XG5cbiAgcmV0dXJuIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPntjaGlsZHJlbn08L0JveD47XG59O1xuXG5jb25zdCBUZXh0YXJlYUZpZWxkID0gc3R5bGVkLnRleHRhcmVhYFxuICAkeyh7IGhhc0Vycm9yLCBiYWNrZ3JvdW5kQ29sb3IgfSkgPT4gZ2V0RmllbGRTdHlsZXMoeyBoYXNFcnJvciwgYmFja2dyb3VuZENvbG9yIH0pfTtcbiAgcmVzaXplOiBub25lO1xuICBwYWRkaW5nOiAke2dldFNwYWNlKCdzJyl9ICR7Z2V0U3BhY2UoJ2ZpZWxkUGFkZGluZ1gnKX07XG5cbiAgLypcbiAgICB1c2luZyBib3JkZXIgdG8gY3JlYXRlIGJvdHRvbSBzcGFjZSxcbiAgICBzcGVjaWZpY2FsbHkgYm9yZGVyIG1ldGhvZCwgdG8gbWFrZSBzdXJlIHRoZSBzY3JvbGwgYmVoYXZlcyBjb3JyZWN0bHlcbiAgKi9cbiAgJHsoeyBoYXNDb3VudGVyIH0pID0+IGhhc0NvdW50ZXIgJiYgYGJvcmRlci1ib3R0b20td2lkdGg6ICR7Y291bnRlckJhckhlaWdodH1gfVxuYDtcblxuZXhwb3J0IGNvbnN0IFRleHRhcmVhID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBsYWJlbCxcbiAgICAgIGlkLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBlcnJvck1lc3NhZ2UsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGhpbnQsXG4gICAgICBtYXhMZW5ndGgsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIHJvd3MgPSAzLFxuICAgICAgYmFja2dyb3VuZENvbG9yLFxuICAgICAgY29udGVudGVkaXRhYmxlLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgaGFzQ291bnRlciA9IEJvb2xlYW4obWF4TGVuZ3RoKTtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgeyhsYWJlbCB8fCBoaW50KSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgICAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQ+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuXG4gICAgICAgIDxUZXh0YXJlYVdyYXBwZXIgbWF4TGVuZ3RoPXttYXhMZW5ndGh9PlxuICAgICAgICAgIDxUZXh0YXJlYUZpZWxkXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgIG5hbWU9e2lkfVxuICAgICAgICAgICAgcm93cz17cm93c31cbiAgICAgICAgICAgIG1heExlbmd0aD17bWF4TGVuZ3RofVxuICAgICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgICAgcmVhZE9ubHk9e2lzUmVhZE9ubHl9XG4gICAgICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcj17YmFja2dyb3VuZENvbG9yfVxuICAgICAgICAgICAgaGFzQ291bnRlcj17aGFzQ291bnRlcn1cbiAgICAgICAgICAgIGNvbnRlbnRlZGl0YWJsZT17Y29udGVudGVkaXRhYmxlfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgIC8+XG4gICAgICAgICAge2hhc0NvdW50ZXIgJiYgKFxuICAgICAgICAgICAgPENvdW50ZXJcbiAgICAgICAgICAgICAgbGVuZ3RoPXt2YWx1ZS5sZW5ndGh9XG4gICAgICAgICAgICAgIG1heExlbmd0aD17bWF4TGVuZ3RofVxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I9e2JhY2tncm91bmRDb2xvcn1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9UZXh0YXJlYVdyYXBwZXI+XG5cbiAgICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgICAgPEJveCBjb2xvcj1cImRhbmdlclwiIG1hcmdpblRvcD1cImJldHdlZW5Gb3JtQ29udHJvbEFuZExhYmVsXCI+XG4gICAgICAgICAgICB7ZXJyb3JNZXNzYWdlfVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSxcbik7XG5cblRleHRhcmVhLnByb3BUeXBlcyA9IHtcbiAgdmFsdWU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIGhhc0Vycm9yOiBQcm9wVHlwZXMuYm9vbCxcbiAgZXJyb3JNZXNzYWdlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBpc1JlYWRPbmx5OiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGhpbnQ6IHR5cGVzLmhpbnQsXG4gIG1heExlbmd0aDogUHJvcFR5cGVzLm51bWJlcixcbiAgcm93czogUHJvcFR5cGVzLm51bWJlcixcbiAgYmFja2dyb3VuZENvbG9yOiB0eXBlcy5jb2xvcixcbiAgY29udGVudGVkaXRhYmxlOiBQcm9wVHlwZXMuYm9vbCxcbn07XG4iXX0= */"));
 
-export const Textarea = /*#__PURE__*/forwardRef((_ref5, ref) => {
+export const Textarea = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     value,
     placeholder,
@@ -81,11 +91,12 @@ export const Textarea = /*#__PURE__*/forwardRef((_ref5, ref) => {
     maxLength,
     children,
     rows = 3,
-    backgroundColor
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded);
+    backgroundColor,
+    contenteditable
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, _excluded);
 
-  const bottomPadding = maxLength ? "calc(".concat(paddingY, " * 2 + var(--grn-lineHeight-global))") : paddingY;
+  const hasCounter = Boolean(maxLength);
   return ___EmotionJSX("div", null, (label || hint) && ___EmotionJSX(Box, {
     marginBottom: "betweenFormControlAndLabel"
   }, label && ___EmotionJSX(FieldLabel, {
@@ -102,12 +113,14 @@ export const Textarea = /*#__PURE__*/forwardRef((_ref5, ref) => {
     placeholder: placeholder,
     readOnly: isReadOnly,
     disabled: isDisabled,
-    bottomPadding: bottomPadding,
     hasError: hasError,
-    backgroundColor: backgroundColor
-  }, props)), maxLength && ___EmotionJSX(Counter, {
+    backgroundColor: backgroundColor,
+    hasCounter: hasCounter,
+    contenteditable: contenteditable
+  }, props)), hasCounter && ___EmotionJSX(Counter, {
     length: value.length,
-    maxLength: maxLength
+    maxLength: maxLength,
+    backgroundColor: backgroundColor
   })), errorMessage && ___EmotionJSX(Box, {
     color: "danger",
     marginTop: "betweenFormControlAndLabel"
@@ -125,5 +138,6 @@ Textarea.propTypes = {
   hint: types.hint,
   maxLength: PropTypes.number,
   rows: PropTypes.number,
-  backgroundColor: types.color
+  backgroundColor: types.color,
+  contenteditable: PropTypes.bool
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.29.2",
+  "version": "11.30.0",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",