@atlaskit/primitives 1.2.3 → 1.3.1

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 (25) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/box.js +33 -25
  3. package/dist/cjs/components/internal/types.js +5 -0
  4. package/dist/cjs/xcss/style-maps.partial.js +87 -7
  5. package/dist/es2019/components/box.js +31 -26
  6. package/dist/es2019/components/internal/types.js +1 -0
  7. package/dist/es2019/xcss/style-maps.partial.js +87 -7
  8. package/dist/esm/components/box.js +32 -26
  9. package/dist/esm/components/internal/types.js +1 -0
  10. package/dist/esm/xcss/style-maps.partial.js +87 -7
  11. package/dist/types/components/box.d.ts +66 -6
  12. package/dist/types/components/internal/types.d.ts +1 -0
  13. package/dist/types/xcss/style-maps.partial.d.ts +82 -2
  14. package/dist/types-ts4.5/components/box.d.ts +66 -6
  15. package/dist/types-ts4.5/components/internal/types.d.ts +1 -0
  16. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +82 -2
  17. package/package.json +2 -2
  18. package/report.api.md +154 -7
  19. package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap +324 -4
  20. package/tmp/api-report-tmp.d.ts +94 -4
  21. package/dist/cjs/components/internal/base-box.js +0 -61
  22. package/dist/es2019/components/internal/base-box.js +0 -52
  23. package/dist/esm/components/internal/base-box.js +0 -53
  24. package/dist/types/components/internal/base-box.d.ts +0 -85
  25. package/dist/types-ts4.5/components/internal/base-box.d.ts +0 -85
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 1.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`88e4ac397ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88e4ac397ea) - Regenerates codegen artifacts as a result of introducting new accent interaction tokens.
8
+ - Updated dependencies
9
+
10
+ ## 1.3.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`abfe7585461`](https://bitbucket.org/atlassian/atlassian-frontend/commits/abfe7585461) - Improved type safety for Box.
15
+
3
16
  ## 1.2.3
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/components/box.js CHANGED
@@ -4,19 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.default = void 0;
7
+ exports.default = exports.Box = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _react = require("react");
11
11
  var _react2 = require("@emotion/react");
12
+ var _styleMaps = require("../xcss/style-maps.partial");
12
13
  var _xcss = require("../xcss/xcss");
13
- var _baseBox = require("./internal/base-box");
14
14
  var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
15
15
  _excluded2 = ["className"];
16
16
  /** @jsx jsx */
17
- // Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
18
- // So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
19
- // TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
17
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements
18
+
19
+ // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
20
+ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
21
+
20
22
  /**
21
23
  * __Box__
22
24
  *
@@ -28,7 +30,8 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
28
30
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
29
31
  */
30
32
  var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
31
- var as = _ref.as,
33
+ var _ref$as = _ref.as,
34
+ as = _ref$as === void 0 ? 'div' : _ref$as,
32
35
  children = _ref.children,
33
36
  backgroundColor = _ref.backgroundColor,
34
37
  padding = _ref.padding,
@@ -42,28 +45,33 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
42
45
  testId = _ref.testId,
43
46
  xcss = _ref.xcss,
44
47
  htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
48
+ var Component = as;
45
49
  // This is to remove className from safeHtmlAttributes
50
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
46
51
  var _spreadClass = htmlAttributes.className,
47
52
  safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
48
53
  var className = xcss && (0, _xcss.parseXcss)(xcss);
49
- return (0, _react2.jsx)(_baseBox.BaseBox, (0, _extends2.default)({
50
- as: as,
51
- backgroundColor: backgroundColor,
52
- padding: padding,
53
- paddingBlock: paddingBlock,
54
- paddingBlockStart: paddingBlockStart,
55
- paddingBlockEnd: paddingBlockEnd,
56
- paddingInline: paddingInline,
57
- paddingInlineStart: paddingInlineStart,
58
- paddingInlineEnd: paddingInlineEnd,
59
- style: style,
60
- testId: testId,
61
- ref: ref
62
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
63
- ,
64
- css: className
65
- }, safeHtmlAttributes), children);
54
+ return (
55
+ // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
56
+ (0, _react2.jsx)(Component, (0, _extends2.default)({
57
+ style: style
58
+ // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
59
+ ,
60
+ ref: ref
61
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
62
+ }, safeHtmlAttributes, {
63
+ css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
64
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
65
+ className],
66
+ "data-testid": testId
67
+ }), children)
68
+ );
66
69
  });
67
- Box.displayName = 'Box';
70
+ exports.Box = Box;
68
71
  var _default = Box;
69
- exports.default = _default;
72
+ exports.default = _default;
73
+ var baseStyles = (0, _react2.css)({
74
+ boxSizing: 'border-box',
75
+ appearance: 'none',
76
+ border: 'none'
77
+ });
package/dist/cjs/components/internal/types.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -60,11 +60,11 @@ exports.spaceMap = spaceMap;
60
60
 
61
61
  /**
62
62
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
63
- * @codegen <<SignedSource::4a24a8ef38d5bf0a2803ceff3c393915>>
63
+ * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
64
64
  * @codegenId colors
65
65
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
66
66
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
67
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
67
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
68
68
  */
69
69
  var borderColorMap = {
70
70
  'color.border': "var(--ds-border, #091e4221)",
@@ -94,45 +94,125 @@ var borderColorMap = {
94
94
  exports.borderColorMap = borderColorMap;
95
95
  var backgroundColorMap = {
96
96
  'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
97
+ 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)",
98
+ 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)",
97
99
  'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
100
+ 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)",
101
+ 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed, #94C748)",
98
102
  'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
103
+ 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)",
104
+ 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)",
99
105
  'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
106
+ 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered, #37471F)",
107
+ 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed, #37471F)",
100
108
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
109
+ 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered, #FF7452)",
110
+ 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed, #FF5630)",
101
111
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
112
+ 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered, #FF5630)",
113
+ 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed, #DE350B)",
102
114
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
115
+ 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered, #FF5630)",
116
+ 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed, #FF7452)",
103
117
  'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
118
+ 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered, #FF5630)",
119
+ 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed, #FF7452)",
104
120
  'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
121
+ 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered, #FEC57B)",
122
+ 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed, #FFE2BD)",
105
123
  'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
124
+ 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered, #F18D13)",
125
+ 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed, #FEC57B)",
106
126
  'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
127
+ 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered, #974F0C)",
128
+ 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed, #B65C02)",
107
129
  'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
130
+ 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered, #5F3811)",
131
+ 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed, #974F0C)",
108
132
  'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
133
+ 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered, #FFC400)",
134
+ 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed, #FFAB00)",
109
135
  'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
136
+ 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered, #FFAB00)",
137
+ 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed, #FF991F)",
110
138
  'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
139
+ 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered, #FFAB00)",
140
+ 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed, #FFC400)",
111
141
  'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
142
+ 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered, #FFAB00)",
143
+ 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed, #FFC400)",
112
144
  'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
145
+ 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered, #57D9A3)",
146
+ 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed, #36B37E)",
113
147
  'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
148
+ 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered, #36B37E)",
149
+ 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed, #00875A)",
114
150
  'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
151
+ 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered, #36B37E)",
152
+ 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed, #57D9A3)",
115
153
  'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
154
+ 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered, #36B37E)",
155
+ 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed, #57D9A3)",
116
156
  'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
157
+ 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered, #00C7E6)",
158
+ 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed, #00B8D9)",
117
159
  'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
160
+ 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered, #00B8D9)",
161
+ 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed, #00A3BF)",
118
162
  'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
163
+ 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered, #00B8D9)",
164
+ 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed, #00C7E6)",
119
165
  'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
166
+ 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered, #00B8D9)",
167
+ 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed, #00C7E6)",
120
168
  'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
169
+ 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered, #2684FF)",
170
+ 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed, #0065FF)",
121
171
  'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
172
+ 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered, #0065FF)",
173
+ 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed, #0052CC)",
122
174
  'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
175
+ 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered, #0065FF)",
176
+ 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed, #2684FF)",
123
177
  'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
178
+ 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered, #0065FF)",
179
+ 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed, #2684FF)",
124
180
  'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
181
+ 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered, #8777D9)",
182
+ 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed, #6554C0)",
125
183
  'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
184
+ 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered, #6554C0)",
185
+ 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed, #5243AA)",
126
186
  'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
187
+ 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered, #6554C0)",
188
+ 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed, #8777D9)",
127
189
  'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
128
- 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
129
- 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
190
+ 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered, #6554C0)",
191
+ 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed, #8777D9)",
192
+ 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
193
+ 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
194
+ 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)",
195
+ 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
196
+ 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)",
197
+ 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)",
130
198
  'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
131
- 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
199
+ 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)",
200
+ 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)",
201
+ 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #AE4787)",
202
+ 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered, #943D73)",
203
+ 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
132
204
  'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
205
+ 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered, #5E6C84)",
206
+ 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed, #505F79)",
133
207
  'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
134
- 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
135
- 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
208
+ 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered, #505F79)",
209
+ 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed, #42526E)",
210
+ 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #505F79)",
211
+ 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered, #5E6C84)",
212
+ 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed, #6B778C)",
213
+ 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #42526E)",
214
+ 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered, #344563)",
215
+ 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed, #253858)",
136
216
  'color.background.disabled': "var(--ds-background-disabled, #091e4289)",
137
217
  'color.background.input': "var(--ds-background-input, #FAFBFC)",
138
218
  'color.background.input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
package/dist/es2019/components/box.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import { forwardRef } from 'react';
4
- import { jsx } from '@emotion/react';
4
+ import { css, jsx } from '@emotion/react';
5
+ import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
5
6
  import { parseXcss } from '../xcss/xcss';
6
- import { BaseBox } from './internal/base-box';
7
7
 
8
- // Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
9
- // So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
10
- // TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
8
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements
9
+
10
+ // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
11
+ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
11
12
  /**
12
13
  * __Box__
13
14
  *
@@ -18,8 +19,8 @@ import { BaseBox } from './internal/base-box';
18
19
  * - [Code](https://atlassian.design/components/primitives/box/code)
19
20
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
20
21
  */
21
- const Box = /*#__PURE__*/forwardRef(({
22
- as,
22
+ export const Box = /*#__PURE__*/forwardRef(({
23
+ as = 'div',
23
24
  children,
24
25
  backgroundColor,
25
26
  padding,
@@ -34,29 +35,33 @@ const Box = /*#__PURE__*/forwardRef(({
34
35
  xcss,
35
36
  ...htmlAttributes
36
37
  }, ref) => {
38
+ const Component = as;
37
39
  // This is to remove className from safeHtmlAttributes
40
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
38
41
  const {
39
42
  className: _spreadClass,
40
43
  ...safeHtmlAttributes
41
44
  } = htmlAttributes;
42
45
  const className = xcss && parseXcss(xcss);
43
- return jsx(BaseBox, _extends({
44
- as: as,
45
- backgroundColor: backgroundColor,
46
- padding: padding,
47
- paddingBlock: paddingBlock,
48
- paddingBlockStart: paddingBlockStart,
49
- paddingBlockEnd: paddingBlockEnd,
50
- paddingInline: paddingInline,
51
- paddingInlineStart: paddingInlineStart,
52
- paddingInlineEnd: paddingInlineEnd,
53
- style: style,
54
- testId: testId,
55
- ref: ref
56
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
57
- ,
58
- css: className
59
- }, safeHtmlAttributes), children);
46
+ return (
47
+ // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
48
+ jsx(Component, _extends({
49
+ style: style
50
+ // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
51
+ ,
52
+ ref: ref
53
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
54
+ }, safeHtmlAttributes, {
55
+ css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
56
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
57
+ className],
58
+ "data-testid": testId
59
+ }), children)
60
+ );
60
61
  });
61
- Box.displayName = 'Box';
62
- export default Box;
62
+ export default Box;
63
+ const baseStyles = css({
64
+ boxSizing: 'border-box',
65
+ appearance: 'none',
66
+ border: 'none'
67
+ });
package/dist/es2019/components/internal/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -48,11 +48,11 @@ export const spaceMap = {
48
48
  */
49
49
  /**
50
50
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
51
- * @codegen <<SignedSource::4a24a8ef38d5bf0a2803ceff3c393915>>
51
+ * @codegen <<SignedSource::3f4d926ce14cda107d25c697f3a0c200>>
52
52
  * @codegenId colors
53
53
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
54
54
  * @codegenParams ["border", "background", "shadow", "text", "fill"]
55
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::65311fc2a6a35bb34b99c859362ac840>>
55
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::815ddd719715ae06521cad06e1921e40>>
56
56
  */
57
57
  export const borderColorMap = {
58
58
  'color.border': "var(--ds-border, #091e4221)",
@@ -81,45 +81,125 @@ export const borderColorMap = {
81
81
  };
82
82
  export const backgroundColorMap = {
83
83
  'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest, #EEFBDA)",
84
+ 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered, #D3F1A7)",
85
+ 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed, #B3DF72)",
84
86
  'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler, #D3F1A7)",
87
+ 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered, #B3DF72)",
88
+ 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed, #94C748)",
85
89
  'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle, #94C748)",
90
+ 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered, #B3DF72)",
91
+ 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed, #D3F1A7)",
86
92
  'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder, #5B7F24)",
93
+ 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered, #37471F)",
94
+ 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed, #37471F)",
87
95
  'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest, #FF8F73)",
96
+ 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered, #FF7452)",
97
+ 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed, #FF5630)",
88
98
  'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler, #FF7452)",
99
+ 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered, #FF5630)",
100
+ 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed, #DE350B)",
89
101
  'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle, #DE350B)",
102
+ 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered, #FF5630)",
103
+ 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed, #FF7452)",
90
104
  'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder, #DE350B)",
105
+ 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered, #FF5630)",
106
+ 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed, #FF7452)",
91
107
  'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest, #F18D13)",
108
+ 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered, #FEC57B)",
109
+ 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed, #FFE2BD)",
92
110
  'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler, #B65C02)",
111
+ 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered, #F18D13)",
112
+ 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed, #FEC57B)",
93
113
  'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle, #5F3811)",
114
+ 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered, #974F0C)",
115
+ 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed, #B65C02)",
94
116
  'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder, #43290F)",
117
+ 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered, #5F3811)",
118
+ 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed, #974F0C)",
95
119
  'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest, #FFE380)",
120
+ 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered, #FFC400)",
121
+ 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed, #FFAB00)",
96
122
  'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler, #FFC400)",
123
+ 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered, #FFAB00)",
124
+ 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed, #FF991F)",
97
125
  'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle, #FF991F)",
126
+ 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered, #FFAB00)",
127
+ 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed, #FFC400)",
98
128
  'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder, #FF991F)",
129
+ 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered, #FFAB00)",
130
+ 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed, #FFC400)",
99
131
  'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest, #79F2C0)",
132
+ 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered, #57D9A3)",
133
+ 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed, #36B37E)",
100
134
  'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler, #57D9A3)",
135
+ 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered, #36B37E)",
136
+ 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed, #00875A)",
101
137
  'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle, #00875A)",
138
+ 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered, #36B37E)",
139
+ 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed, #57D9A3)",
102
140
  'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder, #00875A)",
141
+ 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered, #36B37E)",
142
+ 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed, #57D9A3)",
103
143
  'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest, #79E2F2)",
144
+ 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered, #00C7E6)",
145
+ 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed, #00B8D9)",
104
146
  'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler, #00C7E6)",
147
+ 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered, #00B8D9)",
148
+ 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed, #00A3BF)",
105
149
  'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle, #00A3BF)",
150
+ 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered, #00B8D9)",
151
+ 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed, #00C7E6)",
106
152
  'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder, #00A3BF)",
153
+ 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered, #00B8D9)",
154
+ 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed, #00C7E6)",
107
155
  'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest, #4C9AFF)",
156
+ 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered, #2684FF)",
157
+ 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed, #0065FF)",
108
158
  'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler, #2684FF)",
159
+ 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered, #0065FF)",
160
+ 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed, #0052CC)",
109
161
  'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle, #0052CC)",
162
+ 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered, #0065FF)",
163
+ 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed, #2684FF)",
110
164
  'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder, #0052CC)",
165
+ 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered, #0065FF)",
166
+ 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed, #2684FF)",
111
167
  'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest, #998DD9)",
168
+ 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered, #8777D9)",
169
+ 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed, #6554C0)",
112
170
  'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler, #8777D9)",
171
+ 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered, #6554C0)",
172
+ 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed, #5243AA)",
113
173
  'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle, #5243AA)",
174
+ 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered, #6554C0)",
175
+ 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed, #8777D9)",
114
176
  'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder, #5243AA)",
115
- 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #E774BB)",
116
- 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #E774BB)",
177
+ 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered, #6554C0)",
178
+ 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed, #8777D9)",
179
+ 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest, #FFECF8)",
180
+ 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered, #FDD0EC)",
181
+ 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed, #F797D2)",
182
+ 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
183
+ 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered, #F797D2)",
184
+ 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed, #E774BB)",
117
185
  'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle, #E774BB)",
118
- 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #E774BB)",
186
+ 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered, #F797D2)",
187
+ 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed, #FDD0EC)",
188
+ 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder, #AE4787)",
189
+ 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered, #943D73)",
190
+ 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed, #50253F)",
119
191
  'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest, #6B778C)",
192
+ 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered, #5E6C84)",
193
+ 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed, #505F79)",
120
194
  'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler, #5E6C84)",
121
- 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #42526E)",
122
- 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #505F79)",
195
+ 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered, #505F79)",
196
+ 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed, #42526E)",
197
+ 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle, #505F79)",
198
+ 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered, #5E6C84)",
199
+ 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed, #6B778C)",
200
+ 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder, #42526E)",
201
+ 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered, #344563)",
202
+ 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed, #253858)",
123
203
  'color.background.disabled': "var(--ds-background-disabled, #091e4289)",
124
204
  'color.background.input': "var(--ds-background-input, #FAFBFC)",
125
205
  'color.background.input.hovered': "var(--ds-background-input-hovered, #EBECF0)",
package/dist/esm/components/box.js CHANGED
@@ -4,13 +4,14 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
4
4
  _excluded2 = ["className"];
5
5
  /** @jsx jsx */
6
6
  import { forwardRef } from 'react';
7
- import { jsx } from '@emotion/react';
7
+ import { css, jsx } from '@emotion/react';
8
+ import { backgroundColorStylesMap, paddingStylesMap } from '../xcss/style-maps.partial';
8
9
  import { parseXcss } from '../xcss/xcss';
9
- import { BaseBox } from './internal/base-box';
10
10
 
11
- // Ideally we'd just Omit className from BaseBoxProps however that isn't working as expected
12
- // So, we're reconstructing the type: this should be the same as BaseBoxProps minus className
13
- // TODO: Merge Box and BaseBox so there is only one component. There's probably no need for BaseBox anymore.
11
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements
12
+
13
+ // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
14
+ // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
14
15
  /**
15
16
  * __Box__
16
17
  *
@@ -21,8 +22,9 @@ import { BaseBox } from './internal/base-box';
21
22
  * - [Code](https://atlassian.design/components/primitives/box/code)
22
23
  * - [Usage](https://atlassian.design/components/primitives/box/usage)
23
24
  */
24
- var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
25
- var as = _ref.as,
25
+ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
+ var _ref$as = _ref.as,
27
+ as = _ref$as === void 0 ? 'div' : _ref$as,
26
28
  children = _ref.children,
27
29
  backgroundColor = _ref.backgroundColor,
28
30
  padding = _ref.padding,
@@ -36,27 +38,31 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
36
38
  testId = _ref.testId,
37
39
  xcss = _ref.xcss,
38
40
  htmlAttributes = _objectWithoutProperties(_ref, _excluded);
41
+ var Component = as;
39
42
  // This is to remove className from safeHtmlAttributes
43
+ // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
40
44
  var _spreadClass = htmlAttributes.className,
41
45
  safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
42
46
  var className = xcss && parseXcss(xcss);
43
- return jsx(BaseBox, _extends({
44
- as: as,
45
- backgroundColor: backgroundColor,
46
- padding: padding,
47
- paddingBlock: paddingBlock,
48
- paddingBlockStart: paddingBlockStart,
49
- paddingBlockEnd: paddingBlockEnd,
50
- paddingInline: paddingInline,
51
- paddingInlineStart: paddingInlineStart,
52
- paddingInlineEnd: paddingInlineEnd,
53
- style: style,
54
- testId: testId,
55
- ref: ref
56
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
57
- ,
58
- css: className
59
- }, safeHtmlAttributes), children);
47
+ return (
48
+ // @ts-expect-error Expression produces a union type that is too complex to represent. I think this is unavoidable
49
+ jsx(Component, _extends({
50
+ style: style
51
+ // @ts-expect-error Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
52
+ ,
53
+ ref: ref
54
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
55
+ }, safeHtmlAttributes, {
56
+ css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
57
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
58
+ className],
59
+ "data-testid": testId
60
+ }), children)
61
+ );
60
62
  });
61
- Box.displayName = 'Box';
62
- export default Box;
63
+ export default Box;
64
+ var baseStyles = css({
65
+ boxSizing: 'border-box',
66
+ appearance: 'none',
67
+ border: 'none'
68
+ });
package/dist/esm/components/internal/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};