@atlaskit/textfield 5.3.1 → 5.3.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.3.1
 
 ### Patch Changes

package/codemods/migrations/utils.tsx

@@ -180,52 +180,51 @@ export function getSafeImportName({
   return isUsed ? fallbackName : desiredName;
 }
 
-export const createRemoveFuncFor = (
-  component: string,
-  prop: string,
-  comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const defaultSpecifier = getDefaultSpecifier(j, source, component);
-
-  if (!defaultSpecifier) {
-    return;
-  }
+export const createRemoveFuncFor =
+  (component: string, prop: string, comment?: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const defaultSpecifier = getDefaultSpecifier(j, source, component);
 
-  source.findJSXElements(defaultSpecifier).forEach((element) => {
-    getJSXAttributesByName(j, element, prop).forEach((attribute) => {
-      j(attribute).remove();
-      if (comment) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-      }
-    });
-  });
-};
+    if (!defaultSpecifier) {
+      return;
+    }
 
-export const createRemoveImportsFor = ({
-  importsToRemove,
-  packagePath,
-  comment,
-}: {
-  importsToRemove: string[];
-  packagePath: string;
-  comment: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const isUsingName: boolean =
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === packagePath).length > 0;
-  if (!isUsingName) {
-    return;
-  }
+    source.findJSXElements(defaultSpecifier).forEach((element) => {
+      getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+        j(attribute).remove();
+        if (comment) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+        }
+      });
+    });
+  };
+
+export const createRemoveImportsFor =
+  ({
+    importsToRemove,
+    packagePath,
+    comment,
+  }: {
+    importsToRemove: string[];
+    packagePath: string;
+    comment: string;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const isUsingName: boolean =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath).length > 0;
+    if (!isUsingName) {
+      return;
+    }
 
-  const existingAliases: Nullable<string>[] =
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === packagePath)
-      .find(j.ImportSpecifier)
-      .nodes()
-      .map(
-        (specifier): Nullable<string> => {
+    const existingAliases: Nullable<string>[] =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === packagePath)
+        .find(j.ImportSpecifier)
+        .nodes()
+        .map((specifier): Nullable<string> => {
           if (!importsToRemove.includes(specifier.imported.name)) {
             return null;
           }
@@ -238,86 +237,86 @@ export const createRemoveImportsFor = ({
           }
 
           return null;
-        },
-      )
-      .filter(Boolean) || null;
+        })
+        .filter(Boolean) || null;
 
-  // Add comments
-  source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packagePath)
-    .find(j.ImportSpecifier)
-    .filter((importSpecifier) => {
-      const identifier = j(importSpecifier).find(j.Identifier).get();
-      if (
-        importsToRemove.includes(identifier.value.name) ||
-        existingAliases.includes(identifier.value.name)
-      ) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-        return true;
-      }
-      return false;
-    })
-    .remove();
-
-  // Remove entire import if it is empty
-  const isEmptyNamedImport =
+    // Add comments
     source
       .find(j.ImportDeclaration)
       .filter((path) => path.node.source.value === packagePath)
       .find(j.ImportSpecifier)
-      .find(j.Identifier).length === 0;
+      .filter((importSpecifier) => {
+        const identifier = j(importSpecifier).find(j.Identifier).get();
+        if (
+          importsToRemove.includes(identifier.value.name) ||
+          existingAliases.includes(identifier.value.name)
+        ) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+          return true;
+        }
+        return false;
+      })
+      .remove();
 
