@pie-lib/config-ui 0.1.0

package/dist/settings/settings-radio-label.js

@@ -0,0 +1,29 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n } from "react/jsx-runtime";
+import { color as r } from "@pie-lib/render-ui";
+import i from "@mui/material/FormControlLabel";
+import a from "@mui/material/Radio";
+//#region src/settings/settings-radio-label.tsx
+var o = t(i)(({ theme: e }) => ({ "& .MuiFormControlLabel-label": {
+	color: "rgba(0, 0, 0, 0.89)",
+	fontSize: e.typography.fontSize - 2,
+	left: "-5px",
+	position: "relative"
+} })), s = t(a)(() => ({ color: `${r.tertiary()} !important` })), c = ({ label: e, value: t, checked: r, onChange: i }) => /* @__PURE__ */ n(o, {
+	value: t,
+	control: /* @__PURE__ */ n(s, {
+		checked: r,
+		onChange: i
+	}),
+	label: e
+});
+c.propTypes = {
+	label: e.string,
+	value: e.string,
+	checked: e.bool,
+	onChange: e.func
+};
+//#endregion
+export { c as default };

package/dist/settings/toggle.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/toggle.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const Toggle: {
+    ({ checked, disabled, label, toggle }: {
+        checked: any;
+        disabled: any;
+        label: any;
+        toggle: any;
+    }): JSX.Element;
+    propTypes: {
+        checked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        label: PropTypes.Validator<string>;
+        toggle: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default Toggle;
+//# sourceMappingURL=toggle.d.ts.map

package/dist/settings/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/settings/toggle.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AA8BnC,QAAA,MAAM,MAAM;;;;;;;;;;;;;CAKX,CAAC;AASF,eAAe,MAAM,CAAC"}

package/dist/settings/toggle.js

@@ -0,0 +1,33 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { color as i } from "@pie-lib/render-ui";
+import a from "@mui/material/Switch";
+import o from "@mui/material/InputLabel";
+//#region src/settings/toggle.tsx
+var s = t("div")(() => ({
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between"
+})), c = t(o)(({ theme: e }) => ({
+	color: "rgba(0, 0, 0, 0.89)",
+	fontSize: e.typography.fontSize,
+	paddingTop: e.spacing(2)
+})), l = t(a)(({ checked: e }) => ({
+	"&.Mui-checked .MuiSwitch-thumb": { color: `${i.tertiary()} !important` },
+	"&.Mui-checked .MuiSwitch-track": { backgroundColor: `${i.tertiaryLight()} !important` },
+	"& .MuiSwitch-track": { backgroundColor: e ? `${i.tertiaryLight()} !important` : void 0 }
+})), u = ({ checked: e, disabled: t, label: i, toggle: a }) => /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(c, { children: i }), /* @__PURE__ */ n(l, {
+	checked: e,
+	disabled: t,
+	onChange: (e) => a(e.target.checked)
+})] });
+u.propTypes = {
+	checked: e.bool,
+	disabled: e.bool,
+	label: e.string.isRequired,
+	toggle: e.func.isRequired
+};
+//#endregion
+export { u as default };

package/dist/tabs/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/tabs/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Tabs extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        contentStyle: PropTypes.Requireable<object>;
+        children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+    };
+    constructor(props: any);
+    handleChange: any;
+    render(): JSX.Element;
+}
+export default Tabs;
+//# sourceMappingURL=index.d.ts.map

package/dist/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS;IACvC,MAAM,CAAC,SAAS;;;;;MAKd;gBAEU,KAAK,KAAA;IAKjB,YAAY,EAAE,GAAG,CAEf;IAEF,MAAM;CAkBP;AAED,eAAe,IAAI,CAAC"}

package/dist/tabs/index.js

