@widergy/energy-ui 3.177.0 → 3.178.0

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

@@ -1 +1 @@
-import React,{useEffect,useRef,useState}from"react";import{func,arrayOf,string,shape,number,node,bool,objectOf,oneOfType,any}from"prop-types";import{fileSignatureValidation,fileSizeValidation}from"@widergy/web-utils/lib/validate";import{resizeImage}from"@widergy/web-utils/lib/image";import{isIE}from"@widergy/web-utils/lib/browser";import isEmpty from"lodash/isEmpty";import{buttonTypes}from"../../types/buttonTypes";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import{FORMAT_ERROR_TEXT,SIZE_ERROR_TEXT,ASPECT_RATIO_ERROR_TEXT,MAX_FILES_ERROR,DEFAULT_MAX_FILES,PREVIEW_TYPES}from"./constants";import Attachment from"./layout";import{pdfAspectRatioValidation,isImage,isPDF,getSizeInMB,hasPreview,isDownloadable,getNotRepeatedFiles,getBlobFromUrl,getDefaultAttachment}from"./utils";const AttachmentListContainer=e=>{var t,a,i,n,l;let{acceptedFileTypes:r,actions:o,allowedPDFUploadSizes:s,classes:d,containerClassname:u,customValidation:m,dataTestId:c,deleteDataTestId:f,disabled:p,disableResize:y,errorClassname:v,field:g,fieldTypes:E=[],hideLabels:T,icon:R,input:h,loadingTextClassname:b,maxFileSize:A=99999999,onLoaded:I,notifyOnInitialLoad:O=!0,previewDataTestId:_,readOnly:S=!1,resizeConfig:w,sanitize:F,titleVariant:z}=e;const C=null==g||null===(t=g.configuration)||void 0===t?void 0:t.help_text,P=(null==g||null===(a=g.configuration)||void 0===a?void 0:a.max_file_size)||A,D=(null==g||null===(i=g.configuration)||void 0===i?void 0:i.accepted_file_types)||r,L=(null==g||null===(n=g.configuration)||void 0===n?void 0:n.max_files)||DEFAULT_MAX_FILES,[x,V]=useState([]),[M,X]=useState(!1),[W,B]=useState(FORMAT_ERROR_TEXT),U=useRef(null),[j,N]=useState((null==h||null===(l=h.value)||void 0===l?void 0:l.files)||[]),Y=(e,t)=>{X(!0),B(t?"".concat(e,"(").concat(t,")"):e)},G=async e=>{const t=e=>new Promise((t,a)=>{const i=new FileReader;i.onload=a=>{hasPreview(e)||isDownloadable(e)?t({src:a.target.result,file:e}):t({src:null,file:e})},i.onerror=e=>a(e),i.readAsDataURL(e)});try{const a=(await Promise.all(e.map(t))).map(e=>{let{src:t,file:a}=e;return((e,t)=>({...t,src:e}))(t,{type:a.type,name:a.name,size:getSizeInMB(a.size),onClick:()=>{return(e=a.name)&&V(t=>t.filter(t=>t.name!==e)),N(t=>{const a=Object.values(t).filter(t=>t.name!==e);return h.onChange&&h.onChange(isEmpty(a)?null:{files:a}),a}),U.current&&(U.current.value=null),void X(!1);var e}})});V(e=>getNotRepeatedFiles([...(e||[]).filter(e=>"loading"!==e.type),...a]))}catch(e){V(e=>(e||[]).filter(e=>"loading"!==e.type)),Y(null==e?void 0:e.message)}},Z=async function(){var e,t;let a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];const n=Array.isArray(h.value)?h.value.length:1;if(a===n)return I&&I(),O&&h.onChange&&h.onChange({files:i}),N(i),void G(i);const l=Array.isArray(h.value)?h.value.flatMap(e=>Object.values(e)[0]):h.value,r=Array.isArray(h.value)?(null===(e=h.value[a])||void 0===e?void 0:e.url)||(null===(t=l[a])||void 0===t?void 0:t.url):h.value;getBlobFromUrl(r,async e=>{if(e){var t,n;const r=Array.isArray(h.value)?(null===(t=h.value[a])||void 0===t?void 0:t.name)||(null===(n=l[a])||void 0===n?void 0:n.name):null,o=new File([e],r||getDefaultAttachment(e.type.substring(e.type.indexOf("/")+1),a+1),{type:e.type});Z(a+1,[...i,o])}else V(e=>{let t=!1;return e.map(e=>t||e.type!==PREVIEW_TYPES.LOADING?e:(t=!0,{...e,type:PREVIEW_TYPES.ERROR}))}),Z(a+1,i)})};return useEffect(()=>{var e;if(isEmpty(j)?isEmpty(null===(e=h.value)||void 0===e?void 0:e.files)||G(h.value.files):G(j),Array.isArray(h.value)&&!isEmpty(h.value)||h.value&&"string"==typeof h.value){if(isEmpty(x)){const e=Array.isArray(h.value)?h.value.length:1;V(Array.from({length:e},()=>({type:PREVIEW_TYPES.LOADING})))}Z()}},[h]),React.createElement(Attachment,{actions:o,acceptedFileTypes:D,classes:d,containerClassname:u,disabled:p,dataTestId:c,deleteDataTestId:f,error:M,errorClassname:v,errorText:W,field:g,fieldTypes:E,fileInputRef:U,helpText:C,hideLabels:T,icon:R,loadingTextClassname:b,maxFiles:L,maxFileSize:getSizeInMB(P),onChange:async e=>{var t;const a=(null===(t=h.value)||void 0===t?void 0:t.files)||j,i=Object.values(isEmpty(a)?e.target.files:getNotRepeatedFiles([...a,...e.target.files])),n={formatError:FORMAT_ERROR_TEXT,sizeError:"".concat(SIZE_ERROR_TEXT," ").concat(getSizeInMB(P),"MB."),aspectRatioError:"".concat(ASPECT_RATIO_ERROR_TEXT," ").concat(null==s?void 0:s.map(e=>e.name).join(" - "),")")};X(!1);const l=async e=>{if(e<i.length){if(L&&i.length>L)return void Y(MAX_FILES_ERROR,L);let t=i[e];if(t){let a=!m||await m(t,Y);if(a){if(a=await fileSignatureValidation(t,E,t.type),!a)return void Y(n.formatError);if(F&&(t=await F(t)),a=fileSizeValidation(t,P),a&&isPDF(t)&&!isEmpty(s)&&(a=await pdfAspectRatioValidation(t,s),!a))return void Y(n.aspectRatioError);if(a||y||!isImage(t)||isIE()||(t=await resizeImage(t,w),a=fileSizeValidation(t,P),i[e]=t),!a)return void Y(n.sizeError)}}await l(e+1)}else h.onChange&&h.onChange({files:i}),N(i),await G(i)};await l(0)},preview:x,previewDataTestId:_,readOnly:S,titleVariant:z})};AttachmentListContainer.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),allowedPDFUploadSizes:arrayOf(shape({name:string,heightInPt:number,widthInPt:number,tolerance:number})),classes:objectOf(string),containerClassname:string,customValidation:func,disabled:bool,dataTestId:string,deleteDataTestId:string,disableResize:bool,errorClassname:string,field:any,fieldTypes:arrayOf(string),hideLabels:bool,icon:node,input:shape({value:oneOfType([string,shape({name:string,type:string})])}),loadingTextClassname:string,maxFileSize:number,onLoaded:func,notifyOnInitialLoad:bool,previewDataTestId:string,readOnly:bool,resizeConfig:shape({type:string,maxWidth:number,maxHeight:number}),sanitize:func,titleVariant:string};export default WithTheme(retrieveStyle)(AttachmentListContainer);
+import React,{useEffect,useRef,useState}from"react";import{func,arrayOf,string,shape,number,node,bool,objectOf,oneOfType,any}from"prop-types";import{fileSignatureValidation,fileSizeValidation}from"@widergy/web-utils/lib/validate";import{resizeImage}from"@widergy/web-utils/lib/image";import{isIE}from"@widergy/web-utils/lib/browser";import isEmpty from"lodash/isEmpty";import{buttonTypes}from"../../types/buttonTypes";import WithTheme from"../WithTheme";import{retrieveStyle}from"./theme";import{FORMAT_ERROR_TEXT,SIZE_ERROR_TEXT,ASPECT_RATIO_ERROR_TEXT,MAX_FILES_ERROR,DEFAULT_MAX_FILES,PREVIEW_TYPES}from"./constants";import Attachment from"./layout";import{pdfAspectRatioValidation,isImage,isPDF,getSizeInMB,hasPreview,isDownloadable,getNotRepeatedFiles,getBlobFromUrl,getDefaultAttachment,getUploadIconAreaColors}from"./utils";const AttachmentListContainer=e=>{var t,a,i,r,n;let{acceptedFileTypes:l,actions:o,allowedPDFUploadSizes:s,classes:d,containerClassname:u,customValidation:m,dataTestId:c,deleteDataTestId:f,disabled:p,disableResize:y,errorClassname:g,field:v,fieldTypes:E=[],hideLabels:T,icon:R,input:h,loadingTextClassname:b,maxFileSize:A=99999999,onLoaded:I,notifyOnInitialLoad:O=!0,previewDataTestId:_,readOnly:S=!1,resizeConfig:w,sanitize:C,theme:F,titleVariant:z}=e;const{areaBackground:P,areaBorderColor:D}=getUploadIconAreaColors(F),L=null==v||null===(t=v.configuration)||void 0===t?void 0:t.help_text,x=(null==v||null===(a=v.configuration)||void 0===a?void 0:a.max_file_size)||A,V=(null==v||null===(i=v.configuration)||void 0===i?void 0:i.accepted_file_types)||l,M=(null==v||null===(r=v.configuration)||void 0===r?void 0:r.max_files)||DEFAULT_MAX_FILES,[B,X]=useState([]),[U,W]=useState(!1),[j,N]=useState(FORMAT_ERROR_TEXT),Y=useRef(null),[k,G]=useState((null==h||null===(n=h.value)||void 0===n?void 0:n.files)||[]),Z=(e,t)=>{W(!0),N(t?"".concat(e,"(").concat(t,")"):e)},H=async e=>{const t=e=>new Promise((t,a)=>{const i=new FileReader;i.onload=a=>{hasPreview(e)||isDownloadable(e)?t({src:a.target.result,file:e}):t({src:null,file:e})},i.onerror=e=>a(e),i.readAsDataURL(e)});try{const a=(await Promise.all(e.map(t))).map(e=>{let{src:t,file:a}=e;return((e,t)=>({...t,src:e}))(t,{type:a.type,name:a.name,size:getSizeInMB(a.size),onClick:()=>{return(e=a.name)&&X(t=>t.filter(t=>t.name!==e)),G(t=>{const a=Object.values(t).filter(t=>t.name!==e);return h.onChange&&h.onChange(isEmpty(a)?null:{files:a}),a}),Y.current&&(Y.current.value=null),void W(!1);var e}})});X(e=>getNotRepeatedFiles([...(e||[]).filter(e=>"loading"!==e.type),...a]))}catch(e){X(e=>(e||[]).filter(e=>"loading"!==e.type)),Z(null==e?void 0:e.message)}},q=async function(){var e,t;let a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];const r=Array.isArray(h.value)?h.value.length:1;if(a===r)return I&&I(),O&&h.onChange&&h.onChange({files:i}),G(i),void H(i);const n=Array.isArray(h.value)?h.value.flatMap(e=>Object.values(e)[0]):h.value,l=Array.isArray(h.value)?(null===(e=h.value[a])||void 0===e?void 0:e.url)||(null===(t=n[a])||void 0===t?void 0:t.url):h.value;getBlobFromUrl(l,async e=>{if(e){var t,r;const l=Array.isArray(h.value)?(null===(t=h.value[a])||void 0===t?void 0:t.name)||(null===(r=n[a])||void 0===r?void 0:r.name):null,o=new File([e],l||getDefaultAttachment(e.type.substring(e.type.indexOf("/")+1),a+1),{type:e.type});q(a+1,[...i,o])}else X(e=>{let t=!1;return e.map(e=>t||e.type!==PREVIEW_TYPES.LOADING?e:(t=!0,{...e,type:PREVIEW_TYPES.ERROR}))}),q(a+1,i)})};return useEffect(()=>{var e;if(isEmpty(k)?isEmpty(null===(e=h.value)||void 0===e?void 0:e.files)||H(h.value.files):H(k),Array.isArray(h.value)&&!isEmpty(h.value)||h.value&&"string"==typeof h.value){if(isEmpty(B)){const e=Array.isArray(h.value)?h.value.length:1;X(Array.from({length:e},()=>({type:PREVIEW_TYPES.LOADING})))}q()}},[h]),React.createElement(Attachment,{actions:o,acceptedFileTypes:V,areaBackground:P,areaBorderColor:D,classes:d,containerClassname:u,disabled:p,dataTestId:c,deleteDataTestId:f,error:U,errorClassname:g,errorText:j,field:v,fieldTypes:E,fileInputRef:Y,helpText:L,hideLabels:T,icon:R,loadingTextClassname:b,maxFiles:M,maxFileSize:getSizeInMB(x),onChange:async e=>{var t;const a=(null===(t=h.value)||void 0===t?void 0:t.files)||k,i=Object.values(isEmpty(a)?e.target.files:getNotRepeatedFiles([...a,...e.target.files])),r={formatError:FORMAT_ERROR_TEXT,sizeError:"".concat(SIZE_ERROR_TEXT," ").concat(getSizeInMB(x),"MB."),aspectRatioError:"".concat(ASPECT_RATIO_ERROR_TEXT," ").concat(null==s?void 0:s.map(e=>e.name).join(" - "),")")};W(!1);const n=async e=>{if(e<i.length){if(M&&i.length>M)return void Z(MAX_FILES_ERROR,M);let t=i[e];if(t){let a=!m||await m(t,Z);if(a){if(a=await fileSignatureValidation(t,E,t.type),!a)return void Z(r.formatError);if(C&&(t=await C(t)),a=fileSizeValidation(t,x),a&&isPDF(t)&&!isEmpty(s)&&(a=await pdfAspectRatioValidation(t,s),!a))return void Z(r.aspectRatioError);if(a||y||!isImage(t)||isIE()||(t=await resizeImage(t,w),a=fileSizeValidation(t,x),i[e]=t),!a)return void Z(r.sizeError)}}await n(e+1)}else h.onChange&&h.onChange({files:i}),G(i),await H(i)};await n(0)},preview:B,previewDataTestId:_,readOnly:S,titleVariant:z})};AttachmentListContainer.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),allowedPDFUploadSizes:arrayOf(shape({name:string,heightInPt:number,widthInPt:number,tolerance:number})),classes:objectOf(string),containerClassname:string,customValidation:func,disabled:bool,dataTestId:string,deleteDataTestId:string,disableResize:bool,errorClassname:string,field:any,fieldTypes:arrayOf(string),hideLabels:bool,icon:node,input:shape({value:oneOfType([string,shape({name:string,type:string})])}),loadingTextClassname:string,maxFileSize:number,onLoaded:func,notifyOnInitialLoad:bool,previewDataTestId:string,readOnly:bool,resizeConfig:shape({type:string,maxWidth:number,maxHeight:number}),sanitize:func,theme:any,titleVariant:string};export default WithTheme(retrieveStyle)(AttachmentListContainer);