-  if (isEmptyNamedImport) {
-    const isEmptyDefaultImport =
+    // Remove entire import if it is empty
+    const isEmptyNamedImport =
       source
         .find(j.ImportDeclaration)
         .filter((path) => path.node.source.value === packagePath)
-        .find(j.ImportDefaultSpecifier)
+        .find(j.ImportSpecifier)
         .find(j.Identifier).length === 0;
 
-    isEmptyDefaultImport
-      ? source
-          .find(j.ImportDeclaration)
-          .filter((path) => path.node.source.value === packagePath)
-          .remove()
-      : source
+    if (isEmptyNamedImport) {
+      const isEmptyDefaultImport =
+        source
           .find(j.ImportDeclaration)
           .filter((path) => path.node.source.value === packagePath)
-          .find(j.ImportSpecifier)
-          .remove();
-  }
-};
-
-export const createRenameJSXFunc = (
-  packagePath: string,
-  from: string,
-  to: string,
-  fallback: string | undefined = undefined,
-) => (j: core.JSCodeshift, source: any) => {
-  const namedSpecifier = getNamedSpecifier(j, source, packagePath, from);
-
-  const toName = fallback
-    ? getSafeImportName({
-        j,
-        base: source,
-        currentDefaultSpecifierName: namedSpecifier,
-        desiredName: to,
-        fallbackName: fallback,
-      })
-    : to;
-
-  const existingAlias: Nullable<string> =
-    source
-      .find(j.ImportDeclaration)
-      .filter(
-        (path: ASTPath<ImportDeclaration>) =>
-          path.node.source.value === packagePath,
-      )
-      .find(j.ImportSpecifier)
-      .nodes()
-      .map(
-        (specifier: ImportSpecifier): Nullable<string> => {
+          .find(j.ImportDefaultSpecifier)
+          .find(j.Identifier).length === 0;
+
+      isEmptyDefaultImport
+        ? source
+            .find(j.ImportDeclaration)
+            .filter((path) => path.node.source.value === packagePath)
+            .remove()
+        : source
+            .find(j.ImportDeclaration)
+            .filter((path) => path.node.source.value === packagePath)
+            .find(j.ImportSpecifier)
+            .remove();
+    }
+  };
+
+export const createRenameJSXFunc =
+  (
+    packagePath: string,
+    from: string,
+    to: string,
+    fallback: string | undefined = undefined,
+  ) =>
+  (j: core.JSCodeshift, source: any) => {
+    const namedSpecifier = getNamedSpecifier(j, source, packagePath, from);
+
+    const toName = fallback
+      ? getSafeImportName({
+          j,
+          base: source,
+          currentDefaultSpecifierName: namedSpecifier,
+          desiredName: to,
+          fallbackName: fallback,
+        })
+      : to;
+
+    const existingAlias: Nullable<string> =
+      source
+        .find(j.ImportDeclaration)
+        .filter(
+          (path: ASTPath<ImportDeclaration>) =>
+            path.node.source.value === packagePath,
+        )
+        .find(j.ImportSpecifier)
+        .nodes()
+        .map((specifier: ImportSpecifier): Nullable<string> => {
           if (from !== specifier.imported.name) {
             return null;
           }
@@ -327,49 +326,50 @@ export const createRenameJSXFunc = (
           }
 
           return null;
-        },
-      )
-      .filter(Boolean)[0] || null;
+        })
+        .filter(Boolean)[0] || null;
 
-  source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === packagePath,
-    )
-    .find(j.ImportSpecifier)
-    .filter((importSpecifier: ImportSpecifier) => {
-      const identifier = j(importSpecifier).find(j.Identifier).get();
-      if (
-        from === identifier.value.name ||
-        existingAlias === identifier.value.name
-      ) {
-        return true;
-      }
-      return false;
-    })
-    .replaceWith(
-      [
-        j.importSpecifier(
-          j.identifier(toName),
-          existingAlias ? j.identifier(existingAlias) : null,
-        ),
-      ],
-      j.literal(packagePath),
-    );
-};
-
-export const createTransformer = (
-  component: string,
-  migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
-) => (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-  const source: Collection<Node> = j(fileInfo.source);
-
-  if (!hasImportDeclaration(j, source, component)) {
-    return fileInfo.source;
-  }
+    source
+      .find(j.ImportDeclaration)
+      .filter(
+        (path: ASTPath<ImportDeclaration>) =>
+          path.node.source.value === packagePath,
+      )
+      .find(j.ImportSpecifier)
+      .filter((importSpecifier: ImportSpecifier) => {
+        const identifier = j(importSpecifier).find(j.Identifier).get();
+        if (
+          from === identifier.value.name ||
+          existingAlias === identifier.value.name
+        ) {
+          return true;
+        }
+        return false;
+      })
+      .replaceWith(
+        [
+          j.importSpecifier(
+            j.identifier(toName),
+            existingAlias ? j.identifier(existingAlias) : null,
+          ),
+        ],
+        j.literal(packagePath),
+      );
+  };
+
+export const createTransformer =
+  (
+    component: string,
+    migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[],
+  ) =>
+  (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
+    const source: Collection<Node> = j(fileInfo.source);
+
+    if (!hasImportDeclaration(j, source, component)) {
+      return fileInfo.source;
+    }
 
-  migrates.forEach((tf) => tf(j, source));
+    migrates.forEach((tf) => tf(j, source));
 
-  return source.toSource(options.printOptions || { quote: 'single' });
-};
+    return source.toSource(options.printOptions || { quote: 'single' });
+  };

