@widergy/energy-ui 3.172.1 → 3.172.3

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

@@ -1,250 +1 @@
-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;
+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;

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

@@ -1,10 +1 @@
-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,82 +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); }
-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);
+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);

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

@@ -1,56 +1 @@
-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'
-    }
-  };
-};
+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"}}};

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

@@ -1,41 +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); }
-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;
+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;

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

@@ -1,28 +1 @@
-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'
-  }
-};
+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"}};

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

@@ -1,93 +1 @@
-import React from 'react';
-import { string, objectOf, node, number, shape, func } from 'prop-types';
-import isEmpty from 'lodash/isEmpty';
-import WithTheme from '../WithTheme';
-import UTLabel from '../UTLabel';
-import UTButton from '../UTButton';
-import { retrieveStyle } from './theme';
-import { actionMapper } from './constants';
-const UTProductItem = _ref => {
-  let {
-    action = {},
-    additionalInfo,
-    amount,
-    classes,
-    discount,
-    discountSize = 'medium',
-    Image,
-    previousAmount,
-    selectedQuantity,
-    title
-  } = _ref;
-  const {
-    CustomIcon,
-    onClick,
-    type = 'add'
-  } = action;
-  const {
-    colorTheme,
-    Icon,
-    size,
-    variant
-  } = actionMapper[type] || {};
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.leftSection
-  }, !!Image && /*#__PURE__*/React.createElement(Image, {
-    className: classes.image
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classes.mainInfo
-  }, !!title && /*#__PURE__*/React.createElement(UTLabel, {
-    weight: "medium",
-    variant: "small"
-  }, title), !!additionalInfo && /*#__PURE__*/React.createElement(UTLabel, {
-    variant: "small",
-    colorTheme: "gray"
-  }, additionalInfo), !!discount && /*#__PURE__*/React.createElement("div", {
-    className: classes.amountContainer
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.discountChip
-  }, /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "light",
-    variant: discountSize
-  }, discount)), !!previousAmount && /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "gray",
-    className: classes.previousAmount
-  }, previousAmount)), /*#__PURE__*/React.createElement(UTLabel, {
-    weight: "medium",
-    variant: "subtitle1"
-  }, amount))), /*#__PURE__*/React.createElement("div", {
-    className: classes.rightSection
-  }, !!selectedQuantity && /*#__PURE__*/React.createElement("div", {
-    className: classes.selectedQuantity
-  }, /*#__PURE__*/React.createElement(UTLabel, {
-    colorTheme: "light",
-    weight: "medium"
-  }, selectedQuantity)), !isEmpty(action) && /*#__PURE__*/React.createElement(UTButton, {
-    classNames: {
-      root: classes.buttonIcon
-    },
-    colorTheme: colorTheme,
-    onClick: onClick,
-    Icon: CustomIcon || Icon,
-    size: size,
-    variant: variant
-  })));
-};
-UTProductItem.propTypes = {
-  action: shape({
-    onClick: func,
-    type: string
-  }),
-  additionalInfo: string,
-  amount: number,
-  classes: objectOf(string),
-  discount: number,
-  discountSize: string,
-  Image: node,
-  previousAmount: number,
-  selectedQuantity: number,
-  title: string
-};
-export default WithTheme(retrieveStyle)(UTProductItem);
+import React from"react";import{string,objectOf,node,number,shape,func}from"prop-types";import isEmpty from"lodash/isEmpty";import WithTheme from"../WithTheme";import UTLabel from"../UTLabel";import UTButton from"../UTButton";import{retrieveStyle}from"./theme";import{actionMapper}from"./constants";const UTProductItem=_ref=>{let{action:action={},additionalInfo:additionalInfo,amount:amount,classes:classes,discount:discount,discountSize:discountSize="medium",Image:Image,previousAmount:previousAmount,selectedQuantity:selectedQuantity,title:title}=_ref;const{CustomIcon:CustomIcon,onClick:onClick,type:type="add"}=action,{colorTheme:colorTheme,Icon:Icon,size:size,variant:variant}=actionMapper[type]||{};return React.createElement("div",{className:classes.container},React.createElement("div",{className:classes.leftSection},!!Image&&React.createElement(Image,{className:classes.image}),React.createElement("div",{className:classes.mainInfo},!!title&&React.createElement(UTLabel,{weight:"medium",variant:"small"},title),!!additionalInfo&&React.createElement(UTLabel,{variant:"small",colorTheme:"gray"},additionalInfo),!!discount&&React.createElement("div",{className:classes.amountContainer},React.createElement("div",{className:classes.discountChip},React.createElement(UTLabel,{colorTheme:"light",variant:discountSize},discount)),!!previousAmount&&React.createElement(UTLabel,{colorTheme:"gray",className:classes.previousAmount},previousAmount)),React.createElement(UTLabel,{weight:"medium",variant:"subtitle1"},amount))),React.createElement("div",{className:classes.rightSection},!!selectedQuantity&&React.createElement("div",{className:classes.selectedQuantity},React.createElement(UTLabel,{colorTheme:"light",weight:"medium"},selectedQuantity)),!isEmpty(action)&&React.createElement(UTButton,{classNames:{root:classes.buttonIcon},colorTheme:colorTheme,onClick:onClick,Icon:CustomIcon||Icon,size:size,variant:variant})))};UTProductItem.propTypes={action:shape({onClick:func,type:string}),additionalInfo:string,amount:number,classes:objectOf(string),discount:number,discountSize:string,Image:node,previousAmount:number,selectedQuantity:number,title:string};export default WithTheme(retrieveStyle)(UTProductItem);

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

@@ -1,59 +1 @@
-export const retrieveStyle = _ref => {
-  var _theme$Palette$action, _theme$Palette$action2;
-  let {
-    theme
-  } = _ref;
-  return {
-    amountContainer: {
-      alignItems: 'center',
-      display: 'flex',
-      gridGap: '8px'
-    },
-    buttonIcon: {
-      padding: '4px !important',
-      borderRadius: '8px'
-    },
-    container: {
-      borderBottom: "1px solid ".concat(theme.Palette.light['04']),
-      display: 'flex',
-      gridGap: '12px',
-      justifyContent: 'space-between',
-      paddingBottom: '24px'
-    },
-    discountChip: {
-      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
-      borderRadius: '4px',
-      padding: '4px 8px'
-    },
-    image: {
-      borderRadius: '12px',
-      height: '70px',
-      width: '70px'
-    },
-    leftSection: {
-      alignItems: 'center',
-      display: 'flex',
-      gridGap: '16px'
-    },
-    mainInfo: {
-      alignItems: 'flex-start',
-      display: 'flex',
-      flexDirection: 'column',
-      gridGap: '4px',
-      minWidth: '160px'
-    },
-    previousAmount: {
-      textDecoration: 'line-through'
-    },
-    rightSection: {
-      alignItems: 'center',
-      display: 'flex',
-      gridGap: '12px'
-    },
-    selectedQuantity: {
-      backgroundColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['04']) || theme.Palette.neutral['04'],
-      borderRadius: '4px',
-      padding: '4px 8px'
-    }
-  };
-};
+export const retrieveStyle=_ref=>{var _theme$Palette$action,_theme$Palette$action2;let{theme:theme}=_ref;return{amountContainer:{alignItems:"center",display:"flex",gridGap:"8px"},buttonIcon:{padding:"4px !important",borderRadius:"8px"},container:{borderBottom:"1px solid ".concat(theme.Palette.light["04"]),display:"flex",gridGap:"12px",justifyContent:"space-between",paddingBottom:"24px"},discountChip:{backgroundColor:(null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.accent["04"])||theme.Palette.accent["04"],borderRadius:"4px",padding:"4px 8px"},image:{borderRadius:"12px",height:"70px",width:"70px"},leftSection:{alignItems:"center",display:"flex",gridGap:"16px"},mainInfo:{alignItems:"flex-start",display:"flex",flexDirection:"column",gridGap:"4px",minWidth:"160px"},previousAmount:{textDecoration:"line-through"},rightSection:{alignItems:"center",display:"flex",gridGap:"12px"},selectedQuantity:{backgroundColor:(null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.neutral["04"])||theme.Palette.neutral["04"],borderRadius:"4px",padding:"4px 8px"}}};

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

@@ -1,2 +1 @@
-export const MIN_PERCENTAGE = 0;
-export const MAX_PERCENTAGE = 100;
+export const MIN_PERCENTAGE=0;export const MAX_PERCENTAGE=100;