@innovaccer/design-system 2.3.0 → 2.4.0-0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1631263425235 
+   * Generated on: 1631955616426 
    *      Package: @innovaccer/design-system
-   *      Version: v2.3.0
+   *      Version: v2.4.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -986,7 +986,10 @@ var Backdrop = function Backdrop(props) {
     "data-test": "DesignSystem-Backdrop",
     "data-layer": true
   }, baseProps, {
-    className: classes
+    className: classes,
+    style: {
+      zIndex: props.zIndex
+    }
   })), document.body);
   return BackdropElement;
 };
@@ -1494,7 +1497,8 @@ var CheckboxOption = function CheckboxOption(props) {
     checked: selected,
     onChange: onChangeHandler,
     tabIndex: -1,
-    className: "OptionCheckbox"
+    className: "OptionCheckbox",
+    "data-test": "".concat(dataTest, "--Checkbox")
   }));
 };
 
@@ -1570,6 +1574,7 @@ var IconOption = function IconOption(props) {
     "data-disabled": disabled
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     className: "Option-icon mr-4",
+    "data-test": "".concat(dataTest, "--Icon"),
     name: icon,
     appearance: appearance
   }), /*#__PURE__*/React.createElement("div", {
@@ -1603,6 +1608,7 @@ var IconWithMetaOption = function IconWithMetaOption(props) {
     "data-test": dataTest,
     "data-disabled": disabled
   }, icon && /*#__PURE__*/React.createElement(Icon, {
+    "data-test": "".concat(dataTest, "--Icon"),
     className: "Option-icon mr-4",
     name: icon,
     appearance: appearance
@@ -1659,6 +1665,7 @@ var Option = function Option(props) {
 
   if (props.optionRenderer) {
     return /*#__PURE__*/React.createElement("div", _extends$3({
+      "data-test": "DesignSystem-DropdownOption--Custom",
       className: customOptionClass,
       "data-disabled": disabled,
       onMouseEnter: onUpdateActiveOption
@@ -1679,6 +1686,7 @@ var Option = function Option(props) {
 
     if (typeof subInfo === 'string') {
       return /*#__PURE__*/React.createElement(Text, {
+        "data-test": "DesignSystem-DropdownOption--WITH_META--Meta",
         appearance: labelAppearance
       }, subInfo);
     }
@@ -1691,7 +1699,8 @@ var Option = function Option(props) {
       seperator: seperator,
       iconAppearance: iconAppearance,
       labelAppearance: labelAppearance,
-      seperatorAppearance: iconAppearance
+      seperatorAppearance: iconAppearance,
+      "data-test": "DesignSystem-DropdownOption--WITH_META--MetaList"
     });
   };
 
@@ -1795,30 +1804,36 @@ var Loading = function Loading(props) {
   switch (loadingType) {
     case 'DEFAULT':
       return /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
-        length: 'large'
+        length: 'large',
+        "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       });
 
     case 'WITH_ICON':
       return /*#__PURE__*/React__default.createElement(Placeholder, {
         withImage: true,
-        round: true
+        round: true,
+        "data-test": "DesignSystem-Dropdown--Placeholder"
       }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
         length: "large"
       }));
 
     case 'WITH_META':
       return /*#__PURE__*/React__default.createElement(Placeholder, {
-        withImage: false
+        withImage: false,
+        "data-test": "DesignSystem-Dropdown--Placeholder"
       }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
-        length: "large"
+        length: "large",
+        "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       }), /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
         length: "medium",
-        size: "xxs"
+        size: "xxs",
+        "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       }));
 
     case 'WITH_CHECKBOX':
       return /*#__PURE__*/React__default.createElement(Placeholder, {
-        withImage: true
+        withImage: true,
+        "data-test": "DesignSystem-Dropdown--Placeholder"
       }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
         length: "large"
       }));
@@ -1827,12 +1842,15 @@ var Loading = function Loading(props) {
       return /*#__PURE__*/React__default.createElement(Placeholder, {
         withImage: true,
         round: true,
-        imageSize: 'medium'
+        imageSize: 'medium',
+        "data-test": "DesignSystem-Dropdown--Placeholder"
       }, /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
-        length: "large"
+        length: "large",
+        "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       }), /*#__PURE__*/React__default.createElement(PlaceholderParagraph, {
         length: "medium",
-        size: "xxs"
+        size: "xxs",
+        "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
       }));
   }
 
@@ -2292,7 +2310,9 @@ var DropdownList = function DropdownList(props) {
     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';
@@ -3032,7 +3052,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   }, "/"))));
 };
 
