@atlaskit/textfield 6.8.3 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
 
 ### Patch Changes

package/dist/cjs/text-field.compiled.css

@@ -0,0 +1,80 @@
+
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itidpf{border:0}
+._1tnq1l7b._1tnq1l7b{border-radius:3px}
+._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d1bqt, ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
+._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._13xeglyw:invalid{box-shadow:none}
+._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
+._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
+._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
+._16hg1j28._16hg1j28{background-color:transparent}
+._16jlkb7n{flex-grow:1}
+._16qs13x5, ._1dbz13x5:hover{box-shadow:var(--_x5k4n9)}
+._18m915vq{overflow-y:hidden}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1goxglyw::-ms-clear{display:none}
+._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
+._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
+._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._3hog1lh4::-ms-input-placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._3hog1lh4::placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._4cvr1h6o{align-items:center}
+._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
+._80om13gf{cursor:not-allowed}
+._80om1kdv{cursor:text}
+._80om1kw7{cursor:inherit}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozgidpf{padding-inline-start:0}
+._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._i0dl1osq{flex-basis:100%}
+._lcxv1wug{pointer-events:auto}
+._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
+._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
+._oo9g1lh4{-webkit-text-fill-color:var(--ds-text-disabled,#091e424f)}
+._s7n4jp4b{vertical-align:top}
+._slp31hna{word-wrap:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1kw7{color:inherit}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._vchhusvi{box-sizing:border-box}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4tiidpf{padding-inline-end:0}
+._ochr1j28._ochr1j28:focus-within{border-color:transparent}
+._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._195e1j28._195e1j28:focus-within{background-color:transparent}
+._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31j28:hover{background-color:transparent}
+@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
+@media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}

package/dist/cjs/text-field.js

@@ -1,3 +1,4 @@
+/* text-field.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,29 +7,75 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./text-field.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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); }
 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 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) { (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;
 
 /**
  * __Textfield__
@@ -103,52 +150,39 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref(inputElement);
     }
   }, [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;

package/dist/es2019/text-field.compiled.css

@@ -0,0 +1,80 @@
+
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itidpf{border:0}
+._1tnq1l7b._1tnq1l7b{border-radius:3px}
+._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d1bqt, ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
+._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._13xeglyw:invalid{box-shadow:none}
+._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
+._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
+._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
+._16hg1j28._16hg1j28{background-color:transparent}
+._16jlkb7n{flex-grow:1}
+._16qsizbr, ._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
+._18m915vq{overflow-y:hidden}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1goxglyw::-ms-clear{display:none}
+._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
+._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
+._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._3hog1lh4::-ms-input-placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._3hog1lh4::placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._4cvr1h6o{align-items:center}
+._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
+._80om13gf{cursor:not-allowed}
+._80om1kdv{cursor:text}
+._80om1kw7{cursor:inherit}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozgidpf{padding-inline-start:0}
+._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._i0dl1osq{flex-basis:100%}
+._lcxv1wug{pointer-events:auto}
+._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
+._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
+._oo9g1lh4{-webkit-text-fill-color:var(--ds-text-disabled,#091e424f)}
+._s7n4jp4b{vertical-align:top}
+._slp31hna{word-wrap:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1kw7{color:inherit}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._vchhusvi{box-sizing:border-box}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4tiidpf{padding-inline-end:0}
+._ochr1j28._ochr1j28:focus-within{border-color:transparent}
+._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._195e1j28._195e1j28:focus-within{background-color:transparent}
+._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31j28:hover{background-color:transparent}
+@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
+@media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}

package/dist/es2019/text-field.js

@@ -1,19 +1,63 @@
+/* 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;
 
 /**
  * __Textfield__
@@ -85,50 +129,38 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
       ref(inputElement);
     }
   }, [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;

package/dist/esm/text-field.compiled.css

@@ -0,0 +1,80 @@
+
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itidpf{border:0}
+._1tnq1l7b._1tnq1l7b{border-radius:3px}
+._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d1bqt, ._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
+._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
+._1h6d1j28{border-color:transparent}
+._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
+._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._13xeglyw:invalid{box-shadow:none}
+._141f12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}
+._14ji12x7:not([data-compact]){padding-block-end:var(--ds-space-075,6px)}
+._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
+._16hg1j28._16hg1j28{background-color:transparent}
+._16jlkb7n{flex-grow:1}
+._16qs13x5, ._1dbz13x5:hover{box-shadow:var(--_x5k4n9)}
+._18m915vq{overflow-y:hidden}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1goxglyw::-ms-clear{display:none}
+._1idr131l::-ms-input-placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1idr131l::placeholder{color:var(--ds-text-subtlest,#626f86)}
+._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
+._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
+._1n7e1l2s:placeholder-shown{text-overflow:ellipsis}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51e4h9{padding-block-start:var(--ds-border-width,1px)}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._3hog1lh4::-ms-input-placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._3hog1lh4::placeholder:disabled{color:var(--ds-text-disabled,#091e424f)}
+._4cvr1h6o{align-items:center}
+._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
+._80om13gf{cursor:not-allowed}
+._80om1kdv{cursor:text}
+._80om1kw7{cursor:inherit}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5e4h9{padding-block-end:var(--ds-border-width,1px)}
+._bfhk1j28{background-color:transparent}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozgidpf{padding-inline-start:0}
+._daj712x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}
+._ect41odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
+._i0dl1osq{flex-basis:100%}
+._lcxv1wug{pointer-events:auto}
+._olc612x7:not([data-compact]){padding-block-start:var(--ds-space-075,6px)}
+._olc6u2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}
+._oo9g1lh4{-webkit-text-fill-color:var(--ds-text-disabled,#091e424f)}
+._s7n4jp4b{vertical-align:top}
+._slp31hna{word-wrap:break-word}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1kw7{color:inherit}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._vchhusvi{box-sizing:border-box}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4tiidpf{padding-inline-end:0}
+._ochr1j28._ochr1j28:focus-within{border-color:transparent}
+._ochr1p6i._ochr1p6i:focus-within{border-color:var(--ds-border-focused,#388bff)}._10j7r01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._195e1j28._195e1j28:focus-within{background-color:transparent}
+._195er01l._195er01l:focus-within{background-color:var(--ds-background-input-pressed,#fff)}
+._bqht3sij._bqht3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._bqhtq049._bqhtq049:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#388bff)}
+._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
+._4cvx1j28:hover{border-color:transparent}
+._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._irr31j28:hover{background-color:transparent}
+@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._srjtgir2:focus-within{border-color:Highlight}}
+@media (min-width:30rem){._14md1odn{font-family:var(--ds-font-family-code,ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}._1srd1b66[data-compact]{padding-block-end:var(--ds-space-050,4px)}._oi9h1b66[data-compact]{padding-block-start:var(--ds-space-050,4px)}._1e3012x7[data-compact]{padding-inline-end:var(--ds-space-075,6px)}._1txv12x7[data-compact]{padding-inline-start:var(--ds-space-075,6px)}._1tn21oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}._l9oiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}._549yu2gc:not([data-compact]){padding-block-start:var(--ds-space-100,8px)}._1h5w12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}._124212x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}}