@arquimedes.co/eureka-forms 2.0.99 → 3.0.1-refactor

package/dist/Shared/ErkTextField/ErkTextField.stories.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/preview-api';
+import ErkTextField from './ErkTextField';
+import { within, userEvent } from '@storybook/testing-library';
+const meta = {
+    component: ErkTextField,
+    tags: ['autodocs'],
+    args: {
+        disabled: false,
+        multiline: false,
+    },
+};
+export default meta;
+export const Empty = {
+    args: {},
+};
+export const EmptyLabel = {
+    args: {
+        label: 'Label',
+    },
+};
+export const Default = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+        await userEvent.type(emailInput, 'example-email@email.com', {
+            delay: 100,
+        });
+    },
+    render: function Component(args) {
+        const [, setArgs] = useArgs();
+        const onValueChange = (value) => {
+            args.onChange?.(value);
+            setArgs({ value });
+        };
+        return _jsx(ErkTextField, { ...args, ref: undefined, onChange: onValueChange });
+    },
+};
+export const Focused = {
+    args: {
+        label: 'Label',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const FocusedNoLabel = {
+    args: {},
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const emailInput = canvas.getByRole('textbox');
+        await userEvent.click(emailInput);
+    },
+};
+export const WithValue = {
+    args: {
+        value: 'Textinput Value',
+    },
+};
+export const Multiline = {
+    args: {
+        value: 'TextArea Value',
+        multiline: true,
+        minRows: 4,
+    },
+};
+export const WithHelperText = {
+    args: {
+        helperText: 'Helper text',
+    },
+};
+export const WithValueandLabel = {
+    args: {
+        label: 'Label',
+        value: 'Textinput Value',
+    },
+};
+export const WithMaxLength = {
+    args: {
+        value: 'Value',
+        maxLength: 10,
+    },
+};
+export const Full = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        maxLength: 10,
+    },
+};
+export const Error = {
+    args: {
+        label: 'Label',
+        value: 'Value',
+        helperText: 'Helper text',
+        error: true,
+    },
+};

package/dist/Shared/{RoundedTimePicker/RoundedTimePicker.d.ts → ErkTimePicker/ErkTimePicker.d.ts}

@@ -1,26 +1,16 @@
-import React from 'react';
-import { SelectProps } from '@material-ui/core/Select';
-import { SelectorStyleProps } from '../RoundedSelect/RoundedSelect';
+import { SelectorStyleProps } from '../ErkSelect/ErkSelect';
 import { Time } from '../../@Types/Time';
-interface RoundedTimePickerProps extends Omit<SelectProps, 'color' | 'onChange'>, SelectorStyleProps {
+import { SelectProps as MuiSelectProps } from '@mui/material';
+import React from 'react';
+interface ErkTimePickerProps extends Omit<MuiSelectProps, 'color' | 'onChange'>, SelectorStyleProps {
     /** Currently selected value */
     value: Time | undefined;
     /** function called when value changes */
     onChange?: (time: Time) => void;
     /** Strig to place in the label */
     label: string;
-    /** Minimum width in px of the component */
-    minWidth?: number;
     /** The helper Text to display */
     helperText?: string | null;
-    /** The color of the outline when selected and hovered on */
-    focusColor?: string;
-    /** If outline should be error color */
-    highlightError?: boolean;
-    /** the margin around the selector */
-    containerMargin?: string;
-    /** The icon to display */
-    iconComponent?: any;
     pickDays?: boolean;
     minDays?: number;
     maxDays?: number;
@@ -35,7 +25,7 @@ interface RoundedTimePickerProps extends Omit<SelectProps, 'color' | 'onChange'>
 /**
  * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
  */
-declare class RoundedTimePicker extends React.Component<RoundedTimePickerProps> {
+declare class ErkTimePicker extends React.Component<ErkTimePickerProps> {
     render(): JSX.Element;
 }
-export default RoundedTimePicker;
+export default ErkTimePicker;

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.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import IconTypes from '../../constants/IconTypes';
 export interface InputIconProps {
-    icon: string;
+    icon: IconTypes;
     fill?: string;
 }
 declare function InputIcon({ icon, fill, ...others }: InputIconProps): JSX.Element;

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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface LoaderProps {
     /** The color of the loader */
     color?: string;

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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface NavBarProps {
     /** Url of the current logo of the current organization */
     logo?: string;

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.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="react" />
+import { RefCallBack } from 'react-hook-form';
 import { RatingTypes } from '../../constants/FormStepTypes';
 export interface RatingProps {
     disabled?: boolean;
     isMobile?: boolean;
-    value: any;
+    value?: number | null;
     onChange: (value: number | null) => void;
-    inputRef: any;
-    focusColor: string;
-    unSelectedColor: string;
+    inputRef?: React.RefObject<HTMLInputElement> | RefCallBack;
 }
 declare function Rating({ type, ...others }: RatingProps & {
     type: RatingTypes;

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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RatingProps } from '../Rating';
-declare function LikeRating({ disabled, inputRef, value, onChange, focusColor, unSelectedColor, }: RatingProps): JSX.Element;
+declare function LikeRating({ disabled, inputRef, value, onChange }: RatingProps): JSX.Element;
 export default LikeRating;