@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,250 @@
-import React,{useState,useEffect,useCallback}from"react";import{arrayOf,bool,func,number,shape,string}from"prop-types";import UTBaseInputField from"../../../UTBaseInputField";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation,{validationDataProptypes}from"../../../UTValidation";import{buttonTypes}from"../../../../types/buttonTypes";import{COMPONENT_KEYS}from"../../../UTBaseInputField/constants";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTSelect from"../../../UTSelect";import countries from"../../../../constants/countries";import{AREA_CODES}from"./constants";import styles from"./styles.module.scss";const UTPhoneInput=_ref=>{var _countries$find;let{actions:actions,areaCodeDataTestId:areaCodeDataTestId,areaCodePlaceholder:areaCodePlaceholder,disabled:disabled,editablePrefix:editablePrefix=!1,error:error,helpText:helpText,inputSize:inputSize,maxLength:maxLength=10,onChange:onChange,prefix:prefix,prefixDataTestId:prefixDataTestId,phoneNumberDataTestId:phoneNumberDataTestId,placeholder:placeholder,readOnly:readOnly,required:required,title:title,titleVariant:titleVariant,translations:translations={areaCodeMinLenghtError:"El código de área debe contener al menos 2 dígitos.",areaCodeWithoutZeroError:"El código de área debe comenzar sin 0.",invalidAreaCodeError:"No pudimos reconocer el código de área ingresado. Intenta con uno diferente."},validationDataTestId:validationDataTestId,validations:validations,value:value,withAreaCode:withAreaCode=!0}=_ref;const[areaCodeState,setAreaCodeState]=useState({code:"",error:""}),[blurWithError,setBlurWithError]=useState(!1),[phoneNumber,setPhoneNumber]=useState(""),[prefixState,setPrefixState]=useState((null==value?void 0:value.prefix)||prefix),{areaCodeWithoutZeroError:areaCodeWithoutZeroError,invalidAreaCodeError:invalidAreaCodeError,areaCodeMinLenghtError:areaCodeMinLenghtError}=translations;useEffect(()=>{const{number:valueNumber}="string"==typeof value?{number:value}:value;if(prefix)valueNumber&&valueNumber!==phoneNumber&&setPhoneNumber(valueNumber);else if(valueNumber&&withAreaCode){const[code,phone]=valueNumber.split("-");setAreaCodeState(prevState=>({...prevState,code:code||""})),setPhoneNumber(phone||"")}else valueNumber&&!withAreaCode&&setPhoneNumber(valueNumber)},[value,withAreaCode]);const validateAreaCode=code=>{if(!code)return"";if(1===code.length)return areaCodeMinLenghtError;if(code.startsWith("0"))return areaCodeWithoutZeroError;return AREA_CODES.find(element=>element.code===code)?"":invalidAreaCodeError};useEffect(()=>{if(blurWithError){const validationError=validateAreaCode(areaCodeState.code);setAreaCodeState(prevState=>({...prevState,error:validationError}))}},[areaCodeState.code,blurWithError]);const handleChangePhoneNumber=useCallback(phoneNumberValue=>{setPhoneNumber(phoneNumberValue)},[]);useEffect(()=>{if(prefix)!phoneNumber||phoneNumber===(null==value?void 0:value.number)&&prefixState===(null==value?void 0:value.prefix)||onChange({number:phoneNumber,prefix:prefixState});else if(""!==areaCodeState.code||""!==phoneNumber){const newValue=withAreaCode?"".concat(areaCodeState.code,"-").concat(phoneNumber):phoneNumber;newValue!==value&&onChange(newValue)}else onChange("")},[areaCodeState.code,phoneNumber,withAreaCode,onChange,value,prefixState,prefix]);const validationData=validations||areaCodeState.error&&formatErrorToValidation(areaCodeState.error)||error&&formatErrorToValidation(error),hasError=(null==validationData?void 0:validationData.length)>0;return React.createElement("div",{className:styles.container},title&&React.createElement(UTFieldLabel,{actions:actions,readOnly:readOnly,required:required,size:titleVariant},title),React.createElement("div",{className:styles.inputsContainer},prefix&&React.createElement(UTSelect,{autocompleteProps:{classes:{popper:styles.popper}},className:styles.countryCodeSelect,classNames:{container:styles.countryCodeContainer},clearable:!1,dataTestId:prefixDataTestId,disabled:disabled||!editablePrefix,icon:null===(_countries$find=countries.find(_ref2=>{let{prefix:prefixValue}=_ref2;return prefixValue===prefixState}))||void 0===_countries$find?void 0:_countries$find.code,inputSize:inputSize,onChange:setPrefixState,options:countries.map(_ref3=>{let{code:code,prefix:prefixValue}=_ref3;return{name:"".concat(prefixValue," (").concat(code,")"),value:prefixValue,icon:code}}),value:prefixState,version:"V1"}),!prefix&&withAreaCode&&React.createElement(UTBaseInputField,{alwaysShowPlaceholder:!0,classNames:{container:styles.areaCodeContainer},dataTestId:areaCodeDataTestId,disabled:disabled,error:hasError,inputSize:inputSize,maxLength:Math.min(maxLength-phoneNumber.length,4),onBlur:()=>{const validationError=validateAreaCode(areaCodeState.code);setAreaCodeState(prevState=>({...prevState,error:validationError})),setBlurWithError(!!validationError)},onChange:areaCodeValue=>{setAreaCodeState(prevState=>({...prevState,code:areaCodeValue}))},placeholder:areaCodePlaceholder,readOnly:readOnly,rightAdornments:[{name:COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}],type:"numeric",value:areaCodeState.code}),React.createElement(UTBaseInputField,{alwaysShowPlaceholder:!0,classNames:{container:styles.phoneContainer,root:styles.phoneContainerRoot},dataTestId:phoneNumberDataTestId,disabled:disabled,error:hasError&&!areaCodeState.error,inputSize:inputSize,maxLength:withAreaCode?Math.min(maxLength-areaCodeState.code.length,maxLength-2):maxLength,onChange:handleChangePhoneNumber,placeholder:placeholder,rightAdornments:[{name:COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}],type:"numeric",value:phoneNumber})),helpText&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},helpText),validationData&&React.createElement(UTValidation,{dataTestId:validationDataTestId,validationData:validationData}))};UTPhoneInput.propTypes={actions:arrayOf(buttonTypes),areaCodeDataTestId:string,areaCodePlaceholder:string,prefix:string,disabled:bool,editablePrefix:bool,error:string,helpText:string,inputSize:string,prefixDataTestId:string,maxLength:number,onChange:func,phoneNumberDataTestId:string,placeholder:string,readOnly:bool,required:bool,title:string,titleVariant:string,translations:shape({areaCodeWithoutZeroError:string,invalidAreaCodeError:string}),validationDataTestId:string,validations:validationDataProptypes,value:string,withAreaCode:bool};export default UTPhoneInput;
+import React, { useState, useEffect, useCallback } from 'react';
+import { arrayOf, bool, func, number, shape, string } from 'prop-types';
+import UTBaseInputField from '../../../UTBaseInputField';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTValidation, { validationDataProptypes } from '../../../UTValidation';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTSelect from '../../../UTSelect';
+import countries from '../../../../constants/countries';
+import { AREA_CODES } from './constants';
+import styles from './styles.module.scss';
+const UTPhoneInput = _ref => {
+  var _countries$find;
+  let {
+    actions,
+    areaCodeDataTestId,
+    areaCodePlaceholder,
+    disabled,
+    editablePrefix = false,
+    error,
+    helpText,
+    inputSize,
+    maxLength = 10,
+    onChange,
+    prefix,
+    prefixDataTestId,
+    phoneNumberDataTestId,
+    placeholder,
+    readOnly,
+    required,
+    title,
+    titleVariant,
+    translations = {
+      areaCodeMinLenghtError: 'El código de área debe contener al menos 2 dígitos.',
+      areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.',
+      invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.'
+    },
+    validationDataTestId,
+    validations,
+    value,
+    withAreaCode = true
+  } = _ref;
+  const [areaCodeState, setAreaCodeState] = useState({
+    code: '',
+    error: ''
+  });
+  const [blurWithError, setBlurWithError] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [prefixState, setPrefixState] = useState((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
+  const {
+    areaCodeWithoutZeroError,
+    invalidAreaCodeError,
+    areaCodeMinLenghtError
+  } = translations;
+  useEffect(() => {
+    const {
+      number: valueNumber
+    } = typeof value === 'string' ? {
+      number: value
+    } : value;
+    if (prefix) {
+      if (valueNumber && valueNumber !== phoneNumber) setPhoneNumber(valueNumber);
+    } else if (valueNumber && withAreaCode) {
+      const [code, phone] = valueNumber.split('-');
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        code: code || ''
+      }));
+      setPhoneNumber(phone || '');
+    } else if (valueNumber && !withAreaCode) {
+      setPhoneNumber(valueNumber);
+    }
+  }, [value, withAreaCode]);
+  const validateAreaCode = code => {
+    if (!code) return '';
+    if (code.length === 1) return areaCodeMinLenghtError;
+    if (code.startsWith('0')) return areaCodeWithoutZeroError;
+    const isValidCode = AREA_CODES.find(element => element.code === code);
+    return !isValidCode ? invalidAreaCodeError : '';
+  };
+  const handleOnBlur = () => {
+    const validationError = validateAreaCode(areaCodeState.code);
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      error: validationError
+    }));
+    setBlurWithError(!!validationError);
+  };
+  useEffect(() => {
+    if (blurWithError) {
+      const validationError = validateAreaCode(areaCodeState.code);
+      setAreaCodeState(prevState => ({
+        ...prevState,
+        error: validationError
+      }));
+    }
+  }, [areaCodeState.code, blurWithError]);
+  const handleChangeAreaCode = areaCodeValue => {
+    setAreaCodeState(prevState => ({
+      ...prevState,
+      code: areaCodeValue
+    }));
+  };
+  const handleChangePhoneNumber = useCallback(phoneNumberValue => {
+    setPhoneNumber(phoneNumberValue);
+  }, []);
+  useEffect(() => {
+    if (prefix) {
+      if (phoneNumber && (phoneNumber !== (value === null || value === void 0 ? void 0 : value.number) || prefixState !== (value === null || value === void 0 ? void 0 : value.prefix))) onChange({
+        number: phoneNumber,
+        prefix: prefixState
+      });
+    } else if (areaCodeState.code !== '' || phoneNumber !== '') {
+      const newValue = withAreaCode ? "".concat(areaCodeState.code, "-").concat(phoneNumber) : phoneNumber;
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    } else {
+      onChange('');
+    }
+  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value, prefixState, prefix]);
+  const validationData = validations || areaCodeState.error && formatErrorToValidation(areaCodeState.error) || error && formatErrorToValidation(error);
+  const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
+  const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
+  const getPhoneNumberMaxLength = () => withAreaCode ? Math.min(maxLength - areaCodeState.code.length, maxLength - 2) : maxLength;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    readOnly: readOnly,
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: styles.inputsContainer
+  }, prefix && /*#__PURE__*/React.createElement(UTSelect, {
+    autocompleteProps: {
+      classes: {
+        popper: styles.popper
+      }
+    },
+    className: styles.countryCodeSelect,
+    classNames: {
+      container: styles.countryCodeContainer
+    },
+    clearable: false,
+    dataTestId: prefixDataTestId,
+    disabled: disabled || !editablePrefix,
+    icon: (_countries$find = countries.find(_ref2 => {
+      let {
+        prefix: prefixValue
+      } = _ref2;
+      return prefixValue === prefixState;
+    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
+    inputSize: inputSize,
+    onChange: setPrefixState,
+    options: countries.map(_ref3 => {
+      let {
+        code,
+        prefix: prefixValue
+      } = _ref3;
+      return {
+        name: "".concat(prefixValue, " (").concat(code, ")"),
+        value: prefixValue,
+        icon: code
+      };
+    }),
+    value: prefixState,
+    version: "V1"
+  }), !prefix && withAreaCode && /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: styles.areaCodeContainer
+    },
+    dataTestId: areaCodeDataTestId,
+    disabled: disabled,
+    error: hasError,
+    inputSize: inputSize,
+    maxLength: getAreaCodeMaxLength(),
+    onBlur: handleOnBlur,
+    onChange: handleChangeAreaCode,
+    placeholder: areaCodePlaceholder,
+    readOnly: readOnly,
+    rightAdornments: [{
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: areaCodeState.code
+  }), /*#__PURE__*/React.createElement(UTBaseInputField, {
+    alwaysShowPlaceholder: true,
+    classNames: {
+      container: styles.phoneContainer,
+      root: styles.phoneContainerRoot
+    },
+    dataTestId: phoneNumberDataTestId,
+    disabled: disabled,
+    error: hasError && !areaCodeState.error,
+    inputSize: inputSize,
+    maxLength: getPhoneNumberMaxLength(),
+    onChange: handleChangePhoneNumber,
+    placeholder: placeholder,
+    rightAdornments: [{
+      name: COMPONENT_KEYS.ICON,
+      props: {
+        showOnlyOnError: true
+      }
+    }],
+    type: "numeric",
+    value: phoneNumber
+  })), helpText && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: validationDataTestId,
+    validationData: validationData
+  }));
+};
+UTPhoneInput.propTypes = {
+  actions: arrayOf(buttonTypes),
+  areaCodeDataTestId: string,
+  areaCodePlaceholder: string,
+  prefix: string,
+  disabled: bool,
+  editablePrefix: bool,
+  error: string,
+  helpText: string,
+  inputSize: string,
+  prefixDataTestId: string,
+  maxLength: number,
+  onChange: func,
+  phoneNumberDataTestId: string,
+  placeholder: string,
+  readOnly: bool,
+  required: bool,
+  title: string,
+  titleVariant: string,
+  translations: shape({
+    areaCodeWithoutZeroError: string,
+    invalidAreaCodeError: string
+  }),
+  validationDataTestId: string,
+  validations: validationDataProptypes,
+  value: string,
+  withAreaCode: bool
+};
+export default UTPhoneInput;

