@onesy/ui-react 1.0.172 → 1.0.174

package/TextToSpeech/TextToSpeech.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,7 +16,8 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
-const _excluded = ["size", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "size", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -33,7 +33,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TextToSpeech'
 });
-const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TextToSpeech = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -42,6 +42,7 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
   const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
   const {
+      ref,
       size = 'regular',
       read,
       speechSynthesisUtterance,
@@ -145,7 +146,7 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     name = l('Pause');
   }
   if (status === 'paused') name = l('Resume');
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
@@ -156,15 +157,20 @@ const TextToSpeech = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextToSpeech', theme) && [`onesy-TextToSpeech-root`, `onesy-TextToSpeech-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: name
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    onClick: onClick
-  }, iconButtonProps, {
-    selected: status === 'started',
-    disabled: disabled !== undefined ? disabled : !supported,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextToSpeech', theme) && [`onesy-TextToSpeech-iconButton`], classes.iconButton])
-  }), /*#__PURE__*/_react.default.createElement(IconToUse, iconProps))));
-});
+  }, other), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+      name: name
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        onClick: onClick
+      }, iconButtonProps), {}, {
+        selected: status === 'started',
+        disabled: disabled !== undefined ? disabled : !supported,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextToSpeech', theme) && [`onesy-TextToSpeech-iconButton`], classes.iconButton]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconToUse, _objectSpread({}, iconProps))
+      }))
+    }))
+  }));
+};
 TextToSpeech.displayName = 'onesy-TextToSpeech';
 var _default = exports.default = TextToSpeech;

package/TimePicker/TimePicker.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -32,7 +31,8 @@ var _Tab = _interopRequireDefault(require("../Tab"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _DatePicker = require("../DatePicker/DatePicker");
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "version", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "size", "range", "now", "label", "min", "max", "validate", "autoNext", "autoCloseOnLast", "openMobile", "openDesktop", "selectModalSubHeadingText", "selectModalSubHeadingTextRange", "inputModalSubHeadingText", "inputModalSubHeadingTextRange", "orientation", "format", "hour", "minute", "second", "switch", "static", "today", "clear", "placeholder", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onCancel", "onNow", "onToday", "onClear", "onOk", "renderValue", "Icon", "IconEnter", "WrapperProps", "MainProps", "ModalProps", "MiddleProps", "ButtonProps", "TooltipProps", "ToggleButtonsProps", "ToggleButtonProps", "IconButtonProps", "InputProps", "ClockProps", "TabsProps", "TabFromProps", "TabToProps", "AdvancedTextFieldProps", "IconProps", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "version", "value", "valueDefault", "onChange", "selecting", "selectingDefault", "onChangeSelecting", "size", "range", "now", "label", "min", "max", "validate", "autoNext", "autoCloseOnLast", "openMobile", "openDesktop", "selectModalSubHeadingText", "selectModalSubHeadingTextRange", "inputModalSubHeadingText", "inputModalSubHeadingTextRange", "orientation", "format", "hour", "minute", "second", "switch", "static", "today", "clear", "placeholder", "heading", "actions", "fullWidth", "readOnly", "disabled", "valid", "onClick", "onClose", "onCancel", "onNow", "onToday", "onClear", "onOk", "renderValue", "Icon", "IconEnter", "WrapperProps", "MainProps", "ModalProps", "MiddleProps", "ButtonProps", "TooltipProps", "ToggleButtonsProps", "ToggleButtonProps", "IconButtonProps", "InputProps", "ClockProps", "TabsProps", "TabFromProps", "TabToProps", "AdvancedTextFieldProps", "IconProps", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -214,7 +214,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TimePicker'
 });
-const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+const TimePicker = props__ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -235,6 +235,7 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const Tab = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Tab) || _Tab.default;
   const Tabs = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.Tabs) || _Tabs.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       version: version_ = 'auto',
@@ -664,7 +665,7 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const iconButtonProps = _objectSpread({
     size
   }, IconButtonProps);
