@ringcentral/juno 2.46.0 → 3.0.0-alpha.0

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.RcTimePicker = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useKeyDown_1 = require("@material-ui/pickers/_shared/hooks/useKeyDown");
@@ -17,15 +18,15 @@ var defaultPeriodTexts = {
     input: { AM: 'AM', PM: 'PM' },
     toggle: { AM: 'AM', PM: 'PM' },
 };
-var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
-    var props = foundation_1.useThemeProps({ props: inProps, name: 'RcTimePicker' });
+var _RcTimePicker = (0, react_1.forwardRef)(function (inProps, ref) {
+    var props = (0, foundation_1.useThemeProps)({ props: inProps, name: 'RcTimePicker' });
     var isTwelveHourSystem = props.isTwelveHourSystem, value = props.value, 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, defaultPickerValue = props.defaultPickerValue, _a = props.periodTexts, periodTexts = _a === void 0 ? defaultPeriodTexts : _a, rest = tslib_1.__rest(props, ["isTwelveHourSystem", "value", "onChange", "disabled", "dateMode", "min", "max", "size", "onKeyDown", "onClear", "HourPickerProps", "MinutePickerProps", "PeriodToggleProps", "PopoverProps", "InputProps", "classes", "defaultPickerValue", "periodTexts"]);
-    var actionRef = react_1.useRef(null);
-    var hourRef = react_1.useRef(null);
-    var minuteRef = react_1.useRef(null);
-    var periodRef = react_1.useRef(null);
-    var textFiledValueRef = react_1.useRef('');
-    var _b = tslib_1.__read(react_1.useState('none'), 2), selectionShowType = _b[0], setSelectionType = _b[1];
+    var actionRef = (0, react_1.useRef)(null);
+    var hourRef = (0, react_1.useRef)(null);
+    var minuteRef = (0, react_1.useRef)(null);
+    var periodRef = (0, react_1.useRef)(null);
+    var textFiledValueRef = (0, react_1.useRef)('');
+    var _b = tslib_1.__read((0, react_1.useState)('none'), 2), selectionShowType = _b[0], setSelectionType = _b[1];
     var _c = (function () {
         if (value !== null)
             return { nowTime: value, isShowTextfieldValue: true };
@@ -35,30 +36,30 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
     })(), nowTime = _c.nowTime, isShowTextfieldValue = _c.isShowTextfieldValue;
     var isHaveValue = nowTime !== null;
     var isDateMode = nowTime instanceof Date || dateMode;
-    var currentTimestamp = utils_2.getTimestamp(nowTime);
-    var currentHourMinute = utils_2.getHourAndMinute(currentTimestamp);
+    var currentTimestamp = (0, utils_2.getTimestamp)(nowTime);
+    var currentHourMinute = (0, utils_2.getHourAndMinute)(currentTimestamp);
     var isHourView = selectionShowType === 'hour';
-    var currentPeriod = utils_2.getPeriod(currentHourMinute.hour);
+    var currentPeriod = (0, utils_2.getPeriod)(currentHourMinute.hour);
     var recoupHour = isTwelveHourSystem && currentPeriod === constant_1.TIME_SYSTEM_TEXT.PM
         ? utils_2.HALF_DAY_HOURS
         : 0;
-    var range = react_1.useMemo(function () {
-        return utils_2.getRangeBoundary({ min: min, max: max });
+    var range = (0, react_1.useMemo)(function () {
+        return (0, utils_2.getRangeBoundary)({ min: min, max: max });
     }, [max, min]);
-    var getEmitInitDate = foundation_1.useEventCallback(function () {
+    var getEmitInitDate = (0, foundation_1.useEventCallback)(function () {
         var date = nowTime !== null ? new Date(nowTime) : new Date();
         var hour = currentHourMinute.hour, minute = currentHourMinute.minute;
         date.setHours(hour, minute, 0, 0);
         return date;
     });
-    var handleChange = react_1.useCallback(function (toValue) {
+    var handleChange = (0, react_1.useCallback)(function (toValue) {
         if (onChange) {
             if (isDateMode) {
                 onChange(toValue);
             }
             else {
                 // * when time is zero emit null
-                onChange(toValue ? utils_2.getTimestampFromDate(toValue) : null);
+                onChange(toValue ? (0, utils_2.getTimestampFromDate)(toValue) : null);
             }
         }
     }, [isDateMode, onChange]);
@@ -83,7 +84,7 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
                 time.setHours(currHour - utils_2.HALF_DAY_HOURS);
             }
         }
-        var toTimestamp = utils_2.getTimestamp(time);
+        var toTimestamp = (0, utils_2.getTimestamp)(time);
         if (range.max.date && toTimestamp > range.max.timestamp) {
             time.setHours(range.max.hour);
             time.setMinutes(range.max.minute);
@@ -94,72 +95,72 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         }
         handleChange(time);
     };
-    var handleHourChange = foundation_1.useEventCallback(function (hour) {
+    var handleHourChange = (0, foundation_1.useEventCallback)(function (hour) {
         updateTime({ hour: hour });
     });
-    var handleMinuteChange = foundation_1.useEventCallback(function (minute) {
+    var handleMinuteChange = (0, foundation_1.useEventCallback)(function (minute) {
         return updateTime({ minute: minute });
     });
-    var onTogglePeriod = foundation_1.useEventCallback(function (period) {
+    var onTogglePeriod = (0, foundation_1.useEventCallback)(function (period) {
         return updateTime({ period: period });
     });
-    var handleClear = foundation_1.useEventCallback(function (e) {
+    var handleClear = (0, foundation_1.useEventCallback)(function (e) {
         onClear === null || onClear === void 0 ? void 0 : onClear(e);
         handleChange(null);
     });
-    var handleSelectionViewClick = foundation_1.useEventCallback(function (toValue) {
+    var handleSelectionViewClick = (0, foundation_1.useEventCallback)(function (toValue) {
         updateTime(isHourView ? { hour: toValue } : { minute: toValue });
         setSelectionType('none');
     });
-    var closeMenu = foundation_1.useEventCallback(function () {
+    var closeMenu = (0, foundation_1.useEventCallback)(function () {
         var _a;
         (_a = actionRef.current) === null || _a === void 0 ? void 0 : _a.close();
     });
-    var setHourSelectionShow = foundation_1.useEventCallback(function () {
+    var setHourSelectionShow = (0, foundation_1.useEventCallback)(function () {
         return setSelectionType('hour');
     });
-    var setMinuteSelectionShow = foundation_1.useEventCallback(function () {
+    var setMinuteSelectionShow = (0, foundation_1.useEventCallback)(function () {
         return setSelectionType('minute');
     });
-    var handlePopoverKeydown = foundation_1.useEventCallback(function (event) {
+    var handlePopoverKeydown = (0, foundation_1.useEventCallback)(function (event) {
         var onConfirmAndClose = function () {
             updateTime({});
             closeMenu();
         };
-        useKeyDown_1.runKeyHandler(event, {
+        (0, useKeyDown_1.runKeyHandler)(event, {
             Enter: onConfirmAndClose,
             ' ': onConfirmAndClose,
             Escape: closeMenu,
         });
     });
-    var handleHourInnerChange = foundation_1.useEventCallback(function (hour) {
+    var handleHourInnerChange = (0, foundation_1.useEventCallback)(function (hour) {
         var minuteInstance = minuteRef.current;
         var periodInstance = periodRef.current;
-        var currRecoupHour = utils_2.getRecoupHour(hour, periodInstance === null || periodInstance === void 0 ? void 0 : periodInstance.value);
-        var newRange = utils_2.getNumberPickerBoundary(hour + currRecoupHour, {
+        var currRecoupHour = (0, utils_2.getRecoupHour)(hour, periodInstance === null || periodInstance === void 0 ? void 0 : periodInstance.value);
+        var newRange = (0, utils_2.getNumberPickerBoundary)(hour + currRecoupHour, {
             range: range,
             isTwelveHourSystem: isTwelveHourSystem,
         });
         minuteInstance.setRange(newRange.minute);
     });
-    var handlePeriodInnerChange = foundation_1.useEventCallback(function (period) {
+    var handlePeriodInnerChange = (0, foundation_1.useEventCallback)(function (period) {
         var minuteInstance = minuteRef.current;
         var hourInstance = hourRef.current;
         var currHour = hourInstance.value;
-        var currRecoupHour = utils_2.getRecoupHour(currHour, period);
-        var newRange = utils_2.getNumberPickerBoundary(currHour + currRecoupHour, {
+        var currRecoupHour = (0, utils_2.getRecoupHour)(currHour, period);
+        var newRange = (0, utils_2.getNumberPickerBoundary)(currHour + currRecoupHour, {
             range: range,
             isTwelveHourSystem: isTwelveHourSystem,
         });
         hourInstance.setRange(newRange.hour);
         minuteInstance.setRange(newRange.minute);
     });
-    var renderHourValue = foundation_1.useEventCallback(function (hourValue) {
-        return utils_2.parseNumberToString(hourValue, isTwelveHourSystem);
+    var renderHourValue = (0, foundation_1.useEventCallback)(function (hourValue) {
+        return (0, utils_2.parseNumberToString)(hourValue, isTwelveHourSystem);
     });
-    var PopoverProps = react_1.useMemo(function () {
-        return foundation_1.combineProps({
-            classes: foundation_1.combineClasses({
+    var PopoverProps = (0, react_1.useMemo)(function () {
+        return (0, foundation_1.combineProps)({
+            classes: (0, foundation_1.combineClasses)({
                 root: utils_2.RcTimePickerClasses.popover,
                 paper: utils_2.RcTimePickerClasses.popoverPaper,
             }, {
@@ -173,7 +174,7 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         }, PopoverPropsProp);
     }, [PopoverPropsProp, classes, handlePopoverKeydown]);
     // * make sure value inside range
-    react_1.useLayoutEffect(function () {
+    (0, react_1.useLayoutEffect)(function () {
         if (currentTimestamp === null)
             return;
         var time = getEmitInitDate();
@@ -189,13 +190,13 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         }
     }, [currentTimestamp, range, handleChange, getEmitInitDate]);
     // * update input value
-    foundation_1.useDepsChange(function () {
+    (0, foundation_1.useDepsChange)(function () {
         if (!isShowTextfieldValue) {
             textFiledValueRef.current = '';
             return;
         }
         var hour = currentHourMinute.hour, minute = currentHourMinute.minute;
-        var formattedTime = utils_2.getFormattedTime({
+        var formattedTime = (0, utils_2.getFormattedTime)({
             hour: hour,
             minute: minute,
             period: currentPeriod,
@@ -217,14 +218,14 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         : // * use original range to calculate period value
             range.min.hour || 0;
     // * get boundary must use current show value
-    var boundary = react_1.useMemo(function () {
-        return utils_2.getNumberPickerBoundary(originalHourValue, {
+    var boundary = (0, react_1.useMemo)(function () {
+        return (0, utils_2.getNumberPickerBoundary)(originalHourValue, {
             range: range,
             isTwelveHourSystem: isTwelveHourSystem,
         });
     }, [isTwelveHourSystem, originalHourValue, range]);
     // * when min and max is in same period
-    var toggleTextDisabled = react_1.useMemo(function () {
+    var toggleTextDisabled = (0, react_1.useMemo)(function () {
         return !!(range.min.hour &&
             // * min is pm time
             (range.min.hour >= utils_2.HALF_DAY_HOURS ||
@@ -242,7 +243,7 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
         : boundary.minute.min;
     var periodValue = isHaveValue
         ? currentPeriod
-        : utils_2.getPeriod(originalHourValue);
+        : (0, utils_2.getPeriod)(originalHourValue);
     return (react_1.default.createElement(utils_1.PickerTextField, tslib_1.__assign({ ref: ref, action: actionRef, onClear: handleClear, value: textFiledValueRef.current, disabled: disabled, PopoverProps: PopoverProps, ActionSymbol: juno_icon_1.TimeBorder }, rest),
         react_1.default.createElement(styles_1.StyledPickerPopperWrap, { size: size }, selectionShowType === 'none' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(NumberPicker_1.NumberPicker, tslib_1.__assign({ ref: hourRef, size: size, onInnerChange: handleHourInnerChange, onClick: setHourSelectionShow, onClose: closeMenu, value: hourValue }, boundary.hour, { onUpdateValue: handleHourChange, step: 1, source: isTwelveHourSystem
@@ -255,27 +256,27 @@ var _RcTimePicker = react_1.forwardRef(function (inProps, ref) {
                 ? isTwelveHourSystem
                     ? utils_2.twelveHourSystemSource
                     : utils_2.twentyFourHourSystemSource
-                : utils_2.minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? hourValue : minuteValue, onClick: handleSelectionViewClick, automationId: "time-picker-" + selectionShowType }))))));
+                : utils_2.minuteSource, isTwelveHourSystem: isHourView && isTwelveHourSystem, value: isHourView ? hourValue : minuteValue, onClick: handleSelectionViewClick, automationId: "time-picker-".concat(selectionShowType) }))))));
 });
 /** @release */
-var RcTimePicker = foundation_1.styled(_RcTimePicker)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
+var RcTimePicker = (0, foundation_1.styled)(_RcTimePicker)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
 RcTimePicker.defaultProps = {
     clearBtn: true,
     dateMode: false,
     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 " + utils_2.TIME_GAP + " minutes";
+            return "Minute: ".concat(minute, ", use up and down arrow keys to change minutes time by ").concat(utils_2.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/components/Forms/Picker/TimePicker/ToggleText.d.ts

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { TIME_SYSTEM_TEXT } from './constant';
 import { RcClickFiledStyleProps } from './TimePicker';
-declare type ToggleTextProps = {
+type ToggleTextProps = {
     /** when user click th display text to change */
     onUpdateValue: (value: TIME_SYSTEM_TEXT) => void;
     /** trigger when inner update */
@@ -18,10 +18,10 @@ declare type ToggleTextProps = {
         PM: string;
     };
 } & RcClickFiledStyleProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'value'>;
-declare type ToggleTextRef = {
+type ToggleTextRef = {
     value: TIME_SYSTEM_TEXT;
 };
-declare const ToggleText: import("styled-components").StyledComponentClass<{
+declare const ToggleText: import("styled-components").StyledComponent<React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     /** when user click th display text to change */
     onUpdateValue: (value: TIME_SYSTEM_TEXT) => void;
     /** trigger when inner update */
@@ -37,24 +37,6 @@ declare const ToggleText: import("styled-components").StyledComponentClass<{
         AM: string;
         PM: string;
     };
-} & RcClickFiledStyleProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<ToggleTextRef>, import("../../../../foundation").RcTheme, Pick<{
-    /** when user click th display text to change */
-    onUpdateValue: (value: TIME_SYSTEM_TEXT) => void;
-    /** trigger when inner update */
-    onInnerChange?: ((value: TIME_SYSTEM_TEXT) => void) | undefined;
-    /** initial value */
-    value: TIME_SYSTEM_TEXT;
-    /** get label for screen reader */
-    getScreenReaderLabel?: ((value: string) => string) | undefined;
-    /** trigger when confirm value */
-    onClose: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    /** custom text for 'AM' and 'PM' */
-    periodTexts: {
-        AM: string;
-        PM: string;
-    };
-} & RcClickFiledStyleProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<ToggleTextRef>, "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "translate" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "onClose" | "onUpdateValue" | "isTwelveHourSystem" | "onInnerChange" | "getScreenReaderLabel" | "periodTexts"> & {
-    theme?: import("../../../../foundation").RcTheme | undefined;
-}>;
+} & RcClickFiledStyleProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "value"> & React.RefAttributes<ToggleTextRef>>>, import("../../../../foundation").RcTheme, {}, never>;
 export { ToggleText };
 export type { ToggleTextProps, ToggleTextRef };

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleText = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useKeyDown_1 = require("@material-ui/pickers/_shared/hooks/useKeyDown");
@@ -8,10 +9,10 @@ var constant_1 = require("./constant");
 var styles_1 = require("./styles");
 var utils_1 = require("./utils");
 var A11yUtils_1 = require("./utils/A11yUtils");
-var _ToggleText = react_1.memo(react_1.forwardRef(function (_a, ref) {
+var _ToggleText = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
     var onUpdateValue = _a.onUpdateValue, onInnerChange = _a.onInnerChange, value = _a.value, size = _a.size, disabled = _a.disabled, getScreenReaderLabel = _a.getScreenReaderLabel, onClose = _a.onClose, periodTexts = _a.periodTexts, rest = tslib_1.__rest(_a, ["onUpdateValue", "onInnerChange", "value", "size", "disabled", "getScreenReaderLabel", "onClose", "periodTexts"]);
-    var _b = tslib_1.__read(foundation_1.useRefState(value), 2), innerValueRef = _b[0], setInnerValue = _b[1];
-    foundation_1.useChange(function () {
+    var _b = tslib_1.__read((0, foundation_1.useRefState)(value), 2), innerValueRef = _b[0], setInnerValue = _b[1];
+    (0, foundation_1.useChange)(function () {
         if (innerValueRef.current !== value) {
             setInnerValue(value, false);
         }
@@ -21,12 +22,12 @@ var _ToggleText = react_1.memo(react_1.forwardRef(function (_a, ref) {
     var nextValue = innerValue === constant_1.TIME_SYSTEM_TEXT.AM
         ? constant_1.TIME_SYSTEM_TEXT.PM
         : constant_1.TIME_SYSTEM_TEXT.AM;
-    var handleClick = foundation_1.useEventCallback(function (event) {
-        if (disabled || !A11yUtils_1.isClick(event))
+    var handleClick = (0, foundation_1.useEventCallback)(function (event) {
+        if (disabled || !(0, A11yUtils_1.isClick)(event))
             return;
         onUpdateValue(nextValue);
     });
-    var handleToggleKeyDown = foundation_1.useEventCallback(function (event) {
+    var handleToggleKeyDown = (0, foundation_1.useEventCallback)(function (event) {
         if (disabled) {
             return;
         }
@@ -39,20 +40,20 @@ var _ToggleText = react_1.memo(react_1.forwardRef(function (_a, ref) {
             onUpdateValue(innerValue);
             onClose(event);
         };
-        useKeyDown_1.runKeyHandler(event.nativeEvent, {
+        (0, useKeyDown_1.runKeyHandler)(event.nativeEvent, {
             ArrowUp: togglePeriod,
             ArrowDown: togglePeriod,
             Enter: keydownSubmit,
             ' ': keydownSubmit,
         });
     });
-    react_1.useImperativeHandle(ref, function () { return ({
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
         value: innerValue,
     }); }, [innerValue]);
     return (react_1.default.createElement(styles_1.StyledTimeIconButton, tslib_1.__assign({ wrapperSize: size, onClick: handleClick, onKeyDown: handleToggleKeyDown, disabled: disabled, color: "informative.f02", "aria-live": "assertive", "aria-label": label }, rest),
         react_1.default.createElement(react_1.default.Fragment, null, periodTexts[innerValue])));
 }));
-var ToggleText = foundation_1.styled(_ToggleText)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
+var ToggleText = (0, foundation_1.styled)(_ToggleText)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  margin-left: ", ";\n"], ["\n  margin-left: ", ";\n"])), function (_a) {
     var size = _a.size;
     return utils_1.RcTimePickerUtils[size].timeSystem.margin;
 });

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TIME_SYSTEM_TEXT = exports.K_SPACE = exports.K_ENTER = void 0;
 var TIME_SYSTEM_TEXT;
 (function (TIME_SYSTEM_TEXT) {
     TIME_SYSTEM_TEXT["PM"] = "PM";
     TIME_SYSTEM_TEXT["AM"] = "AM";
-})(TIME_SYSTEM_TEXT || (TIME_SYSTEM_TEXT = {}));
-exports.TIME_SYSTEM_TEXT = TIME_SYSTEM_TEXT;
+})(TIME_SYSTEM_TEXT || (exports.TIME_SYSTEM_TEXT = TIME_SYSTEM_TEXT = {}));
 var K_ENTER = 'Enter';
 exports.K_ENTER = K_ENTER;
 var K_SPACE = ' ';

package/components/Forms/Picker/TimePicker/styles/StyledNumberPicker.d.ts

@@ -1,3 +1 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
-export declare const StyledNumberPicker: import("styled-components").StyledComponentClass<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../../../../foundation").RcTheme, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const StyledNumberPicker: import("styled-components").StyledComponent<"div", import("../../../../../foundation").RcTheme, {}, never>;

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledNumberPicker = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var Buttons_1 = require("../../../../Buttons");
 var utils_1 = require("../../../../Buttons/IconButton/utils");
-exports.StyledNumberPicker = foundation_1.styled.div(templateObject_1 || (templateObject_1 = tslib_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"])), foundation_1.focusVisibleShadowStyle('lg'), foundation_1.focusVisible, Buttons_1.RcIconButton, "&:not(." + utils_1.RcIconButtonClasses.disabled + ")", foundation_1.palette2('interactive', 'f01'), foundation_1.spacing(2));
+exports.StyledNumberPicker = foundation_1.styled.div(templateObject_1 || (templateObject_1 = tslib_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"])), (0, foundation_1.focusVisibleShadowStyle)('lg'), foundation_1.focusVisible, Buttons_1.RcIconButton, "&:not(.".concat(utils_1.RcIconButtonClasses.disabled, ")"), (0, foundation_1.palette2)('interactive', 'f01'), (0, foundation_1.spacing)(2));
 var templateObject_1;

package/components/Forms/Picker/TimePicker/styles/StyledPickerPopperWrap.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
 import { RcTimePickerProps } from '../TimePicker';
-export declare const StyledPickerPopperWrap: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcTimePickerProps<false>, "className" | "id" | "max" | "min" | "radius" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "label" | "classes" | "placeholder" | "size" | "variant" | "disabled" | "action" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "helperText" | "gutterBottom" | "onClear" | "clearBtn" | "clearButtonProps" | "validate" | "PopoverProps" | "ActionSymbol" | "isTwelveHourSystem" | "dateMode" | "HourPickerProps" | "MinutePickerProps" | "PeriodToggleProps" | "defaultPickerValue">, import("../../../../../foundation").RcTheme, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<RcTimePickerProps<false>, "className" | "id" | "max" | "min" | "radius" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "label" | "classes" | "placeholder" | "size" | "variant" | "disabled" | "action" | "autoFocus" | "fullWidth" | "error" | "inputProps" | "inputRef" | "required" | "InputProps" | "helperText" | "gutterBottom" | "onClear" | "clearBtn" | "clearButtonProps" | "validate" | "PopoverProps" | "ActionSymbol" | "isTwelveHourSystem" | "dateMode" | "HourPickerProps" | "MinutePickerProps" | "PeriodToggleProps" | "defaultPickerValue">>;
+export declare const StyledPickerPopperWrap: import("styled-components").StyledComponent<"div", import("../../../../../foundation").RcTheme, Omit<RcTimePickerProps, "value" | "periodTexts">, never>;

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

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPickerPopperWrap = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../utils");
-exports.StyledPickerPopperWrap = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
+exports.StyledPickerPopperWrap = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var size = _a.size;
     var _b = utils_1.RcTimePickerUtils[size], width = _b.width, height = _b.height;
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_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    "])), foundation_1.flexCenterStyle, width, height, foundation_1.spacing(3, 4), foundation_1.palette2('neutral', 'f06'));
+    return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_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    "])), foundation_1.flexCenterStyle, width, height, (0, foundation_1.spacing)(3, 4), (0, foundation_1.palette2)('neutral', 'f06'));
 });
 var templateObject_1, templateObject_2;

package/components/Forms/Picker/TimePicker/styles/StyledSelectionItem.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/// <reference types="styled-jsx" />
-export declare const StyledSelectionItem: import("styled-components").StyledComponentClass<Pick<import("./StyledTimeIconButton").StyledTimeIconButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as" | "itemLength" | "wrapperSize"> & import("react").RefAttributes<any>, import("../../../../../foundation").RcTheme, Pick<Pick<import("./StyledTimeIconButton").StyledTimeIconButtonProps, "symbol" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "theme" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as" | "itemLength" | "wrapperSize"> & import("react").RefAttributes<any>, "symbol" | "ref" | "key" | "form" | "className" | "color" | "id" | "lang" | "name" | "style" | "type" | "role" | "tabIndex" | "elevation" | "href" | "radius" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "slot" | "title" | "download" | "translate" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "size" | "value" | "variant" | "innerRef" | "disabled" | "action" | "buttonRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "loading" | "CircularProgressProps" | "iconColor" | "iconSize" | "invisible" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "IconProps" | "focusVariant" | "useRcTooltip" | "TooltipProps" | "selected" | "shouldPersistBg" | "stretchIcon" | "useColorWhenDisabled" | "activeElevation" | "disabledFakeBorder" | "alwaysEnableTooltip" | "tooltipTitle" | "tooltipPlacement" | "disableToolTip" | "popperProps" | "tooltipForceHide" | "externalLink" | "ariaLabel" | "aRef" | "as" | "itemLength" | "wrapperSize"> & {
-    theme?: import("../../../../../foundation").RcTheme | undefined;
-}>;
+export declare const StyledSelectionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("./StyledTimeIconButton").StyledTimeIconButtonProps, "ref"> & import("react").RefAttributes<any>>, import("../../../../../foundation").RcTheme, {}, never>;

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSelectionItem = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var StyledTimeIconButton_1 = require("./StyledTimeIconButton");
-exports.StyledSelectionItem = foundation_1.styled(StyledTimeIconButton_1.StyledTimeIconButton)(templateObject_1 || (templateObject_1 = tslib_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"])), foundation_1.typography('body1'), function (_a) {
+exports.StyledSelectionItem = (0, foundation_1.styled)(StyledTimeIconButton_1.StyledTimeIconButton)(templateObject_1 || (templateObject_1 = tslib_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"])), (0, foundation_1.typography)('body1'), function (_a) {
     var itemLength = _a.itemLength, wrapperSize = _a.wrapperSize;
-    return foundation_1.spacing(wrapperSize === 'small' && itemLength === 4 ? 2 : 1);
+    return (0, foundation_1.spacing)(wrapperSize === 'small' && itemLength === 4 ? 2 : 1);
 });
 var templateObject_1;

package/components/Forms/Picker/TimePicker/styles/StyledSelectionView.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-/// <reference types="styled-jsx" />
 import { RcClickFiledStyleProps } from '../TimePicker';
-export declare const StyledSelectionView: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RcClickFiledStyleProps, import("../../../../../foundation").RcTheme, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RcClickFiledStyleProps>;
+export declare const StyledSelectionView: import("styled-components").StyledComponent<"div", import("../../../../../foundation").RcTheme, RcClickFiledStyleProps, never>;

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSelectionView = void 0;
 var tslib_1 = require("tslib");
 var foundation_1 = require("../../../../../foundation");
 var utils_1 = require("../utils");
-exports.StyledSelectionView = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ",
-    ";\n"])), function (_a) {
+exports.StyledSelectionView = foundation_1.styled.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var size = _a.size;
     var _b = utils_1.RcTimePickerUtils[size], width = _b.width, height = _b.height;
-    return foundation_1.css(templateObject_1 || (templateObject_1 = tslib_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    "])), foundation_1.flexCenterStyle, foundation_1.spacing(2), width, height, foundation_1.spacing(-3, -4));
+    return (0, foundation_1.css)(templateObject_1 || (templateObject_1 = tslib_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    "])), foundation_1.flexCenterStyle, (0, foundation_1.spacing)(2), width, height, (0, foundation_1.spacing)(-3, -4));
     /** reset wrapper margin */
 });
 var templateObject_1, templateObject_2;