@bigbinary/neetoui 8.3.30 → 8.3.32

package/dist/{index-ITIifSw4.js → index-D6yXgUQN.js}

@@ -1,16 +1,16 @@
 import _ConfigProvider from 'antd/lib/config-provider';
-import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
-import { Right, Left, Close, Calendar, Clock } from '@bigbinary/neeto-icons';
+import Clock from '@bigbinary/neeto-icons/Clock';
 import { useTranslation } from 'react-i18next';
 import './Accordion.js';
 import './ActionDropdown.js';
 import './Button.js';
 import './Modal.js';
 import './Typography.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'avvvatars-react';
 import 'ramda';
@@ -21,12 +21,18 @@ import './Checkbox.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/regenerator';
+import '@bigbinary/neeto-icons/Down';
+import '@bigbinary/neeto-icons/ColorPicker';
 import 'react-colorful';
-import './useRecentlyUsedColors-CqUfqfck.js';
+import './useRecentlyUsedColors-CtvdF-KQ.js';
 import './Dropdown.js';
-import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, g as getLocale, h as hyphenize, c as convertToDayjsObjects, d as dayjs, n as noop, e as getTimezoneAppliedDateTime } from './index-Dxaw6gl9.js';
+import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, g as getLocale, c as convertToDayjsObjects, h as hyphenize, n as noop, d as getTimezoneAppliedDateTime, e as dayjs } from './index-D6vmwyYl.js';
 import _DatePicker from 'antd/lib/date-picker';
 import { isPresent, isNotPresent } from '@bigbinary/neeto-cist';
+import Left from '@bigbinary/neeto-icons/Left';
+import Right from '@bigbinary/neeto-icons/Right';
+import Calendar from '@bigbinary/neeto-icons/Calendar';
+import Close from '@bigbinary/neeto-icons/Close';
 import './Input.js';
 import Label from './Label.js';
 import './MultiEmailInput.js';
@@ -35,7 +41,7 @@ import { u as useId } from './useId-Jj9hXm-g.js';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
 import 'qs';
-import { u as useSyncedRef } from './Textarea-DlEGZFfG.js';
+import { u as useSyncedRef } from './Textarea-D1gsiIxm.js';
 import './Pane.js';
 import './Popover.js';
 import 'framer-motion';
@@ -60,8 +66,12 @@ import 'antd/locale/pt_PT';
 import './Switch.js';
 import './Tab.js';
 import 'antd/lib/table';
+import '@bigbinary/neeto-icons/MenuHorizontal';
 import 'react-drag-listview';
-import './useRestoreScrollPosition-C1NSANQW.js';
+import '@bigbinary/neeto-icons/DownArrow';
+import '@bigbinary/neeto-icons/UpArrow';
+import '@bigbinary/neeto-icons/InfoRound';
+import './useRestoreScrollPosition-BVX-mT5c.js';
 import 'react-resizable';
 import Tag from './Tag.js';
 import { ANTD_LOCALE } from './constants.js';
@@ -72,21 +82,22 @@ import './TreeSelect.js';
 
 var IconOverride = function IconOverride(_ref) {
   var Icon = _ref.icon;
-  return /*#__PURE__*/React__default.createElement("span", {
-    className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    className: "neeto-ui-btn__icon",
-    size: 20
-  }));
+  return /*#__PURE__*/jsx("span", {
+    className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only",
+    children: /*#__PURE__*/jsx(Icon, {
+      className: "neeto-ui-btn__icon",
+      size: 20
+    })
+  });
 };
 
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Provider = function Provider(_ref) {
   var children = _ref.children;
   var _useTranslation = useTranslation(),
     i18n = _useTranslation.i18n;
-  return /*#__PURE__*/React__default.createElement(_ConfigProvider, {
+  return /*#__PURE__*/jsx(_ConfigProvider, {
     locale: ANTD_LOCALE[i18n.language || "en"],
     theme: {
       token: _objectSpread$2({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -137,8 +148,9 @@ var Provider = function Provider(_ref) {
           padding: 22
         }
       }
-    }
-  }, children);
+    },
+    children: children
+  });
 };
 
 /* eslint-disable @bigbinary/neeto/no-dumb-components-with-use-translation */