package/dist/esm/components/UTPopUp/README.md

@@ -0,0 +1,50 @@
+# UTPopUp
+
+## Description
+
+`UTPopUp` is a configurable floating component with actions.
+
+## Props
+
+| Name                   | Type      | Default            | Description                                                                                             |
+| ---------------------- | --------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
+| `checkBox`             | string    |                    | Title for the checkbox input.                                                                           |
+| `children`             | element   |                    | The content to be rendered inside the component.                                                        |
+| `dataTestId`           | string    |                    | Unique identifier for testing purposes.                                                                 |
+| `enabled`              | bool      | `true`             | Indicates whether the component is enabled or not.                                                      |
+| `onClose`              | func      |                    | Callback for the close button.                                                                          |
+| `position`             | string    | `bottomRight`      | Defines the position of the component.                                                                  |
+| `primaryAction`        | func      |                    | Callback function for the primary action.                                                               |
+| `primaryActionProps`   | object    |                    | Props to be applied to the primary action button.                                                       |
+| `primaryActionText`    | string    |                    | Text for the primary action button.                                                                     |
+| `progress`             | number    |                    | Width of the progress bar                                                                               |
+| `secondaryAction`      | func      |                    | Callback function for the secondary action .                                                            |
+| `secondaryActionProps` | object    |                    | Props to be applied to the secondary action button.                                                     |
+| `secondaryActionText`  | string    |                    | Text for the secondary action button.                                                                   |
+| `size`                 | string    | `medium`           | Defines the size of the component.                                                                      |
+| `withBodyPadding`      | bool      | `false`            | Indicates whether the body of the component should have horizontal padding around its content.          |
+
+
+### checkBox
+
+`checkBox` is the title and enabler for the UTCheckBox. Its value is passed as a parameter to `onClose`, `primaryAction`, and `secondaryAction`
+
+### progress
+
+Enables the progress bar. The value of `progress` must be between 0 and 1.
+
+### position 
+
+The value of `position` must be one of the following:
+
+- "bottomLeft"
+- "bottomRight"
+- "topLeft"
+- "topRight"
+
+### size
+
+The value of `size` must be one of the following:
+
+- "medium"
+- "large"

