@arquimedes.co/eureka-forms 1.9.67-test → 1.9.68

package/dist/@Types/Form.d.ts

@@ -43,6 +43,7 @@ export type FormStyle = MaterialStyle;
 export type StyleKeys = keyof Omit<FormStyle, 'type'>;
 export interface MaterialStyle {
     type: FormStyleTypes.MATERIAL;
+    standAloneBackgroundColor: string;
     backgroundColor: string;
     primaryColor: string;
     secondaryColor: string;

package/dist/FormComponents/Form/Form.js

@@ -48,10 +48,10 @@ export var getLocale = function () {
             navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
 };
 function FormComponent(_a) {
-    var _b, _c, _d, _e, _f, _g;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
     var form = _a.form, isWidget = _a.isWidget, internal = _a.internal, postview = _a.postview, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "isWidget", "internal", "postview", "organization", "containerRef"]);
-    var _h = useState(false), loaded = _h[0], setLoaded = _h[1];
-    var _j = useState(undefined), widthStats = _j[0], setWidthStats = _j[1];
+    var _k = useState(false), loaded = _k[0], setLoaded = _k[1];
+    var _l = useState(undefined), widthStats = _l[0], setWidthStats = _l[1];
     /** Calcs the currentBreakPoint and if is mobile */
     var handleResize = function () {
         var _a;
@@ -100,12 +100,14 @@ function FormComponent(_a) {
     }
     else if (organization && widthStats !== undefined) {
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_d = organization.styles) === null || _d === void 0 ? void 0 : _d.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_d = organization.styles) === null || _d === void 0 ? void 0 : _d.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_f = (_e = form.style) === null || _e === void 0 ? void 0 : _e.standAloneBackgroundColor) !== null && _f !== void 0 ? _f : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
                             ? styles.fullScreenStandAloneForm
                             : styles.standAloneFormCard, style: {
-                            backgroundColor: (_f = (_e = form.style) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : InternalFormStyle.backgroundColor,
+                            backgroundColor: (_h = (_g = form.style) === null || _g === void 0 ? void 0 : _g.backgroundColor) !== null && _h !== void 0 ? _h : InternalFormStyle.backgroundColor,
                             visibility: loaded ? 'visible' : 'hidden',
-                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: (_g = form.style) !== null && _g !== void 0 ? _g : InternalFormStyle, organization: organization, handleLoaded: function () {
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: (_j = form.style) !== null && _j !== void 0 ? _j : InternalFormStyle, organization: organization, handleLoaded: function () {
                                 setLoaded(true);
                             } })) })) }))] }));
     }

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -44,6 +44,6 @@ function IncidentComponent(_a) {
                         if (others.editable && !others.postview) {
                             handleDelete();
                         }
-                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, level: level + 1 })), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, level: level + 1 })), _jsx(TextAreaStep, __assign({}, others, { form: form, backgroundColor: 'transparent', formStyle: formStyle, step: commentStep, maxLength: 200, level: level + 1 }))] })) })));
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, level: level + 1 })), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, level: level + 1 })), _jsx(TextAreaStep, __assign({}, others, { form: form, formStyle: formStyle, step: commentStep, maxLength: 200, level: level + 1 }))] })) })));
 }
 export default IncidentComponent;

