@invoicebox/ui 0.1.0-alpha.223 → 0.1.0-alpha.224

package/dist/components/common/Calendar/index.d.ts

@@ -2,6 +2,8 @@ import { FC } from 'react';
 type TGeneralProps = {
     minDate?: Date;
     maxDate?: Date;
+    onActiveStartDateChange?: () => void;
+    isLargeMobileSize?: boolean;
 };
 export type TProps = TGeneralProps & ({
     onChange: (value: Date) => void;

package/dist/components/common/Calendar/index.js

@@ -15,7 +15,10 @@ var Calendar = exports.Calendar = function Calendar(_ref) {
     value = _ref.value,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
-    selectRange = _ref.selectRange;
+    selectRange = _ref.selectRange,
+    onActiveStartDateChange = _ref.onActiveStartDateChange,
+    _ref$isLargeMobileSiz = _ref.isLargeMobileSize,
+    isLargeMobileSize = _ref$isLargeMobileSiz === void 0 ? false : _ref$isLargeMobileSiz;
   var palette = (0, _palette.useComponentPalette)('calendar');
   var handleChange = (0, _react.useCallback)(function (newValue) {
     if (selectRange) {
@@ -34,7 +37,8 @@ var Calendar = exports.Calendar = function Calendar(_ref) {
     prev2Label: null,
     onChange: handleChange,
     value: value,
-    selectRange: selectRange
+    selectRange: selectRange,
+    onActiveStartDateChange: onActiveStartDateChange
     // styles
     ,
     $arrow: palette.arrow,
@@ -42,6 +46,8 @@ var Calendar = exports.Calendar = function Calendar(_ref) {
     $tile: palette.tile,
     $tileActive: palette.tileActive,
     $tileBgActive: palette.tileBgActive,
-    $tileBgRangeBetween: palette.tileBgRangeBetween
+    $tileBgRangeBetween: palette.tileBgRangeBetween,
+    $month: palette.month,
+    $isLargeMobileSize: isLargeMobileSize
   });
 };

package/dist/components/common/Calendar/palette.d.ts

@@ -6,5 +6,6 @@ export type TCalendarPalette = {
     tileActive: string;
     tileBgActive: string;
     tileBgRangeBetween: string;
+    month: string;
 };
 export declare const generateCalendarPalette: (abstractPalette: TAbstractPalette) => TCalendarPalette;

package/dist/components/common/Calendar/palette.js

@@ -13,6 +13,7 @@ var generateCalendarPalette = exports.generateCalendarPalette = function generat
     tile: (0, _hexToRgba["default"])(abstractPalette.primary, 0.7),
     tileActive: abstractPalette.primary,
     tileBgActive: abstractPalette.secondary,
-    tileBgRangeBetween: (0, _hexToRgba["default"])(abstractPalette.primary, 0.05)
+    tileBgRangeBetween: (0, _hexToRgba["default"])(abstractPalette.primary, 0.05),
+    month: abstractPalette.primary
   };
 };

package/dist/components/common/Calendar/styles.d.ts

@@ -8,5 +8,7 @@ export declare const LibCalendar: import("styled-components/dist/types").IStyled
     $tileActive: string;
     $tileBgActive: string;
     $tileBgRangeBetween: string;
+    $month: string;
+    $isLargeMobileSize: boolean;
     selectRange?: boolean | undefined;
 }>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-calendar").CalendarProps & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common/Calendar/styles.js

@@ -1,33 +1,44 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LibCalendar = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactCalendar = _interopRequireDefault(require("react-calendar"));
+var _breakpoints = require("../../../breakpoints");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var largeMobileStyles = (0, _styledComponents.css)(["@media ", "{width:328px;}.react-calendar__navigation{@media ", "{margin-bottom:18px;}}.react-calendar__navigation__label{@media ", "{font-size:20px;font-weight:500;line-height:25px;}}.react-calendar__month-view__weekdays{@media ", "{margin-bottom:6px;}}.react-calendar__tile{@media ", "{height:48px;font-size:15px;font-weight:400;line-height:20px;border-radius:50%;}}"], _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm, _breakpoints.breakpoints.sm);
 var LibCalendar = exports.LibCalendar = (0, _styledComponents["default"])(_reactCalendar["default"]).withConfig({
   displayName: "styles__LibCalendar",
   componentId: "sc-1evd6f-0"
-})(["border:none;width:210px;min-width:210px;background:transparent;@media (max-width:320px){width:225px;}.react-calendar__navigation{margin-bottom:16px;height:28px;}.react-calendar__navigation__arrow{font-size:24px;background-color:transparent !important;color:", ";width:28px;height:28px;min-width:28px;display:flex;justify-content:center;align-items:center;}.react-calendar__navigation__arrow:disabled{opacity:0.4;cursor:default;}.react-calendar__navigation__arrow:hover:not([disabled]){opacity:0.6;}.react-calendar__navigation__label{font-size:14px;background-color:transparent !important;cursor:default;}.react-calendar__month-view__weekdays__weekday{color:", ";font-size:12px;font-weight:400;line-height:18px;width:30px;height:22px;flex:0 0 14.29% !important;padding:0;display:flex;justify-content:center;align-items:center;}.react-calendar__month-view__weekdays__weekday abbr{text-decoration:none;}.react-calendar__tile{font-size:12px;color:", ";background-color:transparent !important;padding:0;border-radius:5px;margin-bottom:4px;width:30px;height:22px;flex:0 0 14.29% !important;}.react-calendar__tile:disabled{opacity:0.4;cursor:default;}.react-calendar__tile:hover:not([disabled]){opacity:0.6;}.react-calendar__tile--active{background-color:", " !important;color:", ";}.react-calendar__tile--active:hover{opacity:1 !important;}", ""], function (_ref) {
+})(["border:none;width:210px;min-width:210px;background:transparent;.react-calendar__navigation{margin-bottom:16px;height:28px;}.react-calendar__navigation__arrow{font-size:24px;background-color:transparent !important;color:", ";width:28px;height:28px;min-width:28px;display:flex;justify-content:center;align-items:center;}.react-calendar__navigation__arrow:disabled{opacity:0.4;cursor:default;}.react-calendar__navigation__arrow:hover:not([disabled]){opacity:0.6;}.react-calendar__navigation__label{font-size:14px;background-color:transparent !important;cursor:default;color:", ";}.react-calendar__month-view__weekdays__weekday{color:", ";font-size:12px;font-weight:400;line-height:18px;width:30px;height:22px;padding:0;display:flex;justify-content:center;align-items:center;}.react-calendar__month-view__weekdays__weekday abbr{text-decoration:none;}.react-calendar__tile{font-size:12px;color:", ";background-color:transparent !important;padding:0;border-radius:5px;margin-bottom:4px;height:22px;}.react-calendar__tile:disabled{opacity:0.4;cursor:default;}.react-calendar__tile:hover:not([disabled]){opacity:0.6;}.react-calendar__tile--active{background-color:", " !important;color:", ";}.react-calendar__tile--active:hover{opacity:1 !important;}", " ", ""], function (_ref) {
   var $arrow = _ref.$arrow;
   return $arrow;
 }, function (_ref2) {
-  var $weekDay = _ref2.$weekDay;
-  return $weekDay;
+  var $month = _ref2.$month;
+  return $month;
 }, function (_ref3) {
-  var $tile = _ref3.$tile;
-  return $tile;
+  var $weekDay = _ref3.$weekDay;
+  return $weekDay;
 }, function (_ref4) {
-  var $tileBgActive = _ref4.$tileBgActive;
-  return $tileBgActive;
+  var $tile = _ref4.$tile;
+  return $tile;
 }, function (_ref5) {
-  var $tileActive = _ref5.$tileActive;
-  return $tileActive;
+  var $tileBgActive = _ref5.$tileBgActive;
+  return $tileBgActive;
 }, function (_ref6) {
-  var selectRange = _ref6.selectRange,
-    $tileBgActive = _ref6.$tileBgActive,
-    $tileBgRangeBetween = _ref6.$tileBgRangeBetween;
+  var $tileActive = _ref6.$tileActive;
+  return $tileActive;
+}, function (_ref7) {
+  var selectRange = _ref7.selectRange,
+    $tileBgActive = _ref7.$tileBgActive,
+    $tileBgRangeBetween = _ref7.$tileBgRangeBetween;
   return selectRange && "\n            .react-calendar__tile--range {\n                border-radius: 0;\n            }\n\n            .react-calendar__tile--rangeBothEnds {\n                border-radius: 5px;\n            }\n            \n            .react-calendar__tile--active {\n                background-color: ".concat($tileBgRangeBetween, " !important;\n            }\n\n            .react-calendar__tile--rangeStart {\n                border-top-left-radius: 5px;\n                border-bottom-left-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n\n            .react-calendar__tile--rangeEnd {\n                border-top-right-radius: 5px;\n                border-bottom-right-radius: 5px;\n                background-color: ").concat($tileBgActive, " !important;\n            }\n    ");
+}, function (_ref8) {
+  var $isLargeMobileSize = _ref8.$isLargeMobileSize;
+  return $isLargeMobileSize && largeMobileStyles;
 });

package/dist/components/common/Scrollbar/index.d.ts

@@ -2,6 +2,6 @@ import { FC, ReactNode } from 'react';
 export type TProps = {
     children: ReactNode;
     maxHeight?: number;
-    width?: number;
+    trackWidth?: number;
 };
 export declare const Scrollbar: FC<TProps>;

package/dist/components/common/Scrollbar/index.js

@@ -15,8 +15,8 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
   var children = _ref.children,
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? '100%' : _ref$maxHeight,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 6 : _ref$width;
+    _ref$trackWidth = _ref.trackWidth,
+    trackWidth = _ref$trackWidth === void 0 ? 6 : _ref$trackWidth;
   var palette = (0, _palette.useComponentPalette)('scrollbar');
   var props = (0, _react.useMemo)(function () {
     return {
@@ -44,7 +44,7 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
       trackYProps: {
         style: {
           backgroundColor: 'transparent',
-          width: "".concat(width, "px"),
+          width: "".concat(trackWidth, "px"),
           height: 'calc(100% - 4px)',
           top: '2px',
           right: '2px'
@@ -65,7 +65,7 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
         }
       }
     };
-  }, [maxHeight, palette.thumb, width]);
+  }, [maxHeight, palette.thumb, trackWidth]);
   return /*#__PURE__*/_react["default"].createElement(_reactScrollbarsCustom.Scrollbar, _extends({
     translateContentSizesToHolder: true
   }, props), children);