@@ -147,13 +159,15 @@ var Today = function Today(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "text-center"
-  }, /*#__PURE__*/React__default.createElement("button", {
-    onClick: onClick,
-    className: "neeto-ui-rounded-md hover:neeto-ui-bg-gray-200 px-2 py-1 text-xs font-medium transition duration-300 ease-in-out",
-    "data-cy": "year-month-mode-today"
-  }, getLocale(i18n, t, "neetoui.datePicker.today")));
+  return /*#__PURE__*/jsx("div", {
+    className: "text-center",
+    children: /*#__PURE__*/jsx("button", {
+      onClick: onClick,
+      className: "neeto-ui-rounded-md hover:neeto-ui-bg-gray-200 px-2 py-1 text-xs font-medium transition duration-300 ease-in-out",
+      "data-cy": "year-month-mode-today",
+      children: getLocale(i18n, t, "neetoui.datePicker.today")
+    })
+  });
 };
 
 var getAllowedDate = function getAllowedDate(date, minDate, maxDate) {
@@ -180,13 +194,10 @@ var formattedString = function formattedString(date, dateFormat) {
 };
 
 var _excluded$1 = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "placeholder", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear", "maxDate", "minDate", "timePickerProps", "timezone", "onOpenChange", "onKeyDown"];
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var INPUT_SIZES$1 = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
+  medium: "medium"};
 var RangePicker$1 = _DatePicker.RangePicker;
 var datePickerTypes = {
   range: RangePicker$1,
@@ -282,16 +293,16 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onChange(value, formattedString(value, dateFormat));
     }
     isDatePickerOpen.current = open;
-    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
   };
   var handleOnKeyDown = function handleOnKeyDown(e) {
     if (!isDatePickerOpen.current) return;
     e.stopPropagation();
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
   };
   var renderExtraFooter = function renderExtraFooter() {
     if (type === "range" || mode === "date") return null;
-    return /*#__PURE__*/React__default.createElement(Today, {
+    return /*#__PURE__*/jsx(Today, {
       onClick: function onClick() {
         var today = dayjs();
         setValue(today);
@@ -300,78 +311,84 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement(Provider, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread$1({
-    required: required
-  }, labelProps), label), /*#__PURE__*/React__default.createElement(Component, _extends({
-    "data-cy": label ? "".concat(hyphenize(label), "-input") : "picker-input",
-    defaultValue: convertToDayjsObjects(defaultValue),
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
-    ref: datePickerRef,
-    showTime: showTime && _objectSpread$1({
-      format: timeFormat
-    }, timePickerProps),
-    value: convertToDayjsObjects(value),
-    className: classnames("neeto-ui-date-input", [className], {
-      "neeto-ui-date-input--small": size === "small",
-      "neeto-ui-date-input--medium": size === "medium",
-      "neeto-ui-date-input--large": size === "large",
-      "neeto-ui-date-input--disabled": otherProps.disabled,
-      "neeto-ui-date-input--naked": nakedInput,
-      "neeto-ui-date-input--error": !!error
-    }),
-    popupClassName: classnames("neeto-ui-date-time-dropdown", [dropdownClassName,
-    // Will be removed in the next major version
-    popupClassName]),
-    onCalendarChange: handleOnCalendarChange,
-    onChange: handleOnChange,
-    onKeyDown: handleOnKeyDown,
-    onOpenChange: handleOnOpenChange
-  }, _objectSpread$1(_objectSpread$1({
-    format: format,
-    maxDate: maxDate,
-    minDate: minDate,
-    onOk: onOk,
-    picker: picker
-  }, otherProps), type === "date" && {
-    mode: mode,
-    pickerValue: pickerValue,
-    renderExtraFooter: renderExtraFooter,
-    onPanelChange: function onPanelChange(pickerValue, mode) {
-      setPickerValue(pickerValue);
-      setMode(mode);
-    }
-  }), {
-    getNow: dayjs,
-    nextIcon: /*#__PURE__*/React__default.createElement(IconOverride, {
-      icon: Right
-    }),
-    prevIcon: /*#__PURE__*/React__default.createElement(IconOverride, {
-      icon: Left
-    }),
-    superNextIcon: /*#__PURE__*/React__default.createElement(IconOverride, {
-      icon: Right
-    }),
-    superPrevIcon: /*#__PURE__*/React__default.createElement(IconOverride, {
-      icon: Left
-    }),
-    allowClear: allowClear && {
-      clearIcon: /*#__PURE__*/React__default.createElement(Close, {
-        "data-cy": "date-time-clear-icon",
-        size: 16
-      })
-    },
-    suffixIcon: timezone ? /*#__PURE__*/React__default.createElement(Tag, {
-      label: timezone
-    }) : /*#__PURE__*/React__default.createElement(Calendar, {
-      size: 16
+  return /*#__PURE__*/jsx(Provider, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-input__wrapper",
+      children: [label && /*#__PURE__*/jsx(Label, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        required: required
+      }, labelProps)), {}, {
+        children: label
+      })), /*#__PURE__*/jsx(Component, _objectSpread$1(_objectSpread$1({
+        "data-cy": label ? "".concat(hyphenize(label), "-input") : "picker-input",
+        defaultValue: convertToDayjsObjects(defaultValue),
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+        ref: datePickerRef,
+        showTime: showTime && _objectSpread$1({
+          format: timeFormat
+        }, timePickerProps),
+        value: convertToDayjsObjects(value),
+        className: classnames("neeto-ui-date-input", [className], {
+          "neeto-ui-date-input--small": size === "small",
+          "neeto-ui-date-input--medium": size === "medium",
+          "neeto-ui-date-input--large": size === "large",
+          "neeto-ui-date-input--disabled": otherProps.disabled,
+          "neeto-ui-date-input--naked": nakedInput,
+          "neeto-ui-date-input--error": !!error
+        }),
+        popupClassName: classnames("neeto-ui-date-time-dropdown", [dropdownClassName,
+        // Will be removed in the next major version
+        popupClassName]),
+        onCalendarChange: handleOnCalendarChange,
+        onChange: handleOnChange,
+        onKeyDown: handleOnKeyDown,
+        onOpenChange: handleOnOpenChange
+      }, _objectSpread$1(_objectSpread$1({
+        format: format,
+        maxDate: maxDate,
+        minDate: minDate,
+        onOk: onOk,
+        picker: picker
+      }, otherProps), type === "date" && {
+        mode: mode,
+        pickerValue: pickerValue,
+        renderExtraFooter: renderExtraFooter,
+        onPanelChange: function onPanelChange(pickerValue, mode) {
+          setPickerValue(pickerValue);
+          setMode(mode);
+        }
+      })), {}, {
+        getNow: dayjs,
+        nextIcon: /*#__PURE__*/jsx(IconOverride, {
+          icon: Right
+        }),
+        prevIcon: /*#__PURE__*/jsx(IconOverride, {
+          icon: Left
+        }),
+        superNextIcon: /*#__PURE__*/jsx(IconOverride, {
+          icon: Right
+        }),
+        superPrevIcon: /*#__PURE__*/jsx(IconOverride, {
+          icon: Left
+        }),
+        allowClear: allowClear && {
+          clearIcon: /*#__PURE__*/jsx(Close, {
+            "data-cy": "date-time-clear-icon",
+            size: 16
+          })
+        },
+        suffixIcon: timezone ? /*#__PURE__*/jsx(Tag, {
+          label: timezone
+        }) : /*#__PURE__*/jsx(Calendar, {
+          size: 16
+        })
+      })), !!error && typeof error === "string" && /*#__PURE__*/jsx("p", {
+        className: "neeto-ui-input__error",
+        "data-cy": "".concat(hyphenize(label), "-input-error"),
+        id: errorId,
+        children: error
+      })]
     })
-  })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-ui-input__error",
-    "data-cy": "".concat(hyphenize(label), "-input-error"),
-    id: errorId
-  }, error)));
+  });
 });
 DatePicker.displayName = "DatePicker";
 
