datocms-react-ui 0.3.13 → 0.3.18
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/dist/cjs/Button/styles.module.css.json +1 -1
- package/dist/cjs/Canvas/index.js +19 -5
- package/dist/cjs/Canvas/index.js.map +1 -1
- package/dist/cjs/Form/index.js +19 -0
- package/dist/cjs/Form/index.js.map +1 -1
- package/dist/esm/Button/styles.module.css.json +1 -1
- package/dist/esm/Canvas/index.d.ts +16 -3
- package/dist/esm/Canvas/index.js +19 -5
- package/dist/esm/Canvas/index.js.map +1 -1
- package/dist/esm/Form/index.d.ts +19 -0
- package/dist/esm/Form/index.js +19 -0
- package/dist/esm/Form/index.js.map +1 -1
- package/dist/types/Canvas/index.d.ts +16 -3
- package/dist/types/Form/index.d.ts +19 -0
- package/package.json +2 -2
- package/styles.css +1 -1
- package/types.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "button": "
|
|
1
|
+
{ "button": "_button_474wk_1", "disabled": "_disabled_474wk_30", "buttonType-muted": "_buttonType-muted_474wk_34", "buttonType-primary": "_buttonType-primary_474wk_50", "buttonType-negative": "_buttonType-negative_474wk_71", "buttonSize-xxs": "_buttonSize-xxs_474wk_88", "buttonSize-xs": "_buttonSize-xs_474wk_93", "buttonSize-s": "_buttonSize-s_474wk_98", "buttonSize-m": "_buttonSize-m_474wk_103", "buttonSize-l": "_buttonSize-l_474wk_108", "buttonSize-xl": "_buttonSize-xl_474wk_113", "fullWidth": "_fullWidth_474wk_118", "button__leftIcon": "_button__leftIcon_474wk_124", "button__rightIcon": "_button__rightIcon_474wk_125" }
|
package/dist/cjs/Canvas/index.js
CHANGED
|
@@ -43,7 +43,10 @@ function camelToDash(str) {
|
|
|
43
43
|
return str;
|
|
44
44
|
}
|
|
45
45
|
/**
|
|
46
|
-
* @example Color variables
|
|
46
|
+
* @example Color palette CSS variables
|
|
47
|
+
*
|
|
48
|
+
* Within the `Canvas` component, a color palette is made available as a set of
|
|
49
|
+
* CSS variables, allowing you to conform to the theme of the current environment:
|
|
47
50
|
*
|
|
48
51
|
* ```js
|
|
49
52
|
* <Canvas ctx={ctx}>
|
|
@@ -320,7 +323,13 @@ function camelToDash(str) {
|
|
|
320
323
|
* </Canvas>;
|
|
321
324
|
* ```
|
|
322
325
|
*
|
|
323
|
-
* @example Typography variables
|
|
326
|
+
* @example Typography CSS variables
|
|
327
|
+
*
|
|
328
|
+
* Typography is a foundational element in UI design. Good typography
|
|
329
|
+
* establishes a strong, cohesive visual hierarchy and presents content clearly
|
|
330
|
+
* and efficiently to users. Within the `Canvas` component, a set of CSS
|
|
331
|
+
* variables is available allowing your plugin to conform to the overall
|
|
332
|
+
* look&feel of DatoCMS:
|
|
324
333
|
*
|
|
325
334
|
* ```js
|
|
326
335
|
* <Canvas ctx={ctx}>
|
|
@@ -425,7 +434,11 @@ function camelToDash(str) {
|
|
|
425
434
|
* </Canvas>;
|
|
426
435
|
* ```
|
|
427
436
|
*
|
|
428
|
-
* @example Spacing variables
|
|
437
|
+
* @example Spacing CSS variables
|
|
438
|
+
*
|
|
439
|
+
* The following CSS variables are available as well, to mimick the spacing
|
|
440
|
+
* between elements used by the main DatoCMS application. Negative spacing
|
|
441
|
+
* variables are available too (`--negative-spacing-<SIZE>`).
|
|
429
442
|
*
|
|
430
443
|
* ```js
|
|
431
444
|
* <Canvas ctx={ctx}>
|
|
@@ -527,10 +540,11 @@ function Canvas(_a) {
|
|
|
527
540
|
if (mode !== 'renderPage' && !noAutoResizer) {
|
|
528
541
|
var ctxWithAutoResizer_1 = ctx;
|
|
529
542
|
ctxWithAutoResizer_1.startAutoResizer();
|
|
530
|
-
|
|
543
|
+
return function () {
|
|
531
544
|
ctxWithAutoResizer_1.stopAutoResizer();
|
|
532
|
-
}
|
|
545
|
+
};
|
|
533
546
|
}
|
|
547
|
+
return undefined;
|
|
534
548
|
}, [mode, noAutoResizer]);
|
|
535
549
|
var style = Object.entries(ctx.theme).reduce(function (acc, _a) {
|
|
536
550
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,oFAA8C;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAEpD,oFAA8C;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0eG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,IAAA,iBAAS,EAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,gCAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAvCD,wBAuCC"}
|
package/dist/cjs/Form/index.js
CHANGED
|
@@ -102,6 +102,25 @@ var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json
|
|
|
102
102
|
* }}
|
|
103
103
|
* onChange={(newValue) => console.log(newValue)}
|
|
104
104
|
* />
|
|
105
|
+
* <SelectField
|
|
106
|
+
* name="multipleOption"
|
|
107
|
+
* id="multipleOption"
|
|
108
|
+
* label="Multiple options"
|
|
109
|
+
* hint="Select one of the options"
|
|
110
|
+
* value={[
|
|
111
|
+
* { label: 'Option 1', value: 'option1' },
|
|
112
|
+
* { label: 'Option 2', value: 'option2' },
|
|
113
|
+
* ]}
|
|
114
|
+
* selectInputProps={{
|
|
115
|
+
* isMulti: true,
|
|
116
|
+
* options: [
|
|
117
|
+
* { label: 'Option 1', value: 'option1' },
|
|
118
|
+
* { label: 'Option 2', value: 'option2' },
|
|
119
|
+
* { label: 'Option 3', value: 'option3' },
|
|
120
|
+
* ],
|
|
121
|
+
* }}
|
|
122
|
+
* onChange={(newValue) => console.log(newValue)}
|
|
123
|
+
* />
|
|
105
124
|
* <SwitchField
|
|
106
125
|
* name="debugMode"
|
|
107
126
|
* id="debugMode"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAU9C
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,0DAA4B;AAC5B,oFAA8C;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACI,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,IAAA,oBAAE,EAC3B,gCAAM,CAAC,UAAU,EACjB,gCAAM,CAAC,iBAAe,OAAS,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,iDAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,uCAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,IAAI,QAkCf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "button": "
|
|
1
|
+
{ "button": "_button_474wk_1", "disabled": "_disabled_474wk_30", "buttonType-muted": "_buttonType-muted_474wk_34", "buttonType-primary": "_buttonType-primary_474wk_50", "buttonType-negative": "_buttonType-negative_474wk_71", "buttonSize-xxs": "_buttonSize-xxs_474wk_88", "buttonSize-xs": "_buttonSize-xs_474wk_93", "buttonSize-s": "_buttonSize-s_474wk_98", "buttonSize-m": "_buttonSize-m_474wk_103", "buttonSize-l": "_buttonSize-l_474wk_108", "buttonSize-xl": "_buttonSize-xl_474wk_113", "fullWidth": "_fullWidth_474wk_118", "button__leftIcon": "_button__leftIcon_474wk_124", "button__rightIcon": "_button__rightIcon_474wk_125" }
|
|
@@ -6,7 +6,10 @@ export declare type CanvasProps = {
|
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
* @example Color variables
|
|
9
|
+
* @example Color palette CSS variables
|
|
10
|
+
*
|
|
11
|
+
* Within the `Canvas` component, a color palette is made available as a set of
|
|
12
|
+
* CSS variables, allowing you to conform to the theme of the current environment:
|
|
10
13
|
*
|
|
11
14
|
* ```js
|
|
12
15
|
* <Canvas ctx={ctx}>
|
|
@@ -283,7 +286,13 @@ export declare type CanvasProps = {
|
|
|
283
286
|
* </Canvas>;
|
|
284
287
|
* ```
|
|
285
288
|
*
|
|
286
|
-
* @example Typography variables
|
|
289
|
+
* @example Typography CSS variables
|
|
290
|
+
*
|
|
291
|
+
* Typography is a foundational element in UI design. Good typography
|
|
292
|
+
* establishes a strong, cohesive visual hierarchy and presents content clearly
|
|
293
|
+
* and efficiently to users. Within the `Canvas` component, a set of CSS
|
|
294
|
+
* variables is available allowing your plugin to conform to the overall
|
|
295
|
+
* look&feel of DatoCMS:
|
|
287
296
|
*
|
|
288
297
|
* ```js
|
|
289
298
|
* <Canvas ctx={ctx}>
|
|
@@ -388,7 +397,11 @@ export declare type CanvasProps = {
|
|
|
388
397
|
* </Canvas>;
|
|
389
398
|
* ```
|
|
390
399
|
*
|
|
391
|
-
* @example Spacing variables
|
|
400
|
+
* @example Spacing CSS variables
|
|
401
|
+
*
|
|
402
|
+
* The following CSS variables are available as well, to mimick the spacing
|
|
403
|
+
* between elements used by the main DatoCMS application. Negative spacing
|
|
404
|
+
* variables are available too (`--negative-spacing-<SIZE>`).
|
|
392
405
|
*
|
|
393
406
|
* ```js
|
|
394
407
|
* <Canvas ctx={ctx}>
|
package/dist/esm/Canvas/index.js
CHANGED
|
@@ -18,7 +18,10 @@ function camelToDash(str) {
|
|
|
18
18
|
return str;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
-
* @example Color variables
|
|
21
|
+
* @example Color palette CSS variables
|
|
22
|
+
*
|
|
23
|
+
* Within the `Canvas` component, a color palette is made available as a set of
|
|
24
|
+
* CSS variables, allowing you to conform to the theme of the current environment:
|
|
22
25
|
*
|
|
23
26
|
* ```js
|
|
24
27
|
* <Canvas ctx={ctx}>
|
|
@@ -295,7 +298,13 @@ function camelToDash(str) {
|
|
|
295
298
|
* </Canvas>;
|
|
296
299
|
* ```
|
|
297
300
|
*
|
|
298
|
-
* @example Typography variables
|
|
301
|
+
* @example Typography CSS variables
|
|
302
|
+
*
|
|
303
|
+
* Typography is a foundational element in UI design. Good typography
|
|
304
|
+
* establishes a strong, cohesive visual hierarchy and presents content clearly
|
|
305
|
+
* and efficiently to users. Within the `Canvas` component, a set of CSS
|
|
306
|
+
* variables is available allowing your plugin to conform to the overall
|
|
307
|
+
* look&feel of DatoCMS:
|
|
299
308
|
*
|
|
300
309
|
* ```js
|
|
301
310
|
* <Canvas ctx={ctx}>
|
|
@@ -400,7 +409,11 @@ function camelToDash(str) {
|
|
|
400
409
|
* </Canvas>;
|
|
401
410
|
* ```
|
|
402
411
|
*
|
|
403
|
-
* @example Spacing variables
|
|
412
|
+
* @example Spacing CSS variables
|
|
413
|
+
*
|
|
414
|
+
* The following CSS variables are available as well, to mimick the spacing
|
|
415
|
+
* between elements used by the main DatoCMS application. Negative spacing
|
|
416
|
+
* variables are available too (`--negative-spacing-<SIZE>`).
|
|
404
417
|
*
|
|
405
418
|
* ```js
|
|
406
419
|
* <Canvas ctx={ctx}>
|
|
@@ -502,10 +515,11 @@ export function Canvas(_a) {
|
|
|
502
515
|
if (mode !== 'renderPage' && !noAutoResizer) {
|
|
503
516
|
var ctxWithAutoResizer_1 = ctx;
|
|
504
517
|
ctxWithAutoResizer_1.startAutoResizer();
|
|
505
|
-
|
|
518
|
+
return function () {
|
|
506
519
|
ctxWithAutoResizer_1.stopAutoResizer();
|
|
507
|
-
}
|
|
520
|
+
};
|
|
508
521
|
}
|
|
522
|
+
return undefined;
|
|
509
523
|
}, [mode, noAutoResizer]);
|
|
510
524
|
var style = Object.entries(ctx.theme).reduce(function (acc, _a) {
|
|
511
525
|
var _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C,SAAS,WAAW,CAAC,GAAW;IAC9B,IAAI,GAAG,IAAI,GAAG,CAAC,WAAW,EAAE,EAAE;QAC5B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,EAArB,CAAqB,CAAC,CAAC;KAC3D;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0eG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAM,GAAmC,KAAzC,CAA0C;IAEtD,SAAS,CAAC;QACR,IAAI,IAAI,KAAK,YAAY,IAAI,CAAC,aAAa,EAAE;YAC3C,IAAM,oBAAkB,GAAI,GAAkC,CAAC;YAC/D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAC5C,UAAC,GAAG,EAAE,EAAM;;;YAAL,CAAC,QAAA,EAAE,CAAC,QAAA;QACT,6BACK,GAAG,gBACL,OAAK,WAAW,CAAC,CAAC,CAAG,IAAG,CAAC,KACzB,OAAK,WAAW,CAAI,CAAC,kBAAe,CAAG,IACtC,CAAA,MAAA,CAAC,CAAC,KAAK,CAAC,wBAAwB,CAAC,0CAAG,CAAC,CAAC,KAAI,SAAS,OACrD;IACJ,CAAC,EACD;QACE,OAAO,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,CAAC,IAAK,OAAG,CAAC,OAAI,EAAR,CAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;KACxD,CACF,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,IACxC,QAAQ,CACL,CACP,CAAC;AACJ,CAAC"}
|
package/dist/esm/Form/index.d.ts
CHANGED
|
@@ -60,6 +60,25 @@ export interface FormProps {
|
|
|
60
60
|
* }}
|
|
61
61
|
* onChange={(newValue) => console.log(newValue)}
|
|
62
62
|
* />
|
|
63
|
+
* <SelectField
|
|
64
|
+
* name="multipleOption"
|
|
65
|
+
* id="multipleOption"
|
|
66
|
+
* label="Multiple options"
|
|
67
|
+
* hint="Select one of the options"
|
|
68
|
+
* value={[
|
|
69
|
+
* { label: 'Option 1', value: 'option1' },
|
|
70
|
+
* { label: 'Option 2', value: 'option2' },
|
|
71
|
+
* ]}
|
|
72
|
+
* selectInputProps={{
|
|
73
|
+
* isMulti: true,
|
|
74
|
+
* options: [
|
|
75
|
+
* { label: 'Option 1', value: 'option1' },
|
|
76
|
+
* { label: 'Option 2', value: 'option2' },
|
|
77
|
+
* { label: 'Option 3', value: 'option3' },
|
|
78
|
+
* ],
|
|
79
|
+
* }}
|
|
80
|
+
* onChange={(newValue) => console.log(newValue)}
|
|
81
|
+
* />
|
|
63
82
|
* <SwitchField
|
|
64
83
|
* name="debugMode"
|
|
65
84
|
* id="debugMode"
|
package/dist/esm/Form/index.js
CHANGED
|
@@ -77,6 +77,25 @@ import styles from './styles.module.css.json';
|
|
|
77
77
|
* }}
|
|
78
78
|
* onChange={(newValue) => console.log(newValue)}
|
|
79
79
|
* />
|
|
80
|
+
* <SelectField
|
|
81
|
+
* name="multipleOption"
|
|
82
|
+
* id="multipleOption"
|
|
83
|
+
* label="Multiple options"
|
|
84
|
+
* hint="Select one of the options"
|
|
85
|
+
* value={[
|
|
86
|
+
* { label: 'Option 1', value: 'option1' },
|
|
87
|
+
* { label: 'Option 2', value: 'option2' },
|
|
88
|
+
* ]}
|
|
89
|
+
* selectInputProps={{
|
|
90
|
+
* isMulti: true,
|
|
91
|
+
* options: [
|
|
92
|
+
* { label: 'Option 1', value: 'option1' },
|
|
93
|
+
* { label: 'Option 2', value: 'option2' },
|
|
94
|
+
* { label: 'Option 3', value: 'option3' },
|
|
95
|
+
* ],
|
|
96
|
+
* }}
|
|
97
|
+
* onChange={(newValue) => console.log(newValue)}
|
|
98
|
+
* />
|
|
80
99
|
* <SwitchField
|
|
81
100
|
* name="debugMode"
|
|
82
101
|
* id="debugMode"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Form/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,WAAW,GAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,UAAC,EAMT;IALV,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAChB,UAAU,cALM,gDAMpB,CADc;IAEb,IAAM,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAM,kBAAkB,GAAG,EAAE,CAC3B,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,iBAAe,OAAS,CAAC,CACjC,CAAC;IAEF,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,KAAgB;QACf,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAM,UAAU,GAChE,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;QAC5B,IAAI,KAAK,EAAE;YACT,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAO,CAAC;SAC1D;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -6,7 +6,10 @@ export declare type CanvasProps = {
|
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
* @example Color variables
|
|
9
|
+
* @example Color palette CSS variables
|
|
10
|
+
*
|
|
11
|
+
* Within the `Canvas` component, a color palette is made available as a set of
|
|
12
|
+
* CSS variables, allowing you to conform to the theme of the current environment:
|
|
10
13
|
*
|
|
11
14
|
* ```js
|
|
12
15
|
* <Canvas ctx={ctx}>
|
|
@@ -283,7 +286,13 @@ export declare type CanvasProps = {
|
|
|
283
286
|
* </Canvas>;
|
|
284
287
|
* ```
|
|
285
288
|
*
|
|
286
|
-
* @example Typography variables
|
|
289
|
+
* @example Typography CSS variables
|
|
290
|
+
*
|
|
291
|
+
* Typography is a foundational element in UI design. Good typography
|
|
292
|
+
* establishes a strong, cohesive visual hierarchy and presents content clearly
|
|
293
|
+
* and efficiently to users. Within the `Canvas` component, a set of CSS
|
|
294
|
+
* variables is available allowing your plugin to conform to the overall
|
|
295
|
+
* look&feel of DatoCMS:
|
|
287
296
|
*
|
|
288
297
|
* ```js
|
|
289
298
|
* <Canvas ctx={ctx}>
|
|
@@ -388,7 +397,11 @@ export declare type CanvasProps = {
|
|
|
388
397
|
* </Canvas>;
|
|
389
398
|
* ```
|
|
390
399
|
*
|
|
391
|
-
* @example Spacing variables
|
|
400
|
+
* @example Spacing CSS variables
|
|
401
|
+
*
|
|
402
|
+
* The following CSS variables are available as well, to mimick the spacing
|
|
403
|
+
* between elements used by the main DatoCMS application. Negative spacing
|
|
404
|
+
* variables are available too (`--negative-spacing-<SIZE>`).
|
|
392
405
|
*
|
|
393
406
|
* ```js
|
|
394
407
|
* <Canvas ctx={ctx}>
|
|
@@ -60,6 +60,25 @@ export interface FormProps {
|
|
|
60
60
|
* }}
|
|
61
61
|
* onChange={(newValue) => console.log(newValue)}
|
|
62
62
|
* />
|
|
63
|
+
* <SelectField
|
|
64
|
+
* name="multipleOption"
|
|
65
|
+
* id="multipleOption"
|
|
66
|
+
* label="Multiple options"
|
|
67
|
+
* hint="Select one of the options"
|
|
68
|
+
* value={[
|
|
69
|
+
* { label: 'Option 1', value: 'option1' },
|
|
70
|
+
* { label: 'Option 2', value: 'option2' },
|
|
71
|
+
* ]}
|
|
72
|
+
* selectInputProps={{
|
|
73
|
+
* isMulti: true,
|
|
74
|
+
* options: [
|
|
75
|
+
* { label: 'Option 1', value: 'option1' },
|
|
76
|
+
* { label: 'Option 2', value: 'option2' },
|
|
77
|
+
* { label: 'Option 3', value: 'option3' },
|
|
78
|
+
* ],
|
|
79
|
+
* }}
|
|
80
|
+
* onChange={(newValue) => console.log(newValue)}
|
|
81
|
+
* />
|
|
63
82
|
* <SwitchField
|
|
64
83
|
* name="debugMode"
|
|
65
84
|
* id="debugMode"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datocms-react-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.18",
|
|
4
4
|
"description": "React components to use inside DatoCMS plugins",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"postcss-nested": "^5.0.6",
|
|
54
54
|
"typedoc": "^0.22.8"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "282064907243002cad101997fda8b4cdbb8f1f51"
|
|
57
57
|
}
|
package/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:900;src:url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff2"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:700;src:url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:700;src:url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:300;src:url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff2"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:300;src:url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff2"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:500;src:url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:500;src:url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:400;src:url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:400;src:url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:200;src:url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff2"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:200;src:url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff2"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("opentype")}html{font-size:16px;height:auto}body,html{margin:0;padding:0}._button_ya5s7_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:var(--font-weight-bold);line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_ya5s7_1:focus,._button_ya5s7_1:hover{opacity:.8}._button_ya5s7_1:active{opacity:.7}._disabled_ya5s7_30{background-color:var(--light-bg-color);color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_ya5s7_36{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_ya5s7_41{background-color:var(--accent-color);color:#fff}._buttonType-primary_ya5s7_41:active,._buttonType-primary_ya5s7_41:focus,._buttonType-primary_ya5s7_41:hover{color:#fff}._buttonType-primary_ya5s7_41._disabled_ya5s7_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_ya5s7_41._disabled_ya5s7_30:active,._buttonType-primary_ya5s7_41._disabled_ya5s7_30:focus,._buttonType-primary_ya5s7_41._disabled_ya5s7_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_ya5s7_62,._buttonType-negative_ya5s7_62:active,._buttonType-negative_ya5s7_62:focus,._buttonType-negative_ya5s7_62:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_ya5s7_62._disabled_ya5s7_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_ya5s7_79{font-size:1em;padding:.5em .8em}._buttonSize-xs_ya5s7_84{font-size:1em;padding:.6em .8em}._buttonSize-s_ya5s7_89{font-size:1em;padding:.7em 1em}._buttonSize-m_ya5s7_94{font-size:1.1em;padding:.7em 1em}._buttonSize-l_ya5s7_99{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_ya5s7_104{font-size:1.2em;padding:1em}._fullWidth_ya5s7_109{display:block;text-align:center;width:100%}._button__leftIcon_ya5s7_115,._button__rightIcon_ya5s7_116{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_ya5s7_115 svg,._button__rightIcon_ya5s7_116 svg{fill:var(--accent-color)}._button__leftIcon_ya5s7_115{margin-right:.5em}._button__leftIcon_ya5s7_115:last-child{margin-right:0}._button__rightIcon_ya5s7_116{margin-left:.5em}._button__rightIcon_ya5s7_116:first-child{margin-left:0}._canvas_1es76_1{--base-body-color:#34363a;--base-body-color-rgb-components:52,54,58;--light-body-color:#848484;--light-body-color-rgb-components:132,132,132;--placeholder-body-color:#c6c6c6;--placeholder-body-color-rgb-components:198,198,198;--light-bg-color:#f5f5f5;--light-bg-color-rgb-components:245,245,245;--lighter-bg-color:#f8f8f8;--lighter-bg-color-rgb-components:248,248,248;--disabled-bg-color:#ededed;--disabled-bg-color-rgb-components:237,237,237;--border-color:#f0f0f0;--border-color-rgb-components:240,240,240;--darker-border-color:#d7d7d7;--darker-border-color-rgb-components:215,215,215;--alert-color:#ff5e49;--alert-color-rgb-components:255,94,73;--warning-color:gold;--warning-color-rgb-components:255,215,0;--notice-color:#46d700;--notice-color-rgb-components:70,215,0;--warning-bg-color:#ffffe5;--warning-bg-color-rgb-components:255,255,229;--add-color:#4cb06d;--add-color-rgb-components:76,176,109;--remove-color:#eb576a;--remove-color-rgb-components:235,87,106;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--font-weight-bold:500;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-0.375rem;--negative-spacing-m:-0.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_x2oj2_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_x2oj2_1::placeholder{color:var(--placeholder-body-color)}._TextInput_x2oj2_1:hover{border-color:var(--darker-border-color)}._TextInput_x2oj2_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_x2oj2_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_x2oj2_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_x2oj2_41,._TextInput--error_x2oj2_41:focus,._TextInput--error_x2oj2_41:hover{border-color:var(--alert-color)}._TextInput--error_x2oj2_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-color-rgb-components),.2)}._inspector_u6041_1{margin:var(--spacing-l) 0}._panel_u6041_5{border-bottom:1px solid var(--border-color)}._panelHandle_u6041_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:var(--font-weight-bold);padding:5px 10px;width:100%}._panelHandle_u6041_9:hover{background:var(--lighter-bg-color)}._panelBody_u6041_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_u6041_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_u6041_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_u6041_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_u6041_42 p{margin:0}._propertyOrMethodBody_u6041_51{padding:15px}._propertyOrMethodExample_u6041_55{position:relative}._propertyOrMethodExample_u6041_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_u6041_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_u6041_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_u6041_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_u6041_82>*{margin-right:10px}._Section_zh95u_1{position:relative}._Section--highlighted_zh95u_5:before{animation:_pageContentSectionHighligh_zh95u_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zh95u_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zh95u_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zh95u_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zh95u_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zh95u_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zh95u_55:hover:before{opacity:.7}._Section__arrow--is-open_zh95u_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zh95u_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px rgba(var(--accent-color-rgb-components),.7)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}
|
|
1
|
+
@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:900;src:url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff2"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("woff"),url(https://use.typekit.net/af/7065ab/00000000000000003b9acdea/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n9&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:700;src:url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff2"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("woff"),url(https://use.typekit.net/af/5e9f47/00000000000000003b9acde8/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:700;src:url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff2"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("woff"),url(https://use.typekit.net/af/7d9fca/00000000000000003b9acde9/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i7&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:300;src:url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff2"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("woff"),url(https://use.typekit.net/af/a5949d/00000000000000003b9acde2/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:300;src:url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff2"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("woff"),url(https://use.typekit.net/af/29e3f1/00000000000000003b9acde3/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i3&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:500;src:url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:500;src:url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:400;src:url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:400;src:url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:200;src:url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff2"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("woff"),url(https://use.typekit.net/af/8faa9c/00000000000000003b9acde0/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n2&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:200;src:url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff2"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("woff"),url(https://use.typekit.net/af/256d4a/00000000000000003b9acde1/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i2&v=3) format("opentype")}html{font-size:16px;height:auto}body,html{margin:0;padding:0}._button_474wk_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:var(--font-weight-bold);line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_474wk_1:focus,._button_474wk_1:hover{opacity:.8}._button_474wk_1:active{opacity:.7}._disabled_474wk_30{cursor:not-allowed}._buttonType-muted_474wk_34{background-color:var(--light-color);color:var(--accent-color)}._buttonType-muted_474wk_34._disabled_474wk_30{background-color:var(--light-bg-color);color:rgba(0,0,0,.2)}._buttonType-muted_474wk_34._disabled_474wk_30:active,._buttonType-muted_474wk_34._disabled_474wk_30:focus,._buttonType-muted_474wk_34._disabled_474wk_30:hover{color:rgba(0,0,0,.2)}._buttonType-primary_474wk_50{background-color:var(--accent-color);color:#fff}._buttonType-primary_474wk_50:active,._buttonType-primary_474wk_50:focus,._buttonType-primary_474wk_50:hover{color:#fff}._buttonType-primary_474wk_50._disabled_474wk_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_474wk_50._disabled_474wk_30:active,._buttonType-primary_474wk_50._disabled_474wk_30:focus,._buttonType-primary_474wk_50._disabled_474wk_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_474wk_71,._buttonType-negative_474wk_71:active,._buttonType-negative_474wk_71:focus,._buttonType-negative_474wk_71:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_474wk_71._disabled_474wk_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_474wk_88{font-size:1em;padding:.5em .8em}._buttonSize-xs_474wk_93{font-size:1em;padding:.6em .8em}._buttonSize-s_474wk_98{font-size:1em;padding:.7em 1em}._buttonSize-m_474wk_103{font-size:1.1em;padding:.7em 1em}._buttonSize-l_474wk_108{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_474wk_113{font-size:1.2em;padding:1em}._fullWidth_474wk_118{display:block;text-align:center;width:100%}._button__leftIcon_474wk_124,._button__rightIcon_474wk_125{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_474wk_124 svg,._button__rightIcon_474wk_125 svg{fill:var(--accent-color)}._button__leftIcon_474wk_124{margin-right:.5em}._button__leftIcon_474wk_124:last-child{margin-right:0}._button__rightIcon_474wk_125{margin-left:.5em}._button__rightIcon_474wk_125:first-child{margin-left:0}._canvas_1es76_1{--base-body-color:#34363a;--base-body-color-rgb-components:52,54,58;--light-body-color:#848484;--light-body-color-rgb-components:132,132,132;--placeholder-body-color:#c6c6c6;--placeholder-body-color-rgb-components:198,198,198;--light-bg-color:#f5f5f5;--light-bg-color-rgb-components:245,245,245;--lighter-bg-color:#f8f8f8;--lighter-bg-color-rgb-components:248,248,248;--disabled-bg-color:#ededed;--disabled-bg-color-rgb-components:237,237,237;--border-color:#f0f0f0;--border-color-rgb-components:240,240,240;--darker-border-color:#d7d7d7;--darker-border-color-rgb-components:215,215,215;--alert-color:#ff5e49;--alert-color-rgb-components:255,94,73;--warning-color:gold;--warning-color-rgb-components:255,215,0;--notice-color:#46d700;--notice-color-rgb-components:70,215,0;--warning-bg-color:#ffffe5;--warning-bg-color-rgb-components:255,255,229;--add-color:#4cb06d;--add-color-rgb-components:76,176,109;--remove-color:#eb576a;--remove-color-rgb-components:235,87,106;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--font-weight-bold:500;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-0.375rem;--negative-spacing-m:-0.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_x2oj2_1{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_x2oj2_1::placeholder{color:var(--placeholder-body-color)}._TextInput_x2oj2_1:hover{border-color:var(--darker-border-color)}._TextInput_x2oj2_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_x2oj2_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_x2oj2_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_x2oj2_41,._TextInput--error_x2oj2_41:focus,._TextInput--error_x2oj2_41:hover{border-color:var(--alert-color)}._TextInput--error_x2oj2_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-color-rgb-components),.2)}._inspector_u6041_1{margin:var(--spacing-l) 0}._panel_u6041_5{border-bottom:1px solid var(--border-color)}._panelHandle_u6041_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:var(--font-weight-bold);padding:5px 10px;width:100%}._panelHandle_u6041_9:hover{background:var(--lighter-bg-color)}._panelBody_u6041_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_u6041_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_u6041_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_u6041_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_u6041_42 p{margin:0}._propertyOrMethodBody_u6041_51{padding:15px}._propertyOrMethodExample_u6041_55{position:relative}._propertyOrMethodExample_u6041_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_u6041_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_u6041_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_u6041_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_u6041_82>*{margin-right:10px}._Section_zh95u_1{position:relative}._Section--highlighted_zh95u_5:before{animation:_pageContentSectionHighligh_zh95u_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zh95u_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zh95u_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zh95u_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zh95u_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zh95u_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zh95u_55:hover:before{opacity:.7}._Section__arrow--is-open_zh95u_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zh95u_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px rgba(var(--accent-color-rgb-components),.7)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}
|
package/types.json
CHANGED
|
@@ -10873,7 +10873,7 @@
|
|
|
10873
10873
|
"sources": [
|
|
10874
10874
|
{
|
|
10875
10875
|
"fileName": "src/Canvas/index.tsx",
|
|
10876
|
-
"line":
|
|
10876
|
+
"line": 510,
|
|
10877
10877
|
"character": 16
|
|
10878
10878
|
}
|
|
10879
10879
|
],
|
|
@@ -10888,15 +10888,15 @@
|
|
|
10888
10888
|
"tags": [
|
|
10889
10889
|
{
|
|
10890
10890
|
"tag": "example",
|
|
10891
|
-
"text": "Color variables\n\n```js\n<Canvas ctx={ctx}>\n <Section title=\"Text colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--base-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--base-body-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--light-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-body-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--placeholder-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--placeholder-body-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n <Section title=\"UI colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--light-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--lighter-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--lighter-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--disabled-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--disabled-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--border-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--border-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--darker-border-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--darker-border-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--alert-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--alert-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--warning-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--warning-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--notice-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--notice-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--warning-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--warning-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--add-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--add-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--remove-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--remove-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n <Section title=\"Project-specific colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--accent-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--accent-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--primary-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--primary-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--light-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--dark-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--dark-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n</Canvas>;\n```\n"
|
|
10891
|
+
"text": "Color palette CSS variables\n\nWithin the `Canvas` component, a color palette is made available as a set of\nCSS variables, allowing you to conform to the theme of the current environment:\n\n```js\n<Canvas ctx={ctx}>\n <Section title=\"Text colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--base-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--base-body-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--light-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-body-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--placeholder-body-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--placeholder-body-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n <Section title=\"UI colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--light-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--lighter-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--lighter-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--disabled-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--disabled-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--border-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--border-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--darker-border-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--darker-border-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--alert-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--alert-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--warning-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--warning-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--notice-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--notice-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--warning-bg-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--warning-bg-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--add-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--add-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--remove-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--remove-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n <Section title=\"Project-specific colors\">\n <table>\n <tbody>\n <tr>\n <td>\n <code>--accent-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--accent-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--primary-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--primary-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--light-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--light-color)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--dark-color</code>\n </td>\n <td width=\"30%\">\n <div\n style={{\n width: '30px',\n height: '30px',\n background: 'var(--dark-color)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n </Section>\n</Canvas>;\n```\n"
|
|
10892
10892
|
},
|
|
10893
10893
|
{
|
|
10894
10894
|
"tag": "example",
|
|
10895
|
-
"text": "Typography variables\n\n```js\n<Canvas ctx={ctx}>\n <table>\n <tbody>\n <tr>\n <td>\n <code>--font-size-xxs</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-xxs)' }}>\n Size XXS\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xs</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-s</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-m</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-l</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-l)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size L\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XL\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xxl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xxl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XXL\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xxxl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xxxl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XXXL\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</Canvas>;\n```\n"
|
|
10895
|
+
"text": "Typography CSS variables\n\nTypography is a foundational element in UI design. Good typography\nestablishes a strong, cohesive visual hierarchy and presents content clearly\nand efficiently to users. Within the `Canvas` component, a set of CSS\nvariables is available allowing your plugin to conform to the overall\nlook&feel of DatoCMS:\n\n```js\n<Canvas ctx={ctx}>\n <table>\n <tbody>\n <tr>\n <td>\n <code>--font-size-xxs</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-xxs)' }}>\n Size XXS\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xs</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-xs)' }}>Size XS</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-s</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-s)' }}>Size S</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-m</code>\n </td>\n <td>\n <div style={{ fontSize: 'var(--font-size-m)' }}>Size M</div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-l</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-l)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size L\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XL\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xxl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xxl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XXL\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <code>--font-size-xxxl</code>\n </td>\n <td>\n <div\n style={{\n fontSize: 'var(--font-size-xxxl)',\n fontWeight: 'var(--font-weight-bold)',\n }}\n >\n Size XXXL\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</Canvas>;\n```\n"
|
|
10896
10896
|
},
|
|
10897
10897
|
{
|
|
10898
10898
|
"tag": "example",
|
|
10899
|
-
"text": "Spacing variables\n\n```js\n<Canvas ctx={ctx}>\n <table>\n <tbody>\n <tr>\n <td>\n <code>--spacing-s</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-s)',\n height: 'var(--spacing-s)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-m</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-m)',\n height: 'var(--spacing-m)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-l</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-l)',\n height: 'var(--spacing-l)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xl)',\n height: 'var(--spacing-xl)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xxl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xxl)',\n height: 'var(--spacing-xxl)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xxxl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xxxl)',\n height: 'var(--spacing-xxxl)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n</Canvas>;\n```\n"
|
|
10899
|
+
"text": "Spacing CSS variables\n\nThe following CSS variables are available as well, to mimick the spacing\nbetween elements used by the main DatoCMS application. Negative spacing\nvariables are available too (`--negative-spacing-<SIZE>`).\n\n```js\n<Canvas ctx={ctx}>\n <table>\n <tbody>\n <tr>\n <td>\n <code>--spacing-s</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-s)',\n height: 'var(--spacing-s)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-m</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-m)',\n height: 'var(--spacing-m)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-l</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-l)',\n height: 'var(--spacing-l)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xl)',\n height: 'var(--spacing-xl)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xxl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xxl)',\n height: 'var(--spacing-xxl)',\n }}\n />\n </td>\n </tr>\n <tr>\n <td>\n <code>--spacing-xxxl</code>\n </td>\n <td>\n <div\n style={{\n background: 'var(--accent-color)',\n width: 'var(--spacing-xxxl)',\n height: 'var(--spacing-xxxl)',\n }}\n />\n </td>\n </tr>\n </tbody>\n </table>\n</Canvas>;\n```\n"
|
|
10900
10900
|
}
|
|
10901
10901
|
]
|
|
10902
10902
|
},
|
|
@@ -11383,7 +11383,7 @@
|
|
|
11383
11383
|
"sources": [
|
|
11384
11384
|
{
|
|
11385
11385
|
"fileName": "src/Form/index.tsx",
|
|
11386
|
-
"line":
|
|
11386
|
+
"line": 111,
|
|
11387
11387
|
"character": 13
|
|
11388
11388
|
}
|
|
11389
11389
|
],
|
|
@@ -11398,7 +11398,7 @@
|
|
|
11398
11398
|
"tags": [
|
|
11399
11399
|
{
|
|
11400
11400
|
"tag": "example",
|
|
11401
|
-
"text": "Full example\n\n```js\n<Canvas ctx={ctx}>\n <Form onSubmit={() => console.log('onSubmit')}>\n <FieldGroup>\n <TextField\n required\n name=\"name\"\n id=\"name\"\n label=\"Name\"\n value=\"Mark Smith\"\n placeholder=\"Enter full name\"\n hint=\"Provide a full name\"\n onChange={(newValue) => console.log(newValue)}\n />\n <TextField\n required\n name=\"email\"\n id=\"email\"\n label=\"Email\"\n type=\"email\"\n value=\"\"\n placeholder=\"your@email.com\"\n error=\"Please enter an email!\"\n hint=\"Enter email address\"\n onChange={(newValue) => console.log(newValue)}\n />\n <TextField\n required\n name=\"apiToken\"\n id=\"apiToken\"\n label=\"API Token\"\n value=\"XXXYYY123\"\n hint=\"Enter a valid API token\"\n textInputProps={{ monospaced: true }}\n onChange={(newValue) => console.log(newValue)}\n />\n <SelectField\n name=\"option\"\n id=\"option\"\n label=\"Option\"\n hint=\"Select one of the options\"\n value={{ label: 'Option 1', value: 'option1' }}\n selectInputProps={{\n options: [\n { label: 'Option 1', value: 'option1' },\n { label: 'Option 2', value: 'option2' },\n { label: 'Option 3', value: 'option3' },\n ],\n }}\n onChange={(newValue) => console.log(newValue)}\n />\n <SwitchField\n name=\"debugMode\"\n id=\"debugMode\"\n label=\"Debug mode active?\"\n hint=\"Logs messages to console\"\n value={true}\n onChange={(newValue) => console.log(newValue)}\n />\n </FieldGroup>\n <FieldGroup>\n <Button fullWidth buttonType=\"primary\">\n Submit\n </Button>\n </FieldGroup>\n </Form>\n</Canvas>;\n```\n"
|
|
11401
|
+
"text": "Full example\n\n```js\n<Canvas ctx={ctx}>\n <Form onSubmit={() => console.log('onSubmit')}>\n <FieldGroup>\n <TextField\n required\n name=\"name\"\n id=\"name\"\n label=\"Name\"\n value=\"Mark Smith\"\n placeholder=\"Enter full name\"\n hint=\"Provide a full name\"\n onChange={(newValue) => console.log(newValue)}\n />\n <TextField\n required\n name=\"email\"\n id=\"email\"\n label=\"Email\"\n type=\"email\"\n value=\"\"\n placeholder=\"your@email.com\"\n error=\"Please enter an email!\"\n hint=\"Enter email address\"\n onChange={(newValue) => console.log(newValue)}\n />\n <TextField\n required\n name=\"apiToken\"\n id=\"apiToken\"\n label=\"API Token\"\n value=\"XXXYYY123\"\n hint=\"Enter a valid API token\"\n textInputProps={{ monospaced: true }}\n onChange={(newValue) => console.log(newValue)}\n />\n <SelectField\n name=\"option\"\n id=\"option\"\n label=\"Option\"\n hint=\"Select one of the options\"\n value={{ label: 'Option 1', value: 'option1' }}\n selectInputProps={{\n options: [\n { label: 'Option 1', value: 'option1' },\n { label: 'Option 2', value: 'option2' },\n { label: 'Option 3', value: 'option3' },\n ],\n }}\n onChange={(newValue) => console.log(newValue)}\n />\n <SelectField\n name=\"multipleOption\"\n id=\"multipleOption\"\n label=\"Multiple options\"\n hint=\"Select one of the options\"\n value={[\n { label: 'Option 1', value: 'option1' },\n { label: 'Option 2', value: 'option2' },\n ]}\n selectInputProps={{\n isMulti: true,\n options: [\n { label: 'Option 1', value: 'option1' },\n { label: 'Option 2', value: 'option2' },\n { label: 'Option 3', value: 'option3' },\n ],\n }}\n onChange={(newValue) => console.log(newValue)}\n />\n <SwitchField\n name=\"debugMode\"\n id=\"debugMode\"\n label=\"Debug mode active?\"\n hint=\"Logs messages to console\"\n value={true}\n onChange={(newValue) => console.log(newValue)}\n />\n </FieldGroup>\n <FieldGroup>\n <Button fullWidth buttonType=\"primary\">\n Submit\n </Button>\n </FieldGroup>\n </Form>\n</Canvas>;\n```\n"
|
|
11402
11402
|
}
|
|
11403
11403
|
]
|
|
11404
11404
|
},
|