@widergy/energy-ui 3.177.1 → 3.178.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.178.0](https://github.com/widergy/energy-ui/compare/v3.177.1...v3.178.0) (2026-08-19)
+
+
+### Features
+
+* [WDS-11] mejora UI forms ([#841](https://github.com/widergy/energy-ui/issues/841)) ([78b0819](https://github.com/widergy/energy-ui/commit/78b0819489c828db86894266397e8885fbfdca27))
+
 ## [3.177.1](https://github.com/widergy/energy-ui/compare/v3.177.0...v3.177.1) (2026-08-19)
 
 

package/dist/components/UTActionCard/components/AdditionalMessage/styles.module.scss

@@ -1,13 +1,13 @@
 .additionalMessageContainer {
   align-items: center;
   display: flex;
-  grid-gap: 8px;
+  grid-gap: var(--UT-actionCard-gap-sm, 8px);
 }
 
 .medium {
-  padding: 0 24px 24px;
+  padding: 0 var(--UT-actionCard-padding-lg, 24px) var(--UT-actionCard-padding-lg, 24px);
 }
 
 .small {
-  padding: 0 16px 16px;
+  padding: 0 var(--UT-actionCard-padding-md, 16px) var(--UT-actionCard-padding-md, 16px);
 }

package/dist/components/UTActionCard/components/BottomActions/styles.module.scss

@@ -45,5 +45,5 @@ $default-border-color: #e7e7e7;
 }
 
 .mediumPadding {
-  padding: 16px 24px;
+  padding: var(--UT-actionCard-padding-md, 16px) var(--UT-actionCard-padding-lg, 24px);
 }

package/dist/components/UTActionCard/components/Header/styles.module.scss

@@ -1,29 +1,29 @@
 .header {
   display: flex;
-  grid-gap: 16px;
+  grid-gap: var(--UT-actionCard-gap-lg, 16px);
   justify-content: space-between;
 }
 
 .headerTitles {
   display: flex;
   flex-direction: column;
-  grid-gap: 16px;
+  grid-gap: var(--UT-actionCard-gap-lg, 16px);
   margin-right: auto;
 }
 
 .titleAndDescription {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: var(--UT-actionCard-gap-sm, 8px);
   overflow-wrap: anywhere;
 }
 
 .medium {
-  padding: 24px;
+  padding: var(--UT-actionCard-padding-lg, 24px);
 }
 
 .small {
-  padding: 16px;
+  padding: var(--UT-actionCard-padding-md, 16px);
 }
 
 .placeSelf-center {
@@ -39,8 +39,8 @@
 }
 
 .defaultAvatar {
-  height: 64px;
-  width: 64px;
+  height: var(--UT-actionCard-avatar-size, 64px);
+  width: var(--UT-actionCard-avatar-size, 64px);
 }
 
 .adornment {

package/dist/components/UTActionCard/components/HeaderActions/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../UTButton")),_UTButtonGroup=_interopRequireDefault(require("../../../UTButtonGroup")),_UTMenu=_interopRequireDefault(require("../../../UTMenu")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_constants=require("../../constants"),_utils=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(s,t,a):s[t]=e[t]);return s})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}const HeaderActions=e=>{var t,r;let{headerActions:o,headerActionsProps:n,setMainActionHoverVisible:a}=e;const[s,p]=(0,_react.useState)(),[l,i]=(0,_react.useState)(null===(t=o.find(e=>{let{selectedDefault:t}=e;return t}))||void 0===t?void 0:t.id),u=n.variant===_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP,{colorTheme:c="secondary",shape:_}=(null==n?void 0:n.buttonGroupProps)||{},d=()=>a(!0),f=()=>{d(),p()},{primaryActions:T,secondaryActions:y}=(0,_utils.processActions)(o,u?null:f),m=(null==n?void 0:n.buttonSize)||"medium";return _react.default.createElement("div",{className:"".concat(_stylesModule.default.headerActionsContainer," ").concat(_stylesModule.default["placeSelf-".concat(n.alignment)]),onClick:e=>e.stopPropagation(),onMouseEnter:()=>a(!1),onMouseLeave:d},T.map(e=>_react.default.createElement(_UTTooltip.default,{tippyProps:{appendTo:()=>document.body,interactive:!1},content:e.label&&_react.default.createElement("span",null,e.label)},_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,_extends({},e,{classNames:{root:_stylesModule.default.zIndex},size:m,variant:"text"}),e.title)))),!(0,_isEmpty.default)(y)&&(u?_react.default.createElement(_UTButtonGroup.default,{actions:y.map(e=>({...e,onClick:()=>{i(e.id),e.onClick()}})),colorTheme:c,selected:l||(null===(r=y[0])||void 0===r?void 0:r.id),shape:_}):_react.default.createElement(_react.Fragment,null,_react.default.createElement(_UTMenu.default,{anchor:s,iconBefore:!0,items:y,menuPlacement:"bottom-end",onClose:f,scrollBarProps:{options:{suppressScrollY:!0,suppressScrollX:!0}}}),_react.default.createElement(_UTButton.default,{classNames:{root:_stylesModule.default.zIndex},Icon:"IconDots",onClick:e=>{e.stopPropagation(),s?p():p(e.currentTarget)},size:"medium",variant:"text"}))))};HeaderActions.propTypes={headerActions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({Icon:(0,_propTypes.oneOfType)([_propTypes.elementType,_propTypes.string]),id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]),isPrimary:_propTypes.bool,title:_propTypes.string,label:_propTypes.string,loading:_propTypes.bool,onClick:_propTypes.func,selectedDefault:_propTypes.bool})),headerActionsProps:(0,_propTypes.shape)({alignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),buttonGroupProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,shape:_propTypes.string}),variant:(0,_propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT,_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])}),setMainActionHoverVisible:_propTypes.func};var _default=exports.default=(0,_react.memo)(HeaderActions);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../../../UTButton")),_UTButtonGroup=_interopRequireDefault(require("../../../UTButtonGroup")),_UTMenu=_interopRequireDefault(require("../../../UTMenu")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_constants=require("../../constants"),_utils=require("./utils"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?n(s,t,a):s[t]=e[t]);return s})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}const HeaderActions=e=>{var t,r;let{headerActions:o,headerActionsProps:n,setMainActionHoverVisible:a}=e;const[s,p]=(0,_react.useState)(),[l,i]=(0,_react.useState)(null===(t=o.find(e=>{let{selectedDefault:t}=e;return t}))||void 0===t?void 0:t.id),u=n.variant===_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP,{colorTheme:c="secondary",shape:_}=(null==n?void 0:n.buttonGroupProps)||{},d=()=>a(!0),f=()=>{d(),p()},{primaryActions:T,secondaryActions:y}=(0,_utils.processActions)(o,u?null:f),m=(null==n?void 0:n.buttonSize)||"medium";return _react.default.createElement("div",{className:"".concat(_stylesModule.default.headerActionsContainer," ").concat(_stylesModule.default["placeSelf-".concat(n.alignment)]),onClick:e=>e.stopPropagation(),onMouseEnter:()=>a(!1),onMouseLeave:d},T.map(e=>_react.default.createElement(_UTTooltip.default,{tippyProps:{appendTo:()=>document.body,interactive:!1},content:e.label&&_react.default.createElement("span",null,e.label)},_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,_extends({},e,{classNames:{root:_stylesModule.default.zIndex},size:m,variant:"text"}),e.title)))),!(0,_isEmpty.default)(y)&&(u?_react.default.createElement(_UTButtonGroup.default,{actions:y.map(e=>({...e,onClick:()=>{i(e.id),e.onClick()}})),colorTheme:c,selected:l||(null===(r=y[0])||void 0===r?void 0:r.id),shape:_}):_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_UTMenu.default,{anchor:s,iconBefore:!0,items:y,menuPlacement:"bottom-end",onClose:f,scrollBarProps:{options:{suppressScrollY:!0,suppressScrollX:!0}}}),_react.default.createElement(_UTButton.default,{classNames:{root:_stylesModule.default.zIndex},Icon:"IconDots",onClick:e=>{e.stopPropagation(),s?p():p(e.currentTarget)},size:"medium",variant:"text"}))))};HeaderActions.propTypes={headerActions:(0,_propTypes.arrayOf)((0,_propTypes.shape)({Icon:(0,_propTypes.oneOfType)([_propTypes.elementType,_propTypes.string]),id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string]),isPrimary:_propTypes.bool,title:_propTypes.string,label:_propTypes.string,loading:_propTypes.bool,onClick:_propTypes.func,selectedDefault:_propTypes.bool})),headerActionsProps:(0,_propTypes.shape)({alignment:(0,_propTypes.oneOf)([_constants.PLACE_SELF_TYPES.CENTER,_constants.PLACE_SELF_TYPES.END,_constants.PLACE_SELF_TYPES.START]),buttonGroupProps:(0,_propTypes.shape)({colorTheme:_propTypes.string,shape:_propTypes.string}),variant:(0,_propTypes.oneOf)([_constants.HEADER_ACTIONS_VARIANTS.DEFAULT,_constants.HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])}),setMainActionHoverVisible:_propTypes.func};var _default=exports.default=(0,_react.memo)(HeaderActions);