package/dist/esm/components/UTAttachmentList/layout.js

@@ -1 +1 @@
-import React,{Fragment,useState}from"react";import{shape,string,bool,func,arrayOf,objectOf,elementType,instanceOf,number,object}from"prop-types";import{inputFiles}from"@widergy/web-utils/lib/constants/files";import isEmpty from"lodash/isEmpty";import download from"downloadjs";import{buttonTypes}from"../../types/buttonTypes";import UTLabel from"../UTLabel";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTFieldLabel from"../UTFieldLabel";import{DEFAULT_UPLOADING_TEXT,FILE_NOT_FOUND_ERROR_TEXT,FORMAT_FILE_LABEL,ICON_SIZE,INDICATIONS,MAX_SIZE_FILE_LABEL,MB_LABEL,PREVIEW_TYPES,UPLOAD_FILE,previewPropType}from"./constants";import Preview from"./components/Preview";import{getAvailableFileTypesLabel,isAudio,isDownloadable,isImage,isVideo}from"./utils";import PreviewModal from"./components/PreviewModal";import styles from"./styles.module.scss";const AttachmentList=e=>{var t;let{actions:a,acceptedFileTypes:l,classes:r,dataTestId:n,deleteDataTestId:o,disabled:c,error:s,errorText:i,field:m,fieldTypes:p=[],fileInputRef:T,helpText:d,hideLabels:E,maxFiles:I,maxFileSize:y,onChange:u,preview:R,previewDataTestId:v,readOnly:L,RemoveIcon:b,titleVariant:f}=e;const _=((null==m||null===(t=m.configuration)||void 0===t?void 0:t.ignore_title)||E)&&(null==m?void 0:m.title),O=l||p.map(e=>inputFiles[e].inputType).join(),U=b||"IconTrash",g=isEmpty(R),h=R.length<I,[F,w]=useState(!1),[N,A]=useState(null),P=e=>{A(e),w(!0)};return React.createElement(Fragment,null,_&&React.createElement("div",{className:styles.upperTitleContainer},React.createElement(UTFieldLabel,{actions:a,readOnly:m.read_only,size:f,required:m.required},null==m?void 0:m.title)),React.createElement("div",{className:"".concat(styles.container," ").concat(r.container," ").concat(s&&r.errorContainer," ").concat(L&&r.readOnlyContainer)},!g&&R.map(e=>React.createElement("div",{className:"".concat(styles.previewContainer," ").concat(r.previewContainer),"data-testid":v},e.type===PREVIEW_TYPES.LOADING?React.createElement(Fragment,null,React.createElement(UTIcon,{name:"IconLoader",className:styles.loaderIcon,size:ICON_SIZE,colorTheme:"accent"}),React.createElement(UTLabel,{className:styles.loadingText,colorTheme:"gray",variant:"small"},DEFAULT_UPLOADING_TEXT),React.createElement("div",null)):e.type===PREVIEW_TYPES.ERROR?React.createElement(Fragment,null,React.createElement(UTIcon,{name:"IconX",colorTheme:"error",size:ICON_SIZE}),React.createElement(UTLabel,{className:styles.errorText,colorTheme:"error",variant:"small"},FILE_NOT_FOUND_ERROR_TEXT),React.createElement("div",null)):React.createElement(Fragment,null,e.src?React.createElement(Preview,{classes:r,openPreviewModal:P,preview:e,previewProps:R.previewProps}):React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent",size:ICON_SIZE}),React.createElement("div",{className:styles.fileContainer},React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},e.name),React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},e.size,MB_LABEL)),(isAudio(e)||isVideo(e))&&React.createElement(UTButton,{disabled:c,Icon:"IconPlayerPlay",onClick:()=>{A(e),w(!0)},size:"small",variant:"text"}),(isDownloadable(e)||L&&isImage(e))&&e.src&&React.createElement(UTButton,{Icon:"IconDownload",onClick:()=>download(e.src,e.name,e.type),size:"small",variant:"text"}),!L&&React.createElement(UTButton,{dataTestId:o,disabled:c,Icon:U,onClick:e.onClick,size:"small",variant:"text"})))),!L&&g&&React.createElement(UTIcon,{name:"IconCloudUpload",className:"".concat(styles.filesIcon," ").concat(r.filesIcon),colorTheme:"accent",size:ICON_SIZE}),!L&&React.createElement("div",{className:"".concat(styles.labelAndInputContainer," ").concat(!g&&styles.positionRelative)},g&&React.createElement(UTLabel,{colorTheme:"accent"},INDICATIONS),React.createElement(UTButton,{classNames:{root:!g&&styles.uploadButtonFullWidth},colorTheme:"primary",disabled:!h,Icon:"IconUpload",variant:"semitransparent"},UPLOAD_FILE),h&&React.createElement("input",{className:styles.input,"data-testid":n,accept:O,ref:T,type:"file",onChange:u,disabled:c,multiple:!0})),!L&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",className:styles.aclaration},"".concat(FORMAT_FILE_LABEL).concat(getAvailableFileTypesLabel(O),".")," ",React.createElement("br",null),"".concat(MAX_SIZE_FILE_LABEL).concat(y,"MB"))),d&&React.createElement(UTLabel,{className:styles.helpText,colorTheme:"gray",variant:"small"},d),s&&React.createElement("div",{className:styles.errorLabelContainer},React.createElement(UTIcon,{name:"IconX",colorTheme:"error",size:ICON_SIZE}),React.createElement(UTLabel,{className:styles.errorText,colorTheme:"error",variant:"small"},i)),F&&React.createElement(PreviewModal,{preview:N,previewProps:R.previewProps,previewModalIsOpen:F,closePreviewModal:()=>w(!1)}))};AttachmentList.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),classes:objectOf(string),dataTestId:string,deleteDataTestId:string,disabled:bool,error:bool,errorText:string,field:object,fieldTypes:arrayOf(string),fileInputRef:objectOf(shape({current:instanceOf(Element)})),helpText:string,hideLabels:bool,maxFileSize:number,maxFiles:number,onChange:func,preview:arrayOf(shape({src:string,type:string})),previewDataTestId:string,previewProps:previewPropType,readOnly:bool,RemoveIcon:elementType,titleVariant:string};export default AttachmentList;
+import React,{Fragment,useState}from"react";import{shape,string,bool,func,arrayOf,objectOf,elementType,instanceOf,number,object}from"prop-types";import{inputFiles}from"@widergy/web-utils/lib/constants/files";import isEmpty from"lodash/isEmpty";import download from"downloadjs";import{buttonTypes}from"../../types/buttonTypes";import UTLabel from"../UTLabel";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTFieldLabel from"../UTFieldLabel";import UTValidation from"../UTValidation";import{formatErrorToValidation}from"../UTValidation/utils";import{DEFAULT_UPLOADING_TEXT,FILE_NOT_FOUND_ERROR_TEXT,FORMAT_FILE_LABEL,ICON_SIZE,INDICATIONS,MAX_SIZE_FILE_LABEL,MB_LABEL,PREVIEW_TYPES,UPLOAD_ICON_AREA_RADIUS,UPLOAD_ICON_AREA_SIZE,UPLOAD_ICON_SIZE,previewPropType}from"./constants";import Preview from"./components/Preview";import{getAvailableFileTypesLabel,isAudio,isDownloadable,isImage,isVideo}from"./utils";import PreviewModal from"./components/PreviewModal";import styles from"./styles.module.scss";const AttachmentList=e=>{var t;let{actions:a,acceptedFileTypes:r,areaBackground:o,areaBorderColor:l,classes:n,dataTestId:i,deleteDataTestId:c,disabled:s,error:m,errorClassname:d,errorText:p,field:T,fieldTypes:E=[],fileInputRef:I,helpText:R,hideLabels:y,maxFiles:u,maxFileSize:v,onChange:L,preview:_,previewDataTestId:b,readOnly:f,RemoveIcon:O,titleVariant:g}=e;const U=((null==T||null===(t=T.configuration)||void 0===t?void 0:t.ignore_title)||y)&&(null==T?void 0:T.title),A=r||E.map(e=>inputFiles[e].inputType).join(),N=O||"IconTrash",C=isEmpty(_),w=_.length<u,[h,P]=useState(!1),[F,D]=useState(null),[S,B]=useState(!1),M=e=>{D(e),P(!0)};return React.createElement(React.Fragment,null,U&&React.createElement("div",{className:styles.upperTitleContainer},React.createElement(UTFieldLabel,{actions:a,readOnly:T.read_only,size:g,required:T.required},null==T?void 0:T.title)),React.createElement("div",{className:"".concat(styles.container," ").concat(n.container," ").concat(m&&n.errorContainer," ").concat(f&&n.readOnlyContainer),onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},!C&&_.map(e=>React.createElement("div",{className:"".concat(styles.previewContainer," ").concat(n.previewContainer),"data-testid":b},e.type===PREVIEW_TYPES.LOADING?React.createElement(React.Fragment,null,React.createElement(UTIcon,{name:"IconLoader",className:styles.loaderIcon,size:ICON_SIZE,colorTheme:"accent"}),React.createElement(UTLabel,{className:styles.loadingText,colorTheme:"gray",variant:"small"},DEFAULT_UPLOADING_TEXT),React.createElement("div",null)):e.type===PREVIEW_TYPES.ERROR?React.createElement(React.Fragment,null,React.createElement(UTIcon,{name:"IconX",colorTheme:"error",size:ICON_SIZE}),React.createElement(UTLabel,{className:styles.errorText,colorTheme:"error",variant:"small"},FILE_NOT_FOUND_ERROR_TEXT),React.createElement("div",null)):React.createElement(React.Fragment,null,e.src?React.createElement(Preview,{classes:n,openPreviewModal:M,preview:e,previewProps:_.previewProps}):React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent",size:ICON_SIZE}),React.createElement("div",{className:styles.fileContainer},React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},e.name),React.createElement(UTLabel,{colorTheme:"gray",variant:"small"},e.size,MB_LABEL)),(isAudio(e)||isVideo(e))&&React.createElement(UTButton,{disabled:s,Icon:"IconPlayerPlay",onClick:()=>{D(e),P(!0)},size:"small",variant:"text"}),(isDownloadable(e)||f&&isImage(e))&&e.src&&React.createElement(UTButton,{Icon:"IconDownload",onClick:()=>download(e.src,e.name,e.type),size:"small",variant:"text"}),!f&&React.createElement(UTButton,{dataTestId:c,disabled:s,Icon:N,onClick:e.onClick,size:"small",variant:"text"})))),!f&&C&&React.createElement(UTIcon,{area:!0,areaBackground:o,areaBorderColor:l,areaRadius:UPLOAD_ICON_AREA_RADIUS,areaSize:UPLOAD_ICON_AREA_SIZE,className:"".concat(styles.filesIcon," ").concat(n.filesIcon),colorTheme:S?"accent":"gray",name:"IconCloudUpload",shade:S?"03":void 0,size:UPLOAD_ICON_SIZE}),!f&&React.createElement("div",{className:"".concat(styles.labelAndInputContainer," ").concat(!C&&styles.positionRelative)},C&&React.createElement(UTLabel,{colorTheme:S?"accent":void 0,shade:S?"05":void 0,variant:"body"},INDICATIONS),w&&React.createElement("input",{className:styles.input,"data-testid":i,accept:A,ref:I,type:"file",onChange:L,disabled:s,multiple:!0})),!f&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",className:styles.aclaration},"".concat(FORMAT_FILE_LABEL).concat(getAvailableFileTypesLabel(A),".")," ",React.createElement("br",null),"".concat(MAX_SIZE_FILE_LABEL).concat(v,"MB"))),R&&React.createElement(UTLabel,{className:styles.helpText,colorTheme:"gray",variant:"small"},R),m&&React.createElement(UTValidation,{className:"".concat(styles.errorMessage," ").concat(d||""),validationData:formatErrorToValidation(p)}),h&&React.createElement(PreviewModal,{preview:F,previewProps:_.previewProps,previewModalIsOpen:h,closePreviewModal:()=>P(!1)}))};AttachmentList.propTypes={acceptedFileTypes:string,actions:arrayOf(buttonTypes),areaBackground:string,areaBorderColor:string,classes:objectOf(string),dataTestId:string,deleteDataTestId:string,disabled:bool,error:bool,errorClassname:string,errorText:string,field:object,fieldTypes:arrayOf(string),fileInputRef:objectOf(shape({current:instanceOf(Element)})),helpText:string,hideLabels:bool,maxFileSize:number,maxFiles:number,onChange:func,preview:arrayOf(shape({src:string,type:string})),previewDataTestId:string,previewProps:previewPropType,readOnly:bool,RemoveIcon:elementType,titleVariant:string};export default AttachmentList;

package/dist/esm/components/UTAttachmentList/styles.module.scss

@@ -1,37 +1,29 @@
-$box-shadow: #e4e6eae5;
-
 .container {
   align-items: center;
-  border-radius: 5px;
+  border-radius: var(--UT-attachmentList-radius, 4px);
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  grid-gap: 16px;
-  height: 100%;
-  justify-content: center;
-  max-width: 452px;
-  min-height: 210px;
-  padding: 0 16px;
+  gap: var(--UT-attachmentList-gap-lg, 16px);
+  grid-gap: var(--UT-attachmentList-gap-lg, 16px);
+  height: auto;
+  padding: var(--UT-attachmentList-padding-md, 16px);
   position: relative;
-  width: calc(100% - 32px);
+  background-color: var(--light01);
 }
 
 .filesIcon {
   margin-bottom: -8px;
+  transition: color 0.2s ease-in-out, stroke 0.2s ease-in-out;
 }
 
 .labelAndInputContainer {
   align-items: center;
   display: flex;
-  grid-gap: 6px;
+  grid-gap: var(--UT-attachmentList-gap-sm, 8px);
   justify-content: center;
   width: 100%;
 }
 
-.uploadButtonFullWidth {
-  width: 100%;
-}
-
 .input {
   cursor: pointer;
   display: block;
@@ -46,27 +38,22 @@ $box-shadow: #e4e6eae5;
 }
 
 .aclaration {
-  margin-bottom: 16px;
   text-align: center;
 }
 
 .previewContainer {
   align-items: center;
-  border-radius: 5px;
-  box-shadow: 0px 3px 6px $box-shadow;
+  border-radius: var(--UT-attachmentList-radius, 4px);
+  border: 1px solid var(--light04);
   box-sizing: border-box;
   cursor: initial;
   display: flex;
   flex-direction: row;
-  grid-gap: 16px;
+  grid-gap: var(--UT-attachmentList-gap-lg, 16px);
   justify-content: space-between;
-  padding: 16px;
+  padding: var(--UT-attachmentList-padding-md, 16px);
   width: 100%;
   z-index: 5;
-
-  &:first-child {
-    margin-top: 16px;
-  }
 }
 
 .positionRelative {
@@ -77,19 +64,16 @@ $box-shadow: #e4e6eae5;
   display: flex;
   flex: 1;
   flex-direction: column;
-  grid-gap: 4px;
+  grid-gap: var(--UT-attachmentList-gap-xs, 4px);
   overflow-wrap: anywhere;
 }
 
 .helpText {
-  margin-top: 12px;
+  margin-top: var(--UT-attachmentList-margin-sm, 12px);
 }
 
-.errorLabelContainer {
-  display: flex;
-  flex-direction: row;
-  grid-gap: 8px;
-  margin-top: 12px;
+.errorMessage {
+  margin-top: var(--UT-attachmentList-gap-sm, 8px);
 }
 
 @keyframes rotate {
@@ -112,6 +96,6 @@ $box-shadow: #e4e6eae5;
 }
 
 .upperTitleContainer {
-  padding: 0 0 16px;
-  width: calc(100% - 32px);
-}
+  padding-bottom: var(--UT-attachmentList-padding-md, 16px);
+  width: 500px;
+}

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

@@ -1 +1 @@
-export const retrieveStyle=e=>{var o,t,l,r,n;let{theme:i}=e;return{container:{backgroundColor:null===(o=i.Palette)||void 0===o?void 0:o.light["03"],border:"1px dashed ".concat((null===(t=i.Palette)||void 0===t||null===(t=t.actions)||void 0===t||null===(t=t.accent)||void 0===t?void 0:t["04"])||i.Palette.accent["04"])},errorContainer:{border:"2px solid ".concat(null===(l=i.Palette)||void 0===l?void 0:l.error["04"])},previewContainer:{backgroundColor:null===(r=i.Palette)||void 0===r?void 0:r.light["01"]},readOnlyContainer:{border:"1px solid ".concat(null===(n=i.Palette)||void 0===n?void 0:n.light["04"])}}};
+export const retrieveStyle=e=>{var o,r,t,l;let{theme:i}=e;return{container:{border:"1px solid ".concat(null===(o=i.Palette)||void 0===o?void 0:o.light["04"])},errorContainer:{border:"2px solid ".concat(null===(r=i.Palette)||void 0===r?void 0:r.error["04"])},previewContainer:{backgroundColor:null===(t=i.Palette)||void 0===t?void 0:t.light["01"]},readOnlyContainer:{border:"1px solid ".concat(null===(l=i.Palette)||void 0===l?void 0:l.light["04"])}}};

package/dist/esm/components/UTAttachmentList/utils.js

@@ -1 +1 @@
-import{inputFiles}from"@widergy/web-utils/lib/constants/files";import{DEFAULT_ATTACHMENT_NAME}from"./constants";window["pdfjs-dist/build/pdf"]&&(window["pdfjs-dist/build/pdf"].GlobalWorkerOptions.workerSrc="//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(window["pdfjs-dist/build/pdf"].version,"/pdf.worker.js"));const getImage=async e=>fetch(e,{method:"GET"}).catch(e=>console.error(e));export const getBlobFromUrl=async(e,t)=>{if(!e||!t)return!1;const i=await getImage(e);if(null!=i&&i.ok)try{t(await i.blob())}catch{t(null)}else t(null)};const lengthMatches=(e,t,i)=>{const s=e*(i/100);return Math.abs(e-t)<s},pageMatches=(e,t)=>{const i=e.getViewport({scale:1});return t.some(e=>lengthMatches(e.heightInPt,i.height,e.toleranceInPercentage)&&lengthMatches(e.widthInPt,i.width,e.toleranceInPercentage)||lengthMatches(e.heightInPt,i.width,e.toleranceInPercentage)&&lengthMatches(e.widthInPt,i.height,e.toleranceInPercentage))};export const pdfAspectRatioValidation=async(e,t)=>{const i=window["pdfjs-dist/build/pdf"].getDocument(URL.createObjectURL(e)),s=await i.promise,n=s.numPages,o=[];for(let e=1;e<=n;e+=1)o.push(s.getPage(e));return(await Promise.all(o)).every(e=>pageMatches(e,t))};export const isImage=e=>inputFiles.image.validType.includes(null==e?void 0:e.type);export const isPDF=e=>inputFiles.pdf.validType.includes(null==e?void 0:e.type);export const isAudio=e=>inputFiles.audio.validType.includes(null==e?void 0:e.type);export const isVideo=e=>inputFiles.video.validType.includes(null==e?void 0:e.type);export const isHTML=e=>inputFiles.html.validType.includes(null==e?void 0:e.type);export const isCSV=e=>inputFiles.csv.validType.includes(null==e?void 0:e.type);export const isXLS=e=>inputFiles.xls.validType.includes(null==e?void 0:e.type);export const isXLSX=e=>inputFiles.xlsx.validType.includes(null==e?void 0:e.type);export const isDownloadable=e=>isPDF(e)||isCSV(e)||isXLS(e)||isXLSX(e);export const hasPreview=e=>isImage(e)||isAudio(e)||isVideo(e)||isPDF(e);export const isValidFile=e=>hasPreview(e)||isPDF(e)||isHTML(e);export const isNewFile=(e,t)=>{var i,s;if(!e&&!t)return!1;if(!e||!t)return!0;const n=typeof e;return n!==typeof t||("string"===n?e!==t:(null===(i=e.file)||void 0===i?void 0:i.lastModified)!==(null===(s=t.file)||void 0===s?void 0:s.lastModified))};export const getAvailableFileTypesLabel=e=>Array.isArray(e)?e.join(", ").replace(/,\s([^,]+)$/," o $1"):e.split(",").filter(e=>e.trim().startsWith(".")).join(", ").replace(/,\s([^,]+)$/," o $1");export const getSizeInMB=e=>(e/1048576).toFixed(2);export const getNotRepeatedFiles=e=>e.filter((e,t,i)=>t===i.findIndex(t=>t.name===e.name));export const getDefaultAttachment=(e,t)=>"".concat(DEFAULT_ATTACHMENT_NAME,"-").concat(t).concat(e&&".".concat(e));
+import{inputFiles}from"@widergy/web-utils/lib/constants/files";import{DEFAULT_ATTACHMENT_NAME}from"./constants";window["pdfjs-dist/build/pdf"]&&(window["pdfjs-dist/build/pdf"].GlobalWorkerOptions.workerSrc="//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(window["pdfjs-dist/build/pdf"].version,"/pdf.worker.js"));const getImage=async e=>fetch(e,{method:"GET"}).catch(e=>console.error(e));export const getBlobFromUrl=async(e,t)=>{if(!e||!t)return!1;const i=await getImage(e);if(null!=i&&i.ok)try{t(await i.blob())}catch{t(null)}else t(null)};const lengthMatches=(e,t,i)=>{const o=e*(i/100);return Math.abs(e-t)<o},pageMatches=(e,t)=>{const i=e.getViewport({scale:1});return t.some(e=>lengthMatches(e.heightInPt,i.height,e.toleranceInPercentage)&&lengthMatches(e.widthInPt,i.width,e.toleranceInPercentage)||lengthMatches(e.heightInPt,i.width,e.toleranceInPercentage)&&lengthMatches(e.widthInPt,i.height,e.toleranceInPercentage))};export const pdfAspectRatioValidation=async(e,t)=>{const i=window["pdfjs-dist/build/pdf"].getDocument(URL.createObjectURL(e)),o=await i.promise,s=o.numPages,n=[];for(let e=1;e<=s;e+=1)n.push(o.getPage(e));return(await Promise.all(n)).every(e=>pageMatches(e,t))};export const isImage=e=>inputFiles.image.validType.includes(null==e?void 0:e.type);export const isPDF=e=>inputFiles.pdf.validType.includes(null==e?void 0:e.type);export const isAudio=e=>inputFiles.audio.validType.includes(null==e?void 0:e.type);export const isVideo=e=>inputFiles.video.validType.includes(null==e?void 0:e.type);export const isHTML=e=>inputFiles.html.validType.includes(null==e?void 0:e.type);export const isCSV=e=>inputFiles.csv.validType.includes(null==e?void 0:e.type);export const isXLS=e=>inputFiles.xls.validType.includes(null==e?void 0:e.type);export const isXLSX=e=>inputFiles.xlsx.validType.includes(null==e?void 0:e.type);export const isDownloadable=e=>isPDF(e)||isCSV(e)||isXLS(e)||isXLSX(e);export const hasPreview=e=>isImage(e)||isAudio(e)||isVideo(e)||isPDF(e);export const isValidFile=e=>hasPreview(e)||isPDF(e)||isHTML(e);export const isNewFile=(e,t)=>{var i,o;if(!e&&!t)return!1;if(!e||!t)return!0;const s=typeof e;return s!==typeof t||("string"===s?e!==t:(null===(i=e.file)||void 0===i?void 0:i.lastModified)!==(null===(o=t.file)||void 0===o?void 0:o.lastModified))};export const getAvailableFileTypesLabel=e=>Array.isArray(e)?e.join(", ").replace(/,\s([^,]+)$/," o $1"):e.split(",").filter(e=>e.trim().startsWith(".")).join(", ").replace(/,\s([^,]+)$/," o $1");export const getSizeInMB=e=>(e/1048576).toFixed(2);export const getNotRepeatedFiles=e=>e.filter((e,t,i)=>t===i.findIndex(t=>t.name===e.name));export const getDefaultAttachment=(e,t)=>"".concat(DEFAULT_ATTACHMENT_NAME,"-").concat(t).concat(e&&".".concat(e));export const getUploadIconAreaColors=e=>({areaBackground:e.Palette.light["01"],areaBorderColor:e.Palette.light["03"]});

package/dist/esm/components/UTBaseInputField/components/IconAdornment/constants.js

@@ -1 +1 @@
-export const ERROR_ICON="IconAlertCircle";export const ICON_SIZE=20;
+export const ERROR_ICON="IconAlertCircle";export const ICON_SIZE=16;export const ICON_SIZE_CSS_VAR="var(--UT-baseInput-adornment-size, 16px)";

package/dist/esm/components/UTBaseInputField/components/IconAdornment/index.js

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(o){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)({}).hasOwnProperty.call(e,r)&&(o[r]=e[r])}return o},_extends.apply(null,arguments)}import React from"react";import{shape,string,elementType,bool,oneOfType,object}from"prop-types";import UTIcon from"../../../UTIcon";import{isUTIcon}from"../../../../utils/componentUtils";import{ERROR_ICON,ICON_SIZE}from"./constants";import{getIconColorProps}from"./utils";const IconAdornment=o=>{var n;let{changeIconOnError:e=!0,changeOnError:r,changeOnFocus:t,colorTheme:c,error:l,focused:s,Icon:i,inputStyle:a,shade:p,showOnlyOnError:m}=o;const I=m||r;if(m&&!l)return null;const O=l&&e?ERROR_ICON:i;return O?isUTIcon(O)?React.createElement(UTIcon,_extends({name:O,size:ICON_SIZE},getIconColorProps(I,t,c,l,s,p))):React.createElement(i,{size:ICON_SIZE,fill:null==a||null===(n=a.root)||void 0===n?void 0:n.color}):null};IconAdornment.propTypes={changeIconOnError:bool,changeOnError:bool,changeOnFocus:bool,colorTheme:string,error:oneOfType([bool,string]),focused:bool,Icon:elementType,inputStyle:shape({root:object}),shade:string,showOnlyOnError:bool};export default IconAdornment;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(o){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)({}).hasOwnProperty.call(e,r)&&(o[r]=e[r])}return o},_extends.apply(null,arguments)}import React from"react";import{shape,string,elementType,bool,oneOfType,object}from"prop-types";import UTIcon from"../../../UTIcon";import{isUTIcon}from"../../../../utils/componentUtils";import{ERROR_ICON,ICON_SIZE,ICON_SIZE_CSS_VAR}from"./constants";import{getIconColorProps}from"./utils";const IconAdornment=o=>{var n;let{changeIconOnError:e=!0,changeOnError:r,changeOnFocus:t,colorTheme:c,error:l,focused:s,Icon:i,inputStyle:I,shade:a,showOnlyOnError:p}=o;const O=p||r;if(p&&!l)return null;const m=l&&e?ERROR_ICON:i;return m?isUTIcon(m)?React.createElement(UTIcon,_extends({name:m,size:ICON_SIZE_CSS_VAR},getIconColorProps(O,t,c,l,s,a))):React.createElement(i,{fill:null==I||null===(n=I.root)||void 0===n?void 0:n.color,size:ICON_SIZE,style:{fontSize:ICON_SIZE_CSS_VAR,height:ICON_SIZE_CSS_VAR,width:ICON_SIZE_CSS_VAR}}):null};IconAdornment.propTypes={changeIconOnError:bool,changeOnError:bool,changeOnFocus:bool,colorTheme:string,error:oneOfType([bool,string]),focused:bool,Icon:elementType,inputStyle:shape({root:object}),shade:string,showOnlyOnError:bool};export default IconAdornment;