package/dist/components/form/DateInput/components/CalendarIcon/index.d.ts

@@ -0,0 +1 @@
+export declare const CalendarIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateInput/components/{Icon → CalendarIcon}/index.js

@@ -4,11 +4,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Icon = void 0;
+exports.CalendarIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Icon = exports.Icon = function Icon() {
+var CalendarIcon = exports.CalendarIcon = function CalendarIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,

package/dist/components/form/DateInput/components/CalendarIcon/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CalendarIcon } from '.';
+declare const meta: Meta<typeof CalendarIcon>;
+export default meta;
+export declare const Default: StoryObj<typeof CalendarIcon>;

package/dist/components/form/DateInput/components/{Icon → CalendarIcon}/index.stories.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _ = require(".");
 var meta = {
-  title: 'form/DateInput/_components/Icon',
-  component: _.Icon,
+  title: 'form/DateInput/_components/CalendarIcon',
+  component: _.CalendarIcon,
   tags: ['autodocs']
 };
 var _default = exports["default"] = meta;

package/dist/components/form/DateInput/index.js

@@ -14,7 +14,7 @@ var _InputLabel = require("../InputLabel");
 var _PureInput = require("../PureInput");
 var _Dropdown = require("../../common/Dropdown");
 var _Calendar = require("../../common/Calendar");