package/dist/components/UTActionCard/components/HeaderActions/styles.module.scss

@@ -1,7 +1,7 @@
 .headerActionsContainer {
   align-items: center;
   display: flex;
-  grid-gap: 8px;
+  grid-gap: var(--UT-actionCard-gap-sm, 8px);
   height: fit-content;
 }
 

package/dist/components/UTActionCard/styles.module.scss

@@ -5,17 +5,17 @@ $default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
 
 .cardContainer {
   background: var(--light01, $default-card-container-color);
-  border-radius: 8px;
+  border-radius: var(--UT-actionCard-radius, 8px);
   box-shadow: var(--shadowGrayBottom1, $default-shadow-gray-bottom-1);
   overflow: hidden;
 }
 
 .bodyPadding-medium {
-  padding: 0 24px 24px;
+  padding: 0 var(--UT-actionCard-padding-lg, 24px) var(--UT-actionCard-padding-lg, 24px);
 }
 
 .bodyPadding-small {
-  padding: 0 16px 16px;
+  padding: 0 var(--UT-actionCard-padding-md, 16px) var(--UT-actionCard-padding-md, 16px);
 }
 
 .withoutMainAction {
@@ -71,13 +71,13 @@ $default-shadow-gray-bottom-1: 0px 3px 6px rgba(24, 44, 73, 0.1);
 }
 
 .withoutBodyPadding-small {
-  padding-bottom: 16px;
+  padding-bottom: var(--UT-actionCard-padding-md, 16px);
 }
 
 .withoutBodyPadding-medium {
-  padding-bottom: 24px;
+  padding-bottom: var(--UT-actionCard-padding-lg, 24px);
 }
 
 .withoutHeader {
-  padding-top: 24px;
+  padding-top: var(--UT-actionCard-padding-lg, 24px);
 }

