@teamturing/react-kit 2.19.27 → 2.19.29

package/dist/index.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var styled = require('styled-components');
 var ReactDOM = require('react-dom');
+var ReactTextareaAutosize = require('react-textarea-autosize');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -27,6 +28,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var ReactTextareaAutosize__default = /*#__PURE__*/_interopDefault(ReactTextareaAutosize);
 
 function _extends$1() {
   _extends$1 = Object.assign || function (target) {
@@ -249,7 +251,7 @@ object-assign
 */
 /* eslint-disable no-unused-vars */
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 function toObject(val) {
   if (val === null || val === undefined) {
@@ -305,7 +307,7 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
   for (var s = 1; s < arguments.length; s++) {
     from = Object(arguments[s]);
     for (var key in from) {
-      if (hasOwnProperty.call(from, key)) {
+      if (hasOwnProperty$1.call(from, key)) {
         to[key] = from[key];
       }
     }
@@ -352,7 +354,7 @@ var defaults$4 = {
 var createMediaQuery = function createMediaQuery(n) {
   return "@media screen and (min-width: " + n + ")";
 };
-var getValue = function getValue(n, scale) {
+var getValue$1 = function getValue(n, scale) {
   return get(scale, n, n);
 };
 var get = function get(obj, key, def, p, undef) {
@@ -443,7 +445,7 @@ var createStyleFunction = function createStyleFunction(_ref) {
     property = _ref.property,
     scale = _ref.scale,
     _ref$transform = _ref.transform,
-    transform = _ref$transform === void 0 ? getValue : _ref$transform,
+    transform = _ref$transform === void 0 ? getValue$1 : _ref$transform,
     defaultScale = _ref.defaultScale;
   properties = properties || [property];
   var sx = function sx(value, scale, _props) {
@@ -4431,6 +4433,15 @@ var icons = /*#__PURE__*/Object.freeze({
   YoutubeIcon: SvgYoutube
 });
 
+/**
+ * 숫자를 콤마(,)로 구분해서 반환합니다.
+ */
+function commaizeNumber(value) {
+  const parts = value.toString().split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return parts.join('.');
+}
+
 /**
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
  */
@@ -4438,9 +4449,9 @@ const forcePixelValue = value => {
   return typeof value === 'string' ? value : `${value}px`;
 };
 
-const isArray = value => Array.isArray(value);
+const isArray$1 = value => Array.isArray(value);
 
-const isFunction = value => typeof value === 'function';
+const isFunction$1 = value => typeof value === 'function';
 
 const isNullable = value => value === null || value === undefined;
 
@@ -6830,12 +6841,12 @@ const BaseGrid = styled__default.default(View)({
   }
 }));
 const mapValueToResponsiveValueProps = (value, propsAccessor) => {
-  if (isNullable(value) || typeof value === 'object' && !isArray(value)) return null;
-  if (!isArray(value)) return propsAccessor(value);
+  if (isNullable(value) || typeof value === 'object' && !isArray$1(value)) return null;
+  if (!isArray$1(value)) return propsAccessor(value);
   return value.reduce((acc, cur) => {
     const curProps = propsAccessor(cur);
     const curPropKeys = Object.keys(curProps);
-    return Object.fromEntries(curPropKeys.map(curPropKey => [curPropKey, acc[curPropKey] === undefined || acc[curPropKey] === null ? [curProps[curPropKey]] : isArray(acc[curPropKey]) ? [...acc[curPropKey], curProps[curPropKey]] : [acc[curPropKey], curProps[curPropKey]]]));
+    return Object.fromEntries(curPropKeys.map(curPropKey => [curPropKey, acc[curPropKey] === undefined || acc[curPropKey] === null ? [curProps[curPropKey]] : isArray$1(acc[curPropKey]) ? [...acc[curPropKey], curProps[curPropKey]] : [acc[curPropKey], curProps[curPropKey]]]));
   }, {});
 };
 const Unit = ({
@@ -7816,12 +7827,12 @@ const sanitize = (v) => Math.round(v * 100000) / 100000;
 const floatRegex = /(-)?([\d]*\.?[\d])+/g;
 const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
 const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
-function isString(v) {
+function isString$1(v) {
     return typeof v === "string";
 }
 
 const createUnitType = (unit) => ({
-    test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+    test: (v) => isString$1(v) && v.endsWith(unit) && v.split(" ").length === 1,
     parse: parseFloat,
     transform: (v) => `${v}${unit}`,
 });
@@ -9368,11 +9379,11 @@ const easingDefinitionToFunction = (definition) => {
  * but false if a number or multiple colors
  */
 const isColorString = (type, testProp) => (v) => {
-    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+    return Boolean((isString$1(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
         (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
 };
 const splitColor = (aName, bName, cName) => (v) => {
-    if (!isString(v))
+    if (!isString$1(v))
         return v;
     const [a, b, c, alpha] = v.match(floatRegex);
     return {
@@ -9468,7 +9479,7 @@ const color = {
         }
     },
     transform: (v) => {
-        return isString(v)
+        return isString$1(v)
             ? v
             : v.hasOwnProperty("red")
                 ? rgba.transform(v)
@@ -9575,7 +9586,7 @@ const mixColor = (from, to) => {
 function test(v) {
     var _a, _b;
     return (isNaN(v) &&
-        isString(v) &&
+        isString$1(v) &&
         (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
             (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
             0);
@@ -21016,7 +21027,7 @@ const OverlayPopper = ({
       ref: refs.setReference
     }
   };
-  const children = isFunction(propChildren) ? propChildren({
+  const children = isFunction$1(propChildren) ? propChildren({
     ...defaultPopperProps
   }, {
     isOpen,
@@ -21139,7 +21150,7 @@ const TextInput = ({
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput$1, {
       ref: e => {
-        isFunction(ref) ? ref(e) : null;
+        isFunction$1(ref) ? ref(e) : null;
         inputRef.current = e;
       },
       type: type,
@@ -21523,7 +21534,7 @@ const SearchSelectInput = ({
         size: 16
       }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseInput, {
         ref: e => {
-          isFunction(ref) ? ref(e) : null;
+          isFunction$1(ref) ? ref(e) : null;
           valueInputRef.current = e;
         },
         type: 'hidden',
@@ -21710,7 +21721,7 @@ const Select = ({
       children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
     }), /*#__PURE__*/jsxRuntimeExports.jsxs(BaseSelect, {
       ref: e => {
-        isFunction(ref) ? ref(e) : null;
+        isFunction$1(ref) ? ref(e) : null;
         selectRef.current = e;
       },
       placeholder: placeholder,
@@ -21894,146 +21905,1185 @@ var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
   Option: SelectOption
 });
 
-const FormControlCaption = ({
-  children
-}) => {
-  const {
-    id
-  } = React.useContext(FormControlContext);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
-    as: 'span',
-    id: id,
-    typography: 'xxs',
-    color: 'text/neutral/subtlest',
-    children: children
-  });
-};
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
 
-const FormControlErrorMessage = ({
-  children
-}) => {
-  const {
-    id
-  } = React.useContext(FormControlContext);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText$1, {
-    id: id,
-    typography: 'xxs',
-    color: 'text/danger',
-    children: children
-  });
-};
-const errorMessageKeyframe = styled.keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
+/** Used as references for various `Number` constants. */
+var MAX_SAFE_INTEGER = 9007199254740991;
+
+/** `Object#toString` result references. */
+var argsTag = '[object Arguments]',
+  funcTag = '[object Function]',
+  genTag = '[object GeneratorFunction]',
+  mapTag = '[object Map]',
+  objectTag = '[object Object]',
+  promiseTag = '[object Promise]',
+  setTag = '[object Set]',
+  stringTag = '[object String]',
+  weakMapTag = '[object WeakMap]';
+var dataViewTag = '[object DataView]';
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Used to detect unsigned integer values. */
+var reIsUint = /^(?:0|[1-9]\d*)$/;
+
+/** Used to compose unicode character classes. */
+var rsAstralRange = '\\ud800-\\udfff',
+  rsComboMarksRange = '\\u0300-\\u036f\\ufe20-\\ufe23',
+  rsComboSymbolsRange = '\\u20d0-\\u20f0',
+  rsVarRange = '\\ufe0e\\ufe0f';
+
+/** Used to compose unicode capture groups. */
+var rsAstral = '[' + rsAstralRange + ']',
+  rsCombo = '[' + rsComboMarksRange + rsComboSymbolsRange + ']',
+  rsFitz = '\\ud83c[\\udffb-\\udfff]',
+  rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+  rsNonAstral = '[^' + rsAstralRange + ']',
+  rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+  rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+  rsZWJ = '\\u200d';
+
+/** Used to compose unicode regexes. */
+var reOptMod = rsModifier + '?',
+  rsOptVar = '[' + rsVarRange + ']?',
+  rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+  rsSeq = rsOptVar + reOptMod + rsOptJoin,
+  rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
+
+/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
+var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
+
+/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
+var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange + rsComboMarksRange + rsComboSymbolsRange + rsVarRange + ']');
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal$2 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf$2 = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$2 = freeGlobal$2 || freeSelf$2 || Function('return this')();
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+function arrayMap(array, iteratee) {
+  var index = -1,
+    length = array ? array.length : 0,
+    result = Array(length);
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
   }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
+  return result;
+}
+
+/**
+ * Converts an ASCII `string` to an array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the converted array.
+ */
+function asciiToArray(string) {
+  return string.split('');
+}
+
+/**
+ * The base implementation of `_.times` without support for iteratee shorthands
+ * or max array length checks.
+ *
+ * @private
+ * @param {number} n The number of times to invoke `iteratee`.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the array of results.
+ */
+function baseTimes(n, iteratee) {
+  var index = -1,
+    result = Array(n);
+  while (++index < n) {
+    result[index] = iteratee(index);
   }
-`;
-const StyledText$1 = styled__default.default(Text)`
-  animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
-`;
+  return result;
+}
 
-const FormControlLabel = ({
-  children,
-  visuallyHidden,
-  ...props
-}) => {
-  const {
-    id,
-    disabled,
-    required
-  } = React.useContext(FormControlContext);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(VisuallyHidden, {
-    as: 'label',
-    htmlFor: id,
-    isVisible: !visuallyHidden,
-    children: /*#__PURE__*/jsxRuntimeExports.jsxs(LabelWrapper, {
-      ...props,
-      disabled: disabled,
-      children: [children, required ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
-        as: 'span',
-        "aria-hidden": "true",
-        children: ' *'
-      }) : null]
-    })
+/**
+ * The base implementation of `_.values` and `_.valuesIn` which creates an
+ * array of `object` property values corresponding to the property names
+ * of `props`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Array} props The property names to get values for.
+ * @returns {Object} Returns the array of property values.
+ */
+function baseValues(object, props) {
+  return arrayMap(props, function (key) {
+    return object[key];
   });
-};
-const VisuallyHidden = styled__default.default.span`
-  ${({
-  isVisible = false
-}) => {
-  if (isVisible) {
-    return sx;
-  }
-  return `
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border-width: 0;
-    `;
-}}
-`;
-const LabelWrapper = styled__default.default(View)`
-  display: block;
-  align-self: flex-start;
+}
 
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function getValue(object, key) {
+  return object == null ? undefined : object[key];
+}
 
-  color: ${({
-  theme
-}) => theme.colors['text/neutral/subtle']};
+/**
+ * Checks if `string` contains Unicode symbols.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {boolean} Returns `true` if a symbol is found, else `false`.
+ */
+function hasUnicode(string) {
+  return reHasUnicode.test(string);
+}
 
-  cursor: ${({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer'};
+/**
+ * Checks if `value` is a host object in IE < 9.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
+ */
+function isHostObject(value) {
+  // Many host objects are `Object` objects that can coerce to strings
+  // despite having improperly defined `toString` methods.
+  var result = false;
+  if (value != null && typeof value.toString != 'function') {
+    try {
+      result = !!(value + '');
+    } catch (e) {}
+  }
+  return result;
+}
 
-  ${sx};
-`;
+/**
+ * Converts `iterator` to an array.
+ *
+ * @private
+ * @param {Object} iterator The iterator to convert.
+ * @returns {Array} Returns the converted array.
+ */
+function iteratorToArray(iterator) {
+  var data,
+    result = [];
+  while (!(data = iterator.next()).done) {
+    result.push(data.value);
+  }
+  return result;
+}
 
-const FormControlSuccessMessage = ({
-  children
-}) => {
-  const {
-    id
-  } = React.useContext(FormControlContext);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText, {
-    id: id,
-    typography: 'xxs',
-    color: 'text/success',
-    children: children
+/**
+ * Converts `map` to its key-value pairs.
+ *
+ * @private
+ * @param {Object} map The map to convert.
+ * @returns {Array} Returns the key-value pairs.
+ */
+function mapToArray(map) {
+  var index = -1,
+    result = Array(map.size);
+  map.forEach(function (value, key) {
+    result[++index] = [key, value];
   });
-};
-const successMessageKeyframe = styled.keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
+  return result;
+}
+
+/**
+ * Creates a unary function that invokes `func` with its argument transformed.
+ *
+ * @private
+ * @param {Function} func The function to wrap.
+ * @param {Function} transform The argument transform.
+ * @returns {Function} Returns the new function.
+ */
+function overArg(func, transform) {
+  return function (arg) {
+    return func(transform(arg));
+  };
+}
+
+/**
+ * Converts `set` to an array of its values.
+ *
+ * @private
+ * @param {Object} set The set to convert.
+ * @returns {Array} Returns the values.
+ */
+function setToArray(set) {
+  var index = -1,
+    result = Array(set.size);
+  set.forEach(function (value) {
+    result[++index] = value;
+  });
+  return result;
+}
+
+/**
+ * Converts `string` to an array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the converted array.
+ */
+function stringToArray(string) {
+  return hasUnicode(string) ? unicodeToArray(string) : asciiToArray(string);
+}
+
+/**
+ * Converts a Unicode `string` to an array.
+ *
+ * @private
+ * @param {string} string The string to convert.
+ * @returns {Array} Returns the converted array.
+ */
+function unicodeToArray(string) {
+  return string.match(reUnicode) || [];
+}
+
+/** Used for built-in method references. */
+var funcProto = Function.prototype,
+  objectProto$2 = Object.prototype;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData = root$2['__core-js_shared__'];
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = function () {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  return uid ? 'Symbol(src)_1.' + uid : '';
+}();
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$2.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString$2 = objectProto$2.toString;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' + funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&').replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');
+
+/** Built-in value references. */
+var Symbol$1 = root$2.Symbol,
+  iteratorSymbol = Symbol$1 ? Symbol$1.iterator : undefined,
+  propertyIsEnumerable = objectProto$2.propertyIsEnumerable;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeKeys = overArg(Object.keys, Object);
+
+/* Built-in method references that are verified to be native. */
+var DataView = getNative(root$2, 'DataView'),
+  Map$1 = getNative(root$2, 'Map'),
+  Promise$1 = getNative(root$2, 'Promise'),
+  Set$1 = getNative(root$2, 'Set'),
+  WeakMap$1 = getNative(root$2, 'WeakMap');
+
+/** Used to detect maps, sets, and weakmaps. */
+var dataViewCtorString = toSource(DataView),
+  mapCtorString = toSource(Map$1),
+  promiseCtorString = toSource(Promise$1),
+  setCtorString = toSource(Set$1),
+  weakMapCtorString = toSource(WeakMap$1);
+
+/**
+ * Creates an array of the enumerable property names of the array-like `value`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @param {boolean} inherited Specify returning inherited property names.
+ * @returns {Array} Returns the array of property names.
+ */
+function arrayLikeKeys(value, inherited) {
+  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
+  // Safari 9 makes `arguments.length` enumerable in strict mode.
+  var result = isArray(value) || isArguments(value) ? baseTimes(value.length, String) : [];
+  var length = result.length,
+    skipIndexes = !!length;
+  for (var key in value) {
+    if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == 'length' || isIndex(key, length)))) {
+      result.push(key);
+    }
   }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
+  return result;
+}
+
+/**
+ * The base implementation of `getTag`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  return objectToString$2.call(value);
+}
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative(value) {
+  if (!isObject$2(value) || isMasked(value)) {
+    return false;
   }
-`;
-const StyledText = styled__default.default(Text)`
-  animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
-`;
+  var pattern = isFunction(value) || isHostObject(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
 
-const FormControlContext = /*#__PURE__*/React.createContext({});
+/**
+ * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ */
+function baseKeys(object) {
+  if (!isPrototype(object)) {
+    return nativeKeys(object);
+  }
+  var result = [];
+  for (var key in Object(object)) {
+    if (hasOwnProperty.call(object, key) && key != 'constructor') {
+      result.push(key);
+    }
+  }
+  return result;
+}
+
+/**
+ * Copies the values of `source` to `array`.
+ *
+ * @private
+ * @param {Array} source The array to copy values from.
+ * @param {Array} [array=[]] The array to copy values to.
+ * @returns {Array} Returns `array`.
+ */
+function copyArray(source, array) {
+  var index = -1,
+    length = source.length;
+  array || (array = Array(length));
+  while (++index < length) {
+    array[index] = source[index];
+  }
+  return array;
+}
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : undefined;
+}
+
+/**
+ * Gets the `toStringTag` of `value`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+var getTag = baseGetTag;
+
+// Fallback for data views, maps, sets, and weak maps in IE 11,
+// for data views in Edge < 14, and promises in Node.js.
+if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map$1 && getTag(new Map$1()) != mapTag || Promise$1 && getTag(Promise$1.resolve()) != promiseTag || Set$1 && getTag(new Set$1()) != setTag || WeakMap$1 && getTag(new WeakMap$1()) != weakMapTag) {
+  getTag = function (value) {
+    var result = objectToString$2.call(value),
+      Ctor = result == objectTag ? value.constructor : undefined,
+      ctorString = Ctor ? toSource(Ctor) : undefined;
+    if (ctorString) {
+      switch (ctorString) {
+        case dataViewCtorString:
+          return dataViewTag;
+        case mapCtorString:
+          return mapTag;
+        case promiseCtorString:
+          return promiseTag;
+        case setCtorString:
+          return setTag;
+        case weakMapCtorString:
+          return weakMapTag;
+      }
+    }
+    return result;
+  };
+}
+
+/**
+ * Checks if `value` is a valid array-like index.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
+ * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
+ */
+function isIndex(value, length) {
+  length = length == null ? MAX_SAFE_INTEGER : length;
+  return !!length && (typeof value == 'number' || reIsUint.test(value)) && value > -1 && value % 1 == 0 && value < length;
+}
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked(func) {
+  return !!maskSrcKey && maskSrcKey in func;
+}
+
+/**
+ * Checks if `value` is likely a prototype object.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
+ */
+function isPrototype(value) {
+  var Ctor = value && value.constructor,
+    proto = typeof Ctor == 'function' && Ctor.prototype || objectProto$2;
+  return value === proto;
+}
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to process.
+ * @returns {string} Returns the source code.
+ */
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString.call(func);
+    } catch (e) {}
+    try {
+      return func + '';
+    } catch (e) {}
+  }
+  return '';
+}
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+function isArguments(value) {
+  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
+  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') && (!propertyIsEnumerable.call(value, 'callee') || objectToString$2.call(value) == argsTag);
+}
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike(value) {
+  return value != null && isLength(value.length) && !isFunction(value);
+}
+
+/**
+ * This method is like `_.isArrayLike` except that it also checks if `value`
+ * is an object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array-like object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArrayLikeObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLikeObject(document.body.children);
+ * // => true
+ *
+ * _.isArrayLikeObject('abc');
+ * // => false
+ *
+ * _.isArrayLikeObject(_.noop);
+ * // => false
+ */
+function isArrayLikeObject(value) {
+  return isObjectLike$2(value) && isArrayLike(value);
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 8-9 which returns 'object' for typed array and other constructors.
+  var tag = isObject$2(value) ? objectToString$2.call(value) : '';
+  return tag == funcTag || tag == genTag;
+}
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength(value) {
+  return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject$2(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike$2(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, else `false`.
+ * @example
+ *
+ * _.isString('abc');
+ * // => true
+ *
+ * _.isString(1);
+ * // => false
+ */
+function isString(value) {
+  return typeof value == 'string' || !isArray(value) && isObjectLike$2(value) && objectToString$2.call(value) == stringTag;
+}
+
+/**
+ * Converts `value` to an array.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to convert.
+ * @returns {Array} Returns the converted array.
+ * @example
+ *
+ * _.toArray({ 'a': 1, 'b': 2 });
+ * // => [1, 2]
+ *
+ * _.toArray('abc');
+ * // => ['a', 'b', 'c']
+ *
+ * _.toArray(1);
+ * // => []
+ *
+ * _.toArray(null);
+ * // => []
+ */
+function toArray(value) {
+  if (!value) {
+    return [];
+  }
+  if (isArrayLike(value)) {
+    return isString(value) ? stringToArray(value) : copyArray(value);
+  }
+  if (iteratorSymbol && value[iteratorSymbol]) {
+    return iteratorToArray(value[iteratorSymbol]());
+  }
+  var tag = getTag(value),
+    func = tag == mapTag ? mapToArray : tag == setTag ? setToArray : values;
+  return func(value);
+}
+
+/**
+ * Creates an array of the own enumerable property names of `object`.
+ *
+ * **Note:** Non-object values are coerced to objects. See the
+ * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
+ * for more details.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.keys(new Foo);
+ * // => ['a', 'b'] (iteration order is not guaranteed)
+ *
+ * _.keys('hi');
+ * // => ['0', '1']
+ */
+function keys(object) {
+  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
+}
+
+/**
+ * Creates an array of the own enumerable string keyed property values of `object`.
+ *
+ * **Note:** Non-object values are coerced to objects.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property values.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.values(new Foo);
+ * // => [1, 2] (iteration order is not guaranteed)
+ *
+ * _.values('hi');
+ * // => ['h', 'i']
+ */
+function values(object) {
+  return object ? baseValues(object, keys(object)) : [];
+}
+var lodash_toarray = toArray;
+var toArray$1 = /*@__PURE__*/getDefaultExportFromCjs(lodash_toarray);
+
+const Textarea = /*#__PURE__*/React.forwardRef(({
+  validationStatus,
+  disabled,
+  ...props
+}, ref) => {
+  const inputRef = useProvidedOrCreatedRef(ref);
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const getTextareaLength = value => {
+    return toArray$1(value).length;
+  };
+  const [count, setCount] = React.useState(0);
+  const handleChange = e => {
+    setCount(getTextareaLength(e.target.value));
+    props.onChange?.(e);
+  };
+  React.useEffect(() => {
+    if (inputRef.current) {
+      setCount(getTextareaLength(inputRef.current.value));
+    }
+  }, [ref]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextareaWrapper, {
+    disabled: disabled,
+    onClick: focusInput,
+    validationStatus: validationStatus,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(ReactTextareaAutosize__default.default, {
+      ...props,
+      ref: e => {
+        isFunction$1(ref) ? ref(e) : null;
+        inputRef.current = e;
+      },
+      disabled: disabled,
+      minRows: 7,
+      onChange: handleChange
+    }), /*#__PURE__*/jsxRuntimeExports.jsxs(TextareaCount, {
+      children: [commaizeNumber(count), "\uC790"]
+    })]
+  });
+});
+const TextareaWrapper = styled__default.default.div`
+  position: relative;
+  width: ${forcePixelValue('100%')};
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  border-color: ${({
+  theme
+}) => theme.colors['border/input']};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/input']};
+  cursor: text;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral']};
+  textarea::placeholder {
+    color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  }
+  textarea {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    border-radius: inherit;
+    color: inherit;
+    transition: inherit;
+
+    border: 0;
+    background-color: transparent;
+    width: 100%;
+    &:focus {
+      outline: 0;
+    }
+    resize: none;
+
+    padding-top: ${({
+  theme
+}) => forcePixelValue(theme.space['3'])};
+    padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+    padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space['3'])};
+    padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space['4'])};
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: ${forcePixelValue(-1)};
+    right: ${forcePixelValue(-1)};
+    bottom: ${forcePixelValue(-1)};
+    left: ${forcePixelValue(-1)};
+
+    border: ${forcePixelValue(2)} solid transparent;
+    border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+    pointer-events: none;
+  }
+
+  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
+      &:hover:not(:focus-within) {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/hovered']};
+        }
+      }
+    `}
+
+  ${props => props.validationStatus === 'error' && styled.css`
+      &:after {
+        border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+      }
+    `}
+
+  ${props => props.validationStatus !== 'error' && styled.css`
+      &:focus-within {
+        &:after {
+          border-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+        }
+      }
+    `}
+
+  ${props => props.disabled && styled.css`
+      border-color: ${props.theme.colors['border/input']};
+      background-color: ${props.theme.colors['bg/disabled']};
+      color: ${props.theme.colors['text/disabled']};
+
+      textarea::placeholder {
+        color: ${props.theme.colors['text/disabled']};
+      }
+
+      &,
+      textarea {
+        cursor: not-allowed;
+      }
+    `};
+`;
+const TextareaCount = styled__default.default.div`
+  width: 100%;
+
+  padding-right: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+  padding-bottom: ${({
+  theme
+}) => forcePixelValue(theme.space[3])};
+  padding-left: ${({
+  theme
+}) => forcePixelValue(theme.space[4])};
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => forcePixelValue(theme.fontWeights.medium)};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtlest']};
+  text-align: end;
+`;
+
+const FormControlCaption = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    as: 'span',
+    id: id,
+    typography: 'xxs',
+    color: 'text/neutral/subtlest',
+    children: children
+  });
+};
+
+const FormControlErrorMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText$1, {
+    id: id,
+    typography: 'xxs',
+    color: 'text/danger',
+    children: children
+  });
+};
+const errorMessageKeyframe = styled.keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText$1 = styled__default.default(Text)`
+  animation: 170ms ${errorMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
+
+const FormControlLabel = ({
+  children,
+  visuallyHidden,
+  ...props
+}) => {
+  const {
+    id,
+    disabled,
+    required
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(VisuallyHidden, {
+    as: 'label',
+    htmlFor: id,
+    isVisible: !visuallyHidden,
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(LabelWrapper, {
+      ...props,
+      disabled: disabled,
+      children: [children, required ? /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+        as: 'span',
+        "aria-hidden": "true",
+        children: ' *'
+      }) : null]
+    })
+  });
+};
+const VisuallyHidden = styled__default.default.span`
+  ${({
+  isVisible = false
+}) => {
+  if (isVisible) {
+    return sx;
+  }
+  return `
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    `;
+}}
+`;
+const LabelWrapper = styled__default.default(View)`
+  display: block;
+  align-self: flex-start;
+
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+
+  color: ${({
+  theme
+}) => theme.colors['text/neutral/subtle']};
+
+  cursor: ${({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer'};
+
+  ${sx};
+`;
+
+const FormControlSuccessMessage = ({
+  children
+}) => {
+  const {
+    id
+  } = React.useContext(FormControlContext);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(StyledText, {
+    id: id,
+    typography: 'xxs',
+    color: 'text/success',
+    children: children
+  });
+};
+const successMessageKeyframe = styled.keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const StyledText = styled__default.default(Text)`
+  animation: 170ms ${successMessageKeyframe} cubic-bezier(0.44, 0.74, 0.36, 1);
+`;
+
+const FormControlContext = /*#__PURE__*/React.createContext({});
 const FormControl = ({
   children: propChildren,
   id,
@@ -22050,7 +23100,7 @@ const FormControl = ({
       successMessage: FormControlSuccessMessage
     }
   });
-  const inputComponentCandidates = [TextInput$1, Select$1, SearchSelectInput$1, Checkbox$1, ...additionalInputComponentCandidates];
+  const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, ...additionalInputComponentCandidates];
   const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
   const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && InputComponent.type === Checkbox$1;
   return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
@@ -23870,156 +24920,6 @@ var index$1 = Object.assign(Tab, {
   Item: TabItem
 });
 
-const Textarea = /*#__PURE__*/React.forwardRef(({
-  disabled,
-  ...props
-}, ref) => {
-  const inputRef = useProvidedOrCreatedRef(ref);
-  const focusInput = () => {
-    inputRef.current?.focus();
-  };
-  return /*#__PURE__*/jsxRuntimeExports.jsx(TextareaWrapper, {
-    disabled: disabled,
-    onClick: focusInput,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseTextarea, {
-      ref: e => {
-        isFunction(ref) ? ref(e) : null;
-        inputRef.current = e;
-      },
-      disabled: disabled,
-      ...props
-    })
-  });
-});
-const TextareaWrapper = styled__default.default.div`
-  position: relative;
-  width: ${forcePixelValue('100%')};
-  border-width: ${forcePixelValue(1)};
-  border-style: solid;
-  border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-  border-color: ${({
-  theme
-}) => theme.colors['border/input']};
-  background-color: ${({
-  theme
-}) => theme.colors['bg/input']};
-  cursor: text;
-  display: inline-flex;
-  align-items: center;
-
-  padding-top: ${({
-  theme
-}) => forcePixelValue(theme.space['3'])};
-  padding-right: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-  padding-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space['3'])};
-  padding-left: ${({
-  theme
-}) => forcePixelValue(theme.space['4'])};
-
-  font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xs)};
-  font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-  line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-  color: ${({
-  theme
-}) => theme.colors['text/neutral']};
-  input::placeholder {
-    color: ${({
-  theme
-}) => theme.colors['text/neutral/subtlest']};
-  }
-
-  height: 74px;
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${forcePixelValue(-1)};
-    right: ${forcePixelValue(-1)};
-    bottom: ${forcePixelValue(-1)};
-    left: ${forcePixelValue(-1)};
-
-    border: ${forcePixelValue(2)} solid transparent;
-    border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-    pointer-events: none;
-  }
-
-  ${props => props.validationStatus !== 'error' && !props.disabled && styled.css`
-      &:hover:not(:focus-within) {
-        &:after {
-          border-color: ${({
-  theme
-}) => theme.colors['border/hovered']};
-        }
-      }
-    `}
-
-  ${props => props.validationStatus === 'error' && styled.css`
-      &:after {
-        border-color: ${({
-  theme
-}) => theme.colors['border/danger']};
-      }
-    `}
-
-  ${props => props.validationStatus !== 'error' && styled.css`
-      &:focus-within {
-        &:after {
-          border-color: ${({
-  theme
-}) => theme.colors['border/focused']};
-        }
-      }
-    `}
-
-  ${props => props.disabled && styled.css`
-      border-color: ${props.theme.colors['border/input']};
-      background-color: ${props.theme.colors['bg/disabled']};
-      color: ${props.theme.colors['text/disabled']};
-
-      textarea::placeholder {
-        color: ${props.theme.colors['text/disabled']};
-      }
-
-      &,
-      textarea {
-        cursor: not-allowed;
-      }
-    `};
-`;
-const UnstyledTextarea = styled__default.default.textarea`
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border-radius: inherit;
-  color: inherit;
-  transition: inherit;
-
-  border: 0;
-  background-color: transparent;
-  width: 100%;
-  &:focus {
-    outline: 0;
-  }
-`;
-const BaseTextarea = styled__default.default(UnstyledTextarea)`
-  resize: none;
-`;
-
 const theme = {
   breakpoints,
   space,