@bigbinary/neetoui 8.3.30 → 8.3.32

package/dist/cjs/{index-eifA8CnA.js → index-Dv40T5Ly.js}

@@ -1,18 +1,18 @@
 'use strict';
 
 var _ConfigProvider = require('antd/lib/config-provider');
-var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var classnames = require('classnames');
-var neetoIcons = require('@bigbinary/neeto-icons');
+var Clock = require('@bigbinary/neeto-icons/Clock');
 var reactI18next = require('react-i18next');
 require('./Accordion.js');
 require('./ActionDropdown.js');
 require('./Button.js');
 require('./Modal.js');
 require('./Typography.js');
+var jsxRuntime = require('react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 require('avvvatars-react');
 require('ramda');
@@ -23,12 +23,18 @@ require('./Checkbox.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/asyncToGenerator');
 require('@babel/runtime/regenerator');
+require('@bigbinary/neeto-icons/Down');
+require('@bigbinary/neeto-icons/ColorPicker');
 require('react-colorful');
-require('./useRecentlyUsedColors-3cKx-eDH.js');
+require('./useRecentlyUsedColors-BcOkiB-v.js');
 require('./Dropdown.js');
-var index = require('./index--BeRLo6L.js');
+var index = require('./index-h3QcOeWw.js');
 var _DatePicker = require('antd/lib/date-picker');
 var neetoCist = require('@bigbinary/neeto-cist');
+var Left = require('@bigbinary/neeto-icons/Left');
+var Right = require('@bigbinary/neeto-icons/Right');
+var Calendar = require('@bigbinary/neeto-icons/Calendar');
+var Close = require('@bigbinary/neeto-icons/Close');
 require('./Input.js');
 var Label = require('./Label.js');
 require('./MultiEmailInput.js');
@@ -37,7 +43,7 @@ var useId = require('./useId-DXHUzdxd.js');
 require('@bigbinary/neeto-hotkeys');
 require('./overlayManager.js');
 require('qs');
-var Textarea = require('./Textarea-CiUKmQHr.js');
+var Textarea = require('./Textarea-BzBZbgdT.js');
 require('./Pane.js');
 require('./Popover.js');
 require('framer-motion');
@@ -62,8 +68,12 @@ require('antd/locale/pt_PT');
 require('./Switch.js');
 require('./Tab.js');
 require('antd/lib/table');
+require('@bigbinary/neeto-icons/MenuHorizontal');
 require('react-drag-listview');
-require('./useRestoreScrollPosition-PsoENtiB.js');
+require('@bigbinary/neeto-icons/DownArrow');
+require('@bigbinary/neeto-icons/UpArrow');
+require('@bigbinary/neeto-icons/InfoRound');
+require('./useRestoreScrollPosition-DP8SUs19.js');
 require('react-resizable');
 var Tag = require('./Tag.js');
 var constants = require('./constants.js');
@@ -74,21 +84,22 @@ require('./TreeSelect.js');
 
 var IconOverride = function IconOverride(_ref) {
   var Icon = _ref.icon;
-  return /*#__PURE__*/React.createElement("span", {
-    className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "neeto-ui-btn__icon",
-    size: 20
-  }));
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: "neeto-ui-btn neeto-ui-btn--style-text neeto-ui-btn--size-medium neeto-ui-btn--icon-only",
+    children: /*#__PURE__*/jsxRuntime.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 = reactI18next.useTranslation(),
     i18n = _useTranslation.i18n;
-  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(_ConfigProvider, {
     locale: constants.ANTD_LOCALE[i18n.language || "en"],
     theme: {
       token: _objectSpread$2({}, index.ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -139,8 +150,9 @@ var Provider = function Provider(_ref) {
           padding: 22
         }
       }
-    }
-  }, children);
+    },
+    children: children
+  });
 };
 
 /* eslint-disable @bigbinary/neeto/no-dumb-components-with-use-translation */
