@atlaskit/primitives 7.4.1 → 8.0.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 (38) hide show
  1. package/CHANGELOG.md +79 -0
  2. package/dist/cjs/components/anchor.js +1 -1
  3. package/dist/cjs/components/box.js +1 -1
  4. package/dist/cjs/components/pressable.js +2 -1
  5. package/dist/cjs/responsive/constants.js +2 -2
  6. package/dist/cjs/responsive/media-helper.js +4 -4
  7. package/dist/cjs/xcss/style-maps.partial.js +3 -1
  8. package/dist/es2019/components/anchor.js +1 -1
  9. package/dist/es2019/components/box.js +1 -1
  10. package/dist/es2019/components/pressable.js +2 -1
  11. package/dist/es2019/responsive/constants.js +2 -2
  12. package/dist/es2019/responsive/media-helper.js +4 -4
  13. package/dist/es2019/xcss/style-maps.partial.js +3 -1
  14. package/dist/esm/components/anchor.js +1 -1
  15. package/dist/esm/components/box.js +1 -1
  16. package/dist/esm/components/pressable.js +2 -1
  17. package/dist/esm/responsive/constants.js +2 -2
  18. package/dist/esm/responsive/media-helper.js +4 -4
  19. package/dist/esm/xcss/style-maps.partial.js +3 -1
  20. package/dist/types/components/anchor.d.ts +1 -1
  21. package/dist/types/components/box.d.ts +1 -1
  22. package/dist/types/components/internal/surface-provider.d.ts +2 -2
  23. package/dist/types/components/pressable.d.ts +59 -23
  24. package/dist/types/responsive/constants.d.ts +2 -2
  25. package/dist/types/responsive/media-helper.d.ts +8 -8
  26. package/dist/types/xcss/style-maps.partial.d.ts +3 -1
  27. package/dist/types/xcss/xcss.d.ts +2 -0
  28. package/dist/types-ts4.5/components/anchor.d.ts +1 -1
  29. package/dist/types-ts4.5/components/box.d.ts +1 -1
  30. package/dist/types-ts4.5/components/internal/surface-provider.d.ts +2 -2
  31. package/dist/types-ts4.5/components/pressable.d.ts +59 -23
  32. package/dist/types-ts4.5/responsive/constants.d.ts +2 -2
  33. package/dist/types-ts4.5/responsive/media-helper.d.ts +8 -8
  34. package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +3 -1
  35. package/dist/types-ts4.5/xcss/xcss.d.ts +2 -0
  36. package/extract-react-types/pressable-props.tsx +1 -1
  37. package/package.json +3 -3
  38. package/scripts/color-codegen-template.tsx +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,84 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 8.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#108692](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108692)
