@atlaskit/textarea 4.3.4 → 4.3.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/textarea
 
+## 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
+
+- Updated dependencies
+
 ## 4.3.4
 
 ### Patch Changes

package/component-tokens/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/component-tokens.js",
   "module": "../dist/esm/component-tokens.js",
   "module:es2019": "../dist/es2019/component-tokens.js",
+  "sideEffects": false,
   "types": "../dist/types/component-tokens.d.ts"
 }

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 = {
@@ -38,13 +38,13 @@ var defaultBackgroundColor = {
 };
 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, ")")
+  light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;

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.4";
+var packageVersion = "4.3.7";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -4,16 +4,16 @@ 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})`,
@@ -24,12 +24,12 @@ export const defaultBackgroundColor = {
   dark: `var(--ds-background-neutral, ${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})`
+  light: `var(--ds-background-input-pressed, ${N0})`,
+  dark: `var(--ds-background-input-pressed, ${DN10})`
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export const subtleHoverBackgroundColor = {

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.4";
+const packageVersion = "4.3.7";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -4,16 +4,16 @@ 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, ")"),
@@ -24,12 +24,12 @@ export var defaultBackgroundColor = {
   dark: "var(--ds-background-neutral, ".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, ")")
+  light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 }; // TODO Subtle hover styles not defined in Figma: https://product-fabric.atlassian.net/browse/DSP-1568
 
 export var subtleHoverBackgroundColor = {

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.4";
+var packageVersion = "4.3.7";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/esm/version.json

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

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

@@ -3,16 +3,16 @@ 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)";
@@ -23,12 +23,12 @@ export declare const defaultBackgroundColor: {
     dark: "var(--ds-background-neutral)";
 };
 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)";

package/dist/types/theme.d.ts

@@ -31,8 +31,8 @@ export declare type ThemeTokens = {
 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;
@@ -73,12 +73,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,8 +87,8 @@ 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)";
@@ -104,7 +104,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 +112,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)";
         };
@@ -122,15 +122,15 @@ export declare const themeTokens: {
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
             backgroundColor: "var(--ds-background-neutral)";
-            backgroundColorFocus: "var(--ds-surface)";
-            backgroundColorHover: "var(--ds-surface)";
+            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)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
         };
     };
     textColor: {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.4",
+  "version": "4.3.7",
   "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",
@@ -17,16 +17,23 @@
   "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.ts",
+    "./component-tokens": "./src/component-tokens.ts",
+    "./styles": "./src/styles.ts",
+    "./text-area": "./src/text-area.tsx",
+    "./theme": "./src/theme.ts"
+  },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -60,6 +67,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "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/styles/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/styles.js",
   "module": "../dist/esm/styles.js",
   "module:es2019": "../dist/es2019/styles.js",
+  "sideEffects": false,
   "types": "../dist/types/styles.d.ts"
 }

package/text-area/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/text-area.js",
   "module": "../dist/esm/text-area.js",
   "module:es2019": "../dist/es2019/text-area.js",
+  "sideEffects": false,
   "types": "../dist/types/text-area.d.ts"
 }

package/theme/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/theme.js",
   "module": "../dist/esm/theme.js",
   "module:es2019": "../dist/es2019/theme.js",
+  "sideEffects": false,
   "types": "../dist/types/theme.d.ts"
 }