@ringcentral/juno 2.45.1 → 3.0.0-alpha.0

package/es6/components/Forms/FormControlLabel/styles/FormControlLabelStyle.js

@@ -4,7 +4,7 @@ import { RcCheckboxClasses } from '../../Checkbox/utils';
 import { RcRadioClasses } from '../../Radio/utils';
 import { RcSwitchClasses } from '../../Switch/utils';
 import { RcFormControlLabelClasses } from '../utils';
-var controlsClassName = "." + RcCheckboxClasses.root + ", ." + RcRadioClasses.root;
+var controlsClassName = ".".concat(RcCheckboxClasses.root, ", .").concat(RcRadioClasses.root);
 export var FormControlLabelStyle = function () {
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    ", ";\n\n    .", " {\n      color: ", ";\n    }\n\n    ", " {\n      margin-left: 0;\n      margin-right: ", ";\n    }\n\n    .", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      ", " {\n        margin-left: ", ";\n        margin-right: 0;\n      }\n    }\n  "], ["\n    color: ", ";\n    ", ";\n\n    .", " {\n      color: ", ";\n    }\n\n    ", " {\n      margin-left: 0;\n      margin-right: ", ";\n    }\n\n    .", " {\n      margin: ", ";\n    }\n\n    &.", " {\n      ", " {\n        margin-left: ", ";\n        margin-right: 0;\n      }\n    }\n  "])), palette2('neutral', 'f06'), typography('body2'), RcFormControlLabelClasses.disabled, palette2('disabled', 'f02'), controlsClassName, spacing(1), RcSwitchClasses.root, spacing(3), RcFormControlLabelClasses.labelPlacementStart, controlsClassName, spacing(1));
 };

package/es6/components/Forms/Picker/DatePicker/Calendar.js

@@ -114,7 +114,7 @@ var Calendar = forwardRef(function (_a, ref) {
             var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
             var dayText = utils.getDayText(day);
             var selected = utils.isSameDay(day, selectedDate);
-            var ariaLabel = getDayAriaLabel === null || getDayAriaLabel === void 0 ? void 0 : getDayAriaLabel(selected, utils.getDatePickerHeaderText(day) + " " + utils.getYearText(day));
+            var ariaLabel = getDayAriaLabel === null || getDayAriaLabel === void 0 ? void 0 : getDayAriaLabel(selected, "".concat(utils.getDatePickerHeaderText(day), " ").concat(utils.getYearText(day)));
             var focused = utils.isSameDay(focusedDate, day);
             var dayComponent = (React.createElement(Day, { size: size, disabled: disabled, current: utils.isSameDay(day, now), hidden: !isDayInCurrentMonth, selected: selected, tabIndex: focused ? 0 : -1, focused: focused, day: day, "aria-label": ariaLabel }, dayText));
             var handleClick = !disabled && isDayInCurrentMonth
@@ -135,7 +135,7 @@ var Calendar = forwardRef(function (_a, ref) {
                     header,
                     React.createElement(CalendarSlideTransitionWrapper, { className: classes.calendarSlider, slideDirection: slideDirection, transKey: currentMonthNumber }, loadingQueue > 0 ? (React.createElement(ProgressContainer, { className: classes.progress }, loadingElement)) : (
                     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-                    React.createElement("div", { role: "rowgroup", "data-transition-tag": true, onKeyDown: handleKeyDown }, weeks.current.map(function (week) { return (React.createElement(WeekWrapper, { role: "row", size: size, key: "week-" + week[0].toString() }, renderDays(week))); })))),
+                    React.createElement("div", { role: "rowgroup", "data-transition-tag": true, onKeyDown: handleKeyDown }, weeks.current.map(function (week) { return (React.createElement(WeekWrapper, { role: "row", size: size, key: "week-".concat(week[0].toString()) }, renderDays(week))); })))),
                     React.createElement(DayFooterWrapper, { className: classes.footer },
                         React.createElement(RcButton, { "data-focusable": true, variant: "plain", onClick: backToToday, disabled: isTodayDisabled, "aria-label": backToTodayAriaLabel, "data-test-automation-id": "date-picker-today" }, todayButtonText))));
             case 'year':