-var _excluded$u = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className"];
+var _excluded$u = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"];
 var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -3058,32 +3078,40 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
       loading = props.loading,
       disabled = props.disabled,
       className = props.className,
+      tooltip = props.tooltip,
       rest = _objectWithoutProperties$1(props, _excluded$u);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'Button', true), _defineProperty$2(_classNames, 'Button--expanded', expanded), _defineProperty$2(_classNames, "Button--".concat(size), size), _defineProperty$2(_classNames, "Button--".concat(size, "Square"), !children), _defineProperty$2(_classNames, "Button--".concat(appearance), appearance), _defineProperty$2(_classNames, 'Button--selected', selected && (appearance === 'basic' || appearance === 'transparent')), _defineProperty$2(_classNames, "Button--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$2(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'Button-icon', true), _defineProperty$2(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _classNames2));
-  return /*#__PURE__*/React.createElement("button", _extends$3({
-    "data-test": "DesignSystem-Button",
-    ref: ref,
-    type: type,
-    className: buttonClass,
-    disabled: disabled || loading,
-    tabIndex: tabIndex
-  }, rest), loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spinner, {
-    size: "small",
-    appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
-    "data-test": "DesignSystem-Button--Spinner",
-    className: "Button-spinner"
-  }), /*#__PURE__*/React.createElement(Text, {
-    className: "Button-text Button-text--hidden"
-  }, children || '')) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
-    className: iconClass
-  }, /*#__PURE__*/React.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.createElement("button", _extends$3({
+      "data-test": "DesignSystem-Button",
+      ref: ref,
+      type: type,
+      className: buttonClass,
+      disabled: disabled || loading,
+      tabIndex: tabIndex
+    }, rest), loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
+      "data-test": "DesignSystem-Button--Spinner",
+      className: "Button-spinner"
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "Button-text Button-text--hidden"
+    }, children || '')) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
+      className: iconClass
+    }, /*#__PURE__*/React.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.createElement(Tooltip, {
+    tooltip: tooltip
+  }, /*#__PURE__*/React.createElement(ButtonElement, null)) : /*#__PURE__*/React.createElement(ButtonElement, null);
 });
 Button.displayName = 'Button';
 
@@ -3095,8 +3123,8 @@ var config = {
   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']
   }
 };
 
@@ -3516,7 +3544,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Button, {
         type: "button",
         className: headerIconClass,
-        appearance: "transparent",
+        appearance: "basic",
         icon: "arrow_".concat(type === 'next' ? 'forward' : 'back'),
         disabled: disabled,
         onClick: _this.onNavIconClickHandler(type)
@@ -3695,6 +3723,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       var _this$props6 = _this.props,
           size = _this$props6.size,
           firstDayOfWeek = _this$props6.firstDayOfWeek;
+      var textSize = size === 'large' ? 'regular' : 'small';
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "Calendar-dayValues"
       }, Array.from({
@@ -3704,10 +3733,12 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           'Calendar-valueWrapper': true
         });
         var dayValue = (day + daysInRow + getIndexOfDay(firstDayOfWeek)) % daysInRow;