-var _Icon = require("./components/Icon");
+var _CalendarIcon = require("./components/CalendarIcon");
 var _palette = require("../../../palette");
 var _constants = require("../constants");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -123,7 +123,7 @@ var DateInput = exports.DateInput = function DateInput(_ref) {
   }, _constants.SIZE_PARAMS_MAP[size])), /*#__PURE__*/_react["default"].createElement(S.Icon, {
     onClick: handleTrigger,
     $palette: palette
-  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, null)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_CalendarIcon.CalendarIcon, null)))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, _extends({
     isOpen: isOpen,
     isAutoPosition: true
   }, dropdownProps), /*#__PURE__*/_react["default"].createElement(S.CalendarWrapper, null, /*#__PURE__*/_react["default"].createElement(_Calendar.Calendar, {

package/dist/components/form/DateInput/logic.d.ts

@@ -5,6 +5,8 @@ declare class Logic {
     isBetweenMinAndMax(date: Date, minDate?: Date, maxDate?: Date): boolean;
     valueToString(value: null | Date, withTime: boolean): string;
     stringToDate(str: string, withTime: boolean): Date;
+    addHoursAndMinutesToDate(date: Date, hours: number, minutes: number): Date;
+    getHoursAndMinutesFromDate(date: Date): number[];
 }
 export declare const logic: Logic;
 export {};

package/dist/components/form/DateInput/logic.js

@@ -78,6 +78,18 @@ var Logic = /*#__PURE__*/function () {
       }).join(':');
       return new Date(withTime ? formattedDateStr + ' ' + formattedTimeStr : formattedDateStr);
     }
+  }, {
+    key: "addHoursAndMinutesToDate",
+    value: function addHoursAndMinutesToDate(date, hours, minutes) {
+      var newDate = new Date(date);
+      newDate.setHours(hours, minutes, 0, 0);
+      return newDate;
+    }
+  }, {
+    key: "getHoursAndMinutesFromDate",
+    value: function getHoursAndMinutesFromDate(date) {
+      return [date.getHours(), date.getMinutes()];
+    }
   }]);
 }();
 var logic = exports.logic = new Logic();