-  const clock = (index_6 = 0) => /*#__PURE__*/_react.default.createElement(Clock, (0, _extends2.default)({
+  const clock = (index_6 = 0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Clock, _objectSpread({
     size: size,
     format: format,
     value: value[index_6] || new _date.OnesyDate(),
@@ -683,7 +684,7 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }, ClockProps));
   const moreProps = {};
   if (version === 'desktop') {
-    moreProps.end = /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    moreProps.end = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       size: size,
@@ -691,7 +692,9 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       onClick: onOpen,
       "aria-label": l('Choose time'),
       disabled: disabled || readOnly
-    }, iconButtonProps), /*#__PURE__*/_react.default.createElement(Icon_, IconProps));
+    }, iconButtonProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps))
+    }));
   }
   const makeInputs = (index_7 = 0) => {
     const inputProps = _objectSpread({
@@ -717,21 +720,23 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         color: theme.palette.text.default.primary
       }
     };
-    const separator = /*#__PURE__*/_react.default.createElement(Type, {
+    const separator = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
       version: size === 'large' ? 'd1' : size === 'regular' ? 'd2' : 'd3',
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-input-separator'], classes.inputSeparator]),
       style: _objectSpread({}, mode !== 'select' && {
         marginTop: -24
-      })
-    }, ":");
+      }),
+      children: ":"
+    });
     const buttons = [];
     const inputs = [];
     if (hour) {
-      buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
+      buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
         selected: selecting[index_7] === 'hour',
-        onClick: () => onUpdateSelecting('hour', index_7)
-      }), (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH')));
-      inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
+        onClick: () => onUpdateSelecting('hour', index_7),
+        children: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH')
+      })));
+      inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Hour'),
         value: (0, _date.format)(value[index_7], format === '12' ? 'hh' : 'HH'),
         onChange: valueNew_18 => onInputModalChange(valueNew_18, 'hour', index_7),
@@ -748,11 +753,12 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         buttons.push(separator);
         inputs.push(separator);
       }
-      buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
+      buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
         selected: selecting[index_7] === 'minute',
-        onClick: () => onUpdateSelecting('minute', index_7)
-      }), (0, _date.format)(value[index_7], 'mm')));
-      inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
+        onClick: () => onUpdateSelecting('minute', index_7),
+        children: (0, _date.format)(value[index_7], 'mm')
+      })));
+      inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Minute'),
         value: (0, _date.format)(value[index_7], 'mm'),
         onChange: valueNew_19 => onInputModalChange(valueNew_19, 'minute', index_7),
@@ -769,11 +775,12 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         buttons.push(separator);
         inputs.push(separator);
       }