package/dist/esm/components/UTPopUp/constants.js

@@ -1 +1,10 @@
-export const SIZES={LARGE:"large",MEDIUM:"medium"};export const POSITIONS={BOTTOM_LEFT:"bottomLeft",BOTTOM_RIGHT:"bottomRight",TOP_LEFT:"topLeft",TOP_RIGHT:"topRight"};
+export const SIZES = {
+  LARGE: 'large',
+  MEDIUM: 'medium'
+};
+export const POSITIONS = {
+  BOTTOM_LEFT: 'bottomLeft',
+  BOTTOM_RIGHT: 'bottomRight',
+  TOP_LEFT: 'topLeft',
+  TOP_RIGHT: 'topRight'
+};

package/dist/esm/components/UTPopUp/index.js

@@ -1 +1,82 @@
-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)}import{func,string,bool,object,element,number}from"prop-types";import React,{useState}from"react";import UTButton from"../UTButton";import UTCheckbox from"../UTCheckbox";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTPopUp=_ref=>{let{checkBox:checkBox,children:children,classes:theme,dataTestId:dataTestId,enabled:enabled=!0,onClose:onClose,primaryAction:primaryAction,primaryActionProps:primaryActionProps,primaryActionText:primaryActionText,progress:progress,secondaryAction:secondaryAction,secondaryActionProps:secondaryActionProps,secondaryActionText:secondaryActionText,withBodyPadding:withBodyPadding}=_ref;const[checked,setChecked]=useState(!1),hasProgress="number"==typeof progress;return enabled?React.createElement("div",{className:"".concat(theme.container," ").concat(styles.container),"data-testid":dataTestId},(onClose||hasProgress)&&React.createElement("div",{className:styles.header},hasProgress&&React.createElement("div",{className:theme.progressBar},React.createElement("div",{className:theme.progress,style:{width:"".concat(101*progress,"%")}})),onClose&&React.createElement(UTButton,{Icon:"IconX",onClick:()=>onClose(checked),variant:"text"})),children&&React.createElement("div",{className:withBodyPadding?styles.withBodyPadding:styles.body},children),(checkBox||primaryAction||secondaryAction)&&React.createElement("div",{className:styles.footer},checkBox&&React.createElement(UTCheckbox,{version:"V1",title:checkBox,spacing:"small",value:checked,onChange:setChecked,classNames:{container:styles.checkBox}}),secondaryAction&&React.createElement(UTButton,_extends({onClick:()=>secondaryAction(checked),variant:"text"},secondaryActionProps),secondaryActionText),primaryAction&&React.createElement(UTButton,_extends({onClick:()=>primaryAction(checked)},primaryActionProps),primaryActionText))):null};UTPopUp.propTypes={checkBox:string,children:element,classes:object,dataTestId:string,enabled:bool,onClose:func,position:string,primaryAction:func,primaryActionProps:object,primaryActionText:string,progress:number,secondaryAction:func,secondaryActionProps:object,secondaryActionText:string,size:string,withBodyPadding:bool};export default WithTheme(retrieveStyle)(UTPopUp);
+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); }
+import { func, string, bool, object, element, number } from 'prop-types';
+import React, { useState } from 'react';
+import UTButton from '../UTButton';
+import UTCheckbox from '../UTCheckbox';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTPopUp = _ref => {
+  let {
+    checkBox,
+    children,
+    classes: theme,
+    dataTestId,
+    enabled = true,
+    onClose,
+    primaryAction,
+    primaryActionProps,
+    primaryActionText,
+    progress,
+    secondaryAction,
+    secondaryActionProps,
+    secondaryActionText,
+    withBodyPadding
+  } = _ref;
+  const [checked, setChecked] = useState(false);
+  const hasProgress = typeof progress === 'number';
+  return enabled ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(theme.container, " ").concat(styles.container),
+    "data-testid": dataTestId
+  }, (onClose || hasProgress) && /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, hasProgress && /*#__PURE__*/React.createElement("div", {
+    className: theme.progressBar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: theme.progress,
+    style: {
+      width: "".concat(progress * 101, "%")
+    }
+  })), onClose && /*#__PURE__*/React.createElement(UTButton, {
+    Icon: "IconX",
+    onClick: () => onClose(checked),
+    variant: "text"
+  })), children && /*#__PURE__*/React.createElement("div", {
+    className: withBodyPadding ? styles.withBodyPadding : styles.body
+  }, children), (checkBox || primaryAction || secondaryAction) && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, checkBox && /*#__PURE__*/React.createElement(UTCheckbox, {
+    version: "V1",
+    title: checkBox,
+    spacing: "small",
+    value: checked,
+    onChange: setChecked,
+    classNames: {
+      container: styles.checkBox
+    }
+  }), secondaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: () => secondaryAction(checked),
+    variant: "text"
+  }, secondaryActionProps), secondaryActionText), primaryAction && /*#__PURE__*/React.createElement(UTButton, _extends({
+    onClick: () => primaryAction(checked)
+  }, primaryActionProps), primaryActionText))) : null;
+};
+UTPopUp.propTypes = {
+  checkBox: string,
+  children: element,
+  classes: object,
+  dataTestId: string,
+  enabled: bool,
+  onClose: func,
+  position: string,
+  primaryAction: func,
+  primaryActionProps: object,
+  primaryActionText: string,
+  progress: number,
+  secondaryAction: func,
+  secondaryActionProps: object,
+  secondaryActionText: string,
+  size: string,
+  withBodyPadding: bool
+};
+export default WithTheme(retrieveStyle)(UTPopUp);

