@arquimedes.co/eureka-forms 2.0.32-test → 2.0.34-test

package/dist/cjs/Shared/InputIcon/InputIcon.js

@@ -0,0 +1,88 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LeakIcon_1 = __importDefault(require("../../Icons/Construction/LeakIcon"));
+const ProjectIcon_1 = __importDefault(require("../../Icons/Construction/ProjectIcon"));
+const PropertyIcon_1 = __importDefault(require("../../Icons/Construction/PropertyIcon"));
+const SpaceIcon_1 = __importDefault(require("../../Icons/Construction/SpaceIcon"));
+const DocumentIcon_1 = __importDefault(require("../../Icons/DocumentIcon"));
+const CheckListIcon_1 = __importDefault(require("../../Icons/Entities/CheckListIcon"));
+const GenericEntityIcon_1 = __importDefault(require("../../Icons/Entities/GenericEntityIcon"));
+const HandshakeIcon_1 = __importDefault(require("../../Icons/Entities/HandshakeIcon"));
+const IconTypes_1 = __importDefault(require("../../constants/IconTypes"));
+function InputIcon(_a) {
+    var { icon, fill = '#757575' } = _a, others = __rest(_a, ["icon", "fill"]);
+    switch (icon) {
+        case IconTypes_1.default.PROJECT:
+            return ((0, jsx_runtime_1.jsx)(ProjectIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 24,
+                    width: 24,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.PROPERTY:
+            return ((0, jsx_runtime_1.jsx)(PropertyIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.SPACE:
+            return ((0, jsx_runtime_1.jsx)(SpaceIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.LEAK:
+            return ((0, jsx_runtime_1.jsx)(LeakIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                    marginTop: 2,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.DOCUMENT:
+            return ((0, jsx_runtime_1.jsx)(DocumentIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.HANDSHAKE:
+            return ((0, jsx_runtime_1.jsx)(HandshakeIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.CHECKLIST:
+            return ((0, jsx_runtime_1.jsx)(CheckListIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 24,
+                    width: 24,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.SUPPLIER:
+            return ((0, jsx_runtime_1.jsx)(CheckListIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+        case IconTypes_1.default.GENERIC:
+        default:
+            return ((0, jsx_runtime_1.jsx)(GenericEntityIcon_1.default, Object.assign({ style: {
+                    display: 'flex',
+                    height: 23,
+                    width: 23,
+                }, fill: fill }, others)));
+    }
+}
+exports.default = InputIcon;

package/dist/cjs/Shared/Loader/Loader.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CircularProgress_1 = __importDefault(require("@material-ui/core/CircularProgress"));
+const Loader_module_css_1 = __importDefault(require("./Loader.module.css"));
+/**
+ * Generic Loader Component with optional curtain.
+ */
+function Loader({ color = '#3d5a7f', curtain = false, zIndex = 20, size = 40, position = 'absolute', }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: Loader_module_css_1.default.loaderContainer + ' flexbox', style: {
+            backgroundColor: curtain ? 'rgb(0, 0, 0, 0.4)' : '',
+            zIndex,
+            position,
+        } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: Loader_module_css_1.default.loader }, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: size, style: { color } }) })) })));
+}
+exports.default = Loader;

package/dist/cjs/Shared/Navbar/Navbar.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Navbar_module_css_1 = __importDefault(require("./Navbar.module.css"));
+function Navbar({ logo, color }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: Navbar_module_css_1.default.navContainer, style: { backgroundColor: color } }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo, alt: "Organization Logo", className: Navbar_module_css_1.default.navImage }) })));
+}
+exports.default = Navbar;

