@arquimedes.co/eureka-forms 2.0.99-test → 3.0.0-refactor

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyledHelperText, StyledInputLabel, StyledSelect } from '../ErkSelect/ErkSelect';
+import styles from './ErkTimePicker.module.css';
+import ClockIcon from '../../Icons/ClockIcon';
+import { ClickAwayListener, FormControl, InputAdornment, MenuItem, Popper, useTheme, } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+import Toggle from '../Toggle/Toggle';
+function CustomSelect({ value, onChange, label, error, required, pickDays, helperText, readOnly = false, disabled = false, minDays = 0, maxDays, pickHours, minHours = 0, maxHours, pickMinutes, minMinutes = 0, maxMinutes, working, ...others }) {
+    const [open, setOpen] = useState(false);
+    const ref = React.useRef(null);
+    const { palette } = useTheme();
+    const handleChange = useCallback((value) => {
+        const time = { ...value };
+        if (time.days === 0) {
+            delete time.days;
+        }
+        if (value.hours === 0) {
+            delete time.hours;
+        }
+        if (time.minutes === 0) {
+            delete time.minutes;
+        }
+        if (working !== undefined) {
+            time.working = working;
+        }
+        onChange?.(time);
+    }, [onChange, working]);
+    const calcLabel = () => {
+        const parts = [label];
+        if (working === true)
+            parts.push('(Hábil)');
+        if (required)
+            parts.push('*');
+        return parts.join(' ');
+    };
+    return (_jsxs(React.Fragment, { children: [open && (_jsx(ClickAwayListener, { mouseEvent: "onMouseDown", onClickAway: () => setOpen(false), children: _jsx(Popper, { open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: [
+                        {
+                            name: 'preventOverflow',
+                            enabled: true,
+                            options: {
+                                priority: ['top', 'bottom', 'left', 'right'],
+                                boundariesElement: 'window',
+                                padding: 20,
+                            },
+                        },
+                    ], style: { zIndex: 1301 }, children: _jsxs("div", { className: styles.container, style: {
+                            paddingTop: error && helperText ? '0px' : '30px',
+                        }, children: [error && helperText && (_jsx("div", { className: styles.errorMessage, style: {
+                                    color: palette.error.main,
+                                }, children: helperText })), pickDays && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "D\u00EDas", type: "number", inputProps: {
+                                        min: minDays,
+                                        max: maxDays,
+                                    }, value: (value?.days ?? minDays) + '', onChange: (event) => {
+                                        handleChange({
+                                            ...value,
+                                            days: parseInt(event.target.value),
+                                        });
+                                    } }) })), pickHours && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Horas", type: "number", inputProps: {
+                                        min: minHours,
+                                        max: maxHours,
+                                    }, value: (value?.hours ?? minHours) + '', onChange: (event) => {
+                                        handleChange({
+                                            ...value,
+                                            hours: parseInt(event.target.value),
+                                        });
+                                    } }) })), pickMinutes && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Minutos", type: "number", inputProps: {
+                                        min: minMinutes,
+                                        max: maxMinutes,
+                                    }, value: (value?.minutes ?? minMinutes) + '', onChange: (event) => {
+                                        handleChange({
+                                            ...value,
+                                            minutes: parseInt(event.target.value),
+                                        });
+                                    } }) })), working === undefined && (_jsxs("div", { className: styles.workingContainer, children: ["H\u00E1biles:", _jsx(Toggle, { checked: !!value?.working, disabled: working !== undefined, onChange: (working) => {
+                                            handleChange({
+                                                ...value,
+                                                working,
+                                            });
+                                        } })] }))] }) }) })), _jsxs(FormControl, { fullWidth: true, size: "small", error: error, variant: "outlined", required: required, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, children: label })), _jsx(StyledSelect, { ...others, ref: ref, open: open, readOnly: readOnly, disabled: disabled, onBlur: () => {
+                            if (!readOnly && !disabled)
+                                setOpen(false);
+                        }, label: label ? calcLabel() : undefined, value: value ? 0 : '', title: calcTimeString(value), IconComponent: () => _jsx(_Fragment, {}), MenuProps: { sx: { visibility: 'hidden' } }, endAdornment: _jsx(InputAdornment, { position: "end", onClick: (e) => {
+                                e.stopPropagation();
+                                if (!readOnly && !disabled)
+                                    setOpen(!open);
+                            }, children: _jsx(ClockIcon, {}) }), onFocus: (e) => {
+                            if (!e.relatedTarget?.closest('.EF-MuiPaper-root') && !readOnly && !disabled) {
+                                setOpen(true);
+                            }
+                        }, onOpen: () => {
+                            if (readOnly || disabled)
+                                return;
+                            setOpen(true);
+                            if (required)
+                                handleChange(value ?? {});
+                        }, onClose: () => {
+                            if (!readOnly && !disabled)
+                                setOpen(false);
+                        }, inputProps: { disabled: readOnly || disabled }, renderValue: () => calcTimeString(value), slots: {}, children: _jsx(MenuItem, { value: 0 }) }), helperText && _jsx(StyledHelperText, { disabled: disabled, children: helperText })] })] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+class ErkTimePicker extends React.Component {
+    render() {
+        return _jsx(CustomSelect, { ...this.props });
+    }
+}
+export default ErkTimePicker;
+function calcTimeString(value) {
+    if (!value)
+        return undefined;
+    const parts = [];
+    if (value.days) {
+        parts.push(`${value.days} Día${value.days > 1 ? 's' : ''}`);
+    }
+    if (value.hours) {
+        parts.push(`${value.hours} Hora${value.hours > 1 ? 's' : ''}`);
+    }
+    if (value.minutes) {
+        parts.push(`${value.minutes} Minuto${value.minutes > 1 ? 's' : ''}`);
+    }
+    if (parts.length === 0)
+        return value.working ? 'Horario Hábil Más Cercano' : 'Inmediatamente';
+    if (value.working) {
+        const isMultiple = parts.length > 1 || parts[0].includes('s');
+        return parts.join(', ') + (isMultiple ? ' Hábiles' : ' Hábil');
+    }
+    return parts.join(', ');
+}

