@innovaccer/design-system 2.3.0 → 2.4.0-0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1631263425585 
+   * Generated on: 1631955616857 
    *      Package: @innovaccer/design-system
-   *      Version: v2.3.0
+   *      Version: v2.4.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -652,7 +652,10 @@
         "data-test": "DesignSystem-Backdrop",
         "data-layer": true
       }, baseProps, {
-        className: classes
+        className: classes,
+        style: {
+          zIndex: props.zIndex
+        }
       })), document.body);
       return BackdropElement;
     };
@@ -1148,7 +1151,8 @@
         checked: selected,
         onChange: onChangeHandler,
         tabIndex: -1,
-        className: "OptionCheckbox"
+        className: "OptionCheckbox",
+        "data-test": dataTest + "--Checkbox"
       }));
     };
 
@@ -1224,6 +1228,7 @@
         "data-disabled": disabled
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         className: "Option-icon mr-4",
+        "data-test": dataTest + "--Icon",
         name: icon,
         appearance: appearance
       }), /*#__PURE__*/React__namespace.createElement("div", {
@@ -1257,6 +1262,7 @@
         "data-test": dataTest,
         "data-disabled": disabled
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
+        "data-test": dataTest + "--Icon",
         className: "Option-icon mr-4",
         name: icon,
         appearance: appearance
@@ -1310,6 +1316,7 @@
 
       if (props.optionRenderer) {
         return /*#__PURE__*/React__namespace.createElement("div", __assign({
+          "data-test": "DesignSystem-DropdownOption--Custom",
           className: customOptionClass,
           "data-disabled": disabled,
           onMouseEnter: onUpdateActiveOption
@@ -1330,6 +1337,7 @@
 
         if (typeof subInfo === 'string') {
           return /*#__PURE__*/React__namespace.createElement(Text, {
+            "data-test": "DesignSystem-DropdownOption--WITH_META--Meta",
             appearance: labelAppearance
           }, subInfo);
         }
@@ -1342,7 +1350,8 @@
           seperator: seperator,
           iconAppearance: iconAppearance,
           labelAppearance: labelAppearance,
-          seperatorAppearance: iconAppearance
+          seperatorAppearance: iconAppearance,
+          "data-test": "DesignSystem-DropdownOption--WITH_META--MetaList"
         });
       };
 
@@ -1448,30 +1457,36 @@
       switch (loadingType) {
         case 'DEFAULT':
           return /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
-            length: 'large'
+            length: 'large',
+            "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           });
 
         case 'WITH_ICON':
           return /*#__PURE__*/React__default['default'].createElement(Placeholder, {
             withImage: true,
-            round: true
+            round: true,
+            "data-test": "DesignSystem-Dropdown--Placeholder"
           }, /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
             length: "large"
           }));
 
         case 'WITH_META':
           return /*#__PURE__*/React__default['default'].createElement(Placeholder, {
-            withImage: false
+            withImage: false,
+            "data-test": "DesignSystem-Dropdown--Placeholder"
           }, /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
-            length: "large"
+            length: "large",
+            "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           }), /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
             length: "medium",
-            size: "xxs"
+            size: "xxs",
+            "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           }));
 
         case 'WITH_CHECKBOX':
           return /*#__PURE__*/React__default['default'].createElement(Placeholder, {
-            withImage: true
+            withImage: true,
+            "data-test": "DesignSystem-Dropdown--Placeholder"
           }, /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
             length: "large"
           }));
@@ -1480,12 +1495,15 @@
           return /*#__PURE__*/React__default['default'].createElement(Placeholder, {
             withImage: true,
             round: true,
-            imageSize: 'medium'
+            imageSize: 'medium',
+            "data-test": "DesignSystem-Dropdown--Placeholder"
           }, /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
-            length: "large"
+            length: "large",
+            "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           }), /*#__PURE__*/React__default['default'].createElement(PlaceholderParagraph, {
             length: "medium",
-            size: "xxs"
+            size: "xxs",
+            "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           }));
       }
 
@@ -1937,7 +1955,9 @@
         open: dropdownOpen,
         customStyle: popoverStyle,
         position: alignmentMapping[align]
-      }, popoverOptions), (withSearch || props.async) && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()));
+      }, popoverOptions, {
+        "data-test": "DesignSystem-Dropdown--Popover"
+      }), (withSearch || props.async) && renderSearch(), renderDropdownSection(), showApplyButton && withCheckbox && renderApplyButton()));
     };
 
     DropdownList.displayName = 'DropdownList';