@@ -149,13 +161,15 @@ var Today = function Today(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "text-center"
-  }, /*#__PURE__*/React.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"
-  }, index.getLocale(i18n, t, "neetoui.datePicker.today")));
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "text-center",
+    children: /*#__PURE__*/jsxRuntime.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: index.getLocale(i18n, t, "neetoui.datePicker.today")
+    })
+  });
 };
 
 var getAllowedDate = function getAllowedDate(date, minDate, maxDate) {
@@ -182,13 +196,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,
@@ -284,16 +295,16 @@ var DatePicker = /*#__PURE__*/React.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.createElement(Today, {
+    return /*#__PURE__*/jsxRuntime.jsx(Today, {
       onClick: function onClick() {
         var today = index.dayjs();
         setValue(today);
@@ -302,78 +313,84 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     });
   };
-  return /*#__PURE__*/React.createElement(Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React.createElement(Label, _objectSpread$1({
-    required: required
-  }, labelProps), label), /*#__PURE__*/React.createElement(Component, _extends({
-    "data-cy": label ? "".concat(index.hyphenize(label), "-input") : "picker-input",
-    defaultValue: index.convertToDayjsObjects(defaultValue),
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
-    ref: datePickerRef,
-    showTime: showTime && _objectSpread$1({
-      format: timeFormat
-    }, timePickerProps),
-    value: index.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: index.dayjs,
-    nextIcon: /*#__PURE__*/React.createElement(IconOverride, {
-      icon: neetoIcons.Right
-    }),
-    prevIcon: /*#__PURE__*/React.createElement(IconOverride, {
-      icon: neetoIcons.Left
-    }),
-    superNextIcon: /*#__PURE__*/React.createElement(IconOverride, {
-      icon: neetoIcons.Right
-    }),
-    superPrevIcon: /*#__PURE__*/React.createElement(IconOverride, {
-      icon: neetoIcons.Left
-    }),
-    allowClear: allowClear && {
-      clearIcon: /*#__PURE__*/React.createElement(neetoIcons.Close, {
-        "data-cy": "date-time-clear-icon",
-        size: 16
-      })
-    },
-    suffixIcon: timezone ? /*#__PURE__*/React.createElement(Tag, {
-      label: timezone
-    }) : /*#__PURE__*/React.createElement(neetoIcons.Calendar, {
-      size: 16
+  return /*#__PURE__*/jsxRuntime.jsx(Provider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-input__wrapper",
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        required: required
+      }, labelProps)), {}, {
+        children: label
+      })), /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$1(_objectSpread$1({
+        "data-cy": label ? "".concat(index.hyphenize(label), "-input") : "picker-input",
+        defaultValue: index.convertToDayjsObjects(defaultValue),
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+        ref: datePickerRef,
+        showTime: showTime && _objectSpread$1({
+          format: timeFormat
+        }, timePickerProps),
+        value: index.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: index.dayjs,
+        nextIcon: /*#__PURE__*/jsxRuntime.jsx(IconOverride, {
+          icon: Right
+        }),
+        prevIcon: /*#__PURE__*/jsxRuntime.jsx(IconOverride, {
+          icon: Left
+        }),
+        superNextIcon: /*#__PURE__*/jsxRuntime.jsx(IconOverride, {
+          icon: Right
+        }),
+        superPrevIcon: /*#__PURE__*/jsxRuntime.jsx(IconOverride, {
+          icon: Left
+        }),
+        allowClear: allowClear && {
+          clearIcon: /*#__PURE__*/jsxRuntime.jsx(Close, {
+            "data-cy": "date-time-clear-icon",
+            size: 16
+          })
+        },
+        suffixIcon: timezone ? /*#__PURE__*/jsxRuntime.jsx(Tag, {
+          label: timezone
+        }) : /*#__PURE__*/jsxRuntime.jsx(Calendar, {
+          size: 16
+        })
+      })), !!error && typeof error === "string" && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "neeto-ui-input__error",
+        "data-cy": "".concat(index.hyphenize(label), "-input-error"),
+        id: errorId,
+        children: error
+      })]
     })
-  })), !!error && typeof error === "string" && /*#__PURE__*/React.createElement("p", {
-    className: "neeto-ui-input__error",
-    "data-cy": "".concat(index.hyphenize(label), "-input-error"),
-    id: errorId
-  }, error)));
+  });
 });
 DatePicker.displayName = "DatePicker";
 
