aefis-core-ui 2.3.0-rc17 → 2.3.0-rc19

package/dist/index.modern.js

@@ -55,7 +55,7 @@ import IconButton$2 from '@mui/material/IconButton';
 import Edit$1 from '@mui/icons-material/Edit';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
-import Moment from 'react-moment';
+import require$$0 from 'moment';
 import AddIcon from '@mui/icons-material/Add';
 import { useInView } from 'react-intersection-observer';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -1303,20 +1303,13 @@ AvatarBox.propTypes = {
   hasShadow: PropTypes.bool
 };
 
-// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$G = makeStyles$1(theme => ({
   formattedContainer: {
-    display: "flex",
-    alignItems: "center",
-    padding: theme.spacing(2),
-    boxSizing: "border-box",
-    width: "100%"
+    display: "flex"
   },
   container: {
     display: "flex",
-    alignItems: "center",
-    boxSizing: "border-box",
-    width: "100%"
+    boxSizing: "border-box"
   },
   avatar: {
     flex: "0 0 auto",
@@ -1324,10 +1317,7 @@ const useStyles$G = makeStyles$1(theme => ({
   },
   title: {
     color: "rgb(0, 0, 0)",
-    fontWeight: 500,
-    font: "inherit",
-    lineHeight: 1.43,
-    letterSpacing: "0.01071em"
+    fontWeight: 500
   },
   subtitle: {
     letterSpacing: "0.01em",
@@ -1361,176 +1351,169 @@ const icon = {
 
 /** Component to display a title, subtitle, and caption along with an icon avatar. */
 
-const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle(props) {
+const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle({
+  type = "default",
+  avatar,
+  avatarVariant = "round",
+  title,
+  titleComponent = "div",
+  subtitle,
+  caption,
+  avatarColor,
+  formatContent = true,
+  size = "medium",
+  titleCase = "default",
+  subtitleCase = "default",
+  contentAlignment = "center",
+  avatarShadow = false,
+  emphasizeSubtitle = false
+}) {
   const classes = useStyles$G();
   const avatarStyle = {
     info: {
       backgroundColor: info.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     success: {
       backgroundColor: success.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     error: {
       backgroundColor: danger.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     warning: {
       backgroundColor: warning.default,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     },
     custom: {
-      backgroundColor: props.avatarColor,
-      boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
-      borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
+      backgroundColor: avatarColor,
+      boxShadow: avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
+      borderRadius: avatarVariant === "square" ? "6px" : "50%"
     }
   };
+  const defaultTitleStyle = {
+    color: emphasizeSubtitle ? "rgba(58,53,65,0.6)" : "#000000",
+    textTransform: titleCase === "default" ? "none" : titleCase === "upper" ? "uppercase" : "lowercase"
+  };
+  const defaultSubtitleStyle = {
+    fontWeight: emphasizeSubtitle ? "bolder" : "normal",
+    textTransform: subtitleCase === "default" ? "none" : subtitleCase === "upper" ? "uppercase" : "lowercase"
+  };
+  const defaultCaptionStyle = {
+    textTransform: subtitleCase === "default" ? "none" : subtitleCase === "upper" ? "uppercase" : "lowercase"
+  };
   const titleStyle = {
-    xsmall: {
-      fontSize: "0.875rem"
-    },
-    small: {
-      fontSize: "1rem"
-    },
-    medium: {
+    xsmall: _extends({
+      fontSize: emphasizeSubtitle ? "0.675rem" : "0.7775rem",
+      lineHeight: 0.9,
+      letterSpacing: "0.5px"
+    }, defaultTitleStyle),
+    small: _extends({
+      fontSize: "0.975rem"
+    }, defaultTitleStyle),
+    medium: _extends({
       fontSize: "1.1rem"
-    },
-    large: {
+    }, defaultTitleStyle),
+    large: _extends({
       fontSize: "1.2rem"
-    }
+    }, defaultTitleStyle)
   };
   const subtitleStyle = {
-    xsmall: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    small: {
-      fontSize: "0.775rem",
-      fontWeight: "bolder",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    medium: {
-      fontSize: "0.875rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    large: {
-      fontSize: "0.875rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    }
+    xsmall: _extends({
+      fontSize: emphasizeSubtitle ? "0.875rem" : "0.775rem",
+      lineHeight: 0.975,
+      marginTop: "2px",
+      letterSpacing: "0.15px"
+    }, defaultSubtitleStyle),
+    small: _extends({
+      fontSize: "0.775rem"
+    }, defaultSubtitleStyle),
+    medium: _extends({
+      fontSize: "0.875rem"
+    }, defaultSubtitleStyle),
+    large: _extends({
+      fontSize: "0.875rem"
+    }, defaultSubtitleStyle)
   };
   const captionStyle = {
-    xsmall: {
-      fontSize: "0.675rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    small: {
+    xsmall: _extends({
+      fontSize: "0.675rem"
+    }, defaultCaptionStyle),
+    small: _extends({
       fontSize: "0.675rem",
-      fontWeight: "bolder",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    medium: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    },
-    large: {
-      fontSize: "0.775rem",
-      textTransform: props.subtitleCase === "default" ? "none" : props.subtitleCase === "upper" ? "uppercase" : "lowercase"
-    }
+      fontWeight: "bolder"
+    }, defaultCaptionStyle),
+    medium: _extends({
+      fontSize: "0.775rem"
+    }, defaultCaptionStyle),
+    large: _extends({
+      fontSize: "0.775rem"
+    }, defaultCaptionStyle)
   };
   const avatarContainerStyle = {
     display: "flex",
-    alignItems: props.contentAlignment === "top" ? "flex-start" : "center",
-    width: "100%"
+    alignItems: contentAlignment === "top" ? "flex-start" : "center"
   };
-  const avatarIcon = props.type === "custom" ? props.avatar : icon[props.type];
-  return /*#__PURE__*/jsx(Box$1, {
-    className: props.formatContent ? classes.formattedContainer : classes.container,
-    children: /*#__PURE__*/jsx(Box$1, {
+  const avatarIcon = type === "custom" ? avatar : icon[type];
+  return /*#__PURE__*/jsxs(Box$1, {
+    className: formatContent ? classes.formattedContainer : classes.container,
+    children: [/*#__PURE__*/jsxs(Box$1, {
+      sx: avatarContainerStyle,
+      children: [size === "xsmall" && /*#__PURE__*/jsx(XSmallAvatar, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "small" && /*#__PURE__*/jsx(SmallAvatar, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "medium" && /*#__PURE__*/jsx(Avatar$1, {
+        className: classes.avatar,
+        style: avatarStyle[type],
+        variant: avatarVariant,
+        children: avatarIcon
+      }), size === "large" && /*#__PURE__*/jsx(LargeAvatar, {
+        variant: avatarVariant,
+        className: classes.avatar,
+        style: avatarStyle[type],
+        children: avatarIcon
+      })]
+    }), /*#__PURE__*/jsxs(Box$1, {
       sx: {
-        boxSizing: "border-box",
-        width: "100%"
+        display: "flex",
+        flexDirection: "column"
       },
-      children: /*#__PURE__*/jsxs(Box$1, {
-        sx: avatarContainerStyle,
-        children: [/*#__PURE__*/jsxs(Box$1, {
-          children: [props.size === "xsmall" && /*#__PURE__*/jsx(XSmallAvatar, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "small" && /*#__PURE__*/jsx(SmallAvatar, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "medium" && /*#__PURE__*/jsx(Avatar$1, {
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            variant: props.avatarVariant,
-            children: avatarIcon
-          }), props.size === "large" && /*#__PURE__*/jsx(LargeAvatar, {
-            variant: props.avatarVariant,
-            className: classes.avatar,
-            style: avatarStyle[props.type],
-            children: avatarIcon
-          })]
-        }), /*#__PURE__*/jsx(Box$1, {
-          sx: {
-            display: "flex",
-            alignItems: "center"
-          },
-          children: /*#__PURE__*/jsxs(Box$1, {
-            sx: {
-              display: "block"
-            },
-            children: [/*#__PURE__*/jsx(Box$1, {
-              children: typeof props.title === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "h6",
-                component: props.titleComponent,
-                style: titleStyle[props.size],
-                className: classes.title,
-                children: props.title
-              }) : props.title
-            }), props.subtitle && /*#__PURE__*/jsx(Box$1, {
-              children: typeof props.subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "body1",
-                component: "div",
-                style: subtitleStyle[props.size],
-                color: "textSecondary",
-                className: classes.subtitle,
-                children: props.subtitle
-              }) : props.subtitle
-            }), props.caption && /*#__PURE__*/jsx(Box$1, {
-              children: typeof props.subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
-                variant: "body1",
-                component: "div",
-                style: captionStyle[props.size],
-                color: "textSecondary",
-                className: classes.subtitle,
-                children: props.caption
-              }) : props.caption
-            })]
-          })
-        })]
-      })
-    })
+      children: [typeof title === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "h6",
+        component: titleComponent,
+        style: titleStyle[size],
+        className: classes.title,
+        children: title
+      }) : title, subtitle && typeof subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "body1",
+        component: "div",
+        style: subtitleStyle[size],
+        color: "textSecondary",
+        className: classes.subtitle,
+        children: subtitle
+      }) : subtitle, caption && typeof subtitle === "string" ? /*#__PURE__*/jsx(Typography, {
+        variant: "body1",
+        component: "div",
+        style: captionStyle[size],
+        color: "textSecondary",
+        className: classes.subtitle,
+        children: caption
+      }) : caption]
+    })]
   });
 });
-AvatarTitle.defaultProps = {
-  formatContent: true,
-  size: "medium",
-  type: "default",
-  titleComponent: "div",
-  subtitleCase: "default",
-  contentAlignment: "center",
-  avatarVariant: "round",
-  avatarShadow: false
-};
 AvatarTitle.propTypes = {
   /** The type of avatar title.  This will determine how the avatar color and icon is set.  If "custom" is given, you can provide your own icon and color. */
   type: PropTypes.oneOf(["info", "success", "warning", "error", "custom"]),
@@ -1553,11 +1536,15 @@ AvatarTitle.propTypes = {
   /** The size of the avatar title */
   size: PropTypes.oneOf(["xsmall", "small", "medium", "large"]),
   /** The case used to display the subtitle and caption. */
+  titleCase: PropTypes.oneOf(["default", "lower", "upper"]),
+  /** The case used to display the subtitle and caption. */
   subtitleCase: PropTypes.oneOf(["default", "lower", "upper"]),
   /** How to align the content. */
   contentAlignment: PropTypes.oneOf(["center", "top"]),
   /** Display a slight shadow around the avatar? */
-  avatarShadow: PropTypes.bool
+  avatarShadow: PropTypes.bool,
+  /** Emphasize value */
+  emphasizeSubtitle: PropTypes.bool
 };
 
 const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
@@ -1732,7 +1719,7 @@ Button.defaultProps = {
   variant: "text",
   disableElevation: true
 };
-Button.propTypes = {
+Button.propTypes = _extends({
   /** A descriptive name of the button.  Used by screen readers to explain the intent of the button.  If not provided, the button content is used. */
   name: PropTypes.string,
   /** Remove the elevation from the button. */
@@ -1745,7 +1732,7 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   /** The content of the button */
   children: PropTypes.any
-};
+}, Button$1.propTypes);
 
 const AnimatedExpandMoreIcon = ({
   isOpen,
@@ -1836,15 +1823,18 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
     "aria-haspopup": true,
     "aria-expanded": Boolean(anchorEl)
   };
-  const buttonProps = {
+  const buttonProps = _extends({
     id: buttonId,
-    color: displayType === "default" ? color : undefined,
-    name: name,
-    startIcon: icon && displayType === "default" ? /*#__PURE__*/jsx(Icon$1, {
+    name: name
+  }, displayType === "default" && {
+    color
+  }, icon && displayType === "default" && {
+    startIcon: /*#__PURE__*/jsx(Icon$1, {
       name: props.icon
-    }) : undefined,
-    variant: displayType === "default" ? variant : undefined
-  };
+    })
+  }, displayType === "default" && {
+    variant
+  });
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [displayType === "icon" ? /*#__PURE__*/jsx(IconButton, _extends({}, buttonProps, a11yprops, {
       onClick: e => handleClick(e, link, buttonId),
@@ -1917,7 +1907,7 @@ MenuButton.propTypes = {
     name: PropTypes.string,
     icon: PropTypes.any,
     divider: PropTypes.any,
-    onClick: PropTypes.function
+    onClick: PropTypes.func
   })),
   /** The function to execute when the button is clicked. */
   onClick: PropTypes.func
@@ -10139,6 +10129,33 @@ Drawer.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "div"])
 };
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+var dist = createCommonjsModule(function (module, exports) {
+!function(e,t){module.exports=t(require$$0,React);}(commonjsGlobal,(function(e,t){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r});},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([function(e,t,n){e.exports=n(3)();},function(t,n){t.exports=e;},function(e,n){e.exports=t;},function(e,t,n){var r=n(4);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n};},function(e,t,n){e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";},function(e,t,n){var r,o,i,a,l;
+/*! Moment Duration Format v2.2.2
+ *  https://github.com/jsmreese/moment-duration-format
+ *  Date: 2018-02-16
+ *
+ *  Duration format plugin function for the Moment.js library
+ *  http://momentjs.com/
+ *
+ *  Copyright 2018 John Madhavan-Reese
+ *  Released under the MIT license
+ */a=this,l=function(e){var t=!1,n=!1,r=!1,o=!1,i="escape years months weeks days hours minutes seconds milliseconds general".split(" "),a=[{type:"seconds",targets:[{type:"minutes",value:60},{type:"hours",value:3600},{type:"days",value:86400},{type:"weeks",value:604800},{type:"months",value:2678400},{type:"years",value:31536e3}]},{type:"minutes",targets:[{type:"hours",value:60},{type:"days",value:1440},{type:"weeks",value:10080},{type:"months",value:44640},{type:"years",value:525600}]},{type:"hours",targets:[{type:"days",value:24},{type:"weeks",value:168},{type:"months",value:744},{type:"years",value:8760}]},{type:"days",targets:[{type:"weeks",value:7},{type:"months",value:31},{type:"years",value:365}]},{type:"months",targets:[{type:"years",value:12}]}];function l(e,t){return !(t.length>e.length)&&-1!==e.indexOf(t)}function u(e){for(var t="";e;)t+="0",e-=1;return t}function s(e,t){var n=e+"+"+v(V(t).sort(),(function(e){return e+":"+t[e]})).join(",");return s.cache[n]||(s.cache[n]=Intl.NumberFormat(e,t)),s.cache[n]}function c(e,t,i){var a,l,f,m=t.useToLocaleString,p=t.useGrouping,g=p&&t.grouping.slice(),y=t.maximumSignificantDigits,h=t.minimumIntegerDigits||1,d=t.fractionDigits||0,v=t.groupingSeparator,b=t.decimalSeparator;if(m&&i){var w,S={minimumIntegerDigits:h,useGrouping:p};return d&&(S.maximumFractionDigits=d,S.minimumFractionDigits=d),y&&e>0&&(S.maximumSignificantDigits=y),r?(o||((w=x({},t)).useGrouping=!1,w.decimalSeparator=".",e=parseFloat(c(e,w),10)),s(i,S).format(e)):(n||((w=x({},t)).useGrouping=!1,w.decimalSeparator=".",e=parseFloat(c(e,w),10)),e.toLocaleString(i,S))}var T=(y?e.toPrecision(y+1):e.toFixed(d+1)).split("e");f=T[1]||"",l=(T=T[0].split("."))[1]||"";var O=(a=T[0]||"").length,_=l.length,V=O+_,D=a+l;(y&&V===y+1||!y&&_===d+1)&&((D=function(e){for(var t=e.split("").reverse(),n=0,r=!0;r&&n<t.length;)n?"9"===t[n]?t[n]="0":(t[n]=(parseInt(t[n],10)+1).toString(),r=!1):(parseInt(t[n],10)<5&&(r=!1),t[n]="0"),n+=1;return r&&t.push("1"),t.reverse().join("")}(D)).length===V+1&&(O+=1),_&&(D=D.slice(0,-1)),a=D.slice(0,O),l=D.slice(O)),y&&(l=l.replace(/0*$/,""));var j=parseInt(f,10);j>0?l.length<=j?(a+=l+=u(j-l.length),l=""):(a+=l.slice(0,j),l=l.slice(j)):j<0&&(l=u(Math.abs(j)-a.length)+a+l,a="0"),y||((l=l.slice(0,d)).length<d&&(l+=u(d-l.length)),a.length<h&&(a=u(h-a.length)+a));var M,P="";if(p)for(T=a;T.length;)g.length&&(M=g.shift()),P&&(P=v+P),P=T.slice(-M)+P,T=T.slice(0,-M);else P=a;return l&&(P=P+b+l),P}function f(e,t){return e.label.length>t.label.length?-1:e.label.length<t.label.length?1:0}function m(e,t){var n=[];return d(V(t),(function(r){if("_durationLabels"===r.slice(0,15)){var o=r.slice(15).toLowerCase();d(V(t[r]),(function(i){i.slice(0,1)===e&&n.push({type:o,key:i,label:t[r][i]});}));}})),n}s.cache={};var p={durationLabelsStandard:{S:"millisecond",SS:"milliseconds",s:"second",ss:"seconds",m:"minute",mm:"minutes",h:"hour",hh:"hours",d:"day",dd:"days",w:"week",ww:"weeks",M:"month",MM:"months",y:"year",yy:"years"},durationLabelsShort:{S:"msec",SS:"msecs",s:"sec",ss:"secs",m:"min",mm:"mins",h:"hr",hh:"hrs",d:"dy",dd:"dys",w:"wk",ww:"wks",M:"mo",MM:"mos",y:"yr",yy:"yrs"},durationTimeTemplates:{HMS:"h:mm:ss",HM:"h:mm",MS:"m:ss"},durationLabelTypes:[{type:"standard",string:"__"},{type:"short",string:"_"}],durationPluralKey:function(e,t,n){return 1===t&&null===n?e:e+e}};function g(e){return "[object Array]"===Object.prototype.toString.call(e)}function y(e){return "[object Object]"===Object.prototype.toString.call(e)}function h(e,t){var n,r=0,o=e&&e.length||0;for("function"!=typeof t&&(n=t,t=function(e){return e===n});r<o;){if(t(e[r]))return e[r];r+=1;}}function d(e,t){var n=0,r=e.length;if(e&&r)for(;n<r;){if(!1===t(e[n],n))return;n+=1;}}function v(e,t){var n=0,r=e.length,o=[];if(!e||!r)return o;for(;n<r;)o[n]=t(e[n],n),n+=1;return o}function b(e,t){return v(e,(function(e){return e[t]}))}function w(e){var t=[];return d(e,(function(e){e&&t.push(e);})),t}function S(e){var t=[];return d(e,(function(e){h(t,e)||t.push(e);})),t}function T(e,t){var n=[];return d(e,(function(e){d(t,(function(t){e===t&&n.push(e);}));})),S(n)}function O(e,t){var n=[];return d(e,(function(r,o){if(!t(r))return n=e.slice(o),!1})),n}function _(e,t){return O(e.slice().reverse(),t).reverse()}function x(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);return e}function V(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n);return t}function D(e,t){var n=0,r=e.length;if(!e||!r)return !1;for(;n<r;){if(!0===t(e[n],n))return !0;n+=1;}return !1}function j(e){var t=[];return d(e,(function(e){t=t.concat(e);})),t}function M(e){return "3.6"===e(3.55,"en",{useGrouping:!1,minimumIntegerDigits:1,minimumFractionDigits:1,maximumFractionDigits:1})}function P(e){var t=!0;return !!((t=(t=(t=t&&"1"===e(1,"en",{minimumIntegerDigits:1}))&&"01"===e(1,"en",{minimumIntegerDigits:2}))&&"001"===e(1,"en",{minimumIntegerDigits:3}))&&(t=(t=(t=(t=t&&"100"===e(99.99,"en",{maximumFractionDigits:0,minimumFractionDigits:0}))&&"100.0"===e(99.99,"en",{maximumFractionDigits:1,minimumFractionDigits:1}))&&"99.99"===e(99.99,"en",{maximumFractionDigits:2,minimumFractionDigits:2}))&&"99.990"===e(99.99,"en",{maximumFractionDigits:3,minimumFractionDigits:3}))&&(t=(t=(t=(t=(t=t&&"100"===e(99.99,"en",{maximumSignificantDigits:1}))&&"100"===e(99.99,"en",{maximumSignificantDigits:2}))&&"100"===e(99.99,"en",{maximumSignificantDigits:3}))&&"99.99"===e(99.99,"en",{maximumSignificantDigits:4}))&&"99.99"===e(99.99,"en",{maximumSignificantDigits:5}))&&(t=(t=t&&"1,000"===e(1e3,"en",{useGrouping:!0}))&&"1000"===e(1e3,"en",{useGrouping:!1})))}function k(){var e,t=[].slice.call(arguments),n={};if(d(t,(function(t,r){if(!r){if(!g(t))throw "Expected array as the first argument to durationsFormat.";e=t;}"string"!=typeof t&&"function"!=typeof t?"number"!=typeof t?y(t)&&x(n,t):n.precision=t:n.template=t;})),!e||!e.length)return [];n.returnMomentTypes=!0;var r=v(e,(function(e){return e.format(n)})),o=T(i,S(b(j(r),"type"))),a=n.largest;return a&&(o=o.slice(0,a)),n.returnMomentTypes=!1,n.outputTypes=o,v(e,(function(e){return e.format(n)}))}function E(){var n=[].slice.call(arguments),o=x({},this.format.defaults),u=this.asMilliseconds(),s=this.asMonths();"function"==typeof this.isValid&&!1===this.isValid()&&(u=0,s=0);var j=u<0,M=e.duration(Math.abs(u),"milliseconds"),P=e.duration(Math.abs(s),"months");d(n,(function(e){"string"!=typeof e&&"function"!=typeof e?"number"!=typeof e?y(e)&&x(o,e):o.precision=e:o.template=e;}));var k={years:"y",months:"M",weeks:"w",days:"d",hours:"h",minutes:"m",seconds:"s",milliseconds:"S"},E={escape:/\[(.+?)\]/,years:/\*?[Yy]+/,months:/\*?M+/,weeks:/\*?[Ww]+/,days:/\*?[Dd]+/,hours:/\*?[Hh]+/,minutes:/\*?m+/,seconds:/\*?s+/,milliseconds:/\*?S+/,general:/.+?/};o.types=i;var L=function(e){return h(i,(function(t){return E[t].test(e)}))},F=new RegExp(v(i,(function(e){return E[e].source})).join("|"),"g");o.duration=this;var I="function"==typeof o.template?o.template.apply(o):o.template,N=o.outputTypes,C=o.returnMomentTypes,R=o.largest,G=[];N||(g(o.stopTrim)&&(o.stopTrim=o.stopTrim.join("")),o.stopTrim&&d(o.stopTrim.match(F),(function(e){var t=L(e);"escape"!==t&&"general"!==t&&G.push(t);})));var U=e.localeData();U||(U={}),d(V(p),(function(e){"function"!=typeof p[e]?U["_"+e]||(U["_"+e]=p[e]):U[e]||(U[e]=p[e]);})),d(V(U._durationTimeTemplates),(function(e){I=I.replace("_"+e+"_",U._durationTimeTemplates[e]);}));var q=o.userLocale||e.locale(),z=o.useLeftUnits,H=o.usePlural,W=o.precision,$=o.forceLength,A=o.useGrouping,B=o.trunc,K=o.useSignificantDigits&&W>0,Y=K?o.precision:0,J=Y,Q=o.minValue,X=!1,Z=o.maxValue,ee=!1,te=o.useToLocaleString,ne=o.groupingSeparator,re=o.decimalSeparator,oe=o.grouping;te=te&&(t||r);var ie=o.trim;g(ie)&&(ie=ie.join(" ")),null===ie&&(R||Z||K)&&(ie="all"),null!==ie&&!0!==ie&&"left"!==ie&&"right"!==ie||(ie="large"),!1===ie&&(ie="");var ae=function(e){return e.test(ie)},le=/large/,ue=/small/,se=/both/,ce=/mid/,fe=/^all|[^sm]all/,me=/final/,pe=R>0||D([le,se,fe],ae),ge=D([ue,se,fe],ae),ye=D([ce,fe],ae),he=D([me,fe],ae),de=v(I.match(F),(function(e,t){var n=L(e);return "*"===e.slice(0,1)&&(e=e.slice(1),"escape"!==n&&"general"!==n&&G.push(n)),{index:t,length:e.length,text:"",token:"escape"===n?e.replace(E.escape,"$1"):e,type:"escape"===n||"general"===n?null:n}})),ve={index:0,length:0,token:"",text:"",type:null},be=[];z&&de.reverse(),d(de,(function(e){if(e.type)return (ve.type||ve.text)&&be.push(ve),void(ve=e);z?ve.text=e.token+ve.text:ve.text+=e.token;})),(ve.type||ve.text)&&be.push(ve),z&&be.reverse();var we=T(i,S(w(b(be,"type"))));if(!we.length)return b(be,"text").join("");we=v(we,(function(e,t){var n,r=t+1===we.length,i=!t;n="years"===e||"months"===e?P.as(e):M.as(e);var a=Math.floor(n),l=n-a,u=h(be,(function(t){return e===t.type}));return i&&Z&&n>Z&&(ee=!0),r&&Q&&Math.abs(o.duration.as(e))<Q&&(X=!0),i&&null===$&&u.length>1&&($=!0),M.subtract(a,e),P.subtract(a,e),{rawValue:n,wholeValue:a,decimalValue:r?l:0,isSmallest:r,isLargest:i,type:e,tokenLength:u.length}}));var Se=B?Math.floor:Math.round,Te=function(e,t){var n=Math.pow(10,t);return Se(e*n)/n},Oe=!1,_e=!1,xe=function(e,t){var n={useGrouping:A,groupingSeparator:ne,decimalSeparator:re,grouping:oe,useToLocaleString:te};return K&&(Y<=0?(e.rawValue=0,e.wholeValue=0,e.decimalValue=0):(n.maximumSignificantDigits=Y,e.significantDigits=Y)),ee&&!_e&&(e.isLargest?(e.wholeValue=Z,e.decimalValue=0):(e.wholeValue=0,e.decimalValue=0)),X&&!_e&&(e.isSmallest?(e.wholeValue=Q,e.decimalValue=0):(e.wholeValue=0,e.decimalValue=0)),e.isSmallest||e.significantDigits&&e.significantDigits-e.wholeValue.toString().length<=0?W<0?e.value=Te(e.wholeValue,W):0===W?e.value=Se(e.wholeValue+e.decimalValue):K?(e.value=B?Te(e.rawValue,Y-e.wholeValue.toString().length):e.rawValue,e.wholeValue&&(Y-=e.wholeValue.toString().length)):(n.fractionDigits=W,e.value=B?e.wholeValue+Te(e.decimalValue,W):e.wholeValue+e.decimalValue):K&&e.wholeValue?(e.value=Math.round(Te(e.wholeValue,e.significantDigits-e.wholeValue.toString().length)),Y-=e.wholeValue.toString().length):e.value=e.wholeValue,e.tokenLength>1&&($||Oe)&&(n.minimumIntegerDigits=e.tokenLength,_e&&n.maximumSignificantDigits<e.tokenLength&&delete n.maximumSignificantDigits),!Oe&&(e.value>0||""===ie||h(G,e.type)||h(N,e.type))&&(Oe=!0),e.formattedValue=c(e.value,n,q),n.useGrouping=!1,n.decimalSeparator=".",e.formattedValueEn=c(e.value,n,"en"),2===e.tokenLength&&"milliseconds"===e.type&&(e.formattedValueMS=c(e.value,{minimumIntegerDigits:3,useGrouping:!1},"en").slice(0,2)),e};if((we=w(we=v(we,xe))).length>1){var Ve=function(e){return h(we,(function(t){return t.type===e}))},De=function(e){var t=Ve(e.type);t&&d(e.targets,(function(e){var n=Ve(e.type);n&&parseInt(t.formattedValueEn,10)===e.value&&(t.rawValue=0,t.wholeValue=0,t.decimalValue=0,n.rawValue+=1,n.wholeValue+=1,n.decimalValue=0,n.formattedValueEn=n.wholeValue.toString(),_e=!0);}));};d(a,De);}return _e&&(Oe=!1,Y=J,we=w(we=v(we,xe))),!N||ee&&!o.trim?(pe&&(we=O(we,(function(e){return !e.isSmallest&&!e.wholeValue&&!h(G,e.type)}))),R&&we.length&&(we=we.slice(0,R)),ge&&we.length>1&&(we=_(we,(function(e){return !e.wholeValue&&!h(G,e.type)&&!e.isLargest}))),ye&&(we=w(we=v(we,(function(e,t){return t>0&&t<we.length-1&&!e.wholeValue?null:e})))),!he||1!==we.length||we[0].wholeValue||!B&&we[0].isSmallest&&we[0].rawValue<Q||(we=[])):we=w(we=v(we,(function(e){return h(N,(function(t){return e.type===t}))?e:null}))),C?we:(d(be,(function(e){var t=k[e.type],n=h(we,(function(t){return t.type===e.type}));if(t&&n){var r=n.formattedValueEn.split(".");r[0]=parseInt(r[0],10),r[1]?r[1]=parseFloat("0."+r[1],10):r[1]=null;var o=U.durationPluralKey(t,r[0],r[1]),i=m(t,U),a=!1,u={};d(U._durationLabelTypes,(function(t){var n=h(i,(function(e){return e.type===t.type&&e.key===o}));n&&(u[n.type]=n.label,l(e.text,t.string)&&(e.text=e.text.replace(t.string,n.label),a=!0));})),H&&!a&&(i.sort(f),d(i,(function(t){return u[t.type]===t.label?!l(e.text,t.label)&&void 0:l(e.text,t.label)?(e.text=e.text.replace(t.label,u[t.type]),!1):void 0})));}})),(be=v(be,(function(e){if(!e.type)return e.text;var t=h(we,(function(t){return t.type===e.type}));if(!t)return "";var n="";return z&&(n+=e.text),(j&&ee||!j&&X)&&(n+="< ",ee=!1,X=!1),(j&&X||!j&&ee)&&(n+="> ",ee=!1,X=!1),j&&(t.value>0||""===ie||h(G,t.type)||h(N,t.type))&&(n+="-",j=!1),"milliseconds"===e.type&&t.formattedValueMS?n+=t.formattedValueMS:n+=t.formattedValue,z||(n+=e.text),n}))).join("").replace(/(,| |:|\.)*$/,"").replace(/^(,| |:|\.)*/,""))}function L(){var e=this.duration,t=function(t){return e._data[t]},n=h(this.types,t),r=function(e,t){for(var n=e.length;n-=1;)if(t(e[n]))return e[n]}(this.types,t);switch(n){case"milliseconds":return "S __";case"seconds":case"minutes":return "*_MS_";case"hours":return "_HMS_";case"days":if(n===r)return "d __";case"weeks":return n===r?"w __":(null===this.trim&&(this.trim="both"),"w __, d __, h __");case"months":if(n===r)return "M __";case"years":return n===r?"y __":(null===this.trim&&(this.trim="both"),"y __, M __, d __");default:return null===this.trim&&(this.trim="both"),"y __, d __, h __, m __, s __"}}function F(e){if(!e)throw "Moment Duration Format init cannot find moment instance.";e.duration.format=k,e.duration.fn.format=E,e.duration.fn.format.defaults={trim:null,stopTrim:null,largest:null,maxValue:null,minValue:null,precision:0,trunc:!1,forceLength:null,userLocale:null,usePlural:!0,useLeftUnits:!1,useGrouping:!0,useSignificantDigits:!1,template:L,useToLocaleString:!0,groupingSeparator:",",decimalSeparator:".",grouping:[3]},e.updateLocale("en",p);}var I=function(e,t,n){return e.toLocaleString(t,n)};t=function(){try{(0).toLocaleString("i");}catch(e){return "RangeError"===e.name}return !1}()&&P(I),n=t&&M(I);var N=function(e,t,n){if("undefined"!=typeof window&&window&&window.Intl&&window.Intl.NumberFormat)return window.Intl.NumberFormat(t,n).format(e)};return r=P(N),o=r&&M(N),F(e),F},o=[n(1)],void 0===(i="function"==typeof(r=l)?r.apply(t,o):r)||(e.exports=i),a&&(a.momentDurationFormatSetup=a.moment?l(a.moment):l);},function(e,t,n){n.r(t),n.d(t,"default",(function(){return _}));var r=n(2),o=n.n(r),i=n(0),a=n.n(i),l=n(1),u=n.n(l);n(5);function s(e){return (s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r);}return n}function f(e,t){if(null==e)return {};var n,r,o=function(e,t){if(null==e)return {};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n]);}return o}function m(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r);}}function p(e,t,n){return t&&m(e.prototype,t),n&&m(e,n),e}function g(e,t){return (g=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return !1;if(Reflect.construct.sham)return !1;if("function"==typeof Proxy)return !0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return !1}}();return function(){var n,r=v(e);if(t){var o=v(this).constructor;n=Reflect.construct(r,arguments,o);}else n=r.apply(this,arguments);return h(this,n)}}function h(e,t){return !t||"object"!==s(t)&&"function"!=typeof t?d(e):t}function d(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function v(e){return (v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var w=[a.a.string,a.a.number,a.a.array,a.a.object],S=[a.a.string,a.a.array],T=[a.a.object,a.a.bool],O=[a.a.string,a.a.bool],_=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&g(e,t);}(n,e);var t=y(n);function n(e){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),b(d(r=t.call(this,e)),"setTimer",(function(){var e=r.props.interval;r.clearTimer(),n.pooledTimer||0===e||(r.timer=setInterval((function(){r.update(r.props);}),e));})),b(d(r),"getTitle",(function(){var e=r.props.titleFormat,t=n.getDatetime(r.props),o=e||n.globalFormat;return t.format(o)})),b(d(r),"clearTimer",(function(){!n.pooledTimer&&r.timer&&(clearInterval(r.timer),r.timer=null),n.pooledTimer&&!r.timer&&n.removePooledElement(d(r));})),n.globalMoment||(n.globalMoment=u.a),r.state={content:""},r.timer=null,r}return p(n,null,[{key:"startPooledTimer",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:6e4;n.clearPooledTimer(),n.pooledTimer=setInterval((function(){n.pooledElements.forEach((function(e){0!==e.props.interval&&e.update();}));}),e);}},{key:"clearPooledTimer",value:function(){n.pooledTimer&&(clearInterval(n.pooledTimer),n.pooledTimer=null,n.pooledElements=[]);}},{key:"pushPooledElement",value:function(e){e instanceof n?-1===n.pooledElements.indexOf(e)&&n.pooledElements.push(e):console.error("Element not an instance of Moment.");}},{key:"removePooledElement",value:function(e){var t=n.pooledElements.indexOf(e);-1!==t&&n.pooledElements.splice(t,1);}},{key:"getDatetime",value:function(e){var t=e.utc,r=e.unix,o=e.date,i=e.locale,a=e.parse,l=e.tz,u=e.local;o=o||e.children,a=a||n.globalParse,u=u||n.globalLocal,l=l||n.globalTimezone,i=n.globalLocale?n.globalLocale:i||n.globalMoment.locale();var s=null;return s=t?n.globalMoment.utc(o,a,i):r?n.globalMoment(1e3*o,a,i):n.globalMoment(o,a,i),l?s=s.tz(l):u&&(s=s.local()),s}},{key:"getContent",value:function(e){var t=e.fromNow,r=e.fromNowDuring,o=e.from,i=e.add,a=e.subtract,l=e.toNow,s=e.to,c=e.ago,f=e.calendar,m=e.diff,p=e.duration,g=e.durationFromNow,y=e.unit,h=e.decimal,d=e.trim,v=e.format;v=v||n.globalFormat;var b=n.getDatetime(e);i&&b.add(i),a&&b.subtract(a);var w=Boolean(r)&&-b.diff(u()())<r,S="";return S=!v||w||g||p?o?b.from(o,c):t||w?b.fromNow(c):s?b.to(s,c):l?b.toNow(c):f?b.calendar(null,f):m?b.diff(m,y,h):p?b.diff(p):g?u()().diff(b):b.toString():b.format(v),(p||g)&&(S=(S=u.a.duration(S)).format(v,{trim:d})),S=(n.globalFilter||e.filter)(S)}}]),p(n,[{key:"componentDidMount",value:function(){this.setTimer(),n.pooledTimer&&n.pushPooledElement(this);}},{key:"componentDidUpdate",value:function(e){var t=this.props.interval;e.interval!==t&&this.setTimer();}},{key:"componentWillUnmount",value:function(){this.clearTimer();}},{key:"update",value:function(e){var t=e||this.props,r=t.onChange,o=n.getContent(t);this.setState({content:o},(function(){r(o);}));}},{key:"render",value:function(){var e,t,r,i,a=this.props,l=a.withTitle,u=a.element,s=f(a,["withTitle","element"]),m=this.state.content,p=(e=s,t=n.propTypes,r=Object.keys(t),i=Object.assign({},e),Object.keys(i).filter((function(e){return -1!==r.indexOf(e)})).forEach((function(e){return delete i[e]})),i);return l&&(p.title=this.getTitle()),o.a.createElement(u||n.globalElement,function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){b(e,t,n[t]);})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t));}));}return e}({dateTime:n.getDatetime(this.props)},p),m)}}],[{key:"getDerivedStateFromProps",value:function(e){return {content:n.getContent(e)}}}]),n}(o.a.Component);b(_,"propTypes",{element:a.a.any,date:a.a.oneOfType(w),parse:a.a.oneOfType(S),format:a.a.string,add:a.a.object,subtract:a.a.object,ago:a.a.bool,fromNow:a.a.bool,fromNowDuring:a.a.number,from:a.a.oneOfType(w),toNow:a.a.bool,to:a.a.oneOfType(w),calendar:a.a.oneOfType(T),unix:a.a.bool,utc:a.a.bool,local:a.a.bool,tz:a.a.string,withTitle:a.a.bool,titleFormat:a.a.string,locale:a.a.string,interval:a.a.number,diff:a.a.oneOfType(w),duration:a.a.oneOfType(w),durationFromNow:a.a.bool,trim:a.a.oneOfType(O),unit:a.a.string,decimal:a.a.bool,filter:a.a.func,onChange:a.a.func}),b(_,"defaultProps",{element:null,fromNow:!1,toNow:!1,calendar:!1,ago:!1,unix:!1,utc:!1,local:!1,unit:null,withTitle:!1,trim:!1,decimal:!1,titleFormat:"",interval:6e4,filter:function(e){return e},onChange:function(){}}),b(_,"globalMoment",null),b(_,"globalLocale",null),b(_,"globalLocal",null),b(_,"globalFormat",null),b(_,"globalParse",null),b(_,"globalFilter",null),b(_,"globalElement","time"),b(_,"globalTimezone",null),b(_,"pooledElements",[]),b(_,"pooledTimer",null);}])}));
+});
+
+var Moment = /*@__PURE__*/getDefaultExportFromCjs(dist);
+
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const useStyles$h = makeStyles(() => ({
   rootContainer: {
@@ -11012,9 +11029,7 @@ const useAutoCompleteValue = (propValue, multiple) => {
 const useSkipOnMount = (fn, deps) => {
   const didMountRef = useRef();
   useEffect(() => {
-    if (didMountRef.current) {
-      fn();
-    }
+    if (didMountRef.current) fn();
     didMountRef.current = true;
   }, deps);
 };
@@ -15285,6 +15300,9 @@ function Row({
   // rule value
   template: ruleTemplate,
   onRuleDelete,
+  onRuleMoveUp,
+  onRuleMoveDown,
+  onCreateRuleBelow,
   onTemplateSelect,
   onTemplateValueChange,
   templateInputMap,
@@ -15301,8 +15319,7 @@ function Row({
       // index,
       // ruleIndex
     });
-  });
-
+  }, 200);
   const templateValueField = useMemo(() => {
     if (!templateSelectionCode) return null;
     const TemplateInputField = templateInputMap[templateSelectionCode].component;
@@ -15316,7 +15333,7 @@ function Row({
 
     // TODO: take out index from here together with onChange handler
     // index, ruleIndex,
-  }, [groupId, ruleId, templateSelectionCode, ruleValue, ruleTemplate]);
+  }, [groupId, ruleId, templateSelectionCode, ruleValue, ruleTemplate, handleChange]);
   return /*#__PURE__*/jsxs(Box$1, {
     sx: {
       display: "flex",
@@ -15379,19 +15396,41 @@ function Row({
         marginTop: "22px"
       },
       children: /*#__PURE__*/jsx(MenuButton, {
+        name: "rule operation",
         displayType: "icon",
         menuConfiguration: [{
           name: "Move Up",
           icon: /*#__PURE__*/jsx(KeyboardArrowUpIcon, {}),
-          onClick: () => {}
+          onClick: function () {
+            onRuleMoveUp({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
         }, {
           name: "Move Down",
           icon: /*#__PURE__*/jsx(KeyboardArrowDownIcon, {}),
-          onClick: () => {}
+          onClick: () => {
+            onRuleMoveDown({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
         }, {
           name: "Add Rule Below",
           icon: /*#__PURE__*/jsx(AddIcon, {}),
-          onClick: () => {}
+          onClick: () => {
+            onCreateRuleBelow({
+              ruleId,
+              index,
+              ruleIndex,
+              groupId
+            });
+          }
         }, {
           name: "Delete",
           icon: /*#__PURE__*/jsx(DeleteOutlineOutlinedIcon, {}),
@@ -15572,12 +15611,17 @@ const TextBuilder = /*#__PURE__*/memo(({
 
   // TODO: change rows => RuleGroups
   const [rows, setRows] = useState(_value);
-  const setMutatableRows = useCallback(setterFn => {
-    setRows(rows => produce(rows, setterFn));
-  }, []);
-  useEffect(() => {
+
+  // TODO: think on better implementation
+  useSkipOnMount(() => {
     _onChange(rows);
   }, [rows]);
+  const setMutatableRows = useCallback(setterFn => {
+    setRows(rows => {
+      const res = produce(rows, setterFn);
+      return res;
+    });
+  }, []);
   const handleAddGroup = () => {
     // TODO use setMutatableRows
     setRows([...rows, {
@@ -15596,20 +15640,48 @@ const TextBuilder = /*#__PURE__*/memo(({
   };
   const handleRuleDelete = ({
     index,
-    ruleIndex,
-    groupId,
     ruleId
   }) => {
     setMutatableRows(groups => {
       groups[index].rules = groups[index].rules.filter(rule => rule.id !== ruleId);
     });
   };
+  const handleRuleMoveUp = ({
+    index,
+    ruleIndex
+  }) => {
+    setMutatableRows(groups => {
+      if (ruleIndex === 0) return;
+      const nextRow = ruleIndex - 1 ;
+      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    });
+  };
+  const handleRuleMoveDown = ({
+    index,
+    ruleIndex
+  }) => {
+    setMutatableRows(groups => {
+      if (groups[index].rules.length - 1 === ruleIndex) return;
+      const nextRow = ruleIndex + 1;
+      [groups[index].rules[ruleIndex], groups[index].rules[nextRow]] = [groups[index].rules[nextRow], groups[index].rules[ruleIndex]];
+    });
+  };
+  const handleCreateRuleBelow = ({
+    index,
+    ruleIndex,
+    templateCode
+  }) => {
+    setMutatableRows(groups => {
+      const newRule = _extends({
+        id: v4()
+      }, defaultRule);
+      groups[index].rules = [...groups[index].rules.slice(0, ruleIndex + 1), newRule, ...groups[index].rules.slice(ruleIndex + 1)];
+    });
+  };
 
   // TODO change name
   const handleRuleTemplateSelect = ({
-    groupId,
     index,
-    ruleId,
     ruleIndex,
     templateCode
   }) => {
@@ -15623,19 +15695,14 @@ const TextBuilder = /*#__PURE__*/memo(({
     value,
     template,
     groupId,
-    index,
-    ruleId,
-    ruleIndex
+    ruleId
   }) => {
     setMutatableRows(groups => {
       const rule = groups.find(group => group.groupId === groupId).rules.find(rule => rule.id === ruleId);
       rule.value = value;
       rule.template = template;
-      // groups[index].rules[ruleIndex].value = value;
-      // groups[index].rules[ruleIndex].template = template;
     });
   };
-
   const moveGroupPosition = ({
     index
   }, isUp) => {
@@ -15647,7 +15714,6 @@ const TextBuilder = /*#__PURE__*/memo(({
   const handleAddRule = ({
     groupId
   }) => {
-    // TODO use setMutatableRows
     const newRules = rows.map(row => {
       if (row.groupId !== groupId) return row;
       return _extends({}, row, {
@@ -15698,6 +15764,9 @@ const TextBuilder = /*#__PURE__*/memo(({
             templateOptions: templateOptions,
             templateInputMap: templateInputMap,
             onRuleDelete: handleRuleDelete,
+            onRuleMoveUp: handleRuleMoveUp,
+            onRuleMoveDown: handleRuleMoveDown,
+            onCreateRuleBelow: handleCreateRuleBelow,
             onTemplateSelect: handleRuleTemplateSelect,
             onTemplateValueChange: handleRuleTemplateValueChange
           }), /*#__PURE__*/jsx(RuleGroupFooter, {