@atlaskit/textfield - npm Package Compare versions

Comparing version 6.8.3 to 7.0.0

CHANGELOG.md

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

dist/cjs/text-field.js

@@ -0,1 +1,2 @@
+/* text-field.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
@@ -9,2 +10,4 @@
 exports.default = void 0;
+require("./text-field.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -15,11 +18,5 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _styles = require("./styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -29,7 +26,57 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var containerMedia = {
+  invalid: "_srjtgir2",
+  disabled: "_6up518qt"
+};
+var inputMediaDisabled = null;
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.8.3"
+  packageVersion: "7.0.0"
 };
+var disabledStyle = {
+  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
+  subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
+  none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
+};
+var invalidStyle = null;
+var focusWithinStyle = {
+  standard: "_ochr1p6i _195er01l _bqhtq049",
+  subtle: "_ochr1p6i _195er01l _bqhtq049",
+  none: "_ochr1j28 _195e1j28 _bqht3sij"
+};
+var hoverStyle = {
+  standard: "_4cvx1elr _irr31d5g",
+  subtle: "_4cvx1elr _irr31d5g",
+  none: "_4cvx1j28 _irr31j28"
+};
+var getContainerTextBgAndBorderColor = {
+  standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
+  subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
+  none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
+};
+var widthMap = {
+  xsmall: 80,
+  small: 160,
+  medium: 240,
+  large: 320,
+  xlarge: 480
+};
+var getMaxWidth = function getMaxWidth(width) {
+  return !width ? "100%" : width in widthMap ? "".concat(widthMap[width], "px") : "".concat(+width, "px");
+};
+var containerStyleAppearance = {
+  standard: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  subtle: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  none: "_1dqoglyw"
+};
+var containerStyles = null;
+var inputDisabledStyle = null;
+var inputCompactStyleWithFg = null;
+var inputCompactStyle = null;
+var inputMonospacedStyle = null;
+var inputFontStyleWithFG = null;
+var inputStyleMonospacedWithFg = null;
+var inputStyleNotDataCompactWithFG = null;
+var inputStyle = null;
 
@@ -109,50 +156,37 @@ /**
   }, [ref]);
-  var containerStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.containerStyles)(appearance, width);
-  }, [appearance, width]);
-  var inputStyle = (0, _styles.inputStyles)();
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to
-     * non-interactive elements as this is an accessibility anti-pattern.
-     * However, because this instance is to handle events on all children that
-     * should be associated with the input, we can add role="presentation" so
-     * that there are no negative impacts to assistive technologies.
-     */
-    (0, _react2.jsx)("div", {
-      role: "presentation",
-      "data-disabled": isDisabled ? isDisabled : undefined,
-      "data-invalid": isInvalid ? isInvalid : undefined,
-      "data-ds--text-field--container": true,
-      "data-testid": testId && "".concat(testId, "-container"),
-      onMouseDown: handleOnMouseDown
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: containerStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className
-    }, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
-      "aria-invalid": isInvalid ? isInvalid : undefined
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle,
-      "data-compact": isCompact ? isCompact : undefined,
-      "data-ds--text-field--input": true,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
-      "data-testid": testId,
-      disabled: isDisabled,
-      name: name,
-      onBlur: handleOnBlur,
-      onChange: onChange,
-      onFocus: handleOnFocus,
-      placeholder: placeholder,
-      readOnly: isReadOnly,
-      ref: setInputRef,
-      required: isRequired
-    })), elemAfterInput)
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "presentation",
+    "data-disabled": isDisabled ? isDisabled : undefined,
+    "data-invalid": isInvalid ? isInvalid : undefined,
+    "data-ds--text-field--container": true,
+    "data-testid": testId && "".concat(testId, "-container"),
+    onMouseDown: handleOnMouseDown,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c81oud _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _10j7r01l", className]),
+    style: {
+      maxWidth: "".concat(getMaxWidth(width)),
+      "--_x5k4n9": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, #E2483D)"))
+    }
+  }, elemBeforeInput, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, spreadProps, {
+    "aria-invalid": isInvalid ? isInvalid : undefined
+    // TODO: When removing legacy theming fix this.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+
+    "data-compact": isCompact ? isCompact : undefined,
+    "data-ds--text-field--input": true,
+    "data-monospaced": isMonospaced ? isMonospaced : undefined,
+    "data-testid": testId,
+    disabled: isDisabled,
+    name: name,
+    onBlur: handleOnBlur,
+    onChange: onChange,
+    onFocus: handleOnFocus,
+    placeholder: placeholder,
+    readOnly: isReadOnly,
+    ref: setInputRef,
+    required: isRequired,
+    className: (0, _runtime.ax)(["_19itidpf _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l _3hog1lh4", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_oo9g1lh4", isDisabled && "_1fnx18qt", !isCompact && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_11c81doa _1tn21oud", isCompact && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
+  })), elemAfterInput);
 });
 var _default = exports.default = Textfield;

