@widergy/energy-ui 3.177.0 → 3.178.0

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

@@ -22,7 +22,7 @@ $additional-content-total: $body-component-width + $sidebar-width;
   align-items: center;
   display: flex;
   flex: 1;
-  gap: 8px;
+  gap: var(--UT-panel-gap-sm, 8px);
 }
 
 .backButtonContainer {
@@ -33,9 +33,9 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .controlAreaBar {
   align-items: center;
   display: flex;
-  gap: 8px;
+  gap: var(--UT-panel-gap-sm, 8px);
   justify-content: space-between;
-  padding: 8px;
+  padding: var(--UT-panel-padding-xs, 8px);
 }
 
 .controlAreaContainer {
@@ -47,7 +47,7 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .paginationContainer {
   align-items: center;
   display: flex;
-  grid-gap: 16px;
+  grid-gap: var(--UT-panel-gap-lg, 16px);
 }
 
 .contentRowContainer {
@@ -75,11 +75,11 @@ $additional-content-total: $body-component-width + $sidebar-width;
 }
 
 .headerContainer {
-  padding: 8px 24px 16px;
+  padding: var(--UT-panel-padding-xs, 8px) var(--UT-panel-padding-lg, 24px) var(--UT-panel-padding-md, 16px);
 }
 
 .pretitleArea {
-  margin-bottom: 4px;
+  margin-bottom: var(--UT-panel-gap-xs, 4px);
   width: 100%;
 }
 
@@ -92,18 +92,18 @@ $additional-content-total: $body-component-width + $sidebar-width;
 .headerLeftArea {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: var(--UT-panel-gap-sm, 8px);
 }
 
 .headerRightArea {
   display: flex;
-  grid-gap: 8px;
+  grid-gap: var(--UT-panel-gap-sm, 8px);
 }
 
 .titleArea {
   align-items: center;
   display: flex;
-  grid-gap: 12px;
+  grid-gap: var(--UT-panel-gap-md, 12px);
 }
 
 .subtitleArea {
@@ -120,7 +120,7 @@ $additional-content-total: $body-component-width + $sidebar-width;
   flex-wrap: wrap;
   margin-top: 0;
   max-height: 100%;
-  padding: 0 24px;
+  padding: 0 var(--UT-panel-padding-lg, 24px);
   transition:
     max-height 0.08s ease,
     opacity 0.08s ease,
@@ -175,16 +175,16 @@ $additional-content-total: $body-component-width + $sidebar-width;
 }
 
 .bodyContainer {
-  padding: 24px;
+  padding: var(--UT-panel-padding-lg, 24px);
 }
 
 .perfectScrollbar {
   flex: 1;
-  margin: 10px 0;
+  margin: var(--UT-panel-padding-xs, 8px) 0;
 }
 
 .progressBarContainer {
-  margin-bottom: 16px;
+  margin-bottom: var(--UT-panel-padding-md, 16px);
 }
 
 .mainButton {

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Error/styles.module.scss

@@ -1,8 +1,8 @@
 .container {
   display: flex;
-  margin-top: 8px;
+  margin-top: var(--UT-passwordField-gap, 8px);
 }
 
 .label {
-  margin-left: 8px;
+  margin-left: var(--UT-passwordField-gap, 8px);
 }

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/components/Validation/styles.module.scss

@@ -1,9 +1,9 @@
 .container {
   align-items: center;
   display: flex;
-  margin-top: 8px;
+  margin-top: var(--UT-passwordField-gap, 8px);
 }
 
 .label {
-  margin-left: 8px;
+  margin-left: var(--UT-passwordField-gap, 8px);
 }

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordValidations/index.js

@@ -1 +1 @@
-import React,{Fragment}from"react";import{arrayOf,shape,string,elementType,objectOf,bool,instanceOf,oneOfType}from"prop-types";import{metaPropTypes}from"../../../../../../types/formTypes";import Validation from"./components/Validation";import Error from"./components/Error";const PasswordValidations=e=>{let{passwordValidations:r,value:t,classes:a,ValidationFailedIcon:o,ValidationPassedIcon:n,ErrorIcon:s,NoValueIcon:i,meta:l,disabled:d,passwordValidationsWarning:c,errorDataTestId:p,validationDataTestId:m}=e;const u=r.map(e=>{let{expression:r,...a}=e;return{assertion:new RegExp(r).test(t),...a}}),{errorsContainerStyle:f}=a,{submitFailed:y,error:V}=l,g=u.filter(e=>{let{requirement:r}=e;return r}),I=u.filter(e=>{let{requirement:r}=e;return!r});V&&!r.map(e=>{let{error:r}=e;return r}).includes(V)&&I.push({error:V});const T=I.some(e=>{let{assertion:r,error:t}=e;return!(r||null!=c&&c.some(e=>{let{error:r}=e;return t===r}))});return React.createElement(Fragment,null,g.map((e,r)=>{let{requirement:s,assertion:l}=e;return React.createElement(Validation,{assertion:l,classes:a,disabled:d,key:s,NoValueIcon:i,requirement:s,shouldShowError:y,ValidationFailedIcon:o,ValidationPassedIcon:n,value:t,dataTestId:"".concat(m,".").concat(r)})}),y&&T&&React.createElement("div",{className:f},I.map((e,r)=>{let{error:t,assertion:o}=e;return React.createElement(Error,{dataTestId:"".concat(p,".").concat(r),ErrorIcon:s,classes:a,assertion:o,error:t,key:t})})))};PasswordValidations.propTypes={passwordValidations:arrayOf(shape({expression:oneOfType([string,instanceOf(RegExp)]),requirement:string,error:string})),passwordValidationsWarning:arrayOf(shape({expression:oneOfType([string,instanceOf(RegExp)]),requirement:string,error:string})),value:string,classes:objectOf(string),ValidationFailedIcon:elementType,ValidationPassedIcon:elementType,ErrorIcon:elementType,NoValueIcon:elementType,meta:metaPropTypes,disabled:bool,errorDataTestId:string,validationDataTestId:string};export default PasswordValidations;
+import React,{Fragment}from"react";import{arrayOf,shape,string,elementType,objectOf,bool,instanceOf,oneOfType}from"prop-types";import{metaPropTypes}from"../../../../../../types/formTypes";import Validation from"./components/Validation";import Error from"./components/Error";const PasswordValidations=e=>{let{passwordValidations:r,value:t,classes:a,ValidationFailedIcon:o,ValidationPassedIcon:n,ErrorIcon:s,NoValueIcon:i,meta:l,disabled:d,passwordValidationsWarning:c,errorDataTestId:p,validationDataTestId:m}=e;const u=r.map(e=>{let{expression:r,...a}=e;return{assertion:new RegExp(r).test(t),...a}}),{errorsContainerStyle:f}=a,{submitFailed:y,error:V}=l,g=u.filter(e=>{let{requirement:r}=e;return r}),I=u.filter(e=>{let{requirement:r}=e;return!r});V&&!r.map(e=>{let{error:r}=e;return r}).includes(V)&&I.push({error:V});const T=I.some(e=>{let{assertion:r,error:t}=e;return!(r||null!=c&&c.some(e=>{let{error:r}=e;return t===r}))});return React.createElement(React.Fragment,null,g.map((e,r)=>{let{requirement:s,assertion:l}=e;return React.createElement(Validation,{assertion:l,classes:a,disabled:d,key:s,NoValueIcon:i,requirement:s,shouldShowError:y,ValidationFailedIcon:o,ValidationPassedIcon:n,value:t,dataTestId:"".concat(m,".").concat(r)})}),y&&T&&React.createElement("div",{className:f},I.map((e,r)=>{let{error:t,assertion:o}=e;return React.createElement(Error,{dataTestId:"".concat(p,".").concat(r),ErrorIcon:s,classes:a,assertion:o,error:t,key:t})})))};PasswordValidations.propTypes={passwordValidations:arrayOf(shape({expression:oneOfType([string,instanceOf(RegExp)]),requirement:string,error:string})),passwordValidationsWarning:arrayOf(shape({expression:oneOfType([string,instanceOf(RegExp)]),requirement:string,error:string})),value:string,classes:objectOf(string),ValidationFailedIcon:elementType,ValidationPassedIcon:elementType,ErrorIcon:elementType,NoValueIcon:elementType,meta:metaPropTypes,disabled:bool,errorDataTestId:string,validationDataTestId:string};export default PasswordValidations;

package/dist/esm/components/UTPasswordField/versions/V0/components/PasswordWarning/styles.module.scss

@@ -3,14 +3,14 @@
 }
 
 .warningContainer {
-  margin-top: 16px;
+  margin-top: var(--UT-passwordField-warning-margin-top, 16px);
 }
 
 .iconAndLabelContainer {
   display: flex;
-  margin-top: 16px;
+  margin-top: var(--UT-passwordField-warning-margin-top, 16px);
 }
 
 .warning {
-  margin-left: 8px;
+  margin-left: var(--UT-passwordField-gap, 8px);
 }

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

@@ -1,14 +1,14 @@
 .container {
   display: flex;
   flex-direction: column;
-  grid-gap: 12px;
+  grid-gap: var(--UT-field-gap, 8px);
 }
 
 .inputsContainer {
   display: flex;
   align-items: center;
   flex-direction: row;
-  grid-gap: 8px;
+  grid-gap: var(--UT-phoneInput-gap-sm, 8px);
 }
 
 .areaCodeContainer {

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/constants.js

@@ -1 +1 @@
-export const RADIO_VARIANTS={DEFAULT:"default",BUTTON:"button",CARD:"card"};export const ICON_SIZES={[RADIO_VARIANTS.CARD]:48};
+export const RADIO_VARIANTS={DEFAULT:"default",BUTTON:"button",CARD:"card"};export const ICON_SIZES={[RADIO_VARIANTS.CARD]:16};export const ICON_AREA_SIZE=32;export const ICON_AREA_RADIUS="var(--UT-radioGroup-card-icon-area-radius, 8px)";export const ICON_CONTENT_TYPES={UT_ICON:"utIcon",IMAGE:"image",COMPONENT:"component"};

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/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 a in o)({}).hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},_extends.apply(null,arguments)}import React from"react";import MaterialRadio from"@material-ui/core/Radio";import{object,bool,func,string}from"prop-types";import UTTouchableWithoutFeedback from"../../../../../UTTouchableWithoutFeedback";import UTIcon from"../../../../../UTIcon";import UTLabel from"../../../../../UTLabel";import WithTheme from"../../../../../WithTheme";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{RADIO_VARIANTS,ICON_SIZES}from"./constants";const Radio=e=>{let{classes:t,description:o,descriptionProps:a={},disabled:r,icon:c,iconProps:n={},iconSelectedProps:i={},name:l,nameProps:s={},nameSelectedProps:m={},onChange:d,prefix:T,selected:p,suffix:b,variant:h=RADIO_VARIANTS.DEFAULT}=e;return React.createElement(UTTouchableWithoutFeedback,{className:t.root,onClick:()=>!r&&d()},h===RADIO_VARIANTS.DEFAULT&&React.createElement(MaterialRadio,{checked:p,onChange:d,value:l,disabled:r}),React.createElement("div",{className:t.content},c&&React.createElement(UTIcon,_extends({name:c,colorTheme:p?"accent":"dark",size:ICON_SIZES[h]},n,p?i:{})),React.createElement("div",{className:t.contentContainer},React.createElement("div",{className:t.content},T&&React.createElement(UTLabel,{colorTheme:"gray"},T),l&&React.createElement(UTLabel,_extends({colorTheme:p?"accent":"dark"},s,p?m:{}),l),b&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",weight:"medium"},b)),React.createElement(UTLabel,_extends({colorTheme:"gray",variant:"body"},a),o))),p&&[RADIO_VARIANTS.CARD,RADIO_VARIANTS.BUTTON].includes(h)&&React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent"}))};Radio.propTypes={classes:object,description:string,descriptionProps:object,disabled:bool,icon:string,iconProps:object,iconSelectedProps:object,name:string,nameProps:object,nameSelectedProps:object,onChange:func,prefix:string,selected:bool,suffix:string,variant:string};export default WithTheme(retrieveStyle,retrieveMuiTheme)(Radio);
+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 from"react";import{object,bool,elementType,func,oneOfType,shape,string}from"prop-types";import UTTouchableWithoutFeedback from"../../../../../UTTouchableWithoutFeedback";import UTIcon from"../../../../../UTIcon";import UTLabel from"../../../../../UTLabel";import UTTooltip from"../../../../../UTTooltip";import WithTheme from"../../../../../WithTheme";import{retrieveStyle}from"./theme";import{getIconAreaColors,getIconContentType}from"./utils";import{RADIO_VARIANTS,ICON_SIZES,ICON_AREA_RADIUS,ICON_AREA_SIZE,ICON_CONTENT_TYPES}from"./constants";const Radio=e=>{let{classes:t,description:a,descriptionProps:o={},disabled:r,icon:c,iconProps:n={},iconSelectedProps:i={},name:l,nameProps:s={},nameSelectedProps:m={},onChange:T,prefix:d,selected:p,suffix:R,theme:E,tooltip:I,variant:N=RADIO_VARIANTS.DEFAULT}=e;const A=N===RADIO_VARIANTS.CARD,{areaBackground:h,areaBorderColor:b}=getIconAreaColors(E),f=l&&React.createElement(UTLabel,_extends({className:t.name,colorTheme:"dark"},s,p?m:{}),l);return React.createElement(UTTouchableWithoutFeedback,{className:t.root,onClick:()=>!r&&T()},N===RADIO_VARIANTS.DEFAULT&&React.createElement("div",{className:t.radioCircleContainer},React.createElement("div",{className:t.radioCircle},p&&React.createElement("div",{className:t.radioDot}))),React.createElement("div",{className:t.content},(()=>{if(!c)return null;const e=getIconContentType(c);if(e===ICON_CONTENT_TYPES.IMAGE)return React.createElement("img",{alt:c.alt||"",className:t.iconImage,src:c.src});if(e===ICON_CONTENT_TYPES.COMPONENT){const e=c;return React.createElement(e,{className:t.icon})}return React.createElement(UTIcon,_extends({colorTheme:"dark",name:c,size:ICON_SIZES[N]},A&&{area:!0,areaBackground:h,areaBorderColor:b,areaRadius:ICON_AREA_RADIUS,areaSize:ICON_AREA_SIZE},n,p?i:{}))})(),React.createElement("div",{className:t.contentContainer},React.createElement("div",{className:t.content},d&&React.createElement(UTLabel,{colorTheme:"gray"},d),A&&I?React.createElement("div",{className:t.titleAndTooltip},f,React.createElement(UTTooltip,{content:I},React.createElement("span",{className:t.tooltip},React.createElement(UTIcon,{className:t.infoIcon,colorTheme:p&&A?"accent":r&&A?"gray":"dark",name:"IconHelp",size:20})))):f,R&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",weight:"medium"},R)),React.createElement(UTLabel,_extends({className:t.description,colorTheme:"gray",variant:"body"},o),a))),A&&React.createElement("div",{className:t.cardRadio},p&&React.createElement("div",{className:t.radioDot})),p&&N===RADIO_VARIANTS.BUTTON&&React.createElement(UTIcon,{name:"IconCheck",colorTheme:"accent"}))};Radio.propTypes={classes:object,description:string,descriptionProps:object,disabled:bool,icon:oneOfType([string,elementType,shape({alt:string,src:string})]),iconProps:object,iconSelectedProps:object,name:string,nameProps:object,nameSelectedProps:object,onChange:func,prefix:string,selected:bool,suffix:string,theme:object,tooltip:string,variant:string};export default WithTheme(retrieveStyle)(Radio);

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/theme.js

@@ -1 +1 @@
-import{createTheme}from"@material-ui/core/styles";import{getShadow}from"../../../../../../utils/shadowUtils";import{SPACING}from"../../constants";import{RADIO_VARIANTS}from"./constants";export const retrieveStyle=o=>{var e,t,a,n;let{theme:l,variant:i=RADIO_VARIANTS.DEFAULT,disabled:r,selected:c,spacing:d=SPACING.MEDIUM,reversed:s}=o;const A=(null===(e=l.Palette.actions)||void 0===e?void 0:e.accent["01"])||l.Palette.accent["01"],p=(null===(t=l.Palette.actions)||void 0===t?void 0:t.accent["02"])||l.Palette.accent["02"],I=(null===(a=l.Palette.actions)||void 0===a?void 0:a.accent["05"])||l.Palette.accent["05"],h={[RADIO_VARIANTS.CARD]:{backgroundColor:l.Palette.light["01"],boxShadow:getShadow({color:null===(n=l.Palette.shadows)||void 0===n?void 0:n.grayscale,level:1}),outline:"2px solid transparent","&:hover":{backgroundColor:l.Palette.light["03"],boxShadow:"none"},"&:active":{backgroundColor:l.Palette.light["04"],boxShadow:"none","& $aditionalInfoDescription":{color:l.Palette.gray["03"]}}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:l.Palette.light["01"],"&:hover":{backgroundColor:l.Palette.light["03"]},"&:active":{backgroundColor:l.Palette.light["04"]}},[RADIO_VARIANTS.DEFAULT]:{}}[i],g={[RADIO_VARIANTS.CARD]:{boxShadow:"none",outline:"2px solid ".concat(I),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:I},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:I},"&:hover":{backgroundColor:A,outline:"2px solid ".concat(I)},"&:active":{backgroundColor:p,outline:"2px solid ".concat(I)}},[RADIO_VARIANTS.BUTTON]:{},[RADIO_VARIANTS.DEFAULT]:{}}[i],u={[RADIO_VARIANTS.CARD]:{backgroundColor:l.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent","& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:l.Palette.gray["04"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:l.Palette.gray["04"]},"&:hover":{backgroundColor:l.Palette.light["03"],outline:"2px solid transparent",pointerEvents:"none"}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:l.Palette.light["01"],opacity:.5},[RADIO_VARIANTS.DEFAULT]:{opacity:.5}}[i];return{root:{alignItems:"center",borderRadius:"8px",display:"flex",flexDirection:"row",gap:{[SPACING.SMALL]:"8px",[SPACING.MEDIUM]:"16px"}[d],minHeight:"24px",overflow:"hidden",padding:"12px 16px",...r?u:c?g:h},content:{alignItems:"center",display:"flex",flexDirection:s?"row-reverse":"row",gap:{[SPACING.SMALL]:"8px",[SPACING.MEDIUM]:"16px"}[d],marginRight:"auto"},name:{colorTheme:"accent"},contentContainer:{display:"flex",flexDirection:"column",gap:"4px"}}};export const retrieveMuiTheme=o=>{var e;const t=(null===(e=o.Palette.actions)||void 0===e?void 0:e.accent["04"])||o.Palette.accent["04"];return createTheme({overrides:{MuiRadio:{colorSecondary:{color:t,"&$checked":{color:t},"&$disabled":{color:o.Palette.gray["04"]}},root:{padding:0}}}})};
+import{SPACING}from"../../constants";import{RADIO_VARIANTS}from"./constants";const SPACING_VALUES={[SPACING.SMALL]:"var(--UT-radioGroup-control-gap-sm, 4px)",[SPACING.MEDIUM]:"var(--UT-radioGroup-control-gap-md, 8px)"},getCardRadioColors=o=>{let{accent04:t,disabled:e,selected:r,theme:a}=o;const i=a.Palette.gray["04"];return{backgroundColor:r?e?i:t:"transparent",borderColor:e?i:r?t:a.Palette.light["04"]}};export const retrieveStyle=o=>{var t,e,r,a,i;let{theme:n,variant:l=RADIO_VARIANTS.DEFAULT,disabled:d,selected:c,spacing:p=SPACING.MEDIUM,reversed:A}=o;const s=(null===(t=n.Palette.actions)||void 0===t?void 0:t.accent["01"])||n.Palette.accent["01"],g=(null===(e=n.Palette.actions)||void 0===e?void 0:e.accent["02"])||n.Palette.accent["02"],u=(null===(r=n.Palette.actions)||void 0===r?void 0:r.accent["03"])||n.Palette.accent["03"],h=(null===(a=n.Palette.actions)||void 0===a?void 0:a.accent["04"])||n.Palette.accent["04"],I=(null===(i=n.Palette.actions)||void 0===i?void 0:i.accent["05"])||n.Palette.accent["05"],x={[RADIO_VARIANTS.CARD]:{backgroundColor:n.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(n.Palette.light["04"]," !important"),"&:hover":{backgroundColor:n.Palette.light["03"]},"&:active":{backgroundColor:n.Palette.light["04"],"& $description":{color:n.Palette.gray["03"]}}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:n.Palette.light["01"],"&:hover":{backgroundColor:n.Palette.light["03"]},"&:active":{backgroundColor:n.Palette.light["04"]}},[RADIO_VARIANTS.DEFAULT]:{}}[l],v={[RADIO_VARIANTS.CARD]:{boxShadow:"none",outline:"2px solid ".concat(u," !important"),"& $icon path":{fill:I},"&:hover":{backgroundColor:s,outline:"2px solid ".concat(u," !important")},"&:active":{backgroundColor:g,outline:"2px solid ".concat(u," !important")}},[RADIO_VARIANTS.BUTTON]:{},[RADIO_VARIANTS.DEFAULT]:{}}[l],C={[RADIO_VARIANTS.CARD]:{backgroundColor:n.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent !important",pointerEvents:"none","& $name, & $description":{color:n.Palette.gray["04"]},"& $icon path":{fill:n.Palette.gray["04"]}},[RADIO_VARIANTS.BUTTON]:{backgroundColor:n.Palette.light["01"],opacity:.5},[RADIO_VARIANTS.DEFAULT]:{opacity:.5}}[l];return{root:{alignItems:"center !important",borderRadius:l===RADIO_VARIANTS.CARD?"var(--UT-radioGroup-card-radius, 12px)":"var(--UT-radioGroup-row-radius, 8px)",display:"flex",flexDirection:"row",gap:SPACING_VALUES[p]||SPACING_VALUES[SPACING.MEDIUM],minHeight:"var(--UT-radioGroup-row-min-height, 24px)",overflow:l===RADIO_VARIANTS.CARD?"visible":"hidden",...l!==RADIO_VARIANTS.DEFAULT&&{padding:"var(--UT-radioGroup-row-padding-y, 12px) var(--UT-radioGroup-row-padding-x, 16px)"},...d?C:c?v:x},radioCircleContainer:{borderRadius:"50%",overflow:"hidden",padding:3,"&:hover":{backgroundColor:s},"&:active":{backgroundColor:g}},radioCircle:{alignItems:"center",border:"1px solid ".concat(n.Palette.light["05"]),borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...c&&{backgroundColor:h,borderColor:h}},radioDot:{backgroundColor:n.Palette.light["01"],borderRadius:"50%",height:"var(--UT-radioGroup-control-dot-size, 8px)",width:"var(--UT-radioGroup-control-dot-size, 8px)"},cardRadio:{alignItems:"center",border:"1px solid transparent",borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-radioGroup-control-size, 16px)",justifyContent:"center",width:"var(--UT-radioGroup-control-size, 16px)",...getCardRadioColors({accent04:h,disabled:d,selected:c,theme:n})},content:{alignItems:"center",display:"flex",flexDirection:A?"row-reverse":"row",gap:SPACING_VALUES[p]||SPACING_VALUES[SPACING.MEDIUM],marginRight:"auto"},contentContainer:{display:"flex",flexDirection:"column",gap:"var(--UT-radioGroup-content-gap, 4px)"},titleAndTooltip:{alignItems:"center",display:"flex",gap:"var(--gap-xs, 4px)"},tooltip:{display:"flex"},icon:{flexShrink:0,height:"36px",width:"36px"},iconImage:{borderRadius:"50%",flexShrink:0,height:"36px",objectFit:"cover",width:"36px"},infoIcon:{flexShrink:0},name:{},description:{}}};

package/dist/esm/components/UTRadioGroup/versions/V1/components/Radio/utils.js

@@ -0,0 +1 @@
+import{isUTIcon}from"../../../../../../utils/componentUtils";import{ICON_CONTENT_TYPES}from"./constants";export const getIconContentType=o=>isUTIcon(o)?ICON_CONTENT_TYPES.UT_ICON:o&&"object"==typeof o&&o.src?ICON_CONTENT_TYPES.IMAGE:ICON_CONTENT_TYPES.COMPONENT;export const getIconAreaColors=o=>({areaBackground:o.Palette.light["01"],areaBorderColor:o.Palette.light["04"]});

package/dist/esm/components/UTRadioGroup/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,{useMemo}from"react";import{arrayOf,bool,func,objectOf,oneOf,shape,string,object}from"prop-types";import RadioGroup from"@material-ui/core/RadioGroup";import{buttonTypes}from"../../../../types/buttonTypes";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import Radio from"./components/Radio";import styles from"./styles.module.scss";import{getAreaStyle}from"./utils";import{NO_CATEGORY,SPACING}from"./constants";const UTRadioGroup=e=>{let{actions:t,area:a,areaProps:o,classNames:r={},dataTestId:n,descriptionProps:s,disabled:i,error:c,errorDataTestId:l,horizontalSpacing:d=SPACING.MEDIUM,iconProps:p,iconSelectedProps:m,itemDataTestId:u,nameProps:b,nameSelectedProps:g,onChange:T=()=>{},options:f,required:y,reversed:v,title:O,value:R=null,variant:P,verticalSpacing:C=SPACING.MEDIUM}=e;const E=useMemo(()=>{const e=f.reduce((e,t)=>{const a=t.category||NO_CATEGORY;return e[a]||(e[a]=[]),e[a].push(t),e},{NO_CATEGORY:[]});return Object.entries(e).filter(e=>{let[,t]=e;return t.length>0}).sort((e,t)=>{let[a]=e,[o]=t;return a===NO_CATEGORY?-1:o===NO_CATEGORY?1:0})},[f]),N=useMemo(()=>c&&formatErrorToValidation(c),[c]),G=useMemo(()=>getAreaStyle(a,o),[a,o]);return React.createElement("div",{className:"".concat(styles.container," ").concat(r.root||""),"data-testid":n,style:G},O&&React.createElement("div",{className:"".concat(styles.headerContainer," ").concat(r.header||"")},O&&React.createElement(UTFieldLabel,{actions:t,required:y},O)),React.createElement(RadioGroup,{value:R||"",className:styles.container},E.map((e,t)=>{let[a,o]=e;return React.createElement("div",{className:styles["".concat(C,"CategoryContainer")],key:a},a!==NO_CATEGORY&&React.createElement(UTLabel,{className:styles.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},a.toUpperCase()),o.map((e,a)=>React.createElement(Radio,_extends({dataTestId:u?"".concat(u,".category_").concat(t,".").concat(a):null,descriptionProps:s,disabled:e.disabled||i,iconProps:p,iconSelectedProps:m,key:e.value,nameProps:b,nameSelectedProps:g,onChange:()=>T(e.value),reversed:v,selected:e.value===R,spacing:d,variant:P},(null==e?void 0:e.configuration)||{},e))))})),N&&React.createElement(UTValidation,{dataTestId:l,validationData:N}))};UTRadioGroup.propTypes={actions:arrayOf(buttonTypes),area:bool,areaProps:object,classNames:objectOf(string),dataTestId:string,descriptionProps:object,disabled:bool,error:string,errorDataTestId:string,horizontalSpacing:oneOf(Object.values(SPACING)),iconProps:object,iconSelectedProps:object,itemDataTestId:string,nameProps:object,nameSelectedProps:object,onChange:func,options:arrayOf(shape({category:string,checked:bool,disabled:bool,icon:string,name:string,value:string})),required:bool,reversed:bool,title:string,value:string,variant:string,verticalSpacing:oneOf(Object.values(SPACING))};export default UTRadioGroup;
+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,{useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,oneOf,oneOfType,shape,string,object}from"prop-types";import RadioGroup from"@material-ui/core/RadioGroup";import{buttonTypes}from"../../../../types/buttonTypes";import UTFieldLabel from"../../../UTFieldLabel";import UTLabel from"../../../UTLabel";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import Radio from"./components/Radio";import styles from"./styles.module.scss";import{getAreaStyle}from"./utils";import{NO_CATEGORY,SPACING}from"./constants";const UTRadioGroup=e=>{let{actions:t,area:a,areaProps:o,classNames:r={},dataTestId:n,descriptionProps:s,disabled:i,error:c,errorDataTestId:l,horizontalSpacing:d=SPACING.MEDIUM,iconProps:p,iconSelectedProps:m,itemDataTestId:u,nameProps:T,nameSelectedProps:g,onChange:b=()=>{},options:f,required:y,reversed:O,title:v,value:R=null,variant:P,verticalSpacing:C=SPACING.MEDIUM}=e;const E=useMemo(()=>{const e=f.reduce((e,t)=>{const a=t.category||NO_CATEGORY;return e[a]||(e[a]=[]),e[a].push(t),e},{NO_CATEGORY:[]});return Object.entries(e).filter(e=>{let[,t]=e;return t.length>0}).sort((e,t)=>{let[a]=e,[o]=t;return a===NO_CATEGORY?-1:o===NO_CATEGORY?1:0})},[f]),N=useMemo(()=>c&&formatErrorToValidation(c),[c]),h=useMemo(()=>getAreaStyle(a,o),[a,o]);return React.createElement("div",{className:"".concat(styles.container," ").concat(r.root||""),"data-testid":n,style:h},v&&React.createElement("div",{className:"".concat(styles.headerContainer," ").concat(r.header||"")},v&&React.createElement(UTFieldLabel,{actions:t,required:y},v)),React.createElement(RadioGroup,{value:R||"",className:styles.container},E.map((e,t)=>{let[a,o]=e;return React.createElement("div",{className:styles["".concat(C,"CategoryContainer")],key:a},a!==NO_CATEGORY&&React.createElement(UTLabel,{className:styles.categoryTitle,colorTheme:"gray",variant:"small",weight:"medium"},a.toUpperCase()),o.map((e,a)=>React.createElement(Radio,_extends({dataTestId:u?"".concat(u,".category_").concat(t,".").concat(a):null,descriptionProps:s,disabled:e.disabled||i,iconProps:p,iconSelectedProps:m,key:e.value,nameProps:T,nameSelectedProps:g,onChange:()=>b(e.value),reversed:O,selected:e.value===R,spacing:d,variant:P},(null==e?void 0:e.configuration)||{},e))))})),N&&React.createElement(UTValidation,{dataTestId:l,validationData:N}))};UTRadioGroup.propTypes={actions:arrayOf(buttonTypes),area:bool,areaProps:object,classNames:objectOf(string),dataTestId:string,descriptionProps:object,disabled:bool,error:string,errorDataTestId:string,horizontalSpacing:oneOf(Object.values(SPACING)),iconProps:object,iconSelectedProps:object,itemDataTestId:string,nameProps:object,nameSelectedProps:object,onChange:func,options:arrayOf(shape({category:string,checked:bool,disabled:bool,icon:oneOfType([string,elementType,shape({alt:string,src:string})]),name:string,tooltip:string,value:string})),required:bool,reversed:bool,title:string,value:string,variant:string,verticalSpacing:oneOf(Object.values(SPACING))};export default UTRadioGroup;

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

@@ -1,20 +1,17 @@
-$spacing-medium: 16px;
-$spacing-small: 8px;
-
 %categoryContainer {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-radioGroup-gap-lg, 16px);
 }
 
 .mediumCategoryContainer {
   @extend %categoryContainer;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-radioGroup-gap-lg, 16px);
 }
 
 .smallCategoryContainer {
   @extend %categoryContainer;
-  grid-gap: $spacing-small;
+  grid-gap: var(--UT-radioGroup-gap-sm, 8px);
 }
 
 .noneCategoryContainer {
@@ -23,26 +20,25 @@ $spacing-small: 8px;
 }
 
 .categoryTitle {
-  padding: 8px 0;
+  padding: var(--UT-radioGroup-padding-y, 8px) 0;
 }
 
 .container {
   display: flex;
   flex-direction: column;
   align-self: flex-start;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-radioGroup-gap-lg, 16px);
   width: 100%;
 }
 
 .container {
   display: flex;
   flex-direction: column;
-  grid-gap: $spacing-medium;
+  grid-gap: var(--UT-radioGroup-gap-lg, 16px);
 }
 
 .headerContainer {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: var(--UT-radioGroup-gap-sm, 8px);
 }
-

package/dist/esm/components/UTRating/versions/V0/components/Faces/index.js

@@ -1 +1 @@
-import React,{Fragment,memo}from"react";import{bool,func,number,objectOf,oneOfType,string}from"prop-types";import UTButton from"../../../../../UTButton";import UTLabel from"../../../../../UTLabel";import{BOTTOM_TEXT,SIDE_TEXT,NO_TEXT}from"../../constants";import{FACES_CLASSES,FACES_ICONS,FACES_ICONS_SELECTED}from"./constants";import styles from"./styles.module.scss";const Faces=e=>{let{classes:t,isFirst:s,isLast:a,name:o,onClick:c,order:l,selected:n,textVariant:r,value:m}=e;const i={[SIDE_TEXT]:{containerClass:s?styles.first:a&&styles.last,labelClass:t.label,showLabel:s||a},[BOTTOM_TEXT]:{containerClass:"".concat(styles.withTextBottom," ").concat(t.facesWithTextBottom),labelClass:t.label,showLabel:!0},[NO_TEXT]:{containerClass:"",labelClass:"",showLabel:!1}},T=i[r]||i[NO_TEXT],E=FACES_ICONS[l-1],C=FACES_ICONS_SELECTED[l-1];return E&&C&&React.createElement("div",{className:"".concat(styles.container," ").concat(T.containerClass)},React.createElement(UTButton,{classNames:{root:"\n              ".concat(styles.faceButton,"\n              ").concat(t[FACES_CLASSES[l-1]],"\n              ").concat(n&&"".concat(t.faceButtonSelected," ").concat(styles.faceButtonSelected),"\n            ")},Icon:()=>React.createElement(Fragment,null,React.createElement(E,{className:styles.faceIcon}),React.createElement(C,{className:styles.faceIconSelected})),onClick:()=>c(l,m),variant:"text"}),T.showLabel&&React.createElement(UTLabel,{className:"".concat(styles.text," ").concat(T.labelClass),colorTheme:"gray",weight:"semibold"},o))};Faces.propTypes={classes:objectOf(string),isFirst:bool,isLast:bool,name:string,onClick:func,order:number,selected:bool,textVariant:string,value:oneOfType([number,string])};export default memo(Faces);
+import React,{Fragment,memo}from"react";import{bool,func,number,objectOf,oneOfType,string}from"prop-types";import UTButton from"../../../../../UTButton";import UTLabel from"../../../../../UTLabel";import{BOTTOM_TEXT,SIDE_TEXT,NO_TEXT}from"../../constants";import{FACES_CLASSES,FACES_ICONS,FACES_ICONS_SELECTED}from"./constants";import styles from"./styles.module.scss";const Faces=e=>{let{classes:t,isFirst:a,isLast:s,name:c,onClick:o,order:l,selected:n,textVariant:r,value:m}=e;const i={[SIDE_TEXT]:{containerClass:a?styles.first:s&&styles.last,labelClass:t.label,showLabel:a||s},[BOTTOM_TEXT]:{containerClass:"".concat(styles.withTextBottom," ").concat(t.facesWithTextBottom),labelClass:t.label,showLabel:!0},[NO_TEXT]:{containerClass:"",labelClass:"",showLabel:!1}},T=i[r]||i[NO_TEXT],E=FACES_ICONS[l-1],C=FACES_ICONS_SELECTED[l-1];return E&&C&&React.createElement("div",{className:"".concat(styles.container," ").concat(T.containerClass)},React.createElement(UTButton,{classNames:{root:"\n              ".concat(styles.faceButton,"\n              ").concat(t[FACES_CLASSES[l-1]],"\n              ").concat(n&&"".concat(t.faceButtonSelected," ").concat(styles.faceButtonSelected),"\n            ")},Icon:()=>React.createElement(React.Fragment,null,React.createElement(E,{className:styles.faceIcon}),React.createElement(C,{className:styles.faceIconSelected})),onClick:()=>o(l,m),variant:"text"}),T.showLabel&&React.createElement(UTLabel,{className:"".concat(styles.text," ").concat(T.labelClass),colorTheme:"gray",weight:"semibold"},c))};Faces.propTypes={classes:objectOf(string),isFirst:bool,isLast:bool,name:string,onClick:func,order:number,selected:bool,textVariant:string,value:oneOfType([number,string])};export default memo(Faces);

package/dist/esm/components/UTRating/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 r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}import React,{Fragment,useState}from"react";import{func,arrayOf,shape,number,string,oneOfType,bool,object,objectOf}from"prop-types";import{isEmpty,autocompleteWithNumbers}from"@widergy/web-utils/lib/array";import Colors from"../../../../scss/variables/colors.module.scss";import{fieldType}from"../../../../types/formTypes";import WithTheme from"../../../WithTheme";import UTLabel from"../../../UTLabel";import{mergeClasses}from"../../../../utils/classesUtils";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";import Circle from"./components/Circle";import Faces from"./components/Faces";import Star from"./components/Star";import{RATING_VARIANTS}from"./constants";const UTRatingContainer=e=>{let{classes:t,classNames:r,field:o={},onChange:s,options:a,titleProps:n,withUpperTitle:i}=e;const[l,c]=useState([]),[m,p]=useState([]),[u,d]=useState([]),f=mergeClasses(t,r),{ignore_title:g,variant:h,star_color:y,text_variant:b}=o.configuration||{},T=g&&i,v=(e,t)=>{c(autocompleteWithNumbers(1,e)),isEmpty(l)&&d(autocompleteWithNumbers(1,e)),s(t.toString())},R=e=>{p(autocompleteWithNumbers(1,e)),c([])},C=()=>{p([]),c(u)};return React.createElement(Fragment,null,T&&React.createElement(UTLabel,_extends({className:"".concat(f.title)},n,{withMarkdown:!0}),o.title),React.createElement("div",{className:"".concat(styles.container," ").concat(f.container)},a.map(e=>{const t={onClick:v,value:e.value,order:e.order,isFirst:a[0].order===e.order,isLast:a[a.length-1].order===e.order,textVariant:b,name:e.name,classes:f,color:y||Colors.ratingStarSelected};return h===RATING_VARIANTS.CIRCULAR?React.createElement(Circle,_extends({key:e.value,selected:l[l.length-1]===e.order},t)):h===RATING_VARIANTS.FACES?React.createElement(Faces,_extends({key:e.value,selected:l[l.length-1]===e.order},t)):React.createElement(Star,_extends({key:e.value,hovered:m.includes(e.order),selected:l.includes(e.order),onMouseLeave:C,onHover:R},t))})))};UTRatingContainer.propTypes={classes:objectOf(string),classNames:objectOf(string),field:fieldType,onChange:func,options:arrayOf(shape({order:number,value:oneOfType([number,string])})),titleProps:object,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTRatingContainer);
+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)}import React,{Fragment,useState}from"react";import{func,arrayOf,shape,number,string,oneOfType,bool,object,objectOf}from"prop-types";import{isEmpty,autocompleteWithNumbers}from"@widergy/web-utils/lib/array";import Colors from"../../../../scss/variables/colors.module.scss";import{fieldType}from"../../../../types/formTypes";import WithTheme from"../../../WithTheme";import UTLabel from"../../../UTLabel";import{mergeClasses}from"../../../../utils/classesUtils";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";import Circle from"./components/Circle";import Faces from"./components/Faces";import Star from"./components/Star";import{RATING_VARIANTS}from"./constants";const UTRatingContainer=e=>{let{classes:t,classNames:r,field:o={},onChange:s,options:a,titleProps:n,withUpperTitle:i}=e;const[l,c]=useState([]),[m,p]=useState([]),[u,d]=useState([]),f=mergeClasses(t,r),{ignore_title:g,variant:h,star_color:y,text_variant:b}=o.configuration||{},T=g&&i,R=(e,t)=>{c(autocompleteWithNumbers(1,e)),isEmpty(l)&&d(autocompleteWithNumbers(1,e)),s(t.toString())},v=e=>{p(autocompleteWithNumbers(1,e)),c([])},C=()=>{p([]),c(u)};return React.createElement(React.Fragment,null,T&&React.createElement(UTLabel,_extends({className:"".concat(f.title)},n,{withMarkdown:!0}),o.title),React.createElement("div",{className:"".concat(styles.container," ").concat(f.container)},a.map(e=>{const t={onClick:R,value:e.value,order:e.order,isFirst:a[0].order===e.order,isLast:a[a.length-1].order===e.order,textVariant:b,name:e.name,classes:f,color:y||Colors.ratingStarSelected};return h===RATING_VARIANTS.CIRCULAR?React.createElement(Circle,_extends({key:e.value,selected:l[l.length-1]===e.order},t)):h===RATING_VARIANTS.FACES?React.createElement(Faces,_extends({key:e.value,selected:l[l.length-1]===e.order},t)):React.createElement(Star,_extends({key:e.value,hovered:m.includes(e.order),selected:l.includes(e.order),onMouseLeave:C,onHover:v},t))})))};UTRatingContainer.propTypes={classes:objectOf(string),classNames:objectOf(string),field:fieldType,onChange:func,options:arrayOf(shape({order:number,value:oneOfType([number,string])})),titleProps:object,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTRatingContainer);