package/dist/Shared/InputIcon/InputIcon.js

@@ -1,25 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import CalendarIcon from '../../Icons/CalendarIcon';
 import LeakIcon from '../../Icons/Construction/LeakIcon';
@@ -34,83 +12,82 @@ import SupplierIcon from '../../Icons/Entities/SupplierIcon';
 import LocationIcon from '../../Icons/LocationIcon';
 import PersonIcon from '../../Icons/PersonIcon';
 import IconTypes from '../../constants/IconTypes';
-function InputIcon(_a) {
-    var icon = _a.icon, _b = _a.fill, fill = _b === void 0 ? '#757575' : _b, others = __rest(_a, ["icon", "fill"]);
+function InputIcon({ icon, fill, ...others }) {
     switch (icon) {
         case IconTypes.PROJECT:
-            return (_jsx(ProjectIcon, __assign({ style: {
+            return (_jsx(ProjectIcon, { style: {
                     display: 'flex',
                     height: 24,
                     width: 24,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.PROPERTY:
-            return (_jsx(PropertyIcon, __assign({ style: {
+            return (_jsx(PropertyIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.SPACE:
-            return (_jsx(SpaceIcon, __assign({ style: {
+            return (_jsx(SpaceIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.PERSON:
-            return (_jsx(PersonIcon, __assign({ style: {
+            return (_jsx(PersonIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.LEAK:
-            return (_jsx(LeakIcon, __assign({ style: {
+            return (_jsx(LeakIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
                     marginTop: 2,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.DOCUMENT:
-            return (_jsx(DocumentIcon, __assign({ style: {
+            return (_jsx(DocumentIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.HANDSHAKE:
-            return (_jsx(HandShakeIcon, __assign({ style: {
+            return (_jsx(HandShakeIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.CHECKLIST:
-            return (_jsx(CheckListIcon, __assign({ style: {
+            return (_jsx(CheckListIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.SUPPLIER:
-            return (_jsx(SupplierIcon, __assign({ style: {
+            return (_jsx(SupplierIcon, { style: {
                     display: 'flex',
                     height: 24,
                     width: 24,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.CALENDAR:
-            return (_jsx(CalendarIcon, __assign({ style: {
+            return (_jsx(CalendarIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.LOCATION:
-            return (_jsx(LocationIcon, __assign({ style: {
+            return (_jsx(LocationIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
         case IconTypes.GENERIC:
         default:
-            return (_jsx(GenericEntityIcon, __assign({ style: {
+            return (_jsx(GenericEntityIcon, { style: {
                     display: 'flex',
                     height: 23,
                     width: 23,
-                }, fill: fill }, others)));
+                }, fill: fill, ...others }));
     }
 }
 export default InputIcon;

package/dist/Shared/Loader/Loader.js

@@ -1,26 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import CircularProgress from '@material-ui/core/CircularProgress';
+import { CircularProgress } from '@mui/material';
 import styles from './Loader.module.css';
 /**
  * Generic Loader Component with optional curtain.
  */
-function Loader(_a) {
-    var _b = _a.color, color = _b === void 0 ? '#3d5a7f' : _b, _c = _a.curtain, curtain = _c === void 0 ? false : _c, _d = _a.zIndex, zIndex = _d === void 0 ? 20 : _d, _e = _a.size, size = _e === void 0 ? 40 : _e, _f = _a.position, position = _f === void 0 ? 'absolute' : _f;
-    return (_jsx("div", __assign({ className: styles.loaderContainer + ' flexbox', style: {
+function Loader({ color = '#3d5a7f', curtain = false, zIndex = 20, size = 40, position = 'absolute', }) {
+    return (_jsx("div", { className: styles.loaderContainer + ' flexbox', style: {
             backgroundColor: curtain ? 'rgb(0, 0, 0, 0.4)' : '',
-            zIndex: zIndex,
-            position: position,
-        } }, { children: _jsx("div", __assign({ className: styles.loader }, { children: _jsx(CircularProgress, { size: size, style: { color: color } }) })) })));
+            zIndex,
+            position,
+        }, children: _jsx("div", { className: styles.loader, children: _jsx(CircularProgress, { size: size, style: { color } }) }) }));
 }
 export default Loader;

package/dist/Shared/Navbar/Navbar.js

@@ -1,18 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './Navbar.module.css';
-function Navbar(_a) {
-    var logo = _a.logo, color = _a.color;
-    return (_jsx("div", __assign({ className: styles.navContainer, style: { backgroundColor: color } }, { children: _jsx("img", { src: logo, alt: "Organization Logo", className: styles.navImage }) })));
+function Navbar({ logo, color }) {
+    return (_jsx("div", { className: styles.navContainer, style: { backgroundColor: color }, children: _jsx("img", { src: logo, alt: "Organization Logo", className: styles.navImage }) }));
 }
 export default Navbar;

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

@@ -1,5 +1,5 @@
 import Navbar from './Navbar';
-var meta = {
+const meta = {
     component: Navbar,
     tags: ['autodocs'],
     args: {
@@ -8,6 +8,6 @@ var meta = {
     },
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {},
 };

package/dist/Shared/Rating/Rating.js

@@ -1,39 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RatingTypes } from '../../constants/FormStepTypes';
 import LikeRating from './Ratings/LikeRating';
 import SatisfactionRating from './Ratings/SatisfactionRating';
 import ScaleRating from './Ratings/ScaleRating';
-function Rating(_a) {
-    var type = _a.type, others = __rest(_a, ["type"]);
+function Rating({ type, ...others }) {
     switch (type) {
         case RatingTypes.LIKE:
-            return _jsx(LikeRating, __assign({}, others));
+            return _jsx(LikeRating, { ...others });
         case RatingTypes.SATISFACTION:
-            return _jsx(SatisfactionRating, __assign({}, others));
+            return _jsx(SatisfactionRating, { ...others });
         case RatingTypes.SCALE:
-            return _jsx(ScaleRating, __assign({}, others));
+            return _jsx(ScaleRating, { ...others });
         default:
             return _jsx("div", {});
     }

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

@@ -1,53 +1,47 @@
 import Rating from './Rating';
 import { RatingTypes } from '../../constants/FormStepTypes';
-var meta = {
+const meta = {
     component: Rating,
     tags: ['autodocs'],
     args: {},
 };
 export default meta;
-export var ScaleRating = {
+export const ScaleRating = {
     args: {
         type: RatingTypes.SCALE,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
     },
 };
-export var ScaleRatingWidthValue = {
+export const ScaleRatingWidthValue = {
     args: {
         type: RatingTypes.SCALE,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
         value: 4,
     },
 };
-export var LikeRating = {
+export const LikeRating = {
     args: {
         type: RatingTypes.LIKE,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
     },
 };
-export var LikeRatingWithValue = {
+export const LikeRatingWithValue = {
     args: {
         type: RatingTypes.LIKE,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
         value: 1,
     },
 };
-export var SatisfactionRating = {
+export const SatisfactionRating = {
     args: {
         type: RatingTypes.SATISFACTION,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
     },
 };
-export var SatisfactionRatingWidthValue = {
+export const SatisfactionRatingWidthValue = {
     args: {
         type: RatingTypes.SATISFACTION,
-        focusColor: '#3d5a7f',
-        unSelectedColor: '#d8d8d8',
+        onChange: () => { },
         value: 3,
     },
 };

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

@@ -1,43 +1,29 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ThumbDownRoundedIcon from '@material-ui/icons/ThumbDownRounded';
-import ThumbUpRoundedIcon from '@material-ui/icons/ThumbUpRounded';
+import { useTheme } from '@mui/material';
+import DislikeIcon from '../../../Icons/Ratings/DislikeIcon';
+import LikeIcon from '../../../Icons/Ratings/LikeIcon';
 import styles from '../Rating.module.css';
-function LikeRating(_a) {
-    var disabled = _a.disabled, inputRef = _a.inputRef, value = _a.value, onChange = _a.onChange, focusColor = _a.focusColor, unSelectedColor = _a.unSelectedColor;
-    return (_jsxs("div", __assign({ className: styles.ratingContainer, style: {
+function LikeRating({ disabled, inputRef, value, onChange }) {
+    const { palette } = useTheme();
+    const focusColor = palette.primary.main;
+    const unSelectedColor = palette.outline.main;
+    return (_jsxs("div", { className: styles.ratingContainer, style: {
             '--eureka-primary': focusColor,
             '--eureka-outline': unSelectedColor,
-        } }, { children: [_jsx("input", { ref: inputRef, className: 'hidden-input' }), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, style: { height: 70 }, onClick: function () {
+        }, children: [_jsx("input", { ref: inputRef, className: 'hidden-input' }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, style: { height: 70 }, onClick: () => {
                     if (!disabled)
                         onChange(value === 1 ? null : 1);
-                } }, { children: _jsx(ThumbUpRoundedIcon, { fontSize: "inherit", style: value === 1
-                        ? {
-                            color: focusColor,
-                        }
-                        : {} }) })), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, style: { height: 70 }, onClick: function () {
+                }, children: _jsx(LikeIcon, { style: {
+                        fontSize: 'inherit',
+                        color: value === 1 ? focusColor : undefined,
+                    } }) }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, style: { height: 70 }, onClick: () => {
                     if (!disabled)
                         onChange(value === 0 ? null : 0);
-                } }, { children: _jsx(ThumbDownRoundedIcon, { fontSize: "inherit", style: value === 0
-                        ? {
-                            color: focusColor,
-                            marginTop: 14,
-                            marginLeft: 15,
-                        }
-                        : { marginTop: 14, marginLeft: 15 } }) }))] })));
+                }, children: _jsx(DislikeIcon, { style: {
+                        color: value === 0 ? focusColor : undefined,
+                        fontSize: 'inherit',
+                        marginTop: 14,
+                        marginLeft: 15,
+                    } }) })] }));
 }
 export default LikeRating;

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

@@ -1,61 +1,41 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from '../Rating.module.css';
-import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import SentimentDissatisfiedIcon from '@material-ui/icons/SentimentDissatisfied';
-import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
-import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
-function SatisfactionRating(_a) {
-    var value = _a.value, inputRef = _a.inputRef, disabled = _a.disabled, onChange = _a.onChange, focusColor = _a.focusColor, unSelectedColor = _a.unSelectedColor;
-    return (_jsxs("div", __assign({ className: styles.ratingContainer, style: {
+import VeryDissatisfiedIcon from '../../../Icons/Ratings/VeryDissatisfiedIcon';
+import DissatisfiedIcon from '../../../Icons/Ratings/DissatisfiedIcon';
+import SatisfiedIcon from '../../../Icons/Ratings/SatisfiedIcon';
+import VerySatisfiedIcon from '../../../Icons/Ratings/VerySatisfiedIcon';
+import { useTheme } from '@mui/material';
+function SatisfactionRating({ value, inputRef, disabled, onChange }) {
+    const { palette } = useTheme();
+    const focusColor = palette.primary.main;
+    const unSelectedColor = palette.outline.main;
+    return (_jsxs("div", { className: styles.ratingContainer, style: {
             '--eureka-primary': focusColor,
             '--eureka-outline': unSelectedColor,
-        } }, { children: [_jsx("input", { ref: inputRef, className: 'hidden-input' }), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, onClick: function () {
+        }, children: [_jsx("input", { ref: inputRef, className: 'hidden-input' }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, onClick: () => {
                     if (!disabled)
                         onChange(value === 1 ? null : 1);
-                } }, { children: _jsx(SentimentVeryDissatisfiedIcon, { fontSize: "inherit", style: value === 1
-                        ? {
-                            color: focusColor,
-                        }
-                        : {} }) })), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, onClick: function () {
+                }, children: _jsx(VeryDissatisfiedIcon, { style: {
+                        fontSize: 'inherit',
+                        color: value === 1 ? focusColor : undefined,
+                    } }) }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, onClick: () => {
                     if (!disabled)
                         onChange(value === 2 ? null : 2);
-                } }, { children: _jsx(SentimentDissatisfiedIcon, { fontSize: "inherit", style: value === 2
-                        ? {
-                            color: focusColor,
-                        }
-                        : {} }) })), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, onClick: function () {
+                }, children: _jsx(DissatisfiedIcon, { style: {
+                        fontSize: 'inherit',
+                        color: value === 2 ? focusColor : undefined,
+                    } }) }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, onClick: () => {
                     if (!disabled)
                         onChange(value === 3 ? null : 3);
-                } }, { children: _jsx(SentimentSatisfiedAltIcon, { fontSize: "inherit", style: value === 3
-                        ? {
-                            color: focusColor,
-                        }
-                        : {} }) })), _jsx("div", __assign({ className: disabled
-                    ? styles.disabledIconContainer
-                    : styles.iconContainer, onClick: function () {
+                }, children: _jsx(SatisfiedIcon, { style: {
+                        fontSize: 'inherit',
+                        color: value === 3 ? focusColor : undefined,
+                    } }) }), _jsx("div", { className: disabled ? styles.disabledIconContainer : styles.iconContainer, onClick: () => {
                     if (!disabled)
                         onChange(value === 4 ? null : 4);
-                } }, { children: _jsx(SentimentVerySatisfiedIcon, { fontSize: "inherit", style: value === 4
-                        ? {
-                            color: focusColor,
-                        }
-                        : {} }) }))] })));
+                }, children: _jsx(VerySatisfiedIcon, { style: {
+                        fontSize: 'inherit',
+                        color: value === 4 ? focusColor : undefined,
+                    } }) })] }));
 }
 export default SatisfactionRating;