@@ -0,0 +1,39 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "@mui/material/Tabs";
+import o from "@mui/material/Tab";
+//#region src/tabs/index.tsx
+var s = n(o)(() => ({})), c = class extends e.Component {
+	static propTypes = {
+		className: t.string,
+		contentClassName: t.string,
+		contentStyle: t.object,
+		children: t.oneOfType([t.arrayOf(t.node), t.node]).isRequired
+	};
+	constructor(e) {
+		super(e), this.state = { value: 0 };
+	}
+	handleChange = (e, t) => {
+		this.setState({ value: t });
+	};
+	render() {
+		let { value: t } = this.state, { children: n, className: o, contentClassName: c, contentStyle: l = {} } = this.props;
+		return /* @__PURE__ */ i("div", {
+			className: o,
+			children: [/* @__PURE__ */ r(a, {
+				indicatorColor: "primary",
+				value: t,
+				onChange: this.handleChange,
+				children: e.Children.map(n, (e, t) => e && e.props.title ? /* @__PURE__ */ r(s, { label: e.props.title }, t) : null)
+			}), /* @__PURE__ */ r("div", {
+				className: c,
+				style: l,
+				children: n[t]
+			})]
+		});
+	}
+};
+//#endregion
+export { c as default };

package/dist/tags-input/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/tags-input/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class TagsInput extends React.Component {
+    static propTypes: {
+        tags: PropTypes.Validator<(string | null | undefined)[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    onFocus: any;
+    onBlur: any;
+    render(): JSX.Element;
+}
+export default TagsInput;
+//# sourceMappingURL=index.d.ts.map

package/dist/tags-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tags-input/index.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AA0CnC,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS;IAC5C,MAAM,CAAC,SAAS;;;MAGd;gBAEU,KAAK,KAAA;IAmCjB,OAAO,EAAE,GAAG,CAEV;IAEF,MAAM,EAAE,GAAG,CAET;IAEF,MAAM;CAqBP;AAED,eAAe,SAAS,CAAC"}

package/dist/tags-input/index.js

@@ -0,0 +1,83 @@
+import e from "../mui-box/index.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { uniq as o } from "lodash-es";
+import s from "@mui/material/Chip";
+//#region src/tags-input/index.tsx
+var c = 13, l = r(s)(() => ({
+	padding: "0px",
+	margin: "1px"
+})), u = ({ label: e, onDelete: t }) => /* @__PURE__ */ i(l, {
+	label: e,
+	onDelete: t
+});
+u.propTypes = {
+	label: n.string.isRequired,
+	onDelete: n.func.isRequired
+};
+var d = r("div")(({ theme: e }) => ({
+	border: `0px solid ${e.palette.background.paper}`,
+	display: "flex",
+	flexWrap: "wrap"
+})), f = r("input")(({ theme: e }) => ({
+	padding: "2px",
+	margin: "1px",
+	minWidth: "30px",
+	width: "100%",
+	flex: "1",
+	border: `0px solid ${e.palette.background.paper}`,
+	height: "28px",
+	fontSize: e.typography.fontSize,
+	fontFamily: e.typography.fontFamily,
+	outline: "none",
+	"&:focus": { outline: "none" }
+})), p = class extends t.Component {
+	static propTypes = {
+		tags: n.arrayOf(n.string).isRequired,
+		onChange: n.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			value: "",
+			focused: !1
+		}, this.onKeyDown = (e) => {
+			if (e.keyCode === c && this.state.value !== "") {
+				let e = this.state.value.trim(), t = o(this.props.tags.concat([e]));
+				t.length !== this.props.tags.length && (this.props.onChange(t), this.setState({ value: "" }));
+			}
+		}, this.onChange = (e) => {
+			this.setState({ value: e.target.value });
+		}, this.deleteTag = (e) => {
+			let { tags: t } = this.props, n = t.indexOf(e);
+			n !== -1 && (t.splice(n, 1), this.props.onChange(t), this.input.focus());
+		};
+	}
+	onFocus = () => {
+		this.setState({ focused: !0 });
+	};
+	onBlur = () => {
+		this.setState({ focused: !1 });
+	};
+	render() {
+		let { tags: t } = this.props;
+		return /* @__PURE__ */ i(e, {
+			focused: this.state.focused,
+			children: /* @__PURE__ */ a(d, { children: [(t || []).map((e, t) => /* @__PURE__ */ i(u, {
+				label: e,
+				onDelete: () => this.deleteTag(e)
+			}, t)), /* @__PURE__ */ i(f, {
+				ref: (e) => this.input = e,
+				onKeyDown: this.onKeyDown,
+				onChange: this.onChange,
+				value: this.state.value,
+				onFocus: this.onFocus,
+				onBlur: this.onBlur,
+				type: "text"
+			})] })
+		});
+	}
+};
+//#endregion
+export { p as default };

package/dist/two-choice.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/two-choice.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+declare class NChoice extends React.Component {
+    static propTypes: {
+        header: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+        customLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        opts: PropTypes.Validator<any[]>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        direction: PropTypes.Requireable<string>;
+    };
+    handleChange: any;
+    render(): JSX.Element;
+}
+export { NChoice };
+declare class TwoChoice extends React.Component {
+    static propTypes: {
+        header: PropTypes.Validator<string>;
+        value: PropTypes.Validator<string>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        one: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
+        two: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<string>;
+        }> | null | undefined>>;
+        className: PropTypes.Requireable<string>;
+        customLabel: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    render(): JSX.Element;
+}
+export default TwoChoice;
+//# sourceMappingURL=two-choice.d.ts.map

package/dist/two-choice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"two-choice.d.ts","sourceRoot":"","sources":["../src/two-choice.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AA+BH,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,cAAM,OAAQ,SAAQ,KAAK,CAAC,SAAS;IACnC,MAAM,CAAC,SAAS;;;;;;;;MAQd;IAEF,YAAY,EAAE,GAAG,CAEf;IAEF,MAAM;CAwBP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AAInB,cAAM,SAAU,SAAQ,KAAK,CAAC,SAAS;IACrC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;MAQd;IAEF,MAAM;CAeP;AAED,eAAe,SAAS,CAAC"}

package/dist/two-choice.js

@@ -0,0 +1,79 @@
+import e from "./radio-with-label.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "@pie-lib/render-ui";
+import { InputContainer as o } from "@pie-lib/render-ui";
+//#region src/two-choice.tsx
+function s(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function c(e, t) {
+	return !e || s(e) ? e : s(e.default) ? e.default : t && s(e[t]) ? e[t] : t && s(e[t]?.default) ? e[t].default : e;
+}
+var l = c(o, "InputContainer") || c(f.InputContainer, "InputContainer"), u = a, d = u.default, f = d && typeof d == "object" ? d : u, p = r("div")(({ theme: e, direction: t }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	paddingLeft: 0,
+	marginTop: e.spacing(1),
+	...t === "vertical" && { flexDirection: "column" }
+})), m = class extends t.Component {
+	static propTypes = {
+		header: n.string.isRequired,
+		className: n.string,
+		customLabel: n.func,
+		opts: n.array.isRequired,
+		value: n.string,
+		onChange: n.func.isRequired,
+		direction: n.oneOf(["horizontal", "vertical"])
+	};
+	handleChange = (e) => {
+		this.props.onChange(e.currentTarget.value);
+	};
+	render() {
+		let { header: t, className: n, customLabel: r, opts: a, value: o, direction: s } = this.props, c = a.map((e) => typeof e == "string" ? {
+			label: e,
+			value: e
+		} : e), u = r || e;
+		return /* @__PURE__ */ i(l, {
+			label: t,
+			className: n,
+			children: /* @__PURE__ */ i(p, {
+				direction: s,
+				children: c.map((e, t) => /* @__PURE__ */ i(u, {
+					value: e.value,
+					checked: e.value === o,
+					onChange: this.handleChange,
+					label: e.label
+				}, t))
+			})
+		});
+	}
+}, h = n.shape({
+	label: n.string,
+	value: n.string
+}), g = class extends t.Component {
+	static propTypes = {
+		header: n.string.isRequired,
+		value: n.string.isRequired,
+		onChange: n.func.isRequired,
+		one: n.oneOfType([h, n.string]),
+		two: n.oneOfType([h, n.string]),
+		className: n.string,
+		customLabel: n.func
+	};
+	render() {
+		let { one: e, two: t, header: n, className: r, customLabel: a, value: o, onChange: s } = this.props;
+		return /* @__PURE__ */ i(m, {
+			customLabel: a,
+			header: n,
+			className: r,
+			opts: [e, t],
+			value: o,
+			onChange: s
+		});
+	}
+};
+//#endregion
+export { m as NChoice, g as default };

package/dist/with-stateful-model.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-lib/packages/config-ui/src/with-stateful-model.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import PropTypes from 'prop-types';
+declare const withStatefulModel: (Component: any) => {
+    new (props: any): {
+        UNSAFE_componentWillReceiveProps(props: any): void;
+        onChange: any;
+        render(): JSX.Element;
+    };
+    propTypes: {
+        model: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default withStatefulModel;
+//# sourceMappingURL=with-stateful-model.d.ts.map

package/dist/with-stateful-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-stateful-model.d.ts","sourceRoot":"","sources":["../src/with-stateful-model.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,iBAAiB,GAAI,cAAS;;;kBAkBtB,GAAG;;;;;;;CAYhB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/with-stateful-model.js

@@ -0,0 +1,32 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/with-stateful-model.tsx
+var r = (r) => {
+	class i extends e.Component {
+		static propTypes = {
+			model: t.object.isRequired,
+			onChange: t.func.isRequired
+		};
+		constructor(e) {
+			super(e), this.state = { model: e.model };
+		}
+		UNSAFE_componentWillReceiveProps(e) {
+			this.setState({ model: e.model });
+		}
+		onChange = (e) => {
+			this.setState({ model: e }, () => {
+				this.props.onChange(this.state.model);
+			});
+		};
+		render() {
+			return /* @__PURE__ */ n(r, {
+				model: this.state.model,
+				onChange: this.onChange
+			});
+		}
+	}
+	return i;
+};
+//#endregion
+export { r as default };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pie-lib/config-ui",
+  "version": "0.1.0",
+  "description": "React implementation of @pie-lib/config-ui synced from pie-lib",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-lib/icons": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "assert": "^1.4.1",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "mathjs": "^7.0.1",
+    "prop-types": "^15.6.2",
+    "react-measure": "^2.2.2",
+    "react": "^18.2.0"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/alert-dialog.tsx

@@ -0,0 +1,85 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/alert-dialog.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledDialogTitle: any = styled(DialogTitle)(() => ({
+  fontSize: 'max(1.25rem, 18px)',
+}));
+
+const StyledDialogContentText: any = styled(DialogContentText)(() => ({
+  fontSize: 'max(1rem, 14px)',
+}));
+
+const AlertDialog = ({
+  text,
+  title,
+  onClose,
+  onConfirm,
+  open,
+  onCloseText,
+  onConfirmText,
+  disableAutoFocus,
+  disableEnforceFocus,
+  disableRestoreFocus,
+}) => (
+  <Dialog
+    open={open}
+    disableAutoFocus={disableAutoFocus}
+    disableEnforceFocus={disableEnforceFocus}
+    disableRestoreFocus={disableRestoreFocus}
+    onClose={onClose}
+  >
+    {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
+    {text && (
+      <DialogContent>
+        <StyledDialogContentText>{text}</StyledDialogContentText>
+      </DialogContent>
+    )}
+    <DialogActions>
+      {onClose && (
+        <Button onClick={onClose} color="primary">
+          {onCloseText}
+        </Button>
+      )}
+      {onConfirm && (
+        <Button autoFocus onClick={onConfirm} color="primary">
+          {onConfirmText}
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false,
+};
+
+AlertDialog.propTypes = {
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func,
+  open: PropTypes.bool,
+  onConfirmText: PropTypes.string,
+  onCloseText: PropTypes.string,
+  disableAutoFocus: PropTypes.bool,
+  disableEnforceFocus: PropTypes.bool,
+  disableRestoreFocus: PropTypes.bool,
+};
+
+export default AlertDialog;

package/src/checkbox.tsx

@@ -0,0 +1,71 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/checkbox.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiCheckbox from '@mui/material/Checkbox';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
+const StyledFormControlLabel: any = styled(FormControlLabel)(({ theme, mini }) => ({
+  margin: 0,
+  marginLeft: 0,
+  padding: 0,
+  '& .MuiFormControlLabel-label': {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+    ...(mini && {
+      marginLeft: theme.spacing(1),
+      color: grey[700],
+      fontSize: theme.typography.fontSize - 3,
+    }),
+  },
+}));
+
+const StyledCheckbox: any = styled(MuiCheckbox)(({ theme, mini, error }) => ({
+  color: `${color.tertiary()} !important`,
+  ...(mini && {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  }),
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
+
+const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
+  <StyledFormControlLabel
+    mini={mini}
+    control={<StyledCheckbox checked={checked} onChange={onChange} value={value} mini={mini} error={error} />}
+    label={label}
+  />
+);
+
+Checkbox.propTypes = {
+  mini: PropTypes.bool,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  error: PropTypes.bool,
+};
+
+Checkbox.defaultProps = {
+  value: '',
+  mini: false,
+  error: false,
+};
+
+export default Checkbox;