@unicef/material-ui 1.0.6 → 1.0.8

package/lib/prod.js

@@ -24399,17 +24399,23 @@ var StyledAppBar = styled$1(AppBar$1, {
  */
 
 function UHeader(props) {
-  var position = props.position,
+  var _props$position = props.position,
+    position = _props$position === void 0 ? 'fixed' : _props$position,
     applicationName = props.applicationName,
-    showHamburgerMenu = props.showHamburgerMenu,
-    hideLogo = props.hideLogo,
+    _props$showHamburgerM = props.showHamburgerMenu,
+    showHamburgerMenu = _props$showHamburgerM === void 0 ? true : _props$showHamburgerM,
+    _props$hideLogo = props.hideLogo,
+    hideLogo = _props$hideLogo === void 0 ? false : _props$hideLogo,
     logo = props.logo,
-    hideLogoBorderLine = props.hideLogoBorderLine,
-    logoUrl = props.logoUrl,
+    _props$hideLogoBorder = props.hideLogoBorderLine,
+    hideLogoBorderLine = _props$hideLogoBorder === void 0 ? true : _props$hideLogoBorder,
+    _props$logoUrl = props.logoUrl,
+    logoUrl = _props$logoUrl === void 0 ? '/' : _props$logoUrl,
     onLogoClick = props.onLogoClick,
     openDrawer = props.openDrawer,
     toggleDrawer = props.toggleDrawer,
-    elevation = props.elevation,
+    _props$elevation = props.elevation,
+    elevation = _props$elevation === void 0 ? 4 : _props$elevation,
     bgColor = props.bgColor;
   var handleUrlClick = function handleUrlClick(e) {
     if (onLogoClick) {
@@ -24532,14 +24538,6 @@ UHeader.propTypes = {
   /** AppBar elevation value to handle the box shadow effect */
   elevation: PropTypes.number
 };
-UHeader.defaultProps = {
-  position: 'fixed',
-  showHamburgerMenu: true,
-  hideLogo: false,
-  logoUrl: '/',
-  hideLogoBorderLine: true,
-  elevation: 4
-};
 
 var PREFIX$u = 'ULayout';
 var classes$u = {
@@ -24566,7 +24564,7 @@ function ULayout(props) {
   }, props.children);
 }
 
-var _excluded$14 = ["headerHeight", "width"];
+var _excluded$14 = ["headerHeight", "width", "children"];
 var PREFIX$t = 'USideBar';
 var classes$t = {
   drawer: "".concat(PREFIX$t, "-drawer"),
@@ -24591,10 +24589,13 @@ var StyledBox$k = styled$1(Box$1)(function (props) {
  *
  * USideBar must be wrapped inside the ULayout(Parent Component).
  */
-function USideBar(props) {
-  var headerHeight = props.headerHeight,
-    width = props.width,
-    others = _objectWithoutProperties$2(props, _excluded$14);
+function USideBar(_ref2) {
+  var _ref2$headerHeight = _ref2.headerHeight,
+    headerHeight = _ref2$headerHeight === void 0 ? 64 : _ref2$headerHeight,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 300 : _ref2$width,
+    children = _ref2.children,
+    others = _objectWithoutProperties$2(_ref2, _excluded$14);
   return /*#__PURE__*/React$1.createElement(StyledBox$k, {
     display: {
       xs: 'none',
@@ -24611,7 +24612,7 @@ function USideBar(props) {
     style: {
       minHeight: headerHeight
     }
-  }), props.children));
+  }), children));
 }
 USideBar.propTypes = {
   /** Height of the header including MainMenu */
@@ -24621,10 +24622,6 @@ USideBar.propTypes = {
    */
   width: PropTypes.number
 };
-USideBar.defaultProps = {
-  headerHeight: 64,
-  width: 300
-};
 
 var PREFIX$s = 'UContent';
 var classes$s = {
@@ -24644,7 +24641,8 @@ var Root$5 = styled$1('main')(function (_ref) {
  * * UContent must be wrapped inside the ULayout.
  */
 function UContent(_ref3) {
-  var headerHeight = _ref3.headerHeight,
+  var _ref3$headerHeight = _ref3.headerHeight,
+    headerHeight = _ref3$headerHeight === void 0 ? 64 : _ref3$headerHeight,
     children = _ref3.children;
   return /*#__PURE__*/React$1.createElement(Root$5, {
     className: classes$s.content
@@ -24658,11 +24656,8 @@ UContent.propTypes = {
   /** Height of the header including MainMenu */
   headerHeight: PropTypes.number
 };
-UContent.defaultProps = {
-  headerHeight: 64
-};
 
-var _excluded$13 = ["spinButton", "loading", "variant", "color"];
+var _excluded$13 = ["spinButton", "loading", "variant", "color", "children"];
 var PREFIX$r = 'UButton';
 var classes$r = {
   root: "".concat(PREFIX$r, "-root"),
@@ -24689,12 +24684,17 @@ var StyledBox$j = styled$1(Box$1)(function (_ref) {
  * Custom advanced button with unicef colors and also it has spinning effect in the button
  *
  * */
-function UButton(props) {
-  var spinButton = props.spinButton,
-    loading = props.loading,
-    variant = props.variant,
-    color = props.color,
-    others = _objectWithoutProperties$2(props, _excluded$13);
+function UButton(_ref3) {
+  var _ref3$spinButton = _ref3.spinButton,
+    spinButton = _ref3$spinButton === void 0 ? false : _ref3$spinButton,
+    _ref3$loading = _ref3.loading,
+    loading = _ref3$loading === void 0 ? false : _ref3$loading,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'contained' : _ref3$variant,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    children = _ref3.children,
+    others = _objectWithoutProperties$2(_ref3, _excluded$13);
   function getVariant(variant) {
     switch (variant) {
       case 'uDefault':
@@ -24715,7 +24715,7 @@ function UButton(props) {
     variant: getVariant(variant),
     color: color,
     disableRipple: true
-  }, others), props.children);
+  }, others), children);
   return !spinButton ? CustomButton : /*#__PURE__*/React$1.createElement(StyledBox$j, {
     className: classes$r.root
   }, /*#__PURE__*/React$1.createElement(Box$1, {
@@ -24741,12 +24741,6 @@ UButton.propTypes = {
   /**  color of the button */
   color: PropTypes.string
 };
-UButton.defaultProps = {
-  color: 'primary',
-  variant: 'contained',
-  spinButton: false,
-  loading: false
-};
 
 function _defineProperty(obj, key, value) {
   key = toPropertyKey(key);
@@ -30647,19 +30641,35 @@ var NumberFormat = /*@__PURE__*/(function (superclass) {
 
 NumberFormat.defaultProps = defaultProps;
 
-var _excluded$Y = ["inputRef", "name", "onChange", "thousandSeparator", "isNumericString", "allowNegative", "decimalScale", "fixedDecimalScale"];
+var _excluded$Y = ["inputRef", "name", "value", "onChange", "onBlur", "thousandSeparator", "isNumericString", "allowNegative", "decimalScale", "fixedDecimalScale"];
 function PositiveNumberFormat(_ref) {
   var inputRef = _ref.inputRef,
     name = _ref.name,
+    value = _ref.value,
     onChange = _ref.onChange,
-    thousandSeparator = _ref.thousandSeparator,
-    isNumericString = _ref.isNumericString,
-    allowNegative = _ref.allowNegative,
-    decimalScale = _ref.decimalScale,
-    fixedDecimalScale = _ref.fixedDecimalScale,
+    _onBlur = _ref.onBlur,
+    _ref$thousandSeparato = _ref.thousandSeparator,
+    thousandSeparator = _ref$thousandSeparato === void 0 ? true : _ref$thousandSeparato,
+    _ref$isNumericString = _ref.isNumericString,
+    isNumericString = _ref$isNumericString === void 0 ? false : _ref$isNumericString,
+    _ref$allowNegative = _ref.allowNegative,
+    allowNegative = _ref$allowNegative === void 0 ? false : _ref$allowNegative,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 0 : _ref$decimalScale,
+    _ref$fixedDecimalScal = _ref.fixedDecimalScale,
+    fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? false : _ref$fixedDecimalScal,
     other = _objectWithoutProperties$2(_ref, _excluded$Y);
   return /*#__PURE__*/React$1.createElement(NumberFormat, _extends$1({}, other, {
+    value: value,
     getInputRef: inputRef,
+    onBlur: function onBlur() {
+      return _onBlur && _onBlur({
+        target: {
+          name: name,
+          value: value
+        }
+      });
+    },
     onValueChange: function onValueChange(values, sourceInfo) {
       onChange({
         target: {
@@ -30677,10 +30687,14 @@ function PositiveNumberFormat(_ref) {
   }));
 }
 PositiveNumberFormat.propTypes = {
+  // field value
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   // Input ref
   inputRef: PropTypes.func.isRequired,
   // On each onChange value will be formatted
   onChange: PropTypes.func.isRequired,
+  // callback function to be called on blur
+  onBlur: PropTypes.func,
   // Thousand separator
   thousandSeparator: PropTypes.bool,
   // Is numeric string
@@ -30692,13 +30706,6 @@ PositiveNumberFormat.propTypes = {
   //If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool
 };
-PositiveNumberFormat.defaultProps = {
-  thousandSeparator: true,
-  isNumericString: false,
-  allowNegative: false,
-  decimalScale: 0,
-  fixedDecimalScale: false
-};
 
 var HelpOutline = {};
 
@@ -30758,12 +30765,16 @@ var StyledBox$i = styled$1(Box$1)(function (_ref) {
 });
 function InputLabelHelp(_ref3) {
   var inputLabel = _ref3.inputLabel,
-    type = _ref3.type,
-    label = _ref3.label,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'tooltip' : _ref3$type,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? 'Help' : _ref3$label,
     link = _ref3.link,
-    icon = _ref3.icon,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? null : _ref3$icon,
     tooltipTitle = _ref3.tooltipTitle,
-    tooltipPlacement = _ref3.tooltipPlacement;
+    _ref3$tooltipPlacemen = _ref3.tooltipPlacement,
+    tooltipPlacement = _ref3$tooltipPlacemen === void 0 ? 'top' : _ref3$tooltipPlacemen;
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("span", null, inputLabel), /*#__PURE__*/React$1.createElement(StyledBox$i, {
     className: classes$n.root
   }, type === 'tooltip' ? /*#__PURE__*/React$1.createElement(Tooltip$1, {
@@ -30807,12 +30818,6 @@ InputLabelHelp.propTypes = {
   // Tooltip placement
   tooltipPlacement: PropTypes.string
 };
-InputLabelHelp.defaultProps = {
-  label: 'Help',
-  type: 'tooltip',
-  icon: null,
-  tooltipPlacement: 'top'
-};
 
 var _excluded$X = ["showLabelHelp", "InputLabelHelpProps", "lineByLineOption", "hideAvatar"];
 var styles$1 = {
@@ -45841,14 +45846,19 @@ var _excluded$C = ["inputFormat", "label", "onChange", "value", "showLabelHelp",
  * Please have look at [Material UI Date Picker](https://mui.com/x/react-date-pickers/date-picker/#main-content) for more details
  */
 function UDatePicker(_ref) {
-  var inputFormat = _ref.inputFormat,
+  var _ref$inputFormat = _ref.inputFormat,
+    inputFormat = _ref$inputFormat === void 0 ? 'dd/MM/yyyy' : _ref$inputFormat,
     label = _ref.label,
     onChange = _ref.onChange,
     value = _ref.value,
     showLabelHelp = _ref.showLabelHelp,
-    InputLabelProps = _ref.InputLabelProps,
+    _ref$InputLabelProps = _ref.InputLabelProps,
+    InputLabelProps = _ref$InputLabelProps === void 0 ? {
+      shrink: true
+    } : _ref$InputLabelProps,
     InputLabelHelpProps = _ref.InputLabelHelpProps,
-    inputVariant = _ref.inputVariant,
+    _ref$inputVariant = _ref.inputVariant,
+    inputVariant = _ref$inputVariant === void 0 ? 'outlined' : _ref$inputVariant,
     others = _objectWithoutProperties$2(_ref, _excluded$C);
   return /*#__PURE__*/React$1.createElement(LocalizationProvider, {
     dateAdapter: AdapterDateFns
@@ -45886,13 +45896,6 @@ UDatePicker.propTypes = {
   /** Props applied to the InputLabel element.*/
   InputLabelProps: PropTypes.object
 };
-UDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true
-  },
-  inputFormat: 'dd/MM/yyyy'
-};
 
 var _excluded$B = ["inputFormat", "label", "onChange", "value", "showLabelHelp", "InputLabelProps", "InputLabelHelpProps", "inputVariant"];
 
@@ -47645,10 +47648,13 @@ var StyledBox$g = styled$1(Box$1, {
 function ActiveFormTextField(props) {
   var typographyVariant = props.typographyVariant,
     className = props.className,
-    variant = props.variant,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'outlined' : _props$variant,
     readOnly = props.readOnly,
-    placeholder = props.placeholder,
-    interactiveMode = props.interactiveMode,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Type something' : _props$placeholder,
+    _props$interactiveMod = props.interactiveMode,
+    interactiveMode = _props$interactiveMod === void 0 ? false : _props$interactiveMod,
     InputLabelProps = props.InputLabelProps,
     InputProps = props.InputProps,
     inputProps = props.inputProps,
@@ -47713,11 +47719,6 @@ ActiveFormTextField.propTypes = {
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes.bool
 };
-ActiveFormTextField.defaultProps = {
-  placeholder: 'Type something',
-  interactiveMode: false,
-  variant: 'outlined'
-};
 
 var _excluded$h = ["select", "typographyVariant", "className", "interactiveMode", "placeholder", "readOnly", "InputLabelProps", "InputProps", "inputProps", "SelectProps"];
 var PREFIX$i = 'ActiveFormSelect';
@@ -47771,8 +47772,10 @@ function ActiveFormSelect(props) {
   props.select;
     var typographyVariant = props.typographyVariant,
     className = props.className,
-    interactiveMode = props.interactiveMode,
-    placeholder = props.placeholder,
+    _props$interactiveMod = props.interactiveMode,
+    interactiveMode = _props$interactiveMod === void 0 ? false : _props$interactiveMod,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Select' : _props$placeholder,
     readOnly = props.readOnly,
     InputLabelProps = props.InputLabelProps,
     InputProps = props.InputProps,
@@ -47860,10 +47863,6 @@ ActiveFormSelect.propTypes = {
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes.bool
 };
-ActiveFormSelect.defaultProps = {
-  placeholder: 'Select',
-  interactiveMode: false
-};
 
 var _excluded$g = ["readOnly", "InputProps"];
 /**
@@ -47914,10 +47913,14 @@ var _excluded$f = ["inputPrefix", "decimalScale", "fixedDecimalScale", "textAlig
  * The UCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc
  */
 function UCurrencyField(_ref) {
-  var inputPrefix = _ref.inputPrefix,
-    decimalScale = _ref.decimalScale,
-    fixedDecimalScale = _ref.fixedDecimalScale,
-    textAlign = _ref.textAlign,
+  var _ref$inputPrefix = _ref.inputPrefix,
+    inputPrefix = _ref$inputPrefix === void 0 ? '$ ' : _ref$inputPrefix,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 2 : _ref$decimalScale,
+    _ref$fixedDecimalScal = _ref.fixedDecimalScale,
+    fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? true : _ref$fixedDecimalScal,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'right' : _ref$textAlign,
     inputProps = _ref.inputProps,
     props = _objectWithoutProperties$2(_ref, _excluded$f);
   return /*#__PURE__*/React$1.createElement(UPositiveInteger, _extends$1({
@@ -47966,12 +47969,6 @@ UCurrencyField.propTypes = {
   // If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool
 };
-UCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right'
-};
 
 var _excluded$e = ["InputProps"];
 
@@ -48033,10 +48030,14 @@ var _excluded$d = ["inputPrefix", "decimalScale", "fixedDecimalScale", "textAlig
  * The ActiveCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc. The cool feature with ActiveCurrencyField is you can read and write at the same place.
  */
 function ActiveCurrencyField(_ref) {
-  var inputPrefix = _ref.inputPrefix,
-    decimalScale = _ref.decimalScale,
-    fixedDecimalScale = _ref.fixedDecimalScale,
-    textAlign = _ref.textAlign,
+  var _ref$inputPrefix = _ref.inputPrefix,
+    inputPrefix = _ref$inputPrefix === void 0 ? '$ ' : _ref$inputPrefix,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 2 : _ref$decimalScale,
+    _ref$fixedDecimalScal = _ref.fixedDecimalScale,
+    fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? true : _ref$fixedDecimalScal,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'right' : _ref$textAlign,
     inputProps = _ref.inputProps,
     props = _objectWithoutProperties$2(_ref, _excluded$d);
   return /*#__PURE__*/React$1.createElement(ActiveFormPositiveInteger, _extends$1({
@@ -48093,12 +48094,6 @@ ActiveCurrencyField.propTypes = {
   /** Input text align */
   textAlign: PropTypes.string
 };
-ActiveCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right'
-};
 
 var DeleteOutlined = {};
 
@@ -48144,18 +48139,27 @@ var CONFIRMATION_VARIANTS = {
  * This button displays the confirmation where user has clicked the button
  * It has two varint icon/menu item
  */
-function UConfirmationButton(props) {
-  var onConfirm = props.onConfirm,
-    id = props.id,
-    buttonText = props.buttonText,
-    enabled = props.enabled,
-    variant = props.variant,
-    icon = props.icon,
-    confirmText = props.confirmText,
-    confirmActionText = props.confirmActionText,
-    cancelText = props.cancelText,
-    buttonVariant = props.buttonVariant,
-    confirmVariant = props.confirmVariant;
+function UConfirmationButton(_ref3) {
+  var onConfirm = _ref3.onConfirm,
+    id = _ref3.id,
+    _ref3$buttonText = _ref3.buttonText,
+    buttonText = _ref3$buttonText === void 0 ? 'Delete' : _ref3$buttonText,
+    _ref3$enabled = _ref3.enabled,
+    enabled = _ref3$enabled === void 0 ? true : _ref3$enabled,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'icon' : _ref3$variant,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? /*#__PURE__*/React$1.createElement(default_1$4, null) : _ref3$icon,
+    _ref3$confirmText = _ref3.confirmText,
+    confirmText = _ref3$confirmText === void 0 ? 'Confirm deletion?' : _ref3$confirmText,
+    _ref3$confirmActionTe = _ref3.confirmActionText,
+    confirmActionText = _ref3$confirmActionTe === void 0 ? 'Yes, delete' : _ref3$confirmActionTe,
+    _ref3$cancelText = _ref3.cancelText,
+    cancelText = _ref3$cancelText === void 0 ? 'No' : _ref3$cancelText,
+    _ref3$buttonVariant = _ref3.buttonVariant,
+    buttonVariant = _ref3$buttonVariant === void 0 ? 'text' : _ref3$buttonVariant,
+    _ref3$confirmVariant = _ref3.confirmVariant,
+    confirmVariant = _ref3$confirmVariant === void 0 ? 'menu' : _ref3$confirmVariant;
   var _useState = React$1.useState(null),
     _useState2 = _slicedToArray$1(_useState, 2),
     deleteAnchorEl = _useState2[0],
@@ -48258,17 +48262,6 @@ UConfirmationButton.propTypes = {
   /** Button variant applied to menuItem button */
   buttonVariant: PropTypes.string
 };
-UConfirmationButton.defaultProps = {
-  buttonText: 'Delete',
-  variant: 'icon',
-  enabled: true,
-  confirmText: 'Confirm deletion?',
-  confirmActionText: 'Yes, delete',
-  cancelText: 'No',
-  icon: /*#__PURE__*/React$1.createElement(default_1$4, null),
-  buttonVariant: 'text',
-  confirmVariant: 'menu'
-};
 
 var PREFIX$g = 'URadioButtons';
 var classes$g = {
@@ -48290,7 +48283,8 @@ function URadioButtons(_ref3) {
   var value = _ref3.value,
     onChange = _ref3.onChange,
     isReadOnly = _ref3.isReadOnly,
-    variant = _ref3.variant,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'row' : _ref3$variant,
     optionLabels = _ref3.optionLabels,
     optionValues = _ref3.optionValues;
   var handleOnChange = function handleOnChange(event) {
@@ -48332,9 +48326,6 @@ URadioButtons.propTypes = {
   /**array of radio button values */
   optionValues: PropTypes.array
 };
-URadioButtons.defaultProps = {
-  variant: 'row'
-};
 
 var HighlightOff = {};
 
@@ -48397,8 +48388,10 @@ function UAsyncBadge(_ref3) {
   var variant = _ref3.variant,
     text = _ref3.text,
     visible = _ref3.visible,
-    ariaRole = _ref3.ariaRole,
-    ariaLive = _ref3.ariaLive,
+    _ref3$ariaRole = _ref3.ariaRole,
+    ariaRole = _ref3$ariaRole === void 0 ? 'alert' : _ref3$ariaRole,
+    _ref3$ariaLive = _ref3.ariaLive,
+    ariaLive = _ref3$ariaLive === void 0 ? 'assertive' : _ref3$ariaLive,
     onReset = _ref3.onReset;
   var chipRef = React$1.useRef();
 
@@ -48449,10 +48442,6 @@ UAsyncBadge.propTypes = {
   /** Aria live of the badge */
   ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off'])
 };
-UAsyncBadge.defaultProps = {
-  ariaRole: 'alert',
-  ariaLive: 'assertive'
-};
 
 var PREFIX$e = 'UPageLoadingProgress';
 var classes$e = {
@@ -48471,8 +48460,9 @@ var StyledBox$c = styled$1(Box$1)(function () {
  * 1. Display circular progress
  * 2. Display text message
  */
-function UPageLoadingProgress(props) {
-  var text = props.text;
+function UPageLoadingProgress(_ref2) {
+  var _ref2$text = _ref2.text,
+    text = _ref2$text === void 0 ? '' : _ref2$text;
   return /*#__PURE__*/React$1.createElement(StyledBox$c, {
     display: "flex",
     justifyContent: "center",
@@ -48487,16 +48477,14 @@ UPageLoadingProgress.propTypes = {
   /** text to display instead of circular progress */
   text: PropTypes.string
 };
-UPageLoadingProgress.defaultProps = {
-  text: ''
-};
 
 /**
  * UErrorAlert is a component to display error message to the user
  */
 function UErrorAlert(_ref) {
   var error = _ref.error,
-    preformatted = _ref.preformatted,
+    _ref$preformatted = _ref.preformatted,
+    preformatted = _ref$preformatted === void 0 ? false : _ref$preformatted,
     _onClose = _ref.onClose;
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, error && /*#__PURE__*/React$1.createElement(Box$1, {
     marginTop: 2,
@@ -48516,9 +48504,6 @@ UErrorAlert.propTypes = {
   /** Triggers close action of error alert */
   onClose: PropTypes.func
 };
-UErrorAlert.defaultProps = {
-  preformatted: false
-};
 
 var PREFIX$d = 'UAutoComplete';
 var classes$d = {
@@ -48551,9 +48536,12 @@ function UAutoComplete(_ref3) {
     readOnly = _ref3.readOnly,
     minLength = _ref3.minLength,
     maxLength = _ref3.maxLength,
-    usedItemIds = _ref3.usedItemIds,
-    allowContextSpecific = _ref3.allowContextSpecific,
-    counter = _ref3.counter,
+    _ref3$usedItemIds = _ref3.usedItemIds,
+    usedItemIds = _ref3$usedItemIds === void 0 ? [] : _ref3$usedItemIds,
+    _ref3$allowContextSpe = _ref3.allowContextSpecific,
+    allowContextSpecific = _ref3$allowContextSpe === void 0 ? false : _ref3$allowContextSpe,
+    _ref3$counter = _ref3.counter,
+    counter = _ref3$counter === void 0 ? false : _ref3$counter,
     placeholder = _ref3.placeholder,
     InputLabelProps = _ref3.InputLabelProps;
     _ref3.props;
@@ -48701,11 +48689,6 @@ UAutoComplete.propTypes = {
   /** Label props applied to input field*/
   InputLabelProps: PropTypes.object
 };
-UAutoComplete.defaultProps = {
-  allowContextSpecific: false,
-  counter: false,
-  usedItemIds: []
-};
 
 var PREFIX$c = 'UBreadcrumbs';
 var classes$c = {
@@ -48845,12 +48828,18 @@ var StyledBox$b = styled$1(Box$1)(function (_ref) {
  * If no image url from source app first letter of the user email will be displayed
  */
 function UAvatarImage(_ref3) {
-  var userEmail = _ref3.userEmail,
-    size = _ref3.size,
-    mode = _ref3.mode,
-    tooltipText = _ref3.tooltipText,
-    count = _ref3.count,
-    zIndexValue = _ref3.zIndexValue,
+  var _ref3$userEmail = _ref3.userEmail,
+    userEmail = _ref3$userEmail === void 0 ? '' : _ref3$userEmail,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'default' : _ref3$size,
+    _ref3$mode = _ref3.mode,
+    mode = _ref3$mode === void 0 ? '' : _ref3$mode,
+    _ref3$tooltipText = _ref3.tooltipText,
+    tooltipText = _ref3$tooltipText === void 0 ? '' : _ref3$tooltipText,
+    _ref3$count = _ref3.count,
+    count = _ref3$count === void 0 ? 0 : _ref3$count,
+    _ref3$zIndexValue = _ref3.zIndexValue,
+    zIndexValue = _ref3$zIndexValue === void 0 ? 0 : _ref3$zIndexValue,
     loadPhoto = _ref3.loadPhoto;
   var _useState = React$1.useState(''),
     _useState2 = _slicedToArray$1(_useState, 2),
@@ -48894,15 +48883,6 @@ UAvatarImage.propTypes = {
   /** get photo url from the respective application */
   loadPhoto: PropTypes.func
 };
-UAvatarImage.defaultProps = {
-  userEmail: '',
-  size: 'default',
-  // image displays default size
-  mode: '',
-  tooltipText: '',
-  count: 0,
-  zIndexValue: 0
-};
 
 var _excluded$c = ["id", "type", "label", "options", "onBlur", "helpText", "isMultiple", "searchUsers", "components"];
 var getOptions = function getOptions(options) {
@@ -48932,8 +48912,10 @@ function UGraphPeoplePicker(_ref) {
     label = _ref.label,
     options = _ref.options,
     onBlur = _ref.onBlur,
-    helpText = _ref.helpText,
-    isMultiple = _ref.isMultiple,
+    _ref$helpText = _ref.helpText,
+    helpText = _ref$helpText === void 0 ? '' : _ref$helpText,
+    _ref$isMultiple = _ref.isMultiple,
+    isMultiple = _ref$isMultiple === void 0 ? true : _ref$isMultiple,
     searchUsers = _ref.searchUsers,
     components = _ref.components,
     props = _objectWithoutProperties$2(_ref, _excluded$c);
@@ -49039,10 +49021,6 @@ UGraphPeoplePicker.propTypes = {
   /** Props applied to the input label help element. E.g.  InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object
 };
-UGraphPeoplePicker.defaultProps = {
-  helpText: '',
-  isMultiple: true
-};
 
 var _excluded$b = ["InputProps", "decimalScale", "inputProps", "coordinateType", "validators"];
 
@@ -49062,7 +49040,8 @@ var _excluded$b = ["InputProps", "decimalScale", "inputProps", "coordinateType",
 
 function ActiveFormCoordinateField(_ref) {
   var InputProps = _ref.InputProps,
-    decimalScale = _ref.decimalScale,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 9 : _ref$decimalScale,
     inputProps = _ref.inputProps,
     coordinateType = _ref.coordinateType,
     validators = _ref.validators,
@@ -49133,9 +49112,6 @@ ActiveFormCoordinateField.propTypes = {
   /** Change to write mode by hiding textfield border and displays border on Hover */
   interactiveMode: PropTypes.bool
 };
-ActiveFormCoordinateField.defaultProps = {
-  decimalScale: 9
-};
 
 var _excluded$a = ["readOnly", "InputProps", "decimalScale", "inputProps", "coordinateType", "validators"];
 
@@ -49152,7 +49128,8 @@ var _excluded$a = ["readOnly", "InputProps", "decimalScale", "inputProps", "coor
 function UCoordinateField(_ref) {
   var readOnly = _ref.readOnly,
     InputProps = _ref.InputProps,
-    decimalScale = _ref.decimalScale,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 9 : _ref$decimalScale,
     inputProps = _ref.inputProps,
     coordinateType = _ref.coordinateType,
     validators = _ref.validators,
@@ -49213,9 +49190,6 @@ UCoordinateField.propTypes = {
   /** Coordinate type */
   coordinateType: PropTypes.oneOf(['latitude', 'longitude']).isRequired
 };
-UCoordinateField.defaultProps = {
-  decimalScale: 9
-};
 
 var Search = {};
 
@@ -49275,10 +49249,12 @@ var StyledInputAdornment = styled$1(InputAdornment$1)(function (_ref) {
 function USearchBox(_ref3) {
   var value = _ref3.value,
     onSearch = _ref3.onSearch,
-    placeholder = _ref3.placeholder;
+    _ref3$placeholder = _ref3.placeholder,
+    placeholder = _ref3$placeholder === void 0 ? 'Search' : _ref3$placeholder;
     _ref3.inputProps;
     var className = _ref3.className,
-    showSeparator = _ref3.showSeparator,
+    _ref3$showSeparator = _ref3.showSeparator,
+    showSeparator = _ref3$showSeparator === void 0 ? true : _ref3$showSeparator,
     iconLabel = _ref3.iconLabel,
     rest = _objectWithoutProperties$2(_ref3, _excluded$9);
   var _useState = React$1.useState(value),
@@ -49357,10 +49333,6 @@ USearchBox.propTypes = {
   /** Label next to the search icon */
   iconLabel: PropTypes.string
 };
-USearchBox.defaultProps = {
-  placeholder: 'Search',
-  showSeparator: true
-};
 
 var _excluded$8 = ["inputFormat", "label", "onChange", "value", "showLabelHelp", "InputLabelProps", "InputLabelHelpProps", "inputVariant", "interactiveMode", "readOnly"];
 var PREFIX$9 = 'ActiveDatePicker';
@@ -49391,14 +49363,19 @@ var StyledBox$a = styled$1(Box$1, {
  * Please have look at [Material UI Date Picker](https://mui.com/x/api/date-pickers/date-picker/) for more details
  */
 function ActiveDatePicker(_ref5) {
-  var inputFormat = _ref5.inputFormat,
+  var _ref5$inputFormat = _ref5.inputFormat,
+    inputFormat = _ref5$inputFormat === void 0 ? 'dd/MM/yyyy' : _ref5$inputFormat,
     label = _ref5.label,
     onChange = _ref5.onChange,
     value = _ref5.value,
     showLabelHelp = _ref5.showLabelHelp,
-    InputLabelProps = _ref5.InputLabelProps,
+    _ref5$InputLabelProps = _ref5.InputLabelProps,
+    InputLabelProps = _ref5$InputLabelProps === void 0 ? {
+      shrink: true
+    } : _ref5$InputLabelProps,
     InputLabelHelpProps = _ref5.InputLabelHelpProps,
-    inputVariant = _ref5.inputVariant,
+    _ref5$inputVariant = _ref5.inputVariant,
+    inputVariant = _ref5$inputVariant === void 0 ? 'outlined' : _ref5$inputVariant,
     interactiveMode = _ref5.interactiveMode,
     readOnly = _ref5.readOnly,
     others = _objectWithoutProperties$2(_ref5, _excluded$8);
@@ -49448,13 +49425,6 @@ ActiveDatePicker.propTypes = {
   /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object
 };
-ActiveDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true
-  },
-  inputFormat: 'dd/MM/yyyy'
-};
 
 var _excluded$7 = ["inputFormat", "label", "onChange", "value", "showLabelHelp", "InputLabelProps", "InputLabelHelpProps", "inputVariant", "interactiveMode", "readOnly"];
 var PREFIX$8 = 'ActiveTimePicker';
@@ -49485,14 +49455,19 @@ var StyledBox$9 = styled$1(Box$1, {
  * Please have look at [Material UI Time Picker](https://mui.com/x/api/date-pickers/time-picker/) for more details
  */
 function ActiveTimePicker(_ref5) {
-  var inputFormat = _ref5.inputFormat,
+  var _ref5$inputFormat = _ref5.inputFormat,
+    inputFormat = _ref5$inputFormat === void 0 ? 'hh:mm a' : _ref5$inputFormat,
     label = _ref5.label,
     onChange = _ref5.onChange,
     value = _ref5.value,
     showLabelHelp = _ref5.showLabelHelp,
-    InputLabelProps = _ref5.InputLabelProps,
+    _ref5$InputLabelProps = _ref5.InputLabelProps,
+    InputLabelProps = _ref5$InputLabelProps === void 0 ? {
+      shrink: true
+    } : _ref5$InputLabelProps,
     InputLabelHelpProps = _ref5.InputLabelHelpProps,
-    inputVariant = _ref5.inputVariant,
+    _ref5$inputVariant = _ref5.inputVariant,
+    inputVariant = _ref5$inputVariant === void 0 ? 'outlined' : _ref5$inputVariant,
     interactiveMode = _ref5.interactiveMode,
     readOnly = _ref5.readOnly,
     others = _objectWithoutProperties$2(_ref5, _excluded$7);
@@ -49542,13 +49517,6 @@ ActiveTimePicker.propTypes = {
   /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object
 };
-ActiveTimePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true
-  },
-  inputFormat: 'hh:mm a'
-};
 
 var _excluded$6 = ["inputFormat", "label", "onChange", "value", "showLabelHelp", "InputLabelProps", "InputLabelHelpProps", "inputVariant", "interactiveMode", "readOnly"];
 var PREFIX$7 = 'ActiveDateTimePicker';
@@ -50252,10 +50220,14 @@ function ActiveAutoComplete(_ref3) {
     readOnly = _ref3.readOnly,
     minLength = _ref3.minLength,
     maxLength = _ref3.maxLength,
-    usedItemIds = _ref3.usedItemIds,
-    allowContextSpecific = _ref3.allowContextSpecific,
-    interactiveMode = _ref3.interactiveMode,
-    counter = _ref3.counter,
+    _ref3$usedItemIds = _ref3.usedItemIds,
+    usedItemIds = _ref3$usedItemIds === void 0 ? [] : _ref3$usedItemIds,
+    _ref3$allowContextSpe = _ref3.allowContextSpecific,
+    allowContextSpecific = _ref3$allowContextSpe === void 0 ? false : _ref3$allowContextSpe,
+    _ref3$interactiveMode = _ref3.interactiveMode,
+    interactiveMode = _ref3$interactiveMode === void 0 ? false : _ref3$interactiveMode,
+    _ref3$counter = _ref3.counter,
+    counter = _ref3$counter === void 0 ? false : _ref3$counter,
     placeholder = _ref3.placeholder,
     InputLabelProps = _ref3.InputLabelProps;
     _ref3.props;
@@ -50410,12 +50382,6 @@ ActiveAutoComplete.propTypes = {
   /** Label props applied to input field*/
   InputLabelProps: PropTypes.object
 };
-ActiveAutoComplete.defaultProps = {
-  allowContextSpecific: false,
-  interactiveMode: false,
-  counter: false,
-  usedItemIds: []
-};
 
 var StyledBox$1 = styled$1(Box$1)(function () {
   return {
@@ -50436,9 +50402,12 @@ var StyledBox$1 = styled$1(Box$1)(function () {
  */
 function UAriaLive(_ref) {
   var text = _ref.text,
-    type = _ref.type,
-    role = _ref.role,
-    ariaAtomic = _ref.ariaAtomic;
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'polite' : _ref$type,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'log' : _ref$role,
+    _ref$ariaAtomic = _ref.ariaAtomic,
+    ariaAtomic = _ref$ariaAtomic === void 0 ? false : _ref$ariaAtomic;
   return /*#__PURE__*/React$1.createElement(StyledBox$1, {
     "aria-live": type,
     "aria-atomic": ariaAtomic,
@@ -50456,11 +50425,6 @@ UAriaLive.propTypes = {
   /** Aria role */
   role: PropTypes.string
 };
-UAriaLive.defaultProps = {
-  type: 'polite',
-  role: 'log',
-  ariaAtomic: false
-};
 
 var StyledBox = styled$1(Box$1)(function () {
   return {