datocms-react-ui 0.3.14 → 0.3.19
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/ButtonGroup/Button/index.js +19 -0
- package/dist/cjs/ButtonGroup/Button/index.js.map +1 -0
- package/dist/cjs/ButtonGroup/Button/styles.module.css.json +1 -0
- package/dist/cjs/ButtonGroup/Group/index.js +29 -0
- package/dist/cjs/ButtonGroup/Group/index.js.map +1 -0
- package/dist/cjs/ButtonGroup/Group/styles.module.css.json +1 -0
- package/dist/cjs/ButtonGroup/index.js +8 -0
- package/dist/cjs/ButtonGroup/index.js.map +1 -0
- package/dist/cjs/Canvas/index.js +16 -27
- package/dist/cjs/Canvas/index.js.map +1 -1
- package/dist/cjs/Canvas/styles.module.css.json +1 -1
- package/dist/cjs/Dropdown/Dropdown.js +166 -0
- package/dist/cjs/Dropdown/Dropdown.js.map +1 -0
- package/dist/cjs/Dropdown/DropdownContext.js +9 -0
- package/dist/cjs/Dropdown/DropdownContext.js.map +1 -0
- package/dist/cjs/Dropdown/Group.js +16 -0
- package/dist/cjs/Dropdown/Group.js.map +1 -0
- package/dist/cjs/Dropdown/Menu.js +250 -0
- package/dist/cjs/Dropdown/Menu.js.map +1 -0
- package/dist/cjs/Dropdown/MenuContext.js +12 -0
- package/dist/cjs/Dropdown/MenuContext.js.map +1 -0
- package/dist/cjs/Dropdown/Option.js +100 -0
- package/dist/cjs/Dropdown/Option.js.map +1 -0
- package/dist/cjs/Dropdown/OptionAction.js +29 -0
- package/dist/cjs/Dropdown/OptionAction.js.map +1 -0
- package/dist/cjs/Dropdown/Portal.js +53 -0
- package/dist/cjs/Dropdown/Portal.js.map +1 -0
- package/dist/cjs/Dropdown/Separator.js +37 -0
- package/dist/cjs/Dropdown/Separator.js.map +1 -0
- package/dist/cjs/Dropdown/Text.js +14 -0
- package/dist/cjs/Dropdown/Text.js.map +1 -0
- package/dist/cjs/Dropdown/index.js +18 -0
- package/dist/cjs/Dropdown/index.js.map +1 -0
- package/dist/cjs/Dropdown/styles.module.css.json +1 -0
- package/dist/cjs/Form/index.js +19 -0
- package/dist/cjs/Form/index.js.map +1 -1
- package/dist/cjs/SidebarPanel/index.js +88 -0
- package/dist/cjs/SidebarPanel/index.js.map +1 -0
- package/dist/cjs/SidebarPanel/styles.module.css.json +1 -0
- package/dist/cjs/Spinner/index.js +64 -0
- package/dist/cjs/Spinner/index.js.map +1 -0
- package/dist/cjs/Spinner/styles.module.css.json +1 -0
- package/dist/cjs/Toolbar/Button/index.js +15 -0
- package/dist/cjs/Toolbar/Button/index.js.map +1 -0
- package/dist/cjs/Toolbar/Button/styles.module.css.json +1 -0
- package/dist/cjs/Toolbar/Stack/index.js +19 -0
- package/dist/cjs/Toolbar/Stack/index.js.map +1 -0
- package/dist/cjs/Toolbar/Stack/styles.module.css.json +1 -0
- package/dist/cjs/Toolbar/Title/index.js +15 -0
- package/dist/cjs/Toolbar/Title/index.js.map +1 -0
- package/dist/cjs/Toolbar/Title/styles.module.css.json +1 -0
- package/dist/cjs/Toolbar/Toolbar/index.js +99 -0
- package/dist/cjs/Toolbar/Toolbar/index.js.map +1 -0
- package/dist/cjs/Toolbar/Toolbar/styles.module.css.json +1 -0
- package/dist/cjs/Toolbar/index.js +12 -0
- package/dist/cjs/Toolbar/index.js.map +1 -0
- package/dist/cjs/generateStyleFromCtx/index.js +32 -0
- package/dist/cjs/generateStyleFromCtx/index.js.map +1 -0
- package/dist/cjs/icons.js +38 -0
- package/dist/cjs/icons.js.map +1 -0
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/mergeRefs/index.js +19 -0
- package/dist/cjs/mergeRefs/index.js.map +1 -0
- package/dist/cjs/useClickOutside/index.js +24 -0
- package/dist/cjs/useClickOutside/index.js.map +1 -0
- package/dist/cjs/useMediaQuery/index.js +149 -0
- package/dist/cjs/useMediaQuery/index.js.map +1 -0
- package/dist/esm/Button/styles.module.css.json +1 -1
- package/dist/esm/ButtonGroup/Button/index.d.ts +10 -0
- package/dist/esm/ButtonGroup/Button/index.js +12 -0
- package/dist/esm/ButtonGroup/Button/index.js.map +1 -0
- package/dist/esm/ButtonGroup/Button/styles.module.css.json +1 -0
- package/dist/esm/ButtonGroup/Group/index.d.ts +21 -0
- package/dist/esm/ButtonGroup/Group/index.js +22 -0
- package/dist/esm/ButtonGroup/Group/index.js.map +1 -0
- package/dist/esm/ButtonGroup/Group/styles.module.css.json +1 -0
- package/dist/esm/ButtonGroup/index.d.ts +4 -0
- package/dist/esm/ButtonGroup/index.js +3 -0
- package/dist/esm/ButtonGroup/index.js.map +1 -0
- package/dist/esm/Canvas/index.d.ts +7 -3
- package/dist/esm/Canvas/index.js +16 -28
- package/dist/esm/Canvas/index.js.map +1 -1
- package/dist/esm/Canvas/styles.module.css.json +1 -1
- package/dist/esm/Dropdown/Dropdown.d.ts +113 -0
- package/dist/esm/Dropdown/Dropdown.js +140 -0
- package/dist/esm/Dropdown/Dropdown.js.map +1 -0
- package/dist/esm/Dropdown/DropdownContext.d.ts +6 -0
- package/dist/esm/Dropdown/DropdownContext.js +6 -0
- package/dist/esm/Dropdown/DropdownContext.js.map +1 -0
- package/dist/esm/Dropdown/Group.d.ts +6 -0
- package/dist/esm/Dropdown/Group.js +9 -0
- package/dist/esm/Dropdown/Group.js.map +1 -0
- package/dist/esm/Dropdown/Menu.d.ts +6 -0
- package/dist/esm/Dropdown/Menu.js +224 -0
- package/dist/esm/Dropdown/Menu.js.map +1 -0
- package/dist/esm/Dropdown/MenuContext.d.ts +8 -0
- package/dist/esm/Dropdown/MenuContext.js +9 -0
- package/dist/esm/Dropdown/MenuContext.js.map +1 -0
- package/dist/esm/Dropdown/Option.d.ts +13 -0
- package/dist/esm/Dropdown/Option.js +74 -0
- package/dist/esm/Dropdown/Option.js.map +1 -0
- package/dist/esm/Dropdown/OptionAction.d.ts +11 -0
- package/dist/esm/Dropdown/OptionAction.js +22 -0
- package/dist/esm/Dropdown/OptionAction.js.map +1 -0
- package/dist/esm/Dropdown/Portal.d.ts +4 -0
- package/dist/esm/Dropdown/Portal.js +27 -0
- package/dist/esm/Dropdown/Portal.js.map +1 -0
- package/dist/esm/Dropdown/Separator.d.ts +2 -0
- package/dist/esm/Dropdown/Separator.js +11 -0
- package/dist/esm/Dropdown/Separator.js.map +1 -0
- package/dist/esm/Dropdown/Text.d.ts +5 -0
- package/dist/esm/Dropdown/Text.js +7 -0
- package/dist/esm/Dropdown/Text.js.map +1 -0
- package/dist/esm/Dropdown/index.d.ts +9 -0
- package/dist/esm/Dropdown/index.js +9 -0
- package/dist/esm/Dropdown/index.js.map +1 -0
- package/dist/esm/Dropdown/styles.module.css.json +1 -0
- 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/esm/SidebarPanel/index.d.ts +43 -0
- package/dist/esm/SidebarPanel/index.js +62 -0
- package/dist/esm/SidebarPanel/index.js.map +1 -0
- package/dist/esm/SidebarPanel/styles.module.css.json +1 -0
- package/dist/esm/Spinner/index.d.ts +27 -0
- package/dist/esm/Spinner/index.js +57 -0
- package/dist/esm/Spinner/index.js.map +1 -0
- package/dist/esm/Spinner/styles.module.css.json +1 -0
- package/dist/esm/Toolbar/Button/index.d.ts +8 -0
- package/dist/esm/Toolbar/Button/index.js +8 -0
- package/dist/esm/Toolbar/Button/index.js.map +1 -0
- package/dist/esm/Toolbar/Button/styles.module.css.json +1 -0
- package/dist/esm/Toolbar/Stack/index.d.ts +8 -0
- package/dist/esm/Toolbar/Stack/index.js +12 -0
- package/dist/esm/Toolbar/Stack/index.js.map +1 -0
- package/dist/esm/Toolbar/Stack/styles.module.css.json +1 -0
- package/dist/esm/Toolbar/Title/index.d.ts +7 -0
- package/dist/esm/Toolbar/Title/index.js +8 -0
- package/dist/esm/Toolbar/Title/index.js.map +1 -0
- package/dist/esm/Toolbar/Title/styles.module.css.json +1 -0
- package/dist/esm/Toolbar/Toolbar/index.d.ts +91 -0
- package/dist/esm/Toolbar/Toolbar/index.js +92 -0
- package/dist/esm/Toolbar/Toolbar/index.js.map +1 -0
- package/dist/esm/Toolbar/Toolbar/styles.module.css.json +1 -0
- package/dist/esm/Toolbar/index.d.ts +8 -0
- package/dist/esm/Toolbar/index.js +5 -0
- package/dist/esm/Toolbar/index.js.map +1 -0
- package/dist/esm/generateStyleFromCtx/index.d.ts +3 -0
- package/dist/esm/generateStyleFromCtx/index.js +28 -0
- package/dist/esm/generateStyleFromCtx/index.js.map +1 -0
- package/dist/esm/icons.d.ts +12 -0
- package/dist/esm/icons.js +27 -0
- package/dist/esm/icons.js.map +1 -0
- package/dist/esm/index.d.ts +6 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/mergeRefs/index.d.ts +2 -0
- package/dist/esm/mergeRefs/index.js +15 -0
- package/dist/esm/mergeRefs/index.js.map +1 -0
- package/dist/esm/useClickOutside/index.d.ts +2 -0
- package/dist/esm/useClickOutside/index.js +21 -0
- package/dist/esm/useClickOutside/index.js.map +1 -0
- package/dist/esm/useMediaQuery/index.d.ts +8 -0
- package/dist/esm/useMediaQuery/index.js +140 -0
- package/dist/esm/useMediaQuery/index.js.map +1 -0
- package/dist/types/ButtonGroup/Button/index.d.ts +10 -0
- package/dist/types/ButtonGroup/Group/index.d.ts +21 -0
- package/dist/types/ButtonGroup/index.d.ts +4 -0
- package/dist/types/Canvas/index.d.ts +7 -3
- package/dist/types/Dropdown/Dropdown.d.ts +113 -0
- package/dist/types/Dropdown/DropdownContext.d.ts +6 -0
- package/dist/types/Dropdown/Group.d.ts +6 -0
- package/dist/types/Dropdown/Menu.d.ts +6 -0
- package/dist/types/Dropdown/MenuContext.d.ts +8 -0
- package/dist/types/Dropdown/Option.d.ts +13 -0
- package/dist/types/Dropdown/OptionAction.d.ts +11 -0
- package/dist/types/Dropdown/Portal.d.ts +4 -0
- package/dist/types/Dropdown/Separator.d.ts +2 -0
- package/dist/types/Dropdown/Text.d.ts +5 -0
- package/dist/types/Dropdown/index.d.ts +9 -0
- package/dist/types/Form/index.d.ts +19 -0
- package/dist/types/SidebarPanel/index.d.ts +43 -0
- package/dist/types/Spinner/index.d.ts +27 -0
- package/dist/types/Toolbar/Button/index.d.ts +8 -0
- package/dist/types/Toolbar/Stack/index.d.ts +8 -0
- package/dist/types/Toolbar/Title/index.d.ts +7 -0
- package/dist/types/Toolbar/Toolbar/index.d.ts +91 -0
- package/dist/types/Toolbar/index.d.ts +8 -0
- package/dist/types/generateStyleFromCtx/index.d.ts +3 -0
- package/dist/types/icons.d.ts +12 -0
- package/dist/types/index.d.ts +6 -0
- package/dist/types/mergeRefs/index.d.ts +2 -0
- package/dist/types/useClickOutside/index.d.ts +2 -0
- package/dist/types/useMediaQuery/index.d.ts +8 -0
- package/package.json +8 -5
- package/styles.css +1 -1
- package/types.json +4688 -1844
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type RenderTriggerCtx = {
|
|
3
|
+
open: boolean;
|
|
4
|
+
onClick: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare type DropdownProps = {
|
|
7
|
+
renderTrigger: (ctx: RenderTriggerCtx) => JSX.Element;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* @example Basic example
|
|
12
|
+
*
|
|
13
|
+
* ```js
|
|
14
|
+
* <Canvas ctx={ctx}>
|
|
15
|
+
* <Dropdown
|
|
16
|
+
* renderTrigger={({ open, onClick }) => (
|
|
17
|
+
* <Button
|
|
18
|
+
* onClick={onClick}
|
|
19
|
+
* rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
|
|
20
|
+
* >
|
|
21
|
+
* Options
|
|
22
|
+
* </Button>
|
|
23
|
+
* )}
|
|
24
|
+
* >
|
|
25
|
+
* <DropdownMenu>
|
|
26
|
+
* <DropdownOption onClick={() => {}}>Edit</DropdownOption>
|
|
27
|
+
* <DropdownOption disabled onClick={() => {}}>
|
|
28
|
+
* Duplicate
|
|
29
|
+
* </DropdownOption>
|
|
30
|
+
* <DropdownSeparator />
|
|
31
|
+
* <DropdownOption red onClick={() => {}}>
|
|
32
|
+
* Delete
|
|
33
|
+
* </DropdownOption>
|
|
34
|
+
* </DropdownMenu>
|
|
35
|
+
* </Dropdown>
|
|
36
|
+
* </Canvas>;
|
|
37
|
+
* ```
|
|
38
|
+
*
|
|
39
|
+
* @example Option actions
|
|
40
|
+
*
|
|
41
|
+
* ```js
|
|
42
|
+
* <Canvas ctx={ctx}>
|
|
43
|
+
* <Dropdown
|
|
44
|
+
* renderTrigger={({ open, onClick }) => (
|
|
45
|
+
* <Button
|
|
46
|
+
* onClick={onClick}
|
|
47
|
+
* rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
|
|
48
|
+
* >
|
|
49
|
+
* Fields
|
|
50
|
+
* </Button>
|
|
51
|
+
* )}
|
|
52
|
+
* >
|
|
53
|
+
* <DropdownMenu>
|
|
54
|
+
* <DropdownOption>
|
|
55
|
+
* First option
|
|
56
|
+
* <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
|
|
57
|
+
* <DropdownOptionAction
|
|
58
|
+
* red
|
|
59
|
+
* icon={<TrashIcon />}
|
|
60
|
+
* onClick={() => {}}
|
|
61
|
+
* />
|
|
62
|
+
* </DropdownOption>
|
|
63
|
+
* <DropdownOption>
|
|
64
|
+
* Second option
|
|
65
|
+
* <DropdownOptionAction icon={<PlusIcon />} onClick={() => {}} />
|
|
66
|
+
* <DropdownOptionAction
|
|
67
|
+
* red
|
|
68
|
+
* icon={<TrashIcon />}
|
|
69
|
+
* onClick={() => {}}
|
|
70
|
+
* />
|
|
71
|
+
* </DropdownOption>
|
|
72
|
+
* </DropdownMenu>
|
|
73
|
+
* </Dropdown>
|
|
74
|
+
* </Canvas>;
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* @example Option groups
|
|
78
|
+
*
|
|
79
|
+
* ```js
|
|
80
|
+
* <Canvas ctx={ctx}>
|
|
81
|
+
* <Dropdown
|
|
82
|
+
* renderTrigger={({ open, onClick }) => (
|
|
83
|
+
* <Button
|
|
84
|
+
* onClick={onClick}
|
|
85
|
+
* rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
|
|
86
|
+
* >
|
|
87
|
+
* Fields
|
|
88
|
+
* </Button>
|
|
89
|
+
* )}
|
|
90
|
+
* >
|
|
91
|
+
* <DropdownMenu>
|
|
92
|
+
* <DropdownGroup name="Group 1">
|
|
93
|
+
* <DropdownOption>Foo</DropdownOption>
|
|
94
|
+
* <DropdownOption>Bar</DropdownOption>
|
|
95
|
+
* <DropdownOption>Qux</DropdownOption>
|
|
96
|
+
* </DropdownGroup>
|
|
97
|
+
* <DropdownGroup name="Group 2">
|
|
98
|
+
* <DropdownOption>Foo</DropdownOption>
|
|
99
|
+
* <DropdownOption>Bar</DropdownOption>
|
|
100
|
+
* <DropdownOption>Qux</DropdownOption>
|
|
101
|
+
* </DropdownGroup>
|
|
102
|
+
* <DropdownGroup name="Group 3">
|
|
103
|
+
* <DropdownOption>Foo</DropdownOption>
|
|
104
|
+
* <DropdownOption>Bar</DropdownOption>
|
|
105
|
+
* <DropdownOption>Qux</DropdownOption>
|
|
106
|
+
* </DropdownGroup>
|
|
107
|
+
* </DropdownMenu>
|
|
108
|
+
* </Dropdown>
|
|
109
|
+
* </Canvas>;
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
export declare function Dropdown({ renderTrigger, children, }: DropdownProps): JSX.Element;
|
|
113
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
2
|
+
declare type Context = {
|
|
3
|
+
searchTerm: string;
|
|
4
|
+
addOption: (id: string) => void;
|
|
5
|
+
setClickHandlerForOption: (id: string, handler: (e: SyntheticEvent) => void) => void;
|
|
6
|
+
};
|
|
7
|
+
export declare const MenuContext: import("react").Context<Context>;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type OptionProps = {
|
|
3
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
4
|
+
to?: string;
|
|
5
|
+
active?: boolean;
|
|
6
|
+
red?: boolean;
|
|
7
|
+
valid?: boolean;
|
|
8
|
+
invalid?: boolean;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
closeMenuOnClick?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const Option: ({ onClick, to, active, red, valid, invalid, children, disabled, closeMenuOnClick, }: OptionProps) => JSX.Element | null;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type OptionActionProps = {
|
|
3
|
+
icon: ReactNode;
|
|
4
|
+
red?: boolean;
|
|
5
|
+
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
6
|
+
closeMenuOnClick?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare const OptionAction: {
|
|
9
|
+
({ icon, red, onClick, closeMenuOnClick, }: OptionActionProps): JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Dropdown, DropdownProps } from './Dropdown';
|
|
2
|
+
import { Group, GroupProps } from './Group';
|
|
3
|
+
import { Menu, MenuProps } from './Menu';
|
|
4
|
+
import { Option, OptionProps } from './Option';
|
|
5
|
+
import { OptionAction, OptionActionProps } from './OptionAction';
|
|
6
|
+
import { Separator } from './Separator';
|
|
7
|
+
import { Text, TextProps } from './Text';
|
|
8
|
+
export { Dropdown, Group as DropdownGroup, Menu as DropdownMenu, Option as DropdownOption, OptionAction as DropdownOptionAction, Separator as DropdownSeparator, Text as DropdownText, };
|
|
9
|
+
export type { DropdownProps, GroupProps as DropdownGroupProps, MenuProps as DropdownMenuProps, OptionProps as DropdownOptionProps, OptionActionProps as DropdownOptionActionProps, TextProps as DropdownTextProps, };
|
|
@@ -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"
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export declare type SidebarPanelProps = {
|
|
3
|
+
title?: ReactNode;
|
|
4
|
+
startOpen?: boolean;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
noPadding?: boolean;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* @example Basic example
|
|
10
|
+
*
|
|
11
|
+
* ```js
|
|
12
|
+
* <Canvas ctx={ctx}>
|
|
13
|
+
* <div style={{ display: 'flex' }}>
|
|
14
|
+
* <div
|
|
15
|
+
* style={{
|
|
16
|
+
* width: '300px',
|
|
17
|
+
* borderRight: '1px solid var(--border-color)',
|
|
18
|
+
* }}
|
|
19
|
+
* >
|
|
20
|
+
* <SidebarPanel title="Default">Content</SidebarPanel>
|
|
21
|
+
* <SidebarPanel title="Start open" startOpen>
|
|
22
|
+
* Content
|
|
23
|
+
* </SidebarPanel>
|
|
24
|
+
* <SidebarPanel title="Content with no padding" noPadding>
|
|
25
|
+
* Content
|
|
26
|
+
* </SidebarPanel>
|
|
27
|
+
* </div>
|
|
28
|
+
* <div
|
|
29
|
+
* style={{
|
|
30
|
+
* flex: '1',
|
|
31
|
+
* display: 'flex',
|
|
32
|
+
* justifyContent: 'center',
|
|
33
|
+
* alignItems: 'center',
|
|
34
|
+
* background: 'var(--light-bg-color)',
|
|
35
|
+
* }}
|
|
36
|
+
* >
|
|
37
|
+
* Main content
|
|
38
|
+
* </div>
|
|
39
|
+
* </div>
|
|
40
|
+
* </Canvas>;
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export declare function SidebarPanel({ startOpen, title, children, noPadding, }: SidebarPanelProps): JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type SpinnerProps = {
|
|
3
|
+
size?: number;
|
|
4
|
+
placement?: 'inline' | 'centered';
|
|
5
|
+
style?: React.CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* @example Inline spinner
|
|
9
|
+
*
|
|
10
|
+
* ```js
|
|
11
|
+
* <Canvas ctx={ctx}>
|
|
12
|
+
* Foo bar <Spinner size={24} />
|
|
13
|
+
* </Canvas>;
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @example Centered spinner
|
|
17
|
+
*
|
|
18
|
+
* ```js
|
|
19
|
+
* <Canvas ctx={ctx}>
|
|
20
|
+
* <div style={{ height: '200px', position: 'relative' }}>
|
|
21
|
+
* <Spinner size={48} placement="centered" />
|
|
22
|
+
* </div>
|
|
23
|
+
* </Canvas>;
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare function Spinner({ size, placement, style: extraStyle, }: SpinnerProps): JSX.Element;
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
|
+
export declare type ButtonProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
onClick?: MouseEventHandler;
|
|
7
|
+
};
|
|
8
|
+
export declare function Button({ children, style, className, onClick, }: ButtonProps): JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
export declare type StackProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
stackSize?: 's' | 'm' | 'l';
|
|
6
|
+
style?: CSSProperties;
|
|
7
|
+
};
|
|
8
|
+
export declare function Stack({ children, style, className, stackSize, }: StackProps): JSX.Element;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
export declare type ToolbarProps = {
|
|
3
|
+
children?: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
style?: CSSProperties;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* - @example Basic example
|
|
9
|
+
*
|
|
10
|
+
* ```js
|
|
11
|
+
* <Canvas ctx={ctx}>
|
|
12
|
+
* <Toolbar>
|
|
13
|
+
* <ToolbarStack stackSize="l">
|
|
14
|
+
* <ToolbarTitle>Media Area</ToolbarTitle>
|
|
15
|
+
* </ToolbarStack>
|
|
16
|
+
* </Toolbar>
|
|
17
|
+
* <div
|
|
18
|
+
* style={{
|
|
19
|
+
* display: 'flex',
|
|
20
|
+
* justifyContent: 'center',
|
|
21
|
+
* alignItems: 'center',
|
|
22
|
+
* background: 'var(--light-bg-color)',
|
|
23
|
+
* height: '150px',
|
|
24
|
+
* }}
|
|
25
|
+
* >
|
|
26
|
+
* Main content
|
|
27
|
+
* </div>
|
|
28
|
+
* </Canvas>;
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @example Buttons and actions
|
|
32
|
+
*
|
|
33
|
+
* ```js
|
|
34
|
+
* <Canvas ctx={ctx}>
|
|
35
|
+
* <Toolbar>
|
|
36
|
+
* <ToolbarButton>
|
|
37
|
+
* <BackIcon />
|
|
38
|
+
* </ToolbarButton>
|
|
39
|
+
* <ToolbarStack stackSize="l">
|
|
40
|
+
* <ToolbarTitle>Media Area</ToolbarTitle>
|
|
41
|
+
* <div style={{ flex: '1' }} />
|
|
42
|
+
* <Button buttonType="primary">Action</Button>
|
|
43
|
+
* </ToolbarStack>
|
|
44
|
+
* <ToolbarButton>
|
|
45
|
+
* <SidebarLeftArrowIcon />
|
|
46
|
+
* </ToolbarButton>
|
|
47
|
+
* </Toolbar>
|
|
48
|
+
* <div
|
|
49
|
+
* style={{
|
|
50
|
+
* display: 'flex',
|
|
51
|
+
* justifyContent: 'center',
|
|
52
|
+
* alignItems: 'center',
|
|
53
|
+
* background: 'var(--light-bg-color)',
|
|
54
|
+
* height: '150px',
|
|
55
|
+
* }}
|
|
56
|
+
* >
|
|
57
|
+
* Main content
|
|
58
|
+
* </div>
|
|
59
|
+
* </Canvas>;
|
|
60
|
+
* ```
|
|
61
|
+
*
|
|
62
|
+
* @example With button group
|
|
63
|
+
*
|
|
64
|
+
* ```js
|
|
65
|
+
* <Canvas ctx={ctx}>
|
|
66
|
+
* <Toolbar>
|
|
67
|
+
* <ToolbarStack stackSize="l">
|
|
68
|
+
* <ToolbarTitle>Media Area</ToolbarTitle>
|
|
69
|
+
* <div style={{ flex: '1' }} />
|
|
70
|
+
* <ButtonGroup>
|
|
71
|
+
* <ButtonGroupButton>First</ButtonGroupButton>
|
|
72
|
+
* <ButtonGroupButton selected>Second</ButtonGroupButton>
|
|
73
|
+
* <ButtonGroupButton>Third</ButtonGroupButton>
|
|
74
|
+
* </ButtonGroup>
|
|
75
|
+
* </ToolbarStack>
|
|
76
|
+
* </Toolbar>
|
|
77
|
+
* <div
|
|
78
|
+
* style={{
|
|
79
|
+
* display: 'flex',
|
|
80
|
+
* justifyContent: 'center',
|
|
81
|
+
* alignItems: 'center',
|
|
82
|
+
* background: 'var(--light-bg-color)',
|
|
83
|
+
* height: '150px',
|
|
84
|
+
* }}
|
|
85
|
+
* >
|
|
86
|
+
* Main content
|
|
87
|
+
* </div>
|
|
88
|
+
* </Canvas>;
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
export declare function Toolbar({ children, style, className, }: ToolbarProps): JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Toolbar } from './Toolbar';
|
|
2
|
+
export type { ToolbarProps } from './Toolbar';
|
|
3
|
+
export { Button as ToolbarButton } from './Button';
|
|
4
|
+
export type { ButtonProps as ToolbarButtonProps } from './Button';
|
|
5
|
+
export { Title as ToolbarTitle } from './Title';
|
|
6
|
+
export type { TitleProps as ToolbarTitleProps } from './Title';
|
|
7
|
+
export { Stack as ToolbarStack } from './Stack';
|
|
8
|
+
export type { StackProps as ToolbarStackProps } from './Stack';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export declare type IconProps = {
|
|
3
|
+
width?: string | number;
|
|
4
|
+
height?: string | number;
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: CSSProperties;
|
|
7
|
+
};
|
|
8
|
+
export declare function BackIcon({ width, height, style, className, }: IconProps): JSX.Element;
|
|
9
|
+
export declare function SidebarLeftArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
|
|
10
|
+
export declare function SidebarRightArrowIcon({ width, height, style, className, }: IconProps): JSX.Element;
|
|
11
|
+
export declare function CaretDownIcon({ width, height, style, className, }: IconProps): JSX.Element;
|
|
12
|
+
export declare function CaretUpIcon({ width, height, style, className, }: IconProps): JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -13,3 +13,9 @@ export * from './ContextInspector';
|
|
|
13
13
|
export * from './Section';
|
|
14
14
|
export * from './SelectInput';
|
|
15
15
|
export * from './SelectField';
|
|
16
|
+
export * from './ButtonGroup';
|
|
17
|
+
export * from './Toolbar';
|
|
18
|
+
export * from './Spinner';
|
|
19
|
+
export * from './SidebarPanel';
|
|
20
|
+
export * from './Dropdown';
|
|
21
|
+
export * from './icons';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare function useMediaQuery(media: string): MediaQueryList;
|
|
3
|
+
export declare type MediaQueryProps = {
|
|
4
|
+
media: string;
|
|
5
|
+
children: (mql: MediaQueryList) => JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export declare function MediaQuery({ media, children, }: MediaQueryProps): JSX.Element | null;
|
|
8
|
+
export declare function useElementLayout(ref: React.MutableRefObject<Element>): DOMRect;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datocms-react-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.19",
|
|
4
4
|
"description": "React components to use inside DatoCMS plugins",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -29,10 +29,11 @@
|
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
31
|
"build": "npm run generate-cssmodules && tsc && tsc --project ./tsconfig.esnext.json && npm run generate-typedoc && npm run generate-global-styles",
|
|
32
|
-
"generate-cssmodules": "NODE_ENV=prebuild postcss src
|
|
32
|
+
"generate-cssmodules": "NODE_ENV=prebuild postcss 'src/**/styles.module.css' --base src --dir tmp",
|
|
33
33
|
"generate-global-styles": "cp src/*.css tmp && NODE_ENV=production postcss tmp/global.css --output styles.css && rm -rf tmp",
|
|
34
34
|
"generate-typedoc": "typedoc src/index.ts --json types.json",
|
|
35
|
-
"prebuild": "rimraf dist"
|
|
35
|
+
"prebuild": "rimraf dist",
|
|
36
|
+
"install-in-place": "npm run build && rm -rf $INSTALL_PATH/node_modules/datocms-react-ui/dist && cp -rf dist styles.css types.json $INSTALL_PATH/node_modules/datocms-react-ui"
|
|
36
37
|
},
|
|
37
38
|
"bugs": {
|
|
38
39
|
"url": "https://github.com/datocms/plugins-sdk/issues"
|
|
@@ -40,7 +41,9 @@
|
|
|
40
41
|
"dependencies": {
|
|
41
42
|
"classnames": "^2.3.1",
|
|
42
43
|
"datocms-plugin-sdk": "^0.3.10",
|
|
43
|
-
"react-
|
|
44
|
+
"react-intersection-observer": "^8.31.0",
|
|
45
|
+
"react-select": "^5.2.1",
|
|
46
|
+
"scroll-into-view-if-needed": "^2.2.20"
|
|
44
47
|
},
|
|
45
48
|
"devDependencies": {
|
|
46
49
|
"@types/react": "^17.0.3",
|
|
@@ -53,5 +56,5 @@
|
|
|
53
56
|
"postcss-nested": "^5.0.6",
|
|
54
57
|
"typedoc": "^0.22.8"
|
|
55
58
|
},
|
|
56
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "7d5c113cd2475cd2b873e703f44d9e4908e0adea"
|
|
57
60
|
}
|
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}._Button_1h1w1_1{justify-column:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:0;border-right:1px solid var(--border-color);border:1px solid var(--border-color);border-left-width:0;box-sizing:border-box;color:var(--base-body-color);color:rgba(var(--base-body-color-rgb-components,.6));cursor:pointer;display:flex;font-family:inherit;font-size:inherit;line-height:inherit;padding:7px 13px}._Button_1h1w1_1:hover{background-color:var(--light-bg-color)}._Button_1h1w1_1 svg{fill:var(--light-body-color)}._Button--s_1h1w1_32{padding:3px 10px}._Button--disabled_1h1w1_36{color:var(--light-body-color);cursor:not-allowed}._Button--disabled_1h1w1_36:hover{background:#fff}._Button--selected_1h1w1_45{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}._Button--selected_1h1w1_45 svg{fill:#fff}._Button--selected_1h1w1_45:hover{background-color:var(--accent-color)}._Button--selected_1h1w1_45._Button--disabled_1h1w1_36,._Button--selected_1h1w1_45:hover{background-color:rgba(var(--accent-color-rgb-components),.8);border-color:rgba(var(--accent-color-rgb-components),.8)}._Button_1h1w1_1:first-child{border-left-width:1px;border-radius:4px 0 0 4px}._Button_1h1w1_1:last-child{border-radius:0 4px 4px 0}._Group_10mj4_1{align-items:stretch;background-color:#fff;display:flex;overflow:hidden}._themeVariables_ovgoa_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)}._canvas_ovgoa_68{-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}._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}._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)}._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}}._SidebarPanel_4uwco_1{border-bottom:1px solid var(--border-color)}._SidebarPanel__header_4uwco_5{align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;background-color:var(--light-bg-color);border:0;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;text-align:left;user-select:none;width:100%}._SidebarPanel__header_4uwco_5:focus,._SidebarPanel__header_4uwco_5:hover{background-color:var(--lighter-bg-color)}._SidebarPanel__header__title_4uwco_30{flex:1;font-weight:500;padding:0 20px}._SidebarPanel__header__chevron_4uwco_36{align-items:center;display:flex;padding:13px 15px}._SidebarPanel__content_4uwco_42{background-color:#fff;padding:20px}._SidebarPanel__content--no-padding_4uwco_47{padding:0}._Spinner--inline_oumod_1{display:inline-block;position:relative;vertical-align:middle}._Spinner--centered_oumod_7{left:50%;position:absolute;top:50%}._Spinner__bar_oumod_13{animation:_Spinner__spin_oumod_1 1.2s linear infinite;background-color:var(--light-body-color);height:14%;left:-20%;position:absolute;top:0;width:40%}@keyframes _Spinner__spin_oumod_1{0%{opacity:1}to{opacity:.15}}._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)}._Button_fy6g6_1{align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:flex;font-family:inherit;justify-content:center;line-height:inherit;min-height:49px;padding:0;width:49px}._Button_fy6g6_1:focus,._Button_fy6g6_1:hover{background-color:var(--light-bg-color)}._Button_fy6g6_1:first-child{border-left:0}._Button_fy6g6_1:last-child{border-right:0}@media screen and (min-width:380px){._Button_fy6g6_1{min-height:59px;width:59px}._Button_fy6g6_1 svg{font-size:20px}}._Stack_1nnzo_1{align-items:center;display:flex;flex:1;flex-direction:row;justify-content:center;padding:10px 15px}._Stack--s_1nnzo_10{padding-bottom:var(--spacing-s);padding-top:var(--spacing-s)}._Stack--l_1nnzo_15{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}._Title_1dx5n_1{font-size:var(--font-size-l);font-weight:500;line-height:1.1;margin-right:15px}@media screen and (min-width:380px){._Title_1dx5n_1{font-size:var(--font-size-xl)}}._Toolbar_1cwb8_1{align-items:stretch;border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);display:flex;position:relative}._Toolbar_1cwb8_1:first-child{border-top-width:0}._Toolbar_1cwb8_1:last-child{border-bottom-width:0}._Dropdown_e5jms_1{position:relative}._Dropdown__spacer_e5jms_5{inset:0;pointer-events:none;position:absolute}._Dropdown__menu__search_e5jms_11{border-bottom:1px solid var(--border-color);padding:7px}._Dropdown__menu__search__input_e5jms_16{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:3px;box-sizing:border-box;display:block;font-family:inherit;font-size:.9em;padding:8px;resize:none;transition:border .2s var(--material-ease);width:100%}._Dropdown__menu__search__input_e5jms_16::placeholder{color:var(--placeholder-body-color)}._Dropdown__menu__search__input_e5jms_16:hover{border-color:var(--darker-border-color)}._Dropdown__menu__search__input_e5jms_16:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._Dropdown__menu-container_e5jms_45{position:fixed;visibility:hidden}._Dropdown__menu_e5jms_11{background-color:#fff;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.2);margin-bottom:var(--spacing-xl);margin-top:10px;min-width:200px;padding:1px 0;text-align:initial}._Dropdown__menu__inner_e5jms_61{margin:7px 0}._Dropdown__menu--fullscreen_e5jms_65{animation:_FullscreenDropdown__appear_e5jms_1 .2s ease-out forwards;bottom:1em;left:var(--spacing-l);margin-bottom:var(--spacing-xxl);pointer-events:auto;position:fixed;right:var(--spacing-l);top:var(--spacing-xl);z-index:2}@keyframes _FullscreenDropdown__appear_e5jms_1{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}._Dropdown__menu__close_e5jms_87{animation:_FullscreenDropdown__appear_e5jms_1 .25s ease-out forwards;bottom:var(--spacing-l);left:var(--spacing-l);margin-bottom:0;position:fixed;right:var(--spacing-l);text-align:center;top:auto;z-index:2}._Dropdown__menu__group__title_e5jms_99{background-color:var(--light-bg-color);color:var(--light-body-color);font-size:var(--font-size-xs);padding:5px 15px 3px;text-transform:uppercase}._Dropdown__menu__group__content_e5jms_107{margin:8px 0}._Dropdown__menu__text_e5jms_111{color:var(--light-body-color);display:block;line-height:1.2;padding:4px 15px;position:relative;text-align:left}._Dropdown__menu__option_e5jms_120{align-items:center;color:var(--base-body-color);display:block;display:flex;padding:4px 15px;position:relative;text-align:left;text-decoration:none;white-space:nowrap}._Dropdown__menu__option_e5jms_120:focus,._Dropdown__menu__option_e5jms_120:hover{background-color:var(--light-bg-color)}._Dropdown__menu__option_e5jms_120>a{color:inherit;display:block;text-decoration:none}._Dropdown__menu__option--is-selected_e5jms_143{background-color:var(--light-bg-color)}._Dropdown__menu__option--is-disabled_e5jms_147{opacity:.5}._Dropdown__menu__option--is-disabled_e5jms_147 ._Dropdown__menu__option__content_e5jms_150{cursor:not-allowed}._Dropdown__menu__option--is-dangerous_e5jms_155{color:var(--alert-color)}._Dropdown__menu__option--is-dangerous_e5jms_155 svg{fill:var(--alert-color)}._Dropdown__menu__option--is-dangerous_e5jms_155:focus,._Dropdown__menu__option--is-dangerous_e5jms_155:hover{background-color:var(--alert-color);color:#fff}._Dropdown__menu__option--is-dangerous_e5jms_155:focus svg,._Dropdown__menu__option--is-dangerous_e5jms_155:hover svg{fill:#fff}._Dropdown__menu__option--is-active_e5jms_173{font-weight:500}._Dropdown__menu__option--is-active_e5jms_173:focus,._Dropdown__menu__option--is-active_e5jms_173:hover{background-color:none}._Dropdown__menu__option--is-invalid_e5jms_186,._Dropdown__menu__option--is-valid_e5jms_182{padding-left:35px}._Dropdown__menu__option--is-invalid_e5jms_186:before{background-color:var(--alert-color);border-radius:4px;content:"";font-size:12px;height:8px;left:15px;position:absolute;top:50%;transform:translateY(-50%);width:8px}._Dropdown__menu__option__content_e5jms_150{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:inherit;cursor:pointer;flex:1;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;text-align:left}._Dropdown__menu__option__content_e5jms_150>svg{fill:var(--light-body-color);color:var(--light-body-color);display:inline-block;font-size:13px;padding-right:8px;vertical-align:middle}._Dropdown__menu__option__icons_e5jms_228{align-items:center;display:flex;padding-left:15px}._Dropdown__menu__option__icon_e5jms_228{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:var(--base-body-color);color:var(--light-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-size:inherit;font-size:13px;line-height:inherit;line-height:10px;opacity:0;padding:3px;position:relative;top:-1px;transition:transform .1s ease-in-out;width:100%;width:auto}._Dropdown__menu__option_e5jms_120:focus ._Dropdown__menu__option__icon_e5jms_228,._Dropdown__menu__option_e5jms_120:hover ._Dropdown__menu__option__icon_e5jms_228{opacity:1}._Dropdown__menu__option__icon_e5jms_228:focus,._Dropdown__menu__option__icon_e5jms_228:hover{transform:scale(1.2)}._Dropdown__menu__option__icon_e5jms_228 svg{fill:var(--light-body-color)}._Dropdown__menu__option__icon--delete_e5jms_275{color:var(--alert-color)}._Dropdown__menu__option__icon--delete_e5jms_275 svg{fill:var(--alert-color)}._Dropdown__menu__separator_e5jms_282{background-color:var(--border-color);height:1px;margin:8px 0}._Dropdown__menu_e5jms_11{overflow-y:auto}._Dropdown__menu__mobile-container_e5jms_292{bottom:0;left:0;overflow:auto;position:fixed;right:0;top:0;z-index:10002}._Dropdown__menu__mobile-container_e5jms_292 ._Dropdown__menu_e5jms_11{-webkit-overflow-scrolling:touch}._Modal__backdrop_e5jms_306{animation:_Modal__appear_e5jms_1 .2s var(--material-ease);animation-fill-mode:both;background:linear-gradient(180deg,rgba(48,48,47,.9),rgba(48,48,47,.7));bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:1}@keyframes _Modal__appear_e5jms_1{0%{opacity:0}to{opacity:1}}
|