dist/es2019/text-field.js

@@ -0,17 +1,61 @@
+/* text-field.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./text-field.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, useCallback, useRef } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+const containerMedia = {
+  invalid: "_srjtgir2",
+  disabled: "_6up518qt"
+};
+const inputMediaDisabled = null;
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.8.3"
+  packageVersion: "7.0.0"
 };
+const disabledStyle = {
+  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
+  subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
+  none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
+};
+const invalidStyle = null;
+const focusWithinStyle = {
+  standard: "_ochr1p6i _195er01l _bqhtq049",
+  subtle: "_ochr1p6i _195er01l _bqhtq049",
+  none: "_ochr1j28 _195e1j28 _bqht3sij"
+};
+const hoverStyle = {
+  standard: "_4cvx1elr _irr31d5g",
+  subtle: "_4cvx1elr _irr31d5g",
+  none: "_4cvx1j28 _irr31j28"
+};
+const getContainerTextBgAndBorderColor = {
+  standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
+  subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
+  none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
+};
+const widthMap = {
+  xsmall: 80,
+  small: 160,
+  medium: 240,
+  large: 320,
+  xlarge: 480
+};
+const getMaxWidth = width => !width ? `100%` : width in widthMap ? `${widthMap[width]}px` : `${+width}px`;
+const containerStyleAppearance = {
+  standard: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  subtle: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  none: "_1dqoglyw"
+};
+const containerStyles = null;
+const inputDisabledStyle = null;
+const inputCompactStyleWithFg = null;
+const inputCompactStyle = null;
+const inputMonospacedStyle = null;
+const inputFontStyleWithFG = null;
+const inputStyleMonospacedWithFg = null;
+const inputStyleNotDataCompactWithFG = null;
+const inputStyle = null;
 
@@ -88,48 +132,36 @@ /**
   }, [ref]);
-  const containerStyles = useMemo(() => getContainerStyles(appearance, width), [appearance, width]);
-  const inputStyle = getInputStyles();
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to
-     * non-interactive elements as this is an accessibility anti-pattern.
-     * However, because this instance is to handle events on all children that
-     * should be associated with the input, we can add role="presentation" so
-     * that there are no negative impacts to assistive technologies.
-     */
-    jsx("div", {
-      role: "presentation",
-      "data-disabled": isDisabled ? isDisabled : undefined,
-      "data-invalid": isInvalid ? isInvalid : undefined,
-      "data-ds--text-field--container": true,
-      "data-testid": testId && `${testId}-container`,
-      onMouseDown: handleOnMouseDown
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: containerStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className
-    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
-      "aria-invalid": isInvalid ? isInvalid : undefined
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle,
-      "data-compact": isCompact ? isCompact : undefined,
-      "data-ds--text-field--input": true,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
-      "data-testid": testId,
-      disabled: isDisabled,
-      name: name,
-      onBlur: handleOnBlur,
-      onChange: onChange,
-      onFocus: handleOnFocus,
-      placeholder: placeholder,
-      readOnly: isReadOnly,
-      ref: setInputRef,
-      required: isRequired
-    })), elemAfterInput)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    "data-disabled": isDisabled ? isDisabled : undefined,
+    "data-invalid": isInvalid ? isInvalid : undefined,
+    "data-ds--text-field--container": true,
+    "data-testid": testId && `${testId}-container`,
+    onMouseDown: handleOnMouseDown,
+    style: {
+      maxWidth: `${getMaxWidth(width)}`
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c81oud _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _10j7r01l", className])
+  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
+    "aria-invalid": isInvalid ? isInvalid : undefined
+    // TODO: When removing legacy theming fix this.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+
+    "data-compact": isCompact ? isCompact : undefined,
+    "data-ds--text-field--input": true,
+    "data-monospaced": isMonospaced ? isMonospaced : undefined,
+    "data-testid": testId,
+    disabled: isDisabled,
+    name: name,
+    onBlur: handleOnBlur,
+    onChange: onChange,
+    onFocus: handleOnFocus,
+    placeholder: placeholder,
+    readOnly: isReadOnly,
+    ref: setInputRef,
+    required: isRequired,
+    className: ax(["_19itidpf _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l _3hog1lh4", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_oo9g1lh4", isDisabled && "_1fnx18qt", !isCompact && fg('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", fg('platform_design_system_team_safari_input_fix') && "_11c81doa _1tn21oud", isCompact && fg('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && fg('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
+  })), elemAfterInput);
 });
 export default Textfield;

