@widergy/energy-ui 3.177.0 → 3.178.0

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_Legend=_interopRequireDefault(require("../Legend")),_Button=_interopRequireDefault(require("../Button")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_Slide=_interopRequireDefault(require("./component/Slide")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(a,t,s):a[t]=e[t]);return a})(e,t)}class Slider extends _react.PureComponent{render(){const{transitionSlide:e,slides:t,containerWidth:r,slideArray:n,shouldAnimate:o,index:s,withBorder:a,handleLegend:p,handlePrevSlide:i,handleNextSlide:l,timeAnimation:d,arrow:c,legend:u,classes:_}=this.props,f=35===d?.035:.4;return _react.default.createElement(_react.Fragment,null,c&&c.position===_constants.INSIDE&&_react.default.createElement(_Button.default,{ArrowCustom:c.arrowCustomLeft,callback:c.callbackLeft,left:!0,onPress:i,className:_stylesModule.default.arrowLeft,classes:_}),_react.default.createElement("div",{style:{transform:"translate3d(".concat(e,"px, 0px, 0px)"),width:"".concat(r*n.length,"px"),transition:"".concat(o?"transform ".concat(f,"s linear 0s"):"none")},className:"".concat(_stylesModule.default.slideContainer),draggable:"false"},n.map((e,t)=>_react.default.createElement(_Slide.default,{animationTime:f,border:a,classes:_,currentSlide:s-1,imgSrc:e.imgSrc,key:"slide-".concat(e.id||e.imgSrc),onClick:e.onClick,position:t-1,renderContent:e.renderContent,shouldAnimate:o,widthContainer:r}))),u&&u.position===_constants.INSIDE&&_react.default.createElement("div",{className:_stylesModule.default.legendContainer,style:{justifyContent:u.align||"center",paddingBottom:u.paddingBottom,paddingLeft:u.paddingLeft}},_react.default.createElement("div",{className:_stylesModule.default.legend},t.map((e,t)=>_react.default.createElement(_Legend.default,{key:"legend-in-".concat(e.id||e.imgSrc),classes:_,currentSlide:s===n.length-1?0:0===s?1:s-1,index:t,LegendCustom:u.legendCustom,onClick:p})))),c&&c.position===_constants.INSIDE&&_react.default.createElement(_Button.default,{ArrowCustom:c.arrowCustomRight,callback:c.callbackRight,onPress:l,className:_stylesModule.default.arrowRight,classes:_}))}}Slider.propTypes={slideArray:(0,_propTypes.arrayOf)((0,_propTypes.shape)({imgSrc:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string])})),slides:(0,_propTypes.arrayOf)((0,_propTypes.shape)({imgSrc:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string])})),arrow:(0,_propTypes.shape)({position:_propTypes.string,arrowCustomLeft:_propTypes.node,arrowCustomRight:_propTypes.node,callbackLeft:_propTypes.func,callbackRight:_propTypes.func}),legend:(0,_propTypes.shape)({position:_propTypes.string,legendCustom:_propTypes.node}),transitionSlide:_propTypes.number,containerWidth:_propTypes.number,shouldAnimate:_propTypes.bool,index:_propTypes.number,withBorder:_propTypes.number,handleLegend:_propTypes.func,handlePrevSlide:_propTypes.func,handleNextSlide:_propTypes.func,timeAnimation:_propTypes.number,classes:(0,_propTypes.objectOf)(_propTypes.string)};var _default=exports.default=Slider;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_Legend=_interopRequireDefault(require("../Legend")),_Button=_interopRequireDefault(require("../Button")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_Slide=_interopRequireDefault(require("./component/Slide")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(a,t,s):a[t]=e[t]);return a})(e,t)}class Slider extends _react.PureComponent{render(){const{transitionSlide:e,slides:t,containerWidth:r,slideArray:n,shouldAnimate:o,index:s,withBorder:a,handleLegend:p,handlePrevSlide:i,handleNextSlide:l,timeAnimation:d,arrow:u,legend:c,classes:_}=this.props,f=35===d?.035:.4;return _react.default.createElement(_react.default.Fragment,null,u&&u.position===_constants.INSIDE&&_react.default.createElement(_Button.default,{ArrowCustom:u.arrowCustomLeft,callback:u.callbackLeft,left:!0,onPress:i,className:_stylesModule.default.arrowLeft,classes:_}),_react.default.createElement("div",{style:{transform:"translate3d(".concat(e,"px, 0px, 0px)"),width:"".concat(r*n.length,"px"),transition:"".concat(o?"transform ".concat(f,"s linear 0s"):"none")},className:"".concat(_stylesModule.default.slideContainer),draggable:"false"},n.map((e,t)=>_react.default.createElement(_Slide.default,{animationTime:f,border:a,classes:_,currentSlide:s-1,imgSrc:e.imgSrc,key:"slide-".concat(e.id||e.imgSrc),onClick:e.onClick,position:t-1,renderContent:e.renderContent,shouldAnimate:o,widthContainer:r}))),c&&c.position===_constants.INSIDE&&_react.default.createElement("div",{className:_stylesModule.default.legendContainer,style:{justifyContent:c.align||"center",paddingBottom:c.paddingBottom,paddingLeft:c.paddingLeft}},_react.default.createElement("div",{className:_stylesModule.default.legend},t.map((e,t)=>_react.default.createElement(_Legend.default,{key:"legend-in-".concat(e.id||e.imgSrc),classes:_,currentSlide:s===n.length-1?0:0===s?1:s-1,index:t,LegendCustom:c.legendCustom,onClick:p})))),u&&u.position===_constants.INSIDE&&_react.default.createElement(_Button.default,{ArrowCustom:u.arrowCustomRight,callback:u.callbackRight,onPress:l,className:_stylesModule.default.arrowRight,classes:_}))}}Slider.propTypes={slideArray:(0,_propTypes.arrayOf)((0,_propTypes.shape)({imgSrc:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string])})),slides:(0,_propTypes.arrayOf)((0,_propTypes.shape)({imgSrc:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.number,_propTypes.string])})),arrow:(0,_propTypes.shape)({position:_propTypes.string,arrowCustomLeft:_propTypes.node,arrowCustomRight:_propTypes.node,callbackLeft:_propTypes.func,callbackRight:_propTypes.func}),legend:(0,_propTypes.shape)({position:_propTypes.string,legendCustom:_propTypes.node}),transitionSlide:_propTypes.number,containerWidth:_propTypes.number,shouldAnimate:_propTypes.bool,index:_propTypes.number,withBorder:_propTypes.number,handleLegend:_propTypes.func,handlePrevSlide:_propTypes.func,handleNextSlide:_propTypes.func,timeAnimation:_propTypes.number,classes:(0,_propTypes.objectOf)(_propTypes.string)};var _default=exports.default=Slider;

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,o,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(s=t?a:r){if(s.has(e))return s.get(e);s.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?s(i,t,o):i[t]=e[t]);return i})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:r,classes:a,classNames:s,CustomComponent:o,dataTestId:i,disabled:n,indeterminate:l,isSimple:p=!1,meta:u,onChange:c=()=>{},required:_,icon:d,title:T,value:f=!1,variant:m="default",withUpperTitle:y}=e;const b=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(a,s),[s,a]),h=(0,_react.useMemo)(()=>l?_constants.INDETERMINATE_ICON:!0===f?_constants.CHECKED_ICON:"",[l,f]),U=!0===f&&m===_constants.BUTTON_VARIANT,q={onMouseDown:()=>{!n&&c&&c(!f)},disabled:n},N=m===_constants.BUTTON_VARIANT?_UTTouchableWithoutFeedback.default:"div",g=m===_constants.BUTTON_VARIANT?"div":_UTTouchableWithoutFeedback.default,v=m===_constants.BUTTON_VARIANT?q:{},I=m===_constants.BUTTON_VARIANT?{}:q,O=u&&(0,_form.shouldShowErrors)(u)&&u.error||"",R=(0,_utils.formatErrorToValidation)(O);return _react.default.createElement(_react.Fragment,null,y&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:_},T),_react.default.createElement(N,_extends({className:b.container},m===_constants.BUTTON_VARIANT?{dataTestId:i}:{"data-testid":i},v),_react.default.createElement("div",{className:b.content},_react.default.createElement(g,_extends({className:b.boxContainer},m===_constants.BUTTON_VARIANT?{"data-testid":r}:{dataTestId:r},I),p?_react.default.createElement(_UTIcon.default,{name:"IconCheck",shade:"04",colorTheme:"accent",className:f?void 0:_stylesModule.default.hidden}):_react.default.createElement("div",{className:b.box},_react.default.createElement("div",{className:b.iconContainer},_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:h,size:16})))),o||_react.default.createElement(_UTFieldLabel.default,{className:b.title,highlighted:U,icon:d,required:_},T)),O&&_react.default.createElement(_UTValidation.default,{className:b.validation,validationData:R})))};UTCheckbox.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),checkboxDataTestId:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomComponent:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,indeterminate:_propTypes.bool,isSimple:_propTypes.bool,meta:_formTypes.metaPropTypes.isRequired,onChange:_propTypes.func,required:_propTypes.bool,icon:_propTypes.string,reversed:_propTypes.bool,spacing:_propTypes.string,title:_propTypes.string,value:_propTypes.bool,variant:_propTypes.string,withUpperTitle:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_form=require("@widergy/web-utils/lib/form"),_classesUtils=require("../../../../utils/classesUtils"),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../../../UTTouchableWithoutFeedback")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_utils=require("../../../UTValidation/utils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(o=t?a:r){if(o.has(e))return o.get(e);o.set(e,i)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?o(i,t,s):i[t]=e[t]);return i})(e,t)}const UTCheckbox=e=>{let{actions:t,checkboxDataTestId:r,classes:a,classNames:o,CustomComponent:s,dataTestId:i,disabled:l,indeterminate:n,isSimple:u=!1,meta:p,onChange:c=()=>{},required:d,icon:_,title:T,value:f=!1,variant:m="default",withUpperTitle:y}=e;const b=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(a,o),[o,a]),h=(0,_react.useMemo)(()=>n?_constants.INDETERMINATE_ICON:!0===f?_constants.CHECKED_ICON:"",[n,f]),q=!0===f&&m===_constants.BUTTON_VARIANT,U=p&&(0,_form.shouldShowErrors)(p)&&p.error||"",g=(0,_utils.formatErrorToValidation)(U);return _react.default.createElement(_react.default.Fragment,null,y&&_react.default.createElement(_UTFieldLabel.default,{actions:t,required:d},T),_react.default.createElement(_UTTouchableWithoutFeedback.default,{className:b.container,dataTestId:i,disabled:l,onMouseDown:()=>{!l&&c&&c(!f)}},_react.default.createElement("div",{className:b.content},_react.default.createElement("div",{className:b.boxContainer,"data-testid":r},u?_react.default.createElement(_UTIcon.default,{name:"IconCheck",shade:"04",colorTheme:"accent",className:f?void 0:_stylesModule.default.hidden}):_react.default.createElement("div",{className:b.box},_react.default.createElement("div",{className:b.iconContainer},h&&_react.default.createElement(_UTIcon.default,{colorTheme:"light",name:n?"IconMinus":"IconCheck",size:10})))),s||_react.default.createElement(_UTFieldLabel.default,{className:b.title,highlighted:q,icon:_,required:d},T)),U&&_react.default.createElement(_UTValidation.default,{className:b.validation,validationData:g})))};UTCheckbox.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),checkboxDataTestId:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),CustomComponent:_propTypes.elementType,dataTestId:_propTypes.string,disabled:_propTypes.bool,indeterminate:_propTypes.bool,isSimple:_propTypes.bool,meta:_formTypes.metaPropTypes.isRequired,onChange:_propTypes.func,required:_propTypes.bool,icon:_propTypes.string,title:_propTypes.string,value:_propTypes.bool,variant:_propTypes.string,withUpperTitle:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WEEKDAYS_LABELS=exports.TYPING_ERROR_MESSAGE=exports.OUTPUT_LABEL_MASK=exports.MONTH_YEAR_FORMAT=exports.DEFAULT_PROPS=exports.DEFAULT_PLACEHOLDER=exports.DAY_NUMBER_FORMAT=void 0;const OUTPUT_LABEL_MASK=exports.OUTPUT_LABEL_MASK="DD/MM/YYYY",WEEKDAYS_LABELS=exports.WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"],MONTH_YEAR_FORMAT=exports.MONTH_YEAR_FORMAT="MMMM YYYY",DAY_NUMBER_FORMAT=exports.DAY_NUMBER_FORMAT="DD",DEFAULT_PLACEHOLDER=exports.DEFAULT_PLACEHOLDER="DD/MM/AAAA",TYPING_ERROR_MESSAGE=exports.TYPING_ERROR_MESSAGE="Fecha inválida",DEFAULT_PROPS=exports.DEFAULT_PROPS={variant:"select",size:"sm"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WEEKDAYS_LABELS=exports.TYPING_ERROR_MESSAGE=exports.OUTPUT_LABEL_MASK=exports.MONTH_YEAR_FORMAT=exports.DEFAULT_PROPS=exports.DEFAULT_PLACEHOLDER=exports.DAY_NUMBER_FORMAT=void 0;const OUTPUT_LABEL_MASK=exports.OUTPUT_LABEL_MASK="DD/MM/YYYY",WEEKDAYS_LABELS=exports.WEEKDAYS_LABELS=["Dom","Lun","Mar","Mie","Jue","Vie","Sab"],MONTH_YEAR_FORMAT=exports.MONTH_YEAR_FORMAT="MMMM YYYY",DAY_NUMBER_FORMAT=exports.DAY_NUMBER_FORMAT="DD",DEFAULT_PLACEHOLDER=exports.DEFAULT_PLACEHOLDER="DD/MM/AAAA",TYPING_ERROR_MESSAGE=exports.TYPING_ERROR_MESSAGE="Fecha inválida",DEFAULT_PROPS=exports.DEFAULT_PROPS={variant:"select",size:"md"};

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

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

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

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