package/dist/esm/components/UTSelect/versions/V0/components/Option/index.js

@@ -1 +1 @@
-import React,{memo,Fragment}from"react";import{any,bool,objectOf,object,string}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";const Option=e=>{let{classes:t,isMultiple:o,labelKey:l,optionProps:a,value:c,valueKey:r}=e;const n=a.icon;return React.createElement(Fragment,null,o&&React.createElement(Checkbox,{color:"primary",checked:(null==c?void 0:c.indexOf(a[r]))>-1}),n?React.createElement("div",{className:t.labelContainer},React.createElement(n,{className:t.optionIcon}),React.createElement("div",null,a[l])):a[l])};Option.propTypes={classes:objectOf(string),isMultiple:bool,labelKey:string,optionProps:object,value:any,valueKey:string};export default memo(Option);
+import React,{memo,Fragment}from"react";import{any,bool,objectOf,object,string}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";const Option=e=>{let{classes:t,isMultiple:o,labelKey:a,optionProps:l,value:c,valueKey:r}=e;const n=l.icon;return React.createElement(React.Fragment,null,o&&React.createElement(Checkbox,{color:"primary",checked:(null==c?void 0:c.indexOf(l[r]))>-1}),n?React.createElement("div",{className:t.labelContainer},React.createElement(n,{className:t.optionIcon}),React.createElement("div",null,l[a])):l[a])};Option.propTypes={classes:objectOf(string),isMultiple:bool,labelKey:string,optionProps:object,value:any,valueKey:string};export default memo(Option);

