@atlaskit/textarea 4.3.5 → 4.3.8

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/textarea
 
+## 4.3.8
+
+### Patch Changes
+
+- [`e4abd2c2888`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e4abd2c2888) - Update token used for background color of subtle text area on hover
+- [`926f9b57c59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/926f9b57c59) - Internal code change turning on new linting rules.
+- [`fe575d49d66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fe575d49d66) - Updated styles to use new input design tokens
+
+## 4.3.7
+
+### Patch Changes
+
+- [`45ebe7af434`](https://bitbucket.org/atlassian/atlassian-frontend/commits/45ebe7af434) - Moved to using declarative entrypoints internally. Public API is unchanged.
+
+## 4.3.6
+
+### Patch Changes
+
+- [`f63824e8227`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f63824e8227) - [ux] Updated input tokens within `@atlaskit/textarea`.
+
 ## 4.3.5
 
 ### Patch Changes

package/codemods/{4.0.0-lite-mode.ts → 4.0.0-lite-mode.tsx}

@@ -1,4 +1,4 @@
-import { renameForwardedRefToRef } from './migrates/rename-forwardedRef-to-ref';
+import { renameForwardedRefToRef } from './migrates/rename-forwarded-ref-to-ref';
 import { createTransformer } from './utils';
 
 const transformer = createTransformer('@atlaskit/textarea', [

package/codemods/__tests__/{rename-forwardedRef-to-ref.ts → rename-forwarded-ref-to-ref.tsx}

@@ -1,6 +1,6 @@
 jest.autoMockOff();
 
-import { renameForwardedRefToRef } from '../migrates/rename-forwardedRef-to-ref';
+import { renameForwardedRefToRef } from '../migrates/rename-forwarded-ref-to-ref';
 import { createTransformer } from '../utils';
 
 const transformer = createTransformer('@atlaskit/textarea', [

package/dist/cjs/component-tokens.js

@@ -13,8 +13,8 @@ var disabledBackground = {
 };
 exports.disabledBackground = disabledBackground;
 var disabledBorder = {
-  light: "var(--ds-background-disabled, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-background-disabled, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-disabled, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-disabled, ".concat(_colors.DN40, ")")
 };
 exports.disabledBorder = disabledBorder;
 var invalidBorderColor = {
@@ -23,8 +23,8 @@ var invalidBorderColor = {
 };
 exports.invalidBorderColor = invalidBorderColor;
 var defaultBorderColor = {
-  light: "var(--ds-border, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-border, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+  dark: "var(--ds-border-input, ".concat(_colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {
@@ -33,24 +33,23 @@ var defaultBorderColorFocus = {
 };
 exports.defaultBorderColorFocus = defaultBorderColorFocus;
 var defaultBackgroundColor = {
-  light: "var(--ds-background-neutral, ".concat(_colors.N10, ")"),
-  dark: "var(--ds-background-neutral, ".concat(_colors.DN10, ")")
+  light: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+  dark: "var(--ds-background-input, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBackgroundColorFocus = {
-  light: "var(--ds-surface, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+  light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
+};
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
 };
 exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
 var placeholderTextColor = {

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.5";
+var packageVersion = "4.3.8";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -158,6 +158,16 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __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)
+ */
+
 var TextArea = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function TextArea(props, ref) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/cjs/theme.js

@@ -74,6 +74,12 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 var themeTokens = {
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
@@ -85,6 +91,12 @@ var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 exports.themeTokens = themeTokens;
 var Theme = (0, _components.createTheme)(function (_ref) {
   var appearance = _ref.appearance,

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -4,37 +4,36 @@ export const disabledBackground = {
   dark: `var(--ds-background-disabled, ${DN20})`
 };
 export const disabledBorder = {
-  light: `var(--ds-background-disabled, ${N40})`,
-  dark: `var(--ds-background-disabled, ${DN40})`
+  light: `var(--ds-border-disabled, ${N40})`,
+  dark: `var(--ds-border-disabled, ${DN40})`
 };
 export const invalidBorderColor = {
   light: `var(--ds-border-danger, ${R400})`,
   dark: `var(--ds-border-danger, ${R400})`
 };
 export const defaultBorderColor = {
-  light: `var(--ds-border, ${N40})`,
-  dark: `var(--ds-border, ${DN40})`
+  light: `var(--ds-border-input, ${N40})`,
+  dark: `var(--ds-border-input, ${DN40})`
 };
 export const defaultBorderColorFocus = {
   light: `var(--ds-border-focused, ${B100})`,
   dark: `var(--ds-border-focused, ${B75})`
 };
 export const defaultBackgroundColor = {
-  light: `var(--ds-background-neutral, ${N10})`,
-  dark: `var(--ds-background-neutral, ${DN10})`
+  light: `var(--ds-background-input, ${N10})`,
+  dark: `var(--ds-background-input, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: `var(--ds-surface, ${N30})`,
-  dark: `var(--ds-surface, ${DN30})`
+  light: `var(--ds-background-input-hovered, ${N30})`,
+  dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const defaultBackgroundColorFocus = {
-  light: `var(--ds-surface, ${N0})`,
-  dark: `var(--ds-surface, ${DN10})`
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+  light: `var(--ds-background-input-pressed, ${N0})`,
+  dark: `var(--ds-background-input-pressed, ${DN10})`
+};
 export const subtleHoverBackgroundColor = {
-  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
-  dark: `var(--ds-background-neutral-subtle-hovered, ${DN30})`
+  light: `var(--ds-background-input-hovered, ${N30})`,
+  dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const placeholderTextColor = {
   light: `var(--ds-text-subtlest, ${N100})`,

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.5";
+const packageVersion = "4.3.8";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,
@@ -118,6 +118,16 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __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)
+ */
+
 const TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

package/dist/es2019/theme.js

@@ -59,6 +59,12 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export const themeTokens = {
   borderColor,
   borderColorFocus,
@@ -70,6 +76,12 @@ export const themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 export const Theme = createTheme(({
   appearance,
   mode

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -4,37 +4,36 @@ export var disabledBackground = {
   dark: "var(--ds-background-disabled, ".concat(DN20, ")")
 };
 export var disabledBorder = {
-  light: "var(--ds-background-disabled, ".concat(N40, ")"),
-  dark: "var(--ds-background-disabled, ".concat(DN40, ")")
+  light: "var(--ds-border-disabled, ".concat(N40, ")"),
+  dark: "var(--ds-border-disabled, ".concat(DN40, ")")
 };
 export var invalidBorderColor = {
   light: "var(--ds-border-danger, ".concat(R400, ")"),
   dark: "var(--ds-border-danger, ".concat(R400, ")")
 };
 export var defaultBorderColor = {
-  light: "var(--ds-border, ".concat(N40, ")"),
-  dark: "var(--ds-border, ".concat(DN40, ")")
+  light: "var(--ds-border-input, ".concat(N40, ")"),
+  dark: "var(--ds-border-input, ".concat(DN40, ")")
 };
 export var defaultBorderColorFocus = {
   light: "var(--ds-border-focused, ".concat(B100, ")"),
   dark: "var(--ds-border-focused, ".concat(B75, ")")
 };
 export var defaultBackgroundColor = {
-  light: "var(--ds-background-neutral, ".concat(N10, ")"),
-  dark: "var(--ds-background-neutral, ".concat(DN10, ")")
+  light: "var(--ds-background-input, ".concat(N10, ")"),
+  dark: "var(--ds-background-input, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(N30, ")"),
-  dark: "var(--ds-surface, ".concat(DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: "var(--ds-surface, ".concat(N0, ")"),
-  dark: "var(--ds-surface, ".concat(DN10, ")")
-}; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
-
+  light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
+};
 export var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(N100, ")"),

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.5";
+var packageVersion = "4.3.8";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,
@@ -136,6 +136,16 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
     css: textAreaStyles
   }, rest));
 });
+/**
+ * __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)
+ */
+
 var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function TextArea(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref) {
     var mode = _ref.mode;

package/dist/esm/theme.js

@@ -59,6 +59,12 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
 export var themeTokens = {
   borderColor: borderColor,
   borderColorFocus: borderColorFocus,
@@ -70,6 +76,12 @@ export var themeTokens = {
   textColor: componentTokens.textColor,
   placeholderTextColor: componentTokens.placeholderTextColor
 };
+/**
+ * @deprecated
+ * Component-level theming is deprecated in the design system.
+ * Components should respect the global theme.
+ */
+
 export var Theme = createTheme(function (_ref) {
   var appearance = _ref.appearance,
       mode = _ref.mode;

package/dist/esm/version.json

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

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

@@ -3,36 +3,36 @@ export declare const disabledBackground: {
     dark: "var(--ds-background-disabled)";
 };
 export declare const disabledBorder: {
-    light: "var(--ds-background-disabled)";
-    dark: "var(--ds-background-disabled)";
+    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)";
-    dark: "var(--ds-border)";
+    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-neutral)";
-    dark: "var(--ds-background-neutral)";
+    light: "var(--ds-background-input)";
+    dark: "var(--ds-background-input)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-pressed)";
+    dark: "var(--ds-background-input-pressed)";
 };
 export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-neutral-subtle-hovered)";
-    dark: "var(--ds-background-neutral-subtle-hovered)";
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

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

@@ -8,35 +8,65 @@ export interface OwnProps extends WithAnalyticsEventsProps {
      * none prevents all field styling.
      */
     appearance?: 'standard' | 'subtle' | 'none';
-    /** Set whether the fields should expand to fill available horizontal space. */
+    /**
+     * Set whether the fields should expand to fill available horizontal space.
+     */
     isCompact?: boolean;
-    /** Sets the field as uneditable, with a changed hover state. */
+    /**
+     * Sets the field as uneditable, with a changed hover state.
+     */
     isDisabled?: boolean;
-    /** If true, prevents the value of the input from being edited. */
+    /**
+     * If true, prevents the value of the input from being edited.
+     */
     isReadOnly?: boolean;
-    /** Set required for form that the field is part of. */
+    /**
+     * Set required for form that the field is part of.
+     */
     isRequired?: boolean;
-    /** Sets styling to indicate that the input is invalid. */
+    /**
+     * Sets styling to indicate that the input is invalid.
+     */
     isInvalid?: boolean;
-    /** The minimum number of rows of text to display */
+    /**
+     * The minimum number of rows of text to display
+     */
     minimumRows?: number;
-    /** The maxheight of the textarea */
+    /**
+     * The maxheight of the textarea
+     */
     maxHeight?: string;
-    /** The value of the text-area. */
+    /**
+     * The value of the text-area.
+     */
     value?: string;
-    /** The default value of the textarea */
+    /**
+     * The default value of the textarea
+     */
     defaultValue?: string;
-    /** Name of the input form control */
+    /**
+     * Name of the input form control
+     */
     name?: string;
-    /** The placeholder within the textarea */
+    /**
+     * The placeholder within the textarea
+     */
     placeholder?: string;
-    /** Handler to be called when the input is blurred */
+    /**
+     * Handler to be called when the input is blurred
+     */
     onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /** Handler to be called when the input changes. */
+    /**
+     * Handler to be called when the input changes.
+     */
     onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-    /** Handler to be called when the input is focused */
+    /**
+     * Handler to be called when the input is focused
+     */
     onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /** Sets content text value to monospace */
+    /**
+     * Sets content text value to monospace
+     */
     isMonospaced?: boolean;
     /**
      * Enables the resizing of the textarea:
@@ -58,10 +88,20 @@ export interface OwnProps extends WithAnalyticsEventsProps {
     /**
      * 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 */
+     * serving as a hook for automated tests
+     */
     testId?: string;
 }
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
-export declare type Props = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'required' | 'readonly'>, OwnProps>;
-declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<Props, "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>>>;
+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" | "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>>>;
 export default TextArea;

package/dist/types/theme.d.ts

@@ -2,8 +2,17 @@
 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;
@@ -28,11 +37,16 @@ export declare type ThemeTokens = {
     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)";
-            dark: "var(--ds-border)";
+            light: "var(--ds-border-input)";
+            dark: "var(--ds-border-input)";
         };
         subtle: {
             light: string;
@@ -59,8 +73,8 @@ export declare const themeTokens: {
     };
     backgroundColor: {
         standard: {
-            light: "var(--ds-background-neutral)";
-            dark: "var(--ds-background-neutral)";
+            light: "var(--ds-background-input)";
+            dark: "var(--ds-background-input)";
         };
         subtle: {
             light: string;
@@ -73,12 +87,12 @@ export declare const themeTokens: {
     };
     backgroundColorFocus: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         subtle: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         none: {
             light: string;
@@ -87,12 +101,12 @@ export declare const themeTokens: {
     };
     backgroundColorHover: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
         };
         subtle: {
-            light: "var(--ds-background-neutral-subtle-hovered)";
-            dark: "var(--ds-background-neutral-subtle-hovered)";
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
         };
         none: {
             light: string;
@@ -104,7 +118,7 @@ export declare const themeTokens: {
             backgroundColor: "var(--ds-background-disabled)";
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
             borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
@@ -112,7 +126,7 @@ export declare const themeTokens: {
             backgroundColor: "var(--ds-background-disabled)";
             backgroundColorFocus: "var(--ds-background-disabled)";
             backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
+            borderColor: "var(--ds-border-disabled)";
             borderColorFocus: "var(--ds-border-focused)";
             textColor: "var(--ds-text-disabled)";
         };
@@ -121,16 +135,16 @@ export declare const themeTokens: {
         light: {
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
-            backgroundColor: "var(--ds-background-neutral)";
-            backgroundColorFocus: "var(--ds-surface)";
-            backgroundColorHover: "var(--ds-surface)";
+            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-neutral)";
-            backgroundColorFocus: "var(--ds-surface)";
-            backgroundColorHover: "var(--ds-surface)";
+            backgroundColor: "var(--ds-background-input)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
         };
     };
     textColor: {
@@ -142,6 +156,11 @@ export declare const themeTokens: {
         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;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.5",
+  "version": "4.3.8",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,16 +13,23 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/textarea/",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Text area"
+      "name": "Text area",
+      "category": "Components"
     }
   },
+  "af:exports": {
+    ".": "./src/index.tsx",
+    "./component-tokens": "./src/component-tokens.tsx",
+    "./styles": "./src/styles.tsx",
+    "./text-area": "./src/text-area.tsx",
+    "./theme": "./src/theme.tsx"
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/theme": "^12.1.0",
@@ -36,6 +43,7 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/ssr": "*",
@@ -60,6 +68,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",

package/report.api.md

@@ -0,0 +1,533 @@
+## API Report File for "@atlaskit/textarea"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { ComponentType } from 'react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+
+declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
+
+declare 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_2.FocusEventHandler<HTMLTextAreaElement>;
+  /** Handler to be called when the input changes. */
+  onChange?: React_2.ChangeEventHandler<HTMLTextAreaElement>;
+  /** Handler to be called when the input is focused */
+  onFocus?: React_2.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 Props = Combine<
+  Omit<
+    React_2.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'disabled' | 'required' | 'readonly'
+  >,
+  OwnProps
+>;
+
+declare const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<
+  Pick<
+    Props,
+    | '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_2.RefAttributes<HTMLTextAreaElement>
+>>;
+export default TextArea;
+
+export declare const Theme: {
+  Consumer: ComponentType<
+    {
+      children: (tokens: ThemeTokens) => ReactNode;
+    } & ThemeProps
+  >;
+  Provider: ComponentType<{
+    children?: ReactNode;
+    value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
+  }>;
+  useTheme: (props: ThemeProps) => ThemeTokens;
+};
+
+export declare type ThemeAppearance = 'standard' | 'subtle' | 'none';
+
+export declare type ThemeProps = {
+  appearance: ThemeAppearance;
+  mode: 'dark' | 'light';
+};
+
+export declare type ThemeTokens = {
+  borderColor: string;
+  borderColorFocus: 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;
+};
+
+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-neutral)';
+      dark: 'var(--ds-background-neutral)';
+    };
+    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-neutral-subtle-hovered)';
+      dark: 'var(--ds-background-neutral-subtle-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-neutral)';
+      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-neutral)';
+      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)';
+  };
+};
+
+export {};
+```

package/common.ts

@@ -1 +0,0 @@
-export const docsText = `The default export of @atlaskit/textarea is a hybrid uncontrolled/controlled component; it is uncontrolled by default, but can be optionally controlled by setting the value prop. To set a default value for TextArea while leaving component uncontrolled, specify a defaultValue prop.`;