@atlaskit/primitives 0.8.8 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/constellation/box/examples.mdx +33 -2
- package/dist/cjs/internal/xcss.js +3 -6
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/internal/xcss.js +3 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/internal/xcss.js +3 -6
- package/dist/esm/version.json +1 -1
- package/dist/types/internal/style-maps.partial.d.ts +2 -2
- package/package.json +18 -6
- package/report.api.md +1 -1
- package/tmp/api-report-tmp.d.ts +0 -673
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 0.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
13
|
+
## 0.8.9
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [`da1727baf77`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da1727baf77) - Allow non tokenised values to be passed through for tokenisable properties like `padding`. Adds type hinting for zIndex CSS property.
|
|
18
|
+
|
|
3
19
|
## 0.8.8
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -1,7 +1,38 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Box
|
|
3
|
-
description: Box primitive
|
|
3
|
+
description: Box is a primitive component that leverages the foundations of the Atlassian Design System.
|
|
4
4
|
order: 0
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
import BoxBasic from '../../examples/constellation/box/basic';
|
|
8
|
+
import BoxPadding from '../../examples/constellation/box/padding';
|
|
9
|
+
import BoxBackgroundColor from '../../examples/constellation/box/background-color';
|
|
10
|
+
import BoxXcss from '../../examples/constellation/box/xcss';
|
|
11
|
+
|
|
12
|
+
## Basic
|
|
13
|
+
|
|
14
|
+
Box is a general-purpose container with controlled use of design tokens. Use the given props to configure display behaviour using scalable recommendations from the Atlassian Design System.
|
|
15
|
+
|
|
16
|
+
<Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
|
|
17
|
+
|
|
18
|
+
## Padding
|
|
19
|
+
|
|
20
|
+
Padding props can be used to access spacing design token and control internal layout. The following example demonstrates how each prop works individually:
|
|
21
|
+
|
|
22
|
+
<Example Component={BoxPadding} packageName="@atlaskit/primitives/box" />
|
|
23
|
+
|
|
24
|
+
*Note*: The nomenclature used by these props follows [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties). It might be less intuitive at first but they are adequate to properly support different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) in our products.
|
|
25
|
+
|
|
26
|
+
## Background color
|
|
27
|
+
|
|
28
|
+
`Box` accepts a wide variety of background colors, referenced as semantic design tokens.
|
|
29
|
+
|
|
30
|
+
<Example Component={BoxBackgroundColor} packageName="@atlaskit/primitives/box" />
|
|
31
|
+
|
|
32
|
+
## xCSS
|
|
33
|
+
|
|
34
|
+
Box also exposes an `xcss` prop. This prop can take `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xCSS takes most CSS properties, and when a token exists, the rule accepts that token as a value.
|
|
35
|
+
|
|
36
|
+
<Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
|
|
37
|
+
|
|
38
|
+
For more information on xCSS, see the dedicated [xCSS](/components/primitives/xcss) documentation.
|
|
@@ -40,7 +40,6 @@ var tokensMap = {
|
|
|
40
40
|
insetInline: _styleMaps.insetMap,
|
|
41
41
|
insetInlineEnd: _styleMaps.insetMap,
|
|
42
42
|
insetInlineStart: _styleMaps.insetMap,
|
|
43
|
-
layer: _styleMaps.layerMap,
|
|
44
43
|
left: _styleMaps.dimensionMap,
|
|
45
44
|
maxBlockSize: _styleMaps.dimensionMap,
|
|
46
45
|
maxHeight: _styleMaps.dimensionMap,
|
|
@@ -68,7 +67,8 @@ var tokensMap = {
|
|
|
68
67
|
right: _styleMaps.dimensionMap,
|
|
69
68
|
rowGap: _styleMaps.spaceMap,
|
|
70
69
|
top: _styleMaps.dimensionMap,
|
|
71
|
-
width: _styleMaps.dimensionMap
|
|
70
|
+
width: _styleMaps.dimensionMap,
|
|
71
|
+
zIndex: _styleMaps.layerMap
|
|
72
72
|
};
|
|
73
73
|
var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
|
|
74
74
|
var isSafeEnvToThrow = function isSafeEnvToThrow() {
|
|
@@ -117,11 +117,8 @@ var transformStyles = function transformStyles(styleObj) {
|
|
|
117
117
|
if (!tokenValue) {
|
|
118
118
|
var message = "Invalid token alias: ".concat(value);
|
|
119
119
|
(0, _warnOnce.default)(message);
|
|
120
|
-
if (isSafeEnvToThrow()) {
|
|
121
|
-
throw new Error(message);
|
|
122
|
-
}
|
|
123
120
|
}
|
|
124
|
-
styleObj[key] = tokenValue;
|
|
121
|
+
styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
|
|
125
122
|
});
|
|
126
123
|
return styleObj;
|
|
127
124
|
};
|
package/dist/cjs/version.json
CHANGED
|
@@ -29,7 +29,6 @@ const tokensMap = {
|
|
|
29
29
|
insetInline: insetMap,
|
|
30
30
|
insetInlineEnd: insetMap,
|
|
31
31
|
insetInlineStart: insetMap,
|
|
32
|
-
layer: layerMap,
|
|
33
32
|
left: dimensionMap,
|
|
34
33
|
maxBlockSize: dimensionMap,
|
|
35
34
|
maxHeight: dimensionMap,
|
|
@@ -57,7 +56,8 @@ const tokensMap = {
|
|
|
57
56
|
right: dimensionMap,
|
|
58
57
|
rowGap: spaceMap,
|
|
59
58
|
top: dimensionMap,
|
|
60
|
-
width: dimensionMap
|
|
59
|
+
width: dimensionMap,
|
|
60
|
+
zIndex: layerMap
|
|
61
61
|
};
|
|
62
62
|
const uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
|
|
63
63
|
const isSafeEnvToThrow = () => typeof process === 'object' && typeof process.env === 'object' && process.env.NODE_ENV !== 'production';
|
|
@@ -101,11 +101,8 @@ const transformStyles = styleObj => {
|
|
|
101
101
|
if (!tokenValue) {
|
|
102
102
|
const message = `Invalid token alias: ${value}`;
|
|
103
103
|
warnOnce(message);
|
|
104
|
-
if (isSafeEnvToThrow()) {
|
|
105
|
-
throw new Error(message);
|
|
106
|
-
}
|
|
107
104
|
}
|
|
108
|
-
styleObj[key] = tokenValue;
|
|
105
|
+
styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
|
|
109
106
|
});
|
|
110
107
|
return styleObj;
|
|
111
108
|
};
|
package/dist/es2019/version.json
CHANGED
|
@@ -31,7 +31,6 @@ var tokensMap = {
|
|
|
31
31
|
insetInline: insetMap,
|
|
32
32
|
insetInlineEnd: insetMap,
|
|
33
33
|
insetInlineStart: insetMap,
|
|
34
|
-
layer: layerMap,
|
|
35
34
|
left: dimensionMap,
|
|
36
35
|
maxBlockSize: dimensionMap,
|
|
37
36
|
maxHeight: dimensionMap,
|
|
@@ -59,7 +58,8 @@ var tokensMap = {
|
|
|
59
58
|
right: dimensionMap,
|
|
60
59
|
rowGap: spaceMap,
|
|
61
60
|
top: dimensionMap,
|
|
62
|
-
width: dimensionMap
|
|
61
|
+
width: dimensionMap,
|
|
62
|
+
zIndex: layerMap
|
|
63
63
|
};
|
|
64
64
|
var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
|
|
65
65
|
var isSafeEnvToThrow = function isSafeEnvToThrow() {
|
|
@@ -108,11 +108,8 @@ var transformStyles = function transformStyles(styleObj) {
|
|
|
108
108
|
if (!tokenValue) {
|
|
109
109
|
var message = "Invalid token alias: ".concat(value);
|
|
110
110
|
warnOnce(message);
|
|
111
|
-
if (isSafeEnvToThrow()) {
|
|
112
|
-
throw new Error(message);
|
|
113
|
-
}
|
|
114
111
|
}
|
|
115
|
-
styleObj[key] = tokenValue;
|
|
112
|
+
styleObj[key] = tokenValue !== null && tokenValue !== void 0 ? tokenValue : value;
|
|
116
113
|
});
|
|
117
114
|
return styleObj;
|
|
118
115
|
};
|
package/dist/esm/version.json
CHANGED
|
@@ -449,7 +449,6 @@ export declare type TokenisedProps = {
|
|
|
449
449
|
insetInline?: InsetInline;
|
|
450
450
|
insetInlineEnd?: InsetInlineEnd;
|
|
451
451
|
insetInlineStart?: InsetInlineStart;
|
|
452
|
-
layer?: Layer;
|
|
453
452
|
left?: Left;
|
|
454
453
|
maxBlockSize?: MaxBlockSize;
|
|
455
454
|
maxHeight?: MaxHeight;
|
|
@@ -474,9 +473,10 @@ export declare type TokenisedProps = {
|
|
|
474
473
|
rowGap?: RowGap;
|
|
475
474
|
top?: Top;
|
|
476
475
|
width?: Width;
|
|
476
|
+
zIndex?: Layer;
|
|
477
477
|
};
|
|
478
478
|
declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];
|
|
479
|
-
declare type SpacingProperty = typeof spacingProperties[number];
|
|
479
|
+
declare type SpacingProperty = (typeof spacingProperties)[number];
|
|
480
480
|
declare type SpacingToken = keyof typeof paddingMap;
|
|
481
481
|
declare type BackgroundColorToken = keyof typeof backgroundColorMap;
|
|
482
482
|
declare type SpacingStyleMap = Record<SpacingProperty, Record<SpacingToken, SerializedStyles>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,6 +29,15 @@
|
|
|
29
29
|
"type": "alpha"
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
|
+
{
|
|
33
|
+
"title": "Box",
|
|
34
|
+
"folder": "box",
|
|
35
|
+
"slug": "primitives/box",
|
|
36
|
+
"id": "@atlaskit/primitives/box",
|
|
37
|
+
"status": {
|
|
38
|
+
"type": "alpha"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
32
41
|
{
|
|
33
42
|
"title": "Inline",
|
|
34
43
|
"folder": "inline",
|
|
@@ -67,8 +76,8 @@
|
|
|
67
76
|
"./responsive": "./src/helpers/responsive/index.tsx"
|
|
68
77
|
},
|
|
69
78
|
"dependencies": {
|
|
70
|
-
"@atlaskit/ds-lib": "^2.
|
|
71
|
-
"@atlaskit/tokens": "^1.
|
|
79
|
+
"@atlaskit/ds-lib": "^2.2.0",
|
|
80
|
+
"@atlaskit/tokens": "^1.3.0",
|
|
72
81
|
"@babel/runtime": "^7.0.0",
|
|
73
82
|
"@emotion/react": "^11.7.1",
|
|
74
83
|
"@emotion/serialize": "^1.1.0"
|
|
@@ -87,18 +96,21 @@
|
|
|
87
96
|
"@atlaskit/heading": "*",
|
|
88
97
|
"@atlaskit/icon": "*",
|
|
89
98
|
"@atlaskit/icon-object": "*",
|
|
99
|
+
"@atlaskit/logo": "*",
|
|
90
100
|
"@atlaskit/lozenge": "*",
|
|
91
|
-
"@atlaskit/radio": "^5.
|
|
101
|
+
"@atlaskit/radio": "^5.5.0",
|
|
102
|
+
"@atlaskit/range": "^7.1.0",
|
|
92
103
|
"@atlaskit/ssr": "*",
|
|
93
104
|
"@atlaskit/tag": "*",
|
|
94
105
|
"@atlaskit/theme": "*",
|
|
95
106
|
"@atlaskit/visual-regression": "*",
|
|
96
107
|
"@atlaskit/webdriver-runner": "*",
|
|
97
108
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
98
|
-
"@atlassian/codegen": "^0.0
|
|
109
|
+
"@atlassian/codegen": "^0.1.0",
|
|
110
|
+
"@atlassian/gemini-visual-regression": "^0.0.6",
|
|
99
111
|
"@testing-library/react": "^12.1.5",
|
|
100
112
|
"csstype": "^3.1.0",
|
|
101
|
-
"prettier": "^2.
|
|
113
|
+
"prettier": "^2.8.0",
|
|
102
114
|
"react-dom": "^16.8.0",
|
|
103
115
|
"ts-node": "^10.9.1",
|
|
104
116
|
"typescript": "4.5.5",
|
package/report.api.md
CHANGED
|
@@ -940,7 +940,6 @@ type TokenisedProps = {
|
|
|
940
940
|
insetInline?: InsetInline;
|
|
941
941
|
insetInlineEnd?: InsetInlineEnd;
|
|
942
942
|
insetInlineStart?: InsetInlineStart;
|
|
943
|
-
layer?: Layer;
|
|
944
943
|
left?: Left;
|
|
945
944
|
maxBlockSize?: MaxBlockSize;
|
|
946
945
|
maxHeight?: MaxHeight;
|
|
@@ -965,6 +964,7 @@ type TokenisedProps = {
|
|
|
965
964
|
rowGap?: RowGap;
|
|
966
965
|
top?: Top;
|
|
967
966
|
width?: Width;
|
|
967
|
+
zIndex?: Layer;
|
|
968
968
|
};
|
|
969
969
|
|
|
970
970
|
// @public (undocumented)
|
package/tmp/api-report-tmp.d.ts
DELETED
|
@@ -1,673 +0,0 @@
|
|
|
1
|
-
## API Report File for "@atlaskit/primitives"
|
|
2
|
-
|
|
3
|
-
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
-
|
|
5
|
-
```ts
|
|
6
|
-
|
|
7
|
-
/// <reference types="react" />
|
|
8
|
-
|
|
9
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
10
|
-
import { ComponentPropsWithRef } from 'react';
|
|
11
|
-
import type * as CSS_2 from 'csstype';
|
|
12
|
-
import type { CSSProperties } from 'react';
|
|
13
|
-
import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
|
|
14
|
-
import { ElementType } from 'react';
|
|
15
|
-
import { FC } from 'react';
|
|
16
|
-
import { ForwardRefExoticComponent } from 'react';
|
|
17
|
-
import { JSXElementConstructor } from 'react';
|
|
18
|
-
import { MemoExoticComponent } from 'react';
|
|
19
|
-
import { ReactElement } from 'react';
|
|
20
|
-
import { ReactNode } from 'react';
|
|
21
|
-
import { RefAttributes } from 'react';
|
|
22
|
-
import { SerializedStyles } from '@emotion/serialize';
|
|
23
|
-
|
|
24
|
-
// @public (undocumented)
|
|
25
|
-
type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
|
|
26
|
-
|
|
27
|
-
// @public (undocumented)
|
|
28
|
-
type AlignBlock_2 = 'center' | 'end' | 'start';
|
|
29
|
-
|
|
30
|
-
// @public (undocumented)
|
|
31
|
-
type AlignInline = 'center' | 'end' | 'start';
|
|
32
|
-
|
|
33
|
-
// @public (undocumented)
|
|
34
|
-
type AlignInline_2 = 'center' | 'end' | 'start';
|
|
35
|
-
|
|
36
|
-
// @public (undocumented)
|
|
37
|
-
type AlignSelf = keyof typeof alignSelfMap;
|
|
38
|
-
|
|
39
|
-
// @public
|
|
40
|
-
const alignSelfMap: {
|
|
41
|
-
readonly center: "center";
|
|
42
|
-
readonly start: "start";
|
|
43
|
-
readonly stretch: "stretch";
|
|
44
|
-
readonly end: "end";
|
|
45
|
-
readonly baseline: "baseline";
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
// @public (undocumented)
|
|
49
|
-
type AllowedBoxStyles = keyof SafeCSSObject;
|
|
50
|
-
|
|
51
|
-
// @public (undocumented)
|
|
52
|
-
type AllowedInlineStyles = 'backgroundColor' | 'padding';
|
|
53
|
-
|
|
54
|
-
// @public (undocumented)
|
|
55
|
-
type BackgroundColor = keyof typeof backgroundColorMap;
|
|
56
|
-
|
|
57
|
-
// @public (undocumented)
|
|
58
|
-
const backgroundColorMap: {
|
|
59
|
-
readonly 'accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
|
|
60
|
-
readonly 'accent.red.subtler': "var(--ds-background-accent-red-subtler)";
|
|
61
|
-
readonly 'accent.red.subtle': "var(--ds-background-accent-red-subtle)";
|
|
62
|
-
readonly 'accent.red.bolder': "var(--ds-background-accent-red-bolder)";
|
|
63
|
-
readonly 'accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
|
|
64
|
-
readonly 'accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
|
|
65
|
-
readonly 'accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
|
|
66
|
-
readonly 'accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
|
|
67
|
-
readonly 'accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
|
|
68
|
-
readonly 'accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
|
|
69
|
-
readonly 'accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
|
|
70
|
-
readonly 'accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
|
|
71
|
-
readonly 'accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
|
|
72
|
-
readonly 'accent.green.subtler': "var(--ds-background-accent-green-subtler)";
|
|
73
|
-
readonly 'accent.green.subtle': "var(--ds-background-accent-green-subtle)";
|
|
74
|
-
readonly 'accent.green.bolder': "var(--ds-background-accent-green-bolder)";
|
|
75
|
-
readonly 'accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
|
|
76
|
-
readonly 'accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
|
|
77
|
-
readonly 'accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
|
|
78
|
-
readonly 'accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
|
|
79
|
-
readonly 'accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
|
|
80
|
-
readonly 'accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
|
|
81
|
-
readonly 'accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
|
|
82
|
-
readonly 'accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
|
|
83
|
-
readonly 'accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
|
|
84
|
-
readonly 'accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
|
|
85
|
-
readonly 'accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
|
|
86
|
-
readonly 'accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
|
|
87
|
-
readonly 'accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
|
|
88
|
-
readonly 'accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
|
|
89
|
-
readonly 'accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
|
|
90
|
-
readonly 'accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
|
|
91
|
-
readonly 'accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
|
|
92
|
-
readonly 'accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
|
|
93
|
-
readonly 'accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
|
|
94
|
-
readonly 'accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
|
|
95
|
-
readonly disabled: "var(--ds-background-disabled)";
|
|
96
|
-
readonly input: "var(--ds-background-input)";
|
|
97
|
-
readonly 'input.hovered': "var(--ds-background-input-hovered)";
|
|
98
|
-
readonly 'input.pressed': "var(--ds-background-input-pressed)";
|
|
99
|
-
readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
|
|
100
|
-
readonly 'inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
|
|
101
|
-
readonly 'inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
|
|
102
|
-
readonly neutral: "var(--ds-background-neutral)";
|
|
103
|
-
readonly 'neutral.hovered': "var(--ds-background-neutral-hovered)";
|
|
104
|
-
readonly 'neutral.pressed': "var(--ds-background-neutral-pressed)";
|
|
105
|
-
readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
|
|
106
|
-
readonly 'neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
|
|
107
|
-
readonly 'neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
|
|
108
|
-
readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
|
|
109
|
-
readonly 'neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
|
|
110
|
-
readonly 'neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
|
|
111
|
-
readonly selected: "var(--ds-background-selected)";
|
|
112
|
-
readonly 'selected.hovered': "var(--ds-background-selected-hovered)";
|
|
113
|
-
readonly 'selected.pressed': "var(--ds-background-selected-pressed)";
|
|
114
|
-
readonly 'selected.bold': "var(--ds-background-selected-bold)";
|
|
115
|
-
readonly 'selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
|
|
116
|
-
readonly 'selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
|
|
117
|
-
readonly 'brand.bold': "var(--ds-background-brand-bold)";
|
|
118
|
-
readonly 'brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
|
|
119
|
-
readonly 'brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
|
|
120
|
-
readonly danger: "var(--ds-background-danger)";
|
|
121
|
-
readonly 'danger.hovered': "var(--ds-background-danger-hovered)";
|
|
122
|
-
readonly 'danger.pressed': "var(--ds-background-danger-pressed)";
|
|
123
|
-
readonly 'danger.bold': "var(--ds-background-danger-bold)";
|
|
124
|
-
readonly 'danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
|
|
125
|
-
readonly 'danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
|
|
126
|
-
readonly warning: "var(--ds-background-warning)";
|
|
127
|
-
readonly 'warning.hovered': "var(--ds-background-warning-hovered)";
|
|
128
|
-
readonly 'warning.pressed': "var(--ds-background-warning-pressed)";
|
|
129
|
-
readonly 'warning.bold': "var(--ds-background-warning-bold)";
|
|
130
|
-
readonly 'warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
|
|
131
|
-
readonly 'warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
|
|
132
|
-
readonly success: "var(--ds-background-success)";
|
|
133
|
-
readonly 'success.hovered': "var(--ds-background-success-hovered)";
|
|
134
|
-
readonly 'success.pressed': "var(--ds-background-success-pressed)";
|
|
135
|
-
readonly 'success.bold': "var(--ds-background-success-bold)";
|
|
136
|
-
readonly 'success.bold.hovered': "var(--ds-background-success-bold-hovered)";
|
|
137
|
-
readonly 'success.bold.pressed': "var(--ds-background-success-bold-pressed)";
|
|
138
|
-
readonly discovery: "var(--ds-background-discovery)";
|
|
139
|
-
readonly 'discovery.hovered': "var(--ds-background-discovery-hovered)";
|
|
140
|
-
readonly 'discovery.pressed': "var(--ds-background-discovery-pressed)";
|
|
141
|
-
readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
|
|
142
|
-
readonly 'discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
|
|
143
|
-
readonly 'discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
|
|
144
|
-
readonly information: "var(--ds-background-information)";
|
|
145
|
-
readonly 'information.hovered': "var(--ds-background-information-hovered)";
|
|
146
|
-
readonly 'information.pressed': "var(--ds-background-information-pressed)";
|
|
147
|
-
readonly 'information.bold': "var(--ds-background-information-bold)";
|
|
148
|
-
readonly 'information.bold.hovered': "var(--ds-background-information-bold-hovered)";
|
|
149
|
-
readonly 'information.bold.pressed': "var(--ds-background-information-bold-pressed)";
|
|
150
|
-
readonly 'color.blanket': "var(--ds-blanket)";
|
|
151
|
-
readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
|
|
152
|
-
readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
|
|
153
|
-
readonly 'elevation.surface': "var(--ds-surface)";
|
|
154
|
-
readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
|
|
155
|
-
readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
|
|
156
|
-
readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
|
|
157
|
-
readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
|
|
158
|
-
readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
|
|
159
|
-
readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
|
|
160
|
-
readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
|
|
161
|
-
readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
|
|
162
|
-
readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
// @public (undocumented)
|
|
166
|
-
type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
|
|
167
|
-
|
|
168
|
-
// @public (undocumented)
|
|
169
|
-
type BaseBoxPropsFoundation<T extends ElementType> = {
|
|
170
|
-
as?: 'article' | 'aside' | 'dialog' | 'div' | 'footer' | 'header' | 'li' | 'main' | 'nav' | 'ol' | 'section' | 'span' | 'ul';
|
|
171
|
-
className?: string;
|
|
172
|
-
children?: ReactNode;
|
|
173
|
-
backgroundColor?: BackgroundColor;
|
|
174
|
-
padding?: Padding;
|
|
175
|
-
paddingBlock?: PaddingBlock;
|
|
176
|
-
paddingBlockStart?: PaddingBlockStart;
|
|
177
|
-
paddingBlockEnd?: PaddingBlockEnd;
|
|
178
|
-
paddingInline?: PaddingInline;
|
|
179
|
-
paddingInlineStart?: PaddingInlineStart;
|
|
180
|
-
paddingInlineEnd?: PaddingInlineEnd;
|
|
181
|
-
ref?: ComponentPropsWithRef<T>['ref'];
|
|
182
|
-
};
|
|
183
|
-
|
|
184
|
-
// @public (undocumented)
|
|
185
|
-
type BasePrimitiveProps = {
|
|
186
|
-
testId?: string;
|
|
187
|
-
style?: CSSProperties;
|
|
188
|
-
};
|
|
189
|
-
|
|
190
|
-
// @public (undocumented)
|
|
191
|
-
type BlockSize = keyof typeof dimensionMap;
|
|
192
|
-
|
|
193
|
-
// @public (undocumented)
|
|
194
|
-
type BorderColor = keyof typeof borderColorMap;
|
|
195
|
-
|
|
196
|
-
// @public
|
|
197
|
-
const borderColorMap: {
|
|
198
|
-
readonly 'color.border': "var(--ds-border)";
|
|
199
|
-
readonly 'accent.red': "var(--ds-border-accent-red)";
|
|
200
|
-
readonly 'accent.orange': "var(--ds-border-accent-orange)";
|
|
201
|
-
readonly 'accent.yellow': "var(--ds-border-accent-yellow)";
|
|
202
|
-
readonly 'accent.green': "var(--ds-border-accent-green)";
|
|
203
|
-
readonly 'accent.teal': "var(--ds-border-accent-teal)";
|
|
204
|
-
readonly 'accent.blue': "var(--ds-border-accent-blue)";
|
|
205
|
-
readonly 'accent.purple': "var(--ds-border-accent-purple)";
|
|
206
|
-
readonly 'accent.magenta': "var(--ds-border-accent-magenta)";
|
|
207
|
-
readonly 'accent.gray': "var(--ds-border-accent-gray)";
|
|
208
|
-
readonly disabled: "var(--ds-border-disabled)";
|
|
209
|
-
readonly focused: "var(--ds-border-focused)";
|
|
210
|
-
readonly input: "var(--ds-border-input)";
|
|
211
|
-
readonly inverse: "var(--ds-border-inverse)";
|
|
212
|
-
readonly selected: "var(--ds-border-selected)";
|
|
213
|
-
readonly brand: "var(--ds-border-brand)";
|
|
214
|
-
readonly danger: "var(--ds-border-danger)";
|
|
215
|
-
readonly warning: "var(--ds-border-warning)";
|
|
216
|
-
readonly success: "var(--ds-border-success)";
|
|
217
|
-
readonly discovery: "var(--ds-border-discovery)";
|
|
218
|
-
readonly information: "var(--ds-border-information)";
|
|
219
|
-
readonly bold: "var(--ds-border-bold)";
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
// @public (undocumented)
|
|
223
|
-
type BorderRadius = keyof typeof borderRadiusMap;
|
|
224
|
-
|
|
225
|
-
// @public (undocumented)
|
|
226
|
-
const borderRadiusMap: {
|
|
227
|
-
readonly 'radius.050': "var(--ds-radius-050)";
|
|
228
|
-
readonly 'radius.100': "var(--ds-radius-100)";
|
|
229
|
-
readonly 'radius.200': "var(--ds-radius-200)";
|
|
230
|
-
readonly 'radius.300': "var(--ds-radius-300)";
|
|
231
|
-
readonly 'radius.400': "var(--ds-radius-400)";
|
|
232
|
-
readonly 'radius.round': "var(--ds-radius-round)";
|
|
233
|
-
};
|
|
234
|
-
|
|
235
|
-
// @public (undocumented)
|
|
236
|
-
type BorderStyle = keyof typeof borderStyleMap;
|
|
237
|
-
|
|
238
|
-
// @public (undocumented)
|
|
239
|
-
const borderStyleMap: {
|
|
240
|
-
readonly none: "none";
|
|
241
|
-
readonly solid: "solid";
|
|
242
|
-
};
|
|
243
|
-
|
|
244
|
-
// @public (undocumented)
|
|
245
|
-
type BorderWidth = keyof typeof borderWidthMap;
|
|
246
|
-
|
|
247
|
-
// @public
|
|
248
|
-
const borderWidthMap: {
|
|
249
|
-
readonly 'width.0': "var(--ds-width-0)";
|
|
250
|
-
readonly 'width.050': "var(--ds-width-050)";
|
|
251
|
-
readonly 'width.100': "var(--ds-width-100)";
|
|
252
|
-
};
|
|
253
|
-
|
|
254
|
-
// @public (undocumented)
|
|
255
|
-
type Bottom = keyof typeof dimensionMap;
|
|
256
|
-
|
|
257
|
-
// @public
|
|
258
|
-
export const Box: BoxComponent;
|
|
259
|
-
|
|
260
|
-
// @public (undocumented)
|
|
261
|
-
type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
|
|
262
|
-
|
|
263
|
-
// @public (undocumented)
|
|
264
|
-
export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
|
|
265
|
-
|
|
266
|
-
// @public (undocumented)
|
|
267
|
-
type BoxStyles = SerializedStyles & {
|
|
268
|
-
[boxTag]: true;
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
// @public (undocumented)
|
|
272
|
-
const boxTag: unique symbol;
|
|
273
|
-
|
|
274
|
-
// @public (undocumented)
|
|
275
|
-
type BoxXCSS = {
|
|
276
|
-
readonly symbol: typeof uniqueSymbol;
|
|
277
|
-
readonly styles: BoxStyles;
|
|
278
|
-
};
|
|
279
|
-
|
|
280
|
-
// @public (undocumented)
|
|
281
|
-
type ColumnGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
282
|
-
|
|
283
|
-
// @public (undocumented)
|
|
284
|
-
type CSSPseudos = {
|
|
285
|
-
[Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
|
|
286
|
-
};
|
|
287
|
-
|
|
288
|
-
// @public
|
|
289
|
-
const dimensionMap: {
|
|
290
|
-
readonly '100%': "100%";
|
|
291
|
-
readonly 'size.100': "16px";
|
|
292
|
-
readonly 'size.200': "24px";
|
|
293
|
-
readonly 'size.300': "32px";
|
|
294
|
-
readonly 'size.400': "40px";
|
|
295
|
-
readonly 'size.500': "48px";
|
|
296
|
-
readonly 'size.600': "96px";
|
|
297
|
-
readonly 'size.1000': "192px";
|
|
298
|
-
};
|
|
299
|
-
|
|
300
|
-
// @public (undocumented)
|
|
301
|
-
type Display = keyof typeof displayMap;
|
|
302
|
-
|
|
303
|
-
// @public (undocumented)
|
|
304
|
-
const displayMap: {
|
|
305
|
-
readonly flex: "flex";
|
|
306
|
-
readonly block: "block";
|
|
307
|
-
readonly inline: "inline";
|
|
308
|
-
readonly inlineBlock: "inline-block";
|
|
309
|
-
readonly inlineFlex: "inline-flex";
|
|
310
|
-
};
|
|
311
|
-
|
|
312
|
-
// @public (undocumented)
|
|
313
|
-
type Flex = keyof typeof flexMap;
|
|
314
|
-
|
|
315
|
-
// @public (undocumented)
|
|
316
|
-
type FlexDirection = keyof typeof flexDirectionMap;
|
|
317
|
-
|
|
318
|
-
// @public (undocumented)
|
|
319
|
-
const flexDirectionMap: {
|
|
320
|
-
readonly row: "row";
|
|
321
|
-
readonly column: "column";
|
|
322
|
-
};
|
|
323
|
-
|
|
324
|
-
// @public (undocumented)
|
|
325
|
-
type FlexGrow = keyof typeof flexGrowMap;
|
|
326
|
-
|
|
327
|
-
// @public (undocumented)
|
|
328
|
-
const flexGrowMap: {
|
|
329
|
-
readonly '0': 0;
|
|
330
|
-
readonly '1': 1;
|
|
331
|
-
};
|
|
332
|
-
|
|
333
|
-
// @public (undocumented)
|
|
334
|
-
const flexMap: {
|
|
335
|
-
readonly '1': 1;
|
|
336
|
-
};
|
|
337
|
-
|
|
338
|
-
// @public (undocumented)
|
|
339
|
-
type FlexShrink = keyof typeof flexShrinkMap;
|
|
340
|
-
|
|
341
|
-
// @public (undocumented)
|
|
342
|
-
const flexShrinkMap: {
|
|
343
|
-
readonly '0': 0;
|
|
344
|
-
readonly '1': 1;
|
|
345
|
-
};
|
|
346
|
-
|
|
347
|
-
// @public (undocumented)
|
|
348
|
-
type Gap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
349
|
-
|
|
350
|
-
// @public (undocumented)
|
|
351
|
-
type Grow = 'fill' | 'hug';
|
|
352
|
-
|
|
353
|
-
// @public (undocumented)
|
|
354
|
-
type Grow_2 = 'fill' | 'hug';
|
|
355
|
-
|
|
356
|
-
// @public (undocumented)
|
|
357
|
-
type Height = keyof typeof dimensionMap;
|
|
358
|
-
|
|
359
|
-
// @public
|
|
360
|
-
export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
|
|
361
|
-
|
|
362
|
-
// @public (undocumented)
|
|
363
|
-
export interface InlineProps<T extends ElementType = 'div'> {
|
|
364
|
-
alignBlock?: AlignBlock;
|
|
365
|
-
alignInline?: AlignInline;
|
|
366
|
-
as?: 'div' | 'ol' | 'span' | 'ul';
|
|
367
|
-
children: ReactNode;
|
|
368
|
-
grow?: Grow;
|
|
369
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
370
|
-
rowSpace?: RowGap;
|
|
371
|
-
separator?: string;
|
|
372
|
-
shouldWrap?: boolean;
|
|
373
|
-
space?: Gap;
|
|
374
|
-
spread?: Spread;
|
|
375
|
-
testId?: string;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
|
-
// @public (undocumented)
|
|
379
|
-
type InlineSize = keyof typeof dimensionMap;
|
|
380
|
-
|
|
381
|
-
// @public (undocumented)
|
|
382
|
-
type InlineStyles = SerializedStyles & {
|
|
383
|
-
[inlineTag]: true;
|
|
384
|
-
};
|
|
385
|
-
|
|
386
|
-
// @public (undocumented)
|
|
387
|
-
const inlineTag: unique symbol;
|
|
388
|
-
|
|
389
|
-
// @public (undocumented)
|
|
390
|
-
type Inset = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
391
|
-
|
|
392
|
-
// @public (undocumented)
|
|
393
|
-
type InsetBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
394
|
-
|
|
395
|
-
// @public (undocumented)
|
|
396
|
-
type InsetBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
397
|
-
|
|
398
|
-
// @public (undocumented)
|
|
399
|
-
type InsetBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
400
|
-
|
|
401
|
-
// @public (undocumented)
|
|
402
|
-
type InsetInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
403
|
-
|
|
404
|
-
// @public (undocumented)
|
|
405
|
-
type InsetInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
406
|
-
|
|
407
|
-
// @public (undocumented)
|
|
408
|
-
type InsetInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
409
|
-
|
|
410
|
-
// @public (undocumented)
|
|
411
|
-
type Layer = keyof typeof layerMap;
|
|
412
|
-
|
|
413
|
-
// @public (undocumented)
|
|
414
|
-
const layerMap: {
|
|
415
|
-
readonly card: 100;
|
|
416
|
-
readonly navigation: 200;
|
|
417
|
-
readonly dialog: 300;
|
|
418
|
-
readonly layer: 400;
|
|
419
|
-
readonly blanket: 500;
|
|
420
|
-
readonly modal: 510;
|
|
421
|
-
readonly flag: 600;
|
|
422
|
-
readonly spotlight: 700;
|
|
423
|
-
readonly tooltip: 800;
|
|
424
|
-
};
|
|
425
|
-
|
|
426
|
-
// @public (undocumented)
|
|
427
|
-
type Left = keyof typeof dimensionMap;
|
|
428
|
-
|
|
429
|
-
// @public (undocumented)
|
|
430
|
-
type MaxBlockSize = keyof typeof dimensionMap;
|
|
431
|
-
|
|
432
|
-
// @public (undocumented)
|
|
433
|
-
type MaxHeight = keyof typeof dimensionMap;
|
|
434
|
-
|
|
435
|
-
// @public (undocumented)
|
|
436
|
-
type MaxInlineSize = keyof typeof dimensionMap;
|
|
437
|
-
|
|
438
|
-
// @public (undocumented)
|
|
439
|
-
type MaxWidth = keyof typeof dimensionMap;
|
|
440
|
-
|
|
441
|
-
// @public (undocumented)
|
|
442
|
-
type MinBlockSize = keyof typeof dimensionMap;
|
|
443
|
-
|
|
444
|
-
// @public (undocumented)
|
|
445
|
-
type MinHeight = keyof typeof dimensionMap;
|
|
446
|
-
|
|
447
|
-
// @public (undocumented)
|
|
448
|
-
type MinInlineSize = keyof typeof dimensionMap;
|
|
449
|
-
|
|
450
|
-
// @public (undocumented)
|
|
451
|
-
type MinWidth = keyof typeof dimensionMap;
|
|
452
|
-
|
|
453
|
-
// @public (undocumented)
|
|
454
|
-
type Overflow = keyof typeof overflowMap;
|
|
455
|
-
|
|
456
|
-
// @public (undocumented)
|
|
457
|
-
type OverflowBlock = keyof typeof overflowBlockMap;
|
|
458
|
-
|
|
459
|
-
// @public (undocumented)
|
|
460
|
-
const overflowBlockMap: {
|
|
461
|
-
readonly auto: "auto";
|
|
462
|
-
readonly hidden: "hidden";
|
|
463
|
-
};
|
|
464
|
-
|
|
465
|
-
// @public (undocumented)
|
|
466
|
-
type OverflowInline = keyof typeof overflowInlineMap;
|
|
467
|
-
|
|
468
|
-
// @public (undocumented)
|
|
469
|
-
const overflowInlineMap: {
|
|
470
|
-
readonly auto: "auto";
|
|
471
|
-
readonly hidden: "hidden";
|
|
472
|
-
};
|
|
473
|
-
|
|
474
|
-
// @public (undocumented)
|
|
475
|
-
const overflowMap: {
|
|
476
|
-
readonly auto: "auto";
|
|
477
|
-
readonly hidden: "hidden";
|
|
478
|
-
};
|
|
479
|
-
|
|
480
|
-
// @public (undocumented)
|
|
481
|
-
type Padding = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
482
|
-
|
|
483
|
-
// @public (undocumented)
|
|
484
|
-
type PaddingBlock = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
485
|
-
|
|
486
|
-
// @public (undocumented)
|
|
487
|
-
type PaddingBlockEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
488
|
-
|
|
489
|
-
// @public (undocumented)
|
|
490
|
-
type PaddingBlockStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
491
|
-
|
|
492
|
-
// @public (undocumented)
|
|
493
|
-
type PaddingInline = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
494
|
-
|
|
495
|
-
// @public (undocumented)
|
|
496
|
-
type PaddingInlineEnd = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
497
|
-
|
|
498
|
-
// @public (undocumented)
|
|
499
|
-
type PaddingInlineStart = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
500
|
-
|
|
501
|
-
// @public (undocumented)
|
|
502
|
-
type Position = keyof typeof positionMap;
|
|
503
|
-
|
|
504
|
-
// @public (undocumented)
|
|
505
|
-
const positionMap: {
|
|
506
|
-
readonly absolute: "absolute";
|
|
507
|
-
readonly fixed: "fixed";
|
|
508
|
-
readonly relative: "relative";
|
|
509
|
-
readonly static: "static";
|
|
510
|
-
};
|
|
511
|
-
|
|
512
|
-
// @public (undocumented)
|
|
513
|
-
type PublicBoxPropsBase = {
|
|
514
|
-
xcss?: Array<BoxXCSS | false | undefined> | BoxXCSS;
|
|
515
|
-
};
|
|
516
|
-
|
|
517
|
-
// @public (undocumented)
|
|
518
|
-
type Right = keyof typeof dimensionMap;
|
|
519
|
-
|
|
520
|
-
// @public (undocumented)
|
|
521
|
-
type RowGap = 'space.0' | 'space.025' | 'space.050' | 'space.075' | 'space.100' | 'space.1000' | 'space.150' | 'space.200' | 'space.250' | 'space.300' | 'space.400' | 'space.500' | 'space.600' | 'space.800';
|
|
522
|
-
|
|
523
|
-
// @public (undocumented)
|
|
524
|
-
type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
|
|
525
|
-
|
|
526
|
-
// @public (undocumented)
|
|
527
|
-
type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
|
|
528
|
-
|
|
529
|
-
// @public (undocumented)
|
|
530
|
-
type Shadow = keyof typeof shadowMap;
|
|
531
|
-
|
|
532
|
-
// @public (undocumented)
|
|
533
|
-
const shadowMap: {
|
|
534
|
-
readonly overflow: "var(--ds-shadow-overflow)";
|
|
535
|
-
readonly 'overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
|
|
536
|
-
readonly 'overflow.spread': "var(--ds-shadow-overflow-spread)";
|
|
537
|
-
readonly overlay: "var(--ds-shadow-overlay)";
|
|
538
|
-
readonly raised: "var(--ds-shadow-raised)";
|
|
539
|
-
};
|
|
540
|
-
|
|
541
|
-
// @public (undocumented)
|
|
542
|
-
type Spread = 'space-between';
|
|
543
|
-
|
|
544
|
-
// @public (undocumented)
|
|
545
|
-
type Spread_2 = 'space-between';
|
|
546
|
-
|
|
547
|
-
// @public
|
|
548
|
-
export const Stack: MemoExoticComponent<ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
|
|
549
|
-
|
|
550
|
-
// @public (undocumented)
|
|
551
|
-
export interface StackProps<T extends ElementType = 'div'> {
|
|
552
|
-
alignBlock?: AlignBlock_2;
|
|
553
|
-
alignInline?: AlignInline_2;
|
|
554
|
-
as?: 'div' | 'ol' | 'span' | 'ul';
|
|
555
|
-
children: ReactNode;
|
|
556
|
-
grow?: Grow_2;
|
|
557
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
558
|
-
space?: Gap;
|
|
559
|
-
spread?: Spread_2;
|
|
560
|
-
testId?: string;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
// @public (undocumented)
|
|
564
|
-
type TextColor = keyof typeof textColorMap;
|
|
565
|
-
|
|
566
|
-
// @public (undocumented)
|
|
567
|
-
const textColorMap: {
|
|
568
|
-
readonly 'color.text': "var(--ds-text)";
|
|
569
|
-
readonly 'accent.red': "var(--ds-text-accent-red)";
|
|
570
|
-
readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
|
|
571
|
-
readonly 'accent.orange': "var(--ds-text-accent-orange)";
|
|
572
|
-
readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
|
|
573
|
-
readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
|
|
574
|
-
readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
|
|
575
|
-
readonly 'accent.green': "var(--ds-text-accent-green)";
|
|
576
|
-
readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
|
|
577
|
-
readonly 'accent.teal': "var(--ds-text-accent-teal)";
|
|
578
|
-
readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
|
|
579
|
-
readonly 'accent.blue': "var(--ds-text-accent-blue)";
|
|
580
|
-
readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
|
|
581
|
-
readonly 'accent.purple': "var(--ds-text-accent-purple)";
|
|
582
|
-
readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
|
|
583
|
-
readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
|
|
584
|
-
readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
|
|
585
|
-
readonly 'accent.gray': "var(--ds-text-accent-gray)";
|
|
586
|
-
readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
|
|
587
|
-
readonly disabled: "var(--ds-text-disabled)";
|
|
588
|
-
readonly inverse: "var(--ds-text-inverse)";
|
|
589
|
-
readonly selected: "var(--ds-text-selected)";
|
|
590
|
-
readonly brand: "var(--ds-text-brand)";
|
|
591
|
-
readonly danger: "var(--ds-text-danger)";
|
|
592
|
-
readonly warning: "var(--ds-text-warning)";
|
|
593
|
-
readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
|
|
594
|
-
readonly success: "var(--ds-text-success)";
|
|
595
|
-
readonly discovery: "var(--ds-text-discovery)";
|
|
596
|
-
readonly information: "var(--ds-text-information)";
|
|
597
|
-
readonly subtlest: "var(--ds-text-subtlest)";
|
|
598
|
-
readonly subtle: "var(--ds-text-subtle)";
|
|
599
|
-
};
|
|
600
|
-
|
|
601
|
-
// @public (undocumented)
|
|
602
|
-
type TokenisedProps = {
|
|
603
|
-
alignSelf?: AlignSelf;
|
|
604
|
-
backgroundColor?: BackgroundColor;
|
|
605
|
-
blockSize?: BlockSize;
|
|
606
|
-
borderColor?: BorderColor;
|
|
607
|
-
borderRadius?: BorderRadius;
|
|
608
|
-
borderStyle?: BorderStyle;
|
|
609
|
-
borderWidth?: BorderWidth;
|
|
610
|
-
bottom?: Bottom;
|
|
611
|
-
boxShadow?: Shadow;
|
|
612
|
-
color?: TextColor;
|
|
613
|
-
columnGap?: ColumnGap;
|
|
614
|
-
display?: Display;
|
|
615
|
-
flex?: Flex;
|
|
616
|
-
flexDirection?: FlexDirection;
|
|
617
|
-
flexGrow?: FlexGrow;
|
|
618
|
-
flexShrink?: FlexShrink;
|
|
619
|
-
gap?: Gap;
|
|
620
|
-
height?: Height;
|
|
621
|
-
inlineSize?: InlineSize;
|
|
622
|
-
inset?: Inset;
|
|
623
|
-
insetBlock?: InsetBlock;
|
|
624
|
-
insetBlockEnd?: InsetBlockEnd;
|
|
625
|
-
insetBlockStart?: InsetBlockStart;
|
|
626
|
-
insetInline?: InsetInline;
|
|
627
|
-
insetInlineEnd?: InsetInlineEnd;
|
|
628
|
-
insetInlineStart?: InsetInlineStart;
|
|
629
|
-
layer?: Layer;
|
|
630
|
-
left?: Left;
|
|
631
|
-
maxBlockSize?: MaxBlockSize;
|
|
632
|
-
maxHeight?: MaxHeight;
|
|
633
|
-
maxInlineSize?: MaxInlineSize;
|
|
634
|
-
maxWidth?: MaxWidth;
|
|
635
|
-
minBlockSize?: MinBlockSize;
|
|
636
|
-
minHeight?: MinHeight;
|
|
637
|
-
minInlineSize?: MinInlineSize;
|
|
638
|
-
minWidth?: MinWidth;
|
|
639
|
-
overflow?: Overflow;
|
|
640
|
-
overflowBlock?: OverflowBlock;
|
|
641
|
-
overflowInline?: OverflowInline;
|
|
642
|
-
padding?: Padding;
|
|
643
|
-
paddingBlock?: PaddingBlock;
|
|
644
|
-
paddingBlockEnd?: PaddingBlockEnd;
|
|
645
|
-
paddingBlockStart?: PaddingBlockStart;
|
|
646
|
-
paddingInline?: PaddingInline;
|
|
647
|
-
paddingInlineEnd?: PaddingInlineEnd;
|
|
648
|
-
paddingInlineStart?: PaddingInlineStart;
|
|
649
|
-
position?: Position;
|
|
650
|
-
right?: Right;
|
|
651
|
-
rowGap?: RowGap;
|
|
652
|
-
top?: Top;
|
|
653
|
-
width?: Width;
|
|
654
|
-
};
|
|
655
|
-
|
|
656
|
-
// @public (undocumented)
|
|
657
|
-
type Top = keyof typeof dimensionMap;
|
|
658
|
-
|
|
659
|
-
// @public (undocumented)
|
|
660
|
-
const uniqueSymbol: unique symbol;
|
|
661
|
-
|
|
662
|
-
// @public (undocumented)
|
|
663
|
-
type Width = keyof typeof dimensionMap;
|
|
664
|
-
|
|
665
|
-
// @public (undocumented)
|
|
666
|
-
export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {
|
|
667
|
-
readonly symbol: typeof uniqueSymbol;
|
|
668
|
-
readonly styles: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>> ? InlineStyles : never;
|
|
669
|
-
};
|
|
670
|
-
|
|
671
|
-
// (No @packageDocumentation comment for this package)
|
|
672
|
-
|
|
673
|
-
```
|