package/dist/cjs/text-field.js

@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.3.1"
+  packageVersion: "5.3.3"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.3.1",
+	"version": "5.3.3",
 	"sideEffects": false
 }

package/dist/es2019/text-field.js

@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.3.1"
+  packageVersion: "5.3.3"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.3.1",
+	"version": "5.3.3",
 	"sideEffects": false
 }

package/dist/esm/text-field.js

@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.3.1"
+  packageVersion: "5.3.3"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.3.1",
+	"version": "5.3.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "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/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -37,7 +29,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -46,10 +38,10 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.0.1",
-    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/form": "^8.8.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,22 +1,34 @@
-## API Report File for "@atlaskit/textfield".
+<!-- API Report Version: 2.2 -->
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+## API Report File for "@atlaskit/textfield"
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { AllHTMLAttributes } from 'react';
 import { FormEventHandler } from 'react';
 import { default as React_2 } from 'react';
 
-export declare type Appearance = 'subtle' | 'standard' | 'none';
+// @public (undocumented)
+export type Appearance = 'none' | 'standard' | 'subtle';
 
-declare const _default: React_2.NamedExoticComponent<
+// @public (undocumented)
+const _default: React_2.NamedExoticComponent<
   TextFieldProps & React_2.RefAttributes<unknown>
 >;
 export default _default;
 