-        return /*#__PURE__*/React.createElement(Subheading, {
+        return /*#__PURE__*/React.createElement(Text, {
           key: day,
           className: valueClass,
-          appearance: "disabled"
+          appearance: "default",
+          weight: "strong",
+          size: textSize
         }, days[size][dayValue]);
       })), /*#__PURE__*/React.createElement("div", {
         className: "Calendar-dateValues",
@@ -3729,7 +3760,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           hoverDate = _this$state7.hoverDate,
           yearState = _this$state7.year,
           monthState = _this$state7.month,
-          dateState = _this$state7.date;
+          dateState = _this$state7.date,
+          currMonth = _this$state7.currMonth,
+          currYear = _this$state7.currYear,
+          todayDate = _this$state7.todayDate;
 
       var _this$getNavDateInfo3 = _this.getNavDateInfo(index),
           yearNavVal = _this$getNavDateInfo3.year,
@@ -3742,6 +3776,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
 
       var inRangeError = _this.getInRangeError();
 
+      var events = _this.props.events;
+
       var onClickHandler = function onClickHandler(date) {
         return function () {
           if (rangePicker) {
@@ -3779,10 +3815,13 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         }, Array.from({
           length: daysInRow
         }, function (_x, col) {
+          var _classNames4;
+
           var date = daysInRow * row + col - dummyDays + 1;
           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;
@@ -3816,6 +3855,11 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           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 = "".concat(monthNavVal + 1 > 9 ? monthNavVal + 1 : "0".concat(monthNavVal + 1));
+          var dateInString = "".concat(date > 9 ? date : "0".concat(date));
+          var yearInString = "".concat(yearNavVal);
+          var completeDateString = "".concat(monthInString, "/").concat(dateInString, "/").concat(yearInString);
+          var isEventExist = events && _typeof(events) === 'object' && events.hasOwnProperty(completeDateString);
           var wrapperClass = classnames({
             'Calendar-valueWrapper': true,
             'Calendar-valueWrapper--inRange': inRange || rangePicker && active,
@@ -3826,7 +3870,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-valueWrapper--startError': isStart && isRangeError,
             'Calendar-valueWrapper--endError': isEnd && isRangeError
           });
-          var valueClass = classnames(_defineProperty$2({
+          var valueClass = classnames((_classNames4 = {
             'Calendar-value': true,
             'Calendar-value--start': isStart && !isEnd,
             'Calendar-value--end': isEnd && !isStart,
@@ -3836,19 +3880,19 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-value--dummy': dummy || disabled,
             'Calendar-value--disabled': disabled,
             'Calendar-dateValue': true
-          }, "Calendar-dateValue--".concat(size), size));
+          }, _defineProperty$2(_classNames4, "Calendar-dateValue--".concat(size), size), _defineProperty$2(_classNames4, 'Calendar-value--currentDate', today), _classNames4));
           return /*#__PURE__*/React.createElement("div", {
             key: "".concat(row, "-").concat(col),
             className: wrapperClass,
             "data-test": "designSystem-Calendar-WrapperClass"
-          }, !dummy && /*#__PURE__*/React.createElement(Text, {
-            appearance: active ? 'white' : disabled ? 'disabled' : 'default',
+          }, !dummy && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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)));
         }));
       });
     });
@@ -3895,6 +3939,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         _month = _getDateInfo6.month,
         _date = _getDateInfo6.date;
 
+    var todayCompleteDate = getDateInfo(new Date());
     _this.state = {
       currDate: currDate,
       startDate: _startDate,
@@ -3904,6 +3949,9 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       year: _year,
       month: _month,
       date: _date,
+      todayDate: todayCompleteDate.date,
+      currMonth: todayCompleteDate.month,
+      currYear: todayCompleteDate.year,
       view: _monthsInView > 1 ? 'date' : _view,
       yearBlockNav: getYearBlock(_yearNav)
     };
@@ -4065,6 +4113,19 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         }
       }
     }