-      buttons.push(/*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({}, buttonProps_, {
+      buttons.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, buttonProps_), {}, {
         selected: selecting[index_7] === 'second',
-        onClick: () => onUpdateSelecting('second', index_7)
-      }), (0, _date.format)(value[index_7], 'ss')));
-      inputs.push(/*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
+        onClick: () => onUpdateSelecting('second', index_7),
+        children: (0, _date.format)(value[index_7], 'ss')
+      })));
+      inputs.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread({
         helperText: l('Second'),
         value: (0, _date.format)(value[index_7], 'ss'),
         onChange: valueNew_20 => onInputModalChange(valueNew_20, 'second', index_7),
@@ -795,166 +802,195 @@ const TimePicker = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   });
   const orientationValue = mode === 'select' ? orientation : 'vertical';
   const timeValue = range ? [0, 1] : [0];
-  const elementValues = timeValue.map((item_15, index_8) => /*#__PURE__*/_react.default.createElement(Line, {
-    key: index_8,
+  const elementValues = timeValue.map((item_15, index_8) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
     gap: 4.5,
     direction: orientationValue === 'vertical' ? 'column' : 'row',
     align: "center",
     justify: "unset",
     style: {
       width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: orientationValue === 'vertical' ? 1.5 : 2,
-    direction: orientationValue === 'vertical' ? 'row' : 'column',
-    justify: "center",
-    align: "unset",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-inputs'], classes.inputs])
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    fullWidth: true
-  }, makeInputs(index_8)), format === '12' && /*#__PURE__*/_react.default.createElement(ToggleButtons, (0, _extends2.default)({
-    version: "outlined",
-    size: size,
-    orientation: orientationValue,
-    value: dayTime[index_8] || (0, _date.format)(new _date.OnesyDate(), 'a'),
-    onChange: valueNew_21 => updateDayTime(valueNew_21, index_8),
-    select: "single",
-    unselect: false
-  }, ToggleButtonsProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-toggle-buttons'], ToggleButtonsProps === null || ToggleButtonsProps === void 0 ? void 0 : ToggleButtonsProps.className, classes.toggleButtons, classes[`toggleButtons_orientation_${orientationValue}_size_${size}`]])
-  }), /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-    value: "am"
-  }, toggleButtonProps), "AM"), /*#__PURE__*/_react.default.createElement(ToggleButton, (0, _extends2.default)({
-    value: "pm"
-  }, toggleButtonProps), "PM"))), mode === 'select' && clock(index_8)));
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: orientationValue === 'vertical' ? 1.5 : 2,
+      direction: orientationValue === 'vertical' ? 'row' : 'column',
+      justify: "center",
+      align: "unset",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-inputs'], classes.inputs]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 0,
+        direction: "row",
+        align: "center",
+        justify: "center",
+        fullWidth: true,
+        children: makeInputs(index_8)
+      }), format === '12' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToggleButtons, _objectSpread(_objectSpread({
+        version: "outlined",
+        size: size,
+        orientation: orientationValue,
+        value: dayTime[index_8] || (0, _date.format)(new _date.OnesyDate(), 'a'),
+        onChange: valueNew_21 => updateDayTime(valueNew_21, index_8),
+        select: "single",
+        unselect: false
+      }, ToggleButtonsProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-toggle-buttons'], ToggleButtonsProps === null || ToggleButtonsProps === void 0 ? void 0 : ToggleButtonsProps.className, classes.toggleButtons, classes[`toggleButtons_orientation_${orientationValue}_size_${size}`]]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          value: "am"
+        }, toggleButtonProps), {}, {
+          children: "AM"
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButton, _objectSpread(_objectSpread({
+          value: "pm"
+        }, toggleButtonProps), {}, {
+          children: "PM"
+        }))]
+      }))]
+    }), mode === 'select' && clock(index_8)]
+  }, index_8));
   const heading = mode === 'select' ? !range ? selectModalSubHeadingText : selectModalSubHeadingTextRange : !range ? inputModalSubHeadingText : inputModalSubHeadingTextRange;