package/dist/esm/components/UTPopUp/theme.js

@@ -1 +1,56 @@
-import{getShadow}from"../../utils/shadowUtils";import{POSITIONS,SIZES}from"./constants";export const retrieveStyle=_ref=>{var _theme$Palette$shadow,_theme$Palette;let{theme:theme,position:position=POSITIONS.BOTTOM_RIGHT,size:size=SIZES.MEDIUM}=_ref;return{container:{backgroundColor:theme.Palette.light["01"],borderRadius:"4px",boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?void 0:_theme$Palette$shadow.grayscale,level:2}),position:"absolute",width:{[SIZES.MEDIUM]:"381px",[SIZES.LARGE]:"600px"}[size],zIndex:1e3,...{[POSITIONS.BOTTOM_LEFT]:{bottom:"30px",left:"30px"},[POSITIONS.BOTTOM_RIGHT]:{bottom:"30px",right:"30px"},[POSITIONS.TOP_LEFT]:{left:"30px",top:"30px"},[POSITIONS.TOP_RIGHT]:{right:"30px",top:"30px"}}[position]},progressBar:{backgroundColor:theme.Palette.light["04"],height:"8px",overflow:"hidden",width:"100%"},progress:{background:null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette||null===(_theme$Palette=_theme$Palette.identityGradient)||void 0===_theme$Palette?void 0:_theme$Palette.horizontal,borderRadius:"0 4px 4px 0",height:"100%",transition:"width 1s ease-in-out"}}};
+import { getShadow } from '../../utils/shadowUtils';
+import { POSITIONS, SIZES } from './constants';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow, _theme$Palette;
+  let {
+    theme,
+    position = POSITIONS.BOTTOM_RIGHT,
+    size = SIZES.MEDIUM
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: theme.Palette.light['01'],
+      borderRadius: '4px',
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 2
+      }),
+      position: 'absolute',
+      width: {
+        [SIZES.MEDIUM]: '381px',
+        [SIZES.LARGE]: '600px'
+      }[size],
+      zIndex: 1000,
+      ...{
+        [POSITIONS.BOTTOM_LEFT]: {
+          bottom: '30px',
+          left: '30px'
+        },
+        [POSITIONS.BOTTOM_RIGHT]: {
+          bottom: '30px',
+          right: '30px'
+        },
+        [POSITIONS.TOP_LEFT]: {
+          left: '30px',
+          top: '30px'
+        },
+        [POSITIONS.TOP_RIGHT]: {
+          right: '30px',
+          top: '30px'
+        }
+      }[position]
+    },
+    progressBar: {
+      backgroundColor: theme.Palette.light['04'],
+      height: '8px',
+      overflow: 'hidden',
+      width: '100%'
+    },
+    progress: {
+      background: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.identityGradient) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.horizontal,
+      borderRadius: '0 4px 4px 0',
+      height: '100%',
+      transition: 'width 1s ease-in-out'
+    }
+  };
+};

