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.
Files changed (73) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/blocks/Arbitrary/Arbitrary.d.ts +1 -1
  3. package/blocks/Arbitrary/index.js +193 -48
  4. package/blocks/Arbitrary/styles.css +166 -6
  5. package/blocks/Code/Code.d.ts +0 -6
  6. package/blocks/Code/docs/index.mdx +0 -11
  7. package/blocks/Code/index.js +205 -112
  8. package/blocks/Code/styles.css +100 -15
  9. package/blocks/ColorBar/docs/index.mdx +8 -2
  10. package/blocks/ColorBar/index.js +198 -47
  11. package/blocks/ColorBar/styles.css +103 -4
  12. package/blocks/ColorBook/docs/index.mdx +1 -1
  13. package/blocks/ColorBook/index.js +198 -39
  14. package/blocks/ColorBook/styles.css +166 -6
  15. package/blocks/Cover/index.js +165 -36
  16. package/blocks/Cover/styles.css +18 -0
  17. package/blocks/Exhibit/index.js +192 -41
  18. package/blocks/Exhibit/styles.css +66 -3
  19. package/blocks/Font/index.js +188 -58
  20. package/blocks/Font/styles.css +82 -8
  21. package/blocks/Grid/docs/index.mdx +4 -4
  22. package/blocks/Grid/index.js +176 -33
  23. package/blocks/Grid/styles.css +20 -1
  24. package/blocks/Icon/docs/index.mdx +13 -13
  25. package/blocks/Icon/index.js +25 -43
  26. package/blocks/Icon/styles.css +117 -5
  27. package/blocks/Message/docs/index.mdx +5 -8
  28. package/blocks/Message/index.js +233 -54
  29. package/blocks/Message/styles.css +94 -6
  30. package/blocks/Swatch/docs/index.mdx +16 -16
  31. package/blocks/Swatch/index.js +180 -35
  32. package/blocks/Swatch/styles.css +82 -4
  33. package/blocks/Viewport/index.js +198 -91
  34. package/blocks/Viewport/styles.css +259 -14
  35. package/blocks/WebLink/index.js +192 -48
  36. package/blocks/WebLink/styles.css +170 -8
  37. package/blocks/styles.css +1460 -97
  38. package/builtins/components.d.ts +2 -2
  39. package/builtins/index.d.ts +0 -1
  40. package/builtins/index.js +300 -243
  41. package/builtins/styles.css +265 -25
  42. package/context/index.d.ts +6 -1
  43. package/core/components/Commands/Commands.d.ts +5 -1
  44. package/core/components/NavigationFooter/NavigationFooter.d.ts +4 -2
  45. package/core/components/Page/Page.d.ts +12 -3
  46. package/core/components/Page/docs/index.mdx +44 -11
  47. package/core/index.d.ts +191 -2
  48. package/core/index.js +415 -256
  49. package/core/layout.d.ts +41 -0
  50. package/core/styles.css +857 -88
  51. package/global.css +79 -0
  52. package/internal/cx.d.ts +1 -0
  53. package/package.json +1 -2
  54. package/search/index.js +2 -223
  55. package/styles.css +2670 -235
  56. package/blocks/Code/theme.d.ts +0 -2
  57. package/bus/styles.css +0 -1
  58. package/context/styles.css +0 -1
  59. package/core/theme/index.d.ts +0 -1
  60. package/hooks/styles.css +0 -1
  61. package/search/Search/internal/Dialog.d.ts +0 -20
  62. package/search/Search/internal/index.d.ts +0 -1
  63. package/search/SearchBoxInput/SearchBoxInput.d.ts +0 -11
  64. package/search/SearchBoxInput/docs/api.mdx +0 -76
  65. package/search/SearchBoxInput/docs/index.mdx +0 -6
  66. package/search/SearchBoxInput/index.d.ts +0 -1
  67. package/search/SearchBoxInput/samples/basic.d.ts +0 -1
  68. package/search/SearchBoxListItem/SearchBoxListItem.d.ts +0 -13
  69. package/search/SearchBoxListItem/docs/api.mdx +0 -76
  70. package/search/SearchBoxListItem/docs/index.mdx +0 -30
  71. package/search/SearchBoxListItem/index.d.ts +0 -1
  72. package/search/SearchBoxListItem/samples/basic.d.ts +0 -1
  73. package/search/styles.css +0 -16
@@ -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
- // src/css.ts
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
- // src/cx.ts
10
- var cx = function cx2() {
11
- const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
12
- const atomicClasses = {};
13
- const nonAtomicClasses = [];
14
- presentClassNames.forEach((arg) => {
15
- const individualClassNames = arg ? arg.split(" ") : [];
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
- const result = [];
26
- for (const keyHash in atomicClasses) {
27
- if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
28
- result.push(atomicClasses[keyHash]);
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
- result.push(...nonAtomicClasses);
32
- return result.join(" ");
33
- };
34
- var cx_default = cx;
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: classes.bar,
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: classes.value,
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: classes.overlay,
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?.value ?? ""
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 tweaks = {
85
- selected: "s4sqb81"
86
- };
87
- const classes = {
88
- root: "r1f19pie",
89
- bar: "b15hqsfj",
90
- value: "v1uw85xw",
91
- overlay: "o1823law"
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
- .r1f19pie{position:relative;}
3
- .b15hqsfj{display:-ms-grid;display:grid;-ms-grid-auto-flow:row;grid-auto-flow:row;-ms-grid-columns:repeat(auto-fit, minmax(0, 1fr));grid-template-columns:repeat(auto-fit, minmax(0, 1fr));-webkit-transition:all 0.16s;transition:all 0.16s;}.b15hqsfj::before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:2;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.15);content:"";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all 0.16s;transition:all 0.16s;}.b15hqsfj:hover::before{opacity:0;}
4
- .v1uw85xw{height:40px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-ms-grid;display:grid;place-items:stretch;}.v1uw85xw>div{-webkit-transition:all 0.16s;transition:all 0.16s;cursor:pointer;}.v1uw85xw:first-child>div{border-radius:2px 0 0 2px;}.v1uw85xw:last-child>div{border-radius:0 2px 2px 0;}.v1uw85xw:hover{z-index:3;}.v1uw85xw:hover>div{border-radius:2px;margin:-3px 1px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2),0 2px 4px rgba(16, 22, 26, 0.1),0 8px 24px rgba(16, 22, 26, 0.2);}
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
- // src/css.ts
5
-
6
- // src/cx.ts
7
- var cx = function cx2() {
8
- const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
9
- const atomicClasses = {};
10
- const nonAtomicClasses = [];
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
- const result = [];
23
- for (const keyHash in atomicClasses) {
24
- if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
25
- result.push(atomicClasses[keyHash]);
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
- result.push(...nonAtomicClasses);
29
- return result.join(" ");
30
- };
31
- var cx_default = cx;
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
- className: cx_default(className, "rmv2wrl"),
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
- className: cx_default(chapter, i === selectedChapter && activeChapter),
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
- className: "d1l94wnr"
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
- className: cx_default("d1uopbb", i === selectedChapter && "d1vwzhoa"),
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 chapter = "c1xqhu04";
78
- const activeChapter = "a1y0tcvx";
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 };