package/dist/esm/components/UTBaseInputField/components/TooltipAdornment/index.js

@@ -1 +1 @@
-import React from"react";import{string}from"prop-types";import UTIcon from"../../../UTIcon";import UTTooltip from"../../../UTTooltip";import styles from"./styles.module.scss";const TooltipAdornment=t=>{let{contentDataTestId:o,dataTestId:e,tooltip:r}=t;return React.createElement(UTTooltip,{content:r,dataTestId:o},React.createElement("div",{className:styles.tooltip,"data-testid":e},React.createElement(UTIcon,{name:"IconInfoCircle",colorTheme:"gray"})))};TooltipAdornment.propTypes={contentDataTestId:string,dataTestId:string,tooltip:string};export default TooltipAdornment;
+import React from"react";import{string}from"prop-types";import UTIcon from"../../../UTIcon";import UTTooltip from"../../../UTTooltip";import styles from"./styles.module.scss";const TooltipAdornment=t=>{let{contentDataTestId:o,dataTestId:e,tooltip:r}=t;return React.createElement(UTTooltip,{content:r,dataTestId:o,tippyProps:{appendTo:()=>document.body,interactive:!1}},React.createElement("div",{className:styles.tooltip,"data-testid":e},React.createElement(UTIcon,{name:"IconInfoCircle",colorTheme:"gray"})))};TooltipAdornment.propTypes={contentDataTestId:string,dataTestId:string,tooltip:string};export default TooltipAdornment;

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import{string,bool,func,number,objectOf,arrayOf,shape,object,oneOfType,instanceOf}from"prop-types";import React,{useCallback,useMemo,useState}from"react";import TextField from"@material-ui/core/TextField";import{mergeClasses}from"../../utils/classesUtils";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{COMPONENTS_MAPPER,COMPONENT_KEYS}from"./constants";import{retrieveStyle}from"./theme";import{validateAdornments}from"./utils";import styles from"./styles.module.scss";const UTBaseInputField=e=>{let{autocomplete:t,classes:n,classNames:o={},dataKeyboard:a,dataTestId:r,disabled:s,error:l,id:i,inputRef:c,leftAdornments:m=[],maxLength:u,maxRows:p=1,minRows:d,muiProps:f,name:y,onBlur:h,onChange:b=()=>{},onFocus:g,onKeyDown:C=()=>{},placeholder:O,readOnly:T,rightAdornments:v=[],showCharacterCount:R,type:w,value:P=null}=e;const x=useMemo(()=>mergeClasses(n,o),[o,n]),[E,N]=useState(!1),A=useCallback(e=>{N(!0),null==g||g(e)},[g]),k=useCallback(e=>{N(!1),null==h||h(e)},[h]),M=useCallback(e=>{const t=e.target.value;if("numeric"===w){const e=t.replace(/\D/g,"");null==b||b(e)}else null==b||b(t)},[b,w]),j=useCallback(e=>{const t=["Backspace","ArrowLeft","ArrowRight","Delete","Tab","Enter"].includes(e.key),n=/^[0-9]$/.test(e.key);"numeric"!==w||n||t?t||e.stopPropagation():e.preventDefault(),C(e)},[w]),I=p>1,S=useMemo(()=>R&&u&&!s&&!T,[R,u,s,T]),F=useMemo(()=>validateAdornments(m)?m:[],[m]),_=useMemo(()=>validateAdornments(v)?v:[],[v]),B=useCallback(e=>{const t=COMPONENTS_MAPPER[e.name],n={...e.props,error:l,focused:E,disabled:s&&!T,classNames:e.name===COMPONENT_KEYS.ACTION?{root:styles.actionButton}:void 0};return t?React.createElement(t,_extends({},n,{key:e.key||e.name})):null},[l,s,T,E]);return React.createElement(TextField,_extends({autocomplete:t||"new-password",className:x.container,disabled:s||T,error:l,form:{autocomplete:"off"},id:i,inputRef:c,margin:"none",maxRows:p,minRows:d||p,multiline:I,onBlur:k,onChange:M,onFocus:A,onKeyDown:j,placeholder:O,type:"numeric"===w?"text":w,value:P,variant:"outlined"},f,{InputProps:{inputProps:{autocomplete:t,"data-testid":r,"data-keyboard":a,maxLength:u,name:y,readOnly:T,...null==f?void 0:f.inputProps},classes:{adornedEnd:styles.elementsContainer,adornedStart:styles.elementsContainer,input:x.input,notchedOutline:"".concat(x.inputContainer," ").concat(E&&x.focusedInputContainer),root:"".concat(x.root," ").concat(E&&x.focusedRoot," ").concat(P&&x.withValueRoot)},startAdornment:F.length>0?React.createElement("div",{className:styles.adornmentsContainer},F.map(B)):S&&React.createElement(UTLabel,{className:x.charactersCount,colorTheme:"gray",variant:"small"},(null==P?void 0:P.length)||0,"/",u),endAdornment:_.length>0&&React.createElement("div",{className:"".concat(styles.adornmentsContainer," ").concat(I&&styles.multilineAdornmentsContainer)},_.map(B)),...null==f?void 0:f.InputProps}}))};export const propTypes={alwaysShowPlaceholder:bool,autocomplete:string,classes:objectOf(string),classNames:objectOf(string),dataKeyboard:string,dataTestId:string,disabled:bool,error:oneOfType([bool,string]),id:string,inputRef:oneOfType([func,shape({current:instanceOf(Element)})]),leftAdornments:arrayOf(shape({name:string.isRequired,props:object})),maxLength:number,maxRows:number,minRows:number,muiProps:shape({inputProps:object,InputProps:object}),name:string,onBlur:func,onChange:func,onFocus:func,onKeyDown:func,placeholder:string,readOnly:bool,rightAdornments:arrayOf(shape({name:string.isRequired,props:object})),showCharacterCount:bool,type:string,value:string,variant:string};UTBaseInputField.propTypes=propTypes;export default WithTheme(retrieveStyle)(UTBaseInputField);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_extends.apply(null,arguments)}import{string,bool,func,number,objectOf,arrayOf,shape,object,oneOfType,instanceOf}from"prop-types";import React,{useCallback,useMemo,useState}from"react";import TextField from"@material-ui/core/TextField";import{mergeClasses}from"../../utils/classesUtils";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{COMPONENTS_MAPPER,COMPONENT_KEYS}from"./constants";import{retrieveStyle}from"./theme";import{validateAdornments}from"./utils";import styles from"./styles.module.scss";const UTBaseInputField=e=>{let{autocomplete:t,classes:n,classNames:o={},dataKeyboard:a,dataTestId:s,disabled:r,error:l,id:i,inputRef:c,inputSize:m,leftAdornments:u=[],maxLength:p,maxRows:d=1,minRows:f,muiProps:g,name:y,onBlur:h,onChange:b=()=>{},onFocus:O,onKeyDown:T=()=>{},placeholder:C,readOnly:v,rightAdornments:R=[],showCharacterCount:w,type:P,value:x=null}=e;const E=useMemo(()=>mergeClasses(n,o),[o,n]),[N,A]=useState(!1),S=useCallback(e=>{A(!0),null==O||O(e)},[O]),k=useCallback(e=>{A(!1),null==h||h(e)},[h]),M=useCallback(e=>{const t=e.target.value;if("numeric"===P){const e=t.replace(/\D/g,"");null==b||b(e)}else null==b||b(t)},[b,P]),j=useCallback(e=>{const t=["Backspace","ArrowLeft","ArrowRight","Delete","Tab","Enter"].includes(e.key),n=/^[0-9]$/.test(e.key);"numeric"!==P||n||t?t||e.stopPropagation():e.preventDefault(),T(e)},[P]),I=d>1,F="small"===m?styles.gapSmall:styles.gapMedium,_=useMemo(()=>w&&p&&!r&&!v,[w,p,r,v]),B=useMemo(()=>validateAdornments(u)?u:[],[u]),K=useMemo(()=>validateAdornments(R)?R:[],[R]),L=useCallback(e=>{const t=COMPONENTS_MAPPER[e.name],n={...e.props,error:l,focused:N,disabled:r&&!v,classNames:e.name===COMPONENT_KEYS.ACTION?{root:styles.actionButton}:void 0};return t?React.createElement(t,_extends({},n,{key:e.key||e.name})):null},[l,r,v,N]);return React.createElement(TextField,_extends({autocomplete:t||"new-password",className:E.container,disabled:r||v,error:l,form:{autocomplete:"off"},id:i,inputRef:c,margin:"none",maxRows:d,minRows:f||d,multiline:I,onBlur:k,onChange:M,onFocus:S,onKeyDown:j,placeholder:C,type:"numeric"===P?"text":P,value:x,variant:"outlined"},g,{InputProps:{inputProps:{autocomplete:t,"data-testid":s,"data-keyboard":a,maxLength:p,name:y,readOnly:v,...null==g?void 0:g.inputProps},classes:{adornedEnd:F,adornedStart:F,input:E.input,notchedOutline:"".concat(E.inputContainer," ").concat(N&&E.focusedInputContainer),root:"".concat(E.root," ").concat(N&&E.focusedRoot," ").concat(x&&E.withValueRoot)},startAdornment:B.length>0?React.createElement("div",{className:"".concat(styles.adornmentsContainer," ").concat(F)},B.map(L)):_&&React.createElement(UTLabel,{className:E.charactersCount,colorTheme:"gray",variant:"small"},(null==x?void 0:x.length)||0,"/",p),endAdornment:K.length>0&&React.createElement("div",{className:"".concat(styles.adornmentsContainer," ").concat(F," ").concat(I&&styles.multilineAdornmentsContainer)},K.map(L)),...null==g?void 0:g.InputProps}}))};export const propTypes={alwaysShowPlaceholder:bool,autocomplete:string,classes:objectOf(string),classNames:objectOf(string),dataKeyboard:string,dataTestId:string,disabled:bool,error:oneOfType([bool,string]),id:string,inputRef:oneOfType([func,shape({current:instanceOf(Element)})]),inputSize:string,leftAdornments:arrayOf(shape({name:string.isRequired,props:object})),maxLength:number,maxRows:number,minRows:number,muiProps:shape({inputProps:object,InputProps:object}),name:string,onBlur:func,onChange:func,onFocus:func,onKeyDown:func,placeholder:string,readOnly:bool,rightAdornments:arrayOf(shape({name:string.isRequired,props:object})),showCharacterCount:bool,type:string,value:string,variant:string};UTBaseInputField.propTypes=propTypes;export default WithTheme(retrieveStyle)(UTBaseInputField);

