@widergy/energy-ui 3.172.1 → 3.172.3

package/dist/esm/components/UTPhoneInput/versions/V0/index.js

@@ -1,290 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { PureComponent } from 'react';
-import { bool, string, objectOf, shape, object, arrayOf } from 'prop-types';
-import TextField from '@material-ui/core/TextField';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import { shouldShowErrors } from '@widergy/web-utils/lib/form';
-import { isEmpty } from '@widergy/web-utils/lib/array';
-import UTTooltip from '../../../UTTooltip';
-import UTLabel from '../../../UTLabel';
-import WithTheme from '../../../WithTheme';
-import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
-import { mergeClasses } from '../../../../utils/classesUtils';
-import { retrieveStyle, retrieveMuiTheme } from './theme';
-import { AREA_CODES, AREA_CODE_PLACEHOLDER, AREA_CODE_LABEL } from './constants';
-import styles from './styles.module.scss';
-class UTPhoneInput extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "cleanField", () => this.setState({
-      areaCode: '',
-      phoneNumber: ''
-    }));
-    _defineProperty(this, "handleInitializeField", () => {
-      let areaCode;
-      let phoneNumber;
-      const {
-        value
-      } = this.props.input;
-      if (typeof value === 'object' && this.props.childKeys) {
-        areaCode = value[this.props.childKeys[0]];
-        areaCode = typeof areaCode === 'number' ? areaCode.toString() : areaCode;
-        phoneNumber = value[this.props.childKeys[1]];
-        phoneNumber = typeof phoneNumber === 'number' ? phoneNumber.toString() : phoneNumber;
-      } else {
-        const stringValue = value.toString();
-        areaCode = stringValue.slice(0, stringValue.indexOf('-'));
-        phoneNumber = stringValue.slice(stringValue.indexOf('-') + 1);
-      }
-      this.setState({
-        initialized: true
-      });
-      this.setState({
-        areaCode,
-        phoneNumber
-      }, () => this.handleValidateAreaCode(this.state.areaCode));
-    });
-    _defineProperty(this, "handleValidateAreaCode", areaCode => {
-      if (areaCode.slice(0, 1) === '0') {
-        this.setState({
-          error: this.props.errors.codeWithZero,
-          city: undefined
-        });
-      } else {
-        const code = AREA_CODES.find(element => element.code === areaCode);
-        const error = areaCode.length && !code && this.props.errors.invalidCode;
-        this.setState({
-          error,
-          city: code && code.city
-        }, () => {
-          if (this.state.city && !error) this.handleValidatePhoneNumber(this.state.phoneNumber);
-        });
-      }
-    });
-    _defineProperty(this, "handleCleanPhoneNumber", () => this.setState({
-      phoneNumber: ''
-    }));
-    _defineProperty(this, "handleValidatePhoneNumber", phoneNumber => {
-      if (phoneNumber.slice(0, 1) === '0') {
-        this.setState({
-          error: this.props.errors.phoneWithZero
-        });
-      } else if (phoneNumber.slice(0, 2) === '15') {
-        this.setState({
-          error: this.props.errors.phoneWithFifteen
-        });
-      } else if (phoneNumber.length === 0) {
-        this.setState({
-          error: this.props.errors.numberNotEmpty
-        });
-      } else this.setState({
-        error: undefined
-      });
-    });
-    _defineProperty(this, "handleChangeAreaCode", event => {
-      this.setState({
-        initialized: true
-      });
-      const areaCode = event.target.value.slice(0, 4);
-      if (!areaCode) {
-        this.setState({
-          areaCode
-        }, () => {
-          this.handleChange("".concat(this.state.areaCode).concat(this.state.phoneNumber));
-        });
-      } else {
-        this.setState({
-          areaCode
-        }, () => {
-          this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
-        });
-      }
-      this.handleCleanPhoneNumber();
-      this.handleValidateAreaCode(areaCode);
-    });
-    _defineProperty(this, "handleChangePhone", event => {
-      const phoneNumber = event.target.value.slice(0, 10 - this.state.areaCode.length);
-      this.setState({
-        phoneNumber
-      }, () => {
-        this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
-      });
-      this.handleValidatePhoneNumber(phoneNumber);
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const regexp = /[0-9]+/g;
-      if (!regexp.test(event.key)) {
-        event.preventDefault();
-      }
-    });
-    _defineProperty(this, "handleChange", initialValue => {
-      let value = initialValue;
-      const {
-        childKeys,
-        field,
-        input
-      } = this.props;
-      if (childKeys) {
-        const splittedPhone = value.split('-');
-        value = {
-          ...(!isEmpty(splittedPhone[0]) && {
-            [childKeys[0]]: splittedPhone[0]
-          }),
-          ...(!isEmpty(splittedPhone[1]) && {
-            [childKeys[1]]: splittedPhone[1]
-          })
-        };
-      } else if (field.configuration && field.configuration.without_dash) {
-        value = initialValue.replace('-', '');
-      }
-      input.onChange(value);
-    });
-    this.state = {
-      areaCode: '',
-      phoneNumber: '',
-      city: null,
-      initialized: false
-    };
-  }
-  componentDidMount() {
-    if (this.props.input && this.props.input.value && !this.state.initialized) {
-      this.handleInitializeField();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.input && this.props.input.value && !this.state.areaCode && !this.state.initialized) {
-      this.handleInitializeField();
-    }
-    if (this.state.initialized && prevProps.input && prevProps.input.value && this.props.input && (!this.props.input.value || this.props.input.value.length === 0)) {
-      this.cleanField();
-    }
-  }
-  render() {
-    var _field$configuration, _field$configuration2;
-    const {
-      areaCodeDataTestId,
-      areaCodeFieldProps,
-      phoneNumberFieldProps,
-      field,
-      input,
-      disabled,
-      meta,
-      classes: themeClasses = {},
-      phoneNumberDataTestId,
-      placeholder,
-      label,
-      variant,
-      inputClassName,
-      classNames
-    } = this.props;
-    const {
-      areaCode,
-      city,
-      error,
-      phoneNumber
-    } = this.state;
-    const classes = mergeClasses(themeClasses, classNames);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles.container, " ").concat(this.props.style)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.inputContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles.areaCode, " ").concat(styles["".concat(variant, "AreaCode")], " ").concat(classes.areaCodeContainer)
-    }, /*#__PURE__*/React.createElement(TextField, _extends({
-      name: "area_code",
-      type: "tel",
-      label: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.area_code_label) || AREA_CODE_LABEL,
-      placeholder: ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.area_code_placeholder) || AREA_CODE_PLACEHOLDER,
-      autoComplete: "off",
-      fullWidth: true,
-      margin: "none",
-      onKeyPress: this.handleKeyPress,
-      onFocus: this.handleFocus,
-      onChange: this.handleChangeAreaCode,
-      onBlur: this.handleBlur,
-      value: areaCode,
-      error: Boolean(error || shouldShowErrors(meta)),
-      disabled: disabled,
-      variant: variant,
-      InputProps: {
-        classes: {
-          input: inputClassName
-        },
-        inputProps: {
-          'data-testid': areaCodeDataTestId,
-          'data-keyboard': input !== null && input !== void 0 && input.name ? "areaCode-".concat(input === null || input === void 0 ? void 0 : input.name) : null
-        }
-      }
-    }, areaCodeFieldProps)), /*#__PURE__*/React.createElement(UTTooltip, {
-      stringContentClassName: classes.tooltip,
-      content: city || ' '
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(styles.icon, "  ").concat(styles["".concat(variant, "Icon")], " ").concat(city && styles.showCheckedIcon)
-    }, /*#__PURE__*/React.createElement(CheckCircleOutline, {
-      tabIndex: "-1",
-      className: "".concat(styles.checkedIcon, " ").concat(classes.areaCodeIcon)
-    })))), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles.phoneNumber, " ").concat(classes.phoneNumberContainer)
-    }, /*#__PURE__*/React.createElement(TextField, _extends({
-      name: "phone_number",
-      type: "tel",
-      margin: "none",
-      placeholder: placeholder,
-      label: label,
-      onKeyPress: this.handleKeyPress,
-      autoComplete: "off",
-      fullWidth: true,
-      error: Boolean(error || shouldShowErrors(meta)),
-      onFocus: input.onFocus,
-      onChange: this.handleChangePhone,
-      disabled: !city || disabled,
-      value: phoneNumber,
-      variant: variant,
-      InputProps: {
-        classes: {
-          input: inputClassName
-        },
-        inputProps: {
-          'data-testid': phoneNumberDataTestId,
-          'data-keyboard': input !== null && input !== void 0 && input.name ? "phoneNumber-".concat(input === null || input === void 0 ? void 0 : input.name) : null
-        }
-      }
-    }, phoneNumberFieldProps)))), (error || shouldShowErrors(meta)) && /*#__PURE__*/React.createElement(UTLabel, {
-      colorTheme: "error",
-      variant: "small"
-    }, error || meta.error));
-  }
-}
-UTPhoneInput.propTypes = {
-  input: inputPropTypes,
-  meta: metaPropTypes,
-  placeholder: string,
-  disabled: bool,
-  label: string,
-  classes: objectOf(string),
-  classNames: objectOf(string),
-  errors: shape({
-    codeWithZero: string,
-    invalidCode: string,
-    phoneWithFifteen: string,
-    phoneWithZero: string,
-    numberNotEmpty: string
-  }),
-  childKeys: arrayOf(string),
-  field: fieldType,
-  variant: string,
-  inputClassName: string,
-  areaCodeFieldProps: object,
-  phoneNumberFieldProps: object,
-  areaCodeDataTestId: string,
-  phoneNumberDataTestId: string
-};
-UTPhoneInput.defaultProps = {
-  classes: {},
-  areaCodeFieldProps: {},
-  phoneNumberFieldProps: {}
-};
-export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTPhoneInput);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React,{PureComponent}from"react";import{bool,string,objectOf,shape,object,arrayOf}from"prop-types";import TextField from"@material-ui/core/TextField";import CheckCircleOutline from"@material-ui/icons/CheckCircleOutline";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{isEmpty}from"@widergy/web-utils/lib/array";import UTTooltip from"../../../UTTooltip";import UTLabel from"../../../UTLabel";import WithTheme from"../../../WithTheme";import{inputPropTypes,metaPropTypes,fieldType}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{AREA_CODES,AREA_CODE_PLACEHOLDER,AREA_CODE_LABEL}from"./constants";import styles from"./styles.module.scss";class UTPhoneInput extends PureComponent{constructor(props){super(props),_defineProperty(this,"cleanField",()=>this.setState({areaCode:"",phoneNumber:""})),_defineProperty(this,"handleInitializeField",()=>{let areaCode,phoneNumber;const{value:value}=this.props.input;if("object"==typeof value&&this.props.childKeys)areaCode=value[this.props.childKeys[0]],areaCode="number"==typeof areaCode?areaCode.toString():areaCode,phoneNumber=value[this.props.childKeys[1]],phoneNumber="number"==typeof phoneNumber?phoneNumber.toString():phoneNumber;else{const stringValue=value.toString();areaCode=stringValue.slice(0,stringValue.indexOf("-")),phoneNumber=stringValue.slice(stringValue.indexOf("-")+1)}this.setState({initialized:!0}),this.setState({areaCode:areaCode,phoneNumber:phoneNumber},()=>this.handleValidateAreaCode(this.state.areaCode))}),_defineProperty(this,"handleValidateAreaCode",areaCode=>{if("0"===areaCode.slice(0,1))this.setState({error:this.props.errors.codeWithZero,city:void 0});else{const code=AREA_CODES.find(element=>element.code===areaCode),error=areaCode.length&&!code&&this.props.errors.invalidCode;this.setState({error:error,city:code&&code.city},()=>{this.state.city&&!error&&this.handleValidatePhoneNumber(this.state.phoneNumber)})}}),_defineProperty(this,"handleCleanPhoneNumber",()=>this.setState({phoneNumber:""})),_defineProperty(this,"handleValidatePhoneNumber",phoneNumber=>{"0"===phoneNumber.slice(0,1)?this.setState({error:this.props.errors.phoneWithZero}):"15"===phoneNumber.slice(0,2)?this.setState({error:this.props.errors.phoneWithFifteen}):0===phoneNumber.length?this.setState({error:this.props.errors.numberNotEmpty}):this.setState({error:void 0})}),_defineProperty(this,"handleChangeAreaCode",event=>{this.setState({initialized:!0});const areaCode=event.target.value.slice(0,4);areaCode?this.setState({areaCode:areaCode},()=>{this.handleChange("".concat(this.state.areaCode,"-").concat(this.state.phoneNumber))}):this.setState({areaCode:areaCode},()=>{this.handleChange("".concat(this.state.areaCode).concat(this.state.phoneNumber))}),this.handleCleanPhoneNumber(),this.handleValidateAreaCode(areaCode)}),_defineProperty(this,"handleChangePhone",event=>{const phoneNumber=event.target.value.slice(0,10-this.state.areaCode.length);this.setState({phoneNumber:phoneNumber},()=>{this.handleChange("".concat(this.state.areaCode,"-").concat(this.state.phoneNumber))}),this.handleValidatePhoneNumber(phoneNumber)}),_defineProperty(this,"handleKeyPress",event=>{/[0-9]+/g.test(event.key)||event.preventDefault()}),_defineProperty(this,"handleChange",initialValue=>{let value=initialValue;const{childKeys:childKeys,field:field,input:input}=this.props;if(childKeys){const splittedPhone=value.split("-");value={...!isEmpty(splittedPhone[0])&&{[childKeys[0]]:splittedPhone[0]},...!isEmpty(splittedPhone[1])&&{[childKeys[1]]:splittedPhone[1]}}}else field.configuration&&field.configuration.without_dash&&(value=initialValue.replace("-",""));input.onChange(value)}),this.state={areaCode:"",phoneNumber:"",city:null,initialized:!1}}componentDidMount(){this.props.input&&this.props.input.value&&!this.state.initialized&&this.handleInitializeField()}componentDidUpdate(prevProps){this.props.input&&this.props.input.value&&!this.state.areaCode&&!this.state.initialized&&this.handleInitializeField(),this.state.initialized&&prevProps.input&&prevProps.input.value&&this.props.input&&(!this.props.input.value||0===this.props.input.value.length)&&this.cleanField()}render(){var _field$configuration,_field$configuration2;const{areaCodeDataTestId:areaCodeDataTestId,areaCodeFieldProps:areaCodeFieldProps,phoneNumberFieldProps:phoneNumberFieldProps,field:field,input:input,disabled:disabled,meta:meta,classes:themeClasses={},phoneNumberDataTestId:phoneNumberDataTestId,placeholder:placeholder,label:label,variant:variant,inputClassName:inputClassName,classNames:classNames}=this.props,{areaCode:areaCode,city:city,error:error,phoneNumber:phoneNumber}=this.state,classes=mergeClasses(themeClasses,classNames);return React.createElement("div",{className:"".concat(styles.container," ").concat(this.props.style)},React.createElement("div",{className:styles.inputContainer},React.createElement("div",{className:"".concat(styles.areaCode," ").concat(styles["".concat(variant,"AreaCode")]," ").concat(classes.areaCodeContainer)},React.createElement(TextField,_extends({name:"area_code",type:"tel",label:(null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.area_code_label)||AREA_CODE_LABEL,placeholder:(null===(_field$configuration2=field.configuration)||void 0===_field$configuration2?void 0:_field$configuration2.area_code_placeholder)||AREA_CODE_PLACEHOLDER,autoComplete:"off",fullWidth:!0,margin:"none",onKeyPress:this.handleKeyPress,onFocus:this.handleFocus,onChange:this.handleChangeAreaCode,onBlur:this.handleBlur,value:areaCode,error:Boolean(error||shouldShowErrors(meta)),disabled:disabled,variant:variant,InputProps:{classes:{input:inputClassName},inputProps:{"data-testid":areaCodeDataTestId,"data-keyboard":null!=input&&input.name?"areaCode-".concat(null==input?void 0:input.name):null}}},areaCodeFieldProps)),React.createElement(UTTooltip,{stringContentClassName:classes.tooltip,content:city||" "},React.createElement("span",{className:"".concat(styles.icon,"  ").concat(styles["".concat(variant,"Icon")]," ").concat(city&&styles.showCheckedIcon)},React.createElement(CheckCircleOutline,{tabIndex:"-1",className:"".concat(styles.checkedIcon," ").concat(classes.areaCodeIcon)})))),React.createElement("div",{className:"".concat(styles.phoneNumber," ").concat(classes.phoneNumberContainer)},React.createElement(TextField,_extends({name:"phone_number",type:"tel",margin:"none",placeholder:placeholder,label:label,onKeyPress:this.handleKeyPress,autoComplete:"off",fullWidth:!0,error:Boolean(error||shouldShowErrors(meta)),onFocus:input.onFocus,onChange:this.handleChangePhone,disabled:!city||disabled,value:phoneNumber,variant:variant,InputProps:{classes:{input:inputClassName},inputProps:{"data-testid":phoneNumberDataTestId,"data-keyboard":null!=input&&input.name?"phoneNumber-".concat(null==input?void 0:input.name):null}}},phoneNumberFieldProps)))),(error||shouldShowErrors(meta))&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},error||meta.error))}}UTPhoneInput.propTypes={input:inputPropTypes,meta:metaPropTypes,placeholder:string,disabled:bool,label:string,classes:objectOf(string),classNames:objectOf(string),errors:shape({codeWithZero:string,invalidCode:string,phoneWithFifteen:string,phoneWithZero:string,numberNotEmpty:string}),childKeys:arrayOf(string),field:fieldType,variant:string,inputClassName:string,areaCodeFieldProps:object,phoneNumberFieldProps:object,areaCodeDataTestId:string,phoneNumberDataTestId:string},UTPhoneInput.defaultProps={classes:{},areaCodeFieldProps:{},phoneNumberFieldProps:{}};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTPhoneInput);