package/dist/esm/components/UTPopper/README.md

@@ -0,0 +1,17 @@
+# UTPopper
+
+## Description
+
+Component meant to be used as a PopUp anchored to other elements
+
+## Props
+
+| Name                    | Type                               | Default | Description                                       |
+| ----------------------- | ---------------------------------- | ------- | ------------------------------------------------- |
+| anchor                  | oneOfType([refType, elementType]), |         | Element to which the popper is anchored           |
+| children,               | object                             |         | Elements to render within the popper              |
+| classes,                | objectOf( string)                  |         | CSS classes                                       |
+| clickAwayListenerProps, | object                             |         | Props handed over to ClickawayListener            |
+| onClose,                | func                               |         | Close function                                    |
+| paperProps,             | object                             |         | Props to hand over to the UTPapper                |
+| ...popperProps          | object                             |         | Spread of props compatible with materialUIs props |

package/dist/esm/components/UTPopper/index.js

@@ -1 +1,41 @@
-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)}import isEmpty from"lodash/isEmpty";import React,{useEffect,useState}from"react";import{ClickAwayListener,Paper,Popper}from"@material-ui/core";import{elementType,func,object,objectOf,oneOfType,string}from"prop-types";import{refType}from"../../types/commonTypes";const UTPopper=_ref=>{let{anchor:anchor,children:children,classes:classes,clickAwayListenerProps:clickAwayListenerProps,onClose:onClose,paperProps:paperProps,...popperProps}=_ref;const[open,handleOpenState]=useState(!1);return useEffect(()=>{const shouldOpen=!!anchor&&!isEmpty(children);handleOpenState(shouldOpen)},[anchor,children]),anchor?React.createElement(ClickAwayListener,_extends({onClickAway:onClose},clickAwayListenerProps),React.createElement(Popper,_extends({anchorEl:anchor,open:open,transition:!0},popperProps),React.createElement(Paper,_extends({className:null==classes?void 0:classes.paper},paperProps),children))):null};UTPopper.propTypes={anchor:oneOfType([refType,elementType]),children:object,classes:objectOf(string),clickAwayListenerProps:object,onClose:func,paperProps:object,popperProps:object};export default UTPopper;
+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); }
+import isEmpty from 'lodash/isEmpty';
+import React, { useEffect, useState } from 'react';
+import { ClickAwayListener, Paper, Popper } from '@material-ui/core';
+import { elementType, func, object, objectOf, oneOfType, string } from 'prop-types';
+import { refType } from '../../types/commonTypes';
+const UTPopper = _ref => {
+  let {
+    anchor,
+    children,
+    classes,
+    clickAwayListenerProps,
+    onClose,
+    paperProps,
+    ...popperProps
+  } = _ref;
+  const [open, handleOpenState] = useState(false);
+  useEffect(() => {
+    const shouldOpen = !!anchor && !isEmpty(children);
+    handleOpenState(shouldOpen);
+  }, [anchor, children]);
+  return anchor ? /*#__PURE__*/React.createElement(ClickAwayListener, _extends({
+    onClickAway: onClose
+  }, clickAwayListenerProps), /*#__PURE__*/React.createElement(Popper, _extends({
+    anchorEl: anchor,
+    open: open,
+    transition: true
+  }, popperProps), /*#__PURE__*/React.createElement(Paper, _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.paper
+  }, paperProps), children))) : null;
+};
+UTPopper.propTypes = {
+  anchor: oneOfType([refType, elementType]),
+  children: object,
+  classes: objectOf(string),
+  clickAwayListenerProps: object,
+  onClose: func,
+  paperProps: object,
+  popperProps: object
+};
+export default UTPopper;