package/dist/esm/components/UTBaseInputField/styles.module.scss

@@ -6,11 +6,14 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  grid-gap: 16px;
 }
 
-.elementsContainer {
-  grid-gap: 16px;
+.gapMedium {
+  grid-gap: var(--UT-baseInput-gap-md, 8px);
+}
+
+.gapSmall {
+  grid-gap: var(--UT-baseInput-gap-sm, 4px);
 }
 
 .multilineAdornmentsContainer {

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

@@ -1 +1 @@
-import{getFontStyles}from"../UTLabel/theme";import{getActionPalette}from"./utils";const charactersCountRowHeight=20,PADDING={HORIZONTAL:16,VERTICAL:12},SMALL_PADDING={HORIZONTAL:12,VERTICAL:8},GRID_GAP=16,getPaddingValues=t=>{const r="small"===t?SMALL_PADDING.VERTICAL:PADDING.VERTICAL,e="small"===t?SMALL_PADDING.HORIZONTAL:PADDING.HORIZONTAL,a=r+16+20;return{verticalPadding:"".concat(r,"px"),horizontalPadding:"".concat(e,"px"),multilineVerticalPadding:"".concat(a,"px")}},getBackgroundColor=t=>{let{theme:r,variant:e,error:a,disabled:o,readOnly:n}=t;return n?"transparent":"gray"===e?r.Palette.light["04"]:"transparent"===e&&a?r.Palette.error["01"]:"transparent"===e?"transparent":o?r.Palette.light["03"]:r.Palette.light["01"]},getBorderColor=t=>{let{theme:r,variant:e,error:a,readOnly:o,disabled:n}=t;return"gray"===e||"transparent"===e||o||n?"transparent !important":"".concat(a?r.Palette.error["04"]:r.Palette.light["05"]," !important")},getBackgroundColorOnHover=t=>{let{theme:r,variant:e,error:a,readOnly:o}=t;return"gray"===e?r.Palette.light["05"]:"transparent"===e&&a?r.Palette.error["02"]:o?void 0:r.Palette.light["03"]};export const retrieveStyle=t=>{let{alwaysShowPlaceholder:r,disabled:e,error:a,inputSize:o,maxLength:n,readOnly:l,showCharacterCount:i,theme:d,variant:c}=t;const g=e&&!l,p=i&&n&&!g&&!l,s=getActionPalette(d),{verticalPadding:h,horizontalPadding:P,multilineVerticalPadding:u}=getPaddingValues(o);return{charactersCount:{bottom:h,position:"absolute"},root:{backgroundColor:getBackgroundColor({theme:d,variant:c,error:a,disabled:g,readOnly:l}),paddingBottom:p?u:h,paddingLeft:P,paddingRight:P,paddingTop:h,...l&&{paddingLeft:0,paddingRight:0},"&:hover":{backgroundColor:getBackgroundColorOnHover({theme:d,variant:c,error:a,readOnly:l})},"&:active":{...!g&&!l&&{backgroundColor:d.Palette.light["01"],"& $inputContainer":{borderColor:"".concat(a?d.Palette.error["04"]:s["04"]," !important"),borderWidth:"2px"},"& $input":{"&::placeholder":{color:"".concat(d.Palette.gray["02"]," !important"),opacity:1}}}}},inputContainer:{borderColor:getBorderColor({theme:d,variant:c,error:a,readOnly:l,disabled:g}),borderRadius:"4px",borderWidth:"1px"},focusedRoot:{backgroundColor:"transparent"===c?d.Palette.light["03"]:d.Palette.light["01"],"&:hover":{backgroundColor:"transparent"===c?d.Palette.light["03"]:d.Palette.light["01"]}},withValueRoot:{..."transparent"===c&&!a&&{backgroundColor:"transparent"}},focusedInputContainer:{..."transparent"!==c&&!a&&{borderColor:"".concat(s["04"]," !important"),borderWidth:"2px"},..."transparent"!==c&&a&&{borderColor:"".concat(d.Palette.error["04"]," !important")}},input:{...getFontStyles({theme:d,variant:"body",weight:"regular"}),caretColor:s["04"],color:d.Palette.dark["05"],minHeight:"22px",overflow:"auto",padding:0,textOverflow:"ellipsis","&::placeholder":{color:"transparent"!==c||g?d.Palette.gray["02"]:d.Palette.dark["05"],opacity:r?1:0,transition:"none",userSelect:"none"},"&::selection":{backgroundColor:s["02"]},"&:focus":{"&::placeholder":{color:"".concat(d.Palette.gray["02"]," !important"),opacity:1}},...g&&{color:d.Palette.gray["04"]}}}};
+import{getFontStyles}from"../UTLabel/theme";import{getActionPalette}from"./utils";const charactersCountRowHeight=20,PADDING_Y={medium:"var(--UT-baseInput-padding-y-md, 8px)",small:"var(--UT-baseInput-padding-y-sm, 4px)"},PADDING_X={medium:"var(--UT-baseInput-padding-x-md, 12px)",small:"var(--UT-baseInput-padding-x-sm, 8px)"},GRID_GAP={medium:"var(--UT-baseInput-gap-md, 8px)",small:"var(--UT-baseInput-gap-sm, 4px)"},getPaddingValues=t=>{const r="small"===t?"small":"medium",e=PADDING_Y[r];return{verticalPadding:e,horizontalPadding:PADDING_X[r],multilineVerticalPadding:"calc(".concat(e," + ").concat(GRID_GAP[r]," + ").concat(20,"px)")}},getBackgroundColor=t=>{let{theme:r,variant:e,error:a,disabled:o,readOnly:n}=t;return n?"transparent":"gray"===e?r.Palette.light["04"]:"transparent"===e&&a?r.Palette.error["01"]:"transparent"===e?"transparent":o?r.Palette.light["03"]:r.Palette.light["01"]},getBorderColor=t=>{let{theme:r,variant:e,error:a,readOnly:o,disabled:n}=t;return"gray"===e||"transparent"===e||o||n?"transparent !important":"".concat(a?r.Palette.error["04"]:r.Palette.light["04"]," !important")},getBackgroundColorOnHover=t=>{let{theme:r,variant:e,error:a,readOnly:o}=t;return"gray"===e?r.Palette.light["05"]:"transparent"===e&&a?r.Palette.error["02"]:o?void 0:r.Palette.light["03"]};export const retrieveStyle=t=>{let{alwaysShowPlaceholder:r,disabled:e,error:a,inputSize:o,maxLength:n,readOnly:l,showCharacterCount:i,theme:d,variant:p}=t;const c=e&&!l,s=i&&n&&!c&&!l,g=getActionPalette(d),{verticalPadding:u,horizontalPadding:m,multilineVerticalPadding:h}=getPaddingValues(o);return{charactersCount:{bottom:u,position:"absolute"},root:{backgroundColor:getBackgroundColor({theme:d,variant:p,error:a,disabled:c,readOnly:l}),borderRadius:"var(--UT-baseInput-radius, 8px)",paddingBottom:s?h:u,paddingLeft:m,paddingRight:m,paddingTop:u,...l&&{paddingLeft:0,paddingRight:0},"&:hover":{backgroundColor:getBackgroundColorOnHover({theme:d,variant:p,error:a,readOnly:l})},"&:active":{...!c&&!l&&{backgroundColor:d.Palette.light["01"],"& $inputContainer":{borderColor:"".concat(a?d.Palette.error["04"]:g["04"]," !important"),borderWidth:"1px !important"},"& $input":{"&::placeholder":{color:"".concat(d.Palette.gray["02"]," !important"),opacity:1}}}}},inputContainer:{borderColor:getBorderColor({theme:d,variant:p,error:a,readOnly:l,disabled:c}),borderRadius:"var(--UT-baseInput-radius, 8px)",borderWidth:"1px",transition:"border-color 0.15s ease, box-shadow 0.15s ease"},focusedRoot:{backgroundColor:"transparent"===p?d.Palette.light["03"]:d.Palette.light["01"],"&:hover":{backgroundColor:"transparent"===p?d.Palette.light["03"]:d.Palette.light["01"]},..."transparent"!==p&&!a&&{boxShadow:"0 0 0 4px ".concat(g["02"])},..."transparent"!==p&&a&&{boxShadow:"0 0 0 4px ".concat(d.Palette.error["02"])}},withValueRoot:{..."transparent"===p&&!a&&{backgroundColor:"transparent"}},focusedInputContainer:{..."transparent"!==p&&!a&&{borderColor:"".concat(g["04"]," !important"),borderWidth:"1px !important"},..."transparent"!==p&&a&&{borderColor:"".concat(d.Palette.error["04"]," !important"),borderWidth:"1px !important"}},input:{...getFontStyles({theme:d,variant:"body",weight:"regular"}),caretColor:g["04"],color:d.Palette.dark["05"],minHeight:"22px",overflow:"auto",padding:0,textOverflow:"ellipsis","&::placeholder":{color:"transparent"!==p||c?d.Palette.gray["02"]:d.Palette.dark["05"],opacity:r?1:0,transition:"none",userSelect:"none"},"&::selection":{backgroundColor:g["02"]},"&:focus":{"&::placeholder":{color:"".concat(d.Palette.gray["02"]," !important"),opacity:1}},...c&&{color:d.Palette.gray["04"]}}}};

package/dist/esm/components/UTBreadcrumbs/styles.module.scss

@@ -29,7 +29,7 @@
 }
 
 .label {
-  padding: 4px 8px;
+  padding: var(--UT-breadcrumbs-padding-y, 4px) var(--UT-breadcrumbs-padding-x, 8px);
 }
 
 .lastBreadcrumb {

package/dist/esm/components/UTButton/styles.module.scss

@@ -54,15 +54,15 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
 }
 
 .paddingLarge {
-  padding: var(--UT-button-padding-md, 0.75rem) var(--UT-button-padding-lg, 1rem);
+  padding: var(--UT-button-padding-md, 8px) var(--UT-button-padding-lg, 12px);
 }
 
 .paddingMedium {
-  padding: var(--UT-button-padding-sm, 0.5rem) var(--UT-button-padding-md, 0.75rem);
+  padding: var(--UT-button-padding-sm, 4px) var(--UT-button-padding-md, 8px);
 }
 
 .paddingSmall {
-  padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
+  padding: var(--UT-button-padding-xs, 2px) var(--UT-button-padding-sm, 4px);
 }
 
 .fullHeight {
@@ -75,6 +75,7 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
   width: 100%;
 }
 
+
 .hideTextOnResponsive {
   .textContainer {
     @media #{$mobile} {
@@ -84,33 +85,33 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
 
   &.paddingLarge {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-md, 0.75rem);
+      padding: var(--UT-button-padding-md, 8px);
     }
   }
 
   &.paddingMedium {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-sm, 0.5rem);
+      padding: var(--UT-button-padding-sm, 4px);
     }
   }
 
   &.paddingSmall {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-xs, 0.25rem);