package/dist/esm/components/UTSelect/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 r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}import clone from"lodash/clone";import FormControl from"@material-ui/core/FormControl";import FormHelperText from"@material-ui/core/FormHelperText";import Grid from"@material-ui/core/Grid";import HelpOutline from"@material-ui/icons/HelpOutline";import InputLabel from"@material-ui/core/InputLabel";import ListSubheader from"@material-ui/core/ListSubheader";import MenuItem from"@material-ui/core/MenuItem";import React,{useEffect,useMemo,Fragment}from"react";import Select from"@material-ui/core/Select";import{arrayOf,bool,node,object,objectOf,shape,string}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";import{fieldType,inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import Option from"./components/Option";import styles from"./styles.module.scss";import stylesJS from"./stylesJS";import{LABEL_KEY,MENU_TITLE,MENU_TITLE_MULTIPLE,VALUE_KEY}from"./constants";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{shouldReset}from"./utils";const UTSelect=e=>{let{captionLabel:t,classNames:r,classes:a,dataTestId:o,disableFirstOption:l,disabled:s,errorDataTestId:i,field:n,iconPlaceholder:m,input:c,itemDataTestId:p,labelKey:u,labelProps:d,listDataTestId:b,menuPlaceholder:f,meta:T,options:E,placeholder:h,selectProps:y,tooltip:g,valueKey:v,variant:I,withAutoReset:R,withOrder:L,withoutFirstOption:O}=e;const{multiple:P,upperTitle:S}=(null==n?void 0:n.configuration)||{},U=useMemo(()=>mergeClasses(a,r),[r]);useEffect(()=>{R&&shouldReset(c.value,E,v,P)&&c.onChange(null)},[E]);let M=[...E];M=L?M.sort((e,t)=>e.order<t.order?-1:1):M;const _={classes:U,isMultiple:P,labelKey:u,value:c.value,valueKey:v},w=React.createElement(Fragment,null,S&&React.createElement(UTLabel,{className:U.upperTitle},S),React.createElement(FormControl,{className:U.formControl,error:shouldShowErrors(T),variant:I},React.createElement(InputLabel,_extends({},d,{disabled:s}),m?React.createElement("div",{className:U.labelContainer},React.createElement(m,{className:U.labelIcon}),React.createElement("div",null,h)):h),React.createElement(Select,_extends({classes:{nativeInput:styles.nativeInput},disabled:s,inputProps:{"data-testid":o},label:"outlined"===I&&h,MenuProps:{MenuListProps:{"data-testid":b}},multiple:P,name:c.name,onChange:e=>c.onChange(e.target.value),value:P?isEmpty(c.value)?[]:clone(c.value):c.value},P?{renderValue:e=>E.filter(t=>e.includes(t[v])).map(e=>e[u]).join(", ")}:{},y),!O&&React.createElement(MenuItem,{"data-testid":"".concat(p,".firstOption"),disabled:P||l,value:""},f||(P?MENU_TITLE_MULTIPLE:MENU_TITLE)),M.map((e,t)=>isEmpty(e.subOptions)?React.createElement(MenuItem,{"data-testid":"".concat(p,".").concat(t),key:e[v],value:e[v]},React.createElement(Option,_extends({optionProps:e},_))):[React.createElement(ListSubheader,{className:styles.subHeader},e[u]),e.subOptions.map((e,t)=>React.createElement(MenuItem,{className:U.subOption,"data-testid":"".concat(p,".").concat(t),key:e[v],value:e[v]},React.createElement(Option,_extends({isSuboption:!0,optionProps:e},_))))])),t&&React.createElement(FormHelperText,{classes:{...U.formHelperText}},t),shouldShowErrors(T)&&React.createElement(UTLabel,{className:styles.errorLabel,colorTheme:"error",dataTestId:i,variant:"small"},T.error)));return React.createElement("div",{className:U.container},g?React.createElement(Grid,{alignItems:"flex-end",container:!0,spacing:1,style:stylesJS.gridContainer},React.createElement(Grid,{item:!0,xs:!0},w),React.createElement(Grid,{item:!0,style:stylesJS.icon},React.createElement(UTTooltip,{content:g},React.createElement("span",null,React.createElement(HelpOutline,{className:U.tooltipIcon}))))):w)};UTSelect.defaultProps={classNames:{},classes:{},field:{configuration:{multiple:!1}},labelKey:LABEL_KEY,labelProps:{},meta:{},options:[],selectProps:{},valueKey:VALUE_KEY,withAutoReset:!0,withoutFirstOption:!1},UTSelect.propTypes={captionLabel:string,classNames:objectOf(string),classes:shape({container:string,labelContainer:string,formControl:string,formHelperText:objectOf(string),labelIcon:string,optionIcon:string,tooltipIcon:string,upperTitle:string}),dataTestId:string,disableFirstOption:bool,disabled:bool,errorDataTestId:string,field:fieldType,iconPlaceholder:node,input:inputPropTypes,itemDataTestId:string,labelKey:string,labelProps:object,listDataTestId:string,menuPlaceholder:string,meta:metaPropTypes,options:arrayOf(object),placeholder:string,selectProps:object,tooltip:string,valueKey:string,variant:string,withAutoReset:bool,withOrder:bool,withoutFirstOption:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTSelect);
+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 a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}import clone from"lodash/clone";import FormControl from"@material-ui/core/FormControl";import FormHelperText from"@material-ui/core/FormHelperText";import Grid from"@material-ui/core/Grid";import HelpOutline from"@material-ui/icons/HelpOutline";import InputLabel from"@material-ui/core/InputLabel";import ListSubheader from"@material-ui/core/ListSubheader";import MenuItem from"@material-ui/core/MenuItem";import React,{useEffect,useMemo,Fragment}from"react";import Select from"@material-ui/core/Select";import{arrayOf,bool,node,object,objectOf,shape,string}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";import{fieldType,inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import Option from"./components/Option";import styles from"./styles.module.scss";import stylesJS from"./stylesJS";import{LABEL_KEY,MENU_TITLE,MENU_TITLE_MULTIPLE,VALUE_KEY}from"./constants";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{shouldReset}from"./utils";const UTSelect=e=>{let{captionLabel:t,classNames:r,classes:a,dataTestId:o,disableFirstOption:l,disabled:s,errorDataTestId:i,field:n,iconPlaceholder:m,input:c,itemDataTestId:p,labelKey:u,labelProps:d,listDataTestId:b,menuPlaceholder:f,meta:T,options:E,placeholder:h,selectProps:y,tooltip:g,valueKey:v,variant:I,withAutoReset:R,withOrder:L,withoutFirstOption:O}=e;const{multiple:P,upperTitle:S}=(null==n?void 0:n.configuration)||{},U=useMemo(()=>mergeClasses(a,r),[r]);useEffect(()=>{R&&shouldReset(c.value,E,v,P)&&c.onChange(null)},[E]);let M=[...E];M=L?M.sort((e,t)=>e.order<t.order?-1:1):M;const _={classes:U,isMultiple:P,labelKey:u,value:c.value,valueKey:v},w=React.createElement(React.Fragment,null,S&&React.createElement(UTLabel,{className:U.upperTitle},S),React.createElement(FormControl,{className:U.formControl,error:shouldShowErrors(T),variant:I},React.createElement(InputLabel,_extends({},d,{disabled:s}),m?React.createElement("div",{className:U.labelContainer},React.createElement(m,{className:U.labelIcon}),React.createElement("div",null,h)):h),React.createElement(Select,_extends({classes:{nativeInput:styles.nativeInput},disabled:s,inputProps:{"data-testid":o},label:"outlined"===I&&h,MenuProps:{MenuListProps:{"data-testid":b}},multiple:P,name:c.name,onChange:e=>c.onChange(e.target.value),value:P?isEmpty(c.value)?[]:clone(c.value):c.value},P?{renderValue:e=>E.filter(t=>e.includes(t[v])).map(e=>e[u]).join(", ")}:{},y),!O&&React.createElement(MenuItem,{"data-testid":"".concat(p,".firstOption"),disabled:P||l,value:""},f||(P?MENU_TITLE_MULTIPLE:MENU_TITLE)),M.map((e,t)=>isEmpty(e.subOptions)?React.createElement(MenuItem,{"data-testid":"".concat(p,".").concat(t),key:e[v],value:e[v]},React.createElement(Option,_extends({optionProps:e},_))):[React.createElement(ListSubheader,{className:styles.subHeader},e[u]),e.subOptions.map((e,t)=>React.createElement(MenuItem,{className:U.subOption,"data-testid":"".concat(p,".").concat(t),key:e[v],value:e[v]},React.createElement(Option,_extends({isSuboption:!0,optionProps:e},_))))])),t&&React.createElement(FormHelperText,{classes:{...U.formHelperText}},t),shouldShowErrors(T)&&React.createElement(UTLabel,{className:styles.errorLabel,colorTheme:"error",dataTestId:i,variant:"small"},T.error)));return React.createElement("div",{className:U.container},g?React.createElement(Grid,{alignItems:"flex-end",container:!0,spacing:1,style:stylesJS.gridContainer},React.createElement(Grid,{item:!0,xs:!0},w),React.createElement(Grid,{item:!0,style:stylesJS.icon},React.createElement(UTTooltip,{content:g},React.createElement("span",null,React.createElement(HelpOutline,{className:U.tooltipIcon}))))):w)};UTSelect.defaultProps={classNames:{},classes:{},field:{configuration:{multiple:!1}},labelKey:LABEL_KEY,labelProps:{},meta:{},options:[],selectProps:{},valueKey:VALUE_KEY,withAutoReset:!0,withoutFirstOption:!1},UTSelect.propTypes={captionLabel:string,classNames:objectOf(string),classes:shape({container:string,labelContainer:string,formControl:string,formHelperText:objectOf(string),labelIcon:string,optionIcon:string,tooltipIcon:string,upperTitle:string}),dataTestId:string,disableFirstOption:bool,disabled:bool,errorDataTestId:string,field:fieldType,iconPlaceholder:node,input:inputPropTypes,itemDataTestId:string,labelKey:string,labelProps:object,listDataTestId:string,menuPlaceholder:string,meta:metaPropTypes,options:arrayOf(object),placeholder:string,selectProps:object,tooltip:string,valueKey:string,variant:string,withAutoReset:bool,withOrder:bool,withoutFirstOption:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTSelect);

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

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  grid-gap: 8px;
+  grid-gap: var(--UT-field-gap, 8px);
 }
 
 .popper {

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

@@ -1 +1 @@
-export const APPEARANCES={GRAY:"gray",WHITE:"white"};export const SIZES={XLARGE:"xlarge",LARGE:"large",MEDIUM:"medium",SMALL:"small"};
+export const APPEARANCES={GRAY:"gray",WHITE:"white"};export const SIZES={XLARGE:"xlarge",LARGE:"large",MEDIUM:"medium",SMALL:"small"};export const ICON_SIZE=16;export const ICON_AREA_SIZE=32;export const ICON_AREA_RADIUS="var(--UT-selectableCard-icon-area-radius, 8px)";

package/dist/esm/components/UTSelectableCard/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 c in a)({}).hasOwnProperty.call(a,c)&&(e[c]=a[c])}return e},_extends.apply(null,arguments)}import React from"react";import{bool,func,elementType,objectOf,oneOf,shape,string}from"prop-types";import{objectIsEmpty}from"@widergy/web-utils/lib/object";import UTLabel from"../UTLabel";import UTTooltip from"../UTTooltip";import WithTheme from"../WithTheme";import{isUTIcon}from"../../utils/componentUtils";import UTIcon from"../UTIcon";import UTAvatar from"../UTAvatar";var CheckIcon=function(e){return React.createElement("svg",e,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L10 15.586l9.293-9.293a1 1 0 0 1 1.414 0Z",fill:"#0136E7"}))};CheckIcon.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"};var HelpIcon=function(e){return React.createElement("svg",e,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 3.333a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334ZM1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm7.062-4.713a3 3 0 1 1 2.38 5.5.416.416 0 0 0-.277.416.833.833 0 0 1-1.664.094 2.083 2.083 0 0 1 1.376-2.078A1.334 1.334 0 1 0 8.997 7.17.833.833 0 1 1 7.67 6.163a3 3 0 0 1 1.06-.876ZM10 13.333c.46 0 .833.373.833.834v.008a.833.833 0 0 1-1.666 0v-.008c0-.46.373-.834.833-.834Z",fill:"#091E42"}))};HelpIcon.defaultProps={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"};import{APPEARANCES,SIZES}from"./constants";import{retrieveStyle}from"./theme";const UTSelectableCard=e=>{let{aditionalInfo:t={},appearance:a=APPEARANCES.WHITE,checkIcon:c=!0,classes:n,classNames:o={},dataTestId:l,description:i,disabled:r=!1,avatar:s,avatarProps:m={},Icon:p,iconProps:d={},onClick:f,selected:E=!1,size:T=SIZES.MEDIUM,titleText:I,tooltip:b}=e;const v=isUTIcon(p)?React.createElement(UTIcon,_extends({size:48,colorTheme:E?"accent":"dark",name:p},d)):React.createElement(p,{className:"".concat(n.icon," ").concat(o.icon)}),h=s?React.createElement(UTAvatar,_extends({size:SIZES.LARGE},m)):null;return React.createElement("div",{className:"\n  ".concat(n.item,"\n  ").concat(r?"".concat(n["".concat(a,"DisabledContainer")]," ").concat(o["".concat(a,"DisabledContainer")]||""):E?"".concat(n["".concat(a,"SelectedContainer")]," ").concat(o["".concat(a,"SelectedContainer")]||""):"".concat(n["".concat(a,"Apareance")]," ").concat(o["".concat(a,"Apareance")]||""),"\n  ").concat(n["".concat(T,"Size")],"\n"),"data-testid":l,onClick:()=>!r&&f(),role:"button"},p&&!s&&v,s&&!p&&h,React.createElement("div",{className:"".concat(n.textContainer," ").concat(c&&n.textContainerWithCheckedIcon)},React.createElement("div",{className:n.column},React.createElement("div",{className:n.titleAndTooltip},React.createElement(UTLabel,{className:n.titleText,variant:"subtitle1",weight:"medium"},I),b&&React.createElement(UTTooltip,{content:b},React.createElement("span",{className:n.tooltip},React.createElement(HelpIcon,{className:"".concat(n.infoIcon)})))),i&&React.createElement(UTLabel,{className:n.description},i)),!objectIsEmpty(t)&&React.createElement("div",{className:"".concat(n.column," ").concat(n.aditionalInfoColumn)},!!t.title&&React.createElement(UTLabel,{className:n.aditionalInfoTitle,variant:"small",weight:"semibold"},t.title),!!t.description&&React.createElement(UTLabel,{className:n.aditionalInfoDescription,variant:"small"},t.description))),c&&E&&React.createElement(CheckIcon,{className:n.checkIcon}))};UTSelectableCard.propTypes={aditionalInfo:shape({description:string,title:string}),appearance:oneOf([APPEARANCES.GRAY,APPEARANCES.WHITE]),avatar:bool,avatarProps:objectOf(string),checkIcon:bool,classes:objectOf(string),classNames:objectOf(string),dataTestId:string,description:string,disabled:bool,Icon:elementType,iconProps:objectOf(string),onClick:func,selected:bool,size:oneOf([SIZES.MEDIUM,SIZES.SMALL]),titleText:string,tooltip:string};export default WithTheme(retrieveStyle)(UTSelectableCard);
+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 from"react";import{bool,func,elementType,object,objectOf,oneOf,shape,string}from"prop-types";import{objectIsEmpty}from"@widergy/web-utils/lib/object";import UTLabel from"../UTLabel";import UTTooltip from"../UTTooltip";import WithTheme from"../WithTheme";import{isUTIcon}from"../../utils/componentUtils";import UTIcon from"../UTIcon";import UTAvatar from"../UTAvatar";var HelpIcon=function(e){return React.createElement("svg",e,React.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 3.333a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334ZM1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm7.062-4.713a3 3 0 1 1 2.38 5.5.416.416 0 0 0-.277.416.833.833 0 0 1-1.664.094 2.083 2.083 0 0 1 1.376-2.078A1.334 1.334 0 1 0 8.997 7.17.833.833 0 1 1 7.67 6.163a3 3 0 0 1 1.06-.876ZM10 13.333c.46 0 .833.373.833.834v.008a.833.833 0 0 1-1.666 0v-.008c0-.46.373-.834.833-.834Z",fill:"#091E42"}))};HelpIcon.defaultProps={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"};import{APPEARANCES,ICON_AREA_RADIUS,ICON_AREA_SIZE,ICON_SIZE,SIZES}from"./constants";import{retrieveStyle}from"./theme";import{getIconAreaColors}from"./utils";const UTSelectableCard=e=>{let{aditionalInfo:t={},appearance:a=APPEARANCES.WHITE,classes:o,classNames:c={},dataTestId:n,description:r,disabled:i=!1,avatar:l,avatarProps:s={},Icon:m,iconProps:d={},onClick:p,selected:E=!1,size:I=SIZES.MEDIUM,theme:T,titleText:f,tooltip:R}=e;const{areaBackground:b,areaBorderColor:A}=getIconAreaColors(T),v=isUTIcon(m)?React.createElement(UTIcon,_extends({area:!0,areaBackground:b,areaBorderColor:A,areaRadius:ICON_AREA_RADIUS,areaSize:ICON_AREA_SIZE,colorTheme:"dark",name:m,size:ICON_SIZE},d)):React.createElement(m,{className:"".concat(o.icon," ").concat(c.icon)}),S=l?React.createElement(UTAvatar,_extends({size:SIZES.LARGE},s)):null;return React.createElement("div",{className:"\n  ".concat(o.item,"\n  ").concat(i?"".concat(o["".concat(a,"DisabledContainer")]," ").concat(c["".concat(a,"DisabledContainer")]||""):E?"".concat(o["".concat(a,"SelectedContainer")]," ").concat(c["".concat(a,"SelectedContainer")]||""):"".concat(o["".concat(a,"Apareance")]," ").concat(c["".concat(a,"Apareance")]||""),"\n  ").concat(o["".concat(I,"Size")],"\n"),"data-testid":n,onClick:()=>!i&&p(),role:"button"},m&&!l&&v,l&&!m&&S,React.createElement("div",{className:"".concat(o.textContainer," ").concat(o.textContainerWithRadio)},React.createElement("div",{className:o.column},React.createElement("div",{className:o.titleAndTooltip},React.createElement(UTLabel,{className:o.titleText,variant:"subtitle2",weight:"medium"},f),R&&React.createElement(UTTooltip,{content:R},React.createElement("span",{className:o.tooltip},React.createElement(HelpIcon,{className:"".concat(o.infoIcon)})))),r&&React.createElement(UTLabel,{className:o.description},r)),!objectIsEmpty(t)&&React.createElement("div",{className:"".concat(o.column," ").concat(o.aditionalInfoColumn)},!!t.title&&React.createElement(UTLabel,{className:o.aditionalInfoTitle,variant:"small",weight:"semibold"},t.title),!!t.description&&React.createElement(UTLabel,{className:o.aditionalInfoDescription,variant:"small"},t.description))),React.createElement("div",{className:o.radio},E&&React.createElement("div",{className:o.radioDot})))};UTSelectableCard.propTypes={aditionalInfo:shape({description:string,title:string}),appearance:oneOf([APPEARANCES.GRAY,APPEARANCES.WHITE]),avatar:bool,avatarProps:objectOf(string),classes:objectOf(string),classNames:objectOf(string),dataTestId:string,description:string,disabled:bool,Icon:elementType,iconProps:objectOf(string),onClick:func,selected:bool,size:oneOf([SIZES.MEDIUM,SIZES.SMALL]),theme:object,titleText:string,tooltip:string};export default WithTheme(retrieveStyle)(UTSelectableCard);

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

@@ -1 +1 @@
-import{getShadow}from"../../utils/shadowUtils";export const retrieveStyle=t=>{var e,o,i,a,n,l,c,r,d,p,s,h,g,P;let{theme:u}=t;return{aditionalInfoColumn:{textAlign:"end !important"},amountContainer:{alignItems:"center",display:"flex",gridGap:"8px"},column:{alignSelf:"center",display:"flex",flexDirection:"column",gridGap:"4px",justifyContent:"space-between",textAlign:"initial"},detailContainer:{alignItems:"center",display:"flex",gridGap:"8px"},item:{alignItems:"center",borderRadius:"4px",boxSizing:"border-box",display:"flex",gridGap:"16px",transition:"background-color 0.1s ease-in-out",width:"100%","& + div":{marginTop:"20px"}},mediumSize:{padding:"24px"},smallSize:{padding:"16px"},textContainer:{display:"flex",gridGap:"8px",justifyContent:"space-between",width:"100%"},textContainerWithCheckedIcon:{minHeight:24},titleAndTooltip:{alignItems:"center",display:"flex",gridGap:"4px"},tooltip:{display:"flex"},checkIcon:{flexShrink:0},icon:{flexShrink:0,height:"36px",width:"36px"},infoIcon:{flexShrink:0},titleText:{},description:{},aditionalInfoTitle:{},aditionalInfoDescription:{},whiteApareance:{backgroundColor:u.Palette.light["01"],boxShadow:getShadow({color:null===(e=u.Palette.shadows)||void 0===e?void 0:e.grayscale,level:1}),outline:"2px solid transparent","& $titleText, & $aditionalInfoTitle":{color:u.Palette.dark["05"]},"& $icon path, & $infoIcon path":{fill:u.Palette.dark["05"]},"& $description, & $aditionalInfoDescription":{color:u.Palette.gray["04"]},"&:hover":{backgroundColor:u.Palette.light["03"],boxShadow:"none"},"&:active":{backgroundColor:u.Palette.light["04"],boxShadow:"none","& $aditionalInfoDescription":{color:u.Palette.gray["03"]}}},whiteSelectedContainer:{boxShadow:"none",outline:"2px solid ".concat((null===(o=u.Palette.actions)||void 0===o?void 0:o.accent["05"])||u.Palette.accent["05"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:(null===(i=u.Palette.actions)||void 0===i?void 0:i.accent["05"])||u.Palette.accent["05"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:(null===(a=u.Palette.actions)||void 0===a?void 0:a.accent["05"])||u.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(n=u.Palette.actions)||void 0===n?void 0:n.accent["01"])||u.Palette.accent["01"],outline:"2px solid ".concat((null===(l=u.Palette.actions)||void 0===l?void 0:l.accent["05"])||u.Palette.accent["05"])},"&:active":{backgroundColor:(null===(c=u.Palette.actions)||void 0===c?void 0:c.accent["02"])||u.Palette.accent["02"],outline:"2px solid ".concat((null===(r=u.Palette.actions)||void 0===r?void 0:r.accent["05"])||u.Palette.accent["05"])}},whiteDisabledContainer:{backgroundColor:u.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent","& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:u.Palette.gray["04"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:u.Palette.gray["04"]},"&:hover":{backgroundColor:u.Palette.light["03"],outline:"2px solid transparent",pointerEvents:"none"}},grayApareance:{backgroundColor:u.Palette.light["03"],outline:"1px solid ".concat(u.Palette.light["05"]),"& $titleText, & $aditionalInfoTitle":{color:u.Palette.dark["05"]},"& $icon path, & $infoIcon path":{fill:u.Palette.dark["05"]},"& $description, & $aditionalInfoDescription":{color:u.Palette.gray["04"]},"&:hover":{backgroundColor:u.Palette.light["04"]},"&:active":{backgroundColor:u.Palette.light["05"],"& $aditionalInfoDescription":{color:u.Palette.gray["03"]}}},graySelectedContainer:{backgroundColor:(null===(d=u.Palette.actions)||void 0===d?void 0:d.accent["01"])||u.Palette.accent["01"],outline:"2px solid ".concat((null===(p=u.Palette.actions)||void 0===p?void 0:p.accent["03"])||u.Palette.accent["03"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:(null===(s=u.Palette.actions)||void 0===s?void 0:s.accent["05"])||u.Palette.accent["05"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:(null===(h=u.Palette.actions)||void 0===h?void 0:h.accent["05"])||u.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(g=u.Palette.actions)||void 0===g?void 0:g.accent["02"])||u.Palette.accent["02"]},"&:active":{backgroundColor:(null===(P=u.Palette.actions)||void 0===P?void 0:P.accent["03"])||u.Palette.accent["03"],"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:u.Palette.light["01"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:u.Palette.light["01"]}}},grayDisabledContainer:{backgroundColor:u.Palette.light["03"],outline:"2px solid ".concat(u.Palette.light["05"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:u.Palette.gray["04"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:u.Palette.gray["04"]},"&:hover":{backgroundColor:u.Palette.light["03"],cursor:"default",pointerEvents:"none"}}}};
+const getRadioColors=t=>{var e;let{disabled:a,selected:o,theme:i}=t;const l=(null===(e=i.Palette.actions)||void 0===e?void 0:e.accent["04"])||i.Palette.accent["04"],n=i.Palette.gray["04"];return{backgroundColor:o?a?n:l:"transparent",borderColor:a?n:o?l:i.Palette.light["04"]}};export const retrieveStyle=t=>{var e,a,o,i,l,n,r,c,d,s,p;let{disabled:g,selected:h,theme:x}=t;return{aditionalInfoColumn:{textAlign:"end !important"},amountContainer:{alignItems:"center",display:"flex",gridGap:"var(--UT-selectableCard-gap-sm, 8px)"},column:{alignSelf:"center",display:"flex",flexDirection:"column",gridGap:"var(--UT-selectableCard-gap-none, 0)",justifyContent:"space-between",textAlign:"initial"},detailContainer:{alignItems:"center",display:"flex",gridGap:"var(--UT-selectableCard-gap-sm, 8px)"},item:{alignItems:"center",borderRadius:"var(--UT-selectableCard-radius, 12px)",boxSizing:"border-box",display:"flex",gridGap:"var(--UT-selectableCard-gap-lg, 16px)",transition:"background-color 0.1s ease-in-out",width:"100%","& + div":{marginTop:"var(--UT-selectableCard-gap-list, 8px)"}},mediumSize:{padding:"var(--UT-selectableCard-padding-md, 16px)"},smallSize:{gridGap:"var(--UT-selectableCard-gap-md, 12px)",padding:"var(--UT-selectableCard-padding-y-sm, 8px) var(--UT-selectableCard-padding-x-sm, 12px)"},textContainer:{display:"flex",gridGap:"var(--UT-selectableCard-gap-sm, 8px)",justifyContent:"space-between",width:"100%"},textContainerWithRadio:{minHeight:24},titleAndTooltip:{alignItems:"center",display:"flex",gridGap:"var(--UT-selectableCard-gap-xs, 4px)"},tooltip:{display:"flex"},radio:{alignItems:"center",border:"1px solid transparent",borderRadius:"50%",display:"flex",flexShrink:0,height:"var(--UT-selectableCard-radio-size, 16px)",justifyContent:"center",width:"var(--UT-selectableCard-radio-size, 16px)",...getRadioColors({disabled:g,selected:h,theme:x})},radioDot:{backgroundColor:x.Palette.light["01"],borderRadius:"50%",height:"var(--UT-selectableCard-radio-dot-size, 8px)",width:"var(--UT-selectableCard-radio-dot-size, 8px)"},icon:{flexShrink:0,height:"36px",width:"36px"},infoIcon:{flexShrink:0},titleText:{},description:{},aditionalInfoTitle:{},aditionalInfoDescription:{},whiteApareance:{backgroundColor:x.Palette.light["01"],boxShadow:"none",outline:"1px solid ".concat(x.Palette.light["04"]),"& $titleText, & $aditionalInfoTitle":{color:x.Palette.dark["05"]},"& $icon path, & $infoIcon path":{fill:x.Palette.light["04"]},"& $description, & $aditionalInfoDescription":{color:x.Palette.gray["04"]},"&:hover":{backgroundColor:x.Palette.light["03"],boxShadow:"none"},"&:active":{backgroundColor:x.Palette.light["04"],boxShadow:"none","& $aditionalInfoDescription":{color:x.Palette.gray["03"]}}},whiteSelectedContainer:{backgroundColor:x.Palette.light["01"],boxShadow:"none",outline:"2px solid ".concat((null===(e=x.Palette.actions)||void 0===e?void 0:e.accent["03"])||x.Palette.accent["03"]),"& $titleText, & $aditionalInfoTitle":{color:x.Palette.dark["05"]},"& $description, & $aditionalInfoDescription":{color:x.Palette.gray["04"]},"& $icon path, & $infoIcon path":{fill:(null===(a=x.Palette.actions)||void 0===a?void 0:a.accent["05"])||x.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(o=x.Palette.actions)||void 0===o?void 0:o.accent["01"])||x.Palette.accent["01"],outline:"2px solid ".concat((null===(i=x.Palette.actions)||void 0===i?void 0:i.accent["03"])||x.Palette.accent["03"])},"&:active":{backgroundColor:(null===(l=x.Palette.actions)||void 0===l?void 0:l.accent["02"])||x.Palette.accent["02"],outline:"2px solid ".concat((null===(n=x.Palette.actions)||void 0===n?void 0:n.accent["03"])||x.Palette.accent["03"])}},whiteDisabledContainer:{backgroundColor:x.Palette.light["03"],boxShadow:"none",outline:"2px solid transparent","& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:x.Palette.gray["04"]},"& $icon path, & $infoIcon path":{fill:x.Palette.gray["04"]},"&:hover":{backgroundColor:x.Palette.light["03"],outline:"2px solid transparent",pointerEvents:"none"}},grayApareance:{backgroundColor:x.Palette.light["03"],outline:"1px solid ".concat(x.Palette.light["05"]),"& $titleText, & $aditionalInfoTitle":{color:x.Palette.dark["05"]},"& $icon path, & $infoIcon path":{fill:x.Palette.dark["05"]},"& $description, & $aditionalInfoDescription":{color:x.Palette.gray["04"]},"&:hover":{backgroundColor:x.Palette.light["04"]},"&:active":{backgroundColor:x.Palette.light["05"],"& $aditionalInfoDescription":{color:x.Palette.gray["03"]}}},graySelectedContainer:{backgroundColor:x.Palette.light["03"],outline:"2px solid ".concat((null===(r=x.Palette.actions)||void 0===r?void 0:r.accent["03"])||x.Palette.accent["03"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:(null===(c=x.Palette.actions)||void 0===c?void 0:c.accent["05"])||x.Palette.accent["05"]},"& $icon path, & $infoIcon path":{fill:(null===(d=x.Palette.actions)||void 0===d?void 0:d.accent["05"])||x.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(s=x.Palette.actions)||void 0===s?void 0:s.accent["02"])||x.Palette.accent["02"]},"&:active":{backgroundColor:(null===(p=x.Palette.actions)||void 0===p?void 0:p.accent["03"])||x.Palette.accent["03"],"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:x.Palette.light["01"]},"& $icon path, & $infoIcon path":{fill:x.Palette.light["01"]}}},grayDisabledContainer:{backgroundColor:x.Palette.light["03"],outline:"2px solid ".concat(x.Palette.light["05"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:x.Palette.gray["04"]},"& $icon path, & $infoIcon path":{fill:x.Palette.gray["04"]},"&:hover":{backgroundColor:x.Palette.light["03"],cursor:"default",pointerEvents:"none"}}}};

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

@@ -0,0 +1 @@
+export const getIconAreaColors=e=>({areaBackground:e.Palette.light["01"],areaBorderColor:e.Palette.light["04"]});

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

@@ -1 +1 @@
-export const retrieveStyle=e=>{var t;let{theme:o}=e;const r=((null===(t=o.Palette)||void 0===t?void 0:t.actions)||o.Palette).accent,c=o.Palette.gray;return{canvas:{borderRadius:"4px",border:"1px solid ".concat(c["01"]),cursor:"pointer","&:focus":{border:"2px solid ".concat(r["04"])},"&:active":{border:"2px solid ".concat(r["04"])}}}};
+export const retrieveStyle=o=>{var e;let{theme:r,error:t}=o;const a=((null===(e=r.Palette)||void 0===e?void 0:e.actions)||r.Palette).accent,c=r.Palette.light,s=r.Palette.error;return{canvas:{border:"1px solid ".concat(c["04"]),borderRadius:"4px",cursor:"pointer",transition:"border-color 0.15s ease, box-shadow 0.15s ease","&:focus, &:active":{...t?{borderColor:s["04"],boxShadow:"0 0 0 4px ".concat(s["02"])}:{borderColor:a["03"],boxShadow:"0 0 0 4px ".concat(a["02"])}}}}};

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

@@ -1 +1 @@
-export const COLOR_THEMES={ACCENT:"accent",DEFAULT:"default",ERROR:"error",GRADIENT:"gradient",GRAY:"gray",IDENTITY_1:"identity1",IDENTITY_2:"identity2",IDENTITY_3:"identity3",IDENTITY_4:"identity4",INFO:"info",NEGATIVE:"negative",SUCCESS:"success",WARNING:"warning"};export const ICON_COLOR_THEMES={[COLOR_THEMES.ACCENT]:"accent",[COLOR_THEMES.DEFAULT]:"dark",[COLOR_THEMES.ERROR]:"error",[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:"gray",[COLOR_THEMES.IDENTITY_1]:"light",[COLOR_THEMES.IDENTITY_2]:"light",[COLOR_THEMES.IDENTITY_3]:"light",[COLOR_THEMES.IDENTITY_4]:"light",[COLOR_THEMES.INFO]:"information",[COLOR_THEMES.NEGATIVE]:"dark",[COLOR_THEMES.SUCCESS]:"success",[COLOR_THEMES.WARNING]:"warning"};
+export const DEFAULT_CONTENT_MAX_WIDTH=800;export const COLOR_THEMES={ACCENT:"accent",DEFAULT:"default",ERROR:"error",GRADIENT:"gradient",GRAY:"gray",IDENTITY_1:"identity1",IDENTITY_2:"identity2",IDENTITY_3:"identity3",IDENTITY_4:"identity4",INFO:"info",NEGATIVE:"negative",SUCCESS:"success",WARNING:"warning"};export const ICON_COLOR_THEMES={[COLOR_THEMES.ACCENT]:"accent",[COLOR_THEMES.DEFAULT]:"dark",[COLOR_THEMES.ERROR]:"error",[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:"gray",[COLOR_THEMES.IDENTITY_1]:"light",[COLOR_THEMES.IDENTITY_2]:"light",[COLOR_THEMES.IDENTITY_3]:"light",[COLOR_THEMES.IDENTITY_4]:"light",[COLOR_THEMES.INFO]:"information",[COLOR_THEMES.NEGATIVE]:"dark",[COLOR_THEMES.SUCCESS]:"success",[COLOR_THEMES.WARNING]:"warning"};

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var a in s)({}).hasOwnProperty.call(s,a)&&(e[a]=s[a])}return e},_extends.apply(null,arguments)}import{bool,element,func,object,string}from"prop-types";import React from"react";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import WithTheme from"../WithTheme";import{TEST_IDS}from"../../constants/testIds";import{ICON_COLOR_THEMES,COLOR_THEMES}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const{statusMessage:statusMessage}=TEST_IDS,UTStatusMessage=e=>{let{children:t,classes:s,colorTheme:a=COLOR_THEMES.DEFAULT,description:n,descriptionProps:o,HeaderComponent:r,helpText:c,helpTextProps:i,icon:l="IconInfoCircle",iconProps:m={size:40},loading:T,primaryAction:d,primaryActionProps:p,primaryActionText:g,secondaryAction:u,secondaryActionProps:h,secondaryActionText:y,showHeader:E=!0,title:b,titleProps:U}=e;return React.createElement("div",{className:"".concat(styles.container," ").concat(s.container)},T?React.createElement(UTLoading,{loading:!0,text:null}):E?React.createElement("div",{className:s.banner},r?React.createElement(r,null):React.createElement("div",{className:s.iconContainer},React.createElement(UTIcon,_extends({name:l,colorTheme:ICON_COLOR_THEMES[a],dataTestId:statusMessage.icon},m)))):null,React.createElement("div",{className:"".concat(styles.content," ").concat(s.content)},(b||n||c)&&React.createElement("div",{className:styles.section},b&&React.createElement(UTLabel,_extends({className:styles.label,dataTestId:statusMessage.title,variant:"title3",weight:"medium"},U),b),n&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.description,withMarkdown:!0,variant:"body"},o),n),c&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.helperText,variant:"small"},i),c)),t,(d||u)&&React.createElement("div",{className:styles.section},d&&React.createElement(UTButton,_extends({onClick:d},p),g),u&&React.createElement(UTButton,_extends({onClick:u,variant:"text"},h),y))))};UTStatusMessage.propTypes={children:element,classes:object,colorTheme:string,description:string,descriptionProps:object,HeaderComponent:element,helpText:string,helpTextProps:object,icon:string,iconProps:object,loading:bool,primaryAction:func,primaryActionProps:object,primaryActionText:string,secondaryAction:func,secondaryActionProps:object,secondaryActionText:string,showHeader:bool,title:string,titleProps:object};const UTStatusMessageWithTheme=WithTheme(retrieveStyle)(UTStatusMessage);UTStatusMessageWithTheme.displayName="UTStatusMessage";export default UTStatusMessageWithTheme;
+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 s in a)({}).hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e},_extends.apply(null,arguments)}import{bool,element,func,number,object,oneOfType,string}from"prop-types";import React from"react";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import UTLoading from"../UTLoading";import WithTheme from"../WithTheme";import{TEST_IDS}from"../../constants/testIds";import{ICON_COLOR_THEMES,COLOR_THEMES,DEFAULT_CONTENT_MAX_WIDTH}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const{statusMessage:statusMessage}=TEST_IDS,UTStatusMessage=e=>{let{area:t,children:a,classes:s,colorTheme:o=COLOR_THEMES.DEFAULT,contentMaxWidth:n=DEFAULT_CONTENT_MAX_WIDTH,description:r,descriptionProps:c,flag:i,HeaderComponent:l,helpText:m,helpTextProps:T,icon:d="IconInfoCircle",iconProps:p={size:40},loading:g,primaryAction:u,primaryActionProps:y,primaryActionText:h,secondaryAction:E,secondaryActionProps:b,secondaryActionText:f,showHeader:x=!0,title:U,titleProps:M}=e;return React.createElement("div",{className:"".concat(styles.root," ").concat(t?styles.area:""," ").concat(s.root||"")},i&&React.createElement("div",{className:s.flag||"","data-testid":statusMessage.flag}),React.createElement("div",{className:"".concat(styles.container," ").concat(s.container," ").concat(t?styles.areaPadding:"")},g?React.createElement(UTLoading,{loading:!0,text:null}):x?React.createElement("div",{className:s.banner},l?React.createElement(l,null):React.createElement("div",{className:s.iconContainer},React.createElement(UTIcon,_extends({name:d,colorTheme:ICON_COLOR_THEMES[o],dataTestId:statusMessage.icon},p)))):null,React.createElement("div",{className:"".concat(styles.content," ").concat(s.content),style:{"--statusMessage-content-max-width":"number"==typeof n?"".concat(n,"px"):n}},(U||r||m)&&React.createElement("div",{className:styles.section},U&&React.createElement(UTLabel,_extends({className:styles.label,dataTestId:statusMessage.title,variant:"title3",weight:"medium"},M),U),r&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.description,withMarkdown:!0,variant:"body"},c),r),m&&React.createElement(UTLabel,_extends({className:styles.label,colorTheme:"gray",dataTestId:statusMessage.helperText,variant:"small"},T),m)),a,(u||E)&&React.createElement("div",{className:styles.section},u&&React.createElement(UTButton,_extends({onClick:u},y),h),E&&React.createElement(UTButton,_extends({onClick:E,variant:"text"},b),f)))))};UTStatusMessage.propTypes={area:bool,children:element,classes:object,colorTheme:string,contentMaxWidth:oneOfType([number,string]),description:string,descriptionProps:object,flag:bool,flagColor:string,HeaderComponent:element,helpText:string,helpTextProps:object,icon:string,iconBackgroundColor:string,iconProps:object,loading:bool,primaryAction:func,primaryActionProps:object,primaryActionText:string,secondaryAction:func,secondaryActionProps:object,secondaryActionText:string,showBanner:bool,showHeader:bool,title:string,titleProps:object};const UTStatusMessageWithTheme=WithTheme(retrieveStyle)(UTStatusMessage);UTStatusMessageWithTheme.displayName="UTStatusMessage";export default UTStatusMessageWithTheme;

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

