timvir 0.2.6 → 0.2.8
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/blocks/Arbitrary/Arbitrary.d.ts +1 -1
- package/blocks/Arbitrary/index.js +16 -29
- package/blocks/Code/index.js +18 -32
- package/blocks/ColorBar/index.js +14 -28
- package/blocks/ColorBook/index.js +16 -30
- package/blocks/Cover/index.js +14 -28
- package/blocks/Exhibit/Exhibit.d.ts +1 -1
- package/blocks/Exhibit/index.js +14 -28
- package/blocks/Font/index.js +15 -29
- package/blocks/Grid/Grid.d.ts +1 -1
- package/blocks/Grid/index.js +14 -28
- package/blocks/Icon/Icon.d.ts +1 -1
- package/blocks/Icon/index.js +14 -28
- package/blocks/Message/index.js +14 -28
- package/blocks/Swatch/index.js +14 -28
- package/blocks/Viewport/index.js +17 -31
- package/blocks/WebLink/index.js +14 -28
- package/core/components/Page/Page.d.ts +1 -1
- package/core/components/Page/components.d.ts +14 -14
- package/core/index.js +128 -132
- package/package.json +5 -5
- package/search/SearchBoxInput/SearchBoxInput.d.ts +1 -1
- package/search/SearchBoxListItem/SearchBoxListItem.d.ts +1 -1
- package/search/index.js +14 -28
|
@@ -7,5 +7,5 @@ declare const Root = "div";
|
|
|
7
7
|
interface Props extends React.ComponentPropsWithRef<typeof Root> {
|
|
8
8
|
ExhibitProps?: React.ComponentPropsWithRef<typeof Exhibit>;
|
|
9
9
|
}
|
|
10
|
-
declare const _default: React.ForwardRefExoticComponent<
|
|
10
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
export default _default;
|
|
@@ -3,48 +3,34 @@ import { useBlock } from 'timvir/core';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useImmer } from 'use-immer';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
* ```
|
|
12
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
13
|
-
*
|
|
14
|
-
* ```js
|
|
15
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
16
|
-
* ```
|
|
17
|
-
*
|
|
18
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
19
|
-
*/
|
|
20
|
-
const cx = function cx() {
|
|
21
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
22
|
-
.call(arguments).filter(Boolean);
|
|
6
|
+
// src/css.ts
|
|
7
|
+
|
|
8
|
+
// src/cx.ts
|
|
9
|
+
var cx = function cx2() {
|
|
10
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
23
11
|
const atomicClasses = {};
|
|
24
12
|
const nonAtomicClasses = [];
|
|
25
|
-
presentClassNames.forEach(arg => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const [, keyHash] = className.split('_');
|
|
13
|
+
presentClassNames.forEach((arg) => {
|
|
14
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
15
|
+
individualClassNames.forEach((className) => {
|
|
16
|
+
if (className.startsWith("atm_")) {
|
|
17
|
+
const [, keyHash] = className.split("_");
|
|
31
18
|
atomicClasses[keyHash] = className;
|
|
32
19
|
} else {
|
|
33
20
|
nonAtomicClasses.push(className);
|
|
34
21
|
}
|
|
35
22
|
});
|
|
36
23
|
});
|
|
37
|
-
const result = [];
|
|
38
|
-
|
|
24
|
+
const result = [];
|
|
39
25
|
for (const keyHash in atomicClasses) {
|
|
40
26
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
41
27
|
result.push(atomicClasses[keyHash]);
|
|
42
28
|
}
|
|
43
29
|
}
|
|
44
30
|
result.push(...nonAtomicClasses);
|
|
45
|
-
return result.join(
|
|
31
|
+
return result.join(" ");
|
|
46
32
|
};
|
|
47
|
-
var
|
|
33
|
+
var cx_default = cx;
|
|
48
34
|
|
|
49
35
|
const bytesToHex = (() => {
|
|
50
36
|
const s = Array.from({
|
|
@@ -142,7 +128,7 @@ function Arbitrary(props, ref) {
|
|
|
142
128
|
value: value
|
|
143
129
|
}, /*#__PURE__*/React.createElement(Root, {
|
|
144
130
|
ref: ref,
|
|
145
|
-
className:
|
|
131
|
+
className: cx_default(classes.root, className),
|
|
146
132
|
...rest
|
|
147
133
|
}, /*#__PURE__*/React.createElement("div", {
|
|
148
134
|
className: classes.controls
|
|
@@ -154,10 +140,11 @@ function Arbitrary(props, ref) {
|
|
|
154
140
|
className: classes.input,
|
|
155
141
|
placeholder: "Seed",
|
|
156
142
|
value: encode(new TextEncoder().encode(`${value.seed}`)),
|
|
143
|
+
readOnly: true,
|
|
157
144
|
onPaste: ev => {
|
|
158
145
|
const v = ev.clipboardData.getData("text/plain");
|
|
159
146
|
mutate(draft => {
|
|
160
|
-
draft.seed = +decode(v);
|
|
147
|
+
draft.seed = +new TextDecoder().decode(decode(v));
|
|
161
148
|
});
|
|
162
149
|
},
|
|
163
150
|
onFocus: ev => {
|
package/blocks/Code/index.js
CHANGED
|
@@ -5,48 +5,34 @@ import * as React from 'react';
|
|
|
5
5
|
import * as Icons from 'react-feather';
|
|
6
6
|
import { useImmer } from 'use-immer';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* ```
|
|
14
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
15
|
-
*
|
|
16
|
-
* ```js
|
|
17
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
21
|
-
*/
|
|
22
|
-
const cx = function cx() {
|
|
23
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
24
|
-
.call(arguments).filter(Boolean);
|
|
8
|
+
// src/css.ts
|
|
9
|
+
|
|
10
|
+
// src/cx.ts
|
|
11
|
+
var cx = function cx2() {
|
|
12
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
25
13
|
const atomicClasses = {};
|
|
26
14
|
const nonAtomicClasses = [];
|
|
27
|
-
presentClassNames.forEach(arg => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const [, keyHash] = className.split('_');
|
|
15
|
+
presentClassNames.forEach((arg) => {
|
|
16
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
17
|
+
individualClassNames.forEach((className) => {
|
|
18
|
+
if (className.startsWith("atm_")) {
|
|
19
|
+
const [, keyHash] = className.split("_");
|
|
33
20
|
atomicClasses[keyHash] = className;
|
|
34
21
|
} else {
|
|
35
22
|
nonAtomicClasses.push(className);
|
|
36
23
|
}
|
|
37
24
|
});
|
|
38
25
|
});
|
|
39
|
-
const result = [];
|
|
40
|
-
|
|
26
|
+
const result = [];
|
|
41
27
|
for (const keyHash in atomicClasses) {
|
|
42
28
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
43
29
|
result.push(atomicClasses[keyHash]);
|
|
44
30
|
}
|
|
45
31
|
}
|
|
46
32
|
result.push(...nonAtomicClasses);
|
|
47
|
-
return result.join(
|
|
33
|
+
return result.join(" ");
|
|
48
34
|
};
|
|
49
|
-
var
|
|
35
|
+
var cx_default = cx;
|
|
50
36
|
|
|
51
37
|
var theme = "tac6gx6";
|
|
52
38
|
|
|
@@ -81,7 +67,7 @@ function Code(props, ref) {
|
|
|
81
67
|
});
|
|
82
68
|
return /*#__PURE__*/React.createElement(Root, {
|
|
83
69
|
ref: ref,
|
|
84
|
-
className:
|
|
70
|
+
className: cx_default(classes.root, fullWidth && Page.fullWidth),
|
|
85
71
|
...rest
|
|
86
72
|
}, /*#__PURE__*/React.createElement(Highlight, {
|
|
87
73
|
...defaultProps,
|
|
@@ -95,7 +81,7 @@ function Code(props, ref) {
|
|
|
95
81
|
getLineProps,
|
|
96
82
|
getTokenProps
|
|
97
83
|
}) => /*#__PURE__*/React.createElement("pre", {
|
|
98
|
-
className:
|
|
84
|
+
className: cx_default(className, theme, classes.code, fullWidth && classes.fullWidth),
|
|
99
85
|
style: style
|
|
100
86
|
}, /*#__PURE__*/React.createElement("div", {
|
|
101
87
|
className: "d1513p2s",
|
|
@@ -117,7 +103,7 @@ function Code(props, ref) {
|
|
|
117
103
|
draft.copiedToClipboard = true;
|
|
118
104
|
});
|
|
119
105
|
},
|
|
120
|
-
className:
|
|
106
|
+
className: cx_default("b157mkz", state.mouseOver && "b10oxtfo")
|
|
121
107
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
122
108
|
width: 48,
|
|
123
109
|
height: 48,
|
|
@@ -130,7 +116,7 @@ function Code(props, ref) {
|
|
|
130
116
|
}) : /*#__PURE__*/React.createElement(Icons.Copy, {
|
|
131
117
|
size: "16px"
|
|
132
118
|
})), /*#__PURE__*/React.createElement("div", {
|
|
133
|
-
className:
|
|
119
|
+
className: cx_default(fullWidth ? "d17pltln" : "d793q8f")
|
|
134
120
|
}, tokens.map((line, i) => {
|
|
135
121
|
const {
|
|
136
122
|
className,
|
|
@@ -142,7 +128,7 @@ function Code(props, ref) {
|
|
|
142
128
|
return /*#__PURE__*/React.createElement("div", {
|
|
143
129
|
key: i,
|
|
144
130
|
...lineProps,
|
|
145
|
-
className:
|
|
131
|
+
className: cx_default(className, classes.line, isHighlightedLine(i + 1) && classes.highlightedLine)
|
|
146
132
|
}, line.map((token, key) => /*#__PURE__*/React.createElement("span", {
|
|
147
133
|
key: key,
|
|
148
134
|
...getTokenProps({
|
package/blocks/ColorBar/index.js
CHANGED
|
@@ -2,48 +2,34 @@ import { Swatch } from 'timvir/blocks';
|
|
|
2
2
|
import { useBlock } from 'timvir/core';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* ```
|
|
11
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
12
|
-
*
|
|
13
|
-
* ```js
|
|
14
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
15
|
-
* ```
|
|
16
|
-
*
|
|
17
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
18
|
-
*/
|
|
19
|
-
const cx = function cx() {
|
|
20
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
21
|
-
.call(arguments).filter(Boolean);
|
|
5
|
+
// src/css.ts
|
|
6
|
+
|
|
7
|
+
// src/cx.ts
|
|
8
|
+
var cx = function cx2() {
|
|
9
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
22
10
|
const atomicClasses = {};
|
|
23
11
|
const nonAtomicClasses = [];
|
|
24
|
-
presentClassNames.forEach(arg => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const [, keyHash] = className.split('_');
|
|
12
|
+
presentClassNames.forEach((arg) => {
|
|
13
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
14
|
+
individualClassNames.forEach((className) => {
|
|
15
|
+
if (className.startsWith("atm_")) {
|
|
16
|
+
const [, keyHash] = className.split("_");
|
|
30
17
|
atomicClasses[keyHash] = className;
|
|
31
18
|
} else {
|
|
32
19
|
nonAtomicClasses.push(className);
|
|
33
20
|
}
|
|
34
21
|
});
|
|
35
22
|
});
|
|
36
|
-
const result = [];
|
|
37
|
-
|
|
23
|
+
const result = [];
|
|
38
24
|
for (const keyHash in atomicClasses) {
|
|
39
25
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
40
26
|
result.push(atomicClasses[keyHash]);
|
|
41
27
|
}
|
|
42
28
|
}
|
|
43
29
|
result.push(...nonAtomicClasses);
|
|
44
|
-
return result.join(
|
|
30
|
+
return result.join(" ");
|
|
45
31
|
};
|
|
46
|
-
var
|
|
32
|
+
var cx_default = cx;
|
|
47
33
|
|
|
48
34
|
/**
|
|
49
35
|
* The underlying DOM element which is rendered by this component.
|
|
@@ -60,7 +46,7 @@ function ColorBar(props, ref) {
|
|
|
60
46
|
const [selected, setSelected] = React.useState(undefined);
|
|
61
47
|
return /*#__PURE__*/React.createElement(Root, {
|
|
62
48
|
ref: ref,
|
|
63
|
-
className:
|
|
49
|
+
className: cx_default(className, classes.root, selected && tweaks.selected),
|
|
64
50
|
...rest
|
|
65
51
|
}, /*#__PURE__*/React.createElement("div", {
|
|
66
52
|
className: classes.bar,
|
|
@@ -1,47 +1,33 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
* ```
|
|
9
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
10
|
-
*
|
|
11
|
-
* ```js
|
|
12
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
16
|
-
*/
|
|
17
|
-
const cx = function cx() {
|
|
18
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
19
|
-
.call(arguments).filter(Boolean);
|
|
3
|
+
// src/css.ts
|
|
4
|
+
|
|
5
|
+
// src/cx.ts
|
|
6
|
+
var cx = function cx2() {
|
|
7
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
20
8
|
const atomicClasses = {};
|
|
21
9
|
const nonAtomicClasses = [];
|
|
22
|
-
presentClassNames.forEach(arg => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const [, keyHash] = className.split('_');
|
|
10
|
+
presentClassNames.forEach((arg) => {
|
|
11
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
12
|
+
individualClassNames.forEach((className) => {
|
|
13
|
+
if (className.startsWith("atm_")) {
|
|
14
|
+
const [, keyHash] = className.split("_");
|
|
28
15
|
atomicClasses[keyHash] = className;
|
|
29
16
|
} else {
|
|
30
17
|
nonAtomicClasses.push(className);
|
|
31
18
|
}
|
|
32
19
|
});
|
|
33
20
|
});
|
|
34
|
-
const result = [];
|
|
35
|
-
|
|
21
|
+
const result = [];
|
|
36
22
|
for (const keyHash in atomicClasses) {
|
|
37
23
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
38
24
|
result.push(atomicClasses[keyHash]);
|
|
39
25
|
}
|
|
40
26
|
}
|
|
41
27
|
result.push(...nonAtomicClasses);
|
|
42
|
-
return result.join(
|
|
28
|
+
return result.join(" ");
|
|
43
29
|
};
|
|
44
|
-
var
|
|
30
|
+
var cx_default = cx;
|
|
45
31
|
|
|
46
32
|
/**
|
|
47
33
|
* The underlying DOM element which is rendered by this component.
|
|
@@ -58,7 +44,7 @@ function ColorBook(props, ref) {
|
|
|
58
44
|
return /*#__PURE__*/React.createElement(Root, {
|
|
59
45
|
ref: ref,
|
|
60
46
|
...rest,
|
|
61
|
-
className:
|
|
47
|
+
className: cx_default(className, "rmv2wrl")
|
|
62
48
|
}, chapters.map(({
|
|
63
49
|
name,
|
|
64
50
|
values
|
|
@@ -68,7 +54,7 @@ function ColorBook(props, ref) {
|
|
|
68
54
|
gridColumn: i + 1
|
|
69
55
|
}
|
|
70
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
71
|
-
className:
|
|
57
|
+
className: cx_default(chapter, i === selectedChapter && activeChapter),
|
|
72
58
|
onClick: () => {
|
|
73
59
|
if (onSelectChapter) {
|
|
74
60
|
onSelectChapter(i);
|
|
@@ -81,7 +67,7 @@ function ColorBook(props, ref) {
|
|
|
81
67
|
},
|
|
82
68
|
className: "d1l94wnr"
|
|
83
69
|
}))), name && /*#__PURE__*/React.createElement("div", {
|
|
84
|
-
className:
|
|
70
|
+
className: cx_default("d1uopbb", i === selectedChapter && "d1vwzhoa")
|
|
85
71
|
}, name))));
|
|
86
72
|
}
|
|
87
73
|
var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
|
package/blocks/Cover/index.js
CHANGED
|
@@ -1,48 +1,34 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { fullWidth } from 'timvir/core';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* ```
|
|
10
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
11
|
-
*
|
|
12
|
-
* ```js
|
|
13
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
14
|
-
* ```
|
|
15
|
-
*
|
|
16
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
17
|
-
*/
|
|
18
|
-
const cx = function cx() {
|
|
19
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
20
|
-
.call(arguments).filter(Boolean);
|
|
4
|
+
// src/css.ts
|
|
5
|
+
|
|
6
|
+
// src/cx.ts
|
|
7
|
+
var cx = function cx2() {
|
|
8
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
21
9
|
const atomicClasses = {};
|
|
22
10
|
const nonAtomicClasses = [];
|
|
23
|
-
presentClassNames.forEach(arg => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const [, keyHash] = className.split('_');
|
|
11
|
+
presentClassNames.forEach((arg) => {
|
|
12
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
13
|
+
individualClassNames.forEach((className) => {
|
|
14
|
+
if (className.startsWith("atm_")) {
|
|
15
|
+
const [, keyHash] = className.split("_");
|
|
29
16
|
atomicClasses[keyHash] = className;
|
|
30
17
|
} else {
|
|
31
18
|
nonAtomicClasses.push(className);
|
|
32
19
|
}
|
|
33
20
|
});
|
|
34
21
|
});
|
|
35
|
-
const result = [];
|
|
36
|
-
|
|
22
|
+
const result = [];
|
|
37
23
|
for (const keyHash in atomicClasses) {
|
|
38
24
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
39
25
|
result.push(atomicClasses[keyHash]);
|
|
40
26
|
}
|
|
41
27
|
}
|
|
42
28
|
result.push(...nonAtomicClasses);
|
|
43
|
-
return result.join(
|
|
29
|
+
return result.join(" ");
|
|
44
30
|
};
|
|
45
|
-
var
|
|
31
|
+
var cx_default = cx;
|
|
46
32
|
|
|
47
33
|
/**
|
|
48
34
|
* The underlying DOM element which is rendered by this component.
|
|
@@ -58,7 +44,7 @@ function Cover(props, ref) {
|
|
|
58
44
|
} = props;
|
|
59
45
|
return /*#__PURE__*/React.createElement(Root, {
|
|
60
46
|
ref: ref,
|
|
61
|
-
className:
|
|
47
|
+
className: cx_default(className, fullWidth),
|
|
62
48
|
...rest
|
|
63
49
|
}, /*#__PURE__*/React.createElement("picture", null, sources.map((p, i) => /*#__PURE__*/React.createElement("source", {
|
|
64
50
|
key: i,
|
|
@@ -15,5 +15,5 @@ interface Props extends React.ComponentProps<typeof Root> {
|
|
|
15
15
|
bleed?: string | number;
|
|
16
16
|
BackdropProps?: React.ComponentPropsWithoutRef<"div">;
|
|
17
17
|
}
|
|
18
|
-
declare const _default: React.ForwardRefExoticComponent<
|
|
18
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
19
19
|
export default _default;
|
package/blocks/Exhibit/index.js
CHANGED
|
@@ -2,48 +2,34 @@ import { useMDXComponents } from '@mdx-js/react';
|
|
|
2
2
|
import { useBlock } from 'timvir/core';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* ```
|
|
11
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
12
|
-
*
|
|
13
|
-
* ```js
|
|
14
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
15
|
-
* ```
|
|
16
|
-
*
|
|
17
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
18
|
-
*/
|
|
19
|
-
const cx = function cx() {
|
|
20
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
21
|
-
.call(arguments).filter(Boolean);
|
|
5
|
+
// src/css.ts
|
|
6
|
+
|
|
7
|
+
// src/cx.ts
|
|
8
|
+
var cx = function cx2() {
|
|
9
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
22
10
|
const atomicClasses = {};
|
|
23
11
|
const nonAtomicClasses = [];
|
|
24
|
-
presentClassNames.forEach(arg => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const [, keyHash] = className.split('_');
|
|
12
|
+
presentClassNames.forEach((arg) => {
|
|
13
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
14
|
+
individualClassNames.forEach((className) => {
|
|
15
|
+
if (className.startsWith("atm_")) {
|
|
16
|
+
const [, keyHash] = className.split("_");
|
|
30
17
|
atomicClasses[keyHash] = className;
|
|
31
18
|
} else {
|
|
32
19
|
nonAtomicClasses.push(className);
|
|
33
20
|
}
|
|
34
21
|
});
|
|
35
22
|
});
|
|
36
|
-
const result = [];
|
|
37
|
-
|
|
23
|
+
const result = [];
|
|
38
24
|
for (const keyHash in atomicClasses) {
|
|
39
25
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
40
26
|
result.push(atomicClasses[keyHash]);
|
|
41
27
|
}
|
|
42
28
|
}
|
|
43
29
|
result.push(...nonAtomicClasses);
|
|
44
|
-
return result.join(
|
|
30
|
+
return result.join(" ");
|
|
45
31
|
};
|
|
46
|
-
var
|
|
32
|
+
var cx_default = cx;
|
|
47
33
|
|
|
48
34
|
/**
|
|
49
35
|
* The underlying DOM element which is rendered by this component.
|
|
@@ -67,7 +53,7 @@ function Exhibit(props, ref) {
|
|
|
67
53
|
} = block.props;
|
|
68
54
|
return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(components.h3, null, title), /*#__PURE__*/React.createElement(Root, {
|
|
69
55
|
ref: ref,
|
|
70
|
-
className:
|
|
56
|
+
className: cx_default(className, classes.root),
|
|
71
57
|
style: {
|
|
72
58
|
...style,
|
|
73
59
|
[cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : bleed
|
package/blocks/Font/index.js
CHANGED
|
@@ -2,48 +2,34 @@ import { useMDXComponents } from '@mdx-js/react';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import * as Icons from 'react-feather';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
* ```
|
|
11
|
-
* If space separated atomic styles are provided, they are deduplicated according to the first hashed valued:
|
|
12
|
-
*
|
|
13
|
-
* ```js
|
|
14
|
-
* cx('atm_a_class1 atm_b_class2', 'atm_a_class3') // returns `atm_a_class3 atm_b_class2`
|
|
15
|
-
* ```
|
|
16
|
-
*
|
|
17
|
-
* @returns the combined, space separated class names that can be applied directly to the class attribute
|
|
18
|
-
*/
|
|
19
|
-
const cx = function cx() {
|
|
20
|
-
const presentClassNames = Array.prototype.slice // eslint-disable-next-line prefer-rest-params
|
|
21
|
-
.call(arguments).filter(Boolean);
|
|
5
|
+
// src/css.ts
|
|
6
|
+
|
|
7
|
+
// src/cx.ts
|
|
8
|
+
var cx = function cx2() {
|
|
9
|
+
const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
|
|
22
10
|
const atomicClasses = {};
|
|
23
11
|
const nonAtomicClasses = [];
|
|
24
|
-
presentClassNames.forEach(arg => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const [, keyHash] = className.split('_');
|
|
12
|
+
presentClassNames.forEach((arg) => {
|
|
13
|
+
const individualClassNames = arg ? arg.split(" ") : [];
|
|
14
|
+
individualClassNames.forEach((className) => {
|
|
15
|
+
if (className.startsWith("atm_")) {
|
|
16
|
+
const [, keyHash] = className.split("_");
|
|
30
17
|
atomicClasses[keyHash] = className;
|
|
31
18
|
} else {
|
|
32
19
|
nonAtomicClasses.push(className);
|
|
33
20
|
}
|
|
34
21
|
});
|
|
35
22
|
});
|
|
36
|
-
const result = [];
|
|
37
|
-
|
|
23
|
+
const result = [];
|
|
38
24
|
for (const keyHash in atomicClasses) {
|
|
39
25
|
if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
|
|
40
26
|
result.push(atomicClasses[keyHash]);
|
|
41
27
|
}
|
|
42
28
|
}
|
|
43
29
|
result.push(...nonAtomicClasses);
|
|
44
|
-
return result.join(
|
|
30
|
+
return result.join(" ");
|
|
45
31
|
};
|
|
46
|
-
var
|
|
32
|
+
var cx_default = cx;
|
|
47
33
|
|
|
48
34
|
/**
|
|
49
35
|
* The underlying DOM element which is rendered by this component.
|
|
@@ -86,7 +72,7 @@ function Font(props, ref) {
|
|
|
86
72
|
}, [name, contentRef]);
|
|
87
73
|
return /*#__PURE__*/React.createElement(Root, {
|
|
88
74
|
ref: ref,
|
|
89
|
-
className:
|
|
75
|
+
className: cx_default(className, "rc7ivp5"),
|
|
90
76
|
...rest
|
|
91
77
|
}, /*#__PURE__*/React.createElement("div", {
|
|
92
78
|
className: classes.meta
|
|
@@ -138,7 +124,7 @@ function Font(props, ref) {
|
|
|
138
124
|
ref: setContentRef,
|
|
139
125
|
contentEditable: true,
|
|
140
126
|
spellCheck: "false",
|
|
141
|
-
className:
|
|
127
|
+
className: cx_default(font.className, "dx3nfmc"),
|
|
142
128
|
style: font.style
|
|
143
129
|
}, children || "The quick brown fox jumps over the lazy dog"))));
|
|
144
130
|
}
|
package/blocks/Grid/Grid.d.ts
CHANGED
|
@@ -5,5 +5,5 @@ import * as React from "react";
|
|
|
5
5
|
declare const Root = "div";
|
|
6
6
|
interface Props extends React.ComponentProps<typeof Root> {
|
|
7
7
|
}
|
|
8
|
-
declare const _default: React.ForwardRefExoticComponent<
|
|
8
|
+
declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
export default _default;
|