+  }, {
+    key: "renderEventsIndicator",
+    value: function renderEventsIndicator(size, active) {
+      var _classNames6;
+
+      var eventsIndicatorClass = classnames((_classNames6 = {
+        'Calendar-eventsIndicator': true
+      }, _defineProperty$2(_classNames6, "Calendar-eventsIndicator--".concat(size), true), _defineProperty$2(_classNames6, 'Calendar-eventsIndicator--active', active), _classNames6));
+      return /*#__PURE__*/React.createElement("span", {
+        "data-test": "DesignSystem-Calendar-Event-Indicator",
+        className: eventsIndicatorClass
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -4429,7 +4490,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$q = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect"];
+var _excluded$q = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits$1(DatePicker, _React$Component);
 
@@ -4551,6 +4612,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderCalendar",
     value: function renderCalendar() {
+      var _this2 = this;
+
       var _this$props4 = this.props;
           _this$props4.date;
           _this$props4.open;
@@ -4564,15 +4627,29 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           disabledAfter = _this$props4.disabledAfter;
           _this$props4.onDateChange;
           _this$props4.closeOnSelect;
+          _this$props4.size;
           var rest = _objectWithoutProperties$1(_this$props4, _excluded$q);
 
       var date = this.state.date;
-      return /*#__PURE__*/React.createElement(Calendar, _extends$3({}, rest, {
+      var months = config.months;
+      var monthIndex = new Date().getMonth();
+      var todayMonthAndDate = "".concat(months[monthIndex], " ").concat(new Date().getDate());
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Calendar, _extends$3({}, rest, {
         date: convertToDate(date, inputFormat, validators),
         disabledBefore: convertToDate(disabledBefore, inputFormat, validators),
         disabledAfter: convertToDate(disabledAfter, inputFormat, validators),
         onDateChange: this.onDateChangeHandler
-      }));
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "d-flex justify-content-center pb-6 pt-3",
+        "data-test": "DesignSystem-Select--TodaysDate-wrapper"
+      }, /*#__PURE__*/React.createElement(Chip, {
+        label: "Today, ".concat(todayMonthAndDate),
+        name: "chip",
+        type: "action",
+        onClick: function onClick() {
+          return _this2.onDateChangeHandler(new Date());
+        }
+      })));
     }
   }, {
     key: "render",
@@ -5306,7 +5383,8 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     'd-flex flex-column flex-grow-1': true
   }, className);
   return /*#__PURE__*/React.createElement("div", {
-    className: classes
+    className: classes,
+    "data-test": "DesignSystem-InputMask--Wrapper"
   }, /*#__PURE__*/React.createElement(Input, _extends$3({}, rest, {
     value: value,
     error: error,
@@ -5606,7 +5684,7 @@ Link.defaultProps = {
   disabled: false
 };
 
-var IconMapping$1 = {
+var IconMapping$2 = {
   success: 'check_circle',
   info: 'info',
   warning: 'warning',
@@ -5649,7 +5727,7 @@ var Message = function Message(props) {
     className: MessageClass
   }), appearance !== 'default' && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-Message--Icon",
-    name: IconMapping$1[appearance],
+    name: IconMapping$2[appearance],
     appearance: appearance,
     className: IconClass
   }), /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement(Heading, {
@@ -12851,6 +12929,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           seperator = _this$props2.seperator,
           footer = _this$props2.footer,
           onClose = _this$props2.onClose;
+      var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
       var classes = classnames({
         Modal: true,
         'Modal--open': open,
@@ -12923,7 +13002,8 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       }, ModalContainer) : ModalContainer;
       var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(ModalWrapper, this.element);
       return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement, /*#__PURE__*/React.createElement(Backdrop, {
-        open: this.state.animate
+        open: this.state.animate,
+        zIndex: BackdropZIndex
       }));
     }
   }]);
@@ -13301,6 +13381,7 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
           footerOptions = _this$props.footerOptions,
           header = _this$props.header,
           onClose = _this$props.onClose;
+      var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
       var classes = classnames({
         Sidesheet: true,
         'Sidesheet--open': open,
@@ -13353,7 +13434,8 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
       }, SidesheetContainer) : SidesheetContainer;
       var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(SidesheetWrapper, this.element);
       return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement, /*#__PURE__*/React.createElement(Backdrop, {
-        open: this.state.animate
+        open: this.state.animate,
+        zIndex: BackdropZIndex
       }));
     }
   }]);