-export declare const TextFieldColors: {
+// @public (undocumented)
+export const TextFieldColors: {
   backgroundColor: {
     standard: {
       light: 'var(--ds-background-input)';
@@ -51,8 +63,8 @@ export declare const TextFieldColors: {
       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;
@@ -61,8 +73,8 @@ export declare const TextFieldColors: {
   };
   borderColor: {
     standard: {
-      light: 'var(--ds-border)';
-      dark: 'var(--ds-border)';
+      light: 'var(--ds-border-input)';
+      dark: 'var(--ds-border-input)';
     };
     subtle: {
       light: string;
@@ -87,6 +99,20 @@ export declare const TextFieldColors: {
       dark: string;
     };
   };
+  borderColorHover: {
+    standard: {
+      light: 'var(--ds-border-input)';
+      dark: 'var(--ds-border-input)';
+    };
+    subtle: {
+      light: 'var(--ds-border-input)';
+      dark: 'var(--ds-border-input)';
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
   placeholderTextColor: {
     light: 'var(--ds-text-subtlest)';
     dark: 'var(--ds-text-subtlest)';
@@ -127,76 +153,27 @@ export declare const TextFieldColors: {
   };
 };
 
-export declare interface TextFieldProps
-  extends AllHTMLAttributes<HTMLInputElement> {
-  /**
-   * Affects the visual style of the text field.
-   */
-  appearance?: 'standard' | 'none' | 'subtle';
-  /**
-   * Applies compact styling, making the field smaller.
-   */
+// @public (undocumented)
+export interface TextFieldProps extends AllHTMLAttributes<HTMLInputElement> {
+  appearance?: Appearance;
+  className?: string;
+  elemAfterInput?: React_2.ReactNode;
+  elemBeforeInput?: React_2.ReactNode;
   isCompact?: boolean;
-  /**
-   * Sets the field as to appear disabled,
-   * users will not be able to interact with the text field.
-   */
   isDisabled?: boolean;
-  /**
-   * Changes the text field to have a border indicating that its value is invalid.
-   */
   isInvalid?: boolean;
-  /**
-   * Sets content text value to appear monospaced.
-   */
   isMonospaced?: 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;
-  /**
-   * Element after input in text field.
-   */
-  elemAfterInput?: React_2.ReactNode;
-  /**
-   * Element before input in text field.
-   */
-  elemBeforeInput?: React_2.ReactNode;
-  /**
-   * Sets maximum width of input.
-   */
-  width?: string | number;
-  /**
-   * Handler called when the mouse down event is triggered on the input element.
-   */
-  onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
-  /**
-   * 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;
-  /**
-   * Name of the input element.
-   */
   name?: string;
-  /**
-   * Class name to apply to the input element.
-   */
-  className?: string;
-  /**
-   * Placeholder text to display in the text field whenever it is empty.
-   */
-  placeholder?: string;
-  /**
-   * Handler called when the inputs value changes.
-   */
   onChange?: FormEventHandler<HTMLInputElement>;
+  onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
+  placeholder?: string;
+  testId?: string;
+  width?: number | string;
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

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

@@ -1,44 +0,0 @@
-export declare const disabledBackgroundColor: {
-    light: "var(--ds-background-disabled)";
-    dark: "var(--ds-background-disabled)";
-};
-export declare const defaultBackgroundColor: {
-    light: "var(--ds-background-input)";
-    dark: "var(--ds-background-input)";
-};
-export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-background-input-pressed)";
-    dark: "var(--ds-background-input-pressed)";
-};
-export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
-};
-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 subtleBorderColorHover: {
-    light: "var(--ds-border-input)";
-    dark: "var(--ds-border-input)";
-};
-export declare const transparent: {
-    light: string;
-    dark: string;
-};
-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 placeholderTextColor: {
-    light: "var(--ds-text-subtlest)";
-    dark: "var(--ds-text-subtlest)";
-};

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

@@ -1,3 +0,0 @@
-export { default } from './text-field';
-export { textFieldColors as TextFieldColors } from './styles';
-export type { TextfieldProps as TextFieldProps, Appearance } from './types';

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

@@ -1,223 +0,0 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number | undefined) => {
-    readonly borderRadius: 3;
-    readonly borderWidth: 2;
-    readonly borderStyle: "none" | "solid";
-    readonly boxSizing: "border-box";
-    readonly display: "flex";
-    readonly flex: "1 1 100%";
-    readonly fontSize: number;
-    readonly justifyContent: "space-between";
-    readonly maxWidth: string | number;
-    readonly overflow: "hidden";
-    readonly transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out";
-    readonly wordWrap: "break-word";
-    readonly verticalAlign: "top";
-    readonly pointerEvents: "auto";
-    readonly backgroundColor: string;
-    readonly borderColor: string;
-    readonly color: "var(--ds-text)";
-    readonly cursor: string;
-    readonly '&:hover:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    readonly '&:focus-within:not([data-disabled])': {
-        backgroundColor: string;
-        borderColor: string;
-    };
-    readonly '&[data-disabled]': {
-        backgroundColor?: "var(--ds-background-disabled)" | undefined;
-        borderColor?: "var(--ds-background-disabled)" | undefined;
-        color: "var(--ds-text-disabled)";
-        cursor: string;
-    };
-    readonly '&[data-invalid], &[data-invalid]:hover': {
-        borderColor: "var(--ds-border-danger)";
-    };
-    readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--ds-background-input-pressed)";
-        borderColor: "var(--ds-border-focused)";
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        '&[data-invalid]:focus-within': {
-            borderColor: string;
-        };
-        '&:focus-within': {
-            borderColor: string;
-        };
-        '&[data-disabled]': {
-            borderColor: string;
-        };
-    };
-    readonly alignItems: "center";
-};
-export declare const inputStyles: (mode: ThemeModes) => {
-    readonly backgroundColor: "transparent";
-    readonly border: 0;
-    readonly boxSizing: "border-box";
-    readonly color: "inherit";
-    readonly cursor: "inherit";
-    readonly fontSize: number;
-    readonly minWidth: "0";
-    readonly outline: "none";
-    readonly width: "100%";
-    readonly lineHeight: number;
-    readonly fontFamily: string;
-    readonly '&[data-monospaced]': {
-        readonly fontFamily: string;
-    };
-    readonly '&[data-compact]': {
-        readonly padding: `${number}px ${number}px`;
-        readonly height: `${string}em`;
-    };
-    readonly '&:not([data-compact])': {
-        readonly padding: `${number}px ${number}px`;
-        readonly height: `${string}em`;
-    };
-    readonly '&[disabled]': {
-        readonly WebkitTextFillColor: "var(--ds-text-disabled)";
-    };
-    readonly '&::-ms-clear': {
-        readonly display: "none";
-    };
-    readonly '&:invalid': {
-        readonly boxShadow: "none";
-    };
-    readonly '&::placeholder': {
-        readonly color: "var(--ds-text-subtlest)";
-        readonly '&:disabled': {
-            readonly color: "var(--ds-text-disabled)";
-        };
-    };
-    readonly '@media screen and (-ms-high-contrast: active)': {
-        readonly '&[disabled]': {
-            readonly color: "GrayText";
-        };
-    };
-};
-export declare const textFieldColors: {
-    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;
-        };
-    };
-    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;
-        };
-    };
-    borderColorHover: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    placeholderTextColor: {
-        light: "var(--ds-text-subtlest)";
-        dark: "var(--ds-text-subtlest)";
-    };
-    textColor: {
-        light: "var(--ds-text)";
-        dark: "var(--ds-text)";
-    };
-    invalidRules: {
-        light: {
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-background-input-pressed)";
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-        };
-        dark: {
-            backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-background-input-pressed)";
-            borderColor: "var(--ds-border-danger)";
-            borderColorFocus: "var(--ds-border-focused)";
-        };
-    };
-    disabledRules: {
-        light: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-        dark: {
-            backgroundColor: "var(--ds-background-disabled)";
-            backgroundColorHover: "var(--ds-background-disabled)";
-            borderColor: "var(--ds-background-disabled)";
-            textColor: "var(--ds-text-disabled)";
-        };
-    };
-};

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