package/dist/components/form/DateInput/styles.js

@@ -25,4 +25,4 @@ var Icon = exports.Icon = _styledComponents["default"].div.withConfig({
 var CalendarWrapper = exports.CalendarWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__CalendarWrapper",
   componentId: "sc-7tnmvh-3"
-})(["padding:30px;@media ", "{padding:15px;}"], _breakpoints.breakpoints.sm);
+})(["padding:16px;@media ", "{padding:15px;}"], _breakpoints.breakpoints.sm);

package/dist/components/form/DateTimeInput/components/CheckIcon/index.d.ts

@@ -0,0 +1 @@
+export declare const CheckIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateTimeInput/components/CheckIcon/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CheckIcon = exports.CheckIcon = function CheckIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15 6.66699L8.8037 13.3337L5 9.28353",
+    stroke: "#353F47",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/form/DateTimeInput/components/CheckIcon/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckIcon } from './index';
+declare const meta: Meta<typeof CheckIcon>;
+export default meta;
+export declare const Default: StoryObj<typeof CheckIcon>;

package/dist/components/form/DateTimeInput/components/CheckIcon/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var meta = {
+  title: 'form/DateTimeInput/_components/CheckIcon',
+  component: _index.CheckIcon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/form/DateTimeInput/components/Cross24Icon/index.d.ts

@@ -0,0 +1 @@
+export declare const Cross24Icon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateTimeInput/components/Cross24Icon/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Cross24Icon = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var Cross24Icon = exports.Cross24Icon = function Cross24Icon() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M17 7L7 17M17 17L7 7",
+    stroke: "#353F47",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/form/DateTimeInput/components/Cross24Icon/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Cross24Icon } from './index';
+declare const meta: Meta<typeof Cross24Icon>;
+export default meta;
+export declare const Default: StoryObj<typeof Cross24Icon>;