@@ -19267,7 +19349,7 @@ PageHeader.defaultProps = {
 
 var useEffect = React.useEffect,
     useState = React.useState;
-var IconMapping = {
+var IconMapping$1 = {
   audio: 'audiotrack',
   image: 'image',
   video: 'movie',
@@ -19287,7 +19369,7 @@ var FileIcon = function FileIcon(props) {
       setAnimate = _useState2[1];
 
   var type = file.type.split('/')[0] || 'others';
-  var fileType = IconMapping[type] ? type : 'others';
+  var fileType = IconMapping$1[type] ? type : 'others';
   var iconClass = classnames((_classNames = {}, _defineProperty$2(_classNames, 'FileIcon', true), _defineProperty$2(_classNames, 'FileIcon--animate', animate), _defineProperty$2(_classNames, "FileIcon--".concat(fileType), true), _classNames));
   var uploadingIconClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'FileIcon', true), _defineProperty$2(_classNames2, 'FileIcon--uploading', true), _classNames2));
   useEffect(function () {
@@ -19302,13 +19384,15 @@ var FileIcon = function FileIcon(props) {
     return /*#__PURE__*/React.createElement(ProgressRing, {
       size: "small",
       value: progress || 0,
-      className: uploadingIconClass
+      className: uploadingIconClass,
+      "data-test": "DesignSystem-FileListItem--ProgressRing"
     });
   }
 
   return /*#__PURE__*/React.createElement(Icon, {
-    name: IconMapping[fileType],
-    className: iconClass
+    name: IconMapping$1[fileType],
+    className: iconClass,
+    "data-test": "DesignSystem-FileListItem--Icon"
   });
 };
 FileIcon.displayName = 'FileIcon';
@@ -19339,7 +19423,8 @@ var FileListItem = function FileListItem(props) {
 
   return /*#__PURE__*/React.createElement("div", _extends$3({}, baseProps, {
     className: FileItemClass,
-    onClick: onClickHandler
+    onClick: onClickHandler,
+    "data-test": "DesignSystem-FileListItem"
   }), /*#__PURE__*/React.createElement("div", {
     className: "FileItem-file"
   }, /*#__PURE__*/React.createElement("div", {
@@ -19349,13 +19434,15 @@ var FileListItem = function FileListItem(props) {
     status: status,
     progress: progress
   }), /*#__PURE__*/React.createElement(Text, {
+    "data-test": "DesignSystem-FileListItem--Name",
     className: "FileItem-text",
     appearance: status === 'completed' ? 'default' : 'subtle'
   }, name)), /*#__PURE__*/React.createElement("div", {
     className: "FileItem-actions"
   }, /*#__PURE__*/React.createElement(Text, {
     className: "FileItem-size",
-    appearance: 'subtle'
+    appearance: 'subtle',
+    "data-test": "DesignSystem-FileListItem--Size"
   }, fileSize || file.size), !!actions && actions)), status === 'error' && /*#__PURE__*/React.createElement(Caption, {
     className: 'FileItem-error',
     error: true
@@ -19604,6 +19691,42 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
 
 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 _classNames2;
+
+  var appearance = props.appearance,
+      className = props.className,
+      description = props.description;
+  var baseProps = extractBaseProps(props);
+  var InlineMessageClass = classnames(_defineProperty$2({}, 'InlineMessage', true), className);
+  var IconClass = classnames((_classNames2 = {}, _defineProperty$2(_classNames2, 'InlineMessage-icon', true), _defineProperty$2(_classNames2, 'InlineMessage-icon--warning', appearance === 'warning'), _classNames2));
+  var DescriptionClass = classnames(_defineProperty$2({}, "InlineMessage-text--".concat(appearance), appearance));
+  return /*#__PURE__*/React.createElement("div", _extends$3({
+    "data-test": "DesignSystem-InlineMessage"
+  }, baseProps, {
+    className: InlineMessageClass
+  }), appearance !== 'default' && /*#__PURE__*/React.createElement(Icon, {
+    "data-test": "DesignSystem-InlineMessage--Icon",
+    name: IconMapping[appearance],
+    appearance: appearance,
+    className: IconClass
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    "data-test": "DesignSystem-InlineMessage--Description",
+    className: DescriptionClass
+  }, description)));
+};
+InlineMessage.displayName = 'InlineMessage';
+InlineMessage.defaultProps = {
+  appearance: 'default',
+  description: ''
+};
+
+var version = "2.4.0-0";
 
-export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, Input, InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };
+export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index$1 as Utils, VerificationCodeInput, VerticalNav, version };