@@ -382,13 +399,10 @@ var TIME_PICKER_TYPES = {
 };
 
 var _excluded = ["className", "label", "size", "dropdownClassName", "popupClassName", "format", "interval", "onChange", "type", "nakedInput", "disabled", "error", "defaultValue", "value", "labelProps", "required", "placeholder", "timezone"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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), true).forEach(function (r) { _defineProperty(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; }
 var INPUT_SIZES = {
-  small: "small",
-  medium: "medium",
-  large: "large"
-};
+  medium: "medium"};
 var TIME_PICKER_INTERVAL = {
   hourStep: 1,
   minuteStep: 1,
@@ -448,23 +462,30 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type === "range" && !time ? onChange([], timeString) : onChange(getTimezoneAppliedDateTime(time), timeString);
   };
   var panelRender = function panelRender(originalPanel) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel__header"
-    }, /*#__PURE__*/React__default.createElement("ul", {
-      className: "neeto-ui-date-input-custom-panel__header-cols"
-    }, showTimeLabels.hour && /*#__PURE__*/React__default.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, getLocale(i18n, t, "neetoui.timePicker.hours")), showTimeLabels.minute && /*#__PURE__*/React__default.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, getLocale(i18n, t, "neetoui.timePicker.minutes")), showTimeLabels.second && /*#__PURE__*/React__default.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, getLocale(i18n, t, "neetoui.timePicker.seconds")))), /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel__body"
-    }, originalPanel));
+    return /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-date-input-custom-panel",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-ui-date-input-custom-panel__header",
+        children: /*#__PURE__*/jsxs("ul", {
+          className: "neeto-ui-date-input-custom-panel__header-cols",
+          children: [showTimeLabels.hour && /*#__PURE__*/jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: getLocale(i18n, t, "neetoui.timePicker.hours")
+          }), showTimeLabels.minute && /*#__PURE__*/jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: getLocale(i18n, t, "neetoui.timePicker.minutes")
+          }), showTimeLabels.second && /*#__PURE__*/jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: getLocale(i18n, t, "neetoui.timePicker.seconds")
+          })]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-date-input-custom-panel__body",
+        children: originalPanel
+      })]
+    });
   };