package/dist/components/UTAlert/styles.module.scss

@@ -1,11 +1,11 @@
 .snackbarContent {
   flex-wrap: nowrap;
-  padding: 6px 15px;
+  padding: var(--UT-alert-padding-y, 8px) var(--UT-alert-padding-x, 16px);
 }
 
 .action {
   flex-shrink: 0;
-  padding-left: 10px;
+  padding-left: var(--UT-alert-action-padding, 8px);
 }
 
 .content {
@@ -14,8 +14,8 @@
 }
 
 .alertTypeIcon {
-  font-size: 20px;
-  margin-right: 10px;
+  font-size: var(--UT-alert-icon-size, 20px);
+  margin-right: var(--UT-alert-icon-margin, 8px);
   opacity: 0.9;
 }
 

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

@@ -1,6 +1,6 @@
 .previewImage {
   border: 1px solid;
-  width: 48px;
-  max-height: 48px;
+  width: var(--UT-attachmentList-preview-size, 48px);
+  max-height: var(--UT-attachmentList-preview-size, 48px);
   object-fit: contain;
 }

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

@@ -27,7 +27,7 @@
 
 .content {
   margin: 0;
-  padding: 24px;
+  padding: var(--UT-attachmentList-padding-lg, 24px);
   overflow: hidden;
   width: 100%;
 }