package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -73,7 +73,7 @@ function ClassifierSelector(_a) {
                     (!postview && editable && step.required)
                     ? '55px'
                     : '43px',
-            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label ? step.label : classifier.name, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
                     onChange(value);
                     sizeChange();
                 }, getOptionSelected: function (option, value) {

package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js

@@ -50,7 +50,7 @@ function Selector(_a) {
                     (!postview && editable && step.required)
                     ? '55px'
                     : '43px',
-            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: step.options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+            } }, { children: _jsx(RoundedSmartSelect, { value: value, onBlur: onBlur, disabled: false, loading: false, options: step.options, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_a = formStyle.stepBackgroundColor) !== null && _a !== void 0 ? _a : 'white', label: step.label, required: step.required, height: '31px', searchable: step.searchable, icon: undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
                     onChange(value);
                 }, getOptionSelected: function (option, value) {
                     return (option === null || option === void 0 ? void 0 : option.value) === (value === null || value === void 0 ? void 0 : value.value);

package/dist/FormComponents/Step/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js

@@ -199,7 +199,7 @@ function SmartSelect(_a) {
                         if (options === undefined && !(!editable || postview)) {
                             setLoading(true);
                         }
-                    }, disabled: options === null, loading: loading, options: options !== null && options !== void 0 ? options : undefined, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: "transparent", innerBackgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
+                    }, disabled: options === null, loading: loading, options: options !== null && options !== void 0 ? options : undefined, inputRef: inputRef, cantEdit: !editable || postview, fullWidth: true, backgroundColor: (_d = formStyle.stepBackgroundColor) !== null && _d !== void 0 ? _d : 'white', label: step.label, required: step.required, height: '31px', changeListener: changeListener, searchable: step.searchable, icon: step.showIcon ? icon : undefined, helperTextColor: formStyle.descriptionTextColor, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, errorColor: formStyle.errorColor, color: formStyle.textColor, containerMargin: "0px", handleUpdate: function (value) {
                         var _a;
                         if (dependencyStore[step.id] !== undefined) {
                             setDependencyStore(__assign(__assign({}, dependencyStore), (_a = {}, _a[step.id] = value !== null && value !== void 0 ? value : null, _a)));

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts

@@ -7,7 +7,7 @@ export interface Payload {
     text: string;
     draft: any;
 }
-declare function TextAreaStep({ step, errors, partial, control, editable, postview, formStyle, maxLength, originalValues, backgroundColor, }: TextAreaStepProps): JSX.Element;
+declare function TextAreaStep({ step, errors, partial, control, editable, postview, formStyle, maxLength, originalValues, }: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;
 export declare function stringToDraft(text: string): RawDraftContentState;
 export declare const getRawText: (draft?: RawDraftContentState, text?: string) => RawDraftContentState;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -31,7 +31,7 @@ import { EditorState } from 'draft-js';
 import React, { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var step = _a.step, errors = _a.errors, partial = _a.partial, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues, backgroundColor = _a.backgroundColor;
+    var step = _a.step, errors = _a.errors, partial = _a.partial, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues;
     var _b = useState(false), hovering = _b[0], setHovering = _b[1];
     var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
@@ -159,7 +159,7 @@ function TextAreaStep(_a) {
                 }, shouldUnregister: true, render: function (_a) {
                     var _b;
                     var _c = _a.field, ref = _c.ref, field = __rest(_c, ["ref"]);
-                    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsxs(React.Fragment, { children: [_jsx("div", __assign({ className: styles.erkTextArea }, { children: _jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: postview && partial ? undefined : 4, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                                         ? errors[step.id].message
                                         : (_b = step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!errors[step.id] })) })), postview && (_jsxs("div", __assign({ className: styles.print }, { children: [_jsxs("div", { children: [step.label, ":"] }), _jsx("p", __assign({ className: styles.printContainer, style: {
                                             backgroundColor: formStyle.stepBackgroundColor,

package/dist/FormComponents/Step/TextAreaStep/TextAreaStep.d.ts

@@ -5,7 +5,6 @@ export interface TextAreaStepProps extends StepProps {
     /** The TextAreaStep to display */
     step: TextArea;
     maxLength?: number;
-    backgroundColor?: string;
 }
 declare function TextAreaStep(props: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;

package/dist/FormComponents/Step/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -68,7 +68,7 @@ function TextInputStep(_a) {
                             }, 1000));
                         }
                         field.onChange(value);
-                    }, "data-testid": step.id, label: step.label, inputRef: ref, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
+                    }, "data-testid": step.id, label: step.label, inputRef: ref, cantEdit: !editable || postview, required: step.required, fontWeight: 400, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.stepBackgroundColor, helperText: errors[step.id]
                         ? errors[step.id].message
                         : step.description, helperTextColor: formStyle.descriptionTextColor, error: !!errors[step.id], icon: step.showIcon ? icon : undefined })));
             } }) })));

package/dist/constants/InternalFormStyle.js

@@ -1,6 +1,7 @@
 import { FormStyleTypes } from './FormStepTypes';
 var InternalFormStyle = {
     type: FormStyleTypes.MATERIAL,
+    standAloneBackgroundColor: '#ffffff',
     backgroundColor: '#ffffff',
     stepBackgroundColor: '#ffffff',
     primaryColor: '#3d5a7f',

package/dist/shared/RoundedDatePicker/RoundedDatePicker.d.ts

@@ -18,8 +18,6 @@ interface StyleProps {
     contrastColor?: string;
     /** The accent color of the input */
     accentColor?: string;
-    /** The color of the inner input */
-    innerBackgroundColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
     /** If it should display the timePicker */

package/dist/shared/RoundedDatePicker/RoundedDatePicker.js

@@ -46,7 +46,6 @@ var useDatePickerStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
             borderRadius: props.borderRadius,
-            backgroundColor: props.backgroundColor,
             cursor: props.cantEdit ? 'default' : 'pointer',
             height: props.height,
             '& input, textarea': {
@@ -58,7 +57,7 @@ var useDatePickerStyles = function (props) {
                 '&::placeholder': {
                     fontSize: props.fontSize,
                 },
-                backgroundColor: props.innerBackgroundColor,
+                backgroundColor: props.backgroundColor,
                 borderRadius: props.borderRadius,
             },
             '& .EF-MuiOutlinedInput-notchedOutline': {
@@ -108,6 +107,7 @@ var useDatePickerLabelStyles = function (props) {
             marginTop: props.height != '40px' ? '-4px' : '0px',
             textOverflow: 'ellipsis',
             fontSize: props.fontSize,
+            color: props.textColor + '8a',
             '&.Mui-focused': {
                 color: props.focusColor,
             },
@@ -215,7 +215,7 @@ var useDatePickerDialogStyles = function (props) {
     }); });
 };
 function CustomDatePicker(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? '#98c1d9' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.contrastColor, contrastColor = _g === void 0 ? '#ee6c4d' : _g, _h = _a.accentColor, accentColor = _h === void 0 ? '#293241' : _h, _j = _a.errorColor, errorColor = _j === void 0 ? '#cc2936' : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.padding, padding = _l === void 0 ? '6px 0px 6px 12px' : _l, _m = _a.fontSize, fontSize = _m === void 0 ? '1rem' : _m, _o = _a.shrunkenFontSize, shrunkenFontSize = _o === void 0 ? '1rem' : _o, _p = _a.helperTextColor, helperTextColor = _p === void 0 ? '#989898' : _p, _q = _a.fontWeight, fontWeight = _q === void 0 ? '300' : _q, _r = _a.height, height = _r === void 0 ? '31px' : _r, _s = _a.cantEdit, cantEdit = _s === void 0 ? false : _s, _t = _a.pickTime, pickTime = _t === void 0 ? false : _t, onChange = _a.onChange, required = _a.required, others = __rest(_a, ["focusColor", "secondaryColor", "outlineColor", "backgroundColor", "textColor", "contrastColor", "accentColor", "errorColor", "borderRadius", "padding", "fontSize", "shrunkenFontSize", "helperTextColor", "fontWeight", "height", "cantEdit", "pickTime", "onChange", "required"]);
     var classes = useDatePickerStyles({
         padding: padding,
         cantEdit: cantEdit,
@@ -224,7 +224,6 @@ function CustomDatePicker(_a) {
         hoverColor: focusColor + '0a',
         outlineColor: outlineColor,
         errorColor: errorColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
         fontSize: fontSize,
@@ -241,7 +240,6 @@ function CustomDatePicker(_a) {
         hoverColor: focusColor + '0a',
         errorColor: errorColor,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
         fontSize: fontSize,
@@ -261,7 +259,6 @@ function CustomDatePicker(_a) {
         hoverColor: focusColor + '0a',
         errorColor: errorColor,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
         fontSize: fontSize,
@@ -276,7 +273,6 @@ function CustomDatePicker(_a) {
         focusColor: focusColor,
         errorColor: errorColor,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
         fontSize: fontSize,

package/dist/shared/RoundedSelect/RoundedSelect.d.ts

@@ -19,8 +19,6 @@ interface StyleProps {
     fontSize?: string;
     /** The weight of the font of the value and the placeholder */
     fontWeight?: any;
-    /** The color of the inner input */
-    innerBackgroundColor?: string;
     /** If input is readOnly */
     readOnly?: boolean;
     /** The color of the helper text when not error */
@@ -58,8 +56,6 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
     iconComponent?: any;
     /** the components ref */
     ref?: any;
-    /** The color of the inner input */
-    innerBackgroundColor?: string;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -62,7 +62,7 @@ var useOutlinedInputStyles = function (props) {
             cursor: props.cantEdit ? 'default' : 'default',
             height: props.height,
             borderRadius: props.borderRadius,
-            backgroundColor: props.innerBackgroundColor,
+            backgroundColor: props.backgroundColor,
             fontSize: props.fontSize,
             '& $notchedOutline': {
                 borderColor: props.outlineColor,
@@ -92,6 +92,9 @@ var useOutlinedInputStyles = function (props) {
             '&$focused $notchedOutline': {
                 borderColor: props.focusColor,
             },
+            '& .EF-MuiSelect-icon': {
+                color: props.color + '8a',
+            },
             '& .EF-MuiSelect-icon.Mui-disabled': {
                 color: props.outlineColor,
             },
@@ -113,6 +116,7 @@ var useLabelInputStyles = function (props) {
             color: props.focusColor + ' !important',
         },
         root: {
+            color: props.color + '8a',
             fontWeight: props.fontWeight,
             whiteSpace: 'nowrap',
             overflow: 'hidden',
@@ -143,7 +147,7 @@ var useHelperTextStyles = function (props) {
     }); });
 };
 function CustomSelect(_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, innerBackgroundColor = _a.innerBackgroundColor, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 14 : _l, _m = _a.cantEdit, cantEdit = _m === void 0 ? false : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.containerMargin, containerMargin = _p === void 0 ? '8px' : _p, _q = _a.height, height = _q === void 0 ? '40px' : _q, _r = _a.fontSize, fontSize = _r === void 0 ? '1rem' : _r, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "paddingLeft", "cantEdit", "showIcon", "containerMargin", "height", "fontSize", "required", "iconComponent", "error"]);
+    var children = _a.children, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _c = _a.color, color = _c === void 0 ? '#293241' : _c, _d = _a.errorColor, errorColor = _d === void 0 ? '#cc2936' : _d, _e = _a.focusColor, focusColor = _e === void 0 ? '#3d5a7f' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 14 : _l, _m = _a.cantEdit, cantEdit = _m === void 0 ? false : _m, _o = _a.showIcon, showIcon = _o === void 0 ? true : _o, _p = _a.containerMargin, containerMargin = _p === void 0 ? '8px' : _p, _q = _a.height, height = _q === void 0 ? '40px' : _q, _r = _a.fontSize, fontSize = _r === void 0 ? '1rem' : _r, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "paddingLeft", "cantEdit", "showIcon", "containerMargin", "height", "fontSize", "required", "iconComponent", "error"]);
     var styleProps = {
         color: color,
         height: height,
@@ -158,7 +162,6 @@ function CustomSelect(_a) {
         helperTextColor: helperTextColor,
         backgroundColor: backgroundColor,
         showIcon: showIcon && iconComponent !== undefined,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
     };
     var classes = useStyles();
     var outlinedInputClasses = useOutlinedInputStyles(styleProps)();

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.d.ts

@@ -17,8 +17,6 @@ interface StyleProps {
     color?: string;
     /** The fontsize of the content */
     fontSize?: string;
-    /** The color of the inner input */
-    innerBackgroundColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
     /** If input is readOnly */
@@ -64,5 +62,5 @@ export interface RoundedSmartSelectProps extends Omit<TextFieldProps, 'color' |
     changeListener?: (value: any) => void;
     onFocus?: any;
 }
-export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, innerBackgroundColor, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, searchable, containerMargin, showIcon, inputRef, disabled, creatable, onBlur, name, onFocus, }: RoundedSmartSelectProps): JSX.Element;
+export default function RoundedSmartSelect({ options, value, handleUpdate, label, getValueString, color, errorColor, focusColor, helperTextColor, outlineColor, backgroundColor, cantEdit, loading, height, fontSize, required, changeListener, error, getOptionSelected, helperText, readOnly, borderRadius, fontWeight, icon, searchable, containerMargin, showIcon, inputRef, disabled, creatable, onBlur, name, onFocus, }: RoundedSmartSelectProps): JSX.Element;
 export {};

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -33,7 +33,6 @@ var useTextfieldStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
             borderRadius: props.borderRadius,
-            backgroundColor: props.backgroundColor,
             '& input, textarea': {
                 cursor: props.cantEdit ? 'default' : 'text',
                 fontWeight: props.fontWeight,
@@ -42,7 +41,7 @@ var useTextfieldStyles = function (props) {
                 '&::placeholder': {
                     fontSize: props.fontSize,
                 },
-                backgroundColor: props.innerBackgroundColor,
+                backgroundColor: props.backgroundColor,
                 borderRadius: props.borderRadius,
                 height: props.height,
                 marginTop: '0px !important',
@@ -55,6 +54,7 @@ var useTextfieldStyles = function (props) {
             '& label': {
                 marginTop: '-4px',
                 fontSize: props.fontSize,
+                color: props.color + '8a',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -112,8 +112,9 @@ var useTextfieldStyles = function (props) {
             '& .EF-MuiOutlinedInput-notchedOutline': {
                 borderColor: '#0000003b',
             },
-            '.EF-MuiAutocomplete-popupIndicator': {
+            '& .EF-MuiAutocomplete-popupIndicator': {
                 padding: 0,
+                color: props.color + '8a',
             },
             '& .EF-MuiAutocomplete-popupIndicatorOpen': {
                 transform: props.showIcon ? 'none' : 'rotate(180deg)',
@@ -123,19 +124,19 @@ var useTextfieldStyles = function (props) {
             },
             '& .EF-MuiAutocomplete-endAdornment': {
                 top: 'calc(50% - 13px)',
+                color: props.color + '8a',
             },
         },
     }); });
 };
 export default function RoundedSmartSelect(_a) {
-    var options = _a.options, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, _c = _a.getValueString, getValueString = _c === void 0 ? function (value) { return value.value; } : _c, _d = _a.color, color = _d === void 0 ? '#293241' : _d, _e = _a.errorColor, errorColor = _e === void 0 ? '#cc2936' : _e, _f = _a.focusColor, focusColor = _f === void 0 ? '#3d5a7f' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.outlineColor, outlineColor = _h === void 0 ? '#b8b8b8' : _h, _j = _a.backgroundColor, backgroundColor = _j === void 0 ? '#ffffff' : _j, _k = _a.cantEdit, cantEdit = _k === void 0 ? false : _k, _l = _a.loading, loading = _l === void 0 ? false : _l, _m = _a.height, height = _m === void 0 ? '31px' : _m, _o = _a.fontSize, fontSize = _o === void 0 ? '1rem' : _o, required = _a.required, changeListener = _a.changeListener, error = _a.error, innerBackgroundColor = _a.innerBackgroundColor, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.borderRadius, borderRadius = _q === void 0 ? 10 : _q, _r = _a.fontWeight, fontWeight = _r === void 0 ? '400' : _r, icon = _a.icon, _s = _a.searchable, searchable = _s === void 0 ? false : _s, _t = _a.containerMargin, containerMargin = _t === void 0 ? '0px' : _t, _u = _a.showIcon, showIcon = _u === void 0 ? true : _u, inputRef = _a.inputRef, disabled = _a.disabled, _v = _a.creatable, creatable = _v === void 0 ? false : _v, onBlur = _a.onBlur, name = _a.name, onFocus = _a.onFocus;
+    var options = _a.options, _b = _a.value, value = _b === void 0 ? '' : _b, handleUpdate = _a.handleUpdate, label = _a.label, _c = _a.getValueString, getValueString = _c === void 0 ? function (value) { return value.value; } : _c, _d = _a.color, color = _d === void 0 ? '#293241' : _d, _e = _a.errorColor, errorColor = _e === void 0 ? '#cc2936' : _e, _f = _a.focusColor, focusColor = _f === void 0 ? '#3d5a7f' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.outlineColor, outlineColor = _h === void 0 ? '#b8b8b8' : _h, _j = _a.backgroundColor, backgroundColor = _j === void 0 ? '#ffffff' : _j, _k = _a.cantEdit, cantEdit = _k === void 0 ? false : _k, _l = _a.loading, loading = _l === void 0 ? false : _l, _m = _a.height, height = _m === void 0 ? '31px' : _m, _o = _a.fontSize, fontSize = _o === void 0 ? '1rem' : _o, required = _a.required, changeListener = _a.changeListener, error = _a.error, getOptionSelected = _a.getOptionSelected, helperText = _a.helperText, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.borderRadius, borderRadius = _q === void 0 ? 10 : _q, _r = _a.fontWeight, fontWeight = _r === void 0 ? '400' : _r, icon = _a.icon, _s = _a.searchable, searchable = _s === void 0 ? false : _s, _t = _a.containerMargin, containerMargin = _t === void 0 ? '0px' : _t, _u = _a.showIcon, showIcon = _u === void 0 ? true : _u, inputRef = _a.inputRef, disabled = _a.disabled, _v = _a.creatable, creatable = _v === void 0 ? false : _v, onBlur = _a.onBlur, name = _a.name, onFocus = _a.onFocus;
     var props = {
         color: color,
         height: height,
         errorColor: errorColor,
         focusColor: focusColor,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         helperTextColor: helperTextColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
@@ -208,7 +209,7 @@ export default function RoundedSmartSelect(_a) {
                 }));
             }, onOpen: function () {
                 //Show loading icon if loading
-            }, value: getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, innerBackgroundColor: innerBackgroundColor, cantEdit: cantEdit, disabled: cantEdit || disabled, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: error, iconComponent: loading
+            }, value: getValueString(value), color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, backgroundColor: backgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, disabled: cantEdit || disabled, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, fontSize: fontSize, error: error, iconComponent: loading
                 ? function () { return (_jsx("div", __assign({ style: {
                         marginTop: 3,
                         marginRight: 8,

package/dist/shared/RoundedTextField/RoundedTextField.d.ts

@@ -11,8 +11,6 @@ interface StyleProps {
     outlineColor?: string;
     /** The backgroundColor of the input */
     backgroundColor?: string;
-    /** The color of the inner input */
-    innerBackgroundColor?: string;
     /** The borderRadius of the input */
     borderRadius?: number;
     /** If input is readOnly */

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -43,7 +43,6 @@ var useTextfieldStyles = function (props) {
     return makeStyles(function () { return ({
         root: {
             borderRadius: props.borderRadius,
-            backgroundColor: props.backgroundColor,
             '& input, textarea': {
                 cursor: props.cantEdit ? 'default' : 'text',
                 padding: props.multiline ? props.padding : props.padding,
@@ -53,12 +52,13 @@ var useTextfieldStyles = function (props) {
                 '&::placeholder': {
                     fontSize: props.fontSize,
                 },
-                backgroundColor: props.innerBackgroundColor,
+                backgroundColor: props.backgroundColor,
                 borderRadius: props.borderRadius,
             },
             '& label': {
                 marginTop: props.multiline ? '0px' : '-4px',
                 fontSize: props.fontSize,
+                color: props.textColor + '8a',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -110,20 +110,19 @@ var useTextfieldStyles = function (props) {
             },
             '& .EF-MuiOutlinedInput-multiline': {
                 padding: 0,
-                backgroundColor: props.innerBackgroundColor,
+                backgroundColor: props.backgroundColor,
             },
         },
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'transparent' : _e, _f = _a.innerBackgroundColor, innerBackgroundColor = _f === void 0 ? 'white' : _f, _g = _a.textColor, textColor = _g === void 0 ? '#293241' : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.borderRadius, borderRadius = _j === void 0 ? 10 : _j, _k = _a.padding, padding = _k === void 0 ? '6px 12px' : _k, _l = _a.fontSize, fontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, maxLength = _a.maxLength, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "maxLength", "value", "icon"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.errorColor, errorColor = _l === void 0 ? '#cc2936' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.multiline, multiline = _o === void 0 ? false : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, maxLength = _a.maxLength, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "maxLength", "value", "icon"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
         errorColor: errorColor,
         focusColor: focusColor,
         outlineColor: outlineColor,
-        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
         helperTextColor: helperTextColor,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.9.67-test",
+    "version": "1.9.68",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",