@@ -2673,35 +2693,59 @@
           loading = props.loading,
           disabled = props.disabled,
           className = props.className,
-          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className"]);
+          tooltip = props.tooltip,
+          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"]);
 
       var buttonClass = classNames__default['default']((_a = {}, _a['Button'] = true, _a['Button--expanded'] = expanded, _a["Button--" + size] = size, _a["Button--" + size + "Square"] = !children, _a["Button--" + appearance] = appearance, _a['Button--selected'] = selected && (appearance === 'basic' || appearance === 'transparent'), _a["Button--iconAlign-" + iconAlign] = children && iconAlign, _a["" + className] = className, _a));
       var iconClass = classNames__default['default']((_b = {}, _b['Button-icon'] = true, _b["Button-icon--" + iconAlign] = children && iconAlign, _b));
-      return /*#__PURE__*/React__namespace.createElement("button", __assign({
-        "data-test": "DesignSystem-Button",
-        ref: ref,
-        type: type,
-        className: buttonClass,
-        disabled: disabled || loading,
-        tabIndex: tabIndex
-      }, rest), loading ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Spinner, {
-        size: "small",
-        appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
-        "data-test": "DesignSystem-Button--Spinner",
-        className: "Button-spinner"
-      }), /*#__PURE__*/React__namespace.createElement(Text, {
-        className: "Button-text Button-text--hidden"
-      }, children || '')) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, icon && /*#__PURE__*/React__namespace.createElement("div", {
-        className: iconClass
-      }, /*#__PURE__*/React__namespace.createElement(Icon, {
-        "data-test": "DesignSystem-Button--Icon",
-        name: icon,
-        appearance: disabled ? 'disabled' : appearance === 'basic' || appearance === 'transparent' ? selected ? 'info' : 'default' : 'white',
-        size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
-      })), children));
+
+      var ButtonElement = function ButtonElement() {
+        return /*#__PURE__*/React__namespace.createElement("button", __assign({
+          "data-test": "DesignSystem-Button",
+          ref: ref,
+          type: type,
+          className: buttonClass,
+          disabled: disabled || loading,
+          tabIndex: tabIndex
+        }, rest), loading ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Spinner, {
+          size: "small",
+          appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
+          "data-test": "DesignSystem-Button--Spinner",
+          className: "Button-spinner"
+        }), /*#__PURE__*/React__namespace.createElement(Text, {
+          className: "Button-text Button-text--hidden"
+        }, children || '')) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, icon && /*#__PURE__*/React__namespace.createElement("div", {
+          className: iconClass
+        }, /*#__PURE__*/React__namespace.createElement(Icon, {
+          "data-test": "DesignSystem-Button--Icon",
+          name: icon,
+          appearance: disabled ? 'disabled' : appearance === 'basic' || appearance === 'transparent' ? selected ? 'info' : 'default' : 'white',
+          size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
+        })), children));
+      };
+
+      return icon && tooltip && !children ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
+        tooltip: tooltip
+      }, /*#__PURE__*/React__namespace.createElement(ButtonElement, null)) : /*#__PURE__*/React__namespace.createElement(ButtonElement, null);
     });
     Button.displayName = 'Button';
 
+    function _typeof(obj) {
+      "@babel/helpers - typeof";
+
+      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+        _typeof = function (obj) {
+          return typeof obj;
+        };
+      } else {
+        _typeof = function (obj) {
+          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+        };
+      }
+
+      return _typeof(obj);
+    }
+
     var config = {
       yearBlockRange: 12,
       yearsInRow: 3,
@@ -2710,8 +2754,8 @@
       daysInRow: 7,
       months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
       days: {
-        small: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-        large: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        small: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        large: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
       }
     };
 
