@atlaskit/textarea - npm Package Compare versions

Comparing version 5.8.2 to 6.0.0

CHANGELOG.md

 # @atlaskit/textarea
 
+## 6.0.0
+
+### Major Changes
+
+- [#95577](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95577)
+  [`ad478a9dbc399`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad478a9dbc399) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/textarea`, you will need to ensure that your bundler is configured
+  to handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+  Removed styles.tsx and component-tokens.tsx and their entry points from package.json
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.8.2
@@ -4,0 +26,0 @@

dist/cjs/text-area.js

@@ -0,1 +1,2 @@
+/* text-area.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
@@ -9,2 +10,4 @@
 exports.default = void 0;
+require("./text-area.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -15,11 +18,6 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _styles = require("./styles");
-var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -30,3 +28,3 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.8.2";
+var packageVersion = "6.0.0";
 var analyticsParams = {
@@ -37,6 +35,30 @@ componentName: 'textArea',
 };
+var lineHeightBase = 20;
+var lineHeightCompact = 16;
+var compactVerticalPadding = 2;
+var verticalPadding = 6;
+var transitionDuration = '0.2s';
+var borderWidth = 2;
+var baseStyles = null;
+var appearanceStyles = {
+  standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
+  subtle: "_1dqonqa1 _kp821j28 _1ltx18uv _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
+  none: "_1dqoglyw _kp821j28 _1ltx18uv _19wt1j28 _12ym18uv _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr18uv _7ehi3sij"
+};
+var fontStyles = {
+  default: "_ect41sbm",
+  monospace: "_ect41odn _1tn21oud _14mdudxr",
+  large: "_11c81doa _1tn21oud"
+};
+var resizeStyles = {
+  horizontal: "_14zg1e08",
+  vertical: "_14zg1e54",
+  auto: "_14zg1hrf",
+  smart: "_14zgglyw",
+  none: "_14zgglyw"
+};
 var setSmartHeight = function setSmartHeight(el) {
   // Always reset height to auto before calculating new height
   el.style.height = 'auto';
-  var borderHeight = _styles.borderWidth;
+  var borderHeight = borderWidth;
   var paddingBoxHeight = el.scrollHeight;
@@ -73,3 +95,7 @@ var borderBoxHeight = paddingBoxHeight + borderHeight * 2;
     value = props.value,
+    style = props.style,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var borderHeight = (0, _react.useMemo)(function () {
+    return appearance === 'none' ? 2 : 1;
+  }, [appearance]);
   (0, _react.useEffect)(function () {
@@ -115,15 +141,4 @@ var el = ourRef.current;
   };
-  var baseStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getBaseStyles)({
-      minimumRows: minimumRows,
-      resize: resize,
-      appearance: appearance,
-      isMonospaced: isMonospaced,
-      maxHeight: maxHeight
-    });
-  }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  var textAreaStyles = (0, _react2.css)([baseStyles, (0, _styles.dynamicStyles)(appearance)]);
-  return (0, _react2.jsx)("textarea", (0, _extends2.default)({}, controlProps, {
+  var compactMinHeightStyles = null;
+  return /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, controlProps, {
     value: value,
@@ -138,8 +153,22 @@ disabled: isDisabled,
     rows: minimumRows
-    // TODO refactor to follow emotion styling rules
-    // see: https://product-fabric.atlassian.net/browse/DSP-6060
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: textAreaStyles
-  }, rest));
+  }, rest, {
+    className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1sit _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", appearanceStyles[appearance], (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      maxHeight: maxHeight,
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
+      "--_19uzta9": (0, _runtime.ix)("background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out")),
+      "--_dnrmjm": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N70, ")")),
+      "--_t0vtv2": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N0, ")")),
+      "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
+      "--_1n75f5r": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
+      "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
+      "--_1u9fbts": (0, _runtime.ix)("var(--ds-border-danger, ".concat(_colors.R400, ")")),
+      "--_1l1juom": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))),
+      "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
+      "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
+      "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+      "--_dqsusn": (0, _runtime.ix)("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
+      "--_n9nqvh": (0, _runtime.ix)("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
+    })
+  }));
 });
@@ -157,3 +186,3 @@
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
-  return (0, _react2.jsx)(InnerTextArea, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(InnerTextArea, (0, _extends2.default)({
     ref: ref
@@ -160,0 +189,0 @@ }, props));

dist/es2019/text-area.js

@@ -0,14 +1,11 @@
+/* text-area.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./text-area.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "5.8.2";
+const packageVersion = "6.0.0";
 const analyticsParams = {
@@ -19,2 +16,26 @@ componentName: 'textArea',
 };
+const lineHeightBase = 20;
+const lineHeightCompact = 16;
+const compactVerticalPadding = 2;
+const verticalPadding = 6;
+const transitionDuration = '0.2s';
+const borderWidth = 2;
+const baseStyles = null;
+const appearanceStyles = {
+  standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
+  subtle: "_1dqonqa1 _kp821j28 _1ltx18uv _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
+  none: "_1dqoglyw _kp821j28 _1ltx18uv _19wt1j28 _12ym18uv _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr18uv _7ehi3sij"
+};
+const fontStyles = {
+  default: "_ect41sbm",
+  monospace: "_ect41odn _1tn21oud _14mdudxr",
+  large: "_11c81doa _1tn21oud"
+};
+const resizeStyles = {
+  horizontal: "_14zg1e08",
+  vertical: "_14zg1e54",
+  auto: "_14zg1hrf",
+  smart: "_14zgglyw",
+  none: "_14zgglyw"
+};
 const setSmartHeight = el => {
@@ -46,4 +67,6 @@ // Always reset height to auto before calculating new height
     value,
+    style,
     ...rest
   } = props;
+  const borderHeight = useMemo(() => appearance === 'none' ? 2 : 1, [appearance]);
   useEffect(() => {
@@ -91,13 +114,4 @@ const el = ourRef.current;
   };
-  const baseStyles = useMemo(() => getBaseStyles({
-    minimumRows,
-    resize,
-    appearance,
-    isMonospaced,
-    maxHeight
-  }), [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  const textAreaStyles = css([baseStyles, dynamicStyles(appearance)]);
-  return jsx("textarea", _extends({}, controlProps, {
+  const compactMinHeightStyles = null;
+  return /*#__PURE__*/React.createElement("textarea", _extends({}, controlProps, {
     value: value,
@@ -112,8 +126,12 @@ disabled: isDisabled,
     rows: minimumRows
-    // TODO refactor to follow emotion styling rules
-    // see: https://product-fabric.atlassian.net/browse/DSP-6060
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: textAreaStyles
-  }, rest));
+  }, rest, {
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1sit _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazj3m3 _slp31hna _153g78r2 _usy4mag2 _1a2sr6rt _vbqb9jg2 _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra78r2 _ibjd10ko _6zpvr6rt _19k01y1w _1idr1wmz _1lep9jg2 _nmhq1fiz _1n388sxn _1luh194a _ndzbr01l _1vj01cu8", appearanceStyles[appearance], fg('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ...style,
+      maxHeight,
+      "--_6ny3x7": ix(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px"),
+      "--_eorxnz": ix(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px")
+    }
+  }));
 });
@@ -131,3 +149,3 @@
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  return jsx(InnerTextArea, _extends({
+  return /*#__PURE__*/React.createElement(InnerTextArea, _extends({
     ref: ref
@@ -134,0 +152,0 @@ }, props));

dist/esm/text-area.js

@@ -0,1 +1,2 @@
+/* text-area.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
@@ -5,17 +6,13 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
+var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
+import "./text-area.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.8.2";
+var packageVersion = "6.0.0";
 var analyticsParams = {
@@ -26,2 +23,26 @@ componentName: 'textArea',
 };
+var lineHeightBase = 20;
+var lineHeightCompact = 16;
+var compactVerticalPadding = 2;
+var verticalPadding = 6;
+var transitionDuration = '0.2s';
+var borderWidth = 2;
+var baseStyles = null;
+var appearanceStyles = {
+  standard: "_1dqonqa1 _kp821elr _1ltx1j9a _1bqs13gt _z1pvsyzs _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _17km1v6z _wg601v6z _858u1p6i _jomrr01l _7ehiq049 _186j1p6i _qu18syzs",
+  subtle: "_1dqonqa1 _kp821j28 _1ltx18uv _19wt1elr _12ym1d5g _19qkv77o _1dbiv77o _1etu1v6z _zedr1v6z _1itd12x7 _1a4912x7 _wg601v6z _17km1v6z _858u1p6i _jomrr01l _7ehiq049",
+  none: "_1dqoglyw _kp821j28 _1ltx18uv _19wt1j28 _12ym18uv _19qkv77o _zedr12x7 _1dbiv77o _1etu12x7 _1itd12x7 _wg6012x7 _1a4912x7 _17km12x7 _858u1j28 _jomr18uv _7ehi3sij"
+};
+var fontStyles = {
+  default: "_ect41sbm",
+  monospace: "_ect41odn _1tn21oud _14mdudxr",
+  large: "_11c81doa _1tn21oud"
+};
+var resizeStyles = {
+  horizontal: "_14zg1e08",
+  vertical: "_14zg1e54",
+  auto: "_14zg1hrf",
+  smart: "_14zgglyw",
+  none: "_14zgglyw"
+};
 var setSmartHeight = function setSmartHeight(el) {
@@ -62,3 +83,7 @@ // Always reset height to auto before calculating new height
     value = props.value,
+    style = props.style,
     rest = _objectWithoutProperties(props, _excluded);
+  var borderHeight = useMemo(function () {
+    return appearance === 'none' ? 2 : 1;
+  }, [appearance]);
   useEffect(function () {
@@ -104,15 +129,4 @@ var el = ourRef.current;
   };
-  var baseStyles = useMemo(function () {
-    return getBaseStyles({
-      minimumRows: minimumRows,
-      resize: resize,
-      appearance: appearance,
-      isMonospaced: isMonospaced,
-      maxHeight: maxHeight
-    });
-  }, [minimumRows, resize, appearance, isMonospaced, maxHeight]);
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-array-arguments, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  var textAreaStyles = css([baseStyles, dynamicStyles(appearance)]);
-  return jsx("textarea", _extends({}, controlProps, {
+  var compactMinHeightStyles = null;
+  return /*#__PURE__*/React.createElement("textarea", _extends({}, controlProps, {
     value: value,
@@ -127,8 +141,22 @@ disabled: isDisabled,
     rows: minimumRows
-    // TODO refactor to follow emotion styling rules
-    // see: https://product-fabric.atlassian.net/browse/DSP-6060
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: textAreaStyles
-  }, rest));
+  }, rest, {
+    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rko1sit _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", appearanceStyles[appearance], fg('platform_design_system_team_safari_input_fix') && fontStyles['large'], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      maxHeight: maxHeight,
+      "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
+      "--_19uzta9": ix("background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out")),
+      "--_dnrmjm": ix("var(--ds-text-disabled, ".concat(N70, ")")),
+      "--_t0vtv2": ix("var(--ds-background-input-pressed, ".concat(N0, ")")),
+      "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")")),
+      "--_1n75f5r": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))),
+      "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
+      "--_1u9fbts": ix("var(--ds-border-danger, ".concat(R400, ")")),
+      "--_1l1juom": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))),
+      "--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
+      "--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
+      "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
+      "--_dqsusn": ix("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
+      "--_n9nqvh": ix("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
+    })
+  }));
 });
@@ -146,3 +174,3 @@
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
-  return jsx(InnerTextArea, _extends({
+  return /*#__PURE__*/React.createElement(InnerTextArea, _extends({
     ref: ref
@@ -149,0 +177,0 @@ }, props));

package.json

 {
 	"name": "@atlaskit/textarea",
-	"version": "5.8.2",
+	"version": "6.0.0",
 	"description": "A text area lets users enter long form text which spans over multiple lines.",
@@ -38,4 +38,2 @@ "publishConfig": {
 		".": "./src/index.tsx",
-		"./component-tokens": "./src/component-tokens.tsx",
-		"./styles": "./src/styles.tsx",
 		"./text-area": "./src/text-area.tsx",
@@ -47,7 +45,7 @@ "./types": "./src/types.tsx"
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.4.0",
+		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
@@ -54,0 +52,0 @@ "peerDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

104679

decreased by-24.01%

Number of package files

28

decreased by-24.32%

Lines of code

1256

decreased by-34.1%

Dependency changes

• + Added@compiled/react@^0.18.1

• + Added@atlaskit/css@0.9.0(transitive)

• + Added@atlaskit/primitives@13.6.0(transitive)

• - Removed@emotion/react@^11.7.1

• - Removed@atlaskit/css@0.8.0(transitive)

• - Removed@atlaskit/primitives@13.5.1(transitive)

• Updated@atlaskit/primitives@^13.5.0