@ringcentral/juno 1.12.3-beta.5791-ea7a35ca → 1.12.4-beta.5841-601f173e

package/es6/components/Downshift/utils/useDownshift.js

@@ -15,32 +15,38 @@ function stringArrToRegExp(keyToTags) {
 }
 var componentName = 'RcDownshift';
 export var useDownshift = function (_a) {
-    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose;
+    var multipleProp = _a.multiple, variant = _a.variant, labelProp = _a.label, inputValueProp = _a.inputValue, _b = _a.getOptionLabel, getOptionLabel = _b === void 0 ? DEFAULT_GET_OPTION_LABEL : _b, _c = _a.keyToTags, keyToTags = _c === void 0 ? DEFAULT_KEY_TO_CHIPS : _c, filterOptions = _a.filterOptions, disabledItemsHighlightable = _a.disabledItemsHighlightable, options = _a.options, freeSolo = _a.freeSolo, onInputChangeProp = _a.onInputChange, maxFreeSolo = _a.maxFreeSolo, onMaxFreeSolo = _a.onMaxFreeSolo, openOnFocus = _a.openOnFocus, disableCloseOnSelect = _a.disableCloseOnSelect, initialIsOpen = _a.initialIsOpen, autoSelect = _a.autoSelect, inputContainerRef = _a.inputContainerRef, inputRef = _a.inputRef, wrapperRef = _a.wrapperRef, onKeyDownProp = _a.onKeyDown, onSelectChange = _a.onChange, _d = _a.value, selectedItemsProp = _d === void 0 ? [] : _d, disabled = _a.disabled, renderNoOptions = _a.renderNoOptions, onClear = _a.onClear, autoHighlight = _a.autoHighlight, getOptionDisabled = _a.getOptionDisabled, addNoOptionItem = _a.addNoOptionItem, groupBy = _a.groupBy, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, getExpandIconProps = _a.getExpandIconProps, required = _a.required, openProp = _a.open, onOpen = _a.onOpen, onClose = _a.onClose, focusedProp = _a.focused;
     var isAutocomplete = variant === 'autocomplete';
     // * when that is autocomplete, that will never be multiple
     var multiple = isAutocomplete ? false : multipleProp;
     var isSelectedFromAutocompleteRef = useRef(false);
+    var isInputValueChangedRef = useRef(false);
     var _e = __read(useControlled({
+        controlled: focusedProp,
+        default: false,
+        name: componentName,
+    }), 2), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = __read(useControlled({
         controlled: openProp,
         default: initialIsOpen || false,
         name: componentName,
-    }), 2), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = __read(useState(false), 2), isTagsFocus = _f[0], setIsTagsFocus = _f[1];
-    var _g = __read(useState(0), 2), activeIndex = _g[0], setActiveIndex = _g[1];
-    var _h = __read(useControlled({
+    }), 2), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = __read(useState(false), 2), isTagsFocus = _g[0], setIsTagsFocus = _g[1];
+    var _h = __read(useState(0), 2), activeIndex = _h[0], setActiveIndex = _h[1];
+    var _j = __read(useControlled({
         controlled: inputValueProp,
         default: '',
         name: componentName,
-    }), 2), inputValue = _h[0], setInputValue = _h[1];
+    }), 2), inputValue = _j[0], setInputValue = _j[1];
     var updateInputValue = function (newValue) {
         onInputChangeProp === null || onInputChangeProp === void 0 ? void 0 : onInputChangeProp(newValue);
         setInputValue(newValue);
     };
-    var _j = __read(useControlled({
+    var _k = __read(useControlled({
         controlled: selectedItemsProp,
         default: [],
         name: componentName,
-    }), 2), selectedItems = _j[0], setSelectedItems = _j[1];
+    }), 2), selectedItems = _k[0], setSelectedItems = _k[1];
     var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var downshiftId = useResultRef(function () { return uniqueId("downshift-"); }).current;
     // * use -2 for us know that is init state, for recalculate defaultHighlightedIndex
@@ -55,7 +61,7 @@ export var useDownshift = function (_a) {
         ? true
         : undefined;
     var forceUpdate = useForceUpdate();
-    var _k = useSleep(), sleep = _k.sleep, getSleeping = _k.getSleeping;
+    var _l = useSleep(), sleep = _l.sleep, getSleeping = _l.getSleeping;
     var filteredResult = useMemo(function () {
         var getInputValueAsItem = function () {
             var label = inputValue.trim() || '';
@@ -74,6 +80,7 @@ export var useDownshift = function (_a) {
             if (filterOptions) {
                 return filterOptions(items, {
                     inputValue: inputValue,
+                    inputChanged: isInputValueChangedRef.current,
                     getOptionLabel: getOptionLabel,
                     selectedItems: selectedItems,
                 });
@@ -117,16 +124,19 @@ export var useDownshift = function (_a) {
         renderNoOptions,
         selectedItems,
     ]);
-    var _l = useDownshiftGroup({
+    var _m = useDownshiftGroup({
         groupBy: groupBy,
         options: options,
         filteredResult: filteredResult,
         getExpandIconProps: getExpandIconProps,
         groupExpanded: groupExpanded,
+        groupDefaultExpanded: groupDefaultExpanded,
         onGroupExpanded: onGroupExpanded,
+        // TODO: single release for that breaking change
+        // getOptionDisabled,
         groupVariant: groupVariant,
         id: downshiftId,
-    }), groupedResult = _l.groupedResult, handleGroupExpandedChange = _l.handleGroupExpandedChange, optionsGroupList = _l.optionsGroupList;
+    }), groupedResult = _m.groupedResult, handleGroupExpandedChange = _m.handleGroupExpandedChange, optionsGroupList = _m.optionsGroupList;
     var optionItems = groupBy ? groupedResult : filteredResult;
     var freeSoloCount = useMemo(function () { return selectedItems.filter(function (x) { return x.freeSolo; }).length; }, [selectedItems]);
     var handleSelectedItems = function (_selectedItems) {
@@ -168,6 +178,7 @@ export var useDownshift = function (_a) {
     });
     var closeMenu = function (e, reason) {
         keepHighlightedIndexRef.current = false;
+        isInputValueChangedRef.current = false;
         // * set to default highlighted
         setHighlightedIndex(DEFAULT_HIGHLIGHTED_INDEX, { reason: 'auto' });
         if (isOpen) {
@@ -318,6 +329,7 @@ export var useDownshift = function (_a) {
             updateInputValue('');
         }
         isSelectedFromAutocompleteRef.current = false;
+        isInputValueChangedRef.current = false;
         setActiveIndex(-1);
         if (!disableCloseOnSelect) {
             closeMenu(e, 'select-option');
@@ -342,7 +354,7 @@ export var useDownshift = function (_a) {
             event === null || event === void 0 ? void 0 : event.preventDefault();
         },
     }).onKeyFocusedIndexHandle;
-    var _m = useKeyboardMoveFocus({
+    var _o = useKeyboardMoveFocus({
         options: optionItems,
         focusedIndexRef: highlightedIndexRef,
         infinite: true,
@@ -355,7 +367,7 @@ export var useDownshift = function (_a) {
             : function (child) {
                 return !getIsItemCanSelected(child);
             },
-    }), onKeyFocusedIndexHandle = _m.onKeyFocusedIndexHandle, getNextFocusableOption = _m.getNextFocusableOption;
+    }), onKeyFocusedIndexHandle = _o.onKeyFocusedIndexHandle, getNextFocusableOption = _o.getNextFocusableOption;
     var keepHighlightedIndex = function () {
         keepHighlightedIndexRef.current = true;
     };
@@ -530,9 +542,11 @@ export var useDownshift = function (_a) {
                     handleSelectedItems([]);
                 }
                 fromPasteString.current = '';
+                isInputValueChangedRef.current = true;
             },
             onFocus: function (e) {
                 var _a;
+                setIsFocused(true);
                 if (openOnFocus)
                     openMenu(e);
                 // * when autocomplete mode, always select all text when focus
@@ -546,6 +560,7 @@ export var useDownshift = function (_a) {
                 }
             },
             onBlur: function (e) {
+                setIsFocused(false);
                 if (autoSelect && !stopAutoSelectRef.current) {
                     if (!freeSolo)
                         selectItemFn(optionItems[highlightedIndexRef.current], e);
@@ -796,6 +811,9 @@ export var useDownshift = function (_a) {
         reset: reset,
         forceUpdate: forceUpdate,
         optionsGroupList: optionsGroupList,
+        isFocused: isFocused,
+        id: downshiftId,
+        inputChanged: isInputValueChangedRef.current,
     };
     changeHighlightedIndexReason.current = undefined;
     return resultObj;

package/es6/components/Downshift/utils/useDownshiftGroup.js

@@ -1,33 +1,28 @@
 import { __assign, __read, __spread } from "tslib";
 import { useMemo } from 'react';
-import { combineProps, logInDev, omit, useChange, useEventCallback, useRefState, } from '../../../foundation';
+import { combineProps, logInDev, omit, useDepsChange, useEventCallback, useRefState, } from '../../../foundation';
 export var useDownshiftGroup = function (_a) {
-    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, groupExpanded = _a.groupExpanded, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, id = _a.id;
+    var groupBy = _a.groupBy, options = _a.options, filteredResult = _a.filteredResult, getExpandIconProps = _a.getExpandIconProps, groupExpanded = _a.groupExpanded, groupDefaultExpanded = _a.groupDefaultExpanded, onGroupExpanded = _a.onGroupExpanded, groupVariant = _a.groupVariant, getOptionDisabled = _a.getOptionDisabled, id = _a.id;
     var _b = __read(useRefState({}), 2), groupExpandedMapRef = _b[0], setGroupExpandedMap = _b[1];
     var isTitleGroup = groupVariant === 'normal';
-    useChange(function () {
-        if (typeof groupExpanded === 'object') {
-            setGroupExpandedMap(groupExpanded, false);
-        }
-    }, function () { return groupExpanded; });
-    var handleGroupExpandedChange = function (key) {
+    var handleGroupExpandedChange = function (groupName) {
         var _a;
         var groupExpandedMap = groupExpandedMapRef.current;
         if (typeof groupExpanded === 'boolean') {
             return;
         }
-        var toExpandedState = !groupExpandedMap[key];
-        var newExpandedMap = __assign(__assign({}, groupExpandedMap), (_a = {}, _a[key] = toExpandedState, _a));
+        var toExpandedState = !groupExpandedMap[groupName];
+        var newExpandedMap = __assign(__assign({}, groupExpandedMap), (_a = {}, _a[groupName] = toExpandedState, _a));
         setGroupExpandedMap(newExpandedMap);
         if (onGroupExpanded) {
-            var group = optionsGroupList.find(function (x) { return x.group === key; });
+            var group = optionsGroupList.find(function (x) { return x.group === groupName; });
             if (group) {
                 onGroupExpanded(__assign(__assign({}, omit(group, ['getExpandIconProps'])), { expanded: toExpandedState }), newExpandedMap);
             }
         }
     };
-    var handleExpandIconClick = useEventCallback(function (e, key) {
-        handleGroupExpandedChange(key);
+    var handleExpandIconClick = useEventCallback(function (e, groupName) {
+        handleGroupExpandedChange(groupName);
         e.preventDefault();
         e.stopPropagation();
     });
@@ -37,7 +32,8 @@ export var useDownshiftGroup = function (_a) {
             // used to keep track of key and indexes in the result array
             var indexBy_1 = new Map();
             var warn_1 = false;
-            return filteredResult.reduce(function (acc, option, index) {
+            var afterGroupFn_1 = [];
+            var result = filteredResult.reduce(function (acc, option, index) {
                 var group = groupBy(option);
                 if (acc.length > 0 && acc[acc.length - 1].group === group) {
                     acc[acc.length - 1].options.push(__assign(__assign({}, option), { group: acc[acc.length - 1] }));
@@ -76,41 +72,71 @@ export var useDownshiftGroup = function (_a) {
                     };
                     newGroup_1.options[0].group = newGroup_1;
                     if (isTitleGroup) {
-                        newGroup_1.options.unshift({
+                        var groupTitleOption_1 = {
                             id: id + "-" + group,
                             label: group,
                             disabled: true,
+                            // * here cause by self Type reference
                             group: newGroup_1,
-                        });
+                        };
+                        // push fn to array, do that after all options be add into group
+                        if (getOptionDisabled) {
+                            afterGroupFn_1.push(function () {
+                                groupTitleOption_1.disabled =
+                                    getOptionDisabled(groupTitleOption_1);
+                            });
+                        }
+                        newGroup_1.options.unshift(groupTitleOption_1);
                     }
                     acc.push(newGroup_1);
                 }
                 return acc;
             }, []);
+            afterGroupFn_1.forEach(function (fn) {
+                fn();
+            });
+            return result;
         }
         return [];
     }, [
         filteredResult,
         getExpandIconProps,
+        getOptionDisabled,
         groupBy,
         handleExpandIconClick,
         id,
         isTitleGroup,
         options,
     ]);
+    var initGroupExpandedState = function (expandedState) {
+        if (typeof expandedState === 'object') {
+            setGroupExpandedMap(expandedState, false);
+        }
+        else if (typeof expandedState === 'boolean') {
+            setGroupExpandedMap(optionsGroupList.reduce(function (prev, curr) {
+                prev[curr.group] = expandedState;
+                return prev;
+            }, {}), false);
+        }
+    };
+    useDepsChange(function () {
+        initGroupExpandedState(groupDefaultExpanded);
+    }, []);
+    useDepsChange(function () {
+        initGroupExpandedState(groupExpanded);
+    }, [groupExpanded]);
     var groupExpandedMap = groupExpandedMapRef.current;
     // * speared logic with group, prevent calculate every time.
     var groupedResult = useMemo(function () {
         var addExpandedResult = Object.entries(groupExpandedMap).reduce(function (prev, _a) {
             var _b = __read(_a, 2), key = _b[0], expended = _b[1];
             var group = prev.find(function (x) { return x.group === key; });
-            if (group) {
+            if (group)
                 group.expanded = expended;
-            }
             return prev;
         }, __spread(optionsGroupList));
         return addExpandedResult.reduce(function (prev, curr) {
-            if (typeof groupExpanded === 'boolean' ? groupExpanded : curr.expanded) {
+            if (curr.expanded) {
                 prev.push.apply(prev, __spread(curr.options));
             }
             else {
@@ -118,7 +144,7 @@ export var useDownshiftGroup = function (_a) {
             }
             return prev;
         }, []);
-    }, [groupExpandedMap, optionsGroupList, groupExpanded]);
+    }, [groupExpandedMap, optionsGroupList]);
     return {
         optionsGroupList: optionsGroupList,
         groupedResult: groupedResult,

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

@@ -105,9 +105,7 @@ var _NumberPicker = forwardRef(function (props, ref) {
         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, 
-            // * when both disabled that icon can't click into selection view
-            disabled: increaseDisabled && decreaseDisabled, "data-test-automation-id": automationId && automationId + "-text" },
+        React.createElement(StyledTimeIconButton, { wrapperSize: size, tabIndex: -1, onClick: onClick, "data-test-automation-id": automationId && automationId + "-text" },
             React.createElement(React.Fragment, null, 
             // TODO: that <></> will fix when `RcIconButton` ready
             showValue)),

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

@@ -12,6 +12,7 @@ import { StyledPickerPopperWrap } from './styles';
 import { ToggleText } from './ToggleText';
 import { getFormattedTime, getHourAndMinute, getNumberPickerBoundary, getPeriod, getRangeBoundary, getTimestamp, getTimestampFromDate, HALF_DAY_HOURS, minuteSource, parseNumberToString, RcTimePickerClasses, TIME_GAP, timestampToDate, twelveHourSystemSource, twentyFourHourSystemSource, } from './utils';
 var _RcTimePicker = forwardRef(function (inProps, ref) {
+    var _a;
     var props = useThemeProps({ props: inProps, name: 'RcTimePicker' });
     var isTwelveHourSystem = props.isTwelveHourSystem, value = props.value, times = props.times, onChange = props.onChange, disabled = props.disabled, dateMode = props.dateMode, min = props.min, max = props.max, size = props.size, onKeyDown = props.onKeyDown, onClear = props.onClear, HourPickerProps = props.HourPickerProps, MinutePickerProps = props.MinutePickerProps, PeriodToggleProps = props.PeriodToggleProps, PopoverPropsProp = props.PopoverProps, InputPropsProp = props.InputProps, classes = props.classes, rest = __rest(props, ["isTwelveHourSystem", "value", "times", "onChange", "disabled", "dateMode", "min", "max", "size", "onKeyDown", "onClear", "HourPickerProps", "MinutePickerProps", "PeriodToggleProps", "PopoverProps", "InputProps", "classes"]);
     // TODO: when props remove clear that code, not use forwardRef for Jupiter test issue
@@ -28,8 +29,8 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
     var minuteRef = useRef(null);
     var periodRef = useRef(null);
     var textFiledValueRef = useRef('');
-    var _a = __read(useState('none'), 2), selectionShowType = _a[0], setSelectionType = _a[1];
-    var nowTime = value || times;
+    var _b = __read(useState('none'), 2), selectionShowType = _b[0], setSelectionType = _b[1];
+    var nowTime = (_a = value) !== null && _a !== void 0 ? _a : times;
     var isHaveValue = nowTime !== undefined;
     var isDateMode = nowTime instanceof Date || dateMode;
     var currentTimestamp = getTimestamp(nowTime);
@@ -63,8 +64,8 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
                 onChange(toValue);
             }
             else {
-                // * when time is zero emit undefined
-                onChange(toValue ? getTimestampFromDate(toValue) : undefined);
+                // * when time is zero emit null
+                onChange(toValue ? getTimestampFromDate(toValue) : null);
             }
         }
     }, [isDateMode, onChange]);
@@ -110,22 +111,8 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
         return updateTime({ period: period });
     });
     var handleClear = useEventCallback(function (e) {
-        var time;
-        // if that is date format, we couldn't reset to undefined, that will miss that date information.
-        if (isDateMode) {
-            if (range.min.date) {
-                time = getEmitInitDate();
-                time.setHours(range.min.hour);
-                time.setMinutes(range.min.minute);
-            }
-            else {
-                time = new Date(nowTime);
-                time.setHours(0);
-                time.setMinutes(0);
-            }
-        }
         onClear === null || onClear === void 0 ? void 0 : onClear(e);
-        handleChange(time);
+        handleChange(null);
     });
     var handleSelectionViewClick = useEventCallback(function (toValue) {
         updateTime(isHourView ? { hour: toValue } : { minute: toValue });
@@ -135,7 +122,9 @@ var _RcTimePicker = forwardRef(function (inProps, ref) {
         var _a;
         (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.close();
     });
-    var setHourSelectionShow = useEventCallback(function () { return setSelectionType('hour'); });
+    var setHourSelectionShow = useEventCallback(function () {
+        return setSelectionType('hour');
+    });
     var setMinuteSelectionShow = useEventCallback(function () {
         return setSelectionType('minute');
     });
@@ -318,5 +307,10 @@ RcTimePicker.defaultProps = {
     },
 };
 RcTimePicker.displayName = 'RcTimePicker';
-export { RcTimePicker };
+/**
+ * when `dateMode={true}` that onChange will return `Date` object,
+ * otherwise return timestamp `number`
+ */
+var ExportType = RcTimePicker;
+export { ExportType as RcTimePicker };
 var templateObject_1;

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

@@ -2,3 +2,4 @@ export * from './NumberPicker';
 export * from './ToggleText';
 export * from './SelectionView';
 export * from './TimePicker';
+export * from './utils';

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

@@ -18,6 +18,12 @@ var pad = function (num, size) {
     }
     return s;
 };
+/**
+ * get formatted time hh:mm
+ * @param option `{hour, min, period}`
+ * @param isTwelveHourSystem boolean
+ * @returns `hh:mm AM` or `hh:mm PM` or `hh:mm`
+ */
 var getFormattedTime = function (_a, isTwelveHourSystem) {
     var hour = _a.hour, minute = _a.minute, period = _a.period;
     var formattedHour = parseNumberToString(hour, isTwelveHourSystem);
@@ -45,9 +51,15 @@ var twelveHourSystemSource = buildConsecutiveNumberToArray(0, 11);
 var twentyFourHourSystemSource = buildConsecutiveNumberToArray(0, 23);
 var minuteSource = [0, 15, 30, 45];
 var lastMinute = 45;
+/**
+ * hour and minute timestamp
+ */
 var getTimestampFromDate = function (date) {
     return date.getHours() * ONE_HOUR + date.getMinutes() * ONE_MINUTE;
 };
+/**
+ * hour and minute number
+ */
 var getHourAndMinute = function (times) {
     if (!times) {
         return {
@@ -59,21 +71,33 @@ var getHourAndMinute = function (times) {
     var hour = (times - minute) / ONE_HOUR;
     return {
         hour: hour,
-        minute: minute / ONE_MINUTE,
+        minute: Math.floor(minute / ONE_MINUTE),
     };
 };
+/**
+ * timestamp to date
+ */
 var timestampToDate = function (times) {
     var _a = getHourAndMinute(times), hour = _a.hour, minute = _a.minute;
     var date = new Date();
     date.setHours(hour, minute, 0, 0);
     return date;
 };
+/**
+ * get timestamp from date or timestamp
+ */
 function getTimestamp(nowTime) {
     return nowTime instanceof Date ? getTimestampFromDate(nowTime) : nowTime;
 }
+/**
+ * hour and min object to timestamp
+ */
 var getTimestampFromHourAndMin = function (option) {
     return option.hour * ONE_HOUR + option.minute * ONE_MINUTE;
 };
+/**
+ * get period, `PM` or `AM`
+ */
 function getPeriod(currHour) {
     return currHour >= HALF_DAY_HOURS ? TIME_SYSTEM_TEXT.PM : TIME_SYSTEM_TEXT.AM;
 }

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

@@ -17,9 +17,9 @@ var plainAnchorOrigin = {
     vertical: 'bottom',
 };
 var _RcPlainSelect = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, classes = _a.classes, value = _a.value, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, 
+    var children = _a.children, className = _a.className, classes = _a.classes, value = _a.value, renderValue = _a.renderValue, variant = _a.variant, ButtonProps = _a.ButtonProps, innerRef = _a.innerRef, SelectInputProps = _a.SelectInputProps, InputProps = _a.InputProps, disabled = _a.disabled, autoFocus = _a.autoFocus, size = _a.size, virtualize = _a.virtualize, fullWidth = _a.fullWidth, color = _a.color, 
     //
-    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, rest = __rest(_a, ["children", "className", "classes", "value", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "IconComponent", "onOpen", "onClose"]);
+    IconComponent = _a.IconComponent, onOpenProp = _a.onOpen, onCloseProp = _a.onClose, rest = __rest(_a, ["children", "className", "classes", "value", "renderValue", "variant", "ButtonProps", "innerRef", "SelectInputProps", "InputProps", "disabled", "autoFocus", "size", "virtualize", "fullWidth", "color", "IconComponent", "onOpen", "onClose"]);
     var _b = __read(useState(false), 2), open = _b[0], setOpen = _b[1];
     var display = useMemo(function () {
         var item = children.find(function (child) {
@@ -29,7 +29,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
     }, [children, value]);
     var _renderValue = useCallback(function (value) {
         var _variant = switchVariantToButtonVariant(variant);
-        return (React.createElement(RcButton, __assign({ ref: ref, innerRef: innerRef, disabled: disabled, size: size, fullWidth: fullWidth, autoFocus: autoFocus, variant: _variant, "aria-label": "open menu", "aria-haspopup": "listbox" }, combineProps(defaultButtonProps, ButtonProps)),
+        return (React.createElement(RcButton, __assign({ ref: ref, innerRef: innerRef, disabled: disabled, size: size, color: color, fullWidth: fullWidth, autoFocus: autoFocus, variant: _variant, "aria-label": "open menu", "aria-haspopup": "listbox" }, combineProps(defaultButtonProps, ButtonProps)),
             renderValue ? renderValue(value) : display,
             (IconComponent && React.createElement(IconComponent, { open: open })) || (React.createElement(SelectArrowDownIcon
             // * reset default color
@@ -42,6 +42,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
         ButtonProps,
         IconComponent,
         autoFocus,
+        color,
         disabled,
         display,
         fullWidth,
@@ -81,7 +82,7 @@ var _RcPlainSelect = forwardRef(function (_a, ref) {
         }, onClose: function (e) {
             setOpen(false);
             onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp(e);
-        }, SelectInputProps: _SelectInputProps, InputProps: _InputProps, renderValue: _renderValue, fullWidth: fullWidth }, rest), children));
+        }, SelectInputProps: _SelectInputProps, InputProps: _InputProps, renderValue: _renderValue, fullWidth: fullWidth, color: color }, rest), children));
 });
 /** @release */
 var RcPlainSelect = styled(_RcPlainSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), plainSelectStyle);

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

@@ -11,9 +11,10 @@ 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 /**
     // TODO: cancel button bellow icon margin issue,
-    // TODO: wait RCUI-234 merge below overwrite can be remove
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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    ", " {\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, 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        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "], ["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\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));
+*/, 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        ", ", &.Mui-focusVisible {\n          .", " {\n            background-color: currentColor;\n            opacity: ", ";\n          }\n          .", " {\n            display: none;\n          }\n        }\n      "], ["\n        padding-top: ", ";\n        padding-bottom: ", ";\n\n        ", ", &.Mui-focusVisible {\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));
 };
 var templateObject_1, templateObject_2;

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

@@ -14,7 +14,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'RcSelect' });
     var children = props.children, onChange = props.onChange, SelectInputPropsProp = props.SelectInputProps, textVariant = props.textVariant, placeholder = props.placeholder, renderValue = props.renderValue, displayEmpty = props.displayEmpty, variant = props.variant, size = props.size, value = props.value, virtualize = props.virtualize, 
     // * below is should pick into TextField props
-    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "SelectInputProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
+    focused = props.focused, gutterBottom = props.gutterBottom, helperText = props.helperText, color = props.color, label = props.label, id = props.id, className = props.className, validate = props.validate, InputProps = props.InputProps, required = props.required, fullWidth = props.fullWidth, disabled = props.disabled, error = props.error, rest = __rest(props, ["children", "onChange", "SelectInputProps", "textVariant", "placeholder", "renderValue", "displayEmpty", "variant", "size", "value", "virtualize", "focused", "gutterBottom", "helperText", "color", "label", "id", "className", "validate", "InputProps", "required", "fullWidth", "disabled", "error"]);
     var nonValue = value === undefined ||
         value === null ||
         // * if that can't displayEmpty, and that value === '', same as no value
@@ -62,7 +62,7 @@ var _RcSelect = forwardRef(function (inProps, ref) {
     var valueIsNumber = typeof value === 'number';
     return (React.createElement(RcSelectTextField, { ref: ref, id: id, className: className, 
         // for when that is select type that type will be select onChange, just any for ignore that
-        onChange: onChange, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, value: valueIsNumber ? value : value || '', validate: validate, required: required, fullWidth: fullWidth, disabled: disabled, error: error, InputProps: _InputProps, clearBtn: false, placeholder: placeholder, SelectProps: _SelectProps }, children));
+        onChange: onChange, color: color, select: true, focused: focused, gutterBottom: gutterBottom, helperText: helperText, label: label, value: valueIsNumber ? value : value || '', validate: validate, required: required, fullWidth: fullWidth, disabled: disabled, error: error, InputProps: _InputProps, clearBtn: false, placeholder: placeholder, SelectProps: _SelectProps }, children));
 });
 var RcSelect = styled(_RcSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), selectStyle);
 RcSelect.displayName = 'RcSelect';

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

@@ -1,5 +1,5 @@
-import { __makeTemplateObject } from "tslib";
-import { css, fakeBorder, palette2, px, radius, setOpacity, spacing, typography, } from '../../../../foundation';
+import { __assign, __makeTemplateObject } from "tslib";
+import { css, fakeBorder, getParsePaletteColor, palette2, px, radius, setOpacity, spacing, typography, } from '../../../../foundation';
 import { disabledColor, placeholderColor } from '../../TextField/styles';
 import { RcBoxSelectInputClasses, RcBoxSelectInputHeights, RcLineSelectInputClasses, RcSelectClasses, RcSelectInputClasses, RcSelectInputWhenPlaceholderClasses, } from '../utils';
 var boxBackgroundColor = palette2('neutral', 'b03');
@@ -8,23 +8,27 @@ var lineSelectStyle = css(templateObject_1 || (templateObject_1 = __makeTemplate
     var textVariant = _a.textVariant;
     return typography(textVariant || 'subheading1');
 }, setOpacity(palette2('action', 'grayDark'), '08'));
-var boxSelectStyle = 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) {
-    var size = _a.size;
-    return px(RcBoxSelectInputHeights[size]);
-}, radius('lg'), boxBackgroundColor, RcBoxSelectInputClasses.disabled, setOpacity(boxActionBackgroundColor, '12'), radius('lg'), fakeBorder({ color: palette2('highContrast') }), RcBoxSelectInputClasses.focused, setOpacity(boxActionBackgroundColor, '16'), fakeBorder({ color: palette2('interactive', 'f01') }), RcBoxSelectInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcBoxSelectInputClasses.disabled, setOpacity(palette2('action', 'grayLight'), '12'), fakeBorder({ color: 'transparent', allowTransparent: true }), RcBoxSelectInputClasses.input, spacing(1.5, 6, 1.5, 2), function (_a) {
-    var textVariant = _a.textVariant;
-    return typography(textVariant || 'body1');
-}, function (_a) {
-    var size = _a.size;
-    // here -12 for make this input height same as container
-    return px(RcBoxSelectInputHeights[size] - 12);
-});
-export var selectStyle = function (_a) {
-    var variant = _a.variant, placeholder = _a.placeholder;
-    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, palette2('interactive', 'f01'), RcSelectInputClasses.error, RcSelectClasses.icon, palette2('danger', 'f02'), RcSelectInputWhenPlaceholderClasses.input, placeholderColor, "'" + placeholder + "'", RcSelectInputClasses.disabled, disabledColor, RcSelectClasses.icon, disabledColor, variant === 'line' && lineSelectStyle, variant === 'box' && boxSelectStyle);
+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) {
+        var label = _a.label;
+        return label && spacing(5);
+    }, function (_a) {
+        var size = _a.size;
+        return px(RcBoxSelectInputHeights[size]);
+    }, radius('lg'), boxBackgroundColor, RcBoxSelectInputClasses.disabled, setOpacity(boxActionBackgroundColor, '12'), radius('lg'), fakeBorder({ color: palette2('highContrast') }), RcBoxSelectInputClasses.focused, setOpacity(boxActionBackgroundColor, '16'), fakeBorder({ color: color }), RcBoxSelectInputClasses.error, fakeBorder({ color: palette2('danger', 'f02') }), RcBoxSelectInputClasses.disabled, setOpacity(palette2('action', 'grayLight'), '12'), fakeBorder({ color: 'transparent', allowTransparent: true }), RcBoxSelectInputClasses.input, spacing(1.5, 6, 1.5, 2), function (_a) {
+        var textVariant = _a.textVariant;
+        return typography(textVariant || 'body1');
+    }, function (_a) {
+        var size = _a.size;
+        // here -12 for make this input height same as container
+        return px(RcBoxSelectInputHeights[size] - 12);
+    });
+};
+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 })));
 };
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -15,9 +15,9 @@ var _RcTextField = forwardRef(function (inProps, ref) {
     // TODO: remove when remove focusOnMount
     autoFocusProp = _a === void 0 ? focusOnMount : _a, InputPropsProp = props.InputProps, error = props.error, helperText = props.helperText, defaultValue = props.defaultValue, inputRefProp = props.inputRef, _b = props.autoSelect, autoSelect = _b === void 0 ? selectOnMount : _b, autoFocusDelay = props.autoFocusDelay, clearLabel = props.clearLabel, clearButtonProps = props.clearButtonProps, clearBtn = props.clearBtn, validate = props.validate, onChange = props.onChange, onBlur = props.onBlur, onFocus = props.onFocus, onClear = props.onClear, id = props.id, 
     // #region outline pick props
-    variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, 
+    variant = props.variant, radius = props.radius, size = props.size, align = props.align, textVariant = props.textVariant, gutterBottom = props.gutterBottom, color = props.color, 
     // #endregion
-    rest = __rest(props, ["classes", "InputLabelProps", "FormHelperTextProps", "value", "focusOnMount", "selectOnMount", "clearAriaLabel", "autoFocus", "InputProps", "error", "helperText", "defaultValue", "inputRef", "autoSelect", "autoFocusDelay", "clearLabel", "clearButtonProps", "clearBtn", "validate", "onChange", "onBlur", "onFocus", "onClear", "id", "variant", "radius", "size", "align", "textVariant", "gutterBottom"]);
+    rest = __rest(props, ["classes", "InputLabelProps", "FormHelperTextProps", "value", "focusOnMount", "selectOnMount", "clearAriaLabel", "autoFocus", "InputProps", "error", "helperText", "defaultValue", "inputRef", "autoSelect", "autoFocusDelay", "clearLabel", "clearButtonProps", "clearBtn", "validate", "onChange", "onBlur", "onFocus", "onClear", "id", "variant", "radius", "size", "align", "textVariant", "gutterBottom", "color"]);
     var formContext = useRcFormContext();
     var innerRef = useRef();
     var inputRef = useForkRef(inputRefProp, innerRef);