datocms-react-ui 0.3.3 → 0.3.7
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/index.js +10 -4
- package/dist/cjs/Button/index.js.map +1 -1
- package/dist/cjs/Button/styles.module.css.json +1 -1
- package/dist/cjs/ContextInspector/index.js +1 -1
- package/dist/cjs/TextInput/index.js +2 -1
- package/dist/cjs/TextInput/index.js.map +1 -1
- package/dist/cjs/TextInput/styles.module.css.json +1 -1
- package/dist/esm/Button/index.d.ts +8 -4
- package/dist/esm/Button/index.js +10 -4
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/Button/styles.module.css.json +1 -1
- package/dist/esm/ContextInspector/index.js +1 -1
- package/dist/esm/TextInput/index.d.ts +2 -1
- package/dist/esm/TextInput/index.js +2 -1
- package/dist/esm/TextInput/index.js.map +1 -1
- package/dist/esm/TextInput/styles.module.css.json +1 -1
- package/dist/types/Button/index.d.ts +8 -4
- package/dist/types/TextInput/index.d.ts +2 -1
- package/package.json +3 -3
- package/styles.css +1 -1
- package/types.json +682 -573
package/dist/cjs/Button/index.js
CHANGED
|
@@ -9,19 +9,25 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
9
9
|
var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
|
|
10
10
|
function Button(_a) {
|
|
11
11
|
var _b;
|
|
12
|
-
var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, _e = _a.type, type = _e === void 0 ? 'button' : _e;
|
|
12
|
+
var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.type, type = _e === void 0 ? 'button' : _e;
|
|
13
13
|
return (react_1.default.createElement("button", { type: type, className: (0, classnames_1.default)(styles_module_css_json_1.default.button, styles_module_css_json_1.default["buttonType-" + buttonType], styles_module_css_json_1.default["buttonSize-" + buttonSize], (_b = {},
|
|
14
14
|
_b[styles_module_css_json_1.default.disabled] = disabled,
|
|
15
15
|
_b[styles_module_css_json_1.default.fullWidth] = fullWidth,
|
|
16
|
-
_b), className), disabled: disabled, onClick: onClick, style: style },
|
|
16
|
+
_b), className), disabled: disabled, onClick: onClick, style: style },
|
|
17
|
+
leftIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon),
|
|
18
|
+
children && react_1.default.createElement("span", null, children),
|
|
19
|
+
rightIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon)));
|
|
17
20
|
}
|
|
18
21
|
exports.Button = Button;
|
|
19
22
|
function ButtonLink(_a) {
|
|
20
23
|
var _b;
|
|
21
|
-
var children = _a.children, href = _a.href, _c = _a.target, target = _c === void 0 ? '_blank' : _c, className = _a.className, _d = _a.buttonType, buttonType = _d === void 0 ? 'muted' : _d, _e = _a.buttonSize, buttonSize = _e === void 0 ? 'm' : _e, onClick = _a.onClick, fullWidth = _a.fullWidth, style = _a.style;
|
|
24
|
+
var children = _a.children, href = _a.href, _c = _a.target, target = _c === void 0 ? '_blank' : _c, className = _a.className, _d = _a.buttonType, buttonType = _d === void 0 ? 'muted' : _d, _e = _a.buttonSize, buttonSize = _e === void 0 ? 'm' : _e, onClick = _a.onClick, fullWidth = _a.fullWidth, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, style = _a.style;
|
|
22
25
|
return (react_1.default.createElement("a", { href: href, target: target, className: (0, classnames_1.default)(styles_module_css_json_1.default.button, styles_module_css_json_1.default["buttonType-" + buttonType], styles_module_css_json_1.default["buttonSize-" + buttonSize], (_b = {},
|
|
23
26
|
_b[styles_module_css_json_1.default.fullWidth] = fullWidth,
|
|
24
|
-
_b), className), style: style, onClick: onClick },
|
|
27
|
+
_b), className), style: style, onClick: onClick },
|
|
28
|
+
leftIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__leftIcon'] }, leftIcon),
|
|
29
|
+
children && react_1.default.createElement("span", null, children),
|
|
30
|
+
rightIcon && react_1.default.createElement("span", { className: styles_module_css_json_1.default['button__rightIcon'] }, rightIcon)));
|
|
25
31
|
}
|
|
26
32
|
exports.ButtonLink = ButtonLink;
|
|
27
33
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA2E;AAC3E,0DAA4B;AAC5B,oFAA8C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA2E;AAC3E,0DAA4B;AAC5B,oFAA8C;AAgB9C,SAAgB,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,0CACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACvE,CACV,CAAC;AACJ,CAAC;AAnCD,wBAmCC;AAgBD,SAAgB,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,qCACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAM,CAAC,MAAM,EACb,gCAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,gCAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,gCAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,4CAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,wCAAM,SAAS,EAAE,gCAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CAC5E,CACL,CAAC;AACJ,CAAC;AAlCD,gCAkCC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "button": "
|
|
1
|
+
{ "button": "_button_a3m33_1", "disabled": "_disabled_a3m33_30", "buttonType-muted": "_buttonType-muted_a3m33_37", "buttonType-primary": "_buttonType-primary_a3m33_42", "buttonType-negative": "_buttonType-negative_a3m33_64", "buttonSize-xxs": "_buttonSize-xxs_a3m33_82", "buttonSize-xs": "_buttonSize-xs_a3m33_87", "buttonSize-s": "_buttonSize-s_a3m33_92", "buttonSize-m": "_buttonSize-m_a3m33_97", "buttonSize-l": "_buttonSize-l_a3m33_102", "buttonSize-xl": "_buttonSize-xl_a3m33_107", "fullWidth": "_fullWidth_a3m33_112", "button__leftIcon": "_button__leftIcon_a3m33_118", "button__rightIcon": "_button__rightIcon_a3m33_119" }
|
|
@@ -223,7 +223,7 @@ function ContextInspector(_a) {
|
|
|
223
223
|
ctx.notice('Copied to clipboard!');
|
|
224
224
|
};
|
|
225
225
|
var handleRun = function (example) {
|
|
226
|
-
Function("\n \"use strict\";\n return(\n async function(ctx) {\n try {\n " + example + "\n } catch(e) {\n await ctx.alert('Execution failed! See console for errors!');\n
|
|
226
|
+
Function("\n \"use strict\";\n return(\n async function(ctx) {\n try {\n " + example + "\n } catch(e) {\n console.error(e);\n await ctx.alert('Execution failed! See console for errors!');\n }\n }\n )\n ")()(ctx);
|
|
227
227
|
};
|
|
228
228
|
return (react_1.default.createElement("div", { className: styles_module_css_json_1.default.inspector }, groups &&
|
|
229
229
|
groups.map(function (group) {
|
|
@@ -50,7 +50,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
50
50
|
var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
|
|
51
51
|
var TextInput = function (_a) {
|
|
52
52
|
var _b;
|
|
53
|
-
var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value"]);
|
|
53
|
+
var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, monospaced = _a.monospaced, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value", "monospaced"]);
|
|
54
54
|
var handleChange = (0, react_1.useCallback)(function (e) {
|
|
55
55
|
if (onChange) {
|
|
56
56
|
onChange(e.target.value, e);
|
|
@@ -59,6 +59,7 @@ var TextInput = function (_a) {
|
|
|
59
59
|
var classNames = (0, classnames_1.default)(styles_module_css_json_1.default['TextInput'], className, (_b = {},
|
|
60
60
|
_b[styles_module_css_json_1.default['TextInput--disabled']] = disabled,
|
|
61
61
|
_b[styles_module_css_json_1.default['TextInput--error']] = error,
|
|
62
|
+
_b[styles_module_css_json_1.default['TextInput--monospaced']] = monospaced,
|
|
62
63
|
_b));
|
|
63
64
|
return (react_1.default.createElement("input", __assign({ className: classNames, "aria-label": labelText, id: id, name: name, required: required, placeholder: placeholder, maxLength: maxLength, disabled: disabled, onBlur: onBlur, onChange: handleChange, value: value, type: type, ref: inputRef }, otherProps)));
|
|
64
65
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmE;AACnE,0DAA4B;AAC5B,oFAAyC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmE;AACnE,0DAA4B;AAC5B,oFAAyC;AAmBlC,IAAM,SAAS,GAAG,UAAC,EAiBT;;IAhBf,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,UAAU,gBAAA,EACP,UAAU,cAhBW,sKAiBzB,CADc;IAEb,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,CAAgC;QAC/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,IAAA,oBAAE,EAAC,gCAAC,CAAC,WAAW,CAAC,EAAE,SAAS;QAC7C,GAAC,gCAAC,CAAC,qBAAqB,CAAC,IAAG,QAAQ;QACpC,GAAC,gCAAC,CAAC,kBAAkB,CAAC,IAAG,KAAK;QAC9B,GAAC,gCAAC,CAAC,uBAAuB,CAAC,IAAG,UAAU;YACxC,CAAC;IAEH,OAAO,CACL,kDACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC;AAnDW,QAAA,SAAS,aAmDpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "TextInput": "
|
|
1
|
+
{ "TextInput": "_TextInput_6kjb7_1", "TextInput--monospaced": "_TextInput--monospaced_6kjb7_30", "TextInput--disabled": "_TextInput--disabled_6kjb7_34", "TextInput--error": "_TextInput--error_6kjb7_40" }
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
export declare type ButtonProps = {
|
|
3
|
-
children
|
|
3
|
+
children?: ReactNode;
|
|
4
4
|
type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
5
5
|
className?: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
onClick?: MouseEventHandler;
|
|
8
8
|
buttonType?: 'primary' | 'muted' | 'negative';
|
|
9
9
|
buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
10
|
+
leftIcon?: ReactNode;
|
|
11
|
+
rightIcon?: ReactNode;
|
|
10
12
|
fullWidth?: boolean;
|
|
11
13
|
style?: CSSProperties;
|
|
12
14
|
};
|
|
13
|
-
export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, type, }: ButtonProps): JSX.Element;
|
|
15
|
+
export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, leftIcon, rightIcon, type, }: ButtonProps): JSX.Element;
|
|
14
16
|
export declare type ButtonLinkProps = {
|
|
15
|
-
children
|
|
17
|
+
children?: ReactNode;
|
|
16
18
|
href: string;
|
|
17
19
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
18
20
|
className?: string;
|
|
@@ -21,5 +23,7 @@ export declare type ButtonLinkProps = {
|
|
|
21
23
|
buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
22
24
|
fullWidth?: boolean;
|
|
23
25
|
style?: CSSProperties;
|
|
26
|
+
leftIcon?: ReactNode;
|
|
27
|
+
rightIcon?: ReactNode;
|
|
24
28
|
};
|
|
25
|
-
export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, style, }: ButtonLinkProps): JSX.Element;
|
|
29
|
+
export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, leftIcon, rightIcon, style, }: ButtonLinkProps): JSX.Element;
|
package/dist/esm/Button/index.js
CHANGED
|
@@ -3,17 +3,23 @@ import cn from 'classnames';
|
|
|
3
3
|
import styles from './styles.module.css.json';
|
|
4
4
|
export function Button(_a) {
|
|
5
5
|
var _b;
|
|
6
|
-
var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, _e = _a.type, type = _e === void 0 ? 'button' : _e;
|
|
6
|
+
var children = _a.children, className = _a.className, disabled = _a.disabled, _c = _a.buttonType, buttonType = _c === void 0 ? 'muted' : _c, _d = _a.buttonSize, buttonSize = _d === void 0 ? 'm' : _d, fullWidth = _a.fullWidth, onClick = _a.onClick, style = _a.style, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.type, type = _e === void 0 ? 'button' : _e;
|
|
7
7
|
return (React.createElement("button", { type: type, className: cn(styles.button, styles["buttonType-" + buttonType], styles["buttonSize-" + buttonSize], (_b = {},
|
|
8
8
|
_b[styles.disabled] = disabled,
|
|
9
9
|
_b[styles.fullWidth] = fullWidth,
|
|
10
|
-
_b), className), disabled: disabled, onClick: onClick, style: style },
|
|
10
|
+
_b), className), disabled: disabled, onClick: onClick, style: style },
|
|
11
|
+
leftIcon && React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon),
|
|
12
|
+
children && React.createElement("span", null, children),
|
|
13
|
+
rightIcon && React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon)));
|
|
11
14
|
}
|
|
12
15
|
export function ButtonLink(_a) {
|
|
13
16
|
var _b;
|
|
14
|
-
var children = _a.children, href = _a.href, _c = _a.target, target = _c === void 0 ? '_blank' : _c, className = _a.className, _d = _a.buttonType, buttonType = _d === void 0 ? 'muted' : _d, _e = _a.buttonSize, buttonSize = _e === void 0 ? 'm' : _e, onClick = _a.onClick, fullWidth = _a.fullWidth, style = _a.style;
|
|
17
|
+
var children = _a.children, href = _a.href, _c = _a.target, target = _c === void 0 ? '_blank' : _c, className = _a.className, _d = _a.buttonType, buttonType = _d === void 0 ? 'muted' : _d, _e = _a.buttonSize, buttonSize = _e === void 0 ? 'm' : _e, onClick = _a.onClick, fullWidth = _a.fullWidth, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, style = _a.style;
|
|
15
18
|
return (React.createElement("a", { href: href, target: target, className: cn(styles.button, styles["buttonType-" + buttonType], styles["buttonSize-" + buttonSize], (_b = {},
|
|
16
19
|
_b[styles.fullWidth] = fullWidth,
|
|
17
|
-
_b), className), style: style, onClick: onClick },
|
|
20
|
+
_b), className), style: style, onClick: onClick },
|
|
21
|
+
leftIcon && React.createElement("span", { className: styles['button__leftIcon'] }, leftIcon),
|
|
22
|
+
children && React.createElement("span", null, children),
|
|
23
|
+
rightIcon && React.createElement("span", { className: styles['button__rightIcon'] }, rightIcon)));
|
|
18
24
|
}
|
|
19
25
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAgB9C,MAAM,UAAU,MAAM,CAAC,EAYT;;QAXZ,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA;IAEf,OAAO,CACL,gCACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,QAAQ,IAAG,QAAQ;YAC3B,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QAEX,QAAQ,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CACvE,CACV,CAAC;AACJ,CAAC;AAgBD,MAAM,UAAU,UAAU,CAAC,EAYT;;QAXhB,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,cAAiB,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,SAAS,eAAA,EACT,kBAAoB,EAApB,UAAU,mBAAG,OAAO,KAAA,EACpB,kBAAgB,EAAhB,UAAU,mBAAG,GAAG,KAAA,EAChB,OAAO,aAAA,EACP,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,KAAK,WAAA;IAEL,OAAO,CACL,2BACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,gBAAc,UAAY,CAAC,EAClC,MAAM,CAAC,gBAAc,UAAY,CAAC;YAEhC,GAAC,MAAM,CAAC,SAAS,IAAG,SAAS;iBAE/B,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO;QAEf,QAAQ,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,CAAQ;QAC1E,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;QACnC,SAAS,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,SAAS,CAAQ,CAC5E,CACL,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "button": "
|
|
1
|
+
{ "button": "_button_a3m33_1", "disabled": "_disabled_a3m33_30", "buttonType-muted": "_buttonType-muted_a3m33_37", "buttonType-primary": "_buttonType-primary_a3m33_42", "buttonType-negative": "_buttonType-negative_a3m33_64", "buttonSize-xxs": "_buttonSize-xxs_a3m33_82", "buttonSize-xs": "_buttonSize-xs_a3m33_87", "buttonSize-s": "_buttonSize-s_a3m33_92", "buttonSize-m": "_buttonSize-m_a3m33_97", "buttonSize-l": "_buttonSize-l_a3m33_102", "buttonSize-xl": "_buttonSize-xl_a3m33_107", "fullWidth": "_fullWidth_a3m33_112", "button__leftIcon": "_button__leftIcon_a3m33_118", "button__rightIcon": "_button__rightIcon_a3m33_119" }
|
|
@@ -198,7 +198,7 @@ export function ContextInspector(_a) {
|
|
|
198
198
|
ctx.notice('Copied to clipboard!');
|
|
199
199
|
};
|
|
200
200
|
var handleRun = function (example) {
|
|
201
|
-
Function("\n \"use strict\";\n return(\n async function(ctx) {\n try {\n " + example + "\n } catch(e) {\n await ctx.alert('Execution failed! See console for errors!');\n
|
|
201
|
+
Function("\n \"use strict\";\n return(\n async function(ctx) {\n try {\n " + example + "\n } catch(e) {\n console.error(e);\n await ctx.alert('Execution failed! See console for errors!');\n }\n }\n )\n ")()(ctx);
|
|
202
202
|
};
|
|
203
203
|
return (React.createElement("div", { className: s.inspector }, groups &&
|
|
204
204
|
groups.map(function (group) {
|
|
@@ -6,8 +6,9 @@ export declare type TextInputProps = {
|
|
|
6
6
|
labelText?: string;
|
|
7
7
|
id?: string;
|
|
8
8
|
className?: string;
|
|
9
|
+
monospaced?: boolean;
|
|
9
10
|
onChange?: TextInputChangeEventHandler;
|
|
10
11
|
inputRef?: RefObject<HTMLInputElement>;
|
|
11
12
|
error?: boolean;
|
|
12
13
|
} & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
|
|
13
|
-
export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, ...otherProps }: TextInputProps) => JSX.Element;
|
|
14
|
+
export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, monospaced, ...otherProps }: TextInputProps) => JSX.Element;
|
|
@@ -25,7 +25,7 @@ import cn from 'classnames';
|
|
|
25
25
|
import s from './styles.module.css.json';
|
|
26
26
|
export var TextInput = function (_a) {
|
|
27
27
|
var _b;
|
|
28
|
-
var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value"]);
|
|
28
|
+
var className = _a.className, _c = _a.disabled, disabled = _c === void 0 ? false : _c, error = _a.error, id = _a.id, inputRef = _a.inputRef, maxLength = _a.maxLength, name = _a.name, labelText = _a.labelText, onBlur = _a.onBlur, onChange = _a.onChange, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, type = _a.type, value = _a.value, monospaced = _a.monospaced, otherProps = __rest(_a, ["className", "disabled", "error", "id", "inputRef", "maxLength", "name", "labelText", "onBlur", "onChange", "placeholder", "required", "type", "value", "monospaced"]);
|
|
29
29
|
var handleChange = useCallback(function (e) {
|
|
30
30
|
if (onChange) {
|
|
31
31
|
onChange(e.target.value, e);
|
|
@@ -34,6 +34,7 @@ export var TextInput = function (_a) {
|
|
|
34
34
|
var classNames = cn(s['TextInput'], className, (_b = {},
|
|
35
35
|
_b[s['TextInput--disabled']] = disabled,
|
|
36
36
|
_b[s['TextInput--error']] = error,
|
|
37
|
+
_b[s['TextInput--monospaced']] = monospaced,
|
|
37
38
|
_b));
|
|
38
39
|
return (React.createElement("input", __assign({ className: classNames, "aria-label": labelText, id: id, name: name, required: required, placeholder: placeholder, maxLength: maxLength, disabled: disabled, onBlur: onBlur, onChange: handleChange, value: value, type: type, ref: inputRef }, otherProps)));
|
|
39
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAA0B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAmBzC,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,EAiBT;;IAhBf,IAAA,SAAS,eAAA,EACT,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,EAAE,QAAA,EACF,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,UAAU,gBAAA,EACP,UAAU,cAhBW,sKAiBzB,CADc;IAEb,IAAM,YAAY,GAAG,WAAW,CAC9B,UAAC,CAAgC;QAC/B,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;SAC7B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,IAAM,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS;QAC7C,GAAC,CAAC,CAAC,qBAAqB,CAAC,IAAG,QAAQ;QACpC,GAAC,CAAC,CAAC,kBAAkB,CAAC,IAAG,KAAK;QAC9B,GAAC,CAAC,CAAC,uBAAuB,CAAC,IAAG,UAAU;YACxC,CAAC;IAEH,OAAO,CACL,wCACE,SAAS,EAAE,UAAU,gBACT,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,QAAQ,IACT,UAAU,EACd,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{ "TextInput": "
|
|
1
|
+
{ "TextInput": "_TextInput_6kjb7_1", "TextInput--monospaced": "_TextInput--monospaced_6kjb7_30", "TextInput--disabled": "_TextInput--disabled_6kjb7_34", "TextInput--error": "_TextInput--error_6kjb7_40" }
|
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
|
|
2
2
|
export declare type ButtonProps = {
|
|
3
|
-
children
|
|
3
|
+
children?: ReactNode;
|
|
4
4
|
type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
5
5
|
className?: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
onClick?: MouseEventHandler;
|
|
8
8
|
buttonType?: 'primary' | 'muted' | 'negative';
|
|
9
9
|
buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
10
|
+
leftIcon?: ReactNode;
|
|
11
|
+
rightIcon?: ReactNode;
|
|
10
12
|
fullWidth?: boolean;
|
|
11
13
|
style?: CSSProperties;
|
|
12
14
|
};
|
|
13
|
-
export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, type, }: ButtonProps): JSX.Element;
|
|
15
|
+
export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, leftIcon, rightIcon, type, }: ButtonProps): JSX.Element;
|
|
14
16
|
export declare type ButtonLinkProps = {
|
|
15
|
-
children
|
|
17
|
+
children?: ReactNode;
|
|
16
18
|
href: string;
|
|
17
19
|
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
|
|
18
20
|
className?: string;
|
|
@@ -21,5 +23,7 @@ export declare type ButtonLinkProps = {
|
|
|
21
23
|
buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
22
24
|
fullWidth?: boolean;
|
|
23
25
|
style?: CSSProperties;
|
|
26
|
+
leftIcon?: ReactNode;
|
|
27
|
+
rightIcon?: ReactNode;
|
|
24
28
|
};
|
|
25
|
-
export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, style, }: ButtonLinkProps): JSX.Element;
|
|
29
|
+
export declare function ButtonLink({ children, href, target, className, buttonType, buttonSize, onClick, fullWidth, leftIcon, rightIcon, style, }: ButtonLinkProps): JSX.Element;
|
|
@@ -6,8 +6,9 @@ export declare type TextInputProps = {
|
|
|
6
6
|
labelText?: string;
|
|
7
7
|
id?: string;
|
|
8
8
|
className?: string;
|
|
9
|
+
monospaced?: boolean;
|
|
9
10
|
onChange?: TextInputChangeEventHandler;
|
|
10
11
|
inputRef?: RefObject<HTMLInputElement>;
|
|
11
12
|
error?: boolean;
|
|
12
13
|
} & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
|
|
13
|
-
export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, ...otherProps }: TextInputProps) => JSX.Element;
|
|
14
|
+
export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, monospaced, ...otherProps }: TextInputProps) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "datocms-react-ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.7",
|
|
4
4
|
"description": "React components to use inside DatoCMS plugins",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datocms",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
|
-
"datocms-plugin-sdk": "^0.3.
|
|
42
|
+
"datocms-plugin-sdk": "^0.3.7"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": ">= 17.0.2"
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"postcss-nested": "^5.0.6",
|
|
56
56
|
"typedoc": "^0.22.8"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "de2dceafa5bc7337da27ea2b59b231ee704be3de"
|
|
59
59
|
}
|
package/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "https://use.typekit.net/iok7hkr.css";.
|
|
1
|
+
@import "https://use.typekit.net/iok7hkr.css";._button_a3m33_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_a3m33_1:focus,._button_a3m33_1:hover{opacity:.8}._button_a3m33_1:active{opacity:.7}._disabled_a3m33_30{background-color:var(--light-bg-color);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_a3m33_37{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_a3m33_42{background-color:var(--accent-color);border-width:0;color:#fff}._buttonType-primary_a3m33_42:active,._buttonType-primary_a3m33_42:focus,._buttonType-primary_a3m33_42:hover{color:#fff}._buttonType-primary_a3m33_42._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_a3m33_42._disabled_a3m33_30:active,._buttonType-primary_a3m33_42._disabled_a3m33_30:focus,._buttonType-primary_a3m33_42._disabled_a3m33_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_a3m33_64{border-width:0}._buttonType-negative_a3m33_64,._buttonType-negative_a3m33_64:active,._buttonType-negative_a3m33_64:focus,._buttonType-negative_a3m33_64:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_a3m33_64._disabled_a3m33_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_a3m33_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_a3m33_87{font-size:1em;padding:.6em .8em}._buttonSize-s_a3m33_92{font-size:1em;padding:.7em 1em}._buttonSize-m_a3m33_97{font-size:1.1em;padding:.7em 1em}._buttonSize-l_a3m33_102{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_a3m33_107{font-size:1.2em;padding:1em}._fullWidth_a3m33_112{display:block;text-align:center;width:100%}._button__leftIcon_a3m33_118,._button__rightIcon_a3m33_119{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_a3m33_118 svg,._button__rightIcon_a3m33_119 svg{fill:var(--accent-color)}._button__leftIcon_a3m33_118{margin-right:.5em}._button__leftIcon_a3m33_118:last-child{margin-right:0}._button__rightIcon_a3m33_119{margin-left:.5em}._button__rightIcon_a3m33_119:first-child{margin-left:0}._canvas_1kptt_1{--base-body-color:#34363a;--light-body-color:#848484;--placeholder-body-color:#c6c6c6;--light-bg-color:#f5f5f5;--lighter-bg-color:#f8f8f8;--disabled-bg-color:#ededed;--border-color:#f0f0f0;--darker-border-color:#d7d7d7;--alert-color:#ff5e49;--alert-rgb-components:255,94,73;--warning-color:gold;--notice-color:#46d700;--warning-bg-color:#ffffe5;--add-color:#4cb06d;--remove-color:#eb576a;--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;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--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;--font-size-xxxl:2.1875rem;--font-size-xxxl:3.125rem;--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_6kjb7_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_6kjb7_1::placeholder{color:var(--placeholder-body-color)}._TextInput_6kjb7_1:hover{border-color:var(--darker-border-color)}._TextInput_6kjb7_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_6kjb7_30{font-family:var(--monospaced-font-family)}._TextInput--disabled_6kjb7_34{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_6kjb7_40,._TextInput--error_6kjb7_40:focus,._TextInput--error_6kjb7_40:hover{border-color:var(--alert-color)}._TextInput--error_6kjb7_40:focus{box-shadow:0 0 0 3px rgba(var(--alert-rgb-components),.2)}._inspector_1n8fb_1{margin:var(--spacing-l) 0}._panel_1n8fb_5{border-bottom:1px solid var(--border-color)}._panelHandle_1n8fb_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:500;padding:5px 10px;width:100%}._panelHandle_1n8fb_9:hover{background:var(--lighter-bg-color)}._panelBody_1n8fb_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_1n8fb_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_1n8fb_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_1n8fb_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_1n8fb_42 p{margin:0}._propertyOrMethodBody_1n8fb_51{padding:15px}._propertyOrMethodExample_1n8fb_55{position:relative}._propertyOrMethodExample_1n8fb_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_1n8fb_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_1n8fb_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_1n8fb_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_1n8fb_82>*{margin-right:10px}html{font-size:16px;height:auto}body,html{margin:0;padding:0}
|