package/dist/cjs/Shared/Navbar/Navbar.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const Navbar_1 = __importDefault(require("./Navbar"));
+const meta = {
+    component: Navbar_1.default,
+    tags: ['autodocs'],
+    args: {
+        logo: 'https://content.capta.co/Capta/CaptaWhite.svg',
+        color: '#3d5a7f',
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {},
+};

package/dist/cjs/Shared/Rating/Rating.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormStepTypes_1 = require("../../constants/FormStepTypes");
+const LikeRating_1 = __importDefault(require("./Ratings/LikeRating"));
+const SatisfactionRating_1 = __importDefault(require("./Ratings/SatisfactionRating"));
+const ScaleRating_1 = __importDefault(require("./Ratings/ScaleRating"));
+function Rating(_a) {
+    var { type } = _a, others = __rest(_a, ["type"]);
+    switch (type) {
+        case FormStepTypes_1.RatingTypes.LIKE:
+            return (0, jsx_runtime_1.jsx)(LikeRating_1.default, Object.assign({}, others));
+        case FormStepTypes_1.RatingTypes.SATISFACTION:
+            return (0, jsx_runtime_1.jsx)(SatisfactionRating_1.default, Object.assign({}, others));
+        case FormStepTypes_1.RatingTypes.SCALE:
+            return (0, jsx_runtime_1.jsx)(ScaleRating_1.default, Object.assign({}, others));
+        default:
+            return (0, jsx_runtime_1.jsx)("div", {});
+    }
+}
+exports.default = Rating;

package/dist/cjs/Shared/Rating/Rating.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SatisfactionRatingWidthValue = exports.SatisfactionRating = exports.LikeRatingWithValue = exports.LikeRating = exports.ScaleRatingWidthValue = exports.ScaleRating = void 0;
+const Rating_1 = __importDefault(require("./Rating"));
+const FormStepTypes_1 = require("../../constants/FormStepTypes");
+const meta = {
+    component: Rating_1.default,
+    tags: ['autodocs'],
+    args: {},
+};
+exports.default = meta;
+exports.ScaleRating = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+exports.ScaleRatingWidthValue = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.SCALE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 4,
+    },
+};
+exports.LikeRating = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+exports.LikeRatingWithValue = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.LIKE,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 1,
+    },
+};
+exports.SatisfactionRating = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+    },
+};
+exports.SatisfactionRatingWidthValue = {
+    args: {
+        type: FormStepTypes_1.RatingTypes.SATISFACTION,
+        name: 'Rating',
+        focusColor: '#3d5a7f',
+        unSelectedColor: '#d8d8d8',
+        value: 3,
+    },
+};

package/dist/cjs/Shared/Rating/Ratings/LikeRating.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ThumbDownRounded_1 = __importDefault(require("@material-ui/icons/ThumbDownRounded"));
+const ThumbUpRounded_1 = __importDefault(require("@material-ui/icons/ThumbUpRounded"));
+const Rating_module_css_1 = __importDefault(require("../Rating.module.css"));
+function LikeRating({ disabled, inputRef, value, onChange, focusColor, unSelectedColor, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: Rating_module_css_1.default.ratingContainer, style: {
+            '--eureka-primary': focusColor,
+            '--eureka-outline': unSelectedColor,
+        } }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, className: 'hidden-input' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, style: { height: 70 }, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 1 ? null : 1);
+                } }, { children: (0, jsx_runtime_1.jsx)(ThumbUpRounded_1.default, { fontSize: "inherit", style: value === 1
+                        ? {
+                            color: focusColor,
+                        }
+                        : {} }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, style: { height: 70 }, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 0 ? null : 0);
+                } }, { children: (0, jsx_runtime_1.jsx)(ThumbDownRounded_1.default, { fontSize: "inherit", style: value === 0
+                        ? {
+                            color: focusColor,
+                            marginTop: 14,
+                            marginLeft: 15,
+                        }
+                        : { marginTop: 14, marginLeft: 15 } }) }))] })));
+}
+exports.default = LikeRating;

package/dist/cjs/Shared/Rating/Ratings/SatisfactionRating.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Rating_module_css_1 = __importDefault(require("../Rating.module.css"));
+const SentimentVeryDissatisfied_1 = __importDefault(require("@material-ui/icons/SentimentVeryDissatisfied"));
+const SentimentDissatisfied_1 = __importDefault(require("@material-ui/icons/SentimentDissatisfied"));
+const SentimentSatisfiedAltOutlined_1 = __importDefault(require("@material-ui/icons/SentimentSatisfiedAltOutlined"));
+const SentimentVerySatisfied_1 = __importDefault(require("@material-ui/icons/SentimentVerySatisfied"));
+function SatisfactionRating({ value, inputRef, disabled, onChange, focusColor, unSelectedColor, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: Rating_module_css_1.default.ratingContainer, style: {
+            '--eureka-primary': focusColor,
+            '--eureka-outline': unSelectedColor,
+        } }, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, className: 'hidden-input' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 1 ? null : 1);
+                } }, { children: (0, jsx_runtime_1.jsx)(SentimentVeryDissatisfied_1.default, { fontSize: "inherit", style: value === 1
+                        ? {
+                            color: focusColor,
+                        }
+                        : {} }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 2 ? null : 2);
+                } }, { children: (0, jsx_runtime_1.jsx)(SentimentDissatisfied_1.default, { fontSize: "inherit", style: value === 2
+                        ? {
+                            color: focusColor,
+                        }
+                        : {} }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 3 ? null : 3);
+                } }, { children: (0, jsx_runtime_1.jsx)(SentimentSatisfiedAltOutlined_1.default, { fontSize: "inherit", style: value === 3
+                        ? {
+                            color: focusColor,
+                        }
+                        : {} }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: disabled
+                    ? Rating_module_css_1.default.disabledIconContainer
+                    : Rating_module_css_1.default.iconContainer, onClick: () => {
+                    if (!disabled)
+                        onChange(value === 4 ? null : 4);
+                } }, { children: (0, jsx_runtime_1.jsx)(SentimentVerySatisfied_1.default, { fontSize: "inherit", style: value === 4
+                        ? {
+                            color: focusColor,
+                        }
+                        : {} }) }))] })));
+}
+exports.default = SatisfactionRating;