dist/esm/text-field.js

@@ -0,1 +1,2 @@
+/* text-field.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
@@ -6,19 +7,64 @@ import _typeof from "@babel/runtime/helpers/typeof";
 var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
+import "./text-field.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
-import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+var containerMedia = {
+  invalid: "_srjtgir2",
+  disabled: "_6up518qt"
+};
+var inputMediaDisabled = null;
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.8.3"
+  packageVersion: "7.0.0"
 };
+var disabledStyle = {
+  standard: "_1h6dsyzs _bfhksyzs _syaz1lh4 _80om13gf",
+  subtle: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf",
+  none: "_1h6d1j28 _bfhk1j28 _syaz1lh4 _80om13gf"
+};
+var invalidStyle = null;
+var focusWithinStyle = {
+  standard: "_ochr1p6i _195er01l _bqhtq049",
+  subtle: "_ochr1p6i _195er01l _bqhtq049",
+  none: "_ochr1j28 _195e1j28 _bqht3sij"
+};
+var hoverStyle = {
+  standard: "_4cvx1elr _irr31d5g",
+  subtle: "_4cvx1elr _irr31d5g",
+  none: "_4cvx1j28 _irr31j28"
+};
+var getContainerTextBgAndBorderColor = {
+  standard: "_1h6d1elr _1dqonqa1 _syaz1fxt _80om1kdv _bfhk1j9a _srjtgir2",
+  subtle: "_1h6d1j28 _1dqonqa1 _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2",
+  none: "_1h6d1j28 _1dqoglyw _syaz1fxt _80om1kdv _16hg1j28 _srjtgir2"
+};
+var widthMap = {
+  xsmall: 80,
+  small: 160,
+  medium: 240,
+  large: 320,
+  xlarge: 480
+};
+var getMaxWidth = function getMaxWidth(width) {
+  return !width ? "100%" : width in widthMap ? "".concat(widthMap[width], "px") : "".concat(+width, "px");
+};
+var containerStyleAppearance = {
+  standard: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  subtle: "_1dqonqa1 _1q51e4h9 _85i5e4h9 _bozgidpf _y4tiidpf",
+  none: "_1dqoglyw"
+};
+var containerStyles = null;
+var inputDisabledStyle = null;
+var inputCompactStyleWithFg = null;
+var inputCompactStyle = null;
+var inputMonospacedStyle = null;
+var inputFontStyleWithFG = null;
+var inputStyleMonospacedWithFg = null;
+var inputStyleNotDataCompactWithFG = null;
+var inputStyle = null;
 
@@ -98,50 +144,37 @@ /**
   }, [ref]);
-  var containerStyles = useMemo(function () {
-    return getContainerStyles(appearance, width);
-  }, [appearance, width]);
-  var inputStyle = getInputStyles();
-  return (
-    /**
-     * It is not normally acceptable to add click and key handlers to
-     * non-interactive elements as this is an accessibility anti-pattern.
-     * However, because this instance is to handle events on all children that
-     * should be associated with the input, we can add role="presentation" so
-     * that there are no negative impacts to assistive technologies.
-     */
-    jsx("div", {
-      role: "presentation",
-      "data-disabled": isDisabled ? isDisabled : undefined,
-      "data-invalid": isInvalid ? isInvalid : undefined,
-      "data-ds--text-field--container": true,
-      "data-testid": testId && "".concat(testId, "-container"),
-      onMouseDown: handleOnMouseDown
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: containerStyles
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className
-    }, elemBeforeInput, jsx("input", _extends({}, spreadProps, {
-      "aria-invalid": isInvalid ? isInvalid : undefined
-      // TODO: When removing legacy theming fix this.
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      ,
-      css: inputStyle,
-      "data-compact": isCompact ? isCompact : undefined,
-      "data-ds--text-field--input": true,
-      "data-monospaced": isMonospaced ? isMonospaced : undefined,
-      "data-testid": testId,
-      disabled: isDisabled,
-      name: name,
-      onBlur: handleOnBlur,
-      onChange: onChange,
-      onFocus: handleOnFocus,
-      placeholder: placeholder,
-      readOnly: isReadOnly,
-      ref: setInputRef,
-      required: isRequired
-    })), elemAfterInput)
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    "data-disabled": isDisabled ? isDisabled : undefined,
+    "data-invalid": isInvalid ? isInvalid : undefined,
+    "data-ds--text-field--container": true,
+    "data-testid": testId && "".concat(testId, "-container"),
+    onMouseDown: handleOnMouseDown,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c81oud _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _10j7r01l", className]),
+    style: {
+      maxWidth: "".concat(getMaxWidth(width)),
+      "--_x5k4n9": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, #E2483D)"))
+    }
+  }, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
+    "aria-invalid": isInvalid ? isInvalid : undefined
+    // TODO: When removing legacy theming fix this.
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+
+    "data-compact": isCompact ? isCompact : undefined,
+    "data-ds--text-field--input": true,
+    "data-monospaced": isMonospaced ? isMonospaced : undefined,
+    "data-testid": testId,
+    disabled: isDisabled,
+    name: name,
+    onBlur: handleOnBlur,
+    onChange: onChange,
+    onFocus: handleOnFocus,
+    placeholder: placeholder,
+    readOnly: isReadOnly,
+    ref: setInputRef,
+    required: isRequired,
+    className: ax(["_19itidpf _11c81oud _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _1bsb1osq _1ul9idpf _bfhk1j28 _syaz1kw7 _80om1kw7 _14jiu2gc _olc6u2gc _1kod12x7 _7ba012x7 _1goxglyw _13xeglyw _1n7e1l2s _1idr131l _3hog1lh4", isMonospaced && "_ect41odn", isCompact && "_85i51b66 _1q511b66 _y4ti12x7 _bozg12x7", isDisabled && "_oo9g1lh4", isDisabled && "_1fnx18qt", !isCompact && fg('platform_design_system_team_safari_input_fix') && "_14ji12x7 _olc612x7 _1kod12x7 _7ba012x7 _l9oiu2gc _549yu2gc _1h5w12x7 _124212x7", fg('platform_design_system_team_safari_input_fix') && "_11c81doa _1tn21oud", isCompact && fg('platform_design_system_team_safari_input_fix') && "_11zpv77o _1l02v77o _daj712x7 _141f12x7 _1srd1b66 _oi9h1b66 _1e3012x7 _1txv12x7", isMonospaced && fg('platform_design_system_team_safari_input_fix') && "_ect41odn _14md1odn"])
+  })), elemAfterInput);
 });
 export default Textfield;