@@ -3128,7 +3172,7 @@
           return /*#__PURE__*/React__namespace.createElement(Button, {
             type: "button",
             className: headerIconClass,
-            appearance: "transparent",
+            appearance: "basic",
             icon: "arrow_" + (type === 'next' ? 'forward' : 'back'),
             disabled: disabled,
             onClick: _this.onNavIconClickHandler(type)
@@ -3311,6 +3355,7 @@
           var _a = _this.props,
               size = _a.size,
               firstDayOfWeek = _a.firstDayOfWeek;
+          var textSize = size === 'large' ? 'regular' : 'small';
           return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
             className: "Calendar-dayValues"
           }, Array.from({
@@ -3320,10 +3365,12 @@
               'Calendar-valueWrapper': true
             });
             var dayValue = (day + daysInRow + getIndexOfDay(firstDayOfWeek)) % daysInRow;
-            return /*#__PURE__*/React__namespace.createElement(Subheading, {
+            return /*#__PURE__*/React__namespace.createElement(Text, {
               key: day,
               className: valueClass,
-              appearance: "disabled"
+              appearance: "default",
+              weight: "strong",
+              size: textSize
             }, days[size][dayValue]);
           })), /*#__PURE__*/React__namespace.createElement("div", {
             className: "Calendar-dateValues",
@@ -3345,7 +3392,10 @@
               hoverDate = _b.hoverDate,
               yearState = _b.year,
               monthState = _b.month,
-              dateState = _b.date;
+              dateState = _b.date,
+              currMonth = _b.currMonth,
+              currYear = _b.currYear,
+              todayDate = _b.todayDate;
 
           var _c = _this.getNavDateInfo(index),
               yearNavVal = _c.year,
@@ -3358,6 +3408,8 @@
 
           var inRangeError = _this.getInRangeError();
 
+          var events = _this.props.events;
+
           var onClickHandler = function onClickHandler(date) {
             return function () {
               if (rangePicker) {
@@ -3401,6 +3453,7 @@
               var dummy = date <= 0 || date > dayRange;
               var disabled = !dummy && (compareDate(disabledBefore, 'more', yearNavVal, monthNavVal, date) || compareDate(disabledAfter, 'less', yearNavVal, monthNavVal, date));
               var active = !disabled && yearState === yearNavVal && monthState === monthNavVal && dateState === date;
+              var today = !rangePicker && !disabled && currYear === yearNavVal && currMonth === monthNavVal && todayDate === date;
               var startActive = false;
               var endActive = false;
               var inRange = false;
@@ -3434,6 +3487,11 @@
               var isStart = startActive || endDate && inRangeLast && compareDate(hoverDate, 'less', eYear, eMonth, eDate);
               var isEnd = endActive || startDate && inRangeLast && compareDate(hoverDate, 'more', sYear, sMonth, sDate);
               var isRangeError = inRange && inRangeError;
+              var monthInString = "" + (monthNavVal + 1 > 9 ? monthNavVal + 1 : "0" + (monthNavVal + 1));
+              var dateInString = "" + (date > 9 ? date : "0" + date);
+              var yearInString = "" + yearNavVal;
+              var completeDateString = monthInString + "/" + dateInString + "/" + yearInString;
+              var isEventExist = events && _typeof(events) === 'object' && events.hasOwnProperty(completeDateString);
               var wrapperClass = classNames__default['default']({
                 'Calendar-valueWrapper': true,
                 'Calendar-valueWrapper--inRange': inRange || rangePicker && active,
@@ -3454,19 +3512,19 @@
                 'Calendar-value--dummy': dummy || disabled,
                 'Calendar-value--disabled': disabled,
                 'Calendar-dateValue': true
-              }, _a["Calendar-dateValue--" + size] = size, _a));
+              }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currentDate'] = today, _a));
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 className: wrapperClass,
                 "data-test": "designSystem-Calendar-WrapperClass"
-              }, !dummy && /*#__PURE__*/React__namespace.createElement(Text, {
-                appearance: active ? 'white' : disabled ? 'disabled' : 'default',
+              }, !dummy && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Text, {
+                appearance: active ? 'white' : disabled ? 'disabled' : today ? 'link' : 'default',
                 size: size === 'small' ? 'small' : 'regular',
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
                 onClick: onClickHandler(date),
                 onMouseOver: onMouseOverHandler(date)
-              }, date));
+              }, date), isEventExist && _this.renderEventsIndicator(size, active)));
             }));
           });
         };
@@ -3511,6 +3569,7 @@
             month = _b.month,
             date = _b.date;
 
+        var todayCompleteDate = getDateInfo(new Date());
         _this.state = {
           currDate: currDate,
           startDate: startDate,
@@ -3520,6 +3579,9 @@
           year: year,
           month: month,
           date: date,
+          todayDate: todayCompleteDate.date,
+          currMonth: todayCompleteDate.month,
+          currYear: todayCompleteDate.year,
           view: monthsInView > 1 ? 'date' : view,
           yearBlockNav: getYearBlock(yearNav)
         };
@@ -3678,6 +3740,18 @@
         }
       };
 