package/dist/cjs/Shared/Rating/Ratings/ScaleRating.js

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lab_1 = require("@material-ui/lab");
+const GradeRounded_1 = __importDefault(require("@material-ui/icons/GradeRounded"));
+const core_1 = require("@material-ui/core");
+const react_1 = __importDefault(require("react"));
+const useRatingStyles = (props) => (0, core_1.makeStyles)({
+    root: {
+        '&.Mui-disabled': {
+            opacity: 1,
+        },
+        '& .EF-MuiRating-iconFilled': {
+            color: props.focusColor,
+        },
+        '& .EF-MuiRating-iconEmpty': {
+            color: props.unSelectedColor,
+        },
+    },
+});
+function ScaleRating({ value, name, inputRef, disabled, onChange, isMobile, focusColor, unSelectedColor, }) {
+    const ratingClasses = useRatingStyles({
+        unSelectedColor,
+        focusColor,
+    })();
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, className: 'hidden-input' }), (0, jsx_runtime_1.jsx)(lab_1.Rating, { value: value, onChange: (_event, newValue) => {
+                    if (!disabled)
+                        onChange(newValue);
+                }, disabled: disabled, classes: ratingClasses, name: name, size: "large", defaultValue: 0, getLabelText: (value) => value + '/5', max: 5, IconContainerComponent: isMobile ? SmallIconContainer : IconContainer })] }));
+}
+function IconContainer(_a) {
+    var { value } = _a, other = __rest(_a, ["value"]);
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'icon' + value }, other, { children: (0, jsx_runtime_1.jsx)(GradeRounded_1.default, { style: { fontSize: 60 } }) })));
+}
+function SmallIconContainer(_a) {
+    var { value } = _a, other = __rest(_a, ["value"]);
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'icon' + value }, other, { children: (0, jsx_runtime_1.jsx)(GradeRounded_1.default, { style: { fontSize: 50 } }) })));
+}
+exports.default = ScaleRating;

package/dist/cjs/Shared/RoundedButton/RoundedButton.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@material-ui/core");
+/**
+ * Generic rounded button
+ */
+function RoundedButton({ text, backgroundColor = '#3d5a7f', color = '#ffffff', onClick, disabled, fontSize = '1rem', padding = '0 13px 0 13px', borderRadius = 10, height = 28, bold = false, width = 'fit-content', }) {
+    const CustomButton = (0, core_1.withStyles)({
+        root: {
+            width,
+            textTransform: 'none',
+            fontFamily: 'inherit',
+            fontSize,
+            borderRadius,
+            padding,
+            height: height,
+            boxShadow: 'none',
+            backgroundColor,
+            color,
+            '&:hover': {
+                boxShadow: 'none',
+                backgroundColor,
+            },
+            '&:disabled': {
+                backgroundColor,
+                color,
+                opacity: 0.5,
+            },
+            fontWeight: bold ? 'bold' : 'normal',
+        },
+    })(core_1.Button);
+    return ((0, jsx_runtime_1.jsx)(CustomButton, Object.assign({ variant: "contained", onMouseDown: onClick, disabled: disabled }, { children: text })));
+}
+exports.default = RoundedButton;

package/dist/cjs/Shared/RoundedButton/RoundedButton.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DifferentColors = exports.Disabled = exports.Default = void 0;
+const RoundedButton_1 = __importDefault(require("./RoundedButton"));
+const meta = {
+    component: RoundedButton_1.default,
+    tags: ['autodocs'],
+    args: {
+        text: 'Label',
+        backgroundColor: '#3d5a7f',
+        color: '#ffffff',
+        disabled: false,
+        fontSize: '1rem',
+        padding: '0 13px 0 13px',
+        borderRadius: 10,
+        height: 28,
+        bold: false,
+        width: 'fit-content',
+    },
+};
+exports.default = meta;
+exports.Default = {
+    args: {
+        text: 'Label',
+    },
+};
+exports.Disabled = {
+    args: {
+        text: 'Label',
+        disabled: true,
+    },
+};
+exports.DifferentColors = {
+    args: {
+        text: 'Label',
+        backgroundColor: 'red',
+        color: 'blue',
+    },
+};