@@ -384,13 +401,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,
@@ -450,23 +464,30 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type === "range" && !time ? onChange([], timeString) : onChange(index.getTimezoneAppliedDateTime(time), timeString);
   };
   var panelRender = function panelRender(originalPanel) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel__header"
-    }, /*#__PURE__*/React.createElement("ul", {
-      className: "neeto-ui-date-input-custom-panel__header-cols"
-    }, showTimeLabels.hour && /*#__PURE__*/React.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, index.getLocale(i18n, t, "neetoui.timePicker.hours")), showTimeLabels.minute && /*#__PURE__*/React.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, index.getLocale(i18n, t, "neetoui.timePicker.minutes")), showTimeLabels.second && /*#__PURE__*/React.createElement("li", {
-      className: "neeto-ui-date-input-custom-panel__header-col"
-    }, index.getLocale(i18n, t, "neetoui.timePicker.seconds")))), /*#__PURE__*/React.createElement("div", {
-      className: "neeto-ui-date-input-custom-panel__body"
-    }, originalPanel));
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-date-input-custom-panel",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-date-input-custom-panel__header",
+        children: /*#__PURE__*/jsxRuntime.jsxs("ul", {
+          className: "neeto-ui-date-input-custom-panel__header-cols",
+          children: [showTimeLabels.hour && /*#__PURE__*/jsxRuntime.jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: index.getLocale(i18n, t, "neetoui.timePicker.hours")
+          }), showTimeLabels.minute && /*#__PURE__*/jsxRuntime.jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: index.getLocale(i18n, t, "neetoui.timePicker.minutes")
+          }), showTimeLabels.second && /*#__PURE__*/jsxRuntime.jsx("li", {
+            className: "neeto-ui-date-input-custom-panel__header-col",
+            children: index.getLocale(i18n, t, "neetoui.timePicker.seconds")
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "neeto-ui-date-input-custom-panel__body",
+        children: originalPanel
+      })]
+    });
   };
-  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+  return /*#__PURE__*/jsxRuntime.jsx(_ConfigProvider, {
     locale: constants.ANTD_LOCALE[i18n.language || "en"],
     theme: {
       token: _objectSpread({}, index.ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
@@ -487,52 +508,57 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           controlOutline: "rgb(var(--neeto-ui-gray-300))"
         }
       }
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-input__wrapper"
-  }, label && /*#__PURE__*/React.createElement(Label, _objectSpread({
-    required: required
-  }, labelProps), label), /*#__PURE__*/React.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: index.convertToDayjsObjects(defaultValue),
-    mode: undefined,
-    picker: "time",
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
-    value: index.convertToDayjsObjects(value),
-    suffixIcon: timezone ? /*#__PURE__*/React.createElement(Tag, {
-      label: timezone
-    }) : /*#__PURE__*/React.createElement(neetoIcons.Clock, {
-      size: 16
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "neeto-ui-input__wrapper",
+      children: [label && /*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread(_objectSpread({}, _objectSpread({
+        required: required
+      }, labelProps)), {}, {
+        children: label
+      })), /*#__PURE__*/jsxRuntime.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: index.convertToDayjsObjects(defaultValue),
+        mode: undefined,
+        picker: "time",
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
+        value: index.convertToDayjsObjects(value),
+        suffixIcon: timezone ? /*#__PURE__*/jsxRuntime.jsx(Tag, {
+          label: timezone
+        }) : /*#__PURE__*/jsxRuntime.jsx(Clock, {
+          size: 16
+        })
+      })), !!error && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "neeto-ui-input__error",
+        "data-cy": "".concat(index.hyphenize(label), "-input-error"),
+        id: errorId,
+        children: error
+      })]
     })
-  })), !!error && /*#__PURE__*/React.createElement("p", {
-    className: "neeto-ui-input__error",
-    "data-cy": "".concat(index.hyphenize(label), "-input-error"),
-    id: errorId
-  }, error)));
+  });
 });
 TimePicker.displayName = "TimePicker";
 
 exports.DatePicker = DatePicker;
 exports.TimePicker = TimePicker;
-//# sourceMappingURL=index-eifA8CnA.js.map
+//# sourceMappingURL=index-Dv40T5Ly.js.map