package/dist/components/UTDocumentWizard/index.js

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

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

@@ -2,7 +2,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: var(--UT-fieldLabel-gap-sm, 8px);
   justify-content: space-between;
   width: 100%
 }
@@ -10,16 +10,16 @@
 .label {
   display: flex;
   flex-direction: row;
-  grid-gap: 4px;
+  grid-gap: var(--UT-fieldLabel-gap-xs, 4px);
 }
 
 .actionsContainer {
   display: flex;
-  gap: 8px;
+  gap: var(--UT-fieldLabel-gap-sm, 8px);
 }
 
 .labelContent {
   display: flex;
   flex-direction: row;
-  gap: 16px;
+  gap: var(--UT-fieldLabel-gap-lg, 16px);
 }

package/dist/components/UTFileInput/layout.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,l,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?r:a){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?n(o,t,l):o[t]=e[t]);return o})(e,t)}function _defineProperty(e,t,a){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:t+""}function _toPrimitive(e,t){if("object"!=typeof e||!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var r=a.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var uploadIcon=function(e){return _react.default.createElement("svg",e,_react.default.createElement("g",{fill:"#4d97fa"},_react.default.createElement("path",{d:"M185.749 81.664v204.501h42.667V81.664l70.251 70.251 30.165-30.166L207.083 0 85.333 121.749l30.166 30.166zM335.083 328.832v42.667h-256v-42.667H36.416v42.667c0 23.509 19.115 42.667 42.667 42.667h256c23.552 0 42.667-19.157 42.667-42.667v-42.667h-42.667z"})))};uploadIcon.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 414.165 414.165",style:{enableBackground:"new 0 0 414.165 414.165"},xmlSpace:"preserve",width:"512",height:"512"};class UTFileInput extends _react.PureComponent{constructor(e){super(e),_defineProperty(this,"handleDragLeave",()=>this.setState({hasDrag:!1})),_defineProperty(this,"handleDragOver",e=>e&&this.setState({hasDrag:!0})),_defineProperty(this,"handleOnDrop",()=>this.setState({hasDrag:!1})),this.state={hasDrag:!1}}render(){const{classes:e,containerClassname:t,dataTestId:a,disabled:r,error:n,errorClassname:l,errorText:o,fileType:s,icon:i,inputClassname:p,label:c,loading:u,loadingTextClassname:d,name:_,onChange:f,uploadingText:y}=this.props,g=uploadIcon;return _react.default.createElement(_react.Fragment,null,_react.default.createElement("div",{className:"\n            ".concat(_stylesModule.default.inputContainer,"\n            ").concat(this.state.hasDrag&&_stylesModule.default.inputContainerDrag,"\n            ").concat(u&&_stylesModule.default.inputContainerLoading,"\n            ").concat(e.container,"\n            ").concat(t,"\n          "),onDragLeave:this.handleDragLeave,onDragOver:this.handleDragOver,onDrop:this.handleOnDrop},u?_react.default.createElement(_react.Fragment,null,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:"".concat(_stylesModule.default.loadingLabel," ").concat(d)},y),_react.default.createElement("div",{className:_stylesModule.default.loading})):_react.default.createElement("div",{className:"".concat(_stylesModule.default.insideContainer," ").concat(r?_stylesModule.default.disabled:"")},i||_react.default.createElement(g,{className:"".concat(_stylesModule.default.icon," ").concat(e.icon)}),_react.default.createElement(_UTLabel.default,{variant:"small",className:"".concat(_stylesModule.default.label," ").concat(e.fileInputLabel)},c)),_react.default.createElement("input",{accept:s,className:"".concat(_stylesModule.default.input," ").concat(p),"data-testid":a,disabled:r,name:_,onChange:f,type:"file"})),n&&_react.default.createElement(_UTLabel.default,{className:l,colorTheme:"error",variant:"small"},o))}}UTFileInput.defaultProps={label:_constants.SELECT_FILE,uploadingText:_constants.UPLOADING},UTFileInput.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),containerClassname:_propTypes.string,dataTestId:_propTypes.string,disabled:_propTypes.bool,error:_propTypes.bool,errorClassname:_propTypes.string,errorText:_propTypes.string,fileType:_propTypes.string,icon:_propTypes.string,inputClassname:_propTypes.string,label:_propTypes.string,loading:_propTypes.bool,loadingTextClassname:_propTypes.string,name:_propTypes.string,onChange:_propTypes.func.isRequired,uploadingText:_propTypes.string};var _default=exports.default=UTFileInput;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,l,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(n=t?r:a){if(n.has(e))return n.get(e);n.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?n(o,t,l):o[t]=e[t]);return o})(e,t)}function _defineProperty(e,t,a){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _toPropertyKey(e){var t=_toPrimitive(e,"string");return"symbol"==typeof t?t:t+""}function _toPrimitive(e,t){if("object"!=typeof e||!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var r=a.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var uploadIcon=function(e){return _react.default.createElement("svg",e,_react.default.createElement("g",{fill:"#4d97fa"},_react.default.createElement("path",{d:"M185.749 81.664v204.501h42.667V81.664l70.251 70.251 30.165-30.166L207.083 0 85.333 121.749l30.166 30.166zM335.083 328.832v42.667h-256v-42.667H36.416v42.667c0 23.509 19.115 42.667 42.667 42.667h256c23.552 0 42.667-19.157 42.667-42.667v-42.667h-42.667z"})))};uploadIcon.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 414.165 414.165",style:{enableBackground:"new 0 0 414.165 414.165"},xmlSpace:"preserve",width:"512",height:"512"};class UTFileInput extends _react.PureComponent{constructor(e){super(e),_defineProperty(this,"handleDragLeave",()=>this.setState({hasDrag:!1})),_defineProperty(this,"handleDragOver",e=>e&&this.setState({hasDrag:!0})),_defineProperty(this,"handleOnDrop",()=>this.setState({hasDrag:!1})),this.state={hasDrag:!1}}render(){const{classes:e,containerClassname:t,dataTestId:a,disabled:r,error:n,errorClassname:l,errorText:o,fileType:s,icon:i,inputClassname:p,label:c,loading:u,loadingTextClassname:d,name:f,onChange:_,uploadingText:y}=this.props,g=uploadIcon;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement("div",{className:"\n            ".concat(_stylesModule.default.inputContainer,"\n            ").concat(this.state.hasDrag&&_stylesModule.default.inputContainerDrag,"\n            ").concat(u&&_stylesModule.default.inputContainerLoading,"\n            ").concat(e.container,"\n            ").concat(t,"\n          "),onDragLeave:this.handleDragLeave,onDragOver:this.handleDragOver,onDrop:this.handleOnDrop},u?_react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:"".concat(_stylesModule.default.loadingLabel," ").concat(d)},y),_react.default.createElement("div",{className:_stylesModule.default.loading})):_react.default.createElement("div",{className:"".concat(_stylesModule.default.insideContainer," ").concat(r?_stylesModule.default.disabled:"")},i||_react.default.createElement(g,{className:"".concat(_stylesModule.default.icon," ").concat(e.icon)}),_react.default.createElement(_UTLabel.default,{variant:"small",className:"".concat(_stylesModule.default.label," ").concat(e.fileInputLabel)},c)),_react.default.createElement("input",{accept:s,className:"".concat(_stylesModule.default.input," ").concat(p),"data-testid":a,disabled:r,name:f,onChange:_,type:"file"})),n&&_react.default.createElement(_UTLabel.default,{className:l,colorTheme:"error",variant:"small"},o))}}UTFileInput.defaultProps={label:_constants.SELECT_FILE,uploadingText:_constants.UPLOADING},UTFileInput.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),containerClassname:_propTypes.string,dataTestId:_propTypes.string,disabled:_propTypes.bool,error:_propTypes.bool,errorClassname:_propTypes.string,errorText:_propTypes.string,fileType:_propTypes.string,icon:_propTypes.string,inputClassname:_propTypes.string,label:_propTypes.string,loading:_propTypes.bool,loadingTextClassname:_propTypes.string,name:_propTypes.string,onChange:_propTypes.func.isRequired,uploadingText:_propTypes.string};var _default=exports.default=UTFileInput;

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

@@ -23,15 +23,15 @@
 
 .inputContainer {
   background-color: $white;
-  border-radius: 4px;
+  border-radius: var(--UT-fileInput-radius, 4px);
   box-shadow: 0 2px 4px -1px $card-shadow-1, 0 4px 5px 0 $card-shadow-2, 0 1px 10px 0 $card-shadow-3;
   cursor: pointer;
-  margin-bottom: 4px;
-  max-height: 48px;
+  margin-bottom: var(--UT-fileInput-container-margin, 4px);
+  max-height: var(--UT-fileInput-container-height, 48px);
   max-width: 180px;
   min-width: 180px;
   overflow: hidden;
-  padding-top: 5px;
+  padding-top: var(--UT-fileInput-container-padding, 4px);
   position: relative;
   text-align: center;
   transition: background-color, box-shadow 0.2s ease;
@@ -53,9 +53,9 @@
 }
 
 .icon {
-  height: 20px;
-  padding: 2px 0 5px 3px;
-  width: 30px;
+  height: var(--UT-fileInput-icon-height, 20px);
+  padding: var(--UT-fileInput-icon-padding-top, 2px) 0 var(--UT-fileInput-icon-padding-sm, 4px) var(--UT-fileInput-icon-padding-sm, 4px);
+  width: var(--UT-fileInput-icon-width, 32px);
 }
 
 @keyframes move-bg {
@@ -92,8 +92,8 @@
 
 .loadingLabel {
   cursor: pointer;
-  padding-bottom: 10px;
-  padding-top: 5px;
+  padding-bottom: var(--UT-fileInput-label-padding-bottom, 8px);
+  padding-top: var(--UT-fileInput-label-padding-top, 4px);
   position: relative;
   z-index: 5;
 }
@@ -105,7 +105,7 @@
 
 .label {
   cursor: pointer;
-  padding: 5px 3px 10px;
+  padding: var(--UT-fileInput-label-padding-top, 4px) var(--UT-fileInput-label-padding-x, 4px) var(--UT-fileInput-label-padding-bottom, 8px);
 }
 
 .error {

package/dist/components/UTHeader/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTBanner=_interopRequireDefault(require("../UTBanner")),_classesUtils=require("../../utils/classesUtils"),_UTMenu=_interopRequireDefault(require("../UTMenu")),_UTButton=_interopRequireDefault(require("../UTButton")),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?l(n,t,s):n[t]=e[t]);return n})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}var Ellipsis=function(e){return _react.default.createElement("svg",e,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"}))};Ellipsis.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};var Edit=function(e){return _react.default.createElement("svg",e,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"}))};Edit.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};const UTHeader=e=>{var t,a;let{actions:r,banner:l,classNames:s,classes:n={},helpText:i,helpTextDataTestId:o,isLastStep:p,requiredFieldInfo:d,requiredFieldInfoDataTestId:u,subtitle:c,subtitleDataTestId:_,tagline:f,taglineDataTestId:T,title:m,titleDataTestId:y,TitleIcon:g,titleProps:h}=e;const v=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(n,s),[s]),b=r.find(e=>e.main),E=r.filter((e,t)=>t!==r.indexOf(b)),w=(null==b?void 0:b.Icon)||Edit,I=f||m||c||d||i||l,[M,q]=(0,_react.useState)(),x="20px",U=(e,t)=>_react.default.isValidElement(e)?e:t,D=U(f,_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.stepTitle,colorTheme:"gray",dataTestId:T,variant:"small",weight:"medium"},f)),R=U(m,_react.default.createElement(_UTLabel.default,_extends({className:"".concat(_stylesModule.default.title," ").concat(h.className),dataTestId:y,variant:null!==(t=h.variant)&&void 0!==t?t:"title2",weight:null!==(a=h.weight)&&void 0!==a?a:"medium"},h,{withMarkdown:!0}),m)),N=U(c,_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.subtitle,colorTheme:"gray",dataTestId:_,variant:"body",withMarkdown:!0},c)),k=U(d,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:u,variant:"small",withMarkdown:!0},d)),C=U(i,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:o,variant:"small"},i));return _react.default.createElement("div",{className:v.outerContainer},_react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(!I&&_stylesModule.default.containerMargin," ")},_react.default.createElement("div",{className:"".concat(_stylesModule.default.header," ").concat((null==l?void 0:l.text)&&_stylesModule.default.bottomPadding)},f&&!p&&D,_react.default.createElement("div",{className:"".concat(_stylesModule.default.titles," ").concat(v.titles)},_react.default.createElement("div",{className:_stylesModule.default.titleAndActionsContainer},g&&_react.default.createElement(g,{className:v.titleIcon}),R,!(0,_isEmpty.default)(r)&&_react.default.createElement("div",{className:_stylesModule.default.actionsContainer},b&&(b.Component?_react.default.createElement(b.Component,null):_react.default.createElement(_UTButton.default,{colorTheme:"primary",Icon:w,onClick:b.onClick,variant:"text"})),!(0,_isEmpty.default)(E)&&_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,{onClick:e=>q(e.target),variant:"text",Icon:Ellipsis}),_react.default.createElement(_UTMenu.default,{anchor:M,items:E.map(e=>{let{label:t,onClick:a}=e;return{key:t,label:t,onClick:a}}),menuPlacement:"bottom-end",onClose:()=>q()})))),c&&N),d&&k,i&&C),(null==l?void 0:l.text)&&_react.default.createElement(_UTBanner.default,{classNames:{infoContainer:_stylesModule.default.bannerContainer},iconProps:{height:x,width:x},Icon:l.Icon,title:l.text})))};UTHeader.propTypes={actions:(0,_propTypes.arrayOf)(_propTypes.object),banner:(0,_propTypes.shape)({Icon:_propTypes.object,text:_propTypes.string}),classNames:(0,_propTypes.objectOf)(_propTypes.string),classes:(0,_propTypes.objectOf)(_propTypes.string),helpText:_propTypes.string,helpTextDataTestId:_propTypes.string,isLastStep:_propTypes.bool,requiredFieldInfo:_propTypes.string,requiredFieldInfoDataTestId:_propTypes.string,subtitle:_propTypes.string,subtitleDataTestId:_propTypes.string,tagline:_propTypes.string,taglineDataTestId:_propTypes.string,title:_propTypes.string,titleDataTestId:_propTypes.string,TitleIcon:_propTypes.element,titleProps:(0,_propTypes.shape)({align:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,dataTestId:_propTypes.string,markdownRenderers:(0,_propTypes.objectOf)(_propTypes.func),title:_propTypes.string,variant:_propTypes.string,withMarkdown:_propTypes.bool})};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTHeader);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTBanner=_interopRequireDefault(require("../UTBanner")),_classesUtils=require("../../utils/classesUtils"),_UTMenu=_interopRequireDefault(require("../UTMenu")),_UTButton=_interopRequireDefault(require("../UTButton")),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var l,s,n={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return n;if(l=t?r:a){if(l.has(e))return l.get(e);l.set(e,n)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(l=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?l(n,t,s):n[t]=e[t]);return n})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}var Ellipsis=function(e){return _react.default.createElement("svg",e,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z"}))};Ellipsis.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};var Edit=function(e){return _react.default.createElement("svg",e,_react.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"m16.019 10.678-2.695-2.695 1.948-1.949 2.694 2.694-1.947 1.95Zm-6.94 6.946-2.976.271.264-2.956 5.617-5.617 2.696 2.696-5.6 5.606ZM19.405 7.337h-.001l-2.738-2.739c-.741-.739-2.014-.774-2.716-.069l-8.996 8.996a1.973 1.973 0 0 0-.57 1.214l-.38 4.17a1.002 1.002 0 0 0 1.088 1.086l4.17-.379a1.974 1.974 0 0 0 1.214-.568l8.997-8.997c.728-.73.697-1.948-.068-2.714Z"}))};Edit.defaultProps={width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"};const UTHeader=e=>{var t,a;let{actions:r,banner:l,classNames:s,classes:n={},helpText:i,helpTextDataTestId:o,isLastStep:p,requiredFieldInfo:d,requiredFieldInfoDataTestId:u,subtitle:c,subtitleDataTestId:_,tagline:f,taglineDataTestId:T,taglineProps:m={},title:y,titleDataTestId:g,TitleIcon:h,titleProps:v}=e;const b=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(n,s),[s]),E=r.find(e=>e.main),w=r.filter((e,t)=>t!==r.indexOf(E)),I=(null==E?void 0:E.Icon)||Edit,M=f||y||c||d||i||l,[q,x]=(0,_react.useState)(),U="20px",D=(e,t)=>_react.default.isValidElement(e)?e:t,N=D(f,_react.default.createElement(_UTLabel.default,_extends({className:_stylesModule.default.stepTitle,colorTheme:"gray",dataTestId:T,variant:"small",weight:"medium"},m),f)),R=D(y,_react.default.createElement(_UTLabel.default,_extends({className:"".concat(_stylesModule.default.title," ").concat(v.className),dataTestId:g,variant:null!==(t=v.variant)&&void 0!==t?t:"title2",weight:null!==(a=v.weight)&&void 0!==a?a:"medium"},v,{withMarkdown:!0}),y)),k=D(c,_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.subtitle,colorTheme:"gray",dataTestId:_,variant:"body",withMarkdown:!0},c)),C=D(d,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:u,variant:"small",withMarkdown:!0},d)),O=D(i,_react.default.createElement(_UTLabel.default,{colorTheme:"gray",dataTestId:o,variant:"small"},i));return _react.default.createElement("div",{className:b.outerContainer},_react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(!M&&_stylesModule.default.containerMargin," ")},_react.default.createElement("div",{className:"".concat(_stylesModule.default.header," ").concat((null==l?void 0:l.text)&&_stylesModule.default.bottomPadding)},f&&!p&&N,_react.default.createElement("div",{className:"".concat(_stylesModule.default.titles," ").concat(b.titles)},_react.default.createElement("div",{className:_stylesModule.default.titleAndActionsContainer},h&&_react.default.createElement(h,{className:b.titleIcon}),R,!(0,_isEmpty.default)(r)&&_react.default.createElement("div",{className:_stylesModule.default.actionsContainer},E&&(E.Component?_react.default.createElement(E.Component,null):_react.default.createElement(_UTButton.default,{colorTheme:"primary",Icon:I,onClick:E.onClick,variant:"text"})),!(0,_isEmpty.default)(w)&&_react.default.createElement("div",null,_react.default.createElement(_UTButton.default,{onClick:e=>x(e.target),variant:"text",Icon:Ellipsis}),_react.default.createElement(_UTMenu.default,{anchor:q,items:w.map(e=>{let{label:t,onClick:a}=e;return{key:t,label:t,onClick:a}}),menuPlacement:"bottom-end",onClose:()=>x()})))),c&&k),d&&C,i&&O),(null==l?void 0:l.text)&&_react.default.createElement(_UTBanner.default,{classNames:{infoContainer:_stylesModule.default.bannerContainer},iconProps:{height:U,width:U},Icon:l.Icon,title:l.text})))};UTHeader.propTypes={actions:(0,_propTypes.arrayOf)(_propTypes.object),banner:(0,_propTypes.shape)({Icon:_propTypes.object,text:_propTypes.string}),classNames:(0,_propTypes.objectOf)(_propTypes.string),classes:(0,_propTypes.objectOf)(_propTypes.string),helpText:_propTypes.string,helpTextDataTestId:_propTypes.string,isLastStep:_propTypes.bool,requiredFieldInfo:_propTypes.string,requiredFieldInfoDataTestId:_propTypes.string,subtitle:_propTypes.string,subtitleDataTestId:_propTypes.string,tagline:_propTypes.string,taglineDataTestId:_propTypes.string,taglineProps:(0,_propTypes.shape)({className:_propTypes.string,colorTheme:_propTypes.string,shade:_propTypes.string,variant:_propTypes.string,weight:_propTypes.string}),title:_propTypes.string,titleDataTestId:_propTypes.string,TitleIcon:_propTypes.element,titleProps:(0,_propTypes.shape)({align:_propTypes.string,classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,dataTestId:_propTypes.string,markdownRenderers:(0,_propTypes.objectOf)(_propTypes.func),title:_propTypes.string,variant:_propTypes.string,withMarkdown:_propTypes.bool})};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTHeader);

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

@@ -1,6 +1,6 @@
 @use '../../scss/variables/mediaQueries.module.scss' as *;
 
-$header-workflow-max-width: 966px;
+$header-workflow-max-width: 800px;
 
 .actionsContainer {
   align-items: flex-start;
@@ -14,10 +14,10 @@ $header-workflow-max-width: 966px;
   justify-content: space-between;
   margin: 0 auto;
   max-width: $header-workflow-max-width;
-  padding: 24px 32px 32px;
+  padding: var(--padding-lg, 24px) var(--padding-xl, 32px);
 
   @media #{$tablet-mobile} {
-    padding: 24px 16px;
+    padding: var(--padding-lg, 24px) var(--padding-md, 16px);
   }
 }
 
@@ -28,7 +28,7 @@ $header-workflow-max-width: 966px;
 .header {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--gap-sm, 8px);
   padding: 0;
   width: 100%;
 }
@@ -58,12 +58,11 @@ $header-workflow-max-width: 966px;
   grid-gap: 16px;
   word-break: break-word;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: var(--UT-header-gap-titles, 12px);
 }
 
 .title,
 .subtitle {
-  max-width: 500px;
   overflow-wrap: break-word;
   line-height: 22px;
 }