package/dist/esm/components/UTPhoneInput/versions/V0/theme.js

@@ -1,129 +1 @@
-import { getIn } from 'seamless-immutable';
-import { createTheme } from '@material-ui/core/styles';
-import Colors from '../../../../scss/variables/colors.module.scss';
-export const retrieveStyle = _ref => {
-  let {
-    theme
-  } = _ref;
-  return {
-    container: {
-      display: getIn(theme, ['UTTextInput', 'container', 'display'], 'flex'),
-      flexShrink: getIn(theme, ['UTTextInput', 'container', 'flexShrink'], '0'),
-      width: getIn(theme, ['UTTextInput', 'container', 'width'], '100%'),
-      margin: getIn(theme, ['UTTextInput', 'container', 'margin'], '0')
-    },
-    bigInput: {
-      fontSize: getIn(theme, ['UTTextInput', 'bigInput', 'fontSize'], '40px'),
-      textAlign: getIn(theme, ['UTTextInput', 'bigInput', 'textAlign'], 'center')
-    },
-    areaCodeIcon: {
-      fill: getIn(theme, ['UTPhoneInput', 'areaCodeIcon', 'fill'], Colors.primary)
-    },
-    labelIcon: {
-      height: getIn(theme, ['UTTextInput', 'inputIcon', 'height'], '12px'),
-      width: getIn(theme, ['UTTextInput', 'inputIcon', 'width'], 'auto'),
-      fill: getIn(theme, ['UTTextInput', 'inputIcon', 'fill'], Colors.gray),
-      padding: getIn(theme, ['UTTextInput', 'inputIcon', 'padding'], '0px 5px 0px 0px')
-    },
-    labelContainer: {
-      display: 'flex',
-      width: '100%',
-      alignItems: 'center'
-    },
-    tooltip: {
-      color: getIn(theme, ['UTPhoneInput', 'tooltip', 'color'], Colors.white)
-    },
-    areaCodeContainer: {
-      minWidth: getIn(theme, ['UTPhoneInput', 'areaCodeContainer', 'minWidth'], 70),
-      width: getIn(theme, ['UTPhoneInput', 'areaCodeContainer', 'width'], '30%')
-    },
-    phoneNumberContainer: {
-      marginLeft: getIn(theme, ['UTPhoneInput', 'phoneNumberContainer', 'marginLeft'], 10)
-    }
-  };
-};
-export const retrieveMuiTheme = theme => createTheme({
-  typography: {
-    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
-  },
-  overrides: {
-    MuiFormControl: {
-      root: {
-        minWidth: '70px'
-      }
-    },
-    MuiOutlinedInput: {
-      input: {
-        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
-        color: getIn(theme, ['UTTextInput', 'color'])
-      },
-      root: {
-        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(Colors.gray)),
-          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
-        },
-        '&$focused $notchedOutline': {
-          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(Colors.primary)),
-          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
-        },
-        '&$disabled $notchedOutline': {
-          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(Colors.gray)),
-          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
-        }
-      },
-      notchedOutline: {
-        border: getIn(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
-        borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
-      }
-    },
-    MuiInput: {
-      input: {
-        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
-        color: getIn(theme, ['UTTextInput', 'color'])
-      },
-      underline: {
-        '&:hover:not($disabled):not($focused):not($error):before': {
-          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
-        },
-        '&$disabled:before': {
-          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
-        },
-        '&:before': {
-          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
-        },
-        '&$focused:after': {
-          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.primary))
-        },
-        '&:after': {
-          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.primary))
-        },
-        '&$error:after': {
-          borderBottom: "2px solid ".concat(theme.Palette.error['05']),
-          borderBottomColor: theme.Palette.error['05']
-        }
-      }
-    },
-    MuiFormLabel: {
-      root: {
-        color: getIn(theme, ['UTTextInput', 'formLabel', 'color']),
-        '&$error': {
-          color: getIn(theme, ['UTTextInput', 'formLabel', 'errorColor'], Colors.gray)
-        },
-        '&$focused': {
-          color: getIn(theme, ['UTTextInput', 'formLabel', 'focusedColor'], Colors.primary),
-          '&$error': {
-            color: theme.Palette.error['05']
-          }
-        },
-        fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
-        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14))
-      }
-    },
-    MuiFormHelperText: {
-      root: {
-        fontSize: getIn(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
-        color: theme.Palette.error['05']
-      }
-    }
-  }
-});
+import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{container:{display:getIn(theme,["UTTextInput","container","display"],"flex"),flexShrink:getIn(theme,["UTTextInput","container","flexShrink"],"0"),width:getIn(theme,["UTTextInput","container","width"],"100%"),margin:getIn(theme,["UTTextInput","container","margin"],"0")},bigInput:{fontSize:getIn(theme,["UTTextInput","bigInput","fontSize"],"40px"),textAlign:getIn(theme,["UTTextInput","bigInput","textAlign"],"center")},areaCodeIcon:{fill:getIn(theme,["UTPhoneInput","areaCodeIcon","fill"],Colors.primary)},labelIcon:{height:getIn(theme,["UTTextInput","inputIcon","height"],"12px"),width:getIn(theme,["UTTextInput","inputIcon","width"],"auto"),fill:getIn(theme,["UTTextInput","inputIcon","fill"],Colors.gray),padding:getIn(theme,["UTTextInput","inputIcon","padding"],"0px 5px 0px 0px")},labelContainer:{display:"flex",width:"100%",alignItems:"center"},tooltip:{color:getIn(theme,["UTPhoneInput","tooltip","color"],Colors.white)},areaCodeContainer:{minWidth:getIn(theme,["UTPhoneInput","areaCodeContainer","minWidth"],70),width:getIn(theme,["UTPhoneInput","areaCodeContainer","width"],"30%")},phoneNumberContainer:{marginLeft:getIn(theme,["UTPhoneInput","phoneNumberContainer","marginLeft"],10)}}};export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiFormControl:{root:{minWidth:"70px"}},MuiOutlinedInput:{input:{fontSize:getIn(theme,["UTTextInput","fontSize"],getIn(theme,["Fonts","medium"],14)),color:getIn(theme,["UTTextInput","color"])},root:{"&:hover:not($disabled):not($focused):not($error) $notchedOutline":{border:getIn(theme,["UTTextInput","notchedOutline","hover","border"],"1px solid ".concat(Colors.gray)),borderColor:getIn(theme,["UTTextInput","notchedOutline","hover","borderColor"],"none")},"&$focused $notchedOutline":{border:getIn(theme,["UTTextInput","notchedOutline","focused","border"],"2px solid ".concat(Colors.primary)),borderColor:getIn(theme,["UTTextInput","notchedOutline","hover","borderColor"],"none")},"&$disabled $notchedOutline":{border:getIn(theme,["UTTextInput","notchedOutline","disabled","border"],"1px solid ".concat(Colors.gray)),borderColor:getIn(theme,["UTTextInput","notchedOutline","hover","borderColor"],"none")}},notchedOutline:{border:getIn(theme,["UTTextInput","notchedOutline","unfocused","border"],"1px solid ".concat(theme.Palette.error["05"])),borderColor:getIn(theme,["UTTextInput","notchedOutline","hover","borderColor"],"none")}},MuiInput:{input:{fontSize:getIn(theme,["UTTextInput","fontSize"],getIn(theme,["Fonts","medium"],14)),color:getIn(theme,["UTTextInput","color"])},underline:{"&:hover:not($disabled):not($focused):not($error):before":{borderBottom:getIn(theme,["UTTextInput","underline","hover","borderBottom"],"1px solid ".concat(Colors.gray))},"&$disabled:before":{borderBottom:getIn(theme,["UTTextInput","underline","disabled","borderBottom"],"1px solid ".concat(Colors.gray))},"&:before":{borderBottom:getIn(theme,["UTTextInput","underline","unfocused","borderBottom"],"1px solid ".concat(Colors.gray))},"&$focused:after":{borderBottom:getIn(theme,["UTTextInput","underline","focused","borderBottom"],"2px solid ".concat(Colors.primary))},"&:after":{borderBottom:getIn(theme,["UTTextInput","underline","base","borderBottom"],"2px solid ".concat(Colors.primary))},"&$error:after":{borderBottom:"2px solid ".concat(theme.Palette.error["05"]),borderBottomColor:theme.Palette.error["05"]}}},MuiFormLabel:{root:{color:getIn(theme,["UTTextInput","formLabel","color"]),"&$error":{color:getIn(theme,["UTTextInput","formLabel","errorColor"],Colors.gray)},"&$focused":{color:getIn(theme,["UTTextInput","formLabel","focusedColor"],Colors.primary),"&$error":{color:theme.Palette.error["05"]}},fontFamily:getIn(theme,["Fonts","fontFamily"]),fontSize:getIn(theme,["UTTextInput","fontSize"],getIn(theme,["Fonts","medium"],14))}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTTextInput","helperText","fontSize"],12),color:theme.Palette.error["05"]}}}});