@atlaskit/form 11.0.2 → 11.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/field.compiled.css +1 -0
  3. package/dist/cjs/field.js +23 -14
  4. package/dist/cjs/fieldset.compiled.css +1 -0
  5. package/dist/cjs/fieldset.js +11 -14
  6. package/dist/cjs/form-footer.compiled.css +4 -0
  7. package/dist/cjs/form-footer.js +11 -18
  8. package/dist/cjs/form-header.compiled.css +2 -0
  9. package/dist/cjs/form-header.js +15 -21
  10. package/dist/cjs/form-section.compiled.css +2 -0
  11. package/dist/cjs/form-section.js +17 -21
  12. package/dist/cjs/label.compiled.css +6 -0
  13. package/dist/cjs/label.js +15 -24
  14. package/dist/cjs/messages.compiled.css +10 -0
  15. package/dist/cjs/messages.js +34 -50
  16. package/dist/cjs/range-field.js +15 -13
  17. package/dist/cjs/required-asterisk.compiled.css +3 -0
  18. package/dist/cjs/required-asterisk.js +13 -21
  19. package/dist/es2019/field.compiled.css +1 -0
  20. package/dist/es2019/field.js +18 -15
  21. package/dist/es2019/fieldset.compiled.css +1 -0
  22. package/dist/es2019/fieldset.js +8 -13
  23. package/dist/es2019/form-footer.compiled.css +4 -0
  24. package/dist/es2019/form-footer.js +8 -17
  25. package/dist/es2019/form-header.compiled.css +2 -0
  26. package/dist/es2019/form-header.js +12 -20
  27. package/dist/es2019/form-section.compiled.css +2 -0
  28. package/dist/es2019/form-section.js +14 -20
  29. package/dist/es2019/label.compiled.css +6 -0
  30. package/dist/es2019/label.js +11 -22
  31. package/dist/es2019/messages.compiled.css +10 -0
  32. package/dist/es2019/messages.js +27 -48
  33. package/dist/es2019/range-field.js +21 -24
  34. package/dist/es2019/required-asterisk.compiled.css +3 -0
  35. package/dist/es2019/required-asterisk.js +10 -20
  36. package/dist/esm/field.compiled.css +1 -0
  37. package/dist/esm/field.js +18 -15
  38. package/dist/esm/fieldset.compiled.css +1 -0
  39. package/dist/esm/fieldset.js +8 -13
  40. package/dist/esm/form-footer.compiled.css +4 -0
  41. package/dist/esm/form-footer.js +8 -17
  42. package/dist/esm/form-header.compiled.css +2 -0
  43. package/dist/esm/form-header.js +12 -20
  44. package/dist/esm/form-section.compiled.css +2 -0
  45. package/dist/esm/form-section.js +14 -20
  46. package/dist/esm/label.compiled.css +6 -0
  47. package/dist/esm/label.js +11 -22
  48. package/dist/esm/messages.compiled.css +10 -0
  49. package/dist/esm/messages.js +29 -48
  50. package/dist/esm/range-field.js +15 -13
  51. package/dist/esm/required-asterisk.compiled.css +3 -0
  52. package/dist/esm/required-asterisk.js +10 -20
  53. package/dist/types/checkbox-field.d.ts +1 -1
  54. package/dist/types/field.d.ts +1 -2
  55. package/dist/types/fieldset.d.ts +2 -3
  56. package/dist/types/form-footer.d.ts +3 -3
  57. package/dist/types/form-header.d.ts +2 -3
  58. package/dist/types/form-section.d.ts +2 -3
  59. package/dist/types/label.d.ts +0 -1
  60. package/dist/types/messages.d.ts +4 -14
  61. package/dist/types/required-asterisk.d.ts +2 -2
  62. package/dist/types-ts4.5/checkbox-field.d.ts +1 -1
  63. package/dist/types-ts4.5/field.d.ts +1 -2
  64. package/dist/types-ts4.5/fieldset.d.ts +2 -3
  65. package/dist/types-ts4.5/form-footer.d.ts +3 -3
  66. package/dist/types-ts4.5/form-header.d.ts +2 -3
  67. package/dist/types-ts4.5/form-section.d.ts +2 -3
  68. package/dist/types-ts4.5/label.d.ts +0 -1
  69. package/dist/types-ts4.5/messages.d.ts +4 -14
  70. package/dist/types-ts4.5/required-asterisk.d.ts +2 -2
  71. package/package.json +27 -22
  72. package/__perf__/default.tsx +0 -56
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/form
2
2
 
3
+ ## 11.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
8
+ [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
9
+ Update `React` from v16 to v18
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 11.0.3
16
+
17
+ ### Patch Changes
18
+
19
+ - [#107240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107240)
20
+ [`5255a1a097bad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5255a1a097bad) -
21
+ Update dependencies and remove unused internal exports.
22
+
3
23
  ## 11.0.2
4
24
 
5
25
  ### Patch Changes
@@ -0,0 +1 @@
1
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
package/dist/cjs/field.js CHANGED
@@ -1,35 +1,44 @@
1
+ /* field.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof3 = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = Field;
10
+ require("./field.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
16
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
11
- var _react = require("react");
12
- var _react2 = require("@emotion/react");
13
17
  var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
14
18
  var _useId = require("@atlaskit/ds-lib/use-id");
15
19
  var _fieldIdContext = require("./field-id-context");
16
20
  var _form = require("./form");
17
21
  var _label = require("./label");
18
22
  var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
23
+ 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); }
24
+ 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; }
19
25
  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; }
20
- 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; } /**
21
- * @jsxRuntime classic
22
- * @jsx jsx
23
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
- var fieldWrapperStyles = (0, _react2.css)({
25
- marginBlockStart: "var(--ds-space-100, 8px)"
26
- });
26
+ 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; }
27
+ var fieldWrapperStyles = null;
27
28
  function isEvent(event) {
28
29
  return Boolean(event && event.target);
29
30
  }
30
31
  function isFunction(x) {
31
32
  return typeof x === 'function';
32
33
  }
34
+
35
+ // Must be exported to satisfy error TS4023 from Jira builds
36
+ // src/packages/servicedesk/virtual-agent/common/src/ui/base-text-field/index.tsx(10,14):
37
+ // error TS4023: Exported variable `BaseTextField` has or is using name
38
+ // `FieldComponentProps` from external module
39
+ // `/opt/atlassian/pipelines/agent/build/jira/tsDist/@atlaskit__form/app/src/field`
40
+ // but cannot be named.
41
+
33
42
  function usePreviousRef(current) {
34
43
  var ref = (0, _react.useRef)(current);
35
44
 
@@ -244,14 +253,14 @@ function Field(props) {
244
253
  'aria-labelledby': "".concat(fieldId, "-label"),
245
254
  id: fieldId
246
255
  });
247
- return (0, _react2.jsx)("div", {
248
- css: fieldWrapperStyles,
249
- "data-testid": props.testId
250
- }, props.label && (0, _react2.jsx)(_label.Label, {
256
+ return /*#__PURE__*/React.createElement("div", {
257
+ "data-testid": props.testId,
258
+ className: (0, _runtime.ax)(["_1pfhu2gc"])
259
+ }, props.label && /*#__PURE__*/React.createElement(_label.Label, {
251
260
  htmlFor: fieldId,
252
261
  id: "".concat(fieldId, "-label"),
253
262
  testId: props.testId && "".concat(props.testId, "--label")
254
- }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(_fieldIdContext.FieldId.Provider, {
263
+ }, props.label, props.isRequired && /*#__PURE__*/React.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Provider, {
255
264
  value: fieldId
256
265
  }, props.children({
257
266
  fieldProps: extendedFieldProps,
@@ -0,0 +1 @@
1
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
@@ -1,21 +1,18 @@
1
+ /* fieldset.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
- var _react = require("@emotion/react");
9
+ require("./fieldset.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
8
12
  var _label = require("./label");
9
- /**
10
- * @jsxRuntime classic
11
- * @jsx jsx
12
- */
13
-
14
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
15
-
16
- var fieldSetStyles = (0, _react.css)({
17
- marginBlockStart: "var(--ds-space-100, 8px)"
18
- });
13
+ 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); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
15
+ var fieldSetStyles = null;
19
16
 
20
17
  /**
21
18
  * __Fieldset__
@@ -30,8 +27,8 @@ var fieldSetStyles = (0, _react.css)({
30
27
  var Fieldset = function Fieldset(_ref) {
31
28
  var children = _ref.children,
32
29
  legend = _ref.legend;
33
- return (0, _react.jsx)("fieldset", {
34
- css: fieldSetStyles
35
- }, legend && (0, _react.jsx)(_label.Legend, null, legend), children);
30
+ return /*#__PURE__*/React.createElement("fieldset", {
31
+ className: (0, _runtime.ax)(["_1pfhu2gc"])
32
+ }, legend && /*#__PURE__*/React.createElement(_label.Legend, null, legend), children);
36
33
  };
37
34
  var _default = exports.default = Fieldset;
@@ -0,0 +1,4 @@
1
+ ._1bah1y6m{justify-content:flex-start}
2
+ ._1bahesu3{justify-content:flex-end}
3
+ ._1e0c1txw{display:flex}
4
+ ._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
@@ -1,25 +1,18 @@
1
+ /* form-footer.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = FormFooter;
7
- var _react = require("@emotion/react");
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
15
- var formFooterWrapperStyles = (0, _react.css)({
16
- display: 'flex',
17
- justifyContent: 'flex-end',
18
- marginBlockStart: "var(--ds-space-300, 24px)"
19
- });
20
- var justifyContentStyles = (0, _react.css)({
21
- justifyContent: 'flex-start'
22
- });
9
+ require("./form-footer.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
12
+ 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); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
14
+ var formFooterWrapperStyles = null;
15
+ var justifyContentStyles = null;
23
16
 
24
17
  /**
25
18
  * __Form footer__
@@ -34,7 +27,7 @@ function FormFooter(_ref) {
34
27
  var _ref$align = _ref.align,
35
28
  align = _ref$align === void 0 ? 'end' : _ref$align,
36
29
  children = _ref.children;
37
- return (0, _react.jsx)("footer", {
38
- css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
30
+ return /*#__PURE__*/React.createElement("footer", {
31
+ className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _1pfh1ejb", align === 'start' && "_1bah1y6m"])
39
32
  }, children);
40
33
  }
@@ -0,0 +1,2 @@
1
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
2
+ ._1ul91osq{min-width:100%}
@@ -1,27 +1,21 @@
1
+ /* form-header.tsx generated by @compiled/babel-plugin v0.36.0 */
2
+ /* eslint-disable @atlaskit/design-system/use-primitives */
1
3
  "use strict";
2
4
 
3
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
7
  Object.defineProperty(exports, "__esModule", {
5
8
  value: true
6
9
  });
7
10
  exports.default = void 0;
8
- var _react = require("@emotion/react");
11
+ require("./form-header.compiled.css");
12
+ var React = _interopRequireWildcard(require("react"));
13
+ var _runtime = require("@compiled/react/runtime");
9
14
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
10
- var _primitives = require("@atlaskit/primitives");
11
- /**
12
- * @jsxRuntime classic
13
- * @jsx jsx
14
- */
15
-
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
-
18
- var formHeaderContentStyles = (0, _primitives.xcss)({
19
- minWidth: '100%',
20
- marginBlockStart: 'space.100'
21
- });
22
- var formHeaderDescriptionStyles = (0, _primitives.xcss)({
23
- marginBlockStart: 'space.100'
24
- });
15
+ 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); }
16
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
17
+ var formHeaderContentStyles = null;
18
+ var formHeaderDescriptionStyles = null;
25
19
 
26
20
  /**
27
21
  * __Form header__.
@@ -37,12 +31,12 @@ var FormHeader = function FormHeader(_ref) {
37
31
  var children = _ref.children,
38
32
  description = _ref.description,
39
33
  title = _ref.title;
40
- return (0, _react.jsx)(_primitives.Box, null, title && (0, _react.jsx)(_heading.default, {
34
+ return /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement(_heading.default, {
41
35
  size: "large"
42
- }, title), description && (0, _react.jsx)(_primitives.Box, {
43
- xcss: formHeaderDescriptionStyles
44
- }, description), children && (0, _react.jsx)(_primitives.Box, {
45
- xcss: formHeaderContentStyles
36
+ }, title), description && /*#__PURE__*/React.createElement("div", {
37
+ className: (0, _runtime.ax)(["_1pfhu2gc"])
38
+ }, description), children && /*#__PURE__*/React.createElement("div", {
39
+ className: (0, _runtime.ax)(["_1ul91osq _1pfhu2gc"])
46
40
  }, children));
47
41
  };
48
42
  var _default = exports.default = FormHeader;
@@ -0,0 +1,2 @@
1
+ ._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
2
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
@@ -1,36 +1,32 @@
1
+ /* form-section.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = void 0;
8
- var _react = require("@emotion/react");
10
+ require("./form-section.compiled.css");
11
+ var React = _interopRequireWildcard(require("react"));
12
+ var _runtime = require("@compiled/react/runtime");
9
13
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
10
- var _primitives = require("@atlaskit/primitives");
11
- /**
12
- * @jsxRuntime classic
13
- * @jsx jsx
14
- */
15
-
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
-
18
- var formSectionDescriptionStyles = (0, _primitives.xcss)({
19
- marginBlockStart: 'space.100'
20
- });
21
- var formSectionWrapperStyles = (0, _primitives.xcss)({
22
- marginBlockStart: 'space.300'
23
- });
14
+ 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); }
15
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
16
+ var formSectionDescriptionStyles = null;
17
+ var formSectionWrapperStyles = null;
24
18
  var FormSectionWrapper = function FormSectionWrapper(_ref) {
25
19
  var children = _ref.children;
26
- return (0, _react.jsx)(_primitives.Box, {
27
- xcss: formSectionWrapperStyles
20
+ // eslint-disable-next-line @atlaskit/design-system/use-primitives
21
+ return /*#__PURE__*/React.createElement("div", {
22
+ className: (0, _runtime.ax)(["_1pfh1ejb"])
28
23
  }, children);
29
24
  };
30
25
  var FormSectionDescription = function FormSectionDescription(_ref2) {
31
26
  var children = _ref2.children;
32
- return (0, _react.jsx)(_primitives.Box, {
33
- xcss: formSectionDescriptionStyles
27
+ // eslint-disable-next-line @atlaskit/design-system/use-primitives
28
+ return /*#__PURE__*/React.createElement("div", {
29
+ className: (0, _runtime.ax)(["_1pfhu2gc"])
34
30
  }, children);
35
31
  };
36
32
 
@@ -48,8 +44,8 @@ var FormSection = function FormSection(_ref3) {
48
44
  var children = _ref3.children,
49
45
  description = _ref3.description,
50
46
  title = _ref3.title;
51
- return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(_heading.default, {
47
+ return /*#__PURE__*/React.createElement(FormSectionWrapper, null, title && /*#__PURE__*/React.createElement(_heading.default, {
52
48
  size: "medium"
53
- }, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
49
+ }, title), description && /*#__PURE__*/React.createElement(FormSectionDescription, null, description), children);
54
50
  };
55
51
  var _default = exports.default = FormSection;
@@ -0,0 +1,6 @@
1
+ ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._1e0c1o8l{display:inline-block}
3
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
4
+ ._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
5
+ ._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
6
+ ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
package/dist/cjs/label.js CHANGED
@@ -1,25 +1,17 @@
1
+ /* label.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
- exports.default = exports.Legend = exports.Label = void 0;
7
- var _react = require("@emotion/react");
8
- /**
9
- * @jsxRuntime classic
10
- * @jsx jsx
11
- */
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
15
- var fieldsetLabelStyles = (0, _react.css)({
16
- display: 'inline-block',
17
- color: "var(--ds-text-subtle, #44546F)",
18
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
19
- fontWeight: "var(--ds-font-weight-bold, 700)",
20
- marginBlockEnd: "var(--ds-space-050, 4px)",
21
- marginBlockStart: "var(--ds-space-0, 0px)"
22
- });
8
+ exports.Legend = exports.Label = void 0;
9
+ require("./label.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
12
+ 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); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
14
+ var fieldsetLabelStyles = null;
23
15
 
24
16
  /**
25
17
  * __Label__
@@ -34,11 +26,11 @@ var Label = exports.Label = function Label(_ref) {
34
26
  htmlFor = _ref.htmlFor,
35
27
  id = _ref.id,
36
28
  testId = _ref.testId;
37
- return (0, _react.jsx)("label", {
38
- css: fieldsetLabelStyles,
29
+ return /*#__PURE__*/React.createElement("label", {
39
30
  id: id,
40
31
  htmlFor: htmlFor,
41
- "data-testid": testId
32
+ "data-testid": testId,
33
+ className: (0, _runtime.ax)(["_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"])
42
34
  }, children);
43
35
  };
44
36
 
@@ -49,8 +41,7 @@ var Label = exports.Label = function Label(_ref) {
49
41
  */
50
42
  var Legend = exports.Legend = function Legend(_ref2) {
51
43
  var children = _ref2.children;
52
- return (0, _react.jsx)("legend", {
53
- css: fieldsetLabelStyles
44
+ return /*#__PURE__*/React.createElement("legend", {
45
+ className: (0, _runtime.ax)(["_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"])
54
46
  }, children);
55
- };
56
- var _default = exports.default = Label;
47
+ };
@@ -0,0 +1,10 @@
1
+ ._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
2
+ ._zulp12x7{gap:var(--ds-space-075,6px)}
3
+ ._1bah1q9y{justify-content:baseline}
4
+ ._1e0c1txw{display:flex}
5
+ ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
6
+ ._4cvr1h6o{align-items:center}
7
+ ._4t3i7vkz{height:1pc}
8
+ ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
9
+ ._syaze6sf{color:var(--ds-text-danger,#ae2a19)}
10
+ ._syazy73q{color:var(--ds-text-success,#216e4e)}
@@ -1,24 +1,22 @@
1
+ /* messages.tsx generated by @compiled/babel-plugin v0.36.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
- exports.ValidMessage = exports.MessageWrapperContext = exports.MessageWrapper = exports.HelperMessage = exports.ErrorMessage = void 0;
9
+ exports.ValidMessage = exports.MessageWrapper = exports.HelperMessage = exports.ErrorMessage = void 0;
10
+ require("./messages.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("react");
10
- var _react2 = require("@emotion/react");
11
15
  var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
12
16
  var _successEditorSuccess = _interopRequireDefault(require("@atlaskit/icon/utility/migration/success--editor-success"));
13
- var _colors = require("@atlaskit/theme/colors");
14
17
  var _fieldIdContext = require("./field-id-context");
15
- /**
16
- * @jsxRuntime classic
17
- * @jsx jsx
18
- */
19
-
20
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
-
18
+ 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); }
19
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(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; }
22
20
  /**
23
21
  * API for the internal `<Message />` component. This is not public API.
24
22
  */
@@ -27,43 +25,29 @@ var _fieldIdContext = require("./field-id-context");
27
25
  * Public API of the various message components.
28
26
  */
29
27
 
30
- var messageStyles = (0, _react2.css)({
31
- display: 'flex',
32
- justifyContent: 'baseline',
33
- gap: "var(--ds-space-075, 6px)",
34
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
35
- marginBlockStart: "var(--ds-space-050, 4px)"
36
- });
28
+ var messageStyles = null;
37
29
  var messageAppearanceStyles = {
38
- default: (0, _react2.css)({
39
- color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
40
- }),
41
- error: (0, _react2.css)({
42
- color: "var(--ds-text-danger, #AE2A19)"
43
- }),
44
- valid: (0, _react2.css)({
45
- color: "var(--ds-text-success, #216E4E)"
46
- })
30
+ default: "_syaz1wmz",
31
+ error: "_syaze6sf",
32
+ valid: "_syazy73q"
33
+ };
34
+ var iconWrapperStyles = {
35
+ root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
47
36
  };
48
- var iconWrapperStyles = (0, _react2.css)({
49
- display: 'flex',
50
- height: '16px',
51
- alignItems: 'center'
52
- });
53
37
  var IconWrapper = function IconWrapper(_ref) {
54
38
  var children = _ref.children;
55
- return (0, _react2.jsx)("span", {
56
- css: iconWrapperStyles
39
+ return /*#__PURE__*/React.createElement("span", {
40
+ className: (0, _runtime.ax)([iconWrapperStyles.root])
57
41
  }, children);
58
42
  };
59
43
  var messageIcons = {
60
- error: (0, _react2.jsx)(_error.default, {
44
+ error: /*#__PURE__*/React.createElement(_error.default, {
61
45
  LEGACY_margin: "0 -2px 0 0",
62
46
  color: "currentColor",
63
47
  LEGACY_size: "small",
64
48
  label: "error"
65
49
  }),
66
- valid: (0, _react2.jsx)(_successEditorSuccess.default, {
50
+ valid: /*#__PURE__*/React.createElement(_successEditorSuccess.default, {
67
51
  LEGACY_margin: "0 -2px 0 0",
68
52
  color: "currentColor",
69
53
  LEGACY_size: "small",
@@ -98,16 +82,16 @@ var Message = function Message(_ref2) {
98
82
  * If the child is just a string, this is not required and we can use one
99
83
  * less DOM element.
100
84
  */
101
- var content = typeof children === 'string' ? children : (0, _react2.jsx)("span", null, children);
102
- return (0, _react2.jsx)("div", {
103
- css: [messageStyles, messageAppearanceStyles[appearance]],
85
+ var content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
86
+ return /*#__PURE__*/React.createElement("div", {
104
87
  "data-testid": testId,
105
88
  id: fieldId,
106
89
  ref: messageRef
107
90
  // For backwards compatability, if there is a wrapper, aria-live is not needed
108
91
  ,
109
- "aria-live": !hasMessageWrapper ? 'polite' : undefined
110
- }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
92
+ "aria-live": !hasMessageWrapper ? 'polite' : undefined,
93
+ className: (0, _runtime.ax)(["_zulp12x7 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
94
+ }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
111
95
  };
112
96
 
113
97
  /**
@@ -120,8 +104,8 @@ var Message = function Message(_ref2) {
120
104
  var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
121
105
  var children = _ref3.children,
122
106
  testId = _ref3.testId;
123
- return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
124
- return (0, _react2.jsx)(Message, {
107
+ return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
108
+ return /*#__PURE__*/React.createElement(Message, {
125
109
  fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
126
110
  testId: testId
127
111
  }, children);
@@ -138,8 +122,8 @@ var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
138
122
  var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
139
123
  var children = _ref4.children,
140
124
  testId = _ref4.testId;
141
- return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
142
- return (0, _react2.jsx)(Message, {
125
+ return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
126
+ return /*#__PURE__*/React.createElement(Message, {
143
127
  appearance: "error",
144
128
  fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
145
129
  testId: testId
@@ -157,8 +141,8 @@ var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
157
141
  var ValidMessage = exports.ValidMessage = function ValidMessage(_ref5) {
158
142
  var children = _ref5.children,
159
143
  testId = _ref5.testId;
160
- return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
161
- return (0, _react2.jsx)(Message, {
144
+ return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
145
+ return /*#__PURE__*/React.createElement(Message, {
162
146
  appearance: "valid",
163
147
  fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
164
148
  testId: testId
@@ -172,7 +156,7 @@ var ValidMessage = exports.ValidMessage = function ValidMessage(_ref5) {
172
156
  * A message wrapper context allows the children to check
173
157
  * if it is contained within the MessageWrapper.
174
158
  */
175
- var MessageWrapperContext = exports.MessageWrapperContext = /*#__PURE__*/(0, _react.createContext)({
159
+ var MessageWrapperContext = /*#__PURE__*/(0, _react.createContext)({
176
160
  isWrapper: false
177
161
  });
178
162
 
@@ -190,9 +174,9 @@ var MessageWrapper = exports.MessageWrapper = function MessageWrapper(_ref6) {
190
174
  var contextValue = {
191
175
  isWrapper: true
192
176
  };
193
- return (0, _react2.jsx)(MessageWrapperContext.Provider, {
177
+ return /*#__PURE__*/React.createElement(MessageWrapperContext.Provider, {
194
178
  value: contextValue
195
- }, (0, _react2.jsx)("div", {
179
+ }, /*#__PURE__*/React.createElement("div", {
196
180
  "aria-live": "polite",
197
181
  "data-testid": "message-wrapper"
198
182
  }, children));
@@ -24,24 +24,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
24
24
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
25
25
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
26
26
  */
27
- var RangeField = function RangeField(props) {
28
- var children = props.children,
29
- strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
30
- // isInvalid and isRequired are specifically invalid for range inputs
27
+ var RangeField = function RangeField(_ref) {
28
+ var children = _ref.children,
29
+ strippedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
31
30
  return (
32
31
  /*#__PURE__*/
33
32
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
34
33
  _react.default.createElement(_field.default, (0, _extends2.default)({}, strippedProps, {
35
34
  transform: Number
36
- }), function (_ref) {
37
- var _ref$fieldProps = _ref.fieldProps,
38
- isInvalid = _ref$fieldProps.isInvalid,
39
- isRequired = _ref$fieldProps.isRequired,
40
- fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
41
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
42
- return children(_objectSpread({
43
- fieldProps: fieldProps
44
- }, rest));
35
+ }), function (_ref2) {
36
+ var _ref2$fieldProps = _ref2.fieldProps,
37
+ isInvalid = _ref2$fieldProps.isInvalid,
38
+ isRequired = _ref2$fieldProps.isRequired,
39
+ fieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded2),
40
+ rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
41
+ return (
42
+ // isInvalid and isRequired are specifically invalid for range inputs
43
+ children(_objectSpread({
44
+ fieldProps: fieldProps
45
+ }, rest))
46
+ );
45
47
  })
46
48
  );
47
49
  };
@@ -0,0 +1,3 @@
1
+ ._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
2
+ ._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._syaz1ick{color:var(--ds-text-danger,#de350b)}