package/dist/components/form/DateTimeInput/components/Cross24Icon/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var meta = {
+  title: 'form/DateTimeInput/_components/Cross24Icon',
+  component: _index.Cross24Icon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/form/DateTimeInput/components/CrossIcon/index.d.ts

@@ -0,0 +1 @@
+export declare const CrossIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/DateTimeInput/components/CrossIcon/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CrossIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var CrossIcon = exports.CrossIcon = function CrossIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.1673 5.83301L5.83398 14.1663M14.1673 14.1663L5.83398 5.83301",
+    stroke: "#353F47",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};

package/dist/components/form/DateTimeInput/components/CrossIcon/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CrossIcon } from './index';
+declare const meta: Meta<typeof CrossIcon>;
+export default meta;
+export declare const Default: StoryObj<typeof CrossIcon>;

package/dist/components/form/DateTimeInput/components/CrossIcon/index.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var meta = {
+  title: 'form/DateTimeInput/_components/CrossIcon',
+  component: _index.CrossIcon,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {};

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { TProps as TCalendarProps } from '../../../../common/Calendar';
+export type TProps = Pick<TCalendarProps, 'maxDate' | 'minDate'> & {
+    isOpen: boolean;
+    onClose: () => void;
+    calendarDropdownValue: Date | null;
+    onCalendarChange: (value: Date) => void;
+    onTimeChange: (newValue: [number, number]) => void;
+    onSubmit: () => void;
+    afterSubmit: () => void;
+};
+export declare const MobileDateTimeCalendar: FC<TProps>;

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MobileDateTimeCalendar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Drawer = require("../../../../common/Drawer");
+var _Cross24Icon = require("../Cross24Icon");
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../../../palette");
+var _Typography = require("../../../../common/Typography");
+var _Calendar = require("../../../../common/Calendar");
+var _TimePicker = require("../TimePicker");
+var _logic = require("../../../DateInput/logic");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var MobileDateTimeCalendar = exports.MobileDateTimeCalendar = function MobileDateTimeCalendar(_ref) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    maxDate = _ref.maxDate,
+    minDate = _ref.minDate,
+    onCalendarChange = _ref.onCalendarChange,
+    calendarDropdownValue = _ref.calendarDropdownValue,
+    afterSubmit = _ref.afterSubmit,
+    onSubmit = _ref.onSubmit,
+    onTimeChange = _ref.onTimeChange;
+  var palette = (0, _palette.useComponentPalette)('mobileDateTimeCalendar');
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDateStep = _useState2[0],
+    setIsDateStep = _useState2[1];
+  var handleClose = function handleClose() {
+    onClose();
+    setIsDateStep(true);
+  };
+  var handleDone = function handleDone() {
+    if (isDateStep) {
+      setIsDateStep(false);
+    } else {
+      onSubmit();
+      afterSubmit();
+      setIsDateStep(true);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Drawer.Drawer, {
+    onClose: handleClose,
+    isOpen: isOpen,
+    isPadding: false
+  }, /*#__PURE__*/_react["default"].createElement(S.Header, {
+    $borderColor: palette.border
+  }, /*#__PURE__*/_react["default"].createElement(S.CloseButton, {
+    type: 'button',
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_Cross24Icon.Cross24Icon, null)), /*#__PURE__*/_react["default"].createElement(S.HeadLabel, {
+    $color: palette.headLabel,
+    variant: 'headline3'
+  }, isDateStep ? 'Выберите дату' : 'Выберите время'), /*#__PURE__*/_react["default"].createElement(S.ApplyButton, {
+    disabled: isDateStep ? !calendarDropdownValue : !calendarDropdownValue || !_logic.logic.isBetweenMinAndMax(calendarDropdownValue, minDate, maxDate),
+    onClick: handleDone,
+    type: 'button',
+    $color: palette.applyButton
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: 'headline6'
+  }, "\u0413\u043E\u0442\u043E\u0432\u043E"))), isDateStep ? /*#__PURE__*/_react["default"].createElement(S.MobileCalendarWrapper, null, /*#__PURE__*/_react["default"].createElement(_Calendar.Calendar, {
+    value: calendarDropdownValue,
+    onChange: onCalendarChange,
+    minDate: minDate,
+    maxDate: maxDate,
+    isLargeMobileSize: true
+  })) : /*#__PURE__*/_react["default"].createElement(_TimePicker.TimePicker, {
+    value: [(calendarDropdownValue === null || calendarDropdownValue === void 0 ? void 0 : calendarDropdownValue.getHours()) || 0, (calendarDropdownValue === null || calendarDropdownValue === void 0 ? void 0 : calendarDropdownValue.getMinutes()) || 0],
+    onChange: onTimeChange,
+    maxTime: calendarDropdownValue && maxDate && calendarDropdownValue.getDay() === maxDate.getDay() ? [maxDate.getHours(), maxDate.getMinutes()] : undefined,
+    minTime: calendarDropdownValue && minDate && calendarDropdownValue.getDay() === minDate.getDay() ? [minDate.getHours(), minDate.getMinutes()] : undefined
+  }));
+};

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MobileDateTimeCalendar, TProps } from './index';
+import 'react-calendar/dist/Calendar.css';
+declare const meta: Meta<typeof MobileDateTimeCalendar>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/index.stories.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var _react = _interopRequireWildcard(require("react"));
+require("react-calendar/dist/Calendar.css");
+var _logic = require("../../../DateInput/logic");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'form/DateTimeInput/_components/MobileDateTimeCalendar',
+  component: _index.MobileDateTimeCalendar,
+  tags: ['autodocs']
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  render: function Render() {
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+    var _useState3 = (0, _react.useState)(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      calendarDropdownValue = _useState4[0],
+      setCalendarDropdownValue = _useState4[1];
+    var handleClose = function handleClose() {
+      return setIsOpen(false);
+    };
+    var handleOpen = function handleOpen() {
+      return setIsOpen(true);
+    };
+    var handleSubmit = function handleSubmit() {
+      return calendarDropdownValue;
+    };
+    var handleCalendarChange = (0, _react.useCallback)(function (newValue) {
+      var _ref = calendarDropdownValue ? _logic.logic.getHoursAndMinutesFromDate(calendarDropdownValue) : [0, 0],
+        _ref2 = _slicedToArray(_ref, 2),
+        hours = _ref2[0],
+        minutes = _ref2[1];
+      var newDate = _logic.logic.addHoursAndMinutesToDate(newValue, hours, minutes);
+      setCalendarDropdownValue(newDate);
+    }, [calendarDropdownValue]);
+    var handleTimePickerChange = (0, _react.useCallback)(function (newValue) {
+      if (calendarDropdownValue) {
+        var newDate = _logic.logic.addHoursAndMinutesToDate(calendarDropdownValue, newValue[0], newValue[1]);
+        setCalendarDropdownValue(newDate);
+      }
+    }, [calendarDropdownValue]);
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
+      type: 'button',
+      onClick: handleOpen
+    }, "Open"), /*#__PURE__*/_react["default"].createElement(_index.MobileDateTimeCalendar, {
+      calendarDropdownValue: calendarDropdownValue,
+      onCalendarChange: handleCalendarChange,
+      isOpen: isOpen,
+      onClose: handleClose,
+      onSubmit: handleSubmit,
+      afterSubmit: handleClose,
+      onTimeChange: handleTimePickerChange
+    }));
+  }
+};

package/dist/components/form/DateTimeInput/components/MobileDateTimeCalendar/palette.d.ts

@@ -0,0 +1,7 @@
+import { TAbstractPalette } from '../../../../../palette';
+export type TMobileDateTimeCalendarPalette = {
+    headLabel: string;
+    applyButton: string;
+    border: string;
+};
+export declare const generateMobileDateTimeCalendarPalette: (abstractPalette: TAbstractPalette) => TMobileDateTimeCalendarPalette;