timvir 0.2.39 → 0.2.42
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 +20 -0
- package/blocks/Arbitrary/Arbitrary.d.ts +1 -1
- package/blocks/Arbitrary/index.js +193 -48
- package/blocks/Arbitrary/styles.css +166 -6
- package/blocks/Code/Code.d.ts +0 -6
- package/blocks/Code/docs/index.mdx +0 -11
- package/blocks/Code/index.js +205 -112
- package/blocks/Code/styles.css +100 -15
- package/blocks/ColorBar/docs/index.mdx +8 -2
- package/blocks/ColorBar/index.js +198 -47
- package/blocks/ColorBar/styles.css +103 -4
- package/blocks/ColorBook/docs/index.mdx +1 -1
- package/blocks/ColorBook/index.js +198 -39
- package/blocks/ColorBook/styles.css +166 -6
- package/blocks/Cover/index.js +165 -36
- package/blocks/Cover/styles.css +18 -0
- package/blocks/Exhibit/index.js +192 -41
- package/blocks/Exhibit/styles.css +66 -3
- package/blocks/Font/index.js +188 -58
- package/blocks/Font/styles.css +82 -8
- package/blocks/Grid/docs/index.mdx +4 -4
- package/blocks/Grid/index.js +176 -33
- package/blocks/Grid/styles.css +20 -1
- package/blocks/Icon/docs/index.mdx +13 -13
- package/blocks/Icon/index.js +25 -43
- package/blocks/Icon/styles.css +117 -5
- package/blocks/Message/docs/index.mdx +5 -8
- package/blocks/Message/index.js +233 -54
- package/blocks/Message/styles.css +94 -6
- package/blocks/Swatch/docs/index.mdx +16 -16
- package/blocks/Swatch/index.js +180 -35
- package/blocks/Swatch/styles.css +82 -4
- package/blocks/Viewport/index.js +198 -91
- package/blocks/Viewport/styles.css +259 -14
- package/blocks/WebLink/index.js +192 -48
- package/blocks/WebLink/styles.css +170 -8
- package/blocks/styles.css +1460 -97
- package/builtins/components.d.ts +2 -2
- package/builtins/index.d.ts +0 -1
- package/builtins/index.js +300 -243
- package/builtins/styles.css +265 -25
- package/context/index.d.ts +6 -1
- package/core/components/Commands/Commands.d.ts +5 -1
- package/core/components/NavigationFooter/NavigationFooter.d.ts +4 -2
- package/core/components/Page/Page.d.ts +12 -3
- package/core/components/Page/docs/index.mdx +44 -11
- package/core/index.d.ts +191 -2
- package/core/index.js +415 -256
- package/core/layout.d.ts +41 -0
- package/core/styles.css +857 -88
- package/global.css +79 -0
- package/internal/cx.d.ts +1 -0
- package/package.json +1 -2
- package/search/index.js +2 -223
- package/styles.css +2670 -235
- package/blocks/Code/theme.d.ts +0 -2
- package/bus/styles.css +0 -1
- package/context/styles.css +0 -1
- package/core/theme/index.d.ts +0 -1
- package/hooks/styles.css +0 -1
- package/search/Search/internal/Dialog.d.ts +0 -20
- package/search/Search/internal/index.d.ts +0 -1
- package/search/SearchBoxInput/SearchBoxInput.d.ts +0 -11
- package/search/SearchBoxInput/docs/api.mdx +0 -76
- package/search/SearchBoxInput/docs/index.mdx +0 -6
- package/search/SearchBoxInput/index.d.ts +0 -1
- package/search/SearchBoxInput/samples/basic.d.ts +0 -1
- package/search/SearchBoxListItem/SearchBoxListItem.d.ts +0 -13
- package/search/SearchBoxListItem/docs/api.mdx +0 -76
- package/search/SearchBoxListItem/docs/index.mdx +0 -30
- package/search/SearchBoxListItem/index.d.ts +0 -1
- package/search/SearchBoxListItem/samples/basic.d.ts +0 -1
- package/search/styles.css +0 -16
package/blocks/ColorBar/index.js
CHANGED
|
@@ -1,62 +1,198 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { Swatch } from 'timvir/blocks';
|
|
3
|
-
import { useBlock } from 'timvir/core';
|
|
3
|
+
import { useBlock, layoutStyles } from 'timvir/core';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
function cx(...args) {
|
|
8
|
+
let str = "";
|
|
9
|
+
for (let i = 0; i < args.length; i++) {
|
|
10
|
+
const arg = args[i];
|
|
11
|
+
if (typeof arg === "string") {
|
|
12
|
+
str += (str && " ") + arg;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return str;
|
|
16
|
+
}
|
|
8
17
|
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
individualClassNames.forEach((className) => {
|
|
17
|
-
if (className.startsWith("atm_")) {
|
|
18
|
-
const [, keyHash] = className.split("_");
|
|
19
|
-
atomicClasses[keyHash] = className;
|
|
20
|
-
} else {
|
|
21
|
-
nonAtomicClasses.push(className);
|
|
22
|
-
}
|
|
18
|
+
var styleq = {};
|
|
19
|
+
var hasRequiredStyleq;
|
|
20
|
+
function requireStyleq() {
|
|
21
|
+
if (hasRequiredStyleq) return styleq;
|
|
22
|
+
hasRequiredStyleq = 1;
|
|
23
|
+
Object.defineProperty(styleq, "__esModule", {
|
|
24
|
+
value: true
|
|
23
25
|
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
styleq.styleq = void 0;
|
|
27
|
+
var cache = new WeakMap();
|
|
28
|
+
var compiledKey = '$$css';
|
|
29
|
+
function createStyleq(options) {
|
|
30
|
+
var disableCache;
|
|
31
|
+
var disableMix;
|
|
32
|
+
var transform;
|
|
33
|
+
if (options != null) {
|
|
34
|
+
disableCache = options.disableCache === true;
|
|
35
|
+
disableMix = options.disableMix === true;
|
|
36
|
+
transform = options.transform;
|
|
37
|
+
}
|
|
38
|
+
return function styleq() {
|
|
39
|
+
var definedProperties = [];
|
|
40
|
+
var className = '';
|
|
41
|
+
var inlineStyle = null;
|
|
42
|
+
var debugString = '';
|
|
43
|
+
var nextCache = disableCache ? null : cache;
|
|
44
|
+
var styles = new Array(arguments.length);
|
|
45
|
+
for(var i = 0; i < arguments.length; i++){
|
|
46
|
+
styles[i] = arguments[i];
|
|
47
|
+
}
|
|
48
|
+
while(styles.length > 0){
|
|
49
|
+
var possibleStyle = styles.pop();
|
|
50
|
+
if (possibleStyle == null || possibleStyle === false) {
|
|
51
|
+
continue;
|
|
52
|
+
}
|
|
53
|
+
if (Array.isArray(possibleStyle)) {
|
|
54
|
+
for(var _i = 0; _i < possibleStyle.length; _i++){
|
|
55
|
+
styles.push(possibleStyle[_i]);
|
|
56
|
+
}
|
|
57
|
+
continue;
|
|
58
|
+
}
|
|
59
|
+
var style = transform != null ? transform(possibleStyle) : possibleStyle;
|
|
60
|
+
if (style.$$css != null) {
|
|
61
|
+
var classNameChunk = '';
|
|
62
|
+
if (nextCache != null && nextCache.has(style)) {
|
|
63
|
+
var cacheEntry = nextCache.get(style);
|
|
64
|
+
if (cacheEntry != null) {
|
|
65
|
+
classNameChunk = cacheEntry[0];
|
|
66
|
+
debugString = cacheEntry[2];
|
|
67
|
+
definedProperties.push.apply(definedProperties, cacheEntry[1]);
|
|
68
|
+
nextCache = cacheEntry[3];
|
|
69
|
+
}
|
|
70
|
+
} else {
|
|
71
|
+
var definedPropertiesChunk = [];
|
|
72
|
+
for(var prop in style){
|
|
73
|
+
var value = style[prop];
|
|
74
|
+
if (prop === compiledKey) {
|
|
75
|
+
var compiledKeyValue = style[prop];
|
|
76
|
+
if (compiledKeyValue !== true) {
|
|
77
|
+
debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
|
|
78
|
+
}
|
|
79
|
+
continue;
|
|
80
|
+
}
|
|
81
|
+
if (typeof value === 'string' || value === null) {
|
|
82
|
+
if (!definedProperties.includes(prop)) {
|
|
83
|
+
definedProperties.push(prop);
|
|
84
|
+
if (nextCache != null) {
|
|
85
|
+
definedPropertiesChunk.push(prop);
|
|
86
|
+
}
|
|
87
|
+
if (typeof value === 'string') {
|
|
88
|
+
classNameChunk += classNameChunk ? ' ' + value : value;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
} else {
|
|
92
|
+
console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
if (nextCache != null) {
|
|
96
|
+
var weakMap = new WeakMap();
|
|
97
|
+
nextCache.set(style, [
|
|
98
|
+
classNameChunk,
|
|
99
|
+
definedPropertiesChunk,
|
|
100
|
+
debugString,
|
|
101
|
+
weakMap
|
|
102
|
+
]);
|
|
103
|
+
nextCache = weakMap;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
if (classNameChunk) {
|
|
107
|
+
className = className ? classNameChunk + ' ' + className : classNameChunk;
|
|
108
|
+
}
|
|
109
|
+
} else {
|
|
110
|
+
if (disableMix) {
|
|
111
|
+
if (inlineStyle == null) {
|
|
112
|
+
inlineStyle = {};
|
|
113
|
+
}
|
|
114
|
+
inlineStyle = Object.assign({}, style, inlineStyle);
|
|
115
|
+
} else {
|
|
116
|
+
var subStyle = null;
|
|
117
|
+
for(var _prop in style){
|
|
118
|
+
var _value = style[_prop];
|
|
119
|
+
if (_value !== undefined) {
|
|
120
|
+
if (!definedProperties.includes(_prop)) {
|
|
121
|
+
if (_value != null) {
|
|
122
|
+
if (inlineStyle == null) {
|
|
123
|
+
inlineStyle = {};
|
|
124
|
+
}
|
|
125
|
+
if (subStyle == null) {
|
|
126
|
+
subStyle = {};
|
|
127
|
+
}
|
|
128
|
+
subStyle[_prop] = _value;
|
|
129
|
+
}
|
|
130
|
+
definedProperties.push(_prop);
|
|
131
|
+
nextCache = null;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
if (subStyle != null) {
|
|
136
|
+
inlineStyle = Object.assign(subStyle, inlineStyle);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
var styleProps = [
|
|
142
|
+
className,
|
|
143
|
+
inlineStyle,
|
|
144
|
+
debugString
|
|
145
|
+
];
|
|
146
|
+
return styleProps;
|
|
147
|
+
};
|
|
29
148
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
var
|
|
149
|
+
var styleq$1 = styleq.styleq = createStyleq();
|
|
150
|
+
styleq$1.factory = createStyleq;
|
|
151
|
+
return styleq;
|
|
152
|
+
}
|
|
153
|
+
var styleqExports = requireStyleq();
|
|
154
|
+
function props(...styles) {
|
|
155
|
+
const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
|
|
156
|
+
const result = {};
|
|
157
|
+
if (className != null && className !== '') {
|
|
158
|
+
result.className = className;
|
|
159
|
+
}
|
|
160
|
+
if (style != null && Object.keys(style).length > 0) {
|
|
161
|
+
result.style = style;
|
|
162
|
+
}
|
|
163
|
+
if (dataStyleSrc != null && dataStyleSrc !== '') {
|
|
164
|
+
result['data-style-src'] = dataStyleSrc;
|
|
165
|
+
}
|
|
166
|
+
return result;
|
|
167
|
+
}
|
|
35
168
|
|
|
36
|
-
/**
|
|
37
|
-
* The underlying DOM element which is rendered by this component.
|
|
38
|
-
*/
|
|
39
169
|
const Root = "div";
|
|
40
|
-
function ColorBar(props, ref) {
|
|
41
|
-
const block = useBlock(props);
|
|
170
|
+
function ColorBar(props$1, ref) {
|
|
171
|
+
const block = useBlock(props$1);
|
|
42
172
|
const {
|
|
43
173
|
values,
|
|
44
|
-
className,
|
|
45
174
|
...rest
|
|
46
175
|
} = block.props;
|
|
47
176
|
const [selected, setSelected] = React.useState(undefined);
|
|
177
|
+
const rootStyleProps = props(layoutStyles.block, styles.root);
|
|
48
178
|
return /*#__PURE__*/jsxs(Root, {
|
|
49
179
|
ref: ref,
|
|
50
|
-
className: cx_default(className, classes.root, selected && tweaks.selected),
|
|
51
180
|
...rest,
|
|
181
|
+
...rootStyleProps,
|
|
182
|
+
className: cx(rest.className, rootStyleProps.className),
|
|
183
|
+
style: {
|
|
184
|
+
...rootStyleProps.style,
|
|
185
|
+
...rest.style
|
|
186
|
+
},
|
|
52
187
|
children: [/*#__PURE__*/jsx("div", {
|
|
53
|
-
className:
|
|
188
|
+
className: "timvir-s-rvj5dj timvir-s-1sdr0u7 timvir-s-dz4c1r",
|
|
54
189
|
style: {
|
|
55
190
|
opacity: selected ? 0 : 1
|
|
56
191
|
},
|
|
57
|
-
children: values.map((value, i) => /*#__PURE__*/jsx("div", {
|
|
58
|
-
className:
|
|
192
|
+
children: values.map((value, i, self) => /*#__PURE__*/jsx("div", {
|
|
193
|
+
className: "timvir-s-1vqgdyp timvir-s-1iyjqo2 timvir-s-rvj5dj timvir-s-13b6k1y timvir-s-1ypdohk timvir-s-zkaem6 timvir-s-15311qs timvir-s-inzabm timvir-s-1bxid8z",
|
|
59
194
|
children: /*#__PURE__*/jsx("div", {
|
|
195
|
+
...props(i === 0 ? styles.firstChild : null, i === self.length - 1 ? styles.lastChild : null, styles.valueInner),
|
|
60
196
|
style: {
|
|
61
197
|
background: typeof value === "string" ? value : value.value
|
|
62
198
|
},
|
|
@@ -65,14 +201,17 @@ function ColorBar(props, ref) {
|
|
|
65
201
|
}
|
|
66
202
|
})
|
|
67
203
|
}, i))
|
|
68
|
-
}), /*#__PURE__*/jsx("div", {
|
|
69
|
-
className:
|
|
204
|
+
}), selected !== undefined && /*#__PURE__*/jsx("div", {
|
|
205
|
+
className: "timvir-s-10l6tqk timvir-s-wa60dl timvir-s-3m8u43 timvir-s-u96u03 timvir-s-1cb1t30 timvir-s-oegz02",
|
|
70
206
|
children: /*#__PURE__*/jsx(Swatch, {
|
|
71
207
|
...(typeof selected === "string" ? {
|
|
72
208
|
value: selected
|
|
73
209
|
} : {
|
|
74
|
-
value: selected
|
|
210
|
+
value: selected.value
|
|
75
211
|
}),
|
|
212
|
+
style: {
|
|
213
|
+
margin: 0
|
|
214
|
+
},
|
|
76
215
|
onMouseLeave: () => {
|
|
77
216
|
setSelected(undefined);
|
|
78
217
|
}
|
|
@@ -81,14 +220,26 @@ function ColorBar(props, ref) {
|
|
|
81
220
|
});
|
|
82
221
|
}
|
|
83
222
|
var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
|
|
84
|
-
const
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
223
|
+
const styles = {
|
|
224
|
+
root: {
|
|
225
|
+
kVAEAm: "timvir-s-1n2onr6",
|
|
226
|
+
$$css: true
|
|
227
|
+
},
|
|
228
|
+
valueInner: {
|
|
229
|
+
kmkexE: "timvir-s-zhuw26",
|
|
230
|
+
kaIpWk: "timvir-s-nfsnhl",
|
|
231
|
+
kogj98: "timvir-s-1ehn4u0",
|
|
232
|
+
kwh8RV: "timvir-s-32zglm",
|
|
233
|
+
$$css: true
|
|
234
|
+
},
|
|
235
|
+
firstChild: {
|
|
236
|
+
"--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-16gz6n8",
|
|
237
|
+
$$css: true
|
|
238
|
+
},
|
|
239
|
+
lastChild: {
|
|
240
|
+
"--timvir-b-ColorBar-value-borderRadiusDefault": "timvir-s-btcsfn",
|
|
241
|
+
$$css: true
|
|
242
|
+
}
|
|
92
243
|
};
|
|
93
244
|
|
|
94
245
|
export { ColorBar$1 as ColorBar };
|
|
@@ -1,6 +1,105 @@
|
|
|
1
|
+
@layer priority1 {
|
|
2
|
+
.timvir-s-btcsfn {
|
|
3
|
+
--timvir-b-ColorBar-value-borderRadiusDefault: 0 2px 2px 0;
|
|
4
|
+
}
|
|
1
5
|
|
|
2
|
-
.
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
.o1823law{position:absolute;top:50%;right:0px;left:0px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none;opacity:0;z-index:4;-webkit-transition:opacity 0.16s;transition:opacity 0.16s;}.s4sqb81 .o1823law{pointer-events:all;opacity:1;}
|
|
6
|
+
.timvir-s-16gz6n8 {
|
|
7
|
+
--timvir-b-ColorBar-value-borderRadiusDefault: 2px 0 0 2px;
|
|
8
|
+
}
|
|
6
9
|
|
|
10
|
+
.timvir-s-15311qs {
|
|
11
|
+
--timvir-b-ColorBar-value-margin: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.timvir-s-inzabm:hover {
|
|
15
|
+
--timvir-b-ColorBar-value-borderRadius: 2px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.timvir-s-1bxid8z:hover {
|
|
19
|
+
--timvir-b-ColorBar-value-margin: -3px 1px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@layer priority2 {
|
|
24
|
+
.timvir-s-1ehn4u0 {
|
|
25
|
+
margin: var(--timvir-b-ColorBar-value-margin);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@layer priority3 {
|
|
30
|
+
.timvir-s-nfsnhl {
|
|
31
|
+
border-radius: var(--timvir-b-ColorBar-value-borderRadius, var(--timvir-b-ColorBar-value-borderRadiusDefault));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.timvir-s-13b6k1y {
|
|
35
|
+
place-items: stretch stretch;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.timvir-s-zhuw26 {
|
|
39
|
+
transition: all .16s;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@layer priority4 {
|
|
44
|
+
.timvir-s-1ypdohk {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.timvir-s-rvj5dj {
|
|
49
|
+
display: grid;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.timvir-s-1iyjqo2 {
|
|
53
|
+
flex-grow: 1;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.timvir-s-1sdr0u7 {
|
|
57
|
+
grid-auto-flow: row;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.timvir-s-dz4c1r {
|
|
61
|
+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.timvir-s-10l6tqk {
|
|
65
|
+
position: absolute;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.timvir-s-1n2onr6 {
|
|
69
|
+
position: relative;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.timvir-s-1cb1t30 {
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.timvir-s-zkaem6 {
|
|
77
|
+
z-index: 3;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.timvir-s-oegz02 {
|
|
81
|
+
z-index: 4;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.timvir-s-32zglm:hover {
|
|
85
|
+
box-shadow: inset 0 0 0 1px #10161a33, 0 2px 4px #10161a1a, 0 8px 24px #10161a33;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@layer priority5 {
|
|
90
|
+
.timvir-s-1vqgdyp {
|
|
91
|
+
height: 40px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.timvir-s-u96u03 {
|
|
95
|
+
left: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.timvir-s-3m8u43 {
|
|
99
|
+
right: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.timvir-s-wa60dl {
|
|
103
|
+
top: 50%;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -7,6 +7,6 @@ The `<ColorBook>` component provides an overview of different color palettes. Th
|
|
|
7
7
|
The user can interact with the book: select individual chapters. How selection is interpreted not handled by this component. In the example below
|
|
8
8
|
upon selecting one of the first two chapters, some extra elements are displayed below the `<ColorBook>`.
|
|
9
9
|
|
|
10
|
-
<div style={{ marginTop: "5vh" }}>
|
|
10
|
+
<div style={{ marginTop: "5vh", gridColumn: "lc / rc" }}>
|
|
11
11
|
<Sample variant="basic" />
|
|
12
12
|
</div>
|
|
@@ -1,51 +1,170 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { layoutStyles } from 'timvir/core';
|
|
2
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
presentClassNames.forEach((arg) => {
|
|
12
|
-
const individualClassNames = arg ? arg.split(" ") : [];
|
|
13
|
-
individualClassNames.forEach((className) => {
|
|
14
|
-
if (className.startsWith("atm_")) {
|
|
15
|
-
const [, keyHash] = className.split("_");
|
|
16
|
-
atomicClasses[keyHash] = className;
|
|
17
|
-
} else {
|
|
18
|
-
nonAtomicClasses.push(className);
|
|
19
|
-
}
|
|
5
|
+
var styleq = {};
|
|
6
|
+
var hasRequiredStyleq;
|
|
7
|
+
function requireStyleq() {
|
|
8
|
+
if (hasRequiredStyleq) return styleq;
|
|
9
|
+
hasRequiredStyleq = 1;
|
|
10
|
+
Object.defineProperty(styleq, "__esModule", {
|
|
11
|
+
value: true
|
|
20
12
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
13
|
+
styleq.styleq = void 0;
|
|
14
|
+
var cache = new WeakMap();
|
|
15
|
+
var compiledKey = '$$css';
|
|
16
|
+
function createStyleq(options) {
|
|
17
|
+
var disableCache;
|
|
18
|
+
var disableMix;
|
|
19
|
+
var transform;
|
|
20
|
+
if (options != null) {
|
|
21
|
+
disableCache = options.disableCache === true;
|
|
22
|
+
disableMix = options.disableMix === true;
|
|
23
|
+
transform = options.transform;
|
|
24
|
+
}
|
|
25
|
+
return function styleq() {
|
|
26
|
+
var definedProperties = [];
|
|
27
|
+
var className = '';
|
|
28
|
+
var inlineStyle = null;
|
|
29
|
+
var debugString = '';
|
|
30
|
+
var nextCache = disableCache ? null : cache;
|
|
31
|
+
var styles = new Array(arguments.length);
|
|
32
|
+
for(var i = 0; i < arguments.length; i++){
|
|
33
|
+
styles[i] = arguments[i];
|
|
34
|
+
}
|
|
35
|
+
while(styles.length > 0){
|
|
36
|
+
var possibleStyle = styles.pop();
|
|
37
|
+
if (possibleStyle == null || possibleStyle === false) {
|
|
38
|
+
continue;
|
|
39
|
+
}
|
|
40
|
+
if (Array.isArray(possibleStyle)) {
|
|
41
|
+
for(var _i = 0; _i < possibleStyle.length; _i++){
|
|
42
|
+
styles.push(possibleStyle[_i]);
|
|
43
|
+
}
|
|
44
|
+
continue;
|
|
45
|
+
}
|
|
46
|
+
var style = transform != null ? transform(possibleStyle) : possibleStyle;
|
|
47
|
+
if (style.$$css != null) {
|
|
48
|
+
var classNameChunk = '';
|
|
49
|
+
if (nextCache != null && nextCache.has(style)) {
|
|
50
|
+
var cacheEntry = nextCache.get(style);
|
|
51
|
+
if (cacheEntry != null) {
|
|
52
|
+
classNameChunk = cacheEntry[0];
|
|
53
|
+
debugString = cacheEntry[2];
|
|
54
|
+
definedProperties.push.apply(definedProperties, cacheEntry[1]);
|
|
55
|
+
nextCache = cacheEntry[3];
|
|
56
|
+
}
|
|
57
|
+
} else {
|
|
58
|
+
var definedPropertiesChunk = [];
|
|
59
|
+
for(var prop in style){
|
|
60
|
+
var value = style[prop];
|
|
61
|
+
if (prop === compiledKey) {
|
|
62
|
+
var compiledKeyValue = style[prop];
|
|
63
|
+
if (compiledKeyValue !== true) {
|
|
64
|
+
debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
|
|
65
|
+
}
|
|
66
|
+
continue;
|
|
67
|
+
}
|
|
68
|
+
if (typeof value === 'string' || value === null) {
|
|
69
|
+
if (!definedProperties.includes(prop)) {
|
|
70
|
+
definedProperties.push(prop);
|
|
71
|
+
if (nextCache != null) {
|
|
72
|
+
definedPropertiesChunk.push(prop);
|
|
73
|
+
}
|
|
74
|
+
if (typeof value === 'string') {
|
|
75
|
+
classNameChunk += classNameChunk ? ' ' + value : value;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
} else {
|
|
79
|
+
console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (nextCache != null) {
|
|
83
|
+
var weakMap = new WeakMap();
|
|
84
|
+
nextCache.set(style, [
|
|
85
|
+
classNameChunk,
|
|
86
|
+
definedPropertiesChunk,
|
|
87
|
+
debugString,
|
|
88
|
+
weakMap
|
|
89
|
+
]);
|
|
90
|
+
nextCache = weakMap;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (classNameChunk) {
|
|
94
|
+
className = className ? classNameChunk + ' ' + className : classNameChunk;
|
|
95
|
+
}
|
|
96
|
+
} else {
|
|
97
|
+
if (disableMix) {
|
|
98
|
+
if (inlineStyle == null) {
|
|
99
|
+
inlineStyle = {};
|
|
100
|
+
}
|
|
101
|
+
inlineStyle = Object.assign({}, style, inlineStyle);
|
|
102
|
+
} else {
|
|
103
|
+
var subStyle = null;
|
|
104
|
+
for(var _prop in style){
|
|
105
|
+
var _value = style[_prop];
|
|
106
|
+
if (_value !== undefined) {
|
|
107
|
+
if (!definedProperties.includes(_prop)) {
|
|
108
|
+
if (_value != null) {
|
|
109
|
+
if (inlineStyle == null) {
|
|
110
|
+
inlineStyle = {};
|
|
111
|
+
}
|
|
112
|
+
if (subStyle == null) {
|
|
113
|
+
subStyle = {};
|
|
114
|
+
}
|
|
115
|
+
subStyle[_prop] = _value;
|
|
116
|
+
}
|
|
117
|
+
definedProperties.push(_prop);
|
|
118
|
+
nextCache = null;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
if (subStyle != null) {
|
|
123
|
+
inlineStyle = Object.assign(subStyle, inlineStyle);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
var styleProps = [
|
|
129
|
+
className,
|
|
130
|
+
inlineStyle,
|
|
131
|
+
debugString
|
|
132
|
+
];
|
|
133
|
+
return styleProps;
|
|
134
|
+
};
|
|
26
135
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
31
|
-
var
|
|
136
|
+
var styleq$1 = styleq.styleq = createStyleq();
|
|
137
|
+
styleq$1.factory = createStyleq;
|
|
138
|
+
return styleq;
|
|
139
|
+
}
|
|
140
|
+
var styleqExports = requireStyleq();
|
|
141
|
+
function props(...styles) {
|
|
142
|
+
const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
|
|
143
|
+
const result = {};
|
|
144
|
+
if (className != null && className !== '') {
|
|
145
|
+
result.className = className;
|
|
146
|
+
}
|
|
147
|
+
if (style != null && Object.keys(style).length > 0) {
|
|
148
|
+
result.style = style;
|
|
149
|
+
}
|
|
150
|
+
if (dataStyleSrc != null && dataStyleSrc !== '') {
|
|
151
|
+
result['data-style-src'] = dataStyleSrc;
|
|
152
|
+
}
|
|
153
|
+
return result;
|
|
154
|
+
}
|
|
32
155
|
|
|
33
|
-
/**
|
|
34
|
-
* The underlying DOM element which is rendered by this component.
|
|
35
|
-
*/
|
|
36
156
|
const Root = "div";
|
|
37
|
-
function ColorBook(props, ref) {
|
|
157
|
+
function ColorBook(props$1, ref) {
|
|
38
158
|
const {
|
|
39
159
|
chapters,
|
|
40
160
|
selectedChapter,
|
|
41
161
|
onSelectChapter,
|
|
42
|
-
className,
|
|
43
162
|
...rest
|
|
44
|
-
} = props;
|
|
163
|
+
} = props$1;
|
|
45
164
|
return /*#__PURE__*/jsx(Root, {
|
|
46
165
|
ref: ref,
|
|
47
166
|
...rest,
|
|
48
|
-
|
|
167
|
+
...props(layoutStyles.block, styles.root),
|
|
49
168
|
children: chapters.map(({
|
|
50
169
|
name,
|
|
51
170
|
values
|
|
@@ -54,27 +173,67 @@ function ColorBook(props, ref) {
|
|
|
54
173
|
gridColumn: i + 1
|
|
55
174
|
},
|
|
56
175
|
children: [/*#__PURE__*/jsx("div", {
|
|
57
|
-
|
|
176
|
+
...{
|
|
177
|
+
0: {
|
|
178
|
+
className: "timvir-s-1n2onr6 timvir-s-1ypdohk timvir-s-78zum5 timvir-s-dt5ytf timvir-s-1m3v4wt timvir-s-1hmns74 timvir-s-51xajf timvir-s-1ydowbf timvir-s-e80sof timvir-s-abwq6t timvir-s-b52w3a timvir-s-ktd1bz timvir-s-1cpjm7i timvir-s-k53niv timvir-s-115iamj timvir-s-s2hnm7"
|
|
179
|
+
},
|
|
180
|
+
1: {
|
|
181
|
+
className: "timvir-s-1n2onr6 timvir-s-1ypdohk timvir-s-78zum5 timvir-s-dt5ytf timvir-s-1m3v4wt timvir-s-1hmns74 timvir-s-51xajf timvir-s-1ydowbf timvir-s-e80sof timvir-s-abwq6t timvir-s-b52w3a timvir-s-1cpjm7i timvir-s-k53niv timvir-s-ach7vw timvir-s-s2hnm7 timvir-s-su9jc6 timvir-s-fbg1o9"
|
|
182
|
+
}
|
|
183
|
+
}[!!(i === selectedChapter) << 0],
|
|
58
184
|
onClick: () => {
|
|
59
185
|
if (onSelectChapter) {
|
|
60
186
|
onSelectChapter(i);
|
|
61
187
|
}
|
|
62
188
|
},
|
|
63
|
-
children: values.map(value => /*#__PURE__*/jsx("div", {
|
|
189
|
+
children: values.map((value, i) => /*#__PURE__*/jsx("div", {
|
|
64
190
|
style: {
|
|
65
191
|
background: value
|
|
66
192
|
},
|
|
67
|
-
|
|
193
|
+
...props(styles.colorValue, i === 0 ? styles.colorValueFirst : null, i === values.length - 1 ? styles.colorValueLast : null)
|
|
68
194
|
}, value))
|
|
69
195
|
}), name && /*#__PURE__*/jsx("div", {
|
|
70
|
-
|
|
196
|
+
...{
|
|
197
|
+
0: {
|
|
198
|
+
className: "timvir-s-2b8uid timvir-s-boafo0 timvir-s-vgvpxu timvir-s-1nmq0fv timvir-s-o5v014"
|
|
199
|
+
},
|
|
200
|
+
1: {
|
|
201
|
+
className: "timvir-s-2b8uid timvir-s-boafo0 timvir-s-1nmq0fv timvir-s-o5v014 timvir-s-1cdhzux"
|
|
202
|
+
}
|
|
203
|
+
}[!!(i === selectedChapter) << 0],
|
|
71
204
|
children: name
|
|
72
205
|
})]
|
|
73
206
|
}, i))
|
|
74
207
|
});
|
|
75
208
|
}
|
|
76
209
|
var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
|
|
77
|
-
const
|
|
78
|
-
|
|
210
|
+
const styles = {
|
|
211
|
+
root: {
|
|
212
|
+
k1xSpc: "timvir-s-rvj5dj",
|
|
213
|
+
kxK9yV: "timvir-s-1p3d3bo",
|
|
214
|
+
klIVar: "timvir-s-u6a5m6",
|
|
215
|
+
kGNEyG: "timvir-s-7a106z",
|
|
216
|
+
kzqmXN: "timvir-s-h8yej3",
|
|
217
|
+
$$css: true
|
|
218
|
+
},
|
|
219
|
+
colorValue: {
|
|
220
|
+
kzQI83: "timvir-s-1iyjqo2",
|
|
221
|
+
$$css: true
|
|
222
|
+
},
|
|
223
|
+
colorValueFirst: {
|
|
224
|
+
kIxVMA: "timvir-s-1nrfd8m",
|
|
225
|
+
ksF3WI: "timvir-s-16gx4na",
|
|
226
|
+
kqGeR4: "timvir-s-frllxf",
|
|
227
|
+
kYm2EN: "timvir-s-jppbhk",
|
|
228
|
+
$$css: true
|
|
229
|
+
},
|
|
230
|
+
colorValueLast: {
|
|
231
|
+
kIxVMA: "timvir-s-1ia1hqs",
|
|
232
|
+
ksF3WI: "timvir-s-1a2w583",
|
|
233
|
+
kqGeR4: "timvir-s-1v8xtx2",
|
|
234
|
+
kYm2EN: "timvir-s-uvn51i",
|
|
235
|
+
$$css: true
|
|
236
|
+
}
|
|
237
|
+
};
|
|
79
238
|
|
|
80
239
|
export { ColorBook$1 as ColorBook };
|