package.json

 {
 	"name": "@atlaskit/textfield",
-	"version": "6.8.3",
+	"version": "7.0.0",
 	"description": "A text field is an input that allows a user to write or edit text.",
@@ -30,7 +30,6 @@ "publishConfig": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.1"
 	},
@@ -37,0 +36,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Dependency count

7

decreased by-12.5%

Worsened metrics

Total package byte prevSize

120681

decreased by-5.67%

Number of package files

35

decreased by-5.41%

Lines of code

1781

decreased by-18.64%

Dependency changes

• + Added@compiled/react@^0.18.1

• - Removed@atlaskit/primitives@^13.5.0

• - Removed@emotion/react@^11.7.1

• - Removed@atlaskit/app-provider@1.8.1(transitive)

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

• - Removed@atlaskit/interaction-context@2.6.0(transitive)

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

• - Removed@atlaskit/visually-hidden@1.6.0(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@emotion/babel-plugin@11.13.5(transitive)

• - Removed@emotion/cache@11.14.0(transitive)

• - Removed@emotion/hash@0.9.2(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/react@11.14.0(transitive)

• - Removed@emotion/serialize@1.3.3(transitive)

• - Removed@emotion/sheet@1.4.0(transitive)

• - Removed@emotion/unitless@0.10.0(transitive)

• - Removed@emotion/use-insertion-effect-with-fallbacks@1.2.0(transitive)

• - Removed@emotion/utils@1.4.2(transitive)

• - Removed@emotion/weak-memoize@0.4.0(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedbabel-plugin-macros@3.1.0(transitive)

• - Removedcallsites@3.1.0(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@7.1.0(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@4.0.0(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedimport-fresh@3.3.1(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.16.1(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedresolve@1.22.10(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstylis@4.2.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedyaml@1.10.2(transitive)