@@ -162,7 +162,7 @@ var Calendar = forwardRef(function (_a, ref) {
     }, [previousView, view, viewChange, doc]);
     useLayoutEffect(function () {
         focusDayElement(doc);
-        calendarRef.current = doc.querySelector("." + RcDatePickerClasses.popover + " ." + RcDatePickerClasses.popoverPaper);
+        calendarRef.current = doc.querySelector(".".concat(RcDatePickerClasses.popover, " .").concat(RcDatePickerClasses.popoverPaper));
         var unsubscribe = transitionendSubscriber(calendarRef.current, function (event) {
             onTransitionEnd(event, doc);
         });

package/es6/components/Forms/Picker/DatePicker/DatePickerHeader.js

@@ -22,7 +22,7 @@ var DatePickerHeader = memo(function (props) {
     };
     var ariaExpanded = view === 'year';
     var _a = useScreenReaderContext(), getMonthYearAriaLabel = _a.getMonthYearAriaLabel, getSwitchMonthAriaLabel = _a.getSwitchMonthAriaLabel;
-    var monthYearAriaLabel = getMonthYearAriaLabel === null || getMonthYearAriaLabel === void 0 ? void 0 : getMonthYearAriaLabel("" + monthLabel, ariaExpanded);
+    var monthYearAriaLabel = getMonthYearAriaLabel === null || getMonthYearAriaLabel === void 0 ? void 0 : getMonthYearAriaLabel("".concat(monthLabel), ariaExpanded);
     var nextMonthAriaLabel = getSwitchMonthAriaLabel === null || getSwitchMonthAriaLabel === void 0 ? void 0 : getSwitchMonthAriaLabel(true, utils.getMonthText(focusedDate));
     var previousMonthAriaLabel = getSwitchMonthAriaLabel === null || getSwitchMonthAriaLabel === void 0 ? void 0 : getSwitchMonthAriaLabel(false, utils.getMonthText(focusedDate));
     return (React.createElement(React.Fragment, null,

package/es6/components/Forms/Picker/DatePicker/Year.js

@@ -12,7 +12,7 @@ var Year = memo(forwardRef(function (props, ref) {
         'Year-selected': selected,
         'Year-disabled': disabled,
     });
-    var yearAriaLabel = getYearAriaLabel === null || getYearAriaLabel === void 0 ? void 0 : getYearAriaLabel("" + value, selected);
+    var yearAriaLabel = getYearAriaLabel === null || getYearAriaLabel === void 0 ? void 0 : getYearAriaLabel("".concat(value), selected);
     var handleClick = !disabled ? _handleClick : undefined;
     return (React.createElement(StyledYear, __assign({ radius: "round", onClick: handleClick, onKeyPress: handleClick, ref: ref, selected: selected, "aria-pressed": focused, size: "medium", "aria-label": yearAriaLabel, className: className, "data-focusable": selected, "data-test-automation-class": "date-picker-year", "data-test-automation-value": children }, rest),
         React.createElement(React.Fragment, null, 

package/es6/components/Forms/Picker/DatePicker/styles/StyledCalendar.js

@@ -5,32 +5,28 @@ import { css, fakeBorder, flexCenterStyle, palette2, spacing, styled, typography
 import { RcDatePickerSizes } from '../utils';
 var CalendarSlideTransitionWrapper = styled(MuiSlideTransition)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 160px;\n  margin: ", ";\n"], ["\n  min-height: 160px;\n  margin: ", ";\n"])), spacing(0, 0, 3));
 var ProgressContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var WeekWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n\n  ",
-    ";\n"])), function (_a) {
+var WeekWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n\n  ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     if (size === 'small') {
         return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        height: 28px;\n      "], ["\n        height: 28px;\n      "])));
     }
     return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      height: 32px;\n\n      & > div:not(:first-child) {\n        margin-left: ", ";\n      }\n    "], ["\n      height: 32px;\n\n      & > div:not(:first-child) {\n        margin-left: ", ";\n      }\n    "])), spacing(1));
 });
-var StyledDaysHeader = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ",
-    "\n"])), flexCenterStyle, function (_a) {
+var StyledDaysHeader = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", "\n"])), flexCenterStyle, function (_a) {
     var size = _a.size;
     if (size === 'small') {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        height: 28px;\n        ", " {\n          width: 20px;\n          max-width: 20px;\n          flex: none;\n        }\n      "], ["\n        height: 28px;\n        ", " {\n          width: 20px;\n          max-width: 20px;\n          flex: none;\n        }\n      "])), StyledDayLabel);
     }
     return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      height: 32px;\n    "], ["\n      height: 32px;\n    "])));
 });
-var StyledDayLabel = styled(MuiTypography)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n\n  text-align: center;\n  ", ";\n  color: ", ";\n"], ["\n  ",
-    "\n\n  text-align: center;\n  ", ";\n  color: ", ";\n"])), function (_a) {
+var StyledDayLabel = styled(MuiTypography)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", "\n\n  text-align: center;\n  ", ";\n  color: ", ";\n"], ["\n  ", "\n\n  text-align: center;\n  ", ";\n  color: ", ";\n"])), function (_a) {
     var size = _a.size;
     if (size === 'small') {
         return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        &:not(:first-child) {\n          margin-left: ", ";\n        }\n      "], ["\n        &:not(:first-child) {\n          margin-left: ", ";\n        }\n      "])), spacing(0.5));
     }
     return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      width: 32px;\n\n      &:not(:first-child) {\n        margin-left: ", ";\n      }\n    "], ["\n      width: 32px;\n\n      &:not(:first-child) {\n        margin-left: ", ";\n      }\n    "])), spacing(1));
 }, typography('caption1'), palette2('neutral', 'f04'));
-var DatePickerWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n\n  box-sizing: border-box;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  ", ";\n  overflow: hidden;\n"], ["\n  ",
-    ";\n\n  box-sizing: border-box;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  ", ";\n  overflow: hidden;\n"])), function (_a) {
+var DatePickerWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n\n  box-sizing: border-box;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  ", ";\n  overflow: hidden;\n"], ["\n  ", ";\n\n  box-sizing: border-box;\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  background-color: ", ";\n  ", ";\n  overflow: hidden;\n"])), function (_a) {
     var size = _a.size;
     var _b = RcDatePickerSizes[size], width = _b.width, height = _b.height;
     return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n    "], ["\n      width: ", ";\n      height: ", ";\n    "])), width, height);

package/es6/components/Forms/Picker/DatePicker/styles/StyledDatePickerHeader.js

@@ -9,16 +9,14 @@ var StyledCurrentMonth = styled.button(templateObject_2 || (templateObject_2 = _
     var view = _a.view;
     return (view === 'day' ? '0' : '180');
 }, palette2('neutral', 'f04'), focusVisible, monthInactiveStyle, nonTouchHoverMedia, monthInactiveStyle);
-var SwitchHeaderWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ",
-    "\n"])), function (_a) {
+var SwitchHeaderWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     if (size === 'small') {
         return '';
     }
     return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      height: 24px;\n      margin-bottom: 12px;\n    "], ["\n      height: 24px;\n      margin-bottom: 12px;\n    "])));
 });