package/dist/components/UTAttachmentList/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.previewPropType=exports.UPLOAD_FILE=exports.SIZE_ERROR_TEXT=exports.PREVIEW_TYPES=exports.MB_LABEL=exports.MAX_SIZE_FILE_LABEL=exports.MAX_FILES_ERROR=exports.INDICATIONS=exports.ICON_SIZE=exports.FORMAT_FILE_LABEL=exports.FORMAT_ERROR_TEXT=exports.FILE_NOT_FOUND_ERROR_TEXT=exports.DEFAULT_UPLOADING_TEXT=exports.DEFAULT_MAX_FILES=exports.DEFAULT_ATTACHMENT_NAME=exports.ASPECT_RATIO_ERROR_TEXT=void 0;var _propTypes=require("prop-types");const FORMAT_ERROR_TEXT=exports.FORMAT_ERROR_TEXT="El formato no es compatible",SIZE_ERROR_TEXT=exports.SIZE_ERROR_TEXT="El archivo supera los ",ASPECT_RATIO_ERROR_TEXT=exports.ASPECT_RATIO_ERROR_TEXT="El formato de archivo es inválido. (Válidos:",FILE_NOT_FOUND_ERROR_TEXT=exports.FILE_NOT_FOUND_ERROR_TEXT="Hubo un error al cargar el archivo",DEFAULT_UPLOADING_TEXT=exports.DEFAULT_UPLOADING_TEXT="Cargando...",DEFAULT_ATTACHMENT_NAME=exports.DEFAULT_ATTACHMENT_NAME="Adjunto",FORMAT_FILE_LABEL=exports.FORMAT_FILE_LABEL="Debe tener formato: ",MAX_SIZE_FILE_LABEL=exports.MAX_SIZE_FILE_LABEL="No debe superar los ",UPLOAD_FILE=exports.UPLOAD_FILE="Subir archivo",INDICATIONS=exports.INDICATIONS="Arrastra y suelta o",MB_LABEL=exports.MB_LABEL="MB",MAX_FILES_ERROR=exports.MAX_FILES_ERROR="Se ha excedido el límite máximo de archivos permitidos ",DEFAULT_MAX_FILES=exports.DEFAULT_MAX_FILES=1,ICON_SIZE=exports.ICON_SIZE=32,PREVIEW_TYPES=exports.PREVIEW_TYPES={ERROR:"error",LOADING:"loading"},previewPropType=exports.previewPropType=(0,_propTypes.shape)({audio:_propTypes.object,image:_propTypes.object,video:_propTypes.object});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.previewPropType=exports.UPLOAD_ICON_SIZE=exports.UPLOAD_ICON_AREA_SIZE=exports.UPLOAD_ICON_AREA_RADIUS=exports.SIZE_ERROR_TEXT=exports.PREVIEW_TYPES=exports.MB_LABEL=exports.MAX_SIZE_FILE_LABEL=exports.MAX_FILES_ERROR=exports.INDICATIONS=exports.ICON_SIZE=exports.FORMAT_FILE_LABEL=exports.FORMAT_ERROR_TEXT=exports.FILE_NOT_FOUND_ERROR_TEXT=exports.DEFAULT_UPLOADING_TEXT=exports.DEFAULT_MAX_FILES=exports.DEFAULT_ATTACHMENT_NAME=exports.ASPECT_RATIO_ERROR_TEXT=void 0;var _propTypes=require("prop-types");const FORMAT_ERROR_TEXT=exports.FORMAT_ERROR_TEXT="El formato no es compatible",SIZE_ERROR_TEXT=exports.SIZE_ERROR_TEXT="El archivo supera los ",ASPECT_RATIO_ERROR_TEXT=exports.ASPECT_RATIO_ERROR_TEXT="El formato de archivo es inválido. (Válidos:",FILE_NOT_FOUND_ERROR_TEXT=exports.FILE_NOT_FOUND_ERROR_TEXT="Hubo un error al cargar el archivo",DEFAULT_UPLOADING_TEXT=exports.DEFAULT_UPLOADING_TEXT="Cargando...",DEFAULT_ATTACHMENT_NAME=exports.DEFAULT_ATTACHMENT_NAME="Adjunto",FORMAT_FILE_LABEL=exports.FORMAT_FILE_LABEL="Debe tener formato: ",MAX_SIZE_FILE_LABEL=exports.MAX_SIZE_FILE_LABEL="No debe superar los ",INDICATIONS=exports.INDICATIONS="Arrastra y suelta o sube un archivo",MB_LABEL=exports.MB_LABEL="MB",MAX_FILES_ERROR=exports.MAX_FILES_ERROR="Se ha excedido el límite máximo de archivos permitidos ",DEFAULT_MAX_FILES=exports.DEFAULT_MAX_FILES=1,ICON_SIZE=exports.ICON_SIZE=32,UPLOAD_ICON_SIZE=exports.UPLOAD_ICON_SIZE=24,UPLOAD_ICON_AREA_SIZE=exports.UPLOAD_ICON_AREA_SIZE=48,UPLOAD_ICON_AREA_RADIUS=exports.UPLOAD_ICON_AREA_RADIUS="var(--UT-attachmentList-icon-area-radius, 8px)",PREVIEW_TYPES=exports.PREVIEW_TYPES={ERROR:"error",LOADING:"loading"},previewPropType=exports.previewPropType=(0,_propTypes.shape)({audio:_propTypes.object,image:_propTypes.object,video:_propTypes.object});