-  return /*#__PURE__*/React__default.createElement(_ConfigProvider, {
+  return /*#__PURE__*/jsx(_ConfigProvider, {
     locale: ANTD_LOCALE[i18n.language || "en"],
     theme: {
       token: _objectSpread({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -485,51 +506,56 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
           controlOutline: "rgb(var(--neeto-ui-gray-300))"
         }
       }
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React__default.createElement(Label, _objectSpread({
-    required: required
-  }, labelProps), label), /*#__PURE__*/React__default.createElement(Component, _extends({
-    hourStep: interval.hourStep,
-    minuteStep: interval.minuteStep,
-    ref: timePickerRef,
-    secondStep: interval.secondStep,
-    className: classnames("neeto-ui-time-input", [className], {
-      "neeto-ui-time-input--small": size === "small",
-      "neeto-ui-time-input--medium": size === "medium",
-      "neeto-ui-time-input--large": size === "large",
-      "neeto-ui-time-input--disabled": disabled,
-      "neeto-ui-time-input--naked": nakedInput,
-      "neeto-ui-time-input--error": error
-    }),
-    popupClassName: classnames("neeto-ui-date-time-dropdown", [dropdownClassName,
-    // Will be removed in the next major version
-    popupClassName]),
-    onChange: handleOnChange
-  }, _objectSpread(_objectSpread({
-    disabled: disabled,
-    format: format
-  }, otherProps), {}, {
-    panelRender: panelRender
-  }), {
-    defaultValue: convertToDayjsObjects(defaultValue),
-    mode: undefined,
-    picker: "time",
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
-    value: convertToDayjsObjects(value),
-    suffixIcon: timezone ? /*#__PURE__*/React__default.createElement(Tag, {
-      label: timezone
-    }) : /*#__PURE__*/React__default.createElement(Clock, {
-      size: 16
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-input__wrapper",
+      children: [label && /*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({}, _objectSpread({
+        required: required
+      }, labelProps)), {}, {
+        children: label
+      })), /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
+        hourStep: interval.hourStep,
+        minuteStep: interval.minuteStep,
+        ref: timePickerRef,
+        secondStep: interval.secondStep,
+        className: classnames("neeto-ui-time-input", [className], {
+          "neeto-ui-time-input--small": size === "small",
+          "neeto-ui-time-input--medium": size === "medium",
+          "neeto-ui-time-input--large": size === "large",
+          "neeto-ui-time-input--disabled": disabled,
+          "neeto-ui-time-input--naked": nakedInput,
+          "neeto-ui-time-input--error": error
+        }),
+        popupClassName: classnames("neeto-ui-date-time-dropdown", [dropdownClassName,
+        // Will be removed in the next major version
+        popupClassName]),
+        onChange: handleOnChange
+      }, _objectSpread(_objectSpread({
+        disabled: disabled,
+        format: format
+      }, otherProps), {}, {
+        panelRender: panelRender
+      })), {}, {
+        defaultValue: convertToDayjsObjects(defaultValue),
+        mode: undefined,
+        picker: "time",
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+        value: convertToDayjsObjects(value),
+        suffixIcon: timezone ? /*#__PURE__*/jsx(Tag, {
+          label: timezone
+        }) : /*#__PURE__*/jsx(Clock, {
+          size: 16
+        })
+      })), !!error && /*#__PURE__*/jsx("p", {
+        className: "neeto-ui-input__error",
+        "data-cy": "".concat(hyphenize(label), "-input-error"),
+        id: errorId,
+        children: error
+      })]
     })
-  })), !!error && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-ui-input__error",
-    "data-cy": "".concat(hyphenize(label), "-input-error"),
-    id: errorId
-  }, error)));
+  });
 });
 TimePicker.displayName = "TimePicker";
 
 export { DatePicker as D, TimePicker as T };
-//# sourceMappingURL=index-ITIifSw4.js.map
+//# sourceMappingURL=index-D6yXgUQN.js.map