@@ -1,14 +0,0 @@
-/** @jsx jsx */
-import React from 'react';
-import { TextfieldProps } from './types';
-declare const _default: React.NamedExoticComponent<TextfieldProps & React.RefAttributes<unknown>>;
-/**
- * __Textfield__
- *
- * A text field is an input that allows a user to write or edit text.
- *
- * - [Examples](https://atlassian.design/components/textfield/examples)
- * - [Code](https://atlassian.design/components/textfield/code)
- * - [Usage](https://atlassian.design/components/textfield/usage)
- */
-export default _default;

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

@@ -1,71 +0,0 @@
-import React, { AllHTMLAttributes, FormEventHandler } from 'react';
-export interface TextfieldProps extends AllHTMLAttributes<HTMLInputElement> {
-    /**
-     * Affects the visual style of the text field.
-     */
-    appearance?: Appearance;
-    /**
-     * Applies compact styling, making the field smaller.
-     */
-    isCompact?: boolean;
-    /**
-     * Sets the field as to appear disabled,
-     * users will not be able to interact with the text field.
-     */
-    isDisabled?: boolean;
-    /**
-     * Changes the text field to have a border indicating that its value is invalid.
-     */
-    isInvalid?: boolean;
-    /**
-     * Sets content text value to appear monospaced.
-     */
-    isMonospaced?: 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;
-    /**
-     * Element after input in text field.
-     */
-    elemAfterInput?: React.ReactNode;
-    /**
-     * Element before input in text field.
-     */
-    elemBeforeInput?: React.ReactNode;
-    /**
-     * Sets maximum width of input.
-     */
-    width?: string | number;
-    /**
-     * Handler called when the mouse down event is triggered on the input element.
-     */
-    onMouseDown?: React.MouseEventHandler<HTMLElement>;
-    /**
-     * 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;
-    /**
-     * Name of the input element.
-     */
-    name?: string;
-    /**
-     * Class name to apply to the input element.
-     */
-    className?: string;
-    /**
-     * Placeholder text to display in the text field whenever it is empty.
-     */
-    placeholder?: string;
-    /**
-     * Handler called when the inputs value changes.
-     */
-    onChange?: FormEventHandler<HTMLInputElement>;
-}
-export declare type Appearance = 'subtle' | 'standard' | 'none';