@@ -1,21 +1,52 @@
+$default-area-background: #FFF;
+$default-area-border-color: #E4E6EA;
+
+.root {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+// Fondo, borde y radio se resuelven desde tokens de aplicación; el padding vive en .areaPadding
+// porque .flag debe quedar a borde a borde, sin el padding del área. box-sizing: border-box para
+// que el borde no sume por fuera del max-width.
+.area {
+  background-color: var(--UT-statusMessage-area-background, var(--light01, $default-area-background));
+  border: 1px solid var(--UT-statusMessage-area-border, var(--light04, $default-area-border-color));
+  border-radius: var(--UT-statusMessage-area-radius, 16px);
+  box-sizing: border-box;
+  max-width: 800px;
+  overflow: hidden;
+}
+
+.areaPadding {
+  padding: var(--UT-statusMessage-area-padding, 24px);
+  padding-bottom: var(--UT-statusMessage-area-padding-bottom, 48px);
+}
+
 .container {
   align-items: center;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   grid-gap: 12px;
   justify-content: center;
+  min-width: 0;
   width: 100%;
 }
 
+// min() evita que contentMaxWidth (prop configurable) empuje el contenido más allá del ancho
+// real disponible dentro de .container, aunque su valor sea mayor al espacio con padding aplicado.
 .content {
   align-items: center;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   grid-gap: 24px;
   justify-content: center;
-  max-width: 500px;
+  max-width: min(100%, var(--statusMessage-content-max-width, 800px));
+  min-width: 0;
   width: 100%;
 }
 

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

@@ -1 +1 @@
-import{COLOR_THEMES}from"./constants";const getIconBackgroundColor=(l,i)=>{var t,o,e,n,d,E,v,a,O,r,T,u,C;return{[COLOR_THEMES.ACCENT]:(null===(t=i.Palette)||void 0===t||null===(t=t.actions)||void 0===t?void 0:t.accent["01"])||(null===(o=i.Palette)||void 0===o?void 0:o.accent["01"]),[COLOR_THEMES.DEFAULT]:null===(e=i.Palette)||void 0===e?void 0:e.light["03"],[COLOR_THEMES.ERROR]:null===(n=i.Palette)||void 0===n?void 0:n.error["01"],[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:null===(d=i.Palette)||void 0===d?void 0:d.light["03"],[COLOR_THEMES.IDENTITY_1]:null===(E=i.Palette)||void 0===E||null===(E=E.identitySolid)||void 0===E?void 0:E["01"],[COLOR_THEMES.IDENTITY_2]:null===(v=i.Palette)||void 0===v||null===(v=v.identitySolid)||void 0===v?void 0:v["02"],[COLOR_THEMES.IDENTITY_3]:null===(a=i.Palette)||void 0===a||null===(a=a.identitySolid)||void 0===a?void 0:a["03"],[COLOR_THEMES.IDENTITY_4]:null===(O=i.Palette)||void 0===O||null===(O=O.identitySolid)||void 0===O?void 0:O["04"],[COLOR_THEMES.INFO]:null===(r=i.Palette)||void 0===r?void 0:r.information["02"],[COLOR_THEMES.NEGATIVE]:null===(T=i.Palette)||void 0===T?void 0:T.light["01"],[COLOR_THEMES.SUCCESS]:null===(u=i.Palette)||void 0===u?void 0:u.success["02"],[COLOR_THEMES.WARNING]:null===(C=i.Palette)||void 0===C?void 0:C.warning["02"]}[l]},getBannerBackgroundColor=(l,i)=>{var t,o,e,n,d,E,v,a,O,r,T,u,C;return{[COLOR_THEMES.ACCENT]:(null===(t=i.Palette)||void 0===t||null===(t=t.actions)||void 0===t?void 0:t.accent["03"])||(null===(o=i.Palette)||void 0===o?void 0:o.accent["03"]),[COLOR_THEMES.DEFAULT]:null===(e=i.Palette)||void 0===e?void 0:e.gray["05"],[COLOR_THEMES.ERROR]:null===(n=i.Palette)||void 0===n?void 0:n.error["03"],[COLOR_THEMES.GRADIENT]:null,[COLOR_THEMES.GRAY]:null===(d=i.Palette)||void 0===d?void 0:d.gray["03"],[COLOR_THEMES.IDENTITY_1]:null===(E=i.Palette)||void 0===E||null===(E=E.identitySolid)||void 0===E?void 0:E["01"],[COLOR_THEMES.IDENTITY_2]:null===(v=i.Palette)||void 0===v||null===(v=v.identitySolid)||void 0===v?void 0:v["02"],[COLOR_THEMES.IDENTITY_3]:null===(a=i.Palette)||void 0===a||null===(a=a.identitySolid)||void 0===a?void 0:a["03"],[COLOR_THEMES.IDENTITY_4]:null===(O=i.Palette)||void 0===O||null===(O=O.identitySolid)||void 0===O?void 0:O["04"],[COLOR_THEMES.INFO]:null===(r=i.Palette)||void 0===r?void 0:r.information["03"],[COLOR_THEMES.NEGATIVE]:null===(T=i.Palette)||void 0===T?void 0:T.light["01"],[COLOR_THEMES.SUCCESS]:null===(u=i.Palette)||void 0===u?void 0:u.success["03"],[COLOR_THEMES.WARNING]:null===(C=i.Palette)||void 0===C?void 0:C.warning["03"]}[l]};export const retrieveStyle=l=>{var i,t;let{showBanner:o=!0,theme:e,colorTheme:n=COLOR_THEMES.DEFAULT,iconProps:d={}}=l;const E="linear-gradient(45deg, ".concat(null===(i=e.Palette)||void 0===i||null===(i=i.identityGradient)||void 0===i?void 0:i["01"]," 0%, ").concat(null===(t=e.Palette)||void 0===t||null===(t=t.identityGradient)||void 0===t?void 0:t["02"]," 100%);"),{size:v=40}=d;return{iconContainer:{alignItems:"center",background:n!==COLOR_THEMES.GRADIENT||o?"":E,backgroundColor:getIconBackgroundColor(n,e),borderRadius:100,display:"flex",height:1.85*v,justifyContent:"center",width:1.85*v},banner:{alignItems:"center",background:n===COLOR_THEMES.GRADIENT&&o?E:"",backgroundColor:o?getBannerBackgroundColor(n,e):"transparent",display:"flex",justifyContent:"center",padding:"12px 0",width:"100%"}}};
+import{COLOR_THEMES}from"./constants";const getIconBackgroundColor=(l,i)=>{var o,t,e,n,d,E,a,v,O,T,u,r,C;return{[COLOR_THEMES.ACCENT]:(null===(o=i.Palette)||void 0===o||null===(o=o.actions)||void 0===o?void 0:o.accent["01"])||(null===(t=i.Palette)||void 0===t?void 0:t.accent["01"]),[COLOR_THEMES.DEFAULT]:null===(e=i.Palette)||void 0===e?void 0:e.light["03"],[COLOR_THEMES.ERROR]:null===(n=i.Palette)||void 0===n?void 0:n.error["01"],[COLOR_THEMES.GRADIENT]:"light",[COLOR_THEMES.GRAY]:null===(d=i.Palette)||void 0===d?void 0:d.light["03"],[COLOR_THEMES.IDENTITY_1]:null===(E=i.Palette)||void 0===E||null===(E=E.identitySolid)||void 0===E?void 0:E["01"],[COLOR_THEMES.IDENTITY_2]:null===(a=i.Palette)||void 0===a||null===(a=a.identitySolid)||void 0===a?void 0:a["02"],[COLOR_THEMES.IDENTITY_3]:null===(v=i.Palette)||void 0===v||null===(v=v.identitySolid)||void 0===v?void 0:v["03"],[COLOR_THEMES.IDENTITY_4]:null===(O=i.Palette)||void 0===O||null===(O=O.identitySolid)||void 0===O?void 0:O["04"],[COLOR_THEMES.INFO]:null===(T=i.Palette)||void 0===T?void 0:T.information["02"],[COLOR_THEMES.NEGATIVE]:null===(u=i.Palette)||void 0===u?void 0:u.light["01"],[COLOR_THEMES.SUCCESS]:null===(r=i.Palette)||void 0===r?void 0:r.success["02"],[COLOR_THEMES.WARNING]:null===(C=i.Palette)||void 0===C?void 0:C.warning["02"]}[l]},getBannerBackgroundColor=(l,i)=>{var o,t,e,n,d,E,a,v,O,T,u,r,C;return{[COLOR_THEMES.ACCENT]:(null===(o=i.Palette)||void 0===o||null===(o=o.actions)||void 0===o?void 0:o.accent["03"])||(null===(t=i.Palette)||void 0===t?void 0:t.accent["03"]),[COLOR_THEMES.DEFAULT]:null===(e=i.Palette)||void 0===e?void 0:e.gray["05"],[COLOR_THEMES.ERROR]:null===(n=i.Palette)||void 0===n?void 0:n.error["03"],[COLOR_THEMES.GRADIENT]:null,[COLOR_THEMES.GRAY]:null===(d=i.Palette)||void 0===d?void 0:d.gray["03"],[COLOR_THEMES.IDENTITY_1]:null===(E=i.Palette)||void 0===E||null===(E=E.identitySolid)||void 0===E?void 0:E["01"],[COLOR_THEMES.IDENTITY_2]:null===(a=i.Palette)||void 0===a||null===(a=a.identitySolid)||void 0===a?void 0:a["02"],[COLOR_THEMES.IDENTITY_3]:null===(v=i.Palette)||void 0===v||null===(v=v.identitySolid)||void 0===v?void 0:v["03"],[COLOR_THEMES.IDENTITY_4]:null===(O=i.Palette)||void 0===O||null===(O=O.identitySolid)||void 0===O?void 0:O["04"],[COLOR_THEMES.INFO]:null===(T=i.Palette)||void 0===T?void 0:T.information["03"],[COLOR_THEMES.NEGATIVE]:null===(u=i.Palette)||void 0===u?void 0:u.light["01"],[COLOR_THEMES.SUCCESS]:null===(r=i.Palette)||void 0===r?void 0:r.success["03"],[COLOR_THEMES.WARNING]:null===(C=i.Palette)||void 0===C?void 0:C.warning["03"]}[l]},getFlagBackgroundColor=(l,i)=>{var o,t,e,n,d,E,a,v,O,T,u,r,C;return{[COLOR_THEMES.ACCENT]:(null===(o=i.Palette)||void 0===o||null===(o=o.actions)||void 0===o?void 0:o.accent["03"])||(null===(t=i.Palette)||void 0===t?void 0:t.accent["03"]),[COLOR_THEMES.DEFAULT]:null===(e=i.Palette)||void 0===e?void 0:e.gray["03"],[COLOR_THEMES.ERROR]:null===(n=i.Palette)||void 0===n?void 0:n.error["03"],[COLOR_THEMES.GRADIENT]:null,[COLOR_THEMES.GRAY]:null===(d=i.Palette)||void 0===d?void 0:d.gray["03"],[COLOR_THEMES.IDENTITY_1]:null===(E=i.Palette)||void 0===E||null===(E=E.identitySolid)||void 0===E?void 0:E["01"],[COLOR_THEMES.IDENTITY_2]:null===(a=i.Palette)||void 0===a||null===(a=a.identitySolid)||void 0===a?void 0:a["02"],[COLOR_THEMES.IDENTITY_3]:null===(v=i.Palette)||void 0===v||null===(v=v.identitySolid)||void 0===v?void 0:v["03"],[COLOR_THEMES.IDENTITY_4]:null===(O=i.Palette)||void 0===O||null===(O=O.identitySolid)||void 0===O?void 0:O["04"],[COLOR_THEMES.INFO]:null===(T=i.Palette)||void 0===T?void 0:T.information["03"],[COLOR_THEMES.NEGATIVE]:null===(u=i.Palette)||void 0===u?void 0:u.negative["03"],[COLOR_THEMES.SUCCESS]:null===(r=i.Palette)||void 0===r?void 0:r.success["03"],[COLOR_THEMES.WARNING]:null===(C=i.Palette)||void 0===C?void 0:C.warning["03"]}[l]};export const retrieveStyle=l=>{var i,o;let{showBanner:t=!0,theme:e,colorTheme:n=COLOR_THEMES.DEFAULT,flagColor:d,iconBackgroundColor:E,iconProps:a={}}=l;const v="linear-gradient(45deg, ".concat(null===(i=e.Palette)||void 0===i||null===(i=i.identityGradient)||void 0===i?void 0:i["01"]," 0%, ").concat(null===(o=e.Palette)||void 0===o||null===(o=o.identityGradient)||void 0===o?void 0:o["02"]," 100%);"),{size:O=40}=a;return{iconContainer:{alignItems:"center",background:n!==COLOR_THEMES.GRADIENT||t?"":v,backgroundColor:E||getIconBackgroundColor(n,e),borderRadius:100,display:"flex",height:1.85*O,justifyContent:"center",width:1.85*O},banner:{alignItems:"center",background:n===COLOR_THEMES.GRADIENT&&t?v:"",backgroundColor:t?getBannerBackgroundColor(n,e):"transparent",display:"flex",justifyContent:"center",padding:"12px 0",width:"100%"},flag:{background:n===COLOR_THEMES.GRADIENT?v:"",backgroundColor:d||getFlagBackgroundColor(n,e),height:"var(--UT-statusMessage-flag-height, 8px)",width:"100%"}}};

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

@@ -1,5 +1,5 @@
 .stepper {
-  padding: 24px 0 48px;
+  padding: var(--padding-lg, 24px) 0 var(--UT-stepper-padding-bottom, 24px);
 }
 
 .paddingContainer {

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

@@ -1 +1 @@
-import React,{Fragment,useEffect,useMemo}from"react";import{bool,string,objectOf}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{isEmpty}from"@widergy/web-utils/lib/array";import UTLabel from"../../../UTLabel/index.js";import{fieldType,inputPropTypes,metaPropTypes}from"../../../../types/formTypes.js";import WithTheme from"../../../WithTheme/index.js";import{mergeClasses}from"../../../../utils/classesUtils.js";import{STATES,DEFAULT_SWITCH_ID,TRUE}from"./constants.js";import{retrieveStyle}from"./theme";const UTSwitch=e=>{let{classes:t={},classNames:a,disabled:s,field:r={},input:c={},meta:o={},showErrors:l}=e;const{value:i,onChange:n}=c,{key:m,field_options:d,configuration:p={}}=r,{textOff:T,textOn:u,insideText:f=!0,withText:E}=p,h=m||DEFAULT_SWITCH_ID,b=useMemo(()=>mergeClasses(t,a),[a]),y=d&&!isEmpty(d),[R,v]=y?[...d].sort((e,t)=>{let{value:a,name:s}=t;return[a,s===TRUE].includes(i)?1:-1}):[],S=y?()=>n(v.value):n;useEffect(()=>{y&&!1===i&&n(R.value)},[i]);const N=u||STATES.ON,g=T||STATES.OFF;return React.createElement(Fragment,null,React.createElement("div",{className:b.outerContainer},E&&!f&&g,React.createElement("label",{htmlFor:h,className:"".concat(b.container," ").concat(s&&b.disabled)},React.createElement("input",{className:b.input,id:h,type:"checkbox",checked:y?R.name===TRUE:i,value:y?R.value:i,onChange:S,disabled:s}),React.createElement("span",{className:"".concat(b.sliderContainer," ").concat(s&&b.disabled)},React.createElement("span",{className:"".concat(b.sliderBack," ").concat(s&&b.disabled)}),E&&f&&React.createElement("div",{className:b.textContainer},React.createElement("div",{className:b.checkedText},N),React.createElement("div",{className:b.uncheckedText},g)),React.createElement("span",{className:"".concat(b.sliderHover," ").concat(s&&b.disabled)}),React.createElement("span",{className:"".concat(b.slider," ").concat(s&&b.disabled)}))),E&&!f&&N),l&&o&&shouldShowErrors(o)&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},null==o?void 0:o.error))};UTSwitch.propTypes={classes:objectOf(string),classNames:objectOf(string),disabled:bool,field:fieldType,input:inputPropTypes.isRequired,meta:metaPropTypes,showErrors:bool};export default WithTheme(retrieveStyle)(UTSwitch);
+import React,{Fragment,useEffect,useMemo}from"react";import{bool,string,objectOf}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{isEmpty}from"@widergy/web-utils/lib/array";import UTLabel from"../../../UTLabel/index.js";import{fieldType,inputPropTypes,metaPropTypes}from"../../../../types/formTypes.js";import WithTheme from"../../../WithTheme/index.js";import{mergeClasses}from"../../../../utils/classesUtils.js";import{STATES,DEFAULT_SWITCH_ID,TRUE}from"./constants.js";import{retrieveStyle}from"./theme";const UTSwitch=e=>{let{classes:t={},classNames:a,disabled:s,field:r={},input:c={},meta:o={},showErrors:l}=e;const{value:i,onChange:n}=c,{key:m,field_options:d,configuration:p={}}=r,{textOff:T,textOn:u,insideText:f=!0,withText:E}=p,h=m||DEFAULT_SWITCH_ID,b=useMemo(()=>mergeClasses(t,a),[a]),y=d&&!isEmpty(d),[R,v]=y?[...d].sort((e,t)=>{let{value:a,name:s}=t;return[a,s===TRUE].includes(i)?1:-1}):[],S=y?()=>n(v.value):n;useEffect(()=>{y&&!1===i&&n(R.value)},[i]);const N=u||STATES.ON,g=T||STATES.OFF;return React.createElement(React.Fragment,null,React.createElement("div",{className:b.outerContainer},E&&!f&&g,React.createElement("label",{htmlFor:h,className:"".concat(b.container," ").concat(s&&b.disabled)},React.createElement("input",{className:b.input,id:h,type:"checkbox",checked:y?R.name===TRUE:i,value:y?R.value:i,onChange:S,disabled:s}),React.createElement("span",{className:"".concat(b.sliderContainer," ").concat(s&&b.disabled)},React.createElement("span",{className:"".concat(b.sliderBack," ").concat(s&&b.disabled)}),E&&f&&React.createElement("div",{className:b.textContainer},React.createElement("div",{className:b.checkedText},N),React.createElement("div",{className:b.uncheckedText},g)),React.createElement("span",{className:"".concat(b.sliderHover," ").concat(s&&b.disabled)}),React.createElement("span",{className:"".concat(b.slider," ").concat(s&&b.disabled)}))),E&&!f&&N),l&&o&&shouldShowErrors(o)&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},null==o?void 0:o.error))};UTSwitch.propTypes={classes:objectOf(string),classNames:objectOf(string),disabled:bool,field:fieldType,input:inputPropTypes.isRequired,meta:metaPropTypes,showErrors:bool};export default WithTheme(retrieveStyle)(UTSwitch);

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

@@ -1 +1 @@
-export const STATES={ON:"SI",OFF:"NO"};export const DEFAULT_SWITCH_ID="switch";export const TRUE="true";
+export const STATES={ON:"SI",OFF:"NO"};export const DEFAULT_SWITCH_ID="switch";export const TRUE="true";export const SPACING={SMALL:"small",MEDIUM:"medium"};