-var SwitchHeaderButtonWrapper = styled(RcIconButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"], ["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ",
-    "\n"])), function (_a) {
+var SwitchHeaderButtonWrapper = styled(RcIconButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"], ["\n  flex: 1;\n  display: ", ";\n  justify-content: flex-end;\n  padding-right: 12px;\n\n  ", "\n"])), function (_a) {
     var view = _a.view;
     return (view === 'day' ? 'flex' : 'none');
 }, function (_a) {

package/es6/components/Forms/Picker/TimePicker/NumberPicker.js

@@ -110,14 +110,14 @@ var _NumberPicker = forwardRef(function (props, ref) {
     return (React.createElement(StyledNumberPicker, __assign({ tabIndex: 0, onKeyDown: handleKeyDown, "aria-live": "assertive", "aria-label": label, ref: pickerRef, "data-focusable": true, role: "spinbutton", "aria-valuenow": innerValue }, rest),
         React.createElement(StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: increaseDisabled, onClick: function () {
                 onUpdateValue(increaseValue);
-            }, symbol: ArrowUpIcon, "data-test-automation-id": automationId && automationId + "-prev-pagination", "aria-label": "Arrow Up" }),
-        React.createElement(StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && automationId + "-text" },
+            }, symbol: ArrowUpIcon, "data-test-automation-id": automationId && "".concat(automationId, "-prev-pagination"), "aria-label": "Arrow Up" }),
+        React.createElement(StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && "".concat(automationId, "-text") },
             React.createElement(React.Fragment, null, 
             // TODO: that <></> will fix when `RcIconButton` ready
             showValue)),
         React.createElement(StyledTimeIconButton, { tabIndex: -1, size: iconSize, color: "neutral.f04", wrapperSize: size, disabled: decreaseDisabled, onClick: function () {
                 onUpdateValue(decreaseValue);
-            }, symbol: ArrowDownIcon, "data-test-automation-id": automationId && automationId + "-next-pagination", "aria-label": "Arrow Down" })));
+            }, symbol: ArrowDownIcon, "data-test-automation-id": automationId && "".concat(automationId, "-next-pagination"), "aria-label": "Arrow Down" })));
 });
 var NumberPicker = styled(memo(_NumberPicker))(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 NumberPicker.displayName = 'NumberPicker';

package/es6/components/Forms/Picker/TimePicker/SelectionView.js

@@ -20,7 +20,7 @@ var SelectionView = function (props) {
         var disabled = !!((max !== undefined && v > max) ||
             (min !== undefined && v < min));
         var itemShowValue = parseNumberToString(v, isTwelveHourSystem);
-        return (React.createElement(StyledSelectionItem, { disabled: disabled, "data-focusable": true, radius: "round", wrapperSize: size, key: v, onClick: handleClick(v, disabled), selected: itemShowValue === showValue, "data-test-automation-id": automationId && automationId + "-" + itemShowValue, itemLength: source.length },
+        return (React.createElement(StyledSelectionItem, { disabled: disabled, "data-focusable": true, radius: "round", wrapperSize: size, key: v, onClick: handleClick(v, disabled), selected: itemShowValue === showValue, "data-test-automation-id": automationId && "".concat(automationId, "-").concat(itemShowValue), itemLength: source.length },
             React.createElement(React.Fragment, null, itemShowValue)));
     })));
 };

package/es6/components/Forms/Picker/TimePicker/TimePicker.js

@@ -253,7 +253,7 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
                 ? isTwelveHourSystem
                     ? twelveHourSystemSource
                     : twentyFourHourSystemSource
-                : minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? hourValue : minuteValue, onClick: handleSelectionViewClick, automationId: "time-picker-" + selectionShowType }))))));
+                : minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? hourValue : minuteValue, onClick: handleSelectionViewClick, automationId: "time-picker-".concat(selectionShowType) }))))));
 });
 /** @release */
 var RcTimePicker = styled(_RcTimePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
@@ -263,17 +263,17 @@ RcTimePicker.defaultProps = {
     size: 'medium',
     HourPickerProps: {
         getScreenReaderLabel: function (hour) {
-            return "Hour: " + hour + ", use up and down arrow keys to change hour time by 1";
+            return "Hour: ".concat(hour, ", use up and down arrow keys to change hour time by 1");
         },
     },
     MinutePickerProps: {
         getScreenReaderLabel: function (minute) {
-            return "Minute: " + minute + ", use up and down arrow keys to change minutes time by " + TIME_GAP + " minutes";
+            return "Minute: ".concat(minute, ", use up and down arrow keys to change minutes time by ").concat(TIME_GAP, " minutes");
         },
     },
     PeriodToggleProps: {
         getScreenReaderLabel: function (period) {
-            return period + ", use up or down arrow keys to switch between AM or PM";
+            return "".concat(period, ", use up or down arrow keys to switch between AM or PM");
         },
     },
 };

package/es6/components/Forms/Picker/TimePicker/styles/StyledNumberPicker.js

@@ -2,5 +2,5 @@ import { __makeTemplateObject } from "tslib";
 import { focusVisible, focusVisibleShadowStyle, palette2, spacing, styled, } from '../../../../../foundation';
 import { RcIconButton } from '../../../../Buttons';
 import { RcIconButtonClasses } from '../../../../Buttons/IconButton/utils';
-export var StyledNumberPicker = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  outline: none;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", ";\n\n  ", " {\n    ", " {\n      ", " .icon {\n        color: ", ";\n      }\n    }\n  }\n\n  > * + * {\n    margin-top: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  outline: none;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", ";\n\n  ", " {\n    ", " {\n      ", " .icon {\n        color: ", ";\n      }\n    }\n  }\n\n  > * + * {\n    margin-top: ", ";\n  }\n"])), focusVisibleShadowStyle('lg'), focusVisible, RcIconButton, "&:not(." + RcIconButtonClasses.disabled + ")", palette2('interactive', 'f01'), spacing(2));
+export var StyledNumberPicker = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  outline: none;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", ";\n\n  ", " {\n    ", " {\n      ", " .icon {\n        color: ", ";\n      }\n    }\n  }\n\n  > * + * {\n    margin-top: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  outline: none;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", ";\n\n  ", " {\n    ", " {\n      ", " .icon {\n        color: ", ";\n      }\n    }\n  }\n\n  > * + * {\n    margin-top: ", ";\n  }\n"])), focusVisibleShadowStyle('lg'), focusVisible, RcIconButton, "&:not(.".concat(RcIconButtonClasses.disabled, ")"), palette2('interactive', 'f01'), spacing(2));
 var templateObject_1;

package/es6/components/Forms/Picker/TimePicker/styles/StyledPickerPopperWrap.js

@@ -1,8 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, flexCenterStyle, palette2, spacing, styled, } from '../../../../../foundation';
 import { RcTimePickerUtils } from '../utils';
-export var StyledPickerPopperWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
+export var StyledPickerPopperWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var size = _a.size;
     var _b = RcTimePickerUtils[size], width = _b.width, height = _b.height;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      box-sizing: border-box;\n      width: ", ";\n      height: ", ";\n      padding: ", ";\n      color: ", ";\n    "], ["\n      ", ";\n      box-sizing: border-box;\n      width: ", ";\n      height: ", ";\n      padding: ", ";\n      color: ", ";\n    "])), flexCenterStyle, width, height, spacing(3, 4), palette2('neutral', 'f06'));

package/es6/components/Forms/Picker/TimePicker/styles/StyledSelectionItem.js

@@ -1,8 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { spacing, styled, typography } from '../../../../../foundation';
 import { StyledTimeIconButton } from './StyledTimeIconButton';
-export var StyledSelectionItem = styled(StyledTimeIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ", ";\n  }\n"], ["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ",
-    ";\n  }\n"])), typography('body1'), function (_a) {
+export var StyledSelectionItem = styled(StyledTimeIconButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ", ";\n  }\n"], ["\n  && {\n    ", ";\n    /* when itemLength is 4 which makes it to become two line, so add padding for it. */\n    margin: ", ";\n  }\n"])), typography('body1'), function (_a) {
     var itemLength = _a.itemLength, wrapperSize = _a.wrapperSize;
     return spacing(wrapperSize === 'small' && itemLength === 4 ? 2 : 1);
 });

package/es6/components/Forms/Picker/TimePicker/styles/StyledSelectionView.js

@@ -1,8 +1,7 @@
 import { __makeTemplateObject } from "tslib";
 import { css, flexCenterStyle, spacing, styled, } from '../../../../../foundation';
 import { RcTimePickerUtils } from '../utils';
-export var StyledSelectionView = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ",
-    ";\n"])), function (_a) {
+export var StyledSelectionView = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     var _b = RcTimePickerUtils[size], width = _b.width, height = _b.height;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", ";\n      box-sizing: border-box;\n      padding: ", ";\n      flex-wrap: wrap;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n    "], ["\n      ", ";\n      box-sizing: border-box;\n      padding: ", ";\n      flex-wrap: wrap;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n    "])), flexCenterStyle, spacing(2), width, height, spacing(-3, -4));

package/es6/components/Forms/Picker/TimePicker/styles/StyledTimeIconButton.js

@@ -7,9 +7,7 @@ var _StyledTimeIconButton = forwardRef(function (_a, ref) {
     var itemLength = _a.itemLength, wrapperSize = _a.wrapperSize, rest = __rest(_a, ["itemLength", "wrapperSize"]);
     return React.createElement(PickerBaseIconButton, __assign({ ref: ref }, rest));
 });
-export var StyledTimeIconButton = styled(_StyledTimeIconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  && {\n    ", ";\n\n    ", ";\n  }\n"], ["\n  && {\n    ",
-    ";\n\n    ",
-    ";\n  }\n"])), function (_a) {
+export var StyledTimeIconButton = styled(_StyledTimeIconButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  && {\n    ", ";\n\n    ", ";\n  }\n"], ["\n  && {\n    ", ";\n\n    ", ";\n  }\n"])), function (_a) {
     var wrapperSize = _a.wrapperSize, itemLength = _a.itemLength;
     var iconWidth = RcTimePickerIconWidths[wrapperSize];
     if (itemLength > HALF_DAY_HOURS) {

package/es6/components/Forms/Picker/TimePicker/types.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Forms/Picker/TimePicker/utils/TimeBoundary.js

@@ -29,14 +29,14 @@ var TimeBoundary = /** @class */ (function () {
         get: function () {
             return this._hour;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(TimeBoundary.prototype, "minute", {
         get: function () {
             return this._minute;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(TimeBoundary.prototype, "date", {
@@ -49,7 +49,7 @@ var TimeBoundary = /** @class */ (function () {
             }
             this._date = value;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     TimeBoundary.prototype.getAfterNearTime = function () {
@@ -89,7 +89,7 @@ export var getRangeBoundary = function (_a) {
         var minTimestamp = getTimestamp(min);
         var maxTimestamp = getTimestamp(max);
         if (minTimestamp > maxTimestamp) {
-            throw new Error("JUNO [RcTimePicker]: That boundary min " + minTimestamp + " is bigger than max " + maxTimestamp + ", please confirm your min and max range props");
+            throw new Error("JUNO [RcTimePicker]: That boundary min ".concat(minTimestamp, " is bigger than max ").concat(maxTimestamp, ", please confirm your min and max range props"));
         }
     }
     return {

package/es6/components/Forms/Picker/TimePicker/utils/TimePickerHelper.js

@@ -13,9 +13,9 @@ var parseNumberToString = function (value, isTwelveHourSystem) {
 /** add miss zero */
 var pad = function (num, size) {
     if (size === void 0) { size = 2; }
-    var s = "" + num;
+    var s = "".concat(num);
     while (s.length < size) {
-        s = "0" + s;
+        s = "0".concat(s);
     }
     return s;
 };
@@ -29,8 +29,8 @@ var getFormattedTime = function (_a, isTwelveHourSystem) {
     var hour = _a.hour, minute = _a.minute, period = _a.period, periodTexts = _a.periodTexts;
     var formattedHour = parseNumberToString(hour, isTwelveHourSystem);
     var formattedMinute = parseNumberToString(minute);
-    var periodText = isTwelveHourSystem ? " " + periodTexts[period] : '';
-    return formattedHour + ":" + formattedMinute + periodText;
+    var periodText = isTwelveHourSystem ? " ".concat(periodTexts[period]) : '';
+    return "".concat(formattedHour, ":").concat(formattedMinute).concat(periodText);
 };
 var HALF_DAY_HOURS = 12;
 var HOUR_MINUTES = 60;

package/es6/components/Forms/Picker/TimePicker/utils/getNumberPickerBoundary.js

@@ -3,8 +3,8 @@ import { HALF_DAY_HOURS, lastMinute } from './TimePickerHelper';
  * get range from current hour
  */
 export function getNumberPickerBoundary(currentHour, _a) {
-    var range = _a.range, isTwelveHourSystem = _a.isTwelveHourSystem;
     var _b, _c, _d, _e;
+    var range = _a.range, isTwelveHourSystem = _a.isTwelveHourSystem;
     var currentIsPM = currentHour >= HALF_DAY_HOURS;
     var maxHour = (_b = range.max.hour) !== null && _b !== void 0 ? _b : 23;
     var maxMinute = (_c = range.max.minute) !== null && _c !== void 0 ? _c : lastMinute;

package/es6/components/Forms/Picker/styles/datePickerCustomFocusRingStyle.js

@@ -7,7 +7,6 @@ export var RcPickerFocusInsetBorderSizes = {
 export var datePickerCustomFocusRingStyle = function (_a) {
     var size = _a.size, selected = _a.selected, _b = _a.radius, radius = _b === void 0 ? 'circle' : _b;
     var focusInsetBorderSizes = RcPickerFocusInsetBorderSizes[size];
-    return (selected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", " {\n        ", "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "], ["\n      ", " {\n        ",
-        "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "])), focusVisible, shadowBorder(radius, palette2('neutral', 'b01'), true, focusInsetBorderSizes), focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes));
+    return (selected && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", " {\n        ", "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "], ["\n      ", " {\n        ", "\n        &:after {\n          top: ", "px;\n          right: ", "px;\n          bottom: ", "px;\n          left: ", "px;\n        }\n        &:before {\n          background-color: unset !important;\n        }\n      }\n    "])), focusVisible, shadowBorder(radius, palette2('neutral', 'b01'), true, focusInsetBorderSizes), focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes, focusInsetBorderSizes));
 };
 var templateObject_1;

package/es6/components/Forms/Picker/utils/PickerTextField/PickerTextField.js

@@ -18,10 +18,10 @@ var PICKER_DISPLAY_NAME = 'PickerTextField';
 var PickerTextField = forwardRef(function (props, ref) {
     var onClear = props.onClear, InputProps = props.InputProps, disabled = props.disabled, action = props.action, onKeyDown = props.onKeyDown, _a = props.inputProps, _b = _a === void 0 ? {} : _a, announcementText = _b.announcementText, inputProps = __rest(_b, ["announcementText"]), PopoverPropsProp = props.PopoverProps, children = props.children, ActionSymbol = props.ActionSymbol, clearBtn = props.clearBtn, clearButtonProps = props.clearButtonProps, value = props.value, rest = __rest(props, ["onClear", "InputProps", "disabled", "action", "onKeyDown", "inputProps", "PopoverProps", "children", "ActionSymbol", "clearBtn", "clearButtonProps", "value"]);
     var focusInside = useFocusInside();
-    var idForInput = useRef(uniqueId(PICKER_DISPLAY_NAME + "-")).current;
+    var idForInput = useRef(uniqueId("".concat(PICKER_DISPLAY_NAME, "-"))).current;
     var _c = __read(useState(null), 2), anchorEl = _c[0], setAnchorEl = _c[1];
-    var idForHelperText = idForInput + "-helper-text";
-    var idForInstruction = idForInput + "-instruction";
+    var idForHelperText = "".concat(idForInput, "-helper-text");
+    var idForInstruction = "".concat(idForInput, "-instruction");
     var handlePickerClick = useEventCallback(function (event) {
         if (!disabled && !anchorEl) {
             setAnchorEl(event.currentTarget);
@@ -57,7 +57,7 @@ var PickerTextField = forwardRef(function (props, ref) {
                 React.createElement(RcIconButton, { "aria-hidden": "true", className: "picker-action", variant: "plain", tabIndex: -1, disabled: disabled, symbol: ActionSymbol }))),
             onClick: handlePickerClick,
             onKeyDown: handleKeydown,
-            inputProps: __assign({ 'aria-describedby': idForHelperText + " " + idForInstruction, 'aria-haspopup': true }, inputProps),
+            inputProps: __assign({ 'aria-describedby': "".concat(idForHelperText, " ").concat(idForInstruction), 'aria-haspopup': true }, inputProps),
         }, InputProps);
     }, [
         clearBtn,

package/es6/components/Forms/Picker/utils/PickerUtils.js

@@ -0,0 +1 @@
+export {};

package/es6/components/Forms/Select/PlainSelect/styles/StyledSelect.js

@@ -11,9 +11,9 @@ export var plainSelectStyle = function (_a) {
     var variant = _a.variant, disabled = _a.disabled;
     var isText = variant === 'text';
     var isRound = roundVariant.includes(variant);
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: auto;\n\n    ", " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    width: auto;\n\n    ",
-        " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ",
-        "\n    }\n  "])), RcButton /**
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: auto;\n\n    ", " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ", "\n    }\n  "], ["\n    width: auto;\n\n    ", /**
+        // TODO: cancel button bellow icon margin issue,
+    */ " {\n      ", " {\n        margin-right: 0;\n      }\n    }\n\n    ", " {\n      margin-right: 0;\n    }\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      width: auto;\n      pointer-events: none;\n    }\n\n    .", " {\n      padding: 0;\n      height: auto;\n    }\n\n    ", " {\n      pointer-events: ", ";\n      min-width: unset;\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n\n      ", " {\n        margin: ", ";\n      }\n\n      ", "\n    }\n  "])), RcButton /**
     // TODO: cancel button bellow icon margin issue,
 */, RcIcon, RcListItemText, RcTextFieldClasses.root, RcPlainSelectInputClasses.root, RcPlainSelectInputClasses.input, RcButton, !disabled && 'auto', spacing(isText ? 4 : 1), spacing(isText ? 1 : 0), isRound && radius('xxl'), SelectArrowDownIcon, spacing(0, 0, 0, isRound ? 0 : 1), isRound && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", " {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "], ["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", " {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "])), spacing(1.5), spacing(1.5), focusVisible, RcPlainSelectTouchRippleClasses.root, opacity('32'), RcPlainSelectTouchRippleClasses.child));
 };

package/es6/components/Forms/Select/styles/StyledSelect.js

@@ -10,8 +10,7 @@ var lineSelectStyle = css(templateObject_1 || (templateObject_1 = __makeTemplate
 }, setOpacity(palette2('action', 'grayDark'), '08'));
 var boxSelectStyle = function (_a) {
     var color = _a.color;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ", ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"], ["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ",
-        ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"])), RcBoxSelectInputClasses.root, function (_a) {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ", ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"], ["\n  > .", " {\n    margin-top: ", ";\n    box-sizing: border-box;\n    height: ", ";\n    border-radius: ", ";\n    background-color: ", ";\n\n    &:not(.", "):hover {\n      background-color: ", ";\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ", ";\n\n      transition: none;\n      border-bottom: none !important;\n      pointer-events: none;\n      ", ";\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    &:before {\n      ", ";\n    }\n  }\n\n  > .", " {\n    background-color: ", ";\n    &:before {\n      ", ";\n    }\n  }\n\n  .", " {\n    padding: ", ";\n    ", ";\n    line-height: ", ";\n\n    &:focus {\n      background: transparent;\n    }\n  }\n"])), RcBoxSelectInputClasses.root, function (_a) {
         var label = _a.label;
         return label && spacing(5);
     }, function (_a) {
@@ -29,6 +28,6 @@ var boxSelectStyle = function (_a) {
 export var selectStyle = function (props) {
     var variant = props.variant, placeholder = props.placeholder, colorProp = props.color;
     var color = getParsePaletteColor(colorProp, palette2('interactive', 'f01'));
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "], ["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "])), RcSelectClasses.icon, palette2('neutral', 'f04'), RcSelectInputClasses.focused, RcSelectClasses.icon, color, RcSelectInputClasses.error, RcSelectClasses.icon, palette2('danger', 'f02'), RcSelectInputWhenPlaceholderClasses.input, placeholderColor, "'" + placeholder + "'", RcSelectInputClasses.disabled, disabledColor, RcSelectClasses.icon, disabledColor, variant === 'line' && lineSelectStyle, variant === 'box' && boxSelectStyle(__assign(__assign({}, props), { color: color })));
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "], ["\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      .", " {\n        color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      &:before {\n        content: ", ";\n        border: none;\n      }\n    }\n\n    .", " {\n      color: ", ";\n      .", " {\n        color: ", ";\n      }\n    }\n\n    ", ";\n    ", ";\n  "])), RcSelectClasses.icon, palette2('neutral', 'f04'), RcSelectInputClasses.focused, RcSelectClasses.icon, color, RcSelectInputClasses.error, RcSelectClasses.icon, palette2('danger', 'f02'), RcSelectInputWhenPlaceholderClasses.input, placeholderColor, "'".concat(placeholder, "'"), RcSelectInputClasses.disabled, disabledColor, RcSelectClasses.icon, disabledColor, variant === 'line' && lineSelectStyle, variant === 'box' && boxSelectStyle(__assign(__assign({}, props), { color: color })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

package/es6/components/Forms/Select/utils/SelectInput/SelectInput.js

@@ -258,8 +258,8 @@ var SelectInput = forwardRef(function (props, ref) {
             },
             role: 'option',
             selected: selected,
-            value: undefined,
-            'data-value': child.props.value,
+            value: undefined, // The value is most likely not a valid HTML attribute.
+            'data-value': child.props.value, // Instead, we provide it as a data attribute.
         });
     });
     if (process.env.NODE_ENV !== 'production') {
@@ -269,12 +269,12 @@ var SelectInput = forwardRef(function (props, ref) {
                 var values = childrenArray.map(function (child) { return child.props.value; });
                 // eslint-disable-next-line no-console
                 console.warn([
-                    "Material-UI: You have provided an out-of-range value `" + value + "` for the select " + (name ? "(name=\"" + name + "\") " : '') + "component.",
+                    "Material-UI: You have provided an out-of-range value `".concat(value, "` for the select ").concat(name ? "(name=\"".concat(name, "\") ") : '', "component."),
                     "Consider providing a value that matches one of the available options or ''.",
-                    "The available values are " + (values
+                    "The available values are ".concat(values
                         .filter(function (x) { return x != null; })
-                        .map(function (x) { return "`" + x + "`"; })
-                        .join(', ') || '""') + ".",
+                        .map(function (x) { return "`".concat(x, "`"); })
+                        .join(', ') || '""', "."),
                 ].join('\n'));
             }
         }, [foundMatch, childrenArray, multiple, name, value]);
@@ -295,7 +295,7 @@ var SelectInput = forwardRef(function (props, ref) {
         tabIndex = disabled ? undefined : 0;
     }
     var buttonId = SelectDisplayProps.id ||
-        (name ? "mui-component-select-" + name : undefined);
+        (name ? "mui-component-select-".concat(name) : undefined);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: handleDisplayRef, tabIndex: tabIndex, role: "button", "aria-disabled": disabled ? 'true' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-labelledby": [labelId, buttonId].filter(Boolean).join(' ') || undefined, onKeyDown: handleKeyDown, onMouseDown: disabled || readOnly ? undefined : handleMouseDown, onBlur: handleBlur, onFocus: onFocus }, SelectDisplayProps, { className: clsx(classes.root, // TODO v5: merge root and select
             classes.select, classes.selectMenu, 
@@ -317,7 +317,7 @@ var SelectInput = forwardRef(function (props, ref) {
                 _b), classes.disabled && (_c = {},
                 _c[classes.disabled] = disabled,
                 _c)) }),
-        React.createElement(MenuComponent, __assign({ id: "menu-" + (name || ''), anchorEl: displayNode, open: open, onClose: handleClose }, MenuProps, { MenuListProps: __assign({ 'aria-labelledby': labelId, role: 'listbox', disableListWrap: true }, MenuProps.MenuListProps), PaperProps: __assign(__assign({}, MenuProps.PaperProps), { style: __assign({ minWidth: menuMinWidth }, (MenuProps.PaperProps != null
+        React.createElement(MenuComponent, __assign({ id: "menu-".concat(name || ''), anchorEl: displayNode, open: open, onClose: handleClose }, MenuProps, { MenuListProps: __assign({ 'aria-labelledby': labelId, role: 'listbox', disableListWrap: true }, MenuProps.MenuListProps), PaperProps: __assign(__assign({}, MenuProps.PaperProps), { style: __assign({ minWidth: menuMinWidth }, (MenuProps.PaperProps != null
                     ? MenuProps.PaperProps.style
                     : null)) }) }), items)));
 });

package/es6/components/Forms/TextField/styles/TextFieldStyle.js

@@ -11,7 +11,7 @@ export var textColor = palette2('neutral', 'f06');
 export var disabledColor = palette2('disabled', 'f02');
 export var placeholderColor = palette2('neutral', 'f03');
 export var RcDefaultTextFieldWidth = '168px';
-var focusWithNotDisabled = "." + RcTextFieldInputClasses.root + ":hover:not(." + RcTextFieldInputClasses.disabled + ")";
+var focusWithNotDisabled = ".".concat(RcTextFieldInputClasses.root, ":hover:not(.").concat(RcTextFieldInputClasses.disabled, ")");
 var TextFieldInputHoverFocusStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    display: inline-flex;\n  }\n"], ["\n  ", " {\n    display: inline-flex;\n  }\n"])), ClearIconButton);
 export var clearBtnInactiveStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"], ["\n  ", " {\n    ", " {\n      ", "\n    }\n  }\n\n  .", " {\n    ", "\n  }\n"])), nonTouchHoverMedia, focusWithNotDisabled, TextFieldInputHoverFocusStyle, RcTextFieldInputClasses.focused, TextFieldInputHoverFocusStyle);
 export var TextFieldStyle = function (props) {
@@ -21,9 +21,7 @@ export var TextFieldStyle = function (props) {
     var labelRootColor = getParsePaletteColor(colorProp, idleColor);
     var underlineColor = getParsePaletteColor(colorProp, palette2('neutral', 'f02'));
     var underlineFocusColor = getParsePaletteColor(colorProp, palette2('neutral', 'f06'));
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ",
-        ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ",
-        ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), labelRootColor, RcTextFieldInputLabelClasses.focused, color, RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, ellipsis, clearBtn &&
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "], ["\n    ", ";\n\n    width: ", ";\n\n    ", ";\n\n    .", " {\n      ", ";\n      color: ", ";\n      transform: scale(1);\n    }\n\n    .", " {\n      color: ", ";\n    }\n\n    .", " {\n      color: ", ";\n\n      ", " {\n        display: none;\n      }\n    }\n\n    ", ";\n\n    .", " {\n      ", ";\n      text-align: ", ";\n\n      ::placeholder {\n        color: ", ";\n        opacity: 1;\n      }\n\n      &:placeholder-shown {\n        ", "\n      }\n\n      ", ";\n    }\n\n    .", " {\n      &:before {\n        border-bottom-color: ", ";\n      }\n\n      ", " {\n        &:hover:not(.", ") {\n          &:before {\n            border-bottom-color: ", ";\n          }\n        }\n      }\n\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      &:after {\n        border-bottom-color: ", ";\n      }\n    }\n\n    .", " {\n      color: ", ";\n      // * safari need that in disabled input\n      -webkit-text-fill-color: ", ";\n      ::placeholder {\n        color: ", ";\n      }\n      &:before {\n        border-bottom-style: solid;\n        border-bottom-color: ", ";\n      }\n      &:after {\n        border-bottom-style: none;\n      }\n    }\n\n    .", " {\n      ", ";\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    .", ",\n      .", " {\n      color: ", ";\n    }\n\n    /* clears the 'X' from Internet Explorer */\n    input[type='search']::-ms-clear,\n    input[type='search']::-ms-reveal {\n      display: none;\n      width: 0;\n      height: 0;\n    }\n\n    /* clears the 'X' from Chrome */\n    input[type='search']::-webkit-search-decoration,\n    input[type='search']::-webkit-search-cancel-button,\n    input[type='search']::-webkit-search-results-button,\n    input[type='search']::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    ", "\n  "])), belowIconButtonSpacing(spacing(3)), !fullWidth && RcDefaultTextFieldWidth, gutterBottom && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "], ["\n      &.", " {\n        margin: 0 0 ", " 0;\n      }\n    "])), RcTextFieldClasses.root, spacing(4)), RcTextFieldInputLabelClasses.root, typography('caption2'), labelRootColor, RcTextFieldInputLabelClasses.focused, color, RcTextFieldInputClasses.root, textColor, ClearIconButton, showClean && clearBtnInactiveStyle, RcTextFieldInputClasses.input, typography(variant === 'borderLess' ? textVariant : 'subheading1'), align, placeholderColor, ellipsis, clearBtn &&
         align &&
         align !== 'left' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        width: calc(100% - ", ");\n      "], ["\n        width: calc(100% - ", ");\n      "])), px(RcIconButtonSizes[size])), RcTextFieldInputClasses.underline, underlineColor, nonTouchHoverMedia, RcTextFieldInputClasses.disabled, underlineFocusColor, color, RcTextFieldInputClasses.error, errorColor, RcTextFieldInputClasses.disabled, disabledColor, disabledColor, disabledColor, disabledColor, RcTextFieldFormHelperTextClasses.root, typography('caption1'), idleColor, RcTextFieldFormHelperTextClasses.error, RcTextFieldInputLabelClasses.error, errorTextColor, RcTextFieldFormHelperTextClasses.disabled, RcTextFieldInputLabelClasses.disabled, disabledColor, variant === 'outline' && OutlineTextFieldStyle);
 };

package/es6/components/Forms/Textarea/styles/TextareaStyle.js

@@ -3,7 +3,6 @@ import { css, fakeBorder, nonTouchHoverMedia, palette2, spacing, } from '../../.
 import { RcTextareaInputClasses } from '../utils';
 export var TextareaStyle = function (_a) {
     var disabled = _a.disabled;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", " {\n      margin: ", " 0 0 0;\n\n      background: ", ";\n      ", ";\n      ", ";\n    }\n\n    .", " {\n      padding: 0;\n    }\n  "], ["\n    .", " {\n      margin: ", " 0 0 0;\n\n      background: ", ";\n      ", ";\n      ",
-        ";\n    }\n\n    .", " {\n      padding: 0;\n    }\n  "])), RcTextareaInputClasses.inputMultiline, spacing(1), palette2('neutral', 'b03'), fakeBorder(), !disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", " {\n          &:hover {\n            background: transparent;\n          }\n        }\n      "], ["\n        ", " {\n          &:hover {\n            background: transparent;\n          }\n        }\n      "])), nonTouchHoverMedia), RcTextareaInputClasses.root);
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    .", " {\n      margin: ", " 0 0 0;\n\n      background: ", ";\n      ", ";\n      ", ";\n    }\n\n    .", " {\n      padding: 0;\n    }\n  "], ["\n    .", " {\n      margin: ", " 0 0 0;\n\n      background: ", ";\n      ", ";\n      ", ";\n    }\n\n    .", " {\n      padding: 0;\n    }\n  "])), RcTextareaInputClasses.inputMultiline, spacing(1), palette2('neutral', 'b03'), fakeBorder(), !disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", " {\n          &:hover {\n            background: transparent;\n          }\n        }\n      "], ["\n        ", " {\n          &:hover {\n            background: transparent;\n          }\n        }\n      "])), nonTouchHoverMedia), RcTextareaInputClasses.root);
 };
 var templateObject_1, templateObject_2;

package/es6/components/Forms/index.js

@@ -1,3 +1,4 @@
+export * from './BaseForm';
 export * from './Checkbox';
 export * from './Form';
 export * from './FormControl';

package/es6/components/Forms/utils/checkedStyles.js

@@ -9,7 +9,6 @@ export var checkedStyles = function (_a) {
     var color = _a.color, error = _a.error, followColorWhenUnChecked = _a.followColorWhenUnChecked, size = _a.size, classes = _a.classes;
     var _color = error ? errorColor : getParsePaletteColor(color);
     var ripplePaddingSize = px(RcIconButtonSizes[size] / 2);
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.", " {\n      color: ", ";\n      padding: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n\n          &.", " {\n            color: ", ";\n            background-color: ", ";\n          }\n        }\n      }\n\n      &.", " {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      color: ", ";\n      padding: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          background-color: ",
-        ";\n\n          &.", " {\n            color: ", ";\n            background-color: ", ";\n          }\n        }\n      }\n\n      &.", " {\n        color: ", ";\n      }\n    }\n  "])), classes.root, followColorWhenUnChecked ? _color : backgroundColor, ripplePaddingSize, classes.checked, _color, nonTouchHoverMedia, setOpacity(followColorWhenUnChecked ? _color : backgroundColor, '12'), classes.checked, setOpacity(_color, '08', true), setOpacity(_color, '12'), classes.disabled, disabledColor);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.", " {\n      color: ", ";\n      padding: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n\n          &.", " {\n            color: ", ";\n            background-color: ", ";\n          }\n        }\n      }\n\n      &.", " {\n        color: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      color: ", ";\n      padding: ", ";\n\n      &.", " {\n        color: ", ";\n      }\n\n      ", " {\n        &:hover {\n          background-color: ", ";\n\n          &.", " {\n            color: ", ";\n            background-color: ", ";\n          }\n        }\n      }\n\n      &.", " {\n        color: ", ";\n      }\n    }\n  "])), classes.root, followColorWhenUnChecked ? _color : backgroundColor, ripplePaddingSize, classes.checked, _color, nonTouchHoverMedia, setOpacity(followColorWhenUnChecked ? _color : backgroundColor, '12'), classes.checked, setOpacity(_color, '08', true), setOpacity(_color, '12'), classes.disabled, disabledColor);
 };
 var templateObject_1;

package/es6/components/Icon/Icon.js

@@ -62,8 +62,8 @@ var _RcIcon = memo(forwardRef(function (inProps, ref) {
     var renderDom;
     if (symbol) {
         if (typeof symbol === 'object' && symbol.id) {
-            href = "#" + symbol.id;
-            iconName = "" + symbol.id;
+            href = "#".concat(symbol.id);
+            iconName = "".concat(symbol.id);
         }
         else {
             Icon = symbol;

package/es6/components/InlineEditable/InlineEditable.js

@@ -131,12 +131,12 @@ var _RcInlineEditable = forwardRef(function (inProps, ref) {
     var children = (React.createElement("div", __assign({ ref: ref, "data-test-automation-id": automationId, onKeyDown: handleKeyDown, className: clsx(className, (_a = {},
             _a[classes.saving] = saving,
             _a)), onMouseDown: handleMouseDown }, rest),
-        disabled ? null : (React.createElement(Component, __assign({ ref: textFieldRef, value: draft, autoComplete: "off", maxLength: maxLength, placeholder: placeholder }, __assign({}, (multiline
+        disabled ? null : (React.createElement(Component, __assign({ ref: textFieldRef, value: draft, autoComplete: "off", maxLength: maxLength, placeholder: placeholder }, (multiline
             ? {}
             : {
                 type: 'text',
                 'aria-label': toTooltipTitle,
-            })), combineProps({
+            }), combineProps({
             onChange: handleDraftChange,
             onFocus: handleFocus,
             onBlurCapture: handleBlur,