package/dist/components/UTAttachmentList/index.js

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

package/dist/components/UTAttachmentList/layout.js

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

package/dist/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/components/UTAttachmentList/theme.js

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

package/dist/components/UTAttachmentList/utils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.pdfAspectRatioValidation=exports.isXLSX=exports.isXLS=exports.isVideo=exports.isValidFile=exports.isPDF=exports.isNewFile=exports.isImage=exports.isHTML=exports.isDownloadable=exports.isCSV=exports.isAudio=exports.hasPreview=exports.getSizeInMB=exports.getNotRepeatedFiles=exports.getDefaultAttachment=exports.getBlobFromUrl=exports.getAvailableFileTypesLabel=void 0;var _files=require("@widergy/web-utils/lib/constants/files"),_constants=require("./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)),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)};exports.getBlobFromUrl=getBlobFromUrl;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))},pdfAspectRatioValidation=async(e,t)=>{const i=window["pdfjs-dist/build/pdf"].getDocument(URL.createObjectURL(e)),s=await i.promise,o=s.numPages,l=[];for(let e=1;e<=o;e+=1)l.push(s.getPage(e));return(await Promise.all(l)).every(e=>pageMatches(e,t))};exports.pdfAspectRatioValidation=pdfAspectRatioValidation;const isImage=e=>_files.inputFiles.image.validType.includes(null==e?void 0:e.type);exports.isImage=isImage;const isPDF=e=>_files.inputFiles.pdf.validType.includes(null==e?void 0:e.type);exports.isPDF=isPDF;const isAudio=e=>_files.inputFiles.audio.validType.includes(null==e?void 0:e.type);exports.isAudio=isAudio;const isVideo=e=>_files.inputFiles.video.validType.includes(null==e?void 0:e.type);exports.isVideo=isVideo;const isHTML=e=>_files.inputFiles.html.validType.includes(null==e?void 0:e.type);exports.isHTML=isHTML;const isCSV=e=>_files.inputFiles.csv.validType.includes(null==e?void 0:e.type);exports.isCSV=isCSV;const isXLS=e=>_files.inputFiles.xls.validType.includes(null==e?void 0:e.type);exports.isXLS=isXLS;const isXLSX=e=>_files.inputFiles.xlsx.validType.includes(null==e?void 0:e.type);exports.isXLSX=isXLSX;const isDownloadable=e=>isPDF(e)||isCSV(e)||isXLS(e)||isXLSX(e);exports.isDownloadable=isDownloadable;const hasPreview=e=>isImage(e)||isAudio(e)||isVideo(e)||isPDF(e);exports.hasPreview=hasPreview;const isValidFile=e=>hasPreview(e)||isPDF(e)||isHTML(e);exports.isValidFile=isValidFile;const isNewFile=(e,t)=>{var i,s;if(!e&&!t)return!1;if(!e||!t)return!0;const o=typeof e;return o!==typeof t||("string"===o?e!==t:(null===(i=e.file)||void 0===i?void 0:i.lastModified)!==(null===(s=t.file)||void 0===s?void 0:s.lastModified))};exports.isNewFile=isNewFile;const getAvailableFileTypesLabel=e=>Array.isArray(e)?e.join(", ").replace(/,\s([^,]+)$/," o $1"):e.split(",").filter(e=>e.trim().startsWith(".")).join(", ").replace(/,\s([^,]+)$/," o $1");exports.getAvailableFileTypesLabel=getAvailableFileTypesLabel;const getSizeInMB=e=>(e/1048576).toFixed(2);exports.getSizeInMB=getSizeInMB;const getNotRepeatedFiles=e=>e.filter((e,t,i)=>t===i.findIndex(t=>t.name===e.name));exports.getNotRepeatedFiles=getNotRepeatedFiles;const getDefaultAttachment=(e,t)=>"".concat(_constants.DEFAULT_ATTACHMENT_NAME,"-").concat(t).concat(e&&".".concat(e));exports.getDefaultAttachment=getDefaultAttachment;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.pdfAspectRatioValidation=exports.isXLSX=exports.isXLS=exports.isVideo=exports.isValidFile=exports.isPDF=exports.isNewFile=exports.isImage=exports.isHTML=exports.isDownloadable=exports.isCSV=exports.isAudio=exports.hasPreview=exports.getUploadIconAreaColors=exports.getSizeInMB=exports.getNotRepeatedFiles=exports.getDefaultAttachment=exports.getBlobFromUrl=exports.getAvailableFileTypesLabel=void 0;var _files=require("@widergy/web-utils/lib/constants/files"),_constants=require("./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)),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)};exports.getBlobFromUrl=getBlobFromUrl;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))},pdfAspectRatioValidation=async(e,t)=>{const i=window["pdfjs-dist/build/pdf"].getDocument(URL.createObjectURL(e)),s=await i.promise,o=s.numPages,l=[];for(let e=1;e<=o;e+=1)l.push(s.getPage(e));return(await Promise.all(l)).every(e=>pageMatches(e,t))};exports.pdfAspectRatioValidation=pdfAspectRatioValidation;const isImage=e=>_files.inputFiles.image.validType.includes(null==e?void 0:e.type);exports.isImage=isImage;const isPDF=e=>_files.inputFiles.pdf.validType.includes(null==e?void 0:e.type);exports.isPDF=isPDF;const isAudio=e=>_files.inputFiles.audio.validType.includes(null==e?void 0:e.type);exports.isAudio=isAudio;const isVideo=e=>_files.inputFiles.video.validType.includes(null==e?void 0:e.type);exports.isVideo=isVideo;const isHTML=e=>_files.inputFiles.html.validType.includes(null==e?void 0:e.type);exports.isHTML=isHTML;const isCSV=e=>_files.inputFiles.csv.validType.includes(null==e?void 0:e.type);exports.isCSV=isCSV;const isXLS=e=>_files.inputFiles.xls.validType.includes(null==e?void 0:e.type);exports.isXLS=isXLS;const isXLSX=e=>_files.inputFiles.xlsx.validType.includes(null==e?void 0:e.type);exports.isXLSX=isXLSX;const isDownloadable=e=>isPDF(e)||isCSV(e)||isXLS(e)||isXLSX(e);exports.isDownloadable=isDownloadable;const hasPreview=e=>isImage(e)||isAudio(e)||isVideo(e)||isPDF(e);exports.hasPreview=hasPreview;const isValidFile=e=>hasPreview(e)||isPDF(e)||isHTML(e);exports.isValidFile=isValidFile;const isNewFile=(e,t)=>{var i,s;if(!e&&!t)return!1;if(!e||!t)return!0;const o=typeof e;return o!==typeof t||("string"===o?e!==t:(null===(i=e.file)||void 0===i?void 0:i.lastModified)!==(null===(s=t.file)||void 0===s?void 0:s.lastModified))};exports.isNewFile=isNewFile;const getAvailableFileTypesLabel=e=>Array.isArray(e)?e.join(", ").replace(/,\s([^,]+)$/," o $1"):e.split(",").filter(e=>e.trim().startsWith(".")).join(", ").replace(/,\s([^,]+)$/," o $1");exports.getAvailableFileTypesLabel=getAvailableFileTypesLabel;const getSizeInMB=e=>(e/1048576).toFixed(2);exports.getSizeInMB=getSizeInMB;const getNotRepeatedFiles=e=>e.filter((e,t,i)=>t===i.findIndex(t=>t.name===e.name));exports.getNotRepeatedFiles=getNotRepeatedFiles;const getDefaultAttachment=(e,t)=>"".concat(_constants.DEFAULT_ATTACHMENT_NAME,"-").concat(t).concat(e&&".".concat(e));exports.getDefaultAttachment=getDefaultAttachment;const getUploadIconAreaColors=e=>({areaBackground:e.Palette.light["01"],areaBorderColor:e.Palette.light["03"]});exports.getUploadIconAreaColors=getUploadIconAreaColors;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICON_SIZE=exports.ERROR_ICON=void 0;const ERROR_ICON=exports.ERROR_ICON="IconAlertCircle",ICON_SIZE=exports.ICON_SIZE=20;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICON_SIZE_CSS_VAR=exports.ICON_SIZE=exports.ERROR_ICON=void 0;const ERROR_ICON=exports.ERROR_ICON="IconAlertCircle",ICON_SIZE=exports.ICON_SIZE=16,ICON_SIZE_CSS_VAR=exports.ICON_SIZE_CSS_VAR="var(--UT-baseInput-adornment-size, 16px)";

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_componentUtils=require("../../../../utils/componentUtils"),_constants=require("./constants"),_utils=require("./utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}const IconAdornment=e=>{var o;let{changeIconOnError:r=!0,changeOnError:n,changeOnFocus:t,colorTheme:s,error:p,focused:l,Icon:c,inputStyle:u,shade:a,showOnlyOnError:_}=e;const i=_||n;if(_&&!p)return null;const d=p&&r?_constants.ERROR_ICON:c;return d?(0,_componentUtils.isUTIcon)(d)?_react.default.createElement(_UTIcon.default,_extends({name:d,size:_constants.ICON_SIZE},(0,_utils.getIconColorProps)(i,t,s,p,l,a))):_react.default.createElement(c,{size:_constants.ICON_SIZE,fill:null==u||null===(o=u.root)||void 0===o?void 0:o.color}):null};IconAdornment.propTypes={changeIconOnError:_propTypes.bool,changeOnError:_propTypes.bool,changeOnFocus:_propTypes.bool,colorTheme:_propTypes.string,error:(0,_propTypes.oneOfType)([_propTypes.bool,_propTypes.string]),focused:_propTypes.bool,Icon:_propTypes.elementType,inputStyle:(0,_propTypes.shape)({root:_propTypes.object}),shade:_propTypes.string,showOnlyOnError:_propTypes.bool};var _default=exports.default=IconAdornment;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_componentUtils=require("../../../../utils/componentUtils"),_constants=require("./constants"),_utils=require("./utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}const IconAdornment=e=>{var o;let{changeIconOnError:r=!0,changeOnError:n,changeOnFocus:t,colorTheme:s,error:p,focused:_,Icon:l,inputStyle:c,shade:a,showOnlyOnError:u}=e;const i=u||n;if(u&&!p)return null;const d=p&&r?_constants.ERROR_ICON:l;return d?(0,_componentUtils.isUTIcon)(d)?_react.default.createElement(_UTIcon.default,_extends({name:d,size:_constants.ICON_SIZE_CSS_VAR},(0,_utils.getIconColorProps)(i,t,s,p,_,a))):_react.default.createElement(l,{fill:null==c||null===(o=c.root)||void 0===o?void 0:o.color,size:_constants.ICON_SIZE,style:{fontSize:_constants.ICON_SIZE_CSS_VAR,height:_constants.ICON_SIZE_CSS_VAR,width:_constants.ICON_SIZE_CSS_VAR}}):null};IconAdornment.propTypes={changeIconOnError:_propTypes.bool,changeOnError:_propTypes.bool,changeOnFocus:_propTypes.bool,colorTheme:_propTypes.string,error:(0,_propTypes.oneOfType)([_propTypes.bool,_propTypes.string]),focused:_propTypes.bool,Icon:_propTypes.elementType,inputStyle:(0,_propTypes.shape)({root:_propTypes.object}),shade:_propTypes.string,showOnlyOnError:_propTypes.bool};var _default=exports.default=IconAdornment;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const TooltipAdornment=e=>{let{contentDataTestId:t,dataTestId:r,tooltip:o}=e;return _react.default.createElement(_UTTooltip.default,{content:o,dataTestId:t},_react.default.createElement("div",{className:_stylesModule.default.tooltip,"data-testid":r},_react.default.createElement(_UTIcon.default,{name:"IconInfoCircle",colorTheme:"gray"})))};TooltipAdornment.propTypes={contentDataTestId:_propTypes.string,dataTestId:_propTypes.string,tooltip:_propTypes.string};var _default=exports.default=TooltipAdornment;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const TooltipAdornment=e=>{let{contentDataTestId:t,dataTestId:o,tooltip:r}=e;return _react.default.createElement(_UTTooltip.default,{content:r,dataTestId:t,tippyProps:{appendTo:()=>document.body,interactive:!1}},_react.default.createElement("div",{className:_stylesModule.default.tooltip,"data-testid":o},_react.default.createElement(_UTIcon.default,{name:"IconInfoCircle",colorTheme:"gray"})))};TooltipAdornment.propTypes={contentDataTestId:_propTypes.string,dataTestId:_propTypes.string,tooltip:_propTypes.string};var _default=exports.default=TooltipAdornment;