+      Calendar.prototype.renderEventsIndicator = function (size, active) {
+        var _a;
+
+        var eventsIndicatorClass = classNames__default['default']((_a = {
+          'Calendar-eventsIndicator': true
+        }, _a["Calendar-eventsIndicator--" + size] = true, _a['Calendar-eventsIndicator--active'] = active, _a));
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          "data-test": "DesignSystem-Calendar-Event-Indicator",
+          className: eventsIndicatorClass
+        });
+      };
+
       Calendar.prototype.render = function () {
         var _this = this;
 
@@ -4151,6 +4225,8 @@
       };
 
       DatePicker.prototype.renderCalendar = function () {
+        var _this = this;
+
         var _a = this.props;
             _a.date;
             _a.open;
@@ -4164,15 +4240,29 @@
             disabledAfter = _a.disabledAfter;
             _a.onDateChange;
             _a.closeOnSelect;
-            var rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect"]);
+            _a.size;
+            var rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size"]);
 
         var date = this.state.date;
-        return /*#__PURE__*/React__namespace.createElement(Calendar, __assign({}, rest, {
+        var months = config.months;
+        var monthIndex = new Date().getMonth();
+        var todayMonthAndDate = months[monthIndex] + " " + new Date().getDate();
+        return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Calendar, __assign({}, rest, {
           date: convertToDate(date, inputFormat, validators),
           disabledBefore: convertToDate(disabledBefore, inputFormat, validators),
           disabledAfter: convertToDate(disabledAfter, inputFormat, validators),
           onDateChange: this.onDateChangeHandler
-        }));
+        })), /*#__PURE__*/React__namespace.createElement("div", {
+          className: "d-flex justify-content-center pb-6 pt-3",
+          "data-test": "DesignSystem-Select--TodaysDate-wrapper"
+        }, /*#__PURE__*/React__namespace.createElement(Chip, {
+          label: "Today, " + todayMonthAndDate,
+          name: "chip",
+          type: "action",
+          onClick: function onClick() {
+            return _this.onDateChangeHandler(new Date());
+          }
+        })));
       };
 
       DatePicker.prototype.render = function () {
@@ -4633,22 +4723,6 @@
     });
     MetricInput.displayName = 'MetricInput';
 
-    function _typeof(obj) {
-      "@babel/helpers - typeof";
-
-      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-        _typeof = function (obj) {
-          return typeof obj;
-        };
-      } else {
-        _typeof = function (obj) {
-          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-        };
-      }
-
-      return _typeof(obj);
-    }
-
     var isEditable = function isEditable(mask, pos) {
       return _typeof(mask[pos]) === 'object';
     };
@@ -4908,7 +4982,8 @@
         'd-flex flex-column flex-grow-1': true
       }, className);
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: classes
+        className: classes,
+        "data-test": "DesignSystem-InputMask--Wrapper"
       }, /*#__PURE__*/React__namespace.createElement(Input, __assign({}, rest, {
         value: value,
         error: error,
@@ -5202,7 +5277,7 @@
       disabled: false
     };
 
-    var IconMapping$1 = {
+    var IconMapping$2 = {
       success: 'check_circle',
       info: 'info',
       warning: 'warning',
@@ -5245,7 +5320,7 @@
         className: MessageClass
       }), appearance !== 'default' && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Message--Icon",
-        name: IconMapping$1[appearance],
+        name: IconMapping$2[appearance],
         appearance: appearance,
         className: IconClass
       }), /*#__PURE__*/React__namespace.createElement("div", null, title && /*#__PURE__*/React__namespace.createElement(Heading, {
@@ -7723,6 +7798,7 @@
             seperator = _f.seperator,
             footer = _f.footer,
             onClose = _f.onClose;
+        var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
         var classes = classNames__default['default']({
           Modal: true,
           'Modal--open': open,
@@ -7795,7 +7871,8 @@
         }, ModalContainer) : ModalContainer;
         var WrapperElement = /*#__PURE__*/ReactDOM__namespace.createPortal(ModalWrapper, this.element);
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, WrapperElement, /*#__PURE__*/React__namespace.createElement(Backdrop, {
-          open: this.state.animate
+          open: this.state.animate,
+          zIndex: BackdropZIndex
         }));
       };
 
@@ -8144,6 +8221,7 @@
             footerOptions = _f.footerOptions,
             header = _f.header,
             onClose = _f.onClose;
+        var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
         var classes = classNames__default['default']({
           Sidesheet: true,
           'Sidesheet--open': open,
@@ -8196,7 +8274,8 @@
         }, SidesheetContainer) : SidesheetContainer;
         var WrapperElement = /*#__PURE__*/ReactDOM__namespace.createPortal(SidesheetWrapper, this.element);
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, WrapperElement, /*#__PURE__*/React__namespace.createElement(Backdrop, {
-          open: this.state.animate
+          open: this.state.animate,
+          zIndex: BackdropZIndex
         }));
       };
 