package/dist/cjs/Shared/RoundedCheckBox/RoundedCheckBox.js

@@ -0,0 +1,73 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@material-ui/core");
+const CheckBoxRounded_1 = __importDefault(require("@material-ui/icons/CheckBoxRounded"));
+const CheckBoxOutlineBlankRounded_1 = __importDefault(require("@material-ui/icons/CheckBoxOutlineBlankRounded"));
+const useCheckBoxStyles = (props) => (0, core_1.makeStyles)(() => ({
+    root: {
+        padding: props.padding,
+        fontSize: props.size,
+        color: props.error ? props.errorColor : props.uncheckedColor,
+        '&.Mui-checked': {
+            color: props.checkedColor,
+        },
+        '&.Mui-checked:hover': {
+            backgroundColor: props.checkedHoverColor,
+        },
+        '&.Mui-disabled': {
+            cursor: 'default',
+            pointerEvents: 'all !important',
+            color: props.cantEdit
+                ? props.disabledColor
+                : props.checkedColor,
+        },
+        '&:hover': {
+            backgroundColor: props.cantEdit
+                ? 'transparent'
+                : props.checkedHoverColor,
+        },
+    },
+}));
+/**
+ * Generic rounded checkbox
+ */
+function CustomCheckBox(_a) {
+    var { padding = '9px', onChange, error = false, size = '1.5rem', checkedColor = '#3d5a7f', uncheckedColor = '#787878', disabledColor = '#A0A0A0', errorColor = '#cc2936', cantEdit = false, checked } = _a, others = __rest(_a, ["padding", "onChange", "error", "size", "checkedColor", "uncheckedColor", "disabledColor", "errorColor", "cantEdit", "checked"]);
+    const classes = useCheckBoxStyles({
+        size,
+        error,
+        padding,
+        cantEdit,
+        errorColor,
+        checkedColor,
+        disabledColor,
+        uncheckedColor,
+        checkedHoverColor: checkedColor + '0a',
+    })();
+    return ((0, jsx_runtime_1.jsx)(core_1.Checkbox, Object.assign({}, others, { disabled: cantEdit, classes: classes, checked: checked, onChange: onChange, required: true, icon: (0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankRounded_1.default, { fontSize: "inherit" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBoxRounded_1.default, { fontSize: "inherit" }) })));
+}
+/**
+ * Generic datepicker with apps designs. Is class do to the use in the react-hook-forms library
+ */
+class RoundedCheckBox extends react_1.default.Component {
+    render() {
+        return (0, jsx_runtime_1.jsx)(CustomCheckBox, Object.assign({}, this.props));
+    }
+}
+exports.default = RoundedCheckBox;

package/dist/cjs/Shared/RoundedCheckBox/RoundedCheckBox.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DifferentColors = exports.ErrorColor = exports.Disabled = exports.Error = exports.Checked = exports.Uncheked = void 0;
+const RoundedCheckBox_1 = __importDefault(require("./RoundedCheckBox"));
+const meta = {
+    component: RoundedCheckBox_1.default,
+    tags: ['autodocs'],
+    args: {
+        checkedColor: '#3d5a7f',
+        uncheckedColor: '#787878',
+        disabledColor: '#A0A0A0',
+        size: '1.5rem',
+        errorColor: '#cc2936',
+    },
+};
+exports.default = meta;
+exports.Uncheked = {
+    args: {
+        checked: false,
+    },
+};
+exports.Checked = {
+    args: {
+        checked: true,
+    },
+};
+exports.Error = {
+    args: {
+        checked: false,
+        error: true,
+    },
+};
+exports.Disabled = {
+    args: {
+        checked: false,
+        disabled: true,
+    },
+};
+exports.ErrorColor = {
+    args: {
+        checked: false,
+        error: true,
+        errorColor: 'blue',
+    },
+};
+exports.DifferentColors = {
+    args: {
+        checked: true,
+        checkedColor: 'red',
+        uncheckedColor: 'blue',
+        disabledColor: '#A0A0A0',
+    },
+};