package/dist/components/UTBaseInputField/index.js

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

package/dist/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/components/UTBaseInputField/theme.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _theme=require("../UTLabel/theme"),_utils=require("./utils");const charactersCountRowHeight=20,PADDING={HORIZONTAL:16,VERTICAL:12},SMALL_PADDING={HORIZONTAL:12,VERTICAL:8},GRID_GAP=16,getPaddingValues=t=>{const e="small"===t?SMALL_PADDING.VERTICAL:PADDING.VERTICAL,r="small"===t?SMALL_PADDING.HORIZONTAL:PADDING.HORIZONTAL,a=e+16+20;return{verticalPadding:"".concat(e,"px"),horizontalPadding:"".concat(r,"px"),multilineVerticalPadding:"".concat(a,"px")}},getBackgroundColor=t=>{let{theme:e,variant:r,error:a,disabled:o,readOnly:n}=t;return n?"transparent":"gray"===r?e.Palette.light["04"]:"transparent"===r&&a?e.Palette.error["01"]:"transparent"===r?"transparent":o?e.Palette.light["03"]:e.Palette.light["01"]},getBorderColor=t=>{let{theme:e,variant:r,error:a,readOnly:o,disabled:n}=t;return"gray"===r||"transparent"===r||o||n?"transparent !important":"".concat(a?e.Palette.error["04"]:e.Palette.light["05"]," !important")},getBackgroundColorOnHover=t=>{let{theme:e,variant:r,error:a,readOnly:o}=t;return"gray"===r?e.Palette.light["05"]:"transparent"===r&&a?e.Palette.error["02"]:o?void 0:e.Palette.light["03"]},retrieveStyle=t=>{let{alwaysShowPlaceholder:e,disabled:r,error:a,inputSize:o,maxLength:n,readOnly:l,showCharacterCount:i,theme:d,variant:c}=t;const g=r&&!l,p=i&&n&&!g&&!l,s=(0,_utils.getActionPalette)(d),{verticalPadding:u,horizontalPadding:h,multilineVerticalPadding:P}=getPaddingValues(o);return{charactersCount:{bottom:u,position:"absolute"},root:{backgroundColor:getBackgroundColor({theme:d,variant:c,error:a,disabled:g,readOnly:l}),paddingBottom:p?P:u,paddingLeft:h,paddingRight:h,paddingTop:u,...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:{...(0,_theme.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:e?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"]}}}};exports.retrieveStyle=retrieveStyle;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _theme=require("../UTLabel/theme"),_utils=require("./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 e="small"===t?"small":"medium",r=PADDING_Y[e];return{verticalPadding:r,horizontalPadding:PADDING_X[e],multilineVerticalPadding:"calc(".concat(r," + ").concat(GRID_GAP[e]," + ").concat(20,"px)")}},getBackgroundColor=t=>{let{theme:e,variant:r,error:a,disabled:o,readOnly:n}=t;return n?"transparent":"gray"===r?e.Palette.light["04"]:"transparent"===r&&a?e.Palette.error["01"]:"transparent"===r?"transparent":o?e.Palette.light["03"]:e.Palette.light["01"]},getBorderColor=t=>{let{theme:e,variant:r,error:a,readOnly:o,disabled:n}=t;return"gray"===r||"transparent"===r||o||n?"transparent !important":"".concat(a?e.Palette.error["04"]:e.Palette.light["04"]," !important")},getBackgroundColorOnHover=t=>{let{theme:e,variant:r,error:a,readOnly:o}=t;return"gray"===r?e.Palette.light["05"]:"transparent"===r&&a?e.Palette.error["02"]:o?void 0:e.Palette.light["03"]},retrieveStyle=t=>{let{alwaysShowPlaceholder:e,disabled:r,error:a,inputSize:o,maxLength:n,readOnly:l,showCharacterCount:i,theme:d,variant:p}=t;const s=r&&!l,c=i&&n&&!s&&!l,g=(0,_utils.getActionPalette)(d),{verticalPadding:u,horizontalPadding:h,multilineVerticalPadding:m}=getPaddingValues(o);return{charactersCount:{bottom:u,position:"absolute"},root:{backgroundColor:getBackgroundColor({theme:d,variant:p,error:a,disabled:s,readOnly:l}),borderRadius:"var(--UT-baseInput-radius, 8px)",paddingBottom:c?m:u,paddingLeft:h,paddingRight:h,paddingTop:u,...l&&{paddingLeft:0,paddingRight:0},"&:hover":{backgroundColor:getBackgroundColorOnHover({theme:d,variant:p,error:a,readOnly:l})},"&:active":{...!s&&!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:s}),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:{...(0,_theme.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||s?d.Palette.gray["02"]:d.Palette.dark["05"],opacity:e?1:0,transition:"none",userSelect:"none"},"&::selection":{backgroundColor:g["02"]},"&:focus":{"&::placeholder":{color:"".concat(d.Palette.gray["02"]," !important"),opacity:1}},...s&&{color:d.Palette.gray["04"]}}}};exports.retrieveStyle=retrieveStyle;

package/dist/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 {