-  const actions = /*#__PURE__*/_react.default.createElement(Line, {
+  const actions = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
     direction: "row",
     align: "center",
     justify: "space-between",
     fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer, classes[`footer_size_${size}`]])
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, switch_ && /*#__PURE__*/_react.default.createElement(Tooltip, {
-    name: mode === 'select' ? l('Enter time') : l('Select time')
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    tonal: tonal,
-    color: "inherit",
-    size: size,
-    onClick: onModeSwitch,
-    "aria-label": mode === 'select' ? l('Enter time') : l('Select time')
-  }, iconButtonProps), mode === 'select' ? /*#__PURE__*/_react.default.createElement(IconEnter, IconProps) : /*#__PURE__*/_react.default.createElement(Icon_, IconProps))), today && /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    onClick: onToday,
-    version: "text",
-    size: size
-  }, buttonProps), l('Now')), clear && /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    onClick: onClear,
-    version: "text",
-    size: size
-  }, buttonProps), l('Clear'))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    tonal: tonal,
-    color: color,
-    version: "text",
-    size: size,
-    onClick: onCancel
-  }, buttonProps), l('Cancel')), /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-    tonal: tonal,
-    color: color,
-    version: "text",
-    size: size,
-    onClick: onOk
-  }, buttonProps), l('Ok'))));
-  const element = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-footer'], classes.footer, classes[`footer_size_${size}`]]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [switch_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+        name: mode === 'select' ? l('Enter time') : l('Select time'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+          tonal: tonal,
+          color: "inherit",
+          size: size,
+          onClick: onModeSwitch,
+          "aria-label": mode === 'select' ? l('Enter time') : l('Select time')
+        }, iconButtonProps), {}, {
+          children: mode === 'select' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconEnter, _objectSpread({}, IconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon_, _objectSpread({}, IconProps))
+        }))
+      }), today && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+        onClick: onToday,
+        version: "text",
+        size: size
+      }, buttonProps), {}, {
+        children: l('Now')
+      })), clear && /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+        onClick: onClear,
+        version: "text",
+        size: size
+      }, buttonProps), {}, {
+        children: l('Clear')
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 0,
+      direction: "row",
+      align: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+        tonal: tonal,
+        color: color,
+        version: "text",
+        size: size,
+        onClick: onCancel
+      }, buttonProps), {}, {
+        children: l('Cancel')
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
+        tonal: tonal,
+        color: color,
+        version: "text",
+        size: size,
+        onClick: onOk
+      }, buttonProps), {}, {
+        children: l('Ok')
+      }))]
+    })]
+  });
+  const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     align: "center",
     Component: Line