8
+ [`294e1a9116fce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/294e1a9116fce) -
9
+ Update `color.skeleton` and `color.skeleton.subtle` to be valid backgroundColor values on XCSS.
10
+
11
+ ## 8.0.0
12
+
13
+ ### Major Changes
14
+
15
+ - [#109778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109778)
16
+ [`d20b004b7c9dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d20b004b7c9dd) -
17
+ Box no longer supports usage as a button. Use
18
+ [the Pressable primitive](https://atlassian.design/components/primitives/pressable/examples)
19
+ instead, which is more specialized and has built-in event tracking support.
20
+
21
+ - Pressable has focus ring styles built-in, so remove existing styles including
22
+ `@atlaskit/focus-ring`
23
+ - Pressable has a default cursor (`cursor: pointer`) built-in, so existing styles can be removed.
24
+ - Pressable has a `isDisabled` prop, rather than direct usage of the `disabled` attribute.
25
+ - Pressable is built on Box, so no visual changes are expected.
26
+
27
+ **Before migration**
28
+
29
+ ```
30
+ import { Box, xcss } from '@atlaskit/primitives';
31
+ import FocusRing from '@atlaskit/focus-ring';
32
+
33
+ const buttonStyles = xcss({
34
+ cursor: 'pointer',
35
+ backgroundColor: 'color.background.brand.bold'
36
+ });
37
+
38
+
39
+ const MyApp = () => (
40
+ <FocusRing>
41
+ <Box
42
+ as="button"
43
+ xcss={buttonStyles}
44
+ disabled={isDisabled}
45
+ >
46
+ Hello
47
+ </Box>
48
+ </FocusRing>
49
+ )
50
+ ```
51
+
52
+ **After migration**
53
+
54
+ ```
55
+ import { Pressable, xcss } from '@atlaskit/primitives';
56
+
57
+ const buttonStyles = xcss({
58
+ backgroundColor: 'color.background.brand.bold'
59
+ });
60
+
61
+ const MyApp = () => (
62
+ <Pressable
63
+ xcss={buttonStyles}
64
+ isDisabled={isDisabled}
65
+ >
66
+ Hello
67
+ </Pressable>
68
+ );
69
+ ```
70
+
71
+ ### Minor Changes
72
+
73
+ - [#108386](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108386)
74
+ [`8f3fa9e80b93c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f3fa9e80b93c) -
75
+ Updated xl breakpoint to be 1768px instead of 1760px (110.5rem instead of 110rem) to match updated
76
+ design guidance.
77
+
78
+ ### Patch Changes
79
+
80
+ - Updated dependencies
81
+
3
82
  ## 7.4.1
4
83
 
5
84
  ### Patch Changes
package/dist/cjs/components/anchor.js CHANGED
@@ -88,7 +88,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
88
88
  action: 'clicked',
89
89
  componentName: componentName || 'Anchor',
90
90
  packageName: "@atlaskit/primitives",
91
- packageVersion: "7.4.1",
91
+ packageVersion: "8.0.1",
92
92
  analyticsData: analyticsContext,
93
93
  actionSubject: 'link'
94
94
  });
package/dist/cjs/components/box.js CHANGED
@@ -19,7 +19,7 @@ var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock",
19
19
  */
20
20
  /** @jsx jsx */
21
21
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
22
- // Can either Exclude or Extract - here we're excluding all SVG-related elements
22
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
23
23
 
24
24
  // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
25
25
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/cjs/components/pressable.js CHANGED
@@ -81,7 +81,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
81
81
  action: 'clicked',
82
82
  componentName: componentName || 'Pressable',
83
83
  packageName: "@atlaskit/primitives",
84
- packageVersion: "7.4.1",
84
+ packageVersion: "8.0.1",
85
85
  analyticsData: analyticsContext,
86
86
  actionSubject: 'button'
87
87
  });
@@ -96,6 +96,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
96
96
  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
97
97
  styles = Array.isArray(xcssStyles) ? [].concat((0, _toConsumableArray2.default)(styles), (0, _toConsumableArray2.default)(xcssStyles)) : [].concat((0, _toConsumableArray2.default)(styles), [xcssStyles]);
98
98
  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
99
+ // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
99
100
  as: "button",
100
101
  ref: ref,
101
102
  testId: testId,
package/dist/cjs/responsive/constants.js CHANGED
@@ -46,13 +46,13 @@ var UNSAFE_BREAKPOINTS_CONFIG = exports.UNSAFE_BREAKPOINTS_CONFIG = {
46
46
  gridItemGutter: "var(--ds-space-400, 32px)",
47
47
  gridMargin: "var(--ds-space-400, 32px)",
48
48
  min: '90rem',
49
- max: '109.99rem'
49
+ max: '110.49rem'
50
50
  },
51
51
  // large high res
52
52
  xl: {
53
53
  gridItemGutter: "var(--ds-space-400, 32px)",
54
54
  gridMargin: "var(--ds-space-500, 40px)",
55
- min: '110rem',
55
+ min: '110.5rem',
56
56
  max: null
57
57
  }
58
58
  // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large
package/dist/cjs/responsive/media-helper.js CHANGED
@@ -21,22 +21,22 @@ var media = exports.media = {
21
21
  sm: '@media (min-width: 48rem)',
22
22
  md: '@media (min-width: 64rem)',
23
23
  lg: '@media (min-width: 90rem)',
24
- xl: '@media (min-width: 110rem)'
24
+ xl: '@media (min-width: 110.5rem)'
25
25
  },
26
26
  only: {
27
27
  xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
28
28
  xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
29
29
  sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
30
30
  md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
31
- lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
32
- xl: '@media (min-width: 110rem)'
31
+ lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
32
+ xl: '@media (min-width: 110.5rem)'
33
33
  },
34
34
  below: {
35
35
  xs: '@media not all and (min-width: 30rem)',
36
36
  sm: '@media not all and (min-width: 48rem)',
37
37
  md: '@media not all and (min-width: 64rem)',
38
38
  lg: '@media not all and (min-width: 90rem)',
39
- xl: '@media not all and (min-width: 110rem)'
39
+ xl: '@media not all and (min-width: 110.5rem)'
40
40
  }
41
41
  };
42
42
 
package/dist/cjs/xcss/style-maps.partial.js CHANGED
@@ -149,7 +149,7 @@ var surfaceColorMap = exports.surfaceColorMap = {
149
149
 
150
150
  /**
151
151
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
152
- * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
152
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
153
153
  * @codegenId colors
154
154
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
155
155
  * @codegenParams ["border", "background", "text", "fill"]
@@ -365,6 +365,8 @@ var backgroundColorMap = exports.backgroundColorMap = {
365
365
  'color.blanket': "var(--ds-blanket, #091e4289)",
366
366
  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
367
367
  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
368
+ 'color.skeleton': "var(--ds-skeleton, #F4F5F7)",
369
+ 'color.skeleton.subtle': "var(--ds-skeleton-subtle, #091e420a)",
368
370
  'elevation.surface': "var(--ds-surface, #FFFFFF)",
369
371
  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
370
372
  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
package/dist/es2019/components/anchor.js CHANGED
@@ -74,7 +74,7 @@ const AnchorNoRef = ({
74
74
  action: 'clicked',
75
75
  componentName: componentName || 'Anchor',
76
76
  packageName: "@atlaskit/primitives",
77
- packageVersion: "7.4.1",
77
+ packageVersion: "8.0.1",
78
78
  analyticsData: analyticsContext,
79
79
  actionSubject: 'link'
80
80
  });
package/dist/es2019/components/box.js CHANGED
@@ -11,7 +11,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
11
11
  import { parseXcss } from '../xcss/xcss';
12
12
  import { SurfaceContext } from './internal/surface-provider';
13
13
 
14
- // Can either Exclude or Extract - here we're excluding all SVG-related elements
14
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
15
15
 
16
16
  // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
17
17
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/es2019/components/pressable.js CHANGED
@@ -67,7 +67,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
67
67
  action: 'clicked',
68
68
  componentName: componentName || 'Pressable',
69
69
  packageName: "@atlaskit/primitives",
70
- packageVersion: "7.4.1",
70
+ packageVersion: "8.0.1",
71
71
  analyticsData: analyticsContext,
72
72
  actionSubject: 'button'
73
73
  });
@@ -82,6 +82,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
82
82
  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
83
83
  styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
84
84
  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
85
+ // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
85
86
  as: "button",
86
87
  ref: ref,
87
88
  testId: testId,
package/dist/es2019/responsive/constants.js CHANGED
@@ -40,13 +40,13 @@ export const UNSAFE_BREAKPOINTS_CONFIG = {
40
40
  gridItemGutter: "var(--ds-space-400, 32px)",
41
41
  gridMargin: "var(--ds-space-400, 32px)",
42
42
  min: '90rem',
43
- max: '109.99rem'
43
+ max: '110.49rem'
44
44
  },
45
45
  // large high res
46
46
  xl: {
47
47
  gridItemGutter: "var(--ds-space-400, 32px)",
48
48
  gridMargin: "var(--ds-space-500, 40px)",
49
- min: '110rem',
49
+ min: '110.5rem',
50
50
  max: null
51
51
  }
52
52
  // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large
package/dist/es2019/responsive/media-helper.js CHANGED
@@ -15,22 +15,22 @@ export const media = {
15
15
  sm: '@media (min-width: 48rem)',
16
16
  md: '@media (min-width: 64rem)',
17
17
  lg: '@media (min-width: 90rem)',
18
- xl: '@media (min-width: 110rem)'
18
+ xl: '@media (min-width: 110.5rem)'
19
19
  },
20
20
  only: {
21
21
  xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
22
22
  xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
23
23
  sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
24
24
  md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
25
- lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
26
- xl: '@media (min-width: 110rem)'
25
+ lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
26
+ xl: '@media (min-width: 110.5rem)'
27
27
  },
28
28
  below: {
29
29
  xs: '@media not all and (min-width: 30rem)',
30
30
  sm: '@media not all and (min-width: 48rem)',
31
31
  md: '@media not all and (min-width: 64rem)',
32
32
  lg: '@media not all and (min-width: 90rem)',
33
- xl: '@media not all and (min-width: 110rem)'
33
+ xl: '@media not all and (min-width: 110.5rem)'
34
34
  }
35
35
  };
36
36
 
package/dist/es2019/xcss/style-maps.partial.js CHANGED
@@ -144,7 +144,7 @@ export const surfaceColorMap = {
144
144
 
145
145
  /**
146
146
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
147
- * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
147
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
148
148
  * @codegenId colors
149
149
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
150
150
  * @codegenParams ["border", "background", "text", "fill"]
@@ -360,6 +360,8 @@ export const backgroundColorMap = {
360
360
  'color.blanket': "var(--ds-blanket, #091e4289)",
361
361
  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
362
362
  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
363
+ 'color.skeleton': "var(--ds-skeleton, #F4F5F7)",
364
+ 'color.skeleton.subtle': "var(--ds-skeleton-subtle, #091e420a)",
363
365
  'elevation.surface': "var(--ds-surface, #FFFFFF)",
364
366
  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
365
367
  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
package/dist/esm/components/anchor.js CHANGED
@@ -78,7 +78,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
78
78
  action: 'clicked',
79
79
  componentName: componentName || 'Anchor',
80
80
  packageName: "@atlaskit/primitives",
81
- packageVersion: "7.4.1",
81
+ packageVersion: "8.0.1",
82
82
  analyticsData: analyticsContext,
83
83
  actionSubject: 'link'
84
84
  });
package/dist/esm/components/box.js CHANGED
@@ -14,7 +14,7 @@ import { backgroundColorStylesMap, isSurfaceColorToken, paddingStylesMap, surfac
14
14
  import { parseXcss } from '../xcss/xcss';
15
15
  import { SurfaceContext } from './internal/surface-provider';
16
16
 
17
- // Can either Exclude or Extract - here we're excluding all SVG-related elements
17
+ // Can either Exclude or Extract - here we're excluding all SVG-related elements and button (handled by Pressable)
18
18
 
19
19
  // Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
20
20
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
package/dist/esm/components/pressable.js CHANGED
@@ -71,7 +71,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
71
71
  action: 'clicked',
72
72
  componentName: componentName || 'Pressable',
73
73
  packageName: "@atlaskit/primitives",
74
- packageVersion: "7.4.1",
74
+ packageVersion: "8.0.1",
75
75
  analyticsData: analyticsContext,
76
76
  actionSubject: 'button'
77
77
  });
@@ -86,6 +86,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
86
86
  // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
87
87
  styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
88
88
  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
89
+ // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
89
90
  as: "button",
90
91
  ref: ref,
91
92
  testId: testId,
package/dist/esm/responsive/constants.js CHANGED
@@ -40,13 +40,13 @@ export var UNSAFE_BREAKPOINTS_CONFIG = {
40
40
  gridItemGutter: "var(--ds-space-400, 32px)",
41
41
  gridMargin: "var(--ds-space-400, 32px)",
42
42
  min: '90rem',
43
- max: '109.99rem'
43
+ max: '110.49rem'
44
44
  },
45
45
  // large high res
46
46
  xl: {
47
47
  gridItemGutter: "var(--ds-space-400, 32px)",
48
48
  gridMargin: "var(--ds-space-500, 40px)",
49
- min: '110rem',
49
+ min: '110.5rem',
50
50
  max: null
51
51
  }
52
52
  // NOTE: We previously had an `xxl=135rem` breakpoint, but it was removed as it was not used anywhere and felt too large
package/dist/esm/responsive/media-helper.js CHANGED
@@ -15,22 +15,22 @@ export var media = {
15
15
  sm: '@media (min-width: 48rem)',
16
16
  md: '@media (min-width: 64rem)',
17
17
  lg: '@media (min-width: 90rem)',
18
- xl: '@media (min-width: 110rem)'
18
+ xl: '@media (min-width: 110.5rem)'
19
19
  },
20
20
  only: {
21
21
  xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
22
22
  xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
23
23
  sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
24
24
  md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
25
- lg: '@media (min-width: 90rem) and (max-width: 109.99rem)',
26
- xl: '@media (min-width: 110rem)'
25
+ lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
26
+ xl: '@media (min-width: 110.5rem)'
27
27
  },
28
28
  below: {
29
29
  xs: '@media not all and (min-width: 30rem)',
30
30
  sm: '@media not all and (min-width: 48rem)',
31
31
  md: '@media not all and (min-width: 64rem)',
32
32
  lg: '@media not all and (min-width: 90rem)',
33
- xl: '@media not all and (min-width: 110rem)'
33
+ xl: '@media not all and (min-width: 110.5rem)'
34
34
  }
35
35
  };
36
36
 
package/dist/esm/xcss/style-maps.partial.js CHANGED
@@ -144,7 +144,7 @@ export var surfaceColorMap = {
144
144
 
145
145
  /**
146
146
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
147
- * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
147
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
148
148
  * @codegenId colors
149
149
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
150
150
  * @codegenParams ["border", "background", "text", "fill"]
@@ -360,6 +360,8 @@ export var backgroundColorMap = {
360
360
  'color.blanket': "var(--ds-blanket, #091e4289)",
361
361
  'color.blanket.selected': "var(--ds-blanket-selected, #388BFF14)",
362
362
  'color.blanket.danger': "var(--ds-blanket-danger, #EF5C4814)",
363
+ 'color.skeleton': "var(--ds-skeleton, #F4F5F7)",
364
+ 'color.skeleton.subtle': "var(--ds-skeleton-subtle, #091e420a)",
363
365
  'elevation.surface': "var(--ds-surface, #FFFFFF)",
364
366
  'elevation.surface.hovered': "var(--ds-surface-hovered, #FAFBFC)",
365
367
  'elevation.surface.pressed': "var(--ds-surface-pressed, #F4F5F7)",
package/dist/types/components/anchor.d.ts CHANGED
@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
4
4
  import { type BoxProps } from './box';
5
- export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
5
+ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'onClick' | 'style' | 'className'> & {
6
6
  /**
7
7
  * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
8
8
  */
package/dist/types/components/box.d.ts CHANGED
@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
6
6
  import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
7
7
  import { type SVGElements } from './internal/types';
8
8
  import type { BasePrimitiveProps, StyleProp } from './types';
9
- type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
9
+ type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
10
10
  type CustomElementType<P = any> = {
11
11
  [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
12
12
  }[AllowedElements];
package/dist/types/components/internal/surface-provider.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  *
5
5
  * A surface context provides context information on the current background (if set).
6
6
  */
7
- export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
7
+ export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.skeleton" | "color.skeleton.subtle" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
8
8
  /**
9
9
  * __useSurface__
10
10
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.background.a
12
12
  *
13
13
  * @see SurfaceContext
14
14
  */
15
- export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
15
+ export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.skeleton" | "color.skeleton.subtle" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
package/dist/types/components/pressable.d.ts CHANGED
@@ -1,12 +1,20 @@
1
- import React from 'react';
1
+ import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import { type BoxProps } from './box';
4
- export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
5
- isDisabled?: boolean;
3
+ import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
4
+ import type { BasePrimitiveProps, StyleProp } from './types';
5
+ type BasePressableProps = {
6
+ /**
7
+ * Elements to be rendered inside the Box.
8
+ */
9
+ children?: ReactNode;
6
10
  /**
7
11
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
8
12
  */
9
13
  onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
14
+ /**
15
+ * Whether the button is disabled.
16
+ */
17
+ isDisabled?: boolean;
10
18
  /**
11
19
  * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
12
20
  */
@@ -19,7 +27,53 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
19
27
  * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
20
28
  */
21
29
  analyticsContext?: Record<string, any>;
30
+ /**
31
+ * Token representing background color with a built-in fallback value.
32
+ */
33
+ backgroundColor?: BackgroundColor;
34
+ /**
35
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
36
+ *
37
+ * @see paddingBlock
38
+ * @see paddingInline
39
+ */
40
+ padding?: Space;
41
+ /**
42
+ * Tokens representing CSS shorthand `paddingBlock`.
43
+ *
44
+ * @see paddingBlockStart
45
+ * @see paddingBlockEnd
46
+ */
47
+ paddingBlock?: Space;
48
+ /**
49
+ * Tokens representing CSS `paddingBlockStart`.
50
+ */
51
+ paddingBlockStart?: Space;
52
+ /**
53
+ * Tokens representing CSS `paddingBlockEnd`.
54
+ */
55
+ paddingBlockEnd?: Space;
56
+ /**
57
+ * Tokens representing CSS shorthand `paddingInline`.
58
+ *
59
+ * @see paddingInlineStart
60
+ * @see paddingInlineEnd
61
+ */
62
+ paddingInline?: Space;
63
+ /**
64
+ * Tokens representing CSS `paddingInlineStart`.
65
+ */
66
+ paddingInlineStart?: Space;
67
+ /**
68
+ * Tokens representing CSS `paddingInlineEnd`.
69
+ */
70
+ paddingInlineEnd?: Space;
71
+ /**
72
+ * Forwarded ref.
73
+ */
74
+ ref?: ComponentPropsWithRef<'button'>['ref'];
22
75
  };
76
+ export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
23
77
  /**
24
78
  * __Pressable__
25
79
  *
@@ -29,23 +83,5 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
29
83
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
30
84
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
31
85
  */
32
- declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
33
- isDisabled?: boolean | undefined;
34
- /**
35
- * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
36
- */
37
- onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
38
- /**
39
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
40
- */
41
- interactionName?: string | undefined;
42
- /**
43
- * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
44
- */
45
- componentName?: string | undefined;
46
- /**
47
- * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
48
- */
49
- analyticsContext?: Record<string, any> | undefined;
50
- }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
86
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
51
87
  export default Pressable;
package/dist/types/responsive/constants.d.ts CHANGED
@@ -35,12 +35,12 @@ export declare const UNSAFE_BREAKPOINTS_CONFIG: {
35
35
  readonly gridItemGutter: "var(--ds-space-400)";
36
36
  readonly gridMargin: "var(--ds-space-400)";
37
37
  readonly min: "90rem";
38
- readonly max: "109.99rem";
38
+ readonly max: "110.49rem";
39
39
  };
40
40
  readonly xl: {
41
41
  readonly gridItemGutter: "var(--ds-space-400)";
42
42
  readonly gridMargin: "var(--ds-space-500)";
43
- readonly min: "110rem";
43
+ readonly min: "110.5rem";
44
44
  readonly max: null;
45
45
  };
46
46
  };
package/dist/types/responsive/media-helper.d.ts CHANGED
@@ -15,22 +15,22 @@ export declare const media: {
15
15
  readonly sm: "@media (min-width: 48rem)";
16
16
  readonly md: "@media (min-width: 64rem)";
17
17
  readonly lg: "@media (min-width: 90rem)";
18
- readonly xl: "@media (min-width: 110rem)";
18
+ readonly xl: "@media (min-width: 110.5rem)";
19
19
  };
20
20
  only: {
21
21
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
22
22
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
23
23
  readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
24
24
  readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
25
- readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
26
- readonly xl: "@media (min-width: 110rem)";
25
+ readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
26
+ readonly xl: "@media (min-width: 110.5rem)";
27
27
  };
28
28
  below: {
29
29
  readonly xs: "@media not all and (min-width: 30rem)";
30
30
  readonly sm: "@media not all and (min-width: 48rem)";
31
31
  readonly md: "@media not all and (min-width: 64rem)";
32
32
  readonly lg: "@media not all and (min-width: 90rem)";
33
- readonly xl: "@media not all and (min-width: 110rem)";
33
+ readonly xl: "@media not all and (min-width: 110.5rem)";
34
34
  };
35
35
  };
36
36
  /**
@@ -43,21 +43,21 @@ export declare const UNSAFE_media: {
43
43
  readonly sm: "@media (min-width: 48rem)";
44
44
  readonly md: "@media (min-width: 64rem)";
45
45
  readonly lg: "@media (min-width: 90rem)";
46
- readonly xl: "@media (min-width: 110rem)";
46
+ readonly xl: "@media (min-width: 110.5rem)";
47
47
  };
48
48
  only: {
49
49
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
50
50
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
51
51
  readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
52
52
  readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
53
- readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
54
- readonly xl: "@media (min-width: 110rem)";
53
+ readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
54
+ readonly xl: "@media (min-width: 110.5rem)";
55
55
  };
56
56
  below: {
57
57
  readonly xs: "@media not all and (min-width: 30rem)";
58
58
  readonly sm: "@media not all and (min-width: 48rem)";
59
59
  readonly md: "@media not all and (min-width: 64rem)";
60
60
  readonly lg: "@media not all and (min-width: 90rem)";
61
- readonly xl: "@media not all and (min-width: 110rem)";
61
+ readonly xl: "@media not all and (min-width: 110.5rem)";
62
62
  };
63
63
  };
package/dist/types/xcss/style-maps.partial.d.ts CHANGED
@@ -164,7 +164,7 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
164
164
  */
165
165
  /**
166
166
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
167
- * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
167
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
168
168
  * @codegenId colors
169
169
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
170
170
  * @codegenParams ["border", "background", "text", "fill"]
@@ -381,6 +381,8 @@ export declare const backgroundColorMap: {
381
381
  readonly 'color.blanket': "var(--ds-blanket)";
382
382
  readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
383
383
  readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
384
+ readonly 'color.skeleton': "var(--ds-skeleton)";
385
+ readonly 'color.skeleton.subtle': "var(--ds-skeleton-subtle)";
384
386
  readonly 'elevation.surface': "var(--ds-surface)";
385
387
  readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
386
388
  readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
package/dist/types/xcss/xcss.d.ts CHANGED
@@ -189,6 +189,8 @@ export declare const tokensMap: {
189
189
  readonly 'color.blanket': "var(--ds-blanket)";
190
190
  readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
191
191
  readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
192
+ readonly 'color.skeleton': "var(--ds-skeleton)";
193
+ readonly 'color.skeleton.subtle': "var(--ds-skeleton-subtle)";
192
194
  readonly 'elevation.surface': "var(--ds-surface)";
193
195
  readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
194
196
  readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
package/dist/types-ts4.5/components/anchor.d.ts CHANGED
@@ -2,7 +2,7 @@ import React, { type Ref } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
4
4
  import { type BoxProps } from './box';
5
- export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'style' | 'onClick'> & {
5
+ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'onClick' | 'style' | 'className'> & {
6
6
  /**
7
7
  * Handler called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
8
8
  */
package/dist/types-ts4.5/components/box.d.ts CHANGED
@@ -6,7 +6,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactEl
6
6
  import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
7
7
  import { type SVGElements } from './internal/types';
8
8
  import type { BasePrimitiveProps, StyleProp } from './types';
9
- type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
9
+ type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements | 'button'>;
10
10
  type CustomElementType<P = any> = {
11
11
  [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
12
12
  }[AllowedElements];
package/dist/types-ts4.5/components/internal/surface-provider.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  *
5
5
  * A surface context provides context information on the current background (if set).
6
6
  */
7
- export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
7
+ export declare const SurfaceContext: import("react").Context<"color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.skeleton" | "color.skeleton.subtle" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current">;
8
8
  /**
9
9
  * __useSurface__
10
10
  *
@@ -12,4 +12,4 @@ export declare const SurfaceContext: import("react").Context<"color.background.a
12
12
  *
13
13
  * @see SurfaceContext
14
14
  */
15
- export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
15
+ export declare const useSurface: () => "color.background.accent.lime.subtlest" | "color.background.accent.lime.subtlest.hovered" | "color.background.accent.lime.subtlest.pressed" | "color.background.accent.lime.subtler" | "color.background.accent.lime.subtler.hovered" | "color.background.accent.lime.subtler.pressed" | "color.background.accent.lime.subtle" | "color.background.accent.lime.subtle.hovered" | "color.background.accent.lime.subtle.pressed" | "color.background.accent.lime.bolder" | "color.background.accent.lime.bolder.hovered" | "color.background.accent.lime.bolder.pressed" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtlest.hovered" | "color.background.accent.red.subtlest.pressed" | "color.background.accent.red.subtler" | "color.background.accent.red.subtler.hovered" | "color.background.accent.red.subtler.pressed" | "color.background.accent.red.subtle" | "color.background.accent.red.subtle.hovered" | "color.background.accent.red.subtle.pressed" | "color.background.accent.red.bolder" | "color.background.accent.red.bolder.hovered" | "color.background.accent.red.bolder.pressed" | "color.background.accent.orange.subtlest" | "color.background.accent.orange.subtlest.hovered" | "color.background.accent.orange.subtlest.pressed" | "color.background.accent.orange.subtler" | "color.background.accent.orange.subtler.hovered" | "color.background.accent.orange.subtler.pressed" | "color.background.accent.orange.subtle" | "color.background.accent.orange.subtle.hovered" | "color.background.accent.orange.subtle.pressed" | "color.background.accent.orange.bolder" | "color.background.accent.orange.bolder.hovered" | "color.background.accent.orange.bolder.pressed" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtlest.hovered" | "color.background.accent.yellow.subtlest.pressed" | "color.background.accent.yellow.subtler" | "color.background.accent.yellow.subtler.hovered" | "color.background.accent.yellow.subtler.pressed" | "color.background.accent.yellow.subtle" | "color.background.accent.yellow.subtle.hovered" | "color.background.accent.yellow.subtle.pressed" | "color.background.accent.yellow.bolder" | "color.background.accent.yellow.bolder.hovered" | "color.background.accent.yellow.bolder.pressed" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtlest.hovered" | "color.background.accent.green.subtlest.pressed" | "color.background.accent.green.subtler" | "color.background.accent.green.subtler.hovered" | "color.background.accent.green.subtler.pressed" | "color.background.accent.green.subtle" | "color.background.accent.green.subtle.hovered" | "color.background.accent.green.subtle.pressed" | "color.background.accent.green.bolder" | "color.background.accent.green.bolder.hovered" | "color.background.accent.green.bolder.pressed" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtlest.hovered" | "color.background.accent.teal.subtlest.pressed" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtler.hovered" | "color.background.accent.teal.subtler.pressed" | "color.background.accent.teal.subtle" | "color.background.accent.teal.subtle.hovered" | "color.background.accent.teal.subtle.pressed" | "color.background.accent.teal.bolder" | "color.background.accent.teal.bolder.hovered" | "color.background.accent.teal.bolder.pressed" | "color.background.accent.blue.subtlest" | "color.background.accent.blue.subtlest.hovered" | "color.background.accent.blue.subtlest.pressed" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtler.hovered" | "color.background.accent.blue.subtler.pressed" | "color.background.accent.blue.subtle" | "color.background.accent.blue.subtle.hovered" | "color.background.accent.blue.subtle.pressed" | "color.background.accent.blue.bolder" | "color.background.accent.blue.bolder.hovered" | "color.background.accent.blue.bolder.pressed" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtlest.hovered" | "color.background.accent.purple.subtlest.pressed" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtler.hovered" | "color.background.accent.purple.subtler.pressed" | "color.background.accent.purple.subtle" | "color.background.accent.purple.subtle.hovered" | "color.background.accent.purple.subtle.pressed" | "color.background.accent.purple.bolder" | "color.background.accent.purple.bolder.hovered" | "color.background.accent.purple.bolder.pressed" | "color.background.accent.magenta.subtlest" | "color.background.accent.magenta.subtlest.hovered" | "color.background.accent.magenta.subtlest.pressed" | "color.background.accent.magenta.subtler" | "color.background.accent.magenta.subtler.hovered" | "color.background.accent.magenta.subtler.pressed" | "color.background.accent.magenta.subtle" | "color.background.accent.magenta.subtle.hovered" | "color.background.accent.magenta.subtle.pressed" | "color.background.accent.magenta.bolder" | "color.background.accent.magenta.bolder.hovered" | "color.background.accent.magenta.bolder.pressed" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtlest.hovered" | "color.background.accent.gray.subtlest.pressed" | "color.background.accent.gray.subtler" | "color.background.accent.gray.subtler.hovered" | "color.background.accent.gray.subtler.pressed" | "color.background.accent.gray.subtle" | "color.background.accent.gray.subtle.hovered" | "color.background.accent.gray.subtle.pressed" | "color.background.accent.gray.bolder" | "color.background.accent.gray.bolder.hovered" | "color.background.accent.gray.bolder.pressed" | "color.background.disabled" | "color.background.input" | "color.background.input.hovered" | "color.background.input.pressed" | "color.background.inverse.subtle" | "color.background.inverse.subtle.hovered" | "color.background.inverse.subtle.pressed" | "color.background.neutral" | "color.background.neutral.hovered" | "color.background.neutral.pressed" | "color.background.neutral.subtle" | "color.background.neutral.subtle.hovered" | "color.background.neutral.subtle.pressed" | "color.background.neutral.bold" | "color.background.neutral.bold.hovered" | "color.background.neutral.bold.pressed" | "color.background.selected" | "color.background.selected.hovered" | "color.background.selected.pressed" | "color.background.selected.bold" | "color.background.selected.bold.hovered" | "color.background.selected.bold.pressed" | "color.background.brand.subtlest" | "color.background.brand.subtlest.hovered" | "color.background.brand.subtlest.pressed" | "color.background.brand.bold" | "color.background.brand.bold.hovered" | "color.background.brand.bold.pressed" | "color.background.brand.boldest" | "color.background.brand.boldest.hovered" | "color.background.brand.boldest.pressed" | "color.background.danger" | "color.background.danger.hovered" | "color.background.danger.pressed" | "color.background.danger.bold" | "color.background.danger.bold.hovered" | "color.background.danger.bold.pressed" | "color.background.warning" | "color.background.warning.hovered" | "color.background.warning.pressed" | "color.background.warning.bold" | "color.background.warning.bold.hovered" | "color.background.warning.bold.pressed" | "color.background.success" | "color.background.success.hovered" | "color.background.success.pressed" | "color.background.success.bold" | "color.background.success.bold.hovered" | "color.background.success.bold.pressed" | "color.background.discovery" | "color.background.discovery.hovered" | "color.background.discovery.pressed" | "color.background.discovery.bold" | "color.background.discovery.bold.hovered" | "color.background.discovery.bold.pressed" | "color.background.information" | "color.background.information.hovered" | "color.background.information.pressed" | "color.background.information.bold" | "color.background.information.bold.hovered" | "color.background.information.bold.pressed" | "color.blanket" | "color.blanket.selected" | "color.blanket.danger" | "color.skeleton" | "color.skeleton.subtle" | "elevation.surface" | "elevation.surface.hovered" | "elevation.surface.pressed" | "elevation.surface.overlay" | "elevation.surface.overlay.hovered" | "elevation.surface.overlay.pressed" | "elevation.surface.raised" | "elevation.surface.raised.hovered" | "elevation.surface.raised.pressed" | "elevation.surface.sunken" | "utility.elevation.surface.current";
package/dist/types-ts4.5/components/pressable.d.ts CHANGED
@@ -1,12 +1,20 @@
1
- import React from 'react';
1
+ import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
- import { type BoxProps } from './box';
4
- export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style' | 'onClick'> & {
5
- isDisabled?: boolean;
3
+ import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
4
+ import type { BasePrimitiveProps, StyleProp } from './types';
5
+ type BasePressableProps = {
6
+ /**
7
+ * Elements to be rendered inside the Box.
8
+ */
9
+ children?: ReactNode;
6
10
  /**
7
11
  * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
8
12
  */
9
13
  onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
14
+ /**
15
+ * Whether the button is disabled.
16
+ */
17
+ isDisabled?: boolean;
10
18
  /**
11
19
  * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
12
20
  */
@@ -19,7 +27,53 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
19
27
  * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
20
28
  */
21
29
  analyticsContext?: Record<string, any>;
30
+ /**
31
+ * Token representing background color with a built-in fallback value.
32
+ */
33
+ backgroundColor?: BackgroundColor;
34
+ /**
35
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
36
+ *
37
+ * @see paddingBlock
38
+ * @see paddingInline
39
+ */
40
+ padding?: Space;
41
+ /**
42
+ * Tokens representing CSS shorthand `paddingBlock`.
43
+ *
44
+ * @see paddingBlockStart
45
+ * @see paddingBlockEnd
46
+ */
47
+ paddingBlock?: Space;
48
+ /**
49
+ * Tokens representing CSS `paddingBlockStart`.
50
+ */
51
+ paddingBlockStart?: Space;
52
+ /**
53
+ * Tokens representing CSS `paddingBlockEnd`.
54
+ */
55
+ paddingBlockEnd?: Space;
56
+ /**
57
+ * Tokens representing CSS shorthand `paddingInline`.
58
+ *
59
+ * @see paddingInlineStart
60
+ * @see paddingInlineEnd
61
+ */
62
+ paddingInline?: Space;
63
+ /**
64
+ * Tokens representing CSS `paddingInlineStart`.
65
+ */
66
+ paddingInlineStart?: Space;
67
+ /**
68
+ * Tokens representing CSS `paddingInlineEnd`.
69
+ */
70
+ paddingInlineEnd?: Space;
71
+ /**
72
+ * Forwarded ref.
73
+ */
74
+ ref?: ComponentPropsWithRef<'button'>['ref'];
22
75
  };
76
+ export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
23
77
  /**
24
78
  * __Pressable__
25
79
  *
@@ -29,23 +83,5 @@ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'style
29
83
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
30
84
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
31
85
  */
32
- declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "as" | "onClick"> & {
33
- isDisabled?: boolean | undefined;
34
- /**
35
- * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
36
- */
37
- onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
38
- /**
39
- * An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
40
- */
41
- interactionName?: string | undefined;
42
- /**
43
- * An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
44
- */
45
- componentName?: string | undefined;
46
- /**
47
- * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
48
- */
49
- analyticsContext?: Record<string, any> | undefined;
50
- }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof import("./types").BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
86
+ declare const Pressable: React.ForwardRefExoticComponent<Pick<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
51
87
  export default Pressable;
package/dist/types-ts4.5/responsive/constants.d.ts CHANGED
@@ -35,12 +35,12 @@ export declare const UNSAFE_BREAKPOINTS_CONFIG: {
35
35
  readonly gridItemGutter: "var(--ds-space-400)";
36
36
  readonly gridMargin: "var(--ds-space-400)";
37
37
  readonly min: "90rem";
38
- readonly max: "109.99rem";
38
+ readonly max: "110.49rem";
39
39
  };
40
40
  readonly xl: {
41
41
  readonly gridItemGutter: "var(--ds-space-400)";
42
42
  readonly gridMargin: "var(--ds-space-500)";
43
- readonly min: "110rem";
43
+ readonly min: "110.5rem";
44
44
  readonly max: null;
45
45
  };
46
46
  };
package/dist/types-ts4.5/responsive/media-helper.d.ts CHANGED
@@ -15,22 +15,22 @@ export declare const media: {
15
15
  readonly sm: "@media (min-width: 48rem)";
16
16
  readonly md: "@media (min-width: 64rem)";
17
17
  readonly lg: "@media (min-width: 90rem)";
18
- readonly xl: "@media (min-width: 110rem)";
18
+ readonly xl: "@media (min-width: 110.5rem)";
19
19
  };
20
20
  only: {
21
21
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
22
22
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
23
23
  readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
24
24
  readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
25
- readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
26
- readonly xl: "@media (min-width: 110rem)";
25
+ readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
26
+ readonly xl: "@media (min-width: 110.5rem)";
27
27
  };
28
28
  below: {
29
29
  readonly xs: "@media not all and (min-width: 30rem)";
30
30
  readonly sm: "@media not all and (min-width: 48rem)";
31
31
  readonly md: "@media not all and (min-width: 64rem)";
32
32
  readonly lg: "@media not all and (min-width: 90rem)";
33
- readonly xl: "@media not all and (min-width: 110rem)";
33
+ readonly xl: "@media not all and (min-width: 110.5rem)";
34
34
  };
35
35
  };
36
36
  /**
@@ -43,21 +43,21 @@ export declare const UNSAFE_media: {
43
43
  readonly sm: "@media (min-width: 48rem)";
44
44
  readonly md: "@media (min-width: 64rem)";
45
45
  readonly lg: "@media (min-width: 90rem)";
46
- readonly xl: "@media (min-width: 110rem)";
46
+ readonly xl: "@media (min-width: 110.5rem)";
47
47
  };
48
48
  only: {
49
49
  readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
50
50
  readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
51
51
  readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
52
52
  readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
53
- readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
54
- readonly xl: "@media (min-width: 110rem)";
53
+ readonly lg: "@media (min-width: 90rem) and (max-width: 110.49rem)";
54
+ readonly xl: "@media (min-width: 110.5rem)";
55
55
  };
56
56
  below: {
57
57
  readonly xs: "@media not all and (min-width: 30rem)";
58
58
  readonly sm: "@media not all and (min-width: 48rem)";
59
59
  readonly md: "@media not all and (min-width: 64rem)";
60
60
  readonly lg: "@media not all and (min-width: 90rem)";
61
- readonly xl: "@media not all and (min-width: 110rem)";
61
+ readonly xl: "@media not all and (min-width: 110.5rem)";
62
62
  };
63
63
  };
package/dist/types-ts4.5/xcss/style-maps.partial.d.ts CHANGED
@@ -164,7 +164,7 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
164
164
  */
165
165
  /**
166
166
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
167
- * @codegen <<SignedSource::485e5a3659092381fa81ce940d43a939>>
167
+ * @codegen <<SignedSource::b0d40448c552e91658e4f2267d9f40b3>>
168
168
  * @codegenId colors
169
169
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
170
170
  * @codegenParams ["border", "background", "text", "fill"]
@@ -381,6 +381,8 @@ export declare const backgroundColorMap: {
381
381
  readonly 'color.blanket': "var(--ds-blanket)";
382
382
  readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
383
383
  readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
384
+ readonly 'color.skeleton': "var(--ds-skeleton)";
385
+ readonly 'color.skeleton.subtle': "var(--ds-skeleton-subtle)";
384
386
  readonly 'elevation.surface': "var(--ds-surface)";
385
387
  readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
386
388
  readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
package/dist/types-ts4.5/xcss/xcss.d.ts CHANGED
@@ -189,6 +189,8 @@ export declare const tokensMap: {
189
189
  readonly 'color.blanket': "var(--ds-blanket)";
190
190
  readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
191
191
  readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
192
+ readonly 'color.skeleton': "var(--ds-skeleton)";
193
+ readonly 'color.skeleton.subtle': "var(--ds-skeleton-subtle)";
192
194
  readonly 'elevation.surface': "var(--ds-surface)";
193
195
  readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
194
196
  readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
package/extract-react-types/pressable-props.tsx CHANGED
@@ -104,7 +104,7 @@ export default function Pressable(
104
104
  /**
105
105
  * Elements to be rendered inside the primitive.
106
106
  */
107
- children: React.ReactNode;
107
+ children?: React.ReactNode;
108
108
 
109
109
  /**
110
110
  * Forwarded ref element.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "7.4.1",
3
+ "version": "8.0.1",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -125,10 +125,10 @@
125
125
  "dependencies": {
126
126
  "@atlaskit/analytics-next": "^9.3.0",
127
127
  "@atlaskit/app-provider": "^1.3.0",
128
- "@atlaskit/css": "^0.2.0",
128
+ "@atlaskit/css": "^0.3.0",
129
129
  "@atlaskit/ds-lib": "^2.3.0",
130
130
  "@atlaskit/interaction-context": "^2.1.0",
131
- "@atlaskit/tokens": "^1.51.0",
131
+ "@atlaskit/tokens": "^1.52.0",
132
132
  "@atlaskit/visually-hidden": "^1.4.0",
133
133
  "@babel/runtime": "^7.0.0",
134
134
  "@emotion/react": "^11.7.1",
package/scripts/color-codegen-template.tsx CHANGED
@@ -26,7 +26,8 @@ const tokenStyles = {
26
26
  t.token.startsWith(tokenStyles.background.prefix) ||
27
27
  t.token.startsWith('elevation.surface') ||
28
28
  t.token.startsWith('utility.elevation.surface') ||
29
- t.token.startsWith('color.blanket'),
29
+ t.token.startsWith('color.blanket') ||
30
+ t.token.startsWith('color.skeleton'),
30
31
  },
31
32
  border: {
32
33
  objectName: 'borderColor',