package/dist/esm/components/UTProductItem/README.md

@@ -0,0 +1,28 @@
+# UTProductItem
+
+### Description
+Product item component.
+
+### Action
+This action object will wait for a function and a type to apply a determinate style to the action button:
+Available types:
+- `add`
+- `modify`
+- `detail`
+- `modifyDetail`
+
+Also, you can pass a CustomIcon if you want to.
+
+### Props
+
+| Name                 | Type                                                                                                            | Default   |Description                      |
+|----------------------|-----------------------------------------------------------------------------------------------------------------|-----------|---------------------------------|
+| action               | object: {CustomIcon: ReactComponent, type: 'add' \| 'modify' \| 'detail' \| 'modifyDetail', onClick: () => () } |           | The action definition.          |
+| additionalInfo       | string                                                                                                          |           | The additional info to detail.  |
+| amount               |                                                                                                                 |           | The current amount.             |
+| discount             | number                                                                                                          |           | Current discount.               |
+| discountSize         | 'small' \| 'medium'                                                                                             | medium    | UTLabel component variant.      | 
+| Image                | asset                                                                                                           |           | Image of the product.           |
+| previousAmount       | number                                                                                                          |           | Amount without discount applied.|
+| selectedQuantity     | number                                                                                                          |           | Selected item product quantity. |
+| title                | string                                                                                                          |           | Product name.                   |

package/dist/esm/components/UTProductItem/constants.js

@@ -1 +1,28 @@
-const ADD="add",MODIFY="modify",DETAIL="detail",MODIFY_DETAIL="modifyDetail";export const actionMapper={[ADD]:{colorTheme:"secondary",Icon:"IconPlus",size:"medium",variant:"semitransparent"},[MODIFY]:{colorTheme:"secondary",Icon:"IconPencil",size:"medium",variant:"text"},[DETAIL]:{colorTheme:"primary",Icon:"IconChevronRight",size:"medium"},[MODIFY_DETAIL]:{colorTheme:"primary",Icon:"IconPencil",size:"medium"}};
+const ADD = 'add';
+const MODIFY = 'modify';
+const DETAIL = 'detail';
+const MODIFY_DETAIL = 'modifyDetail';
+export const actionMapper = {
+  [ADD]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPlus',
+    size: 'medium',
+    variant: 'semitransparent'
+  },
+  [MODIFY]: {
+    colorTheme: 'secondary',
+    Icon: 'IconPencil',
+    size: 'medium',
+    variant: 'text'
+  },
+  [DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconChevronRight',
+    size: 'medium'
+  },
+  [MODIFY_DETAIL]: {
+    colorTheme: 'primary',
+    Icon: 'IconPencil',
+    size: 'medium'
+  }
+};