@atlaskit/heading 1.0.1 → 1.0.2

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 (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/heading.js +72 -49
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/heading.js +71 -48
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/heading.js +71 -48
  7. package/dist/esm/version.json +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/heading
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`95fdae34c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95fdae34c94) - Revert experimental change to `@compiled/react` from `@emotion/react`.
8
+
3
9
  ## 1.0.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/heading.js CHANGED
@@ -1,6 +1,3 @@
1
- /* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
2
-
3
- /** @jsx jsx */
4
1
  "use strict";
5
2
 
6
3
  Object.defineProperty(exports, "__esModule", {
@@ -8,40 +5,11 @@ Object.defineProperty(exports, "__esModule", {
8
5
  });
9
6
  exports.default = void 0;
10
7
 
11
- var _runtime = require("@compiled/react/runtime");
12
-
13
- var _react = require("@compiled/react");
8
+ var _react = require("@emotion/react");
14
9
 
15
10
  var _headingContext = require("./heading-context");
16
11
 
17
- var _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
18
- var _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
19
- var _26 = "._vwz41ylp{line-height:40px}";
20
- var _25 = "._1wybldb6{font-size:35px}";
21
- var _24 = "._vwz4zwfg{line-height:2pc}";
22
- var _23 = "._1wyb1pa9{font-size:29px}";
23
- var _22 = "._vwz41f4h{line-height:28px}";
24
- var _21 = "._1dyzz5jk{letter-spacing:-.01em}";
25
- var _20 = "._1wyb1tcg{font-size:24px}";
26
- var _19 = "._vwz41tcg{line-height:24px}";
27
- var _18 = "._1dyzvkfx{letter-spacing:-.008em}";
28
- var _17 = "._k48pbfng{font-weight:500}";
29
- var _16 = "._1wybgktf{font-size:20px}";
30
- var _15 = "._vwz4gktf{line-height:20px}";
31
- var _14 = "._1dyzqdok{letter-spacing:-.006em}";
32
- var _13 = "._1wyb7vkz{font-size:1pc}";
33
- var _12 = "._1dyz44hb{letter-spacing:-.003em}";
34
- var _11 = "._1wybdlk8{font-size:14px}";
35
- var _10 = "._1p1dangw{text-transform:uppercase}";
36
- var _9 = "._k48pni7l{font-weight:600}";
37
- var _8 = "._1wyb1crf{font-size:9pt}";
38
- var _7 = "._vwz47vkz{line-height:1pc}";
39
- var _6 = "._1dyzidpf{letter-spacing:0}";
40
- var _5 = "._k48p1fw0{font-weight:700}";
41
- var _4 = "._1wyb1skh{font-size:11px}";
42
- var _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
43
- var _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
44
- var _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
12
+ /** @jsx jsx */
45
13
  // https://atlassian.design/foundations/typography
46
14
  var levelMap = {
47
15
  h900: 'h1',
@@ -55,18 +23,72 @@ var levelMap = {
55
23
  h200: 'div',
56
24
  h100: 'div'
57
25
  };
58
- var headingResetStyles = null;
59
- var h900Styles = null;
60
- var h800Styles = null;
61
- var h700Styles = null;
62
- var h600Styles = null;
63
- var h500Styles = null;
64
- var h400Styles = null;
65
- var h300Styles = null;
66
- var h200Styles = null;
67
- var h100Styles = null;
68
- var inverseStyles = null;
69
- var subtlestStyles = null;
26
+ var headingResetStyles = (0, _react.css)({
27
+ marginTop: "var(--ds-scale-0, 0px)",
28
+ marginBottom: "var(--ds-scale-0, 0px)",
29
+ color: "var(--ds-text, #172B4D)"
30
+ });
31
+ var h900Styles = (0, _react.css)({
32
+ fontSize: '35px',
33
+ fontWeight: 500,
34
+ letterSpacing: '-0.01em',
35
+ lineHeight: '40px'
36
+ });
37
+ var h800Styles = (0, _react.css)({
38
+ fontSize: '29px',
39
+ fontWeight: 600,
40
+ letterSpacing: '-0.01em',
41
+ lineHeight: '32px'
42
+ });
43
+ var h700Styles = (0, _react.css)({
44
+ fontSize: 24,
45
+ fontWeight: 500,
46
+ letterSpacing: '-0.01em',
47
+ lineHeight: '28px'
48
+ });
49
+ var h600Styles = (0, _react.css)({
50
+ fontSize: 20,
51
+ fontWeight: 500,
52
+ letterSpacing: '-0.008em',
53
+ lineHeight: '24px'
54
+ });
55
+ var h500Styles = (0, _react.css)({
56
+ fontSize: 16,
57
+ fontWeight: 600,
58
+ letterSpacing: '-0.006em',
59
+ lineHeight: '20px'
60
+ });
61
+ var h400Styles = (0, _react.css)({
62
+ fontSize: 14,
63
+ fontWeight: 600,
64
+ letterSpacing: '-0.003em',
65
+ lineHeight: '16px'
66
+ });
67
+ var h300Styles = (0, _react.css)({
68
+ fontSize: 12,
69
+ fontWeight: 600,
70
+ letterSpacing: 0,
71
+ lineHeight: '16px',
72
+ textTransform: 'uppercase'
73
+ });
74
+ var h200Styles = (0, _react.css)({
75
+ fontSize: 12,
76
+ fontWeight: 600,
77
+ letterSpacing: 0,
78
+ lineHeight: '16px'
79
+ });
80
+ var h100Styles = (0, _react.css)({
81
+ fontSize: 11,
82
+ fontWeight: 700,
83
+ letterSpacing: 0,
84
+ lineHeight: '16px'
85
+ });
86
+ var inverseStyles = (0, _react.css)({
87
+ color: "var(--ds-text-inverse, #FFF)"
88
+ });
89
+ var subtlestStyles = (0, _react.css)({
90
+ color: "var(--ds-text-subtlest, #6B778C)"
91
+ });
70
92
  /**
71
93
  * __Heading__
72
94
  *
@@ -106,13 +128,14 @@ var Heading = function Heading(_ref) {
106
128
 
107
129
  var Markup = as || hLevel && "h".concat(hLevel) || levelMap[level];
108
130
  var isSubtleHeading = level === 'h200' || level === 'h100';
109
- return (0, _react.jsx)(_runtime.CC, null, (0, _react.jsx)(_runtime.CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), (0, _react.jsx)(Markup, {
131
+ return (0, _react.jsx)(Markup, {
110
132
  id: id,
111
133
  "data-testid": testId // @ts-ignore
112
134
  // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
113
135
  ,
114
- className: (0, _runtime.ax)(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
115
- }, children));
136
+ css: [headingResetStyles, // This can be refactored when @compiled supports style maps
137
+ level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
138
+ }, children);
116
139
  };
117
140
 
118
141
  var _default = Heading;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/heading.js CHANGED
@@ -1,38 +1,6 @@
1
- /* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
2
-
3
1
  /** @jsx jsx */
4
-
5
- import { ax, ix, CC, CS } from "@compiled/react/runtime";
6
- import { jsx } from '@compiled/react';
2
+ import { css, jsx } from '@emotion/react';
7
3
  import { useHeadingElement } from './heading-context';
8
- const _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
9
- const _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
10
- const _26 = "._vwz41ylp{line-height:40px}";
11
- const _25 = "._1wybldb6{font-size:35px}";
12
- const _24 = "._vwz4zwfg{line-height:2pc}";
13
- const _23 = "._1wyb1pa9{font-size:29px}";
14
- const _22 = "._vwz41f4h{line-height:28px}";
15
- const _21 = "._1dyzz5jk{letter-spacing:-.01em}";
16
- const _20 = "._1wyb1tcg{font-size:24px}";
17
- const _19 = "._vwz41tcg{line-height:24px}";
18
- const _18 = "._1dyzvkfx{letter-spacing:-.008em}";
19
- const _17 = "._k48pbfng{font-weight:500}";
20
- const _16 = "._1wybgktf{font-size:20px}";
21
- const _15 = "._vwz4gktf{line-height:20px}";
22
- const _14 = "._1dyzqdok{letter-spacing:-.006em}";
23
- const _13 = "._1wyb7vkz{font-size:1pc}";
24
- const _12 = "._1dyz44hb{letter-spacing:-.003em}";
25
- const _11 = "._1wybdlk8{font-size:14px}";
26
- const _10 = "._1p1dangw{text-transform:uppercase}";
27
- const _9 = "._k48pni7l{font-weight:600}";
28
- const _8 = "._1wyb1crf{font-size:9pt}";
29
- const _7 = "._vwz47vkz{line-height:1pc}";
30
- const _6 = "._1dyzidpf{letter-spacing:0}";
31
- const _5 = "._k48p1fw0{font-weight:700}";
32
- const _4 = "._1wyb1skh{font-size:11px}";
33
- const _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
34
- const _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
35
- const _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
36
4
  // https://atlassian.design/foundations/typography
37
5
  const levelMap = {
38
6
  h900: 'h1',
@@ -46,18 +14,72 @@ const levelMap = {
46
14
  h200: 'div',
47
15
  h100: 'div'
48
16
  };
49
- const headingResetStyles = null;
50
- const h900Styles = null;
51
- const h800Styles = null;
52
- const h700Styles = null;
53
- const h600Styles = null;
54
- const h500Styles = null;
55
- const h400Styles = null;
56
- const h300Styles = null;
57
- const h200Styles = null;
58
- const h100Styles = null;
59
- const inverseStyles = null;
60
- const subtlestStyles = null;
17
+ const headingResetStyles = css({
18
+ marginTop: "var(--ds-scale-0, 0px)",
19
+ marginBottom: "var(--ds-scale-0, 0px)",
20
+ color: "var(--ds-text, #172B4D)"
21
+ });
22
+ const h900Styles = css({
23
+ fontSize: '35px',
24
+ fontWeight: 500,
25
+ letterSpacing: '-0.01em',
26
+ lineHeight: '40px'
27
+ });
28
+ const h800Styles = css({
29
+ fontSize: '29px',
30
+ fontWeight: 600,
31
+ letterSpacing: '-0.01em',
32
+ lineHeight: '32px'
33
+ });
34
+ const h700Styles = css({
35
+ fontSize: 24,
36
+ fontWeight: 500,
37
+ letterSpacing: '-0.01em',
38
+ lineHeight: '28px'
39
+ });
40
+ const h600Styles = css({
41
+ fontSize: 20,
42
+ fontWeight: 500,
43
+ letterSpacing: '-0.008em',
44
+ lineHeight: '24px'
45
+ });
46
+ const h500Styles = css({
47
+ fontSize: 16,
48
+ fontWeight: 600,
49
+ letterSpacing: '-0.006em',
50
+ lineHeight: '20px'
51
+ });
52
+ const h400Styles = css({
53
+ fontSize: 14,
54
+ fontWeight: 600,
55
+ letterSpacing: '-0.003em',
56
+ lineHeight: '16px'
57
+ });
58
+ const h300Styles = css({
59
+ fontSize: 12,
60
+ fontWeight: 600,
61
+ letterSpacing: 0,
62
+ lineHeight: '16px',
63
+ textTransform: 'uppercase'
64
+ });
65
+ const h200Styles = css({
66
+ fontSize: 12,
67
+ fontWeight: 600,
68
+ letterSpacing: 0,
69
+ lineHeight: '16px'
70
+ });
71
+ const h100Styles = css({
72
+ fontSize: 11,
73
+ fontWeight: 700,
74
+ letterSpacing: 0,
75
+ lineHeight: '16px'
76
+ });
77
+ const inverseStyles = css({
78
+ color: "var(--ds-text-inverse, #FFF)"
79
+ });
80
+ const subtlestStyles = css({
81
+ color: "var(--ds-text-subtlest, #6B778C)"
82
+ });
61
83
  /**
62
84
  * __Heading__
63
85
  *
@@ -96,13 +118,14 @@ const Heading = ({
96
118
 
97
119
  const Markup = as || hLevel && `h${hLevel}` || levelMap[level];
98
120
  const isSubtleHeading = level === 'h200' || level === 'h100';
99
- return jsx(CC, null, jsx(CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), jsx(Markup, {
121
+ return jsx(Markup, {
100
122
  id: id,
101
123
  "data-testid": testId // @ts-ignore
102
124
  // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
103
125
  ,
104
- className: ax(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
105
- }, children));
126
+ css: [headingResetStyles, // This can be refactored when @compiled supports style maps
127
+ level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
128
+ }, children);
106
129
  };
107
130
 
108
131
  export default Heading;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/heading.js CHANGED
@@ -1,38 +1,6 @@
1
- /* heading.tsx generated by @compiled/babel-plugin v0.15.0 */
2
-
3
1
  /** @jsx jsx */
4
-
5
- import { ax, ix, CC, CS } from "@compiled/react/runtime";
6
- import { jsx } from '@compiled/react';
2
+ import { css, jsx } from '@emotion/react';
7
3
  import { useHeadingElement } from './heading-context';
8
- var _28 = "._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}";
9
- var _27 = "._syaz15cr{color:var(--ds-text-inverse,#fff)}";
10
- var _26 = "._vwz41ylp{line-height:40px}";
11
- var _25 = "._1wybldb6{font-size:35px}";
12
- var _24 = "._vwz4zwfg{line-height:2pc}";
13
- var _23 = "._1wyb1pa9{font-size:29px}";
14
- var _22 = "._vwz41f4h{line-height:28px}";
15
- var _21 = "._1dyzz5jk{letter-spacing:-.01em}";
16
- var _20 = "._1wyb1tcg{font-size:24px}";
17
- var _19 = "._vwz41tcg{line-height:24px}";
18
- var _18 = "._1dyzvkfx{letter-spacing:-.008em}";
19
- var _17 = "._k48pbfng{font-weight:500}";
20
- var _16 = "._1wybgktf{font-size:20px}";
21
- var _15 = "._vwz4gktf{line-height:20px}";
22
- var _14 = "._1dyzqdok{letter-spacing:-.006em}";
23
- var _13 = "._1wyb7vkz{font-size:1pc}";
24
- var _12 = "._1dyz44hb{letter-spacing:-.003em}";
25
- var _11 = "._1wybdlk8{font-size:14px}";
26
- var _10 = "._1p1dangw{text-transform:uppercase}";
27
- var _9 = "._k48pni7l{font-weight:600}";
28
- var _8 = "._1wyb1crf{font-size:9pt}";
29
- var _7 = "._vwz47vkz{line-height:1pc}";
30
- var _6 = "._1dyzidpf{letter-spacing:0}";
31
- var _5 = "._k48p1fw0{font-weight:700}";
32
- var _4 = "._1wyb1skh{font-size:11px}";
33
- var _3 = "._syaz1fxt{color:var(--ds-text,#172b4d)}";
34
- var _2 = "._otyryy18{margin-bottom:var(--ds-scale-0,0)}";
35
- var _ = "._19pkyy18{margin-top:var(--ds-scale-0,0)}";
36
4
  // https://atlassian.design/foundations/typography
37
5
  var levelMap = {
38
6
  h900: 'h1',
@@ -46,18 +14,72 @@ var levelMap = {
46
14
  h200: 'div',
47
15
  h100: 'div'
48
16
  };
49
- var headingResetStyles = null;
50
- var h900Styles = null;
51
- var h800Styles = null;
52
- var h700Styles = null;
53
- var h600Styles = null;
54
- var h500Styles = null;
55
- var h400Styles = null;
56
- var h300Styles = null;
57
- var h200Styles = null;
58
- var h100Styles = null;
59
- var inverseStyles = null;
60
- var subtlestStyles = null;
17
+ var headingResetStyles = css({
18
+ marginTop: "var(--ds-scale-0, 0px)",
19
+ marginBottom: "var(--ds-scale-0, 0px)",
20
+ color: "var(--ds-text, #172B4D)"
21
+ });
22
+ var h900Styles = css({
23
+ fontSize: '35px',
24
+ fontWeight: 500,
25
+ letterSpacing: '-0.01em',
26
+ lineHeight: '40px'
27
+ });
28
+ var h800Styles = css({
29
+ fontSize: '29px',
30
+ fontWeight: 600,
31
+ letterSpacing: '-0.01em',
32
+ lineHeight: '32px'
33
+ });
34
+ var h700Styles = css({
35
+ fontSize: 24,
36
+ fontWeight: 500,
37
+ letterSpacing: '-0.01em',
38
+ lineHeight: '28px'
39
+ });
40
+ var h600Styles = css({
41
+ fontSize: 20,
42
+ fontWeight: 500,
43
+ letterSpacing: '-0.008em',
44
+ lineHeight: '24px'
45
+ });
46
+ var h500Styles = css({
47
+ fontSize: 16,
48
+ fontWeight: 600,
49
+ letterSpacing: '-0.006em',
50
+ lineHeight: '20px'
51
+ });
52
+ var h400Styles = css({
53
+ fontSize: 14,
54
+ fontWeight: 600,
55
+ letterSpacing: '-0.003em',
56
+ lineHeight: '16px'
57
+ });
58
+ var h300Styles = css({
59
+ fontSize: 12,
60
+ fontWeight: 600,
61
+ letterSpacing: 0,
62
+ lineHeight: '16px',
63
+ textTransform: 'uppercase'
64
+ });
65
+ var h200Styles = css({
66
+ fontSize: 12,
67
+ fontWeight: 600,
68
+ letterSpacing: 0,
69
+ lineHeight: '16px'
70
+ });
71
+ var h100Styles = css({
72
+ fontSize: 11,
73
+ fontWeight: 700,
74
+ letterSpacing: 0,
75
+ lineHeight: '16px'
76
+ });
77
+ var inverseStyles = css({
78
+ color: "var(--ds-text-inverse, #FFF)"
79
+ });
80
+ var subtlestStyles = css({
81
+ color: "var(--ds-text-subtlest, #6B778C)"
82
+ });
61
83
  /**
62
84
  * __Heading__
63
85
  *
@@ -97,13 +119,14 @@ var Heading = function Heading(_ref) {
97
119
 
98
120
  var Markup = as || hLevel && "h".concat(hLevel) || levelMap[level];
99
121
  var isSubtleHeading = level === 'h200' || level === 'h100';
100
- return jsx(CC, null, jsx(CS, null, [_, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28]), jsx(Markup, {
122
+ return jsx(Markup, {
101
123
  id: id,
102
124
  "data-testid": testId // @ts-ignore
103
125
  // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
104
126
  ,
105
- className: ax(["_19pkyy18 _otyryy18 _syaz1fxt", level === 'h100' && "_1wyb1skh _k48p1fw0 _1dyzidpf _vwz47vkz", level === 'h200' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz", level === 'h300' && "_1wyb1crf _k48pni7l _1dyzidpf _vwz47vkz _1p1dangw", level === 'h400' && "_1wybdlk8 _k48pni7l _1dyz44hb _vwz47vkz", level === 'h500' && "_1wyb7vkz _k48pni7l _1dyzqdok _vwz4gktf", level === 'h600' && "_1wybgktf _k48pbfng _1dyzvkfx _vwz41tcg", level === 'h700' && "_1wyb1tcg _k48pbfng _1dyzz5jk _vwz41f4h", level === 'h800' && "_1wyb1pa9 _k48pni7l _1dyzz5jk _vwz4zwfg", level === 'h900' && "_1wybldb6 _k48pbfng _1dyzz5jk _vwz41ylp", color === 'inverse' && "_syaz15cr", color === 'default' && isSubtleHeading && "_syaz1wmz"])
106
- }, children));
127
+ css: [headingResetStyles, // This can be refactored when @compiled supports style maps
128
+ level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
129
+ }, children);
107
130
  };
108
131
 
109
132
  export default Heading;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/heading",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A heading is a typography component used to display text in different sizes and formats.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,7 +29,7 @@
29
29
  "dependencies": {
30
30
  "@atlaskit/tokens": "^0.11.0",
31
31
  "@babel/runtime": "^7.0.0",
32
- "@compiled/react": "^0.11.1"
32
+ "@emotion/react": "^11.7.1"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"