-  }, MainProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, classes[`main_size_${size}`]])
-  }), heading_ && /*#__PURE__*/_react.default.createElement(Type, {
-    version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]])
-  }, heading), range && /*#__PURE__*/_react.default.createElement(Tabs, (0, _extends2.default)({
-    justify: "center",
-    initialLineUpdateTimeout: 340,
-    value: tab,
-    valueDefault: tab,
-    onChange: setTab
-  }, TabsProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className, classes.tabs, heading_ && classes.tabs_padding])
-  }), /*#__PURE__*/_react.default.createElement(Tab, (0, _extends2.default)({
-    value: 0,
-    name: l('From')
-  }, TabFromProps)), /*#__PURE__*/_react.default.createElement(Tab, (0, _extends2.default)({
-    value: 1,
-    name: l('To')
-  }, TabToProps))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.middle, classes[`middle_size_${size}`]])
-  }, elementValues[tab]), actions_ && actions);
+  }, MainProps), {}, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, classes[`main_size_${size}`]]),
+    children: [heading_ && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+      version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-heading'], classes.heading, classes[`heading_size_${size}`]]),
+      children: heading
+    }), range && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Tabs, _objectSpread(_objectSpread({
+      justify: "center",
+      initialLineUpdateTimeout: 340,
+      value: tab,
+      valueDefault: tab,
+      onChange: setTab
+    }, TabsProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-tabs'], TabsProps === null || TabsProps === void 0 ? void 0 : TabsProps.className, classes.tabs, heading_ && classes.tabs_padding]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread({
+        value: 0,
+        name: l('From')
+      }, TabFromProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread({
+        value: 1,
+        name: l('To')
+      }, TabToProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      gap: 0,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-middle'], MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.className, classes.middle, classes[`middle_size_${size}`]]),
+      children: elementValues[tab]
+    }), actions_ && actions]
+  }));
   if (version === 'mobile') {
     if (!(readOnly || disabled)) moreProps.onClick = onOpen;
   }
   if (static_) return element;
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     fullWidth: fullWidth
-  }, WrapperProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-root', `onesy-TimePicker-version-${version}`, `onesy-TimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, readOnly && `onesy-TimePicker-read-only`, disabled && `onesy-TimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root])
-  }), /*#__PURE__*/_react.default.createElement(AdvancedTextField, (0, _extends2.default)({
-    rootRef: item_16 => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item_16);else ref.current = item_16;
-      }
-      refs.root.current = item_16;
-    },
-    tonal: tonal,
-    color: color,
-    version: "outlined",
-    size: size,
-    name: label,
-    mask: mask,
-    placeholder: placeholder,
-    value: input,
-    onChange: onInputChange,
-    endVerticalAlign: "center",
-    error: error,
-    fullWidth: fullWidth,
-    readOnly: readOnly,
-    disabled: disabled
-  }, moreProps, other, AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/_react.default.createElement(Modal, (0, _extends2.default)({
-    open: open,
-    modalWrapperSurface: false,
-    TransitionComponent: Slide,
-    onClose: onClose
-  }, ModalProps), element), version === 'desktop' && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    open: open,
-    portal: true,
-    anchorElement: refs.root.current,
-    alignment: "center",
-    position: "bottom",
-    hover: false,
-    focus: false,
-    longPress: false,
-    maxWidth: "unset",
-    noMargin: true,
-    name: /*#__PURE__*/_react.default.createElement(ClickListener, {
-      onClickOutside: onCancel,
-      includeParentQueries: ['.onesy-TimePicker-main']
-    }, element)
-  }, TooltipProps)));
-});
+  }, WrapperProps), {}, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TimePicker', theme) && ['onesy-TimePicker-root', `onesy-TimePicker-version-${version}`, `onesy-TimePicker-size-${size}`, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, readOnly && `onesy-TimePicker-read-only`, disabled && `onesy-TimePicker-disabled`, fullWidth && 'onesy-full-width'], className, classes.root]),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AdvancedTextField, _objectSpread(_objectSpread(_objectSpread({
+      rootRef: item_16 => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item_16);else ref.current = item_16;
+        }
+        refs.root.current = item_16;
+      },
+      tonal: tonal,
+      color: color,
+      version: "outlined",
+      size: size,
+      name: label,
+      mask: mask,
+      placeholder: placeholder,
+      value: input,
+      onChange: onInputChange,
+      endVerticalAlign: "center",
+      error: error,
+      fullWidth: fullWidth,
+      readOnly: readOnly,
+      disabled: disabled
+    }, moreProps), other), AdvancedTextFieldProps)), version === 'mobile' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Modal, _objectSpread(_objectSpread({
+      open: open,
+      modalWrapperSurface: false,
+      TransitionComponent: Slide,
+      onClose: onClose
+    }, ModalProps), {}, {
+      children: element
+    })), version === 'desktop' && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread({
+      open: open,
+      portal: true,
+      anchorElement: refs.root.current,
+      alignment: "center",
+      position: "bottom",
+      hover: false,
+      focus: false,
+      longPress: false,
+      maxWidth: "unset",
+      noMargin: true,
+      name: /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
+        onClickOutside: onCancel,
+        includeParentQueries: ['.onesy-TimePicker-main'],
+        children: element
+      })
+    }, TooltipProps))]
+  }));
+};
 TimePicker.displayName = 'onesy-TimePicker';
 var _default = exports.default = TimePicker;

package/TimeRangePicker/TimeRangePicker.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,9 +21,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-TimeRangePicker'
 });
-const TimeRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const TimeRangePicker = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(5);
+  const $ = (0, _compilerRuntime.c)(4);
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTimeRangePicker) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const TimePicker = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.TimePicker) || _TimePicker.default;
@@ -37,21 +37,19 @@ const TimeRangePicker = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   const t0 = true;
   const t1 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("TimeRangePicker", theme) && ["onesy-TimeRangePicker-root"], className, classes.root]);
   let t2;
-  if ($[0] !== TimePicker || $[1] !== other || $[2] !== ref || $[3] !== t1) {
-    t2 = /*#__PURE__*/_react.default.createElement(TimePicker, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== TimePicker || $[1] !== other || $[2] !== t1) {
+    t2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(TimePicker, _objectSpread({
       range: t0,
       className: t1
     }, other));
     $[0] = TimePicker;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t1;
-    $[4] = t2;
+    $[2] = t1;
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
   return t2;
-});
+};
 TimeRangePicker.displayName = 'onesy-TimeRangePicker';
 var _default = exports.default = TimeRangePicker;