@@ -13874,7 +13953,7 @@
 
     var useEffect = React__namespace.useEffect,
         useState = React__namespace.useState;
-    var IconMapping = {
+    var IconMapping$1 = {
       audio: 'audiotrack',
       image: 'image',
       video: 'movie',
@@ -13893,7 +13972,7 @@
           setAnimate = _c[1];
 
       var type = file.type.split('/')[0] || 'others';
-      var fileType = IconMapping[type] ? type : 'others';
+      var fileType = IconMapping$1[type] ? type : 'others';
       var iconClass = classNames__default['default']((_a = {}, _a['FileIcon'] = true, _a['FileIcon--animate'] = animate, _a["FileIcon--" + fileType] = true, _a));
       var uploadingIconClass = classNames__default['default']((_b = {}, _b['FileIcon'] = true, _b['FileIcon--uploading'] = true, _b));
       useEffect(function () {
@@ -13908,13 +13987,15 @@
         return /*#__PURE__*/React__namespace.createElement(ProgressRing, {
           size: "small",
           value: progress || 0,
-          className: uploadingIconClass
+          className: uploadingIconClass,
+          "data-test": "DesignSystem-FileListItem--ProgressRing"
         });
       }
 
       return /*#__PURE__*/React__namespace.createElement(Icon, {
-        name: IconMapping[fileType],
-        className: iconClass
+        name: IconMapping$1[fileType],
+        className: iconClass,
+        "data-test": "DesignSystem-FileListItem--Icon"
       });
     };
     FileIcon.displayName = 'FileIcon';
@@ -13947,7 +14028,8 @@
 
       return /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
         className: FileItemClass,
-        onClick: onClickHandler
+        onClick: onClickHandler,
+        "data-test": "DesignSystem-FileListItem"
       }), /*#__PURE__*/React__namespace.createElement("div", {
         className: "FileItem-file"
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -13957,13 +14039,15 @@
         status: status,
         progress: progress
       }), /*#__PURE__*/React__namespace.createElement(Text, {
+        "data-test": "DesignSystem-FileListItem--Name",
         className: "FileItem-text",
         appearance: status === 'completed' ? 'default' : 'subtle'
       }, name)), /*#__PURE__*/React__namespace.createElement("div", {
         className: "FileItem-actions"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
         className: "FileItem-size",
-        appearance: 'subtle'
+        appearance: 'subtle',
+        "data-test": "DesignSystem-FileListItem--Size"
       }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React__namespace.createElement(Caption, {
         className: 'FileItem-error',
         error: true
@@ -14207,7 +14291,43 @@
 
     VerificationCodeInput.displayName = 'VerificationCodeInput';
 
-    var version = "2.3.0";
+    var IconMapping = {
+      success: 'check_circle',
+      info: 'info',
+      warning: 'warning',
+      alert: 'error'
+    };
+    var InlineMessage = function InlineMessage(props) {
+      var _a, _b, _c;
+
+      var appearance = props.appearance,
+          className = props.className,
+          description = props.description;
+      var baseProps = extractBaseProps(props);
+      var InlineMessageClass = classNames__default['default']((_a = {}, _a['InlineMessage'] = true, _a), className);
+      var IconClass = classNames__default['default']((_b = {}, _b['InlineMessage-icon'] = true, _b['InlineMessage-icon--warning'] = appearance === 'warning', _b));
+      var DescriptionClass = classNames__default['default']((_c = {}, _c["InlineMessage-text--" + appearance] = appearance, _c));
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        "data-test": "DesignSystem-InlineMessage"
+      }, baseProps, {
+        className: InlineMessageClass
+      }), appearance !== 'default' && /*#__PURE__*/React__namespace.createElement(Icon, {
+        "data-test": "DesignSystem-InlineMessage--Icon",
+        name: IconMapping[appearance],
+        appearance: appearance,
+        className: IconClass
+      }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Text, {
+        "data-test": "DesignSystem-InlineMessage--Description",
+        className: DescriptionClass
+      }, description)));
+    };
+    InlineMessage.displayName = 'InlineMessage';
+    InlineMessage.defaultProps = {
+      appearance: 'default',
+      description: ''
+    };
+
+    var version = "2.4.0-0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
@@ -14247,6 +14367,7 @@
     exports.Heading = Heading;
     exports.HorizontalNav = HorizontalNav;
     exports.Icon = Icon;
+    exports.InlineMessage = InlineMessage;
     exports.Input = Input;
     exports.InputMask = InputMask;
     exports.Label = Label;