+      padding: var(--UT-button-padding-xs, 2px);
     }
   }
 }
 
 .noChildren {
   &.paddingLarge {
-    padding: var(--UT-button-padding-md, 0.75rem);
+    padding: var(--UT-button-padding-md, 8px);
   }
 
   &.paddingMedium {
-    padding: var(--UT-button-padding-sm, 0.5rem);
+    padding: var(--UT-button-padding-sm, 4px);
   }
 
   &.paddingSmall {
-    padding: var(--UT-button-padding-xs, 0.25rem);
+    padding: var(--UT-button-padding-xs, 2px);
   }
 }

package/dist/esm/components/UTCarousel/components/Slider/layout.js

@@ -1 +1 @@
-import React,{PureComponent,Fragment}from"react";import{number,shape,bool,func,objectOf,string,node,arrayOf,oneOfType}from"prop-types";import Legend from"../Legend";import Button from"../Button";import styles from"./styles.module.scss";import Slide from"./component/Slide";import{INSIDE}from"./constants";class Slider extends PureComponent{render(){const{transitionSlide:e,slides:t,containerWidth:n,slideArray:r,shouldAnimate:a,index:o,withBorder:s,handleLegend:i,handlePrevSlide:l,handleNextSlide:c,timeAnimation:d,arrow:m,legend:g,classes:p}=this.props,u=35===d?.035:.4;return React.createElement(Fragment,null,m&&m.position===INSIDE&&React.createElement(Button,{ArrowCustom:m.arrowCustomLeft,callback:m.callbackLeft,left:!0,onPress:l,className:styles.arrowLeft,classes:p}),React.createElement("div",{style:{transform:"translate3d(".concat(e,"px, 0px, 0px)"),width:"".concat(n*r.length,"px"),transition:"".concat(a?"transform ".concat(u,"s linear 0s"):"none")},className:"".concat(styles.slideContainer),draggable:"false"},r.map((e,t)=>React.createElement(Slide,{animationTime:u,border:s,classes:p,currentSlide:o-1,imgSrc:e.imgSrc,key:"slide-".concat(e.id||e.imgSrc),onClick:e.onClick,position:t-1,renderContent:e.renderContent,shouldAnimate:a,widthContainer:n}))),g&&g.position===INSIDE&&React.createElement("div",{className:styles.legendContainer,style:{justifyContent:g.align||"center",paddingBottom:g.paddingBottom,paddingLeft:g.paddingLeft}},React.createElement("div",{className:styles.legend},t.map((e,t)=>React.createElement(Legend,{key:"legend-in-".concat(e.id||e.imgSrc),classes:p,currentSlide:o===r.length-1?0:0===o?1:o-1,index:t,LegendCustom:g.legendCustom,onClick:i})))),m&&m.position===INSIDE&&React.createElement(Button,{ArrowCustom:m.arrowCustomRight,callback:m.callbackRight,onPress:c,className:styles.arrowRight,classes:p}))}}Slider.propTypes={slideArray:arrayOf(shape({imgSrc:string,id:oneOfType([number,string])})),slides:arrayOf(shape({imgSrc:string,id:oneOfType([number,string])})),arrow:shape({position:string,arrowCustomLeft:node,arrowCustomRight:node,callbackLeft:func,callbackRight:func}),legend:shape({position:string,legendCustom:node}),transitionSlide:number,containerWidth:number,shouldAnimate:bool,index:number,withBorder:number,handleLegend:func,handlePrevSlide:func,handleNextSlide:func,timeAnimation:number,classes:objectOf(string)};export default Slider;
+import React,{PureComponent,Fragment}from"react";import{number,shape,bool,func,objectOf,string,node,arrayOf,oneOfType}from"prop-types";import Legend from"../Legend";import Button from"../Button";import styles from"./styles.module.scss";import Slide from"./component/Slide";import{INSIDE}from"./constants";class Slider extends PureComponent{render(){const{transitionSlide:e,slides:t,containerWidth:n,slideArray:r,shouldAnimate:a,index:o,withBorder:s,handleLegend:i,handlePrevSlide:l,handleNextSlide:c,timeAnimation:d,arrow:m,legend:g,classes:p}=this.props,u=35===d?.035:.4;return React.createElement(React.Fragment,null,m&&m.position===INSIDE&&React.createElement(Button,{ArrowCustom:m.arrowCustomLeft,callback:m.callbackLeft,left:!0,onPress:l,className:styles.arrowLeft,classes:p}),React.createElement("div",{style:{transform:"translate3d(".concat(e,"px, 0px, 0px)"),width:"".concat(n*r.length,"px"),transition:"".concat(a?"transform ".concat(u,"s linear 0s"):"none")},className:"".concat(styles.slideContainer),draggable:"false"},r.map((e,t)=>React.createElement(Slide,{animationTime:u,border:s,classes:p,currentSlide:o-1,imgSrc:e.imgSrc,key:"slide-".concat(e.id||e.imgSrc),onClick:e.onClick,position:t-1,renderContent:e.renderContent,shouldAnimate:a,widthContainer:n}))),g&&g.position===INSIDE&&React.createElement("div",{className:styles.legendContainer,style:{justifyContent:g.align||"center",paddingBottom:g.paddingBottom,paddingLeft:g.paddingLeft}},React.createElement("div",{className:styles.legend},t.map((e,t)=>React.createElement(Legend,{key:"legend-in-".concat(e.id||e.imgSrc),classes:p,currentSlide:o===r.length-1?0:0===o?1:o-1,index:t,LegendCustom:g.legendCustom,onClick:i})))),m&&m.position===INSIDE&&React.createElement(Button,{ArrowCustom:m.arrowCustomRight,callback:m.callbackRight,onPress:c,className:styles.arrowRight,classes:p}))}}Slider.propTypes={slideArray:arrayOf(shape({imgSrc:string,id:oneOfType([number,string])})),slides:arrayOf(shape({imgSrc:string,id:oneOfType([number,string])})),arrow:shape({position:string,arrowCustomLeft:node,arrowCustomRight:node,callbackLeft:func,callbackRight:func}),legend:shape({position:string,legendCustom:node}),transitionSlide:number,containerWidth:number,shouldAnimate:bool,index:number,withBorder:number,handleLegend:func,handlePrevSlide:func,handleNextSlide:func,timeAnimation:number,classes:objectOf(string)};export default Slider;

package/dist/esm/components/UTCheckList/versions/V1/styles.module.scss

@@ -1,6 +1,3 @@
-$spacing-medium: 16px;
-$spacing-small: 8px;
-
 .buttonVariant {
   width: 100%;
 }
@@ -8,33 +5,33 @@ $spacing-small: 8px;
 .categoryContainer {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-checkList-gap-lg, 16px);
 }
 
 .categoryTitle {
-  padding: 8px 0;
+  padding: var(--UT-checkList-padding-y, 8px) 0;
 }
 
 .checkboxesContainer {
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-checkList-gap-lg, 16px);
   width: 100%;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-checkList-gap-lg, 16px);
 }
 
 .headerContainer {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: var(--UT-checkList-gap-sm, 8px);
 }
 
 .smallVerticalSpacing {
-  grid-gap: $spacing-small;
+  grid-gap: var(--UT-checkList-gap-sm, 8px);
 }

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}import React,{Fragment,useEffect}from"react";import{func,string,bool,number,shape,oneOfType,element,object,node,objectOf}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";import FormControlLabel from"@material-ui/core/FormControlLabel";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{useMutableState}from"@widergy/energy-hooks";import{inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";var Checked=function(e){return React.createElement("svg",e,React.createElement("path",{d:"M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"}))};Checked.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"5 6.58 14 10.42"};import{retrieveStyle,retrieveMuiTheme}from"./theme";import{tippyProps}from"./constants";import styles from"./styles.module.scss";const UTCheckbox=e=>{let{classes:t={},classNames:o,color:r="primary",checkboxDataTestId:l,CustomCheckedIcon:a=Checked,customRowLabel:s,CustomUncheckedIcon:n=e=>{let{className:t}=e;return React.createElement("div",{className:t})},disabled:c,disableRipple:m,input:i,item:p,label:u,labelDataTestId:b,labelProps:d={},meta:h,onChange:f,showError:T,tooltipContent:C,useCustomIcons:y,value:g}=e;const[k,v]=useMutableState(g);useEffect(()=>{v(g||(null==i?void 0:i.value))},[null==i?void 0:i.value,g]);const x=mergeClasses(t,o);return React.createElement(Fragment,null,React.createElement(FormControlLabel,{disabled:c,control:React.createElement(UTTooltip,{content:C,stringContentClassName:styles.disableSelectionTooltip,tippyProps:tippyProps},React.createElement("span",null,React.createElement(Checkbox,{classes:{colorPrimary:x.checkboxColorPrimary,colorSecondary:x.checkboxColorSecondary},checkedIcon:y&&React.createElement(a,{className:x.checkedIcon}),inputProps:{"data-testid":l},icon:y&&React.createElement(n,{className:x.uncheckedIcon}),checked:k.current||!1,onChange:e=>{f&&f(g),null!=i&&i.onChange&&i.onChange(e.target.checked)},value:(null==i?void 0:i.value)||g,color:r,disableRipple:m,disabled:c}))),label:s?React.createElement(s,{item:p}):React.createElement(UTLabel,_extends({className:x.label,dataTestId:b,variant:"small",withMarkdown:!0},d),u),classes:x&&{root:x.root,label:x.label}}),T&&shouldShowErrors(h)&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},h.error))};UTCheckbox.propTypes={classes:shape({checkboxColorPrimary:string,checkboxColorSecondary:string}),classNames:objectOf(string),color:string,checkboxDataTestId:string,CustomCheckedIcon:node,customRowLabel:oneOfType([func,element,string]),CustomUncheckedIcon:node,disabled:bool,disableRipple:bool,input:inputPropTypes,item:oneOfType([string,object]),label:oneOfType([number,string]),labelDataTestId:string,labelProps:object,meta:metaPropTypes,onChange:func,showError:bool,tooltipContent:element,useCustomIcons:bool,value:oneOfType([bool,string])};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTCheckbox);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}import React,{Fragment,useEffect}from"react";import{func,string,bool,number,shape,oneOfType,element,object,node,objectOf}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";import FormControlLabel from"@material-ui/core/FormControlLabel";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{useMutableState}from"@widergy/energy-hooks";import{inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";var Checked=function(e){return React.createElement("svg",e,React.createElement("path",{d:"M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"}))};Checked.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"5 6.58 14 10.42"};import{retrieveStyle,retrieveMuiTheme}from"./theme";import{tippyProps}from"./constants";import styles from"./styles.module.scss";const UTCheckbox=e=>{let{classes:t={},classNames:o,color:r="primary",checkboxDataTestId:l,CustomCheckedIcon:a=Checked,customRowLabel:s,CustomUncheckedIcon:n=e=>{let{className:t}=e;return React.createElement("div",{className:t})},disabled:c,disableRipple:m,input:i,item:p,label:u,labelDataTestId:b,labelProps:d={},meta:h,onChange:f,showError:T,tooltipContent:C,useCustomIcons:y,value:g}=e;const[k,v]=useMutableState(g);useEffect(()=>{v(g||(null==i?void 0:i.value))},[null==i?void 0:i.value,g]);const R=mergeClasses(t,o);return React.createElement(React.Fragment,null,React.createElement(FormControlLabel,{disabled:c,control:React.createElement(UTTooltip,{content:C,stringContentClassName:styles.disableSelectionTooltip,tippyProps:tippyProps},React.createElement("span",null,React.createElement(Checkbox,{classes:{colorPrimary:R.checkboxColorPrimary,colorSecondary:R.checkboxColorSecondary},checkedIcon:y&&React.createElement(a,{className:R.checkedIcon}),inputProps:{"data-testid":l},icon:y&&React.createElement(n,{className:R.uncheckedIcon}),checked:k.current||!1,onChange:e=>{f&&f(g),null!=i&&i.onChange&&i.onChange(e.target.checked)},value:(null==i?void 0:i.value)||g,color:r,disableRipple:m,disabled:c}))),label:s?React.createElement(s,{item:p}):React.createElement(UTLabel,_extends({className:R.label,dataTestId:b,variant:"small",withMarkdown:!0},d),u),classes:R&&{root:R.root,label:R.label}}),T&&shouldShowErrors(h)&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},h.error))};UTCheckbox.propTypes={classes:shape({checkboxColorPrimary:string,checkboxColorSecondary:string}),classNames:objectOf(string),color:string,checkboxDataTestId:string,CustomCheckedIcon:node,customRowLabel:oneOfType([func,element,string]),CustomUncheckedIcon:node,disabled:bool,disableRipple:bool,input:inputPropTypes,item:oneOfType([string,object]),label:oneOfType([number,string]),labelDataTestId:string,labelProps:object,meta:metaPropTypes,onChange:func,showError:bool,tooltipContent:element,useCustomIcons:bool,value:oneOfType([bool,string])};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTCheckbox);

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var o in a)({}).hasOwnProperty.call(a,o)&&(e[o]=a[o])}return e},_extends.apply(null,arguments)}import React,{Fragment,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,string}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{mergeClasses}from"../../../../utils/classesUtils";import UTFieldLabel from"../../../UTFieldLabel";import UTIcon from"../../../UTIcon";import WithTheme from"../../../WithTheme";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{buttonTypes}from"../../../../types/buttonTypes";import{metaPropTypes}from"../../../../types/formTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import{BUTTON_VARIANT,CHECKED_ICON,INDETERMINATE_ICON}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:a,classes:o,classNames:r,CustomComponent:i,dataTestId:s,disabled:n,indeterminate:l,isSimple:c=!1,meta:m,onChange:T=()=>{},required:d,icon:p,title:b,value:u=!1,variant:h="default",withUpperTitle:N}=e;const f=useMemo(()=>mergeClasses(o,r),[r,o]),U=useMemo(()=>l?INDETERMINATE_ICON:!0===u?CHECKED_ICON:"",[l,u]),I=!0===u&&h===BUTTON_VARIANT,E={onMouseDown:()=>{!n&&T&&T(!u)},disabled:n},g=h===BUTTON_VARIANT?UTTouchableWithoutFeedback:"div",R=h===BUTTON_VARIANT?"div":UTTouchableWithoutFeedback,y=h===BUTTON_VARIANT?E:{},C=h===BUTTON_VARIANT?{}:E,O=m&&shouldShowErrors(m)&&m.error||"",v=formatErrorToValidation(O);return React.createElement(Fragment,null,N&&React.createElement(UTFieldLabel,{actions:t,required:d},b),React.createElement(g,_extends({className:f.container},h===BUTTON_VARIANT?{dataTestId:s}:{"data-testid":s},y),React.createElement("div",{className:f.content},React.createElement(R,_extends({className:f.boxContainer},h===BUTTON_VARIANT?{"data-testid":a}:{dataTestId:a},C),c?React.createElement(UTIcon,{name:"IconCheck",shade:"04",colorTheme:"accent",className:u?void 0:styles.hidden}):React.createElement("div",{className:f.box},React.createElement("div",{className:f.iconContainer},React.createElement(UTIcon,{colorTheme:"light",name:U,size:16})))),i||React.createElement(UTFieldLabel,{className:f.title,highlighted:I,icon:p,required:d},b)),O&&React.createElement(UTValidation,{className:f.validation,validationData:v})))};UTCheckbox.propTypes={actions:arrayOf(buttonTypes),checkboxDataTestId:string,classes:objectOf(string),classNames:objectOf(string),CustomComponent:elementType,dataTestId:string,disabled:bool,indeterminate:bool,isSimple:bool,meta:metaPropTypes.isRequired,onChange:func,required:bool,icon:string,reversed:bool,spacing:string,title:string,value:bool,variant:string,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTCheckbox);
+import React,{Fragment,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,string}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{mergeClasses}from"../../../../utils/classesUtils";import UTFieldLabel from"../../../UTFieldLabel";import UTIcon from"../../../UTIcon";import WithTheme from"../../../WithTheme";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{buttonTypes}from"../../../../types/buttonTypes";import{metaPropTypes}from"../../../../types/formTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import{BUTTON_VARIANT,CHECKED_ICON,INDETERMINATE_ICON}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:o,classes:a,classNames:r,CustomComponent:i,dataTestId:s,disabled:l,indeterminate:m,isSimple:n=!1,meta:c,onChange:T=()=>{},required:d,icon:p,title:h,value:b=!1,variant:u="default",withUpperTitle:f}=e;const E=useMemo(()=>mergeClasses(a,r),[r,a]),C=useMemo(()=>m?INDETERMINATE_ICON:!0===b?CHECKED_ICON:"",[m,b]),U=!0===b&&u===BUTTON_VARIANT,I=c&&shouldShowErrors(c)&&c.error||"",N=formatErrorToValidation(I);return React.createElement(React.Fragment,null,f&&React.createElement(UTFieldLabel,{actions:t,required:d},h),React.createElement(UTTouchableWithoutFeedback,{className:E.container,dataTestId:s,disabled:l,onMouseDown:()=>{!l&&T&&T(!b)}},React.createElement("div",{className:E.content},React.createElement("div",{className:E.boxContainer,"data-testid":o},n?React.createElement(UTIcon,{name:"IconCheck",shade:"04",colorTheme:"accent",className:b?void 0:styles.hidden}):React.createElement("div",{className:E.box},React.createElement("div",{className:E.iconContainer},C&&React.createElement(UTIcon,{colorTheme:"light",name:m?"IconMinus":"IconCheck",size:10})))),i||React.createElement(UTFieldLabel,{className:E.title,highlighted:U,icon:p,required:d},h)),I&&React.createElement(UTValidation,{className:E.validation,validationData:N})))};UTCheckbox.propTypes={actions:arrayOf(buttonTypes),checkboxDataTestId:string,classes:objectOf(string),classNames:objectOf(string),CustomComponent:elementType,dataTestId:string,disabled:bool,indeterminate:bool,isSimple:bool,meta:metaPropTypes.isRequired,onChange:func,required:bool,icon:string,title:string,value:bool,variant:string,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTCheckbox);

package/dist/esm/components/UTCheckbox/versions/V1/styles.module.scss

@@ -1,3 +1,9 @@
 .hidden {
   display: none;
 }
+
+.checkGlyph {
+  display: block;
+  height: 10px;
+  width: 10px;
+}

package/dist/esm/components/UTCheckbox/versions/V1/theme.js

@@ -1 +1 @@
-import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{BUTTON_VARIANT,SPACING}from"./constants";const MEDIUM_SPACING=16,SMALL_SPACING=8,baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"2px solid ".concat(e.Palette.gray["04"]),borderRadius:5,display:"flex",height:20,placeContent:"center",placeItems:"center",width:20},box:{borderRadius:25,overflow:"hidden",padding:6},validation:{flexBasis:"100%"}}),conditionalStyles=e=>{var t,o,r,n,a;let{value:i,indeterminate:l,reversed:c,spacing:d,variant:s,theme:v,disabled:b,error:u}=e;const p=d===SPACING.SMALL?8:16;return{container:{...c&&{flexDirection:"row-reverse",justifyContent:"space-between"},...b&&{opacity:.5},...s===BUTTON_VARIANT&&{borderRadius:"8px",padding:"small"===d?"8px 12px":"12px 16px",backgroundColor:u?v.Palette.error["01"]:"transparent","&:active, &:hover":{transition:"background-color 0.1s ease-in-out"},"&:active":{backgroundColor:u?v.Palette.error["02"]:v.Palette.light["04"]},"&:hover":{backgroundColor:u?v.Palette.error["02"]:v.Palette.light["03"]}}},content:{...c&&{flexDirection:"row-reverse",justifyContent:"space-between",...s===BUTTON_VARIANT&&{width:"100%"}}},iconContainer:{...u&&{borderColor:v.Palette.error["04"]},...(!0===i||l)&&{backgroundColor:(null===(t=v.Palette.actions)||void 0===t?void 0:t.accent["04"])||v.Palette.accent["04"],borderColor:(null===(o=v.Palette.actions)||void 0===o?void 0:o.accent["04"])||v.Palette.accent["04"]}},boxContainer:{...c?{marginLeft:p,marginRight:0}:{marginRight:p},...s!==BUTTON_VARIANT&&{"&:active, &:hover":{"& $box":{borderColor:u?v.Palette.error["03"]:(null===(r=v.Palette.actions)||void 0===r?void 0:r.accent["03"])||v.Palette.accent["03"],borderWidth:1,overflow:"hidden",transition:"background-color 0.1s ease-in-out"}},"&:active":{"& $box":{backgroundColor:u?v.Palette.error["02"]:(null===(n=v.Palette.actions)||void 0===n?void 0:n.accent["02"])||v.Palette.accent["02"]}},"&:hover":{"& $box":{backgroundColor:u?v.Palette.error["01"]:(null===(a=v.Palette.actions)||void 0===a?void 0:a.accent["01"])||v.Palette.accent["01"]}}}},title:s===BUTTON_VARIANT&&{userSelect:"none"}}};export const retrieveStyle=e=>{let{value:t,disabled:o,indeterminate:r,reversed:n,spacing:a,theme:i,variant:l,meta:c}=e;const d=baseCheckBoxTheme(i),s=c&&shouldShowErrors(c),{container:v,content:b,iconContainer:u,boxContainer:p,title:x}=conditionalStyles({value:t,disabled:o,indeterminate:r,reversed:n,spacing:a,variant:l,theme:i,error:s});return{box:d.box,content:{...d.content,...b},container:{...d.container,...v},iconContainer:{...d.iconContainer,...u},boxContainer:p,title:x,validation:d.validation}};
+import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{BUTTON_VARIANT,SPACING}from"./constants";const MEDIUM_SPACING="var(--UT-checkbox-gap-md, 8px)",SMALL_SPACING="var(--UT-checkbox-gap-sm, 4px)",baseCheckBoxTheme=e=>({container:{alignItems:"center !important",display:"flex",flexWrap:"wrap",gap:"0px"},content:{display:"flex",flexDirection:"row",alignItems:"center"},iconContainer:{border:"1px solid ".concat(e.Palette.light["05"]),borderRadius:"var(--UT-checkbox-radius, 4px)",display:"flex",height:"var(--UT-checkbox-size, 16px)",placeContent:"center",placeItems:"center",width:"var(--UT-checkbox-size, 16px)"},box:{borderRadius:25,overflow:"hidden",padding:3},validation:{flexBasis:"100%"}}),conditionalStyles=e=>{var t,o,r,n,a;let{value:i,indeterminate:c,reversed:l,spacing:d,variant:s,theme:v,disabled:b,error:x}=e;const p=d===SPACING.SMALL?SMALL_SPACING:MEDIUM_SPACING;return{container:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between"},...b&&{opacity:.5},...s===BUTTON_VARIANT&&{borderRadius:"8px",padding:"small"===d?"8px 12px":"12px 16px",backgroundColor:x?v.Palette.error["01"]:"transparent","&:active, &:hover":{transition:"background-color 0.1s ease-in-out"},"&:active":{backgroundColor:x?v.Palette.error["02"]:v.Palette.light["04"]},"&:hover":{backgroundColor:x?v.Palette.error["02"]:v.Palette.light["03"]}}},content:{...l&&{flexDirection:"row-reverse",justifyContent:"space-between",...s===BUTTON_VARIANT&&{width:"100%"}}},iconContainer:{...x&&{borderColor:v.Palette.error["04"]},...(!0===i||c)&&{backgroundColor:(null===(t=v.Palette.actions)||void 0===t?void 0:t.accent["04"])||v.Palette.accent["04"],borderColor:(null===(o=v.Palette.actions)||void 0===o?void 0:o.accent["04"])||v.Palette.accent["04"]}},boxContainer:{...l?{marginLeft:p,marginRight:0}:{marginRight:p},...s!==BUTTON_VARIANT&&{"&:active, &:hover":{"& $box":{borderColor:x?v.Palette.error["03"]:(null===(r=v.Palette.actions)||void 0===r?void 0:r.accent["03"])||v.Palette.accent["03"],borderWidth:1,overflow:"hidden",transition:"background-color 0.1s ease-in-out"}},"&:active":{"& $box":{backgroundColor:x?v.Palette.error["02"]:(null===(n=v.Palette.actions)||void 0===n?void 0:n.accent["02"])||v.Palette.accent["02"]}},"&:hover":{"& $box":{backgroundColor:x?v.Palette.error["01"]:(null===(a=v.Palette.actions)||void 0===a?void 0:a.accent["01"])||v.Palette.accent["01"]}}}},title:s===BUTTON_VARIANT&&{userSelect:"none"}}};export const retrieveStyle=e=>{let{value:t,disabled:o,indeterminate:r,reversed:n,spacing:a,theme:i,variant:c,meta:l}=e;const d=baseCheckBoxTheme(i),s=l&&shouldShowErrors(l),{container:v,content:b,iconContainer:x,boxContainer:p,title:h}=conditionalStyles({value:t,disabled:o,indeterminate:r,reversed:n,spacing:a,variant:c,theme:i,error:s});return{box:d.box,content:{...d.content,...b},container:{...d.container,...v},iconContainer:{...d.iconContainer,...x},boxContainer:p,title:h,validation:d.validation}};

package/dist/esm/components/UTCuit/versions/V1/styles.module.scss

@@ -6,7 +6,7 @@
 }
 
 .label {
-  margin-bottom: 8px;
+  margin-bottom: var(--UT-field-gap, 8px);
 }
 
 .fieldContainer {

package/dist/esm/components/UTDatePicker/versions/V1/constants.js

@@ -1 +1 @@
-export const OUTPUT_LABEL_MASK="DD/MM/YYYY";export const WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"];export const MONTH_YEAR_FORMAT="MMMM YYYY";export const DAY_NUMBER_FORMAT="DD";export const DEFAULT_PLACEHOLDER="DD/MM/AAAA";export const TYPING_ERROR_MESSAGE="Fecha inválida";export const DEFAULT_PROPS={variant:"select",size:"sm"};
+export const OUTPUT_LABEL_MASK="DD/MM/YYYY";export const WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"];export const MONTH_YEAR_FORMAT="MMMM YYYY";export const DAY_NUMBER_FORMAT="DD";export const DEFAULT_PLACEHOLDER="DD/MM/AAAA";export const TYPING_ERROR_MESSAGE="Fecha inválida";export const DEFAULT_PROPS={variant:"select",size:"md"};

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}import React,{useRef,useState,useEffect}from"react";import Popover from"@material-ui/core/Popover";import dayjs from"dayjs";import customParseFormat from"dayjs/plugin/customParseFormat";import{bool,elementType,func,object,shape,string,oneOf}from"prop-types";import UTBaseInputField from"../../../UTBaseInputField";import UTButton from"../../../UTButton";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation from"../../../UTValidation";import{COMPONENT_KEYS}from"../../../UTBaseInputField/constants";import Calendar from"./components/Calendar";import styles from"./styles.module.scss";import{DEFAULT_PROPS,DEFAULT_PLACEHOLDER,OUTPUT_LABEL_MASK,TYPING_ERROR_MESSAGE}from"./constants";import{dateMatchesFormat,getFinalDate}from"./utils";dayjs.extend(customParseFormat);const CALENDAR_PAPER_PROPS={onMouseDown:e=>e.preventDefault()},UTDatePicker=e=>{let{classNames:t={},CustomIcon:a,dataTestId:r,disabled:o,error:n="",helpText:l,onChange:s=()=>{},placeholder:i,popoverProps:c,range:d,readOnly:m=!1,required:u,size:p=DEFAULT_PROPS.size,title:T,value:E="",variant:P=DEFAULT_PROPS.variant}=e;const{maxDate:U,minDate:f}=d||{},[_,A]=useState(null),[v,L]=useState(!1),[O,g]=useState(""),[R,h]=useState(!1),[S,D]=useState(!1),y=useRef(null),F=useRef(null);useEffect(()=>{L(!1),g(""),D(!1),!E&&null!=_&&_.isValid()?A(null):dateMatchesFormat(E,OUTPUT_LABEL_MASK)?A(dayjs(E,OUTPUT_LABEL_MASK)):A(null)},[E]);const M=()=>{var e;o||m||(h(!0),null===(e=F.current)||void 0===e||e.focus())},b=v?O:null!=_&&_.isValid()?_.format(OUTPUT_LABEL_MASK):"",B=!!n||S,C=null==_?void 0:_.isValid(),I=i||DEFAULT_PLACEHOLDER,x=(C||v)&&!o&&!m,K=!m&&!o,N=n||(S?TYPING_ERROR_MESSAGE:""),j="picker"===P,k=B&&!o?[{name:COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}]:[],w={colorTheme:B?"error":R?"primary":"gray",Icon:a||"IconCalendarEvent"},V=K?React.createElement("div",{className:styles.endAdornments},React.createElement(UTButton,_extends({},x?{colorTheme:"dark",Icon:"IconX"}:w,{onClick:x?e=>{e.stopPropagation(),A(null),L(!1),g(""),D(!1),s("")}:M,size:"small",variant:"text"}))):void 0;return React.createElement(React.Fragment,null,React.createElement("div",{className:styles.root},T&&React.createElement(UTFieldLabel,{className:null==t?void 0:t.upperTitle,required:u,withMarkdown:!0},T),React.createElement("div",{ref:y},React.createElement(UTBaseInputField,{alwaysShowPlaceholder:!0,classNames:t,dataTestId:r,inputRef:F,disabled:o,error:B,readOnly:m,inputSize:"sm"===p?"small":void 0,variant:j?"transparent":void 0,leftAdornments:k,maxLength:10,muiProps:{InputProps:{endAdornment:V},onChange:e=>{var t,a;const r=(e=>{const t=e.replace(/\D/g,"").slice(0,8);return t.length<=2?t:t.length<=4?"".concat(t.slice(0,2),"/").concat(t.slice(2)):"".concat(t.slice(0,2),"/").concat(t.slice(2,4),"/").concat(t.slice(4))})(v?e.target.value:null!==(t=null===(a=e.nativeEvent)||void 0===a?void 0:a.data)&&void 0!==t?t:"");g(r),L(!0);if(8===r.replace(/\D/g,"").length){const e=dateMatchesFormat(r,OUTPUT_LABEL_MASK)&&dayjs(r,OUTPUT_LABEL_MASK).isValid();D(!e),e&&A(dayjs(r,OUTPUT_LABEL_MASK))}else D(!1)},fullWidth:!0},onBlur:e=>{var t;if((null===(t=y.current)||void 0===t||!t.contains(e.relatedTarget))&&(h(!1),D(!1),v)){if(L(!1),g(""),!O)return A(null),void s("");if(dateMatchesFormat(O,OUTPUT_LABEL_MASK)){const e=dayjs(O,OUTPUT_LABEL_MASK);if(e.isValid()){const t=getFinalDate({date:e,maxDate:U,minDate:f});return A(t),void s(t.format(OUTPUT_LABEL_MASK))}}A(null),s("")}},onFocus:M,placeholder:I,value:b})),l&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",withMarkdown:!0},l),"select"===P&&N&&React.createElement(UTValidation,{dataTestId:r?"".concat(r,".errorMessage"):void 0,validationData:[{items:[{status:"error",text:N}]}]})),React.createElement(Popover,_extends({anchorEl:y.current,anchorOrigin:{horizontal:"left",vertical:"bottom"},disableAutoFocus:!0,disableEnforceFocus:!0,disableRestoreFocus:!0,onClose:()=>{h(!1),D(!1),v&&(L(!1),g(""),E&&dateMatchesFormat(E,OUTPUT_LABEL_MASK)?A(dayjs(E,OUTPUT_LABEL_MASK)):A(null))},open:R,PaperProps:CALENDAR_PAPER_PROPS,transformOrigin:{horizontal:"left",vertical:"top"}},c),React.createElement(Calendar,{maxDate:U,minDate:f,onDaySelect:e=>{const t=getFinalDate({date:e,maxDate:U,minDate:f});A(t),L(!1),g(""),D(!1),t.isValid()?s(t.format(OUTPUT_LABEL_MASK)):s(""),h(!1)},pickedDate:_})))};UTDatePicker.propTypes={classNames:object,CustomIcon:elementType,dataTestId:string,disabled:bool,error:string,helpText:string,onChange:func,placeholder:string,popoverProps:object,range:shape({maxDate:string,minDate:string}),readOnly:bool,required:bool,size:string,title:string,value:string,variant:oneOf(["select","picker"])};export default UTDatePicker;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}import React,{useRef,useState,useEffect}from"react";import Popover from"@material-ui/core/Popover";import dayjs from"dayjs";import customParseFormat from"dayjs/plugin/customParseFormat";import{bool,elementType,func,object,shape,string,oneOf}from"prop-types";import UTBaseInputField from"../../../UTBaseInputField";import UTButton from"../../../UTButton";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import UTValidation from"../../../UTValidation";import{COMPONENT_KEYS}from"../../../UTBaseInputField/constants";import Calendar from"./components/Calendar";import styles from"./styles.module.scss";import{DEFAULT_PROPS,DEFAULT_PLACEHOLDER,OUTPUT_LABEL_MASK,TYPING_ERROR_MESSAGE}from"./constants";import{dateMatchesFormat,getFinalDate}from"./utils";dayjs.extend(customParseFormat);const CALENDAR_PAPER_PROPS={className:styles.calendarPaper,onMouseDown:e=>e.preventDefault()},UTDatePicker=e=>{let{classNames:t={},CustomIcon:a,dataTestId:r,disabled:o,error:n="",helpText:l,onChange:s=()=>{},placeholder:i,popoverProps:c,range:d,readOnly:m=!1,required:u,size:p=DEFAULT_PROPS.size,title:T,value:E="",variant:P=DEFAULT_PROPS.variant}=e;const{maxDate:U,minDate:f}=d||{},[_,A]=useState(null),[v,L]=useState(!1),[O,g]=useState(""),[R,h]=useState(!1),[S,D]=useState(!1),y=useRef(null),F=useRef(null);useEffect(()=>{L(!1),g(""),D(!1),!E&&null!=_&&_.isValid()?A(null):dateMatchesFormat(E,OUTPUT_LABEL_MASK)?A(dayjs(E,OUTPUT_LABEL_MASK)):A(null)},[E]);const M=()=>{var e;o||m||(h(!0),null===(e=F.current)||void 0===e||e.focus())},b=v?O:null!=_&&_.isValid()?_.format(OUTPUT_LABEL_MASK):"",B=!!n||S,C=null==_?void 0:_.isValid(),I=i||DEFAULT_PLACEHOLDER,x=(C||v)&&!o&&!m,N=!m&&!o,K=n||(S?TYPING_ERROR_MESSAGE:""),j="picker"===P,k=B&&!o?[{name:COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}]:[],w={colorTheme:B?"error":R?"primary":"gray",Icon:a||"IconCalendarEvent"},V=N?React.createElement("div",{className:styles.endAdornments},React.createElement(UTButton,_extends({},x?{colorTheme:"dark",Icon:"IconX"}:w,{classNames:{root:styles.calendarButton},onClick:x?e=>{e.stopPropagation(),A(null),L(!1),g(""),D(!1),s("")}:M,size:"small",variant:"text"}))):void 0;return React.createElement(React.Fragment,null,React.createElement("div",{className:styles.root},T&&React.createElement(UTFieldLabel,{className:null==t?void 0:t.upperTitle,required:u,withMarkdown:!0},T),React.createElement("div",{ref:y},React.createElement(UTBaseInputField,{alwaysShowPlaceholder:!0,classNames:t,dataTestId:r,inputRef:F,disabled:o,error:B,readOnly:m,inputSize:"sm"===p?"small":void 0,variant:j?"transparent":void 0,leftAdornments:k,maxLength:10,muiProps:{InputProps:{endAdornment:V},onChange:e=>{var t,a;const r=(e=>{const t=e.replace(/\D/g,"").slice(0,8);return t.length<=2?t:t.length<=4?"".concat(t.slice(0,2),"/").concat(t.slice(2)):"".concat(t.slice(0,2),"/").concat(t.slice(2,4),"/").concat(t.slice(4))})(v?e.target.value:null!==(t=null===(a=e.nativeEvent)||void 0===a?void 0:a.data)&&void 0!==t?t:"");g(r),L(!0);if(8===r.replace(/\D/g,"").length){const e=dateMatchesFormat(r,OUTPUT_LABEL_MASK)&&dayjs(r,OUTPUT_LABEL_MASK).isValid();D(!e),e&&A(dayjs(r,OUTPUT_LABEL_MASK))}else D(!1)},fullWidth:!0},onBlur:e=>{var t;if((null===(t=y.current)||void 0===t||!t.contains(e.relatedTarget))&&(h(!1),D(!1),v)){if(L(!1),g(""),!O)return A(null),void s("");if(dateMatchesFormat(O,OUTPUT_LABEL_MASK)){const e=dayjs(O,OUTPUT_LABEL_MASK);if(e.isValid()){const t=getFinalDate({date:e,maxDate:U,minDate:f});return A(t),void s(t.format(OUTPUT_LABEL_MASK))}}A(null),s("")}},onFocus:M,placeholder:I,value:b})),l&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",withMarkdown:!0},l),"select"===P&&K&&React.createElement(UTValidation,{dataTestId:r?"".concat(r,".errorMessage"):void 0,validationData:[{items:[{status:"error",text:K}]}]})),React.createElement(Popover,_extends({anchorEl:y.current,anchorOrigin:{horizontal:"left",vertical:"bottom"},disableAutoFocus:!0,disableEnforceFocus:!0,disableRestoreFocus:!0,onClose:()=>{h(!1),D(!1),v&&(L(!1),g(""),E&&dateMatchesFormat(E,OUTPUT_LABEL_MASK)?A(dayjs(E,OUTPUT_LABEL_MASK)):A(null))},open:R,PaperProps:CALENDAR_PAPER_PROPS,transformOrigin:{horizontal:"left",vertical:"top"}},c),React.createElement(Calendar,{maxDate:U,minDate:f,onDaySelect:e=>{const t=getFinalDate({date:e,maxDate:U,minDate:f});A(t),L(!1),g(""),D(!1),t.isValid()?s(t.format(OUTPUT_LABEL_MASK)):s(""),h(!1)},pickedDate:_})))};UTDatePicker.propTypes={classNames:object,CustomIcon:elementType,dataTestId:string,disabled:bool,error:string,helpText:string,onChange:func,placeholder:string,popoverProps:object,range:shape({maxDate:string,minDate:string}),readOnly:bool,required:bool,size:string,title:string,value:string,variant:oneOf(["select","picker"])};export default UTDatePicker;

package/dist/esm/components/UTDatePicker/versions/V1/styles.module.scss

@@ -12,6 +12,17 @@
   grid-gap: var(--UT-datepicker-adornments-gap);
 }
 
+.calendarButton {
+  margin: -4px !important;
+}
+
+.calendarPaper {
+  background-color: var(--light01) !important;
+  border-radius: 8px !important;
+  box-shadow: var(--shadowGrayBottom2, 0px 6px 12px rgba(24, 44, 73, 0.1)) !important;
+  margin-top: 8px !important;
+}
+
 .calendarContainer {
   box-sizing: border-box;
   display: flex;

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_extends.apply(null,arguments)}import React,{Fragment,useEffect,useRef,useState}from"react";import{arrayOf,object}from"prop-types";import UTTabs from"../UTTabs";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import UTSheet from"../UTSheet";import{useScreenSize}from"../../utils/useScreenSize";import{getTabsOptions}from"./utils";import styles from"./styles.module.scss";import ChevronsManager from"./components/ChevronsManager";import PageWizard from"./components/PageWizard";import SectionDetails from"./components/SectionDetails";import Sheet from"./components/Sheet";import{LAST_OPTION_PROPS,NEXT,PREV,SLIDE_PROPS}from"./constants";const UTDocumentWizard=e=>{var t;let{classNames:a,handlers:n={},labels:s,pages:o=[],scaleConfig:r,sections:c=[]}=e;const l=useRef(null),i=getTabsOptions(o),[m,u]=useState(null===(t=i[0])||void 0===t?void 0:t.value),d=i.findIndex(e=>e.value===m),f=d<=0,p=d>=i.length-1,g=useRef(null),[S,v]=useState(!1),[R,T]=useState(null),b=c.find(e=>"".concat(e.id)===R),{trackClickGlossarySection:E=()=>{}}=n,y=e=>{S||(g.current&&(clearTimeout(g.current),g.current=null),v(!0),g.current=setTimeout(()=>{if(e===m)return v(!1),void(g.current=null);u(e),v(!1),g.current=null},600))},h=useRef(null),P=null==o?void 0:o.find(e=>"".concat(e.id)==="".concat(m));useEffect(()=>()=>{g.current&&clearTimeout(g.current)},[]);const[O,C]=useState(!1),{isMobileSize:U}=useScreenSize(),N=React.createElement(Sheet,{sectionSelected:b}),{chevronsManagerTitle:z,sectionDetails:D}=s;return useEffect(()=>{b&&E(null==b?void 0:b.title)},[b]),React.createElement(Fragment,null,React.createElement("div",{className:"".concat(styles.container," ").concat(null==a?void 0:a.container)},React.createElement("div",{className:styles.pageWizardContainer,ref:h},React.createElement("div",{className:"".concat(styles.pageManagerSection," ").concat(null==a?void 0:a.pageManagerSection)},React.createElement("div",{className:styles.slidePageManagerContainer},React.createElement(UTLabel,{variant:"title2"},z),React.createElement(ChevronsManager,{prevDisabled:f,nextDisabled:p,onClick:e=>{let t=null;e!==PREV||f?e!==NEXT||p||(t=i[d+1].value):t=i[d-1].value,t!==m&&y(t)}})),React.createElement("div",{className:styles.pageManagerContainer},React.createElement(UTTabs,{options:i,value:m,onChange:e=>{y(e)},classes:{tabsRoot:styles.tabs,tabRoot:styles.tabRoot,label:styles.tab,selected:styles.selected,indicator:styles.indicator},lastOptionProps:LAST_OPTION_PROPS}))),React.createElement("div",{className:styles.scrollContainer},S&&React.createElement("div",{className:styles.loadingContainer},React.createElement(UTLoading,{loading:!0})),!S&&P&&React.createElement(PageWizard,{canvasRef:l,classNames:a,clickedSection:R,containerRef:h,isChangingTab:S,isMobileSize:U,isSheetOpen:O,onSectionChange:e=>{T(e),U&&C(!!e)},page:P,scaleConfig:r,sections:c,sectionSelected:b}))),React.createElement(SectionDetails,_extends({sectionSelected:b},D))),React.createElement(UTSheet,{SlideProps:SLIDE_PROPS,anchor:"bottom",open:O,toggleDrawer:e=>{if(U){if(!e){var t;const e=null===(t=l.current)||void 0===t?void 0:t.getContext("2d");var a;if(e)e.restore(),null===(a=l.current)||void 0===a||a.focus()}C(e)}}},N))};UTDocumentWizard.propTypes={classNames:object,handlers:object,labels:object,pages:arrayOf({}),scaleConfig:object,sections:arrayOf({})};export default UTDocumentWizard;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},_extends.apply(null,arguments)}import React,{Fragment,useEffect,useRef,useState}from"react";import{arrayOf,object}from"prop-types";import UTTabs from"../UTTabs";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import UTSheet from"../UTSheet";import{useScreenSize}from"../../utils/useScreenSize";import{getTabsOptions}from"./utils";import styles from"./styles.module.scss";import ChevronsManager from"./components/ChevronsManager";import PageWizard from"./components/PageWizard";import SectionDetails from"./components/SectionDetails";import Sheet from"./components/Sheet";import{LAST_OPTION_PROPS,NEXT,PREV,SLIDE_PROPS}from"./constants";const UTDocumentWizard=e=>{var t;let{classNames:a,handlers:n={},labels:s,pages:o=[],scaleConfig:r,sections:c=[]}=e;const l=useRef(null),i=getTabsOptions(o),[m,u]=useState(null===(t=i[0])||void 0===t?void 0:t.value),d=i.findIndex(e=>e.value===m),f=d<=0,p=d>=i.length-1,g=useRef(null),[S,v]=useState(!1),[R,T]=useState(null),b=c.find(e=>"".concat(e.id)===R),{trackClickGlossarySection:E=()=>{}}=n,y=e=>{S||(g.current&&(clearTimeout(g.current),g.current=null),v(!0),g.current=setTimeout(()=>{if(e===m)return v(!1),void(g.current=null);u(e),v(!1),g.current=null},600))},h=useRef(null),P=null==o?void 0:o.find(e=>"".concat(e.id)==="".concat(m));useEffect(()=>()=>{g.current&&clearTimeout(g.current)},[]);const[O,C]=useState(!1),{isMobileSize:U}=useScreenSize(),N=React.createElement(Sheet,{sectionSelected:b}),{chevronsManagerTitle:z,sectionDetails:D}=s;return useEffect(()=>{b&&E(null==b?void 0:b.title)},[b]),React.createElement(React.Fragment,null,React.createElement("div",{className:"".concat(styles.container," ").concat(null==a?void 0:a.container)},React.createElement("div",{className:styles.pageWizardContainer,ref:h},React.createElement("div",{className:"".concat(styles.pageManagerSection," ").concat(null==a?void 0:a.pageManagerSection)},React.createElement("div",{className:styles.slidePageManagerContainer},React.createElement(UTLabel,{variant:"title2"},z),React.createElement(ChevronsManager,{prevDisabled:f,nextDisabled:p,onClick:e=>{let t=null;e!==PREV||f?e!==NEXT||p||(t=i[d+1].value):t=i[d-1].value,t!==m&&y(t)}})),React.createElement("div",{className:styles.pageManagerContainer},React.createElement(UTTabs,{options:i,value:m,onChange:e=>{y(e)},classes:{tabsRoot:styles.tabs,tabRoot:styles.tabRoot,label:styles.tab,selected:styles.selected,indicator:styles.indicator},lastOptionProps:LAST_OPTION_PROPS}))),React.createElement("div",{className:styles.scrollContainer},S&&React.createElement("div",{className:styles.loadingContainer},React.createElement(UTLoading,{loading:!0})),!S&&P&&React.createElement(PageWizard,{canvasRef:l,classNames:a,clickedSection:R,containerRef:h,isChangingTab:S,isMobileSize:U,isSheetOpen:O,onSectionChange:e=>{T(e),U&&C(!!e)},page:P,scaleConfig:r,sections:c,sectionSelected:b}))),React.createElement(SectionDetails,_extends({sectionSelected:b},D))),React.createElement(UTSheet,{SlideProps:SLIDE_PROPS,anchor:"bottom",open:O,toggleDrawer:e=>{if(U){if(!e){var t;const e=null===(t=l.current)||void 0===t?void 0:t.getContext("2d");var a;if(e)e.restore(),null===(a=l.current)||void 0===a||a.focus()}C(e)}}},N))};UTDocumentWizard.propTypes={classNames:object,handlers:object,labels:object,pages:arrayOf({}),scaleConfig:object,sections:arrayOf({})};export default UTDocumentWizard;