@atlaskit/textarea 4.3.9 → 4.3.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textarea
 
+## 4.3.11
+
+### Patch Changes
+
+- [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
+
+## 4.3.10
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 4.3.9
 
 ### Patch Changes

package/component-tokens/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/component-tokens.js",
   "module:es2019": "../dist/es2019/component-tokens.js",
   "sideEffects": false,
-  "types": "../dist/types/component-tokens.d.ts"
+  "types": "../dist/types/component-tokens.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/component-tokens.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/component-tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.textColor = exports.subtleHoverBackgroundColor = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
+exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -47,11 +47,11 @@ var defaultBackgroundColorFocus = {
   dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
-var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
+var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
-exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
+exports.subtleBorderColorHover = subtleBorderColorHover;
 var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
   dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")

package/dist/cjs/styles.js

@@ -82,10 +82,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -150,7 +151,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -185,7 +186,7 @@ var getBaseStyles = function getBaseStyles(_ref) {
 exports.getBaseStyles = getBaseStyles;
 
 var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/cjs/text-area.js

@@ -40,7 +40,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.9";
+var packageVersion = "4.3.11";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/cjs/theme.js

@@ -61,7 +61,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -74,6 +74,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -104,6 +109,7 @@ var Theme = (0, _components.createTheme)(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.9",
+	"version": "4.3.11",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -31,9 +31,9 @@ export const defaultBackgroundColorFocus = {
   light: `var(--ds-background-input-pressed, ${N0})`,
   dark: `var(--ds-background-input-pressed, ${DN10})`
 };
-export const subtleHoverBackgroundColor = {
-  light: `var(--ds-background-input-hovered, ${N30})`,
-  dark: `var(--ds-background-input-hovered, ${DN30})`
+export const subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export const placeholderTextColor = {
   light: `var(--ds-text-subtlest, ${N100})`,

package/dist/es2019/styles.js

@@ -62,10 +62,11 @@ const placeholderStyle = placeholderTextColor => ({
   }
 });
 
-const hoverBackgroundStyle = props => {
+const hoverBackgroundAndBorderStyles = props => {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -125,7 +126,8 @@ const staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: `background-color ${transitionDuration} ease-in-out`,
+  transition: `background-color ${transitionDuration} ease-in-out,
+               border-color ${transitionDuration} ease-in-out`,
   wordWrap: 'break-word',
   fontSize,
   borderWidth: borderWidth,
@@ -161,7 +163,7 @@ export const getBaseStyles = ({
 });
 export const themeStyles = props => {
   return { ...bgAndBorderColorStyles(props),
-    ...hoverBackgroundStyle(props),
+    ...hoverBackgroundAndBorderStyles(props),
     ...placeholderStyle(props.placeholderTextColor),
     color: props.textColor,
     '&:disabled': {

package/dist/es2019/text-area.js

@@ -8,7 +8,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.3.9";
+const packageVersion = "4.3.11";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/es2019/theme.js

@@ -46,7 +46,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 const borderColor = {
@@ -59,6 +59,11 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+const borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export const Theme = createTheme(({
 }) => ({
   borderColor: borderColor[appearance][mode],
   borderColorFocus: borderColorFocus[appearance][mode],
+  borderColorHover: borderColorHover[appearance][mode],
   backgroundColorHover: backgroundColorHover[appearance][mode],
   backgroundColorFocus: backgroundColorFocus[appearance][mode],
   backgroundColor: backgroundColor[appearance][mode],

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.9",
+	"version": "4.3.11",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -31,9 +31,9 @@ export var defaultBackgroundColorFocus = {
   light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
   dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 };
-export var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
+export var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(N100, ")"),

package/dist/esm/styles.js

@@ -72,10 +72,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -140,7 +141,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -171,7 +172,7 @@ export var getBaseStyles = function getBaseStyles(_ref) {
   });
 };
 export var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/esm/text-area.js

@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.9";
+var packageVersion = "4.3.11";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/esm/theme.js

@@ -46,7 +46,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -59,6 +59,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export var Theme = createTheme(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.3.9",
+	"version": "4.3.11",
 	"sideEffects": false
 }

package/dist/types/component-tokens.d.ts

@@ -30,9 +30,9 @@ export declare const defaultBackgroundColorFocus: {
     light: "var(--ds-background-input-pressed)";
     dark: "var(--ds-background-input-pressed)";
 };
-export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

package/dist/types/text-area.d.ts

@@ -103,5 +103,5 @@ export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HT
  * - [Code](https://atlassian.design/components/textarea/code)
  * - [Usage](https://atlassian.design/components/textarea/usage)
  */
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "rows" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "theme" | "testId" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
 export default TextArea;

package/dist/types/theme.d.ts

@@ -16,6 +16,7 @@ export declare type ThemeProps = {
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
+    borderColorHover: string;
     backgroundColor: string;
     backgroundColorFocus: string;
     backgroundColorHover: string;

package/dist/types-ts4.0/component-tokens.d.ts

@@ -0,0 +1,52 @@
+export declare const disabledBackground: {
+    light: "var(--ds-background-disabled)";
+    dark: "var(--ds-background-disabled)";
+};
+export declare const disabledBorder: {
+    light: "var(--ds-border-disabled)";
+    dark: "var(--ds-border-disabled)";
+};
+export declare const invalidBorderColor: {
+    light: "var(--ds-border-danger)";
+    dark: "var(--ds-border-danger)";
+};
+export declare const defaultBorderColor: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
+};
+export declare const defaultBorderColorFocus: {
+    light: "var(--ds-border-focused)";
+    dark: "var(--ds-border-focused)";
+};
+export declare const defaultBackgroundColor: {
+    light: "var(--ds-background-input)";
+    dark: "var(--ds-background-input)";
+};
+export declare const defaultBackgroundColorHover: {
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
+};
+export declare const defaultBackgroundColorFocus: {
+    light: "var(--ds-background-input-pressed)";
+    dark: "var(--ds-background-input-pressed)";
+};
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
+};
+export declare const placeholderTextColor: {
+    light: "var(--ds-text-subtlest)";
+    dark: "var(--ds-text-subtlest)";
+};
+export declare const textColor: {
+    light: "var(--ds-text)";
+    dark: "var(--ds-text)";
+};
+export declare const disabledTextColor: {
+    light: "var(--ds-text-disabled)";
+    dark: "var(--ds-text-disabled)";
+};
+export declare const transparent: {
+    light: string;
+    dark: string;
+};

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './text-area';
+export { Theme, themeTokens } from './theme';
+export type { ThemeAppearance, ThemeProps, ThemeTokens } from './theme';

package/dist/types-ts4.0/styles.d.ts

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { CSSObject } from '@emotion/core';
+import { ThemeTokens } from './theme';
+export interface StyleProps {
+    minimumRows: number | undefined;
+    resize: string | undefined;
+    appearance: string | undefined;
+    isMonospaced: boolean | undefined;
+    maxHeight: string;
+}
+export declare const borderWidth = 2;
+export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => CSSObject;
+export declare const themeStyles: (props: ThemeTokens) => CSSObject;

package/dist/types-ts4.0/text-area.d.ts

@@ -0,0 +1,107 @@
+/** @jsx jsx */
+import React from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export interface OwnProps extends WithAnalyticsEventsProps {
+    /**
+     * controls the appearance of the field.
+     * subtle shows styling on hover.
+     * none prevents all field styling.
+     */
+    appearance?: 'standard' | 'subtle' | 'none';
+    /**
+     * Set whether the fields should expand to fill available horizontal space.
+     */
+    isCompact?: boolean;
+    /**
+     * Sets the field as uneditable, with a changed hover state.
+     */
+    isDisabled?: boolean;
+    /**
+     * If true, prevents the value of the input from being edited.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Set required for form that the field is part of.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets styling to indicate that the input is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * The minimum number of rows of text to display
+     */
+    minimumRows?: number;
+    /**
+     * The maxheight of the textarea
+     */
+    maxHeight?: string;
+    /**
+     * The value of the text-area.
+     */
+    value?: string;
+    /**
+     * The default value of the textarea
+     */
+    defaultValue?: string;
+    /**
+     * Name of the input form control
+     */
+    name?: string;
+    /**
+     * The placeholder within the textarea
+     */
+    placeholder?: string;
+    /**
+     * Handler to be called when the input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input changes.
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Handler to be called when the input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+    /**
+     * Sets content text value to monospace
+     */
+    isMonospaced?: boolean;
+    /**
+     * Enables the resizing of the textarea:
+     * auto: both directions.
+     * horizontal: only along the x axis.
+     * vertical: only along the y axis.
+     * smart (default): vertically grows and shrinks the textarea automatically to wrap your input text.
+     * none: explicitly disallow resizing on the textarea.
+     */
+    resize?: 'auto' | 'vertical' | 'horizontal' | 'smart' | 'none';
+    /**
+     * Enables native spell check on the `textarea` element.
+     */
+    spellCheck?: boolean;
+    /**
+     * The theme function TextArea consumes to derive theming constants for use in styling its components
+     */
+    theme?: any;
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export declare type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
+/**
+ * __Text area__
+ *
+ * A text area lets users enter long form text which spans over multiple lines.
+ *
+ * - [Examples](https://atlassian.design/components/textarea/examples)
+ * - [Code](https://atlassian.design/components/textarea/code)
+ * - [Usage](https://atlassian.design/components/textarea/usage)
+ */
+declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextAreaProps, "appearance" | "color" | "maxHeight" | "resize" | "hidden" | "style" | "wrap" | "minimumRows" | "isMonospaced" | "isCompact" | "isDisabled" | "isReadOnly" | "isRequired" | "isInvalid" | "value" | "defaultValue" | "name" | "placeholder" | "onBlur" | "onChange" | "onFocus" | "spellCheck" | "theme" | "testId" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "form" | "maxLength" | "minLength" | "readOnly" | "rows" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "slot" | "tabIndex" | "title" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "createAnalyticsEvent"> & React.RefAttributes<HTMLTextAreaElement>>>;
+export default TextArea;

package/dist/types-ts4.0/theme.d.ts

@@ -0,0 +1,174 @@
+/// <reference types="react" />
+export declare type ThemeAppearance = 'standard' | 'subtle' | 'none';
+export declare type ThemeProps = {
+    appearance: ThemeAppearance;
+    /**
+     * @deprecated
+     * Mode is deprecated and will be deleted in the future.
+     */
+    mode: 'dark' | 'light';
+};
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+export declare type ThemeTokens = {
+    borderColor: string;
+    borderColorFocus: string;
+    borderColorHover: string;
+    backgroundColor: string;
+    backgroundColorFocus: string;
+    backgroundColorHover: string;
+    disabledRules: {
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+        borderColor: string;
+        borderColorFocus: string;
+        textColor: string;
+    };
+    invalidRules: {
+        borderColor: string;
+        borderColorFocus: string;
+        backgroundColor: string;
+        backgroundColorFocus: string;
+        backgroundColorHover: string;
+    };
+    textColor: string;
+    placeholderTextColor: string;
+};
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+export declare const themeTokens: {
+    borderColor: {
+        standard: {
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    borderColorFocus: {
+        standard: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        subtle: {
+            light: "var(--ds-border-focused)";
+            dark: "var(--ds-border-focused)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColor: {
+        standard: {
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
+        };
+        subtle: {
+            light: string;
+            dark: string;
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorFocus: {
+        standard: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    backgroundColorHover: {
+        standard: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        subtle: {
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
+        };
+        none: {
+            light: string;
+            dark: string;
+        };
+    };
+    disabledRules: {
+        light: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorFocus: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
+            borderColorFocus: "var(--ds-border-focused)";
+            textColor: "var(--ds-text-disabled)";
+        };
+        dark: {
+            backgroundColor: "var(--ds-background-disabled)";
+            backgroundColorFocus: "var(--ds-background-disabled)";
+            backgroundColorHover: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
+            borderColorFocus: "var(--ds-border-focused)";
+            textColor: "var(--ds-text-disabled)";
+        };
+    };
+    invalidRules: {
+        light: {
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+        };
+        dark: {
+            borderColor: "var(--ds-border-danger)";
+            borderColorFocus: "var(--ds-border-focused)";
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
+        };
+    };
+    textColor: {
+        light: "var(--ds-text)";
+        dark: "var(--ds-text)";
+    };
+    placeholderTextColor: {
+        light: "var(--ds-text-subtlest)";
+        dark: "var(--ds-text-subtlest)";
+    };
+};
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+export declare const Theme: {
+    Consumer: import("react").ComponentType<{
+        children: (tokens: ThemeTokens) => import("react").ReactNode;
+    } & ThemeProps>;
+    Provider: import("react").ComponentType<{
+        children?: import("react").ReactNode;
+        value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
+    }>;
+    useTheme: (props: ThemeProps) => ThemeTokens;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.9",
+  "version": "4.3.11",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/textarea/",
@@ -32,7 +39,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
@@ -45,17 +52,17 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/form": "^8.5.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

package/styles/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/styles.js",
   "module:es2019": "../dist/es2019/styles.js",
   "sideEffects": false,
-  "types": "../dist/types/styles.d.ts"
+  "types": "../dist/types/styles.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/styles.d.ts"
+      ]
+    }
+  }
 }

package/text-area/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/text-area.js",
   "module:es2019": "../dist/es2019/text-area.js",
   "sideEffects": false,
-  "types": "../dist/types/text-area.d.ts"
+  "types": "../dist/types/text-area.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/text-area.d.ts"
+      ]
+    }
+  }
 }

package/theme/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/theme.js",
   "module:es2019": "../dist/es2019/theme.js",
   "sideEffects": false,
-  "types": "../dist/types/theme.d.ts"
+  "types": "../dist/types/theme.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/theme.d.ts"
+      ]
+    }
+  }
 }