indicator-ui 0.1.38 → 0.1.40

package/dist/index.js

@@ -54184,6 +54184,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   calculateAvailablePosition: () => (/* reexport safe */ _placement__WEBPACK_IMPORTED_MODULE_18__.calculateAvailablePosition),
 /* harmony export */   useBackdropModal: () => (/* reexport safe */ _modalWindows__WEBPACK_IMPORTED_MODULE_14__.useBackdropModal),
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useBackgroundModalAnim),
+/* harmony export */   useCarousel: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useCarousel),
 /* harmony export */   useCollapsible: () => (/* reexport safe */ _ui_animations__WEBPACK_IMPORTED_MODULE_13__.useCollapsible),
 /* harmony export */   useControlInput: () => (/* reexport safe */ _controlsInput__WEBPACK_IMPORTED_MODULE_15__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _useDebouncedAccumulator__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),
@@ -55495,7 +55496,8 @@ var FADE_IN_FROM_TARGET_ANIMATION = function FADE_IN_FROM_TARGET_ANIMATION() {
       targetCenter = props.targetCenter,
       backdrop = props.backdrop,
       predictPos = props.predictPos,
-      modalSize = props.modalSize;
+      modalSize = props.modalSize,
+      targetSize = props.targetSize;
     var _options$backdropColo4 = options.backdropColor,
       backdropColor = _options$backdropColo4 === void 0 ? BACKDROP_BACKGROUND_COLOR : _options$backdropColo4,
       _options$zIndex4 = options.zIndex,
@@ -55506,6 +55508,9 @@ var FADE_IN_FROM_TARGET_ANIMATION = function FADE_IN_FROM_TARGET_ANIMATION() {
       backdropZIndex = _zIndex$backdrop4 === void 0 ? Z_INDEX_BACKDROP_DEFAULT : _zIndex$backdrop4;
     var startPositionX = targetCenter[0] - predictPos[0] - modalSize[0] / 2;
     var startPositionY = targetCenter[1] - predictPos[1] - modalSize[1] / 2;
+    var modalSizeMiddle = (modalSize[0] + modalSize[1]) / 2;
+    var targetSizeSizeMiddle = (targetSize[0] + targetSize[1]) / 2;
+    var startScale = modalSizeMiddle > targetSizeSizeMiddle ? targetSizeSizeMiddle / modalSizeMiddle : 1;
     timeline.set(modal, {
       visibility: 'visible',
       left: predictPos[0],
@@ -55514,7 +55519,7 @@ var FADE_IN_FROM_TARGET_ANIMATION = function FADE_IN_FROM_TARGET_ANIMATION() {
       y: startPositionY,
       zIndex: modalZIndex,
       opacity: 0,
-      scale: 0.1
+      scale: startScale
     }).set(backdrop, {
       visibility: 'visible',
       backgroundColor: backdropColor,
@@ -55586,6 +55591,60 @@ var BACKDROP_MODAL_ANIMATIONS = function BACKDROP_MODAL_ANIMATIONS() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/assets/carouselAnimations.ts":
+/*!**************************************************************!*\
+  !*** ./src/hooks/ui-animations/assets/carouselAnimations.ts ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   CAROUSEL_ANIM: () => (/* binding */ CAROUSEL_ANIM)
+/* harmony export */ });
+function CAROUSEL_ANIM() {
+  var jumpTo = function jumpTo() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var track = args[0],
+      timeline = args[1],
+      params = args[2];
+    var x = params.x;
+    timeline.clear().to(track, {
+      x: x,
+      duration: 0.3,
+      ease: "power2.out"
+    });
+    return timeline;
+  };
+  var getObjInitStyle = function getObjInitStyle() {
+    return {
+      overflow: "hidden"
+    };
+  };
+  var getTrackInitStyle = function getTrackInitStyle() {
+    return {
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'row'
+    };
+  };
+  var getElInitStyle = function getElInitStyle() {
+    return {
+      flex: 'none'
+    };
+  };
+  return {
+    jumpTo: jumpTo,
+    getElInitStyle: getElInitStyle,
+    getTrackInitStyle: getTrackInitStyle,
+    getObjInitStyle: getObjInitStyle
+  };
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts":
 /*!*****************************************************************!*\
   !*** ./src/hooks/ui-animations/assets/collapsibleAnimations.ts ***!
@@ -55649,6 +55708,7 @@ function COLLAPSIBLE_ANIM() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   BACKDROP_MODAL_ANIMATIONS: () => (/* reexport safe */ _backdropModalAnimations__WEBPACK_IMPORTED_MODULE_1__.BACKDROP_MODAL_ANIMATIONS),
+/* harmony export */   CAROUSEL_ANIM: () => (/* reexport safe */ _carouselAnimations__WEBPACK_IMPORTED_MODULE_6__.CAROUSEL_ANIM),
 /* harmony export */   COLLAPSIBLE_ANIM: () => (/* reexport safe */ _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__.COLLAPSIBLE_ANIM),
 /* harmony export */   MODAL_ANIMATIONS: () => (/* reexport safe */ _modalAnimations__WEBPACK_IMPORTED_MODULE_0__.MODAL_ANIMATIONS),
 /* harmony export */   MOVING_ANIMATIONS: () => (/* reexport safe */ _movingAnimations__WEBPACK_IMPORTED_MODULE_3__.MOVING_ANIMATIONS),
@@ -55661,6 +55721,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _movingAnimations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./movingAnimations */ "./src/hooks/ui-animations/assets/movingAnimations.ts");
 /* harmony import */ var _collapsibleAnimations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./collapsibleAnimations */ "./src/hooks/ui-animations/assets/collapsibleAnimations.ts");
 /* harmony import */ var _textAutoScrollAnimations__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./textAutoScrollAnimations */ "./src/hooks/ui-animations/assets/textAutoScrollAnimations.ts");
+/* harmony import */ var _carouselAnimations__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./carouselAnimations */ "./src/hooks/ui-animations/assets/carouselAnimations.ts");
+
 
 
 
@@ -56168,18 +56230,21 @@ function useTimeline() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__.useBackgroundModalAnim),
+/* harmony export */   useCarousel: () => (/* reexport safe */ _useCarousel__WEBPACK_IMPORTED_MODULE_5__.useCarousel),
 /* harmony export */   useCollapsible: () => (/* reexport safe */ _useCollapsible__WEBPACK_IMPORTED_MODULE_3__.useCollapsible),
 /* harmony export */   useHoverAutoScrollText: () => (/* reexport safe */ _useHoverAutoScrollText__WEBPACK_IMPORTED_MODULE_4__.useHoverAutoScrollText),
 /* harmony export */   useModalAnim: () => (/* reexport safe */ _useModalAnim__WEBPACK_IMPORTED_MODULE_0__.useModalAnim),
 /* harmony export */   useShimmer: () => (/* reexport safe */ _useShimmer__WEBPACK_IMPORTED_MODULE_2__.useShimmer),
-/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_5__.useTimeline)
+/* harmony export */   useTimeline: () => (/* reexport safe */ _helpers__WEBPACK_IMPORTED_MODULE_6__.useTimeline)
 /* harmony export */ });
 /* harmony import */ var _useModalAnim__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./useModalAnim */ "./src/hooks/ui-animations/useModalAnim.ts");
 /* harmony import */ var _useBackgroundModalAnim__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useBackgroundModalAnim */ "./src/hooks/ui-animations/useBackgroundModalAnim.ts");
 /* harmony import */ var _useShimmer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./useShimmer */ "./src/hooks/ui-animations/useShimmer.ts");
 /* harmony import */ var _useCollapsible__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./useCollapsible */ "./src/hooks/ui-animations/useCollapsible.ts");
 /* harmony import */ var _useHoverAutoScrollText__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./useHoverAutoScrollText */ "./src/hooks/ui-animations/useHoverAutoScrollText.ts");
-/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+/* harmony import */ var _useCarousel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./useCarousel */ "./src/hooks/ui-animations/useCarousel.ts");
+/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers */ "./src/hooks/ui-animations/helpers.ts");
+
 
 
 
@@ -56441,6 +56506,208 @@ function useBackgroundModalAnim() {
 
 /***/ }),
 
+/***/ "./src/hooks/ui-animations/useCarousel.ts":
+/*!************************************************!*\
+  !*** ./src/hooks/ui-animations/useCarousel.ts ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   useCarousel: () => (/* binding */ useCarousel)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./assets */ "./src/hooks/ui-animations/assets/index.ts");
+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); }
+var _excluded = ["jumpTo"];
+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) { _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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+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; }
+
+
+
+function useCarousel() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var _ = args[0],
+    trackRef = args[1];
+  var _usePosition = usePosition.apply(void 0, args),
+    viewElement = _usePosition.viewElement,
+    viewElementInstance = _usePosition.viewElementInstance;
+  var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(trackRef),
+    _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
+    getTrack = _useSimpleRefElementW2[0];
+  var _CAROUSEL_ANIM = (0,_assets__WEBPACK_IMPORTED_MODULE_2__.CAROUSEL_ANIM)(),
+    jumpTo = _CAROUSEL_ANIM.jumpTo,
+    styles = _objectWithoutProperties(_CAROUSEL_ANIM, _excluded);
+  var getTrackChildren = function getTrackChildren() {
+    var track = getTrack();
+    if (!track) return [];
+    var childElements = Array.from(track.children);
+    return childElements;
+  };
+  var getElByIndex = function getElByIndex(idx) {
+    var childElements = getTrackChildren();
+    return childElements[idx];
+  };
+  var checkElementExistence = function checkElementExistence(el) {
+    var childElements = getTrackChildren();
+    return childElements.find(function (item) {
+      return item === el;
+    }) !== undefined;
+  };
+  var showEl = function showEl(target) {
+    var el = typeof target === 'number' ? getElByIndex(target) : target;
+    // Проверяем наличие элемента в объекте
+    var isElementInObj = el && checkElementExistence(el);
+    if (!isElementInObj) return;
+    viewElement(el);
+  };
+  var showElInstance = function showElInstance(target) {
+    var el = typeof target === 'number' ? getElByIndex(target) : target;
+    // Проверяем наличие элемента в объекте
+    var isElementInObj = el && checkElementExistence(el);
+    if (!isElementInObj) return;
+    viewElementInstance(el);
+  };
+  return _objectSpread({
+    showEl: showEl,
+    showElInstance: showElInstance
+  }, styles);
+}
+function usePosition() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  var ref = args[0],
+    trackRef = args[1];
+  var viewedElementRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(undefined);
+  var setViewedElement = function setViewedElement(value) {
+    return viewedElementRef.current = value;
+  };
+  var getViewedElement = function getViewedElement() {
+    return viewedElementRef.current;
+  };
+  var _useTimeline = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useTimeline)(),
+    getTimeline = _useTimeline.getTimeline;
+  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
+    getObj = _useSimpleRefElementW4[0];
+  var _useSimpleRefElementW5 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(trackRef),
+    _useSimpleRefElementW6 = _slicedToArray(_useSimpleRefElementW5, 1),
+    getTrack = _useSimpleRefElementW6[0];
+  var getPredictPosition = function getPredictPosition(el) {
+    var trackRect = getTrackRect();
+    var objRect = getObjRect();
+    var elRect = getElRect(el);
+    var stepX = elRect.x - trackRect.x - objRect.width / 2 + elRect.elWidth / 2;
+    return {
+      x: stepX,
+      y: trackRect.y
+    };
+  };
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeWindowObserver)(function () {
+    var timeline = getTimeline();
+    var viewedElement = getViewedElement();
+    if (viewedElement) {
+      var isAnimationActive = timeline.isActive() && timeline.progress() !== 1;
+      if (isAnimationActive) {
+        viewElement(viewedElement);
+      } else {
+        viewElementInstance(viewedElement);
+      }
+    }
+  });
+  var changePositionInstance = function changePositionInstance(x) {
+    var track = getTrack();
+    if (track) {
+      track.style.transform = "translateX(".concat(x, "px)");
+    }
+  };
+  var changePosition = function changePosition(x) {
+    var timeline = getTimeline();
+    var track = getTrack();
+    if (track) {
+      (0,_assets__WEBPACK_IMPORTED_MODULE_2__.CAROUSEL_ANIM)().jumpTo(track, timeline, {
+        x: x
+      }).play();
+    }
+  };
+  var viewElement = function viewElement(el) {
+    var predict = getPredictPosition(el);
+    var resPos = -predict.x;
+    setViewedElement(el);
+    changePosition(resPos);
+  };
+  var viewElementInstance = function viewElementInstance(el) {
+    var predict = getPredictPosition(el);
+    var resPos = -predict.x;
+    setViewedElement(el);
+    changePositionInstance(resPos);
+  };
+  return {
+    viewElement: viewElement,
+    viewElementInstance: viewElementInstance
+  };
+  function getElRect(el) {
+    var _el$getBoundingClient = el.getBoundingClientRect(),
+      x = _el$getBoundingClient.x,
+      y = _el$getBoundingClient.y;
+    var elWidth = el.offsetWidth;
+    var elHeight = el.offsetHeight;
+    return {
+      x: x,
+      y: y,
+      elWidth: elWidth,
+      elHeight: elHeight
+    };
+  }
+  function getObjRect() {
+    var obj = getObj();
+    var rect = obj === null || obj === void 0 ? void 0 : obj.getBoundingClientRect();
+    var width = (obj === null || obj === void 0 ? void 0 : obj.offsetWidth) || 0;
+    var height = (obj === null || obj === void 0 ? void 0 : obj.offsetHeight) || 0;
+    var x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
+    var y = (rect === null || rect === void 0 ? void 0 : rect.y) || 0;
+    return {
+      width: width,
+      height: height,
+      x: x,
+      y: y
+    };
+  }
+  function getTrackRect() {
+    var track = getTrack();
+    var rect = track === null || track === void 0 ? void 0 : track.getBoundingClientRect();
+    var width = (track === null || track === void 0 ? void 0 : track.offsetWidth) || 0;
+    var height = (track === null || track === void 0 ? void 0 : track.offsetHeight) || 0;
+    var x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
+    var y = (rect === null || rect === void 0 ? void 0 : rect.y) || 0;
+    return {
+      width: width,
+      height: height,
+      x: x,
+      y: y
+    };
+  }
+}
+
+/***/ }),
+
 /***/ "./src/hooks/ui-animations/useCollapsible.ts":
 /*!***************************************************!*\
   !*** ./src/hooks/ui-animations/useCollapsible.ts ***!
@@ -59814,7 +60081,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"button":"Buttons-module__button___I3yLe","icon":"Buttons-module__icon___U2AOU","content":"Buttons-module__content___lPb5_","text":"Buttons-module__text___htxqX","textSecondary":"Buttons-module__textSecondary___zZocr","widthFill":"Buttons-module__widthFill___HXb85","widthHug":"Buttons-module__widthHug___Uy38K","heightFill":"Buttons-module__heightFill___dwVrw","heightHug":"Buttons-module__heightHug___El1C3","small":"Buttons-module__small___x1NQN","medium":"Buttons-module__medium___BZfsd","large":"Buttons-module__large____KUDT","ultra":"Buttons-module__ultra___zBezN","primary":"Buttons-module__primary____crHN","disabled":"Buttons-module__disabled___INiFx","secondaryColor":"Buttons-module__secondaryColor___GONLZ","secondaryGray":"Buttons-module__secondaryGray___yu1Ne","tertiaryWhite":"Buttons-module__tertiaryWhite___QIZOq","tertiaryColor":"Buttons-module__tertiaryColor___DwXbw","tertiaryGray":"Buttons-module__tertiaryGray___y75cu","linkColor":"Buttons-module__linkColor___Kg7EN","linkBlack":"Buttons-module__linkBlack___WfA7t","linkGray":"Buttons-module__linkGray___CQYUd","tabActive":"Buttons-module__tabActive___chlqq","tab":"Buttons-module__tab___yBTjo","warning":"Buttons-module__warning___RaAeB"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"button":"Buttons-module__button___I3yLe","icon":"Buttons-module__icon___U2AOU","content":"Buttons-module__content___lPb5_","text":"Buttons-module__text___htxqX","textSecondary":"Buttons-module__textSecondary___zZocr","widthFill":"Buttons-module__widthFill___HXb85","widthHug":"Buttons-module__widthHug___Uy38K","heightFill":"Buttons-module__heightFill___dwVrw","heightHug":"Buttons-module__heightHug___El1C3","small":"Buttons-module__small___x1NQN","medium":"Buttons-module__medium___BZfsd","large":"Buttons-module__large____KUDT","ultra":"Buttons-module__ultra___zBezN","primary":"Buttons-module__primary____crHN","disabled":"Buttons-module__disabled___INiFx","primaryDarkTheme":"Buttons-module__primaryDarkTheme___hud24","secondaryColor":"Buttons-module__secondaryColor___GONLZ","secondaryColorDarkTheme":"Buttons-module__secondaryColorDarkTheme___NelUU","secondaryGray":"Buttons-module__secondaryGray___yu1Ne","secondaryGrayDarkTheme":"Buttons-module__secondaryGrayDarkTheme___tBYCy","tertiaryWhite":"Buttons-module__tertiaryWhite___QIZOq","tertiaryWhiteDarkTheme":"Buttons-module__tertiaryWhiteDarkTheme___hDj84","tertiaryColor":"Buttons-module__tertiaryColor___DwXbw","tertiaryColorDarkTheme":"Buttons-module__tertiaryColorDarkTheme___MTRDk","tertiaryGray":"Buttons-module__tertiaryGray___y75cu","linkColor":"Buttons-module__linkColor___Kg7EN","linkBlack":"Buttons-module__linkBlack___WfA7t","linkGray":"Buttons-module__linkGray___CQYUd","linkDarkTheme":"Buttons-module__linkDarkTheme___hAQhd","tabActive":"Buttons-module__tabActive___chlqq","tab":"Buttons-module__tab___yBTjo","warning":"Buttons-module__warning___RaAeB"});
 
 /***/ }),
 
@@ -59877,7 +60144,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles */ "./src/ui/Buttons/styles/index.ts");
 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); }
-var _excluded = ["children", "text", "textSecondary", "iconLeft", "iconRight", "hierarchy", "warning", "size", "width", "height", "additionStyles", "customComponent", "disabled"];
+var _excluded = ["children", "text", "textSecondary", "iconLeft", "iconRight", "hierarchy", "warning", "size", "width", "height", "additionStyles", "customComponent", "disabled", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -59909,19 +60176,21 @@ var Button = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(func
     additionStyles = _props$additionStyles === void 0 ? [] : _props$additionStyles,
     customComponent = _props.customComponent,
     disabled = _props.disabled,
+    _props$theme = _props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme,
     props = _objectWithoutProperties(_props, _excluded);
   var getHierarchyClassName = function getHierarchyClassName() {
     switch (hierarchy) {
       case "primary":
-        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.primary;
+        return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.primary, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.primaryDarkTheme, theme === "dark"));
       case "secondary-color":
-        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryColor;
+        return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryColor, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryColorDarkTheme, theme === "dark"));
       case "secondary-gray":
-        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryGray;
+        return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryGray, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.secondaryGrayDarkTheme, theme === "dark"));
       case "tertiary-white":
-        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryWhite;
+        return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryWhite, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryWhiteDarkTheme, theme === "dark"));
       case "tertiary-color":
-        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryColor;
+        return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryColor, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryColorDarkTheme, theme === "dark"));
       case "tertiary-gray":
         return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tertiaryGray;
       case "link-color":
@@ -59930,6 +60199,8 @@ var Button = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(func
         return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.linkBlack;
       case "link-gray":
         return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.linkGray;
+      case "link-dark-theme":
+        return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.linkDarkTheme;
       case "tab":
         return _styles__WEBPACK_IMPORTED_MODULE_3__.ButtonsStyle.tab;
       case "tab-active":
@@ -61434,7 +61705,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimePicker":"DateTimePicker-module__DateTimePicker___qMYhM","header":"DateTimePicker-module__header___I8wlx","title":"DateTimePicker-module__title___o52hs","subtitle":"DateTimePicker-module__subtitle___qRFKk","content":"DateTimePicker-module__content___l__Lm","tabWrapper":"DateTimePicker-module__tabWrapper___LPXjz","pickerWrapper":"DateTimePicker-module__pickerWrapper___fIlXJ","actions":"DateTimePicker-module__actions___bHZxf"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimePicker":"DateTimePicker-module__DateTimePicker___qMYhM","header":"DateTimePicker-module__header___I8wlx","title":"DateTimePicker-module__title___o52hs","subtitle":"DateTimePicker-module__subtitle___qRFKk","content":"DateTimePicker-module__content___l__Lm","tabWrapper":"DateTimePicker-module__tabWrapper___LPXjz","pickerWrapper":"DateTimePicker-module__pickerWrapper___fIlXJ","actions":"DateTimePicker-module__actions___bHZxf","dark":"DateTimePicker-module__dark___uSir3"});
 
 /***/ }),
 
@@ -61450,7 +61721,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarButton":"CalendarButton-module__CalendarButton___yVvoS","black":"CalendarButton-module__black____RFmq","gray":"CalendarButton-module__gray___JG7y4"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarButton":"CalendarButton-module__CalendarButton___yVvoS","black":"CalendarButton-module__black____RFmq","gray":"CalendarButton-module__gray___JG7y4","dark":"CalendarButton-module__dark___h_NGD"});
 
 /***/ }),
 
@@ -61466,7 +61737,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarDayWrapper":"CalendarDay-module__CalendarDayWrapper___oK70p","CalendarDay":"CalendarDay-module__CalendarDay___VgFhj","mark":"CalendarDay-module__mark___jB0aT","text":"CalendarDay-module__text___ft0zM","info":"CalendarDay-module__info___MvJmM","currentDay":"CalendarDay-module__currentDay___J6WB3","holiday":"CalendarDay-module__holiday___cQBoW","disabled":"CalendarDay-module__disabled___H7Y64","filter":"CalendarDay-module__filter___jE_gQ","active":"CalendarDay-module__active___LxSGE","left":"CalendarDay-module__left___eEsOh","right":"CalendarDay-module__right___xavxb"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarDayWrapper":"CalendarDay-module__CalendarDayWrapper___oK70p","CalendarDay":"CalendarDay-module__CalendarDay___VgFhj","mark":"CalendarDay-module__mark___jB0aT","text":"CalendarDay-module__text___ft0zM","info":"CalendarDay-module__info___MvJmM","currentDay":"CalendarDay-module__currentDay___J6WB3","holiday":"CalendarDay-module__holiday___cQBoW","disabled":"CalendarDay-module__disabled___H7Y64","filter":"CalendarDay-module__filter___jE_gQ","active":"CalendarDay-module__active___LxSGE","left":"CalendarDay-module__left___eEsOh","right":"CalendarDay-module__right___xavxb","darkTheme":"CalendarDay-module__darkTheme___lJnHz"});
 
 /***/ }),
 
@@ -61482,7 +61753,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarMonth":"CalendarMonth-module__CalendarMonth___BVPk3","current":"CalendarMonth-module__current___iR71C","disabled":"CalendarMonth-module__disabled___VNFpt"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarMonth":"CalendarMonth-module__CalendarMonth___BVPk3","current":"CalendarMonth-module__current___iR71C","disabled":"CalendarMonth-module__disabled___VNFpt","darkTheme":"CalendarMonth-module__darkTheme___k7jgU"});
 
 /***/ }),
 
@@ -61498,7 +61769,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarYear":"CalendarYear-module__CalendarYear___gMG1A","current":"CalendarYear-module__current___aLXpm","disabled":"CalendarYear-module__disabled___dIYvt"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"CalendarYear":"CalendarYear-module__CalendarYear___gMG1A","current":"CalendarYear-module__current___aLXpm","disabled":"CalendarYear-module__disabled___dIYvt","darkTheme":"CalendarYear-module__darkTheme___rr4Oy"});
 
 /***/ }),
 
@@ -61514,7 +61785,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"wrapper":"TimePickerFeed-module__wrapper___BiInJ","viewContent":"TimePickerFeed-module__viewContent___NiSmH","TimePickerFeed":"TimePickerFeed-module__TimePickerFeed___QkjXL","item":"TimePickerFeed-module__item___SczLD","content":"TimePickerFeed-module__content___Qb5A3","center":"TimePickerFeed-module__center___skogb","floor1":"TimePickerFeed-module__floor1___Lu5VV"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"wrapper":"TimePickerFeed-module__wrapper___BiInJ","viewContent":"TimePickerFeed-module__viewContent___NiSmH","TimePickerFeed":"TimePickerFeed-module__TimePickerFeed___QkjXL","item":"TimePickerFeed-module__item___SczLD","content":"TimePickerFeed-module__content___Qb5A3","center":"TimePickerFeed-module__center___skogb","floor1":"TimePickerFeed-module__floor1___Lu5VV","darkTheme":"TimePickerFeed-module__darkTheme___LUnBx"});
 
 /***/ }),
 
@@ -61606,7 +61877,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"datePicker":"DatePicker-module__datePicker___rIs4v","header":"DatePicker-module__header___bGmOJ","monthYear":"DatePicker-module__monthYear___JawRJ","changeMonth":"DatePicker-module__changeMonth___VoQD_","weekDaysList":"DatePicker-module__weekDaysList___ozEzA","weekDay":"DatePicker-module__weekDay___hC8So","daysGrid":"DatePicker-module__daysGrid___sG9pj"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"datePicker":"DatePicker-module__datePicker___rIs4v","header":"DatePicker-module__header___bGmOJ","monthYear":"DatePicker-module__monthYear___JawRJ","changeMonth":"DatePicker-module__changeMonth___VoQD_","weekDaysList":"DatePicker-module__weekDaysList___ozEzA","weekDay":"DatePicker-module__weekDay___hC8So","daysGrid":"DatePicker-module__daysGrid___sG9pj","dark":"DatePicker-module__dark___iQSm7"});
 
 /***/ }),
 
@@ -61622,7 +61893,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"TimePicker":"TimePicker-module__TimePicker___iT3kM","timer":"TimePicker-module__timer___c3ZIO","main":"TimePicker-module__main___A3N1w","divider":"TimePicker-module__divider___PbRR9","line":"TimePicker-module__line___wOgTS"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"TimePicker":"TimePicker-module__TimePicker___iT3kM","timer":"TimePicker-module__timer___c3ZIO","main":"TimePicker-module__main___A3N1w","divider":"TimePicker-module__divider___PbRR9","line":"TimePicker-module__line___wOgTS","dark":"TimePicker-module__dark___p_dkO"});
 
 /***/ }),
 
@@ -61638,7 +61909,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"YearMonthPicker":"YearMonthPicker-module__YearMonthPicker___jd8KA","header":"YearMonthPicker-module__header___CuQWd","switchers":"YearMonthPicker-module__switchers___jgn_g","grid":"YearMonthPicker-module__grid___AQuPU"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"YearMonthPicker":"YearMonthPicker-module__YearMonthPicker___jd8KA","header":"YearMonthPicker-module__header___CuQWd","switchers":"YearMonthPicker-module__switchers___jgn_g","grid":"YearMonthPicker-module__grid___AQuPU","dark":"YearMonthPicker-module__dark___TnpR3"});
 
 /***/ }),
 
@@ -61876,6 +62147,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../ui */ "./src/ui/DateTimePicker/ui/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -61890,6 +62166,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
   var date = props.date,
     onSubmit = props.onSubmit,
@@ -61897,7 +62174,9 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
     type = _props$type === void 0 ? 'datetime' : _props$type,
     onCancel = props.onCancel,
     subTitle = props.subTitle,
-    style = props.style;
+    style = props.style,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_ui__WEBPACK_IMPORTED_MODULE_4__.convertDate)({
       initDate: date || undefined,
       type: type
@@ -61985,7 +62264,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
       className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.tabWrapper,
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.TabFrame, {
         width: 'fill',
-        tabs: tabs
+        tabs: tabs,
+        theme: theme
       })
     });
   };
@@ -62001,7 +62281,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
           },
           onYearButtonClick: function onYearButtonClick() {
             return setPickerType('year');
-          }
+          },
+          theme: theme
         });
       case 'year':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_5__.YearPicker, {
@@ -62012,7 +62293,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
           },
           onChoose: function onChoose() {
             return setPickerType('date');
-          }
+          },
+          theme: theme
         });
       case 'month':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_5__.MonthPicker, {
@@ -62026,13 +62308,15 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
           },
           onYearButtonClick: function onYearButtonClick() {
             return setPickerType('year');
-          }
+          },
+          theme: theme
         });
       case 'time':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_5__.TimePicker, {
           time: getDate(),
           onlyTime: type === 'time',
-          onChangeTime: handleChangeTime
+          onChangeTime: handleChangeTime,
+          theme: theme
         });
     }
   };
@@ -62055,7 +62339,7 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
     }
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.DateTimePicker,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_8__["default"])(_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.DateTimePicker, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_6__.DateTimePickerStyle.dark, theme === "dark")),
     style: style,
     ref: ref,
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
@@ -62077,7 +62361,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
         hierarchy: 'secondary-gray',
         text: 'Отмена',
         width: 'fill',
-        onClick: onCancel
+        onClick: onCancel,
+        theme: theme
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_4__.Button, {
         size: 'small',
         hierarchy: 'primary',
@@ -62085,7 +62370,8 @@ var DateTimePicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardR
         width: 'fill',
         onClick: function onClick() {
           return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenDate);
-        }
+        },
+        theme: theme
       })]
     })]
   });
@@ -62109,7 +62395,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 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); }
-var _excluded = ["color", "text"];
+var _excluded = ["color", "text", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -62124,9 +62410,11 @@ function CalendarButton(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color,
     text = _ref.text,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var getClassName = function getClassName() {
-    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.CalendarButton, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.black, color === 'black'), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.gray, color === 'gray'));
+    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.CalendarButton, _defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.black, color === 'black'), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.gray, color === 'gray'), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarButtonStyle.dark, theme === "dark"));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", _objectSpread(_objectSpread({
     className: getClassName()
@@ -62153,7 +62441,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 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); }
-var _excluded = ["text", "info", "mark", "currentDay", "filter", "holiday", "active", "disabled", "rightFilter", "leftFilter"];
+var _excluded = ["text", "info", "mark", "currentDay", "filter", "holiday", "active", "disabled", "rightFilter", "leftFilter", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -62182,6 +62470,8 @@ function CalendarDay(_ref) {
     rightFilter = _ref$rightFilter === void 0 ? false : _ref$rightFilter,
     _ref$leftFilter = _ref.leftFilter,
     leftFilter = _ref$leftFilter === void 0 ? false : _ref$leftFilter,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var getMark = function getMark() {
     if (mark) {
@@ -62204,7 +62494,7 @@ function CalendarDay(_ref) {
     return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.CalendarDay, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.currentDay, currentDay), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.holiday, holiday), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.active, active), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.filter, filter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.disabled, disabled));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.CalendarDayWrapper, _defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.filter, filter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.right, rightFilter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.left, leftFilter)),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.CalendarDayWrapper, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.filter, filter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.right, rightFilter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.left, leftFilter), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarDayStyle.darkTheme, theme === "dark")),
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button", _objectSpread(_objectSpread({}, props), {}, {
       className: getClassName(),
       children: [getMark(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
@@ -62233,7 +62523,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 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); }
-var _excluded = ["text", "current", "disabled"];
+var _excluded = ["text", "current", "disabled", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -62248,9 +62538,11 @@ function CalendarMonth(_ref) {
   var text = _ref.text,
     current = _ref.current,
     disabled = _ref.disabled,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var getClassName = function getClassName() {
-    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.CalendarMonth, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.current, current), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.disabled, disabled));
+    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.CalendarMonth, _defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.current, current), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarMonthStyle.darkTheme, theme === "dark"));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", _objectSpread(_objectSpread({
     className: getClassName()
@@ -62277,7 +62569,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 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); }
-var _excluded = ["text", "current", "disabled"];
+var _excluded = ["text", "current", "disabled", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -62292,9 +62584,11 @@ function CalendarYear(_ref) {
   var text = _ref.text,
     current = _ref.current,
     disabled = _ref.disabled,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var getClassName = function getClassName() {
-    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.CalendarYear, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.current, current), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.disabled, disabled));
+    return (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.CalendarYear, _defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.current, current), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_2__.CalendarYearStyle.darkTheme, theme === "dark"));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", _objectSpread(_objectSpread({
     className: getClassName()
@@ -62344,7 +62638,9 @@ function TimePickerFeed(_ref) {
   var list = _ref.list,
     _ref$centerItem = _ref.centerItem,
     centerItem = _ref$centerItem === void 0 ? 0 : _ref$centerItem,
-    onChangeCenterItem = _ref.onChangeCenterItem;
+    onChangeCenterItem = _ref.onChangeCenterItem,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var _useSyncedStateRef = (0,_hooks__WEBPACK_IMPORTED_MODULE_3__.useSyncedStateRef)(centerItem * _config__WEBPACK_IMPORTED_MODULE_5__.CELL_SIZE),
     _useSyncedStateRef2 = _slicedToArray(_useSyncedStateRef, 3),
@@ -62488,7 +62784,7 @@ function TimePickerFeed(_ref) {
     adjustScrollPosition();
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerFeedStyle.wrapper,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerFeedStyle.wrapper, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerFeedStyle.darkTheme, theme === "dark")),
     children: [getViewItem(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
       ref: containerRef,
       onScroll: onScroll,
@@ -62711,18 +63007,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var date_fns_locale__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! date-fns/locale */ "./node_modules/date-fns/locale/ru.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/subMonths.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addMonths.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getDay.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isWithinInterval.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/startOfWeek.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/startOfMonth.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/endOfWeek.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/endOfMonth.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/eachDayOfInterval.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addWeeks.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameMonth.js");
+/* harmony import */ var date_fns_locale__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! date-fns/locale */ "./node_modules/date-fns/locale/ru.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/subMonths.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addMonths.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getDay.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isWithinInterval.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/startOfWeek.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/startOfMonth.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/endOfWeek.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/endOfMonth.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/eachDayOfInterval.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addWeeks.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameMonth.js");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
@@ -62731,6 +63027,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../lib */ "./src/ui/DateTimePicker/lib/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../config */ "./src/ui/DateTimePicker/config/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -62749,6 +63050,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 var getDate = function getDate(date) {
   var res;
   if (Array.isArray(date)) {
@@ -62767,7 +63069,9 @@ function DatePicker(_ref) {
     onYearButtonClick = _ref.onYearButtonClick,
     onMonthButtonClick = _ref.onMonthButtonClick,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'date' : _ref$type;
+    type = _ref$type === void 0 ? 'date' : _ref$type,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(getDate(date)),
     _useState2 = _slicedToArray(_useState, 2),
     target = _useState2[0],
@@ -62798,7 +63102,7 @@ function DatePicker(_ref) {
   var prevMonth = function prevMonth() {
     setTarget(function (prevState) {
       try {
-        return (0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)((0,date_fns__WEBPACK_IMPORTED_MODULE_10__.subMonths)(prevState, _const__WEBPACK_IMPORTED_MODULE_6__.STEP_DAY_IN_DATE_PICKER), {
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)((0,date_fns__WEBPACK_IMPORTED_MODULE_11__.subMonths)(prevState, _const__WEBPACK_IMPORTED_MODULE_6__.STEP_DAY_IN_DATE_PICKER), {
           errorNull: true
         }) || prevState;
       } catch (e) {
@@ -62809,7 +63113,7 @@ function DatePicker(_ref) {
   var nextMonth = function nextMonth() {
     setTarget(function (prevState) {
       try {
-        return (0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)((0,date_fns__WEBPACK_IMPORTED_MODULE_11__.addMonths)(prevState, _const__WEBPACK_IMPORTED_MODULE_6__.STEP_DAY_IN_DATE_PICKER), {
+        return (0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)((0,date_fns__WEBPACK_IMPORTED_MODULE_12__.addMonths)(prevState, _const__WEBPACK_IMPORTED_MODULE_6__.STEP_DAY_IN_DATE_PICKER), {
           errorNull: true
         }) || prevState;
       } catch (e) {
@@ -62819,7 +63123,7 @@ function DatePicker(_ref) {
   };
   var getTargetMonth = function getTargetMonth() {
     return (0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)(target, {
-      locale: date_fns_locale__WEBPACK_IMPORTED_MODULE_12__.ru,
+      locale: date_fns_locale__WEBPACK_IMPORTED_MODULE_13__.ru,
       to: 'LLLL'
     });
   };
@@ -62829,7 +63133,7 @@ function DatePicker(_ref) {
     });
   };
   var holiday = function holiday(date) {
-    var day = (0,date_fns__WEBPACK_IMPORTED_MODULE_13__.getDay)(date);
+    var day = (0,date_fns__WEBPACK_IMPORTED_MODULE_14__.getDay)(date);
     var isWeekend = _const__WEBPACK_IMPORTED_MODULE_6__.WEEKEND_NUMBERS.includes(day);
     return isWeekend || (isHoliday ? isHoliday(date) : false);
   };
@@ -62870,7 +63174,7 @@ function DatePicker(_ref) {
       if (date == null || !Array.isArray(date)) return false;
       var start = date[0];
       var end = date[1];
-      return !!(end && start && ((0,date_fns__WEBPACK_IMPORTED_MODULE_14__.isWithinInterval)(curDate, {
+      return !!(end && start && ((0,date_fns__WEBPACK_IMPORTED_MODULE_15__.isWithinInterval)(curDate, {
         start: start,
         end: end
       }) || isActive(curDate)));
@@ -62883,21 +63187,21 @@ function DatePicker(_ref) {
     return (0,_lib__WEBPACK_IMPORTED_MODULE_7__.equalDates)(today, date);
   };
   var days = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    var start = (0,date_fns__WEBPACK_IMPORTED_MODULE_15__.startOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_16__.startOfMonth)(target), {
+    var start = (0,date_fns__WEBPACK_IMPORTED_MODULE_16__.startOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_17__.startOfMonth)(target), {
       weekStartsOn: _const__WEBPACK_IMPORTED_MODULE_6__.WEEK_START_NUM
     });
-    var end = (0,date_fns__WEBPACK_IMPORTED_MODULE_17__.endOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_18__.endOfMonth)(target), {
+    var end = (0,date_fns__WEBPACK_IMPORTED_MODULE_18__.endOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_19__.endOfMonth)(target), {
       weekStartsOn: _const__WEBPACK_IMPORTED_MODULE_6__.WEEK_START_NUM
     });
-    var allDays = (0,date_fns__WEBPACK_IMPORTED_MODULE_19__.eachDayOfInterval)({
+    var allDays = (0,date_fns__WEBPACK_IMPORTED_MODULE_20__.eachDayOfInterval)({
       start: start,
       end: end
     });
     if (allDays.length < _const__WEBPACK_IMPORTED_MODULE_6__.DAYS_NUM_IN_DATE_PICKER) {
-      var extraWeekEnd = (0,date_fns__WEBPACK_IMPORTED_MODULE_17__.endOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_20__.addWeeks)(end, 1), {
+      var extraWeekEnd = (0,date_fns__WEBPACK_IMPORTED_MODULE_18__.endOfWeek)((0,date_fns__WEBPACK_IMPORTED_MODULE_21__.addWeeks)(end, 1), {
         weekStartsOn: _const__WEBPACK_IMPORTED_MODULE_6__.WEEK_START_NUM
       });
-      allDays = (0,date_fns__WEBPACK_IMPORTED_MODULE_19__.eachDayOfInterval)({
+      allDays = (0,date_fns__WEBPACK_IMPORTED_MODULE_20__.eachDayOfInterval)({
         start: start,
         end: extraWeekEnd
       });
@@ -62907,7 +63211,7 @@ function DatePicker(_ref) {
     });
   }, [target]);
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_8__.DatePickerStyle.datePicker,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_10__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DatePickerStyle.datePicker, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DatePickerStyle.dark, theme === 'dark')),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_8__.DatePickerStyle.header,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
@@ -62915,22 +63219,24 @@ function DatePicker(_ref) {
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_5__.CalendarButton, {
           color: 'black',
           text: getTargetMonth(),
-          onClick: onMonthButtonClick
+          onClick: onMonthButtonClick,
+          theme: theme
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_5__.CalendarButton, {
           color: 'gray',
           text: getTargetYear(),
-          onClick: onYearButtonClick
+          onClick: onYearButtonClick,
+          theme: theme
         })]
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_8__.DatePickerStyle.changeMonth,
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.ChevronUpSVG, {}),
           onClick: prevMonth
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.ChevronDownSVG, {}),
           onClick: nextMonth
         })]
@@ -62950,7 +63256,7 @@ function DatePicker(_ref) {
           text: Number((0,_lib__WEBPACK_IMPORTED_MODULE_2__.saveFormatDate)(item, {
             to: 'dd'
           })),
-          disabled: !(0,date_fns__WEBPACK_IMPORTED_MODULE_21__.isSameMonth)(target, item),
+          disabled: !(0,date_fns__WEBPACK_IMPORTED_MODULE_22__.isSameMonth)(target, item),
           holiday: holiday(item),
           mark: mark(item),
           info: info(item),
@@ -62961,7 +63267,8 @@ function DatePicker(_ref) {
             return onClickDay(item);
           },
           rightFilter: isStartInterval(item),
-          leftFilter: isEndInterval(item)
+          leftFilter: isEndInterval(item),
+          theme: theme
         }, idx);
       })
     })]
@@ -62985,13 +63292,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameMonth.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getMonth.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameMonth.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getMonth.js");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/lib */ "./src/lib/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 /* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../const */ "./src/ui/DateTimePicker/const/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -63006,13 +63318,16 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 function MonthPicker(_ref) {
   var targetDate = _ref.targetDate,
     onChangeTarget = _ref.onChangeTarget,
     onYearButtonClick = _ref.onYearButtonClick,
     onChoose = _ref.onChoose,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'date' : _ref$type;
+    type = _ref$type === void 0 ? 'date' : _ref$type,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)((0,_ui__WEBPACK_IMPORTED_MODULE_2__.convertDate)({
       initDate: targetDate,
       type: 'date'
@@ -63026,7 +63341,7 @@ function MonthPicker(_ref) {
         initDate: targetDate,
         type: 'date'
       });
-      if (convertedDate && !(0,date_fns__WEBPACK_IMPORTED_MODULE_7__.isSameMonth)(convertedDate, target)) {
+      if (convertedDate && !(0,date_fns__WEBPACK_IMPORTED_MODULE_8__.isSameMonth)(convertedDate, target)) {
         setTarget(convertedDate);
       }
     } catch (e) {
@@ -63068,7 +63383,7 @@ function MonthPicker(_ref) {
     });
   };
   var isActiveMonth = function isActiveMonth(monthNum) {
-    return target ? (0,date_fns__WEBPACK_IMPORTED_MODULE_8__.getMonth)(target) === monthNum : false;
+    return target ? (0,date_fns__WEBPACK_IMPORTED_MODULE_9__.getMonth)(target) === monthNum : false;
   };
   var _onClick = function onClick(monthNum) {
     var resNum = monthNum % _const__WEBPACK_IMPORTED_MODULE_6__.SHORTCUT_MONTHS.length;
@@ -63099,23 +63414,24 @@ function MonthPicker(_ref) {
     return _const__WEBPACK_IMPORTED_MODULE_6__.SHORTCUT_MONTHS.concat(_const__WEBPACK_IMPORTED_MODULE_6__.SHORTCUT_MONTHS.slice(0, 3));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_5__.YearMonthPickerStyle.YearMonthPicker,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_7__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.YearMonthPickerStyle.YearMonthPicker, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_5__.YearMonthPickerStyle.dark, theme === "dark")),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_5__.YearMonthPickerStyle.header,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.CalendarButton, {
         color: 'black',
         text: getTargetYear(),
-        onClick: onYearButtonClick
+        onClick: onYearButtonClick,
+        theme: theme
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_5__.YearMonthPickerStyle.switchers,
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.ChevronUpSVG, {}),
           onClick: prevYear
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.ChevronDownSVG, {}),
           onClick: nextYear
         })]
@@ -63129,7 +63445,8 @@ function MonthPicker(_ref) {
             return _onClick(idx);
           },
           current: isActiveMonth(idx),
-          disabled: idx >= _const__WEBPACK_IMPORTED_MODULE_6__.SHORTCUT_MONTHS.length
+          disabled: idx >= _const__WEBPACK_IMPORTED_MODULE_6__.SHORTCUT_MONTHS.length,
+          theme: theme
         }, idx);
       })
     })]
@@ -63157,6 +63474,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../components */ "./src/ui/DateTimePicker/ui/components/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../config */ "./src/ui/DateTimePicker/config/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -63169,6 +63491,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 var getHours = function getHours(_ref) {
   var onlyTime = _ref.onlyTime,
     time = _ref.time;
@@ -63216,7 +63539,9 @@ function TimePicker(_ref4) {
   var time = _ref4.time,
     onChangeTime = _ref4.onChangeTime,
     _ref4$onlyTime = _ref4.onlyTime,
-    onlyTime = _ref4$onlyTime === void 0 ? false : _ref4$onlyTime;
+    onlyTime = _ref4$onlyTime === void 0 ? false : _ref4$onlyTime,
+    _ref4$theme = _ref4.theme,
+    theme = _ref4$theme === void 0 ? "light" : _ref4$theme;
   var hours = Array.from({
     length: 24
   }).map(function (_, i) {
@@ -63288,7 +63613,7 @@ function TimePicker(_ref4) {
     }
   }, [time]);
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.TimePicker,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_6__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.TimePicker, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.dark, theme === "dark")),
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.timer,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
@@ -63301,14 +63626,16 @@ function TimePicker(_ref4) {
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_3__.TimePickerFeed, {
           list: hours,
           centerItem: hoursCenter,
-          onChangeCenterItem: setHoursCenter
+          onChangeCenterItem: setHoursCenter,
+          theme: theme
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
           className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.divider,
           children: ":"
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_3__.TimePickerFeed, {
           list: minutes,
           centerItem: minuteCenter,
-          onChangeCenterItem: setMinuteCenter
+          onChangeCenterItem: setMinuteCenter,
+          theme: theme
         })]
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_4__.TimePickerStyle.line
@@ -63334,16 +63661,21 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameYear.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getYear.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/subYears.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addYears.js");
-/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/setYear.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/isSameYear.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/getYear.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/subYears.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/addYears.js");
+/* harmony import */ var date_fns__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! date-fns */ "./node_modules/date-fns/setYear.js");
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../styles */ "./src/ui/DateTimePicker/styles/index.ts");
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib */ "./src/ui/DateTimePicker/lib/index.ts");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../config */ "./src/ui/DateTimePicker/config/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -63358,6 +63690,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
+
 var getTarget = function getTarget(targetDate) {
   return (Array.isArray(targetDate) ? targetDate[0] : targetDate) || new Date().toISOString();
 };
@@ -63366,7 +63699,9 @@ function YearPicker(_ref) {
     onChangeTarget = _ref.onChangeTarget,
     onChoose = _ref.onChoose,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'date' : _ref$type;
+    type = _ref$type === void 0 ? 'date' : _ref$type,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(getTarget(targetDate)),
     _useState2 = _slicedToArray(_useState, 2),
     showTarget = _useState2[0],
@@ -63374,7 +63709,7 @@ function YearPicker(_ref) {
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     try {
       var convertedDate = getTarget(targetDate);
-      if (!(0,date_fns__WEBPACK_IMPORTED_MODULE_7__.isSameYear)(convertedDate, showTarget)) {
+      if (!(0,date_fns__WEBPACK_IMPORTED_MODULE_8__.isSameYear)(convertedDate, showTarget)) {
         setShowTarget(convertedDate);
       }
     } catch (e) {
@@ -63382,7 +63717,7 @@ function YearPicker(_ref) {
     }
   }, [targetDate]);
   var getYearInterval = function getYearInterval() {
-    var year = (0,date_fns__WEBPACK_IMPORTED_MODULE_8__.getYear)(showTarget || Date.now());
+    var year = (0,date_fns__WEBPACK_IMPORTED_MODULE_9__.getYear)(showTarget || Date.now());
     var start = year - _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_TARGET_YEAR_INDEX;
     // Минус 1, так как старт с первого года промежутка
     var end = start + _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT - 1;
@@ -63390,27 +63725,27 @@ function YearPicker(_ref) {
   };
   var prevYears = function prevYears() {
     setShowTarget(function (prevState) {
-      return (0,date_fns__WEBPACK_IMPORTED_MODULE_9__.subYears)(prevState, _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT).toISOString();
+      return (0,date_fns__WEBPACK_IMPORTED_MODULE_10__.subYears)(prevState, _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT).toISOString();
     });
   };
   var nextYears = function nextYears() {
     setShowTarget(function (prevState) {
-      return (0,date_fns__WEBPACK_IMPORTED_MODULE_10__.addYears)(prevState, _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT).toISOString();
+      return (0,date_fns__WEBPACK_IMPORTED_MODULE_11__.addYears)(prevState, _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT).toISOString();
     });
   };
   var isActive = function isActive(yearNum) {
     var target = getTarget(targetDate);
-    return !!target && (0,date_fns__WEBPACK_IMPORTED_MODULE_8__.getYear)(target) === yearNum;
+    return !!target && (0,date_fns__WEBPACK_IMPORTED_MODULE_9__.getYear)(target) === yearNum;
   };
   var onClickYear = function onClickYear(yearNum) {
     onChangeTarget === null || onChangeTarget === void 0 || onChangeTarget(function (prevState) {
       var newState = prevState;
       if (Array.isArray(newState)) {
         newState = newState.map(function (item) {
-          return item ? (0,date_fns__WEBPACK_IMPORTED_MODULE_11__.setYear)(item, yearNum).toISOString() : item;
+          return item ? (0,date_fns__WEBPACK_IMPORTED_MODULE_12__.setYear)(item, yearNum).toISOString() : item;
         });
       } else {
-        newState = newState ? (0,date_fns__WEBPACK_IMPORTED_MODULE_11__.setYear)(newState, yearNum).toISOString() : newState;
+        newState = newState ? (0,date_fns__WEBPACK_IMPORTED_MODULE_12__.setYear)(newState, yearNum).toISOString() : newState;
       }
       return (0,_lib__WEBPACK_IMPORTED_MODULE_5__.convertDate)({
         initDate: newState,
@@ -63420,7 +63755,7 @@ function YearPicker(_ref) {
     onChoose === null || onChoose === void 0 || onChoose();
   };
   var years = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {
-    var showTargetYear = (0,date_fns__WEBPACK_IMPORTED_MODULE_8__.getYear)(showTarget);
+    var showTargetYear = (0,date_fns__WEBPACK_IMPORTED_MODULE_9__.getYear)(showTarget);
     return Array.from({
       length: _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_YEARS_COUNT
     }, function (_, index) {
@@ -63428,23 +63763,24 @@ function YearPicker(_ref) {
     });
   }, [showTarget]);
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_4__.YearMonthPickerStyle.YearMonthPicker,
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_7__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.YearMonthPickerStyle.YearMonthPicker, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.YearMonthPickerStyle.dark, theme === 'dark')),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_4__.YearMonthPickerStyle.header,
       children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.CalendarButton, {
         color: 'black',
         text: getYearInterval(),
-        disabled: true
+        disabled: true,
+        theme: theme
       }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
         className: _styles__WEBPACK_IMPORTED_MODULE_4__.YearMonthPickerStyle.switchers,
         children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_3__.ChevronUpSVG, {}),
           onClick: prevYears
         }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.MicroButton, {
           size: '28',
-          color: 'color-hover',
+          color: theme === "light" ? 'color-hover' : 'rose',
           icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_3__.ChevronDownSVG, {}),
           onClick: nextYears
         })]
@@ -63458,7 +63794,8 @@ function YearPicker(_ref) {
           onClick: function onClick() {
             return onClickYear(item);
           },
-          disabled: idx >= _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_DISABLED_YEARS_INDEX_START
+          disabled: idx >= _config__WEBPACK_IMPORTED_MODULE_6__.YEAR_PICKER_DISABLED_YEARS_INDEX_START,
+          theme: theme
         }, idx);
       })
     })]
@@ -63522,7 +63859,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"Dropdown":"Dropdown-module__Dropdown___qWoW1","header":"Dropdown-module__header___Ct_Nh"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"Dropdown":"Dropdown-module__Dropdown___qWoW1","header":"Dropdown-module__header___Ct_Nh","DropdownDark":"Dropdown-module__DropdownDark___P5WL1"});
 
 /***/ }),
 
@@ -63588,7 +63925,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../styles */ "./src/ui/Dropdown/styles/index.ts");
 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); }
-var _excluded = ["items", "title", "size", "onClick", "width", "isActive", "className", "styles", "style", "elementAfter", "elementBefore"];
+var _excluded = ["items", "title", "size", "onClick", "width", "isActive", "className", "styles", "style", "elementAfter", "elementBefore", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -63618,6 +63955,8 @@ var _Dropdown = function _Dropdown(props, ref) {
     style = props.style,
     elementAfter = props.elementAfter,
     elementBefore = props.elementBefore,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme,
     scrollCallbacks = _objectWithoutProperties(props, _excluded);
   var objRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useSmartScroll)(objRef, scrollCallbacks);
@@ -63678,11 +64017,12 @@ var _Dropdown = function _Dropdown(props, ref) {
       },
       selected: active
     }, itemProps), {}, {
-      key: idx
+      key: idx,
+      theme: theme
     }));
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_6__.DropdownStyle.Dropdown, className),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_6__.DropdownStyle.Dropdown, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_6__.DropdownStyle.DropdownDark, theme === "dark"), className),
     style: getStyle(),
     ref: objRef,
     children: [elementBefore, title !== undefined && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h6", {
@@ -63741,7 +64081,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"dropdownItem":"DropdownItem-module__dropdownItem___N8ZNV","showIcon":"DropdownItem-module__showIcon___Dg7F4","main":"DropdownItem-module__main___Lhu3D","text":"DropdownItem-module__text___ASNww","supportText":"DropdownItem-module__supportText___UEw04","check":"DropdownItem-module__check___e4EmQ","selected":"DropdownItem-module__selected___gw70Z","disabled":"DropdownItem-module__disabled___hI0kb","userIcon":"DropdownItem-module__userIcon___MATjB","small":"DropdownItem-module__small___IbHXt","medium":"DropdownItem-module__medium___bm3mg","widthFill":"DropdownItem-module__widthFill___m3eb0","widthHug":"DropdownItem-module__widthHug___HJMle"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"dropdownItem":"DropdownItem-module__dropdownItem___N8ZNV","showIcon":"DropdownItem-module__showIcon___Dg7F4","main":"DropdownItem-module__main___Lhu3D","text":"DropdownItem-module__text___ASNww","supportText":"DropdownItem-module__supportText___UEw04","check":"DropdownItem-module__check___e4EmQ","selected":"DropdownItem-module__selected___gw70Z","disabled":"DropdownItem-module__disabled___hI0kb","userIcon":"DropdownItem-module__userIcon___MATjB","small":"DropdownItem-module__small___IbHXt","medium":"DropdownItem-module__medium___bm3mg","widthFill":"DropdownItem-module__widthFill___m3eb0","widthHug":"DropdownItem-module__widthHug___HJMle","dark":"DropdownItem-module__dark___nHP0y"});
 
 /***/ }),
 
@@ -63838,7 +64178,9 @@ function DropdownItem(props) {
     width = _props$width === void 0 ? 'fill' : _props$width,
     beforeElement = props.beforeElement,
     afterElement = props.afterElement,
-    ownerElement = props.ownerElement;
+    ownerElement = props.ownerElement,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHover = _useState2[0],
@@ -63883,7 +64225,7 @@ function DropdownItem(props) {
     disabled: disabled,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.dropdownItem, additionStyles, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.selected, selected), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.small, size === 'small'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.medium, size === 'medium')),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.dropdownItem, additionStyles, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.selected, selected), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.small, size === 'small'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.medium, size === 'medium'), _styles__WEBPACK_IMPORTED_MODULE_5__.DropdownItemStyle.dark, theme === 'dark')),
     children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
       children: [getShowIcon(), user ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.UserPick, {
         url: user,
@@ -64555,64 +64897,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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; }
 
 
 
 
 
 
-function FormBuilder(_ref) {
-  var schema = _ref.schema,
-    formDataDefault = _ref.formDataDefault,
-    onChange = _ref.onChange,
-    onChangeIsError = _ref.onChangeIsError,
-    inputFieldClassName = _ref.inputFieldClassName,
-    additionIsErrorFields = _ref.additionIsErrorFields,
-    onChangeValidateIsError = _ref.onChangeValidateIsError,
-    formDataDefaultListener = _ref.formDataDefaultListener,
-    inputFieldAdditionProps = _ref.inputFieldAdditionProps,
-    _ref$sensitiveErrorSe = _ref.sensitiveErrorSearch,
-    sensitiveErrorSearch = _ref$sensitiveErrorSe === void 0 ? true : _ref$sensitiveErrorSe,
-    _ref$clearForm = _ref.clearForm,
-    clearForm = _ref$clearForm === void 0 ? false : _ref$clearForm;
-  //==================================================================================================================
-  // Пока спорная фича, скорее всего лишняя
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    formBuilderStateStore = _useState2[0],
-    setFormBuilderStateStore = _useState2[1];
-  var formBuilderRefStore = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)({});
-  var getStateStoreValue = function getStateStoreValue(key) {
-    return formBuilderStateStore[key];
-  };
-  var addStateStoreValue = function addStateStoreValue(value, key) {
-    setFormBuilderStateStore(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, key, value));
-    });
-  };
-  var removeStateStoreValue = function removeStateStoreValue(key) {
-    setFormBuilderStateStore(function (prevState) {
-      var newState = _objectSpread({}, prevState);
-      delete newState[key];
-      return newState;
-    });
-  };
-  var getRefStoreValue = function getRefStoreValue(key) {
-    return formBuilderRefStore.current[key];
-  };
-  var addRefStoreValue = function addRefStoreValue(value, key) {
-    formBuilderRefStore.current[key] = value;
-  };
-  var removeRefStoreValue = function removeRefStoreValue(key) {
-    delete formBuilderRefStore.current[key];
-  };
-  //==================================================================================================================
+var _FormBuilder = function _FormBuilder(props, ref) {
+  var schema = props.schema,
+    formDataDefault = props.formDataDefault,
+    onChange = props.onChange,
+    onChangeIsError = props.onChangeIsError,
+    inputFieldClassName = props.inputFieldClassName,
+    additionIsErrorFields = props.additionIsErrorFields,
+    onChangeValidateIsError = props.onChangeValidateIsError,
+    formDataDefaultListener = props.formDataDefaultListener,
+    inputFieldAdditionProps = props.inputFieldAdditionProps,
+    _props$sensitiveError = props.sensitiveErrorSearch,
+    sensitiveErrorSearch = _props$sensitiveError === void 0 ? true : _props$sensitiveError,
+    _props$clearForm = props.clearForm,
+    clearForm = _props$clearForm === void 0 ? false : _props$clearForm;
   var privateRefStore = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)({});
   var getPrivateRefStoreValue = function getPrivateRefStoreValue(key) {
     return privateRefStore.current[key];
@@ -64644,7 +64948,6 @@ function FormBuilder(_ref) {
   });
   var validateFunctions = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)([]);
   validateFunctions.current = [];
-  // removePrivateRefStoreValue(KEY_WAY_STORE_NAME)
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
     if (formDataDefaultListener !== undefined && JSON.stringify(formDataDefaultListener) !== JSON.stringify(formData)) {
       setFormData(_objectSpread({}, formDataDefaultListener));
@@ -64689,7 +64992,8 @@ function FormBuilder(_ref) {
       removePrivateRefStoreValue: removePrivateRefStoreValue
     })
   });
-}
+};
+var FormBuilder = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(_FormBuilder);
 
 /***/ }),
 
@@ -64860,7 +65164,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeField":"DateTimeField-module__DateTimeField___k_mN4","widthFill":"DateTimeField-module__widthFill___OqxwA","widthHug":"DateTimeField-module__widthHug___IWSNw","flexField":"DateTimeField-module__flexField___gDZ5r","disabled":"DateTimeField-module__disabled___Gk46h"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeField":"DateTimeField-module__DateTimeField___k_mN4","widthFill":"DateTimeField-module__widthFill___OqxwA","widthHug":"DateTimeField-module__widthHug___IWSNw","flexField":"DateTimeField-module__flexField___gDZ5r","disabled":"DateTimeField-module__disabled___Gk46h","darkTheme":"DateTimeField-module__darkTheme___wmpps"});
 
 /***/ }),
 
@@ -64989,7 +65293,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
 /* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
 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); }
-var _excluded = ["value", "onChange", "dateFormat", "outFormat", "additionStyle", "datePlaceholder", "iconDate", "textDate", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
+var _excluded = ["value", "onChange", "dateFormat", "outFormat", "additionStyle", "datePlaceholder", "iconDate", "textDate", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -65039,6 +65343,8 @@ function DateField(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'absolute' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -65145,7 +65451,7 @@ function DateField(_ref) {
       onChange: setDate,
       dateFormat: dateFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     }));
   };
   var onSubmit = function onSubmit(value) {
@@ -65168,14 +65474,16 @@ function DateField(_ref) {
       width: width,
       isError: isError,
       disabled: disabled,
-      onXClose: clearDateTime()
+      onXClose: clearDateTime(),
+      theme: theme
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_5__.DateTimePicker, {
       type: 'date',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
       ref: datePickerRef,
-      style: getInitStyle()
+      style: getInitStyle(),
+      theme: theme
     })]
   });
 }
@@ -65320,7 +65628,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
 /* harmony import */ var _DateFieldBase__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./DateFieldBase */ "./src/ui/InputFields/DateTimeField/ui/DateFieldBase.tsx");
 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); }
-var _excluded = ["value", "onChange", "dateFormat", "timeFormat", "outFormat", "additionStyle", "datePlaceholder", "timePlaceholder", "iconDate", "iconTime", "textDate", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
+var _excluded = ["value", "onChange", "dateFormat", "timeFormat", "outFormat", "additionStyle", "datePlaceholder", "timePlaceholder", "iconDate", "iconTime", "textDate", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -65378,6 +65686,8 @@ function DateTimeField(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'absolute' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -65498,7 +65808,7 @@ function DateTimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     }));
   };
   var getDateContent = function getDateContent() {
@@ -65510,7 +65820,7 @@ function DateTimeField(_ref) {
       onChange: setDate,
       dateFormat: dateFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     }));
   };
   var onSubmit = function onSubmit(value) {
@@ -65534,14 +65844,16 @@ function DateTimeField(_ref) {
       width: width,
       isError: isError,
       disabled: disabled,
-      onXClose: clearDateTime()
+      onXClose: clearDateTime(),
+      theme: theme
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'datetime',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
       ref: datePickerRef,
-      style: getInitStyle()
+      style: getInitStyle(),
+      theme: theme
     })]
   });
 }
@@ -65573,7 +65885,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _lib__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../lib */ "./src/ui/InputFields/DateTimeField/lib/index.ts");
 /* harmony import */ var _TimeFieldBase__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TimeFieldBase */ "./src/ui/InputFields/DateTimeField/ui/TimeFieldBase.tsx");
 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); }
-var _excluded = ["value", "onChange", "timeFormat", "outFormat", "additionStyle", "timePlaceholder", "iconTime", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position"];
+var _excluded = ["value", "onChange", "timeFormat", "outFormat", "additionStyle", "timePlaceholder", "iconTime", "textTime", "clearButton", "isError", "disabled", "onFocus", "onBlur", "width", "position", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -65623,6 +65935,8 @@ function TimeField(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'absolute' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -65729,7 +66043,7 @@ function TimeField(_ref) {
       value: time,
       timeFormat: timeFormat,
       disabled: disabled,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_8__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     }));
   };
   var onSubmit = function onSubmit(value) {
@@ -65752,14 +66066,16 @@ function TimeField(_ref) {
       width: width,
       isError: isError,
       disabled: disabled,
-      onXClose: clearDateTime()
+      onXClose: clearDateTime(),
+      theme: theme
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'time',
       date: getDateTimeForDateTimePicker(),
       onSubmit: onSubmit,
       onCancel: close,
       style: getInitStyle(),
-      ref: datePickerRef
+      ref: datePickerRef,
+      theme: theme
     })]
   });
 }
@@ -65923,7 +66239,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeFieldMask":"DateTimeFieldMask-module__DateTimeFieldMask___uYDVO","item":"DateTimeFieldMask-module__item___LHghw","icon":"DateTimeFieldMask-module__icon___w5Oda","text":"DateTimeFieldMask-module__text___cfGtj","content":"DateTimeFieldMask-module__content___KUAL7","line":"DateTimeFieldMask-module__line___FNm37","xCloseButton":"DateTimeFieldMask-module__xCloseButton___SiUGK","isFocus":"DateTimeFieldMask-module__isFocus___rZ3KJ","isError":"DateTimeFieldMask-module__isError___c1m4S","disabled":"DateTimeFieldMask-module__disabled___xrbuV","widthFill":"DateTimeFieldMask-module__widthFill___Zp5Bb","widthHug":"DateTimeFieldMask-module__widthHug___UJyI8"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"DateTimeFieldMask":"DateTimeFieldMask-module__DateTimeFieldMask___uYDVO","item":"DateTimeFieldMask-module__item___LHghw","icon":"DateTimeFieldMask-module__icon___w5Oda","text":"DateTimeFieldMask-module__text___cfGtj","content":"DateTimeFieldMask-module__content___KUAL7","line":"DateTimeFieldMask-module__line___FNm37","xCloseButton":"DateTimeFieldMask-module__xCloseButton___SiUGK","isFocus":"DateTimeFieldMask-module__isFocus___rZ3KJ","isError":"DateTimeFieldMask-module__isError___c1m4S","disabled":"DateTimeFieldMask-module__disabled___xrbuV","widthFill":"DateTimeFieldMask-module__widthFill___Zp5Bb","widthHug":"DateTimeFieldMask-module__widthHug___UJyI8","darkTheme":"DateTimeFieldMask-module__darkTheme___uxObk"});
 
 /***/ }),
 
@@ -65995,7 +66311,9 @@ function DateTimeFieldMask(_ref) {
     additionStyle = _ref.additionStyle,
     onXClose = _ref.onXClose,
     _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'fill' : _ref$width;
+    width = _ref$width === void 0 ? 'fill' : _ref$width,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var getButtonClose = function getButtonClose() {
     if (onXClose == null) return undefined;
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {
@@ -66044,7 +66362,7 @@ function DateTimeFieldMask(_ref) {
     });
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.DateTimeFieldMask, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.isError, isError), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.isFocus, isFocus), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.disabled, disabled), additionStyle),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.DateTimeFieldMask, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.darkTheme, theme === "dark"), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.isError, isError), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.isFocus, isFocus), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMaskStyle.disabled, disabled), additionStyle),
     children: [getFirstField(), getDivider(), getSecondField()]
   });
 }
@@ -66260,7 +66578,9 @@ function DateRangeField(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     additionsStyles = _ref.additionsStyles,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'fixed' : _ref$position;
+    position = _ref$position === void 0 ? 'fixed' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -66329,7 +66649,7 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled), _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     });
   };
   var getSecond = function getSecond() {
@@ -66344,7 +66664,7 @@ function DateRangeField(_ref) {
       dateFormat: dateFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.disabled, disabled), _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_6__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     });
   };
   var onSubmit = function onSubmit(value) {
@@ -66366,14 +66686,16 @@ function DateRangeField(_ref) {
       textSecond: secondText,
       width: width,
       disabled: disabled,
-      onXClose: getClearButton()
+      onXClose: getClearButton(),
+      theme: theme
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimePicker, {
       type: 'date-range',
       date: value,
       onSubmit: onSubmit,
       onCancel: close,
       style: getInitStyle(),
-      ref: datePickerRef
+      ref: datePickerRef,
+      theme: theme
     })]
   });
 }
@@ -66396,7 +66718,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles */ "./src/ui/InputFields/DateTimeRangeField/styles/index.ts");
 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); }
-var _excluded = ["value", "onChange"];
+var _excluded = ["value", "onChange", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -66416,6 +66738,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 function DateTimeRangeField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var handleChange = function handleChange(newItem, index) {
     var newValue = value ? _toConsumableArray(value) : [];
@@ -66430,7 +66754,8 @@ function DateTimeRangeField(_ref) {
         value: value === null || value === void 0 ? void 0 : value[0],
         onChange: function onChange(data) {
           return handleChange(data, 0);
-        }
+        },
+        theme: theme
       }))
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_2__.DateTimeRangeFieldStyle.item,
@@ -66438,7 +66763,8 @@ function DateTimeRangeField(_ref) {
         value: value === null || value === void 0 ? void 0 : value[1],
         onChange: function onChange(data) {
           return handleChange(data, 1);
-        }
+        },
+        theme: theme
       }))
     })]
   });
@@ -66507,7 +66833,9 @@ function TimeRangeField(_ref) {
     clearButton = _ref$clearButton === void 0 ? true : _ref$clearButton,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'fill' : _ref$width,
-    additionsStyles = _ref.additionsStyles;
+    additionsStyles = _ref.additionsStyles,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -66565,7 +66893,7 @@ function TimeRangeField(_ref) {
       timeFormat: timeFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled), _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     });
   };
   var getSecond = function getSecond() {
@@ -66580,7 +66908,7 @@ function TimeRangeField(_ref) {
       timeFormat: timeFormat,
       disabled: disabled,
       required: required,
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled))
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.flexField, _defineProperty(_defineProperty({}, _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.disabled, disabled), _DateTimeField_styles__WEBPACK_IMPORTED_MODULE_5__.DateTimeFieldStyle.darkTheme, theme === "dark"))
     });
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.DateTimeFieldMask, {
@@ -66595,7 +66923,8 @@ function TimeRangeField(_ref) {
     disabled: disabled,
     width: width,
     onXClose: getClearButton(),
-    additionStyle: additionsStyles
+    additionStyle: additionsStyles,
+    theme: theme
   });
 }
 
@@ -66691,7 +67020,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"flexField":"FlexField-module__flexField___bQEfy","inputField":"FlexField-module__inputField___ckUI1","placeholder":"FlexField-module__placeholder___LYS5Z","icon":"FlexField-module__icon___pHmKh","textSupport":"FlexField-module__textSupport___WGMzj","help":"FlexField-module__help___ORoT_","dropdown":"FlexField-module__dropdown___BqdfG","dropdownReverse":"FlexField-module__dropdownReverse___FNjEK","button":"FlexField-module__button___TjLHK","red":"FlexField-module__red___BY7NK","gray":"FlexField-module__gray___sjpVp","pointer":"FlexField-module__pointer___dOJ4b","focus":"FlexField-module__focus___pkwN6","isError":"FlexField-module__isError___VljDQ","disabled":"FlexField-module__disabled___lN8Vv","userPick":"FlexField-module__userPick___GeaoI","smallDisplay":"FlexField-module__smallDisplay___y_Y9l","largeDisplay":"FlexField-module__largeDisplay___I3LHo"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"flexField":"FlexField-module__flexField___bQEfy","inputField":"FlexField-module__inputField___ckUI1","placeholder":"FlexField-module__placeholder___LYS5Z","icon":"FlexField-module__icon___pHmKh","textSupport":"FlexField-module__textSupport___WGMzj","help":"FlexField-module__help___ORoT_","dropdown":"FlexField-module__dropdown___BqdfG","dropdownReverse":"FlexField-module__dropdownReverse___FNjEK","button":"FlexField-module__button___TjLHK","red":"FlexField-module__red___BY7NK","gray":"FlexField-module__gray___sjpVp","pointer":"FlexField-module__pointer___dOJ4b","focus":"FlexField-module__focus___pkwN6","isError":"FlexField-module__isError___VljDQ","disabled":"FlexField-module__disabled___lN8Vv","userPick":"FlexField-module__userPick___GeaoI","smallDisplay":"FlexField-module__smallDisplay___y_Y9l","largeDisplay":"FlexField-module__largeDisplay___I3LHo","darkTheme":"FlexField-module__darkTheme___VCwjD"});
 
 /***/ }),
 
@@ -66813,7 +67142,9 @@ var FlexField = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
     _ref$buttonState = _ref.buttonState,
     buttonState = _ref$buttonState === void 0 ? 'gray' : _ref$buttonState,
     onButtonClick = _ref.onButtonClick,
-    additionStyles = _ref.additionStyles;
+    additionStyles = _ref.additionStyles,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -66935,7 +67266,7 @@ var FlexField = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     ref: ref,
     onClick: disabled ? undefined : onClick,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(_styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.flexField, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.isError, isError), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.focus, isFocus && !offFocus), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.pointer, !!onClick), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.smallDisplay, display === "small"), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.largeDisplay, display === "large"), additionStyles),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(_styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.flexField, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.darkTheme, theme === "dark"), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.isError, isError), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.focus, isFocus && !offFocus), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.pointer, !!onClick), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.smallDisplay, display === "small"), _styles__WEBPACK_IMPORTED_MODULE_6__.FlexFieldStyle.largeDisplay, display === "large"), additionStyles),
     children: [getIcon(), getTextSupport(), getUserPic(), getInput(), getHelp(), getDropdown(), getButton()]
   });
 });
@@ -67781,7 +68112,9 @@ function SelectField(_ref) {
     _onFocus = _ref.onFocus,
     isActiveItem = _ref.isActiveItem,
     _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'absolute' : _ref$position;
+    position = _ref$position === void 0 ? 'absolute' : _ref$position,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocus = _useState2[0],
@@ -68012,7 +68345,8 @@ function SelectField(_ref) {
         placeholder: placeholder,
         dropdown: true,
         dropdownState: isShow,
-        ref: inputRef
+        ref: inputRef,
+        theme: theme
       });
     }
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FlexField__WEBPACK_IMPORTED_MODULE_5__.FlexField, {
@@ -68025,7 +68359,8 @@ function SelectField(_ref) {
       onClick: switching,
       dropdown: true,
       dropdownState: isShow,
-      ref: inputRef
+      ref: inputRef,
+      theme: theme
     });
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
@@ -68037,7 +68372,8 @@ function SelectField(_ref) {
       onClick: handleClick,
       isActive: isActive,
       style: getInitStyle(),
-      ref: modalRef
+      ref: modalRef,
+      theme: theme
     })]
   });
 }
@@ -68676,7 +69012,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"MediaViewer":"MediaViewer-module__MediaViewer___DsL4T","content":"MediaViewer-module__content___e14vI","control":"MediaViewer-module__control___MB3Xg"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"MediaViewer":"MediaViewer-module__MediaViewer___DsL4T","content":"MediaViewer-module__content___e14vI","track":"MediaViewer-module__track___eU8q_","el":"MediaViewer-module__el___D3St0","control":"MediaViewer-module__control___MB3Xg"});
 
 /***/ }),
 
@@ -68900,9 +69236,15 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles */ "./src/ui/MediaViewer/styles/index.ts");
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components */ "./src/ui/MediaViewer/ui/components/index.ts");
+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); }
+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) { _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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -68915,7 +69257,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _media$curMediaIndex, _media$curMediaIndex2;
+  var _media$curElementInde, _media$curElementInde2;
   var _props$media = props.media,
     media = _props$media === void 0 ? [] : _props$media,
     mediaIndex = props.mediaIndex,
@@ -68923,18 +69265,42 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     nearestElementsOnly = _props$nearestElement === void 0 ? true : _props$nearestElement,
     onClose = props.onClose,
     style = props.style;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(mediaIndex || 0),
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    curMediaIndex = _useState2[0],
-    setCurMediaIndex = _useState2[1];
+    muted = _useState2[0],
+    setMuted = _useState2[1];
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    muted = _useState4[0],
-    setMuted = _useState4[1];
-  var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    play = _useState6[0],
-    setPlay = _useState6[1];
+    play = _useState4[0],
+    setPlay = _useState4[1];
+  var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var changeCurMedia = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (idx) {
+    var instance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (instance) {
+      showElInstance(idx);
+    } else {
+      showEl(idx);
+    }
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, function () {
+    return {
+      obj: containerRef.current,
+      changeCurMedia: changeCurMedia
+    };
+  }, [containerRef, changeCurMedia]);
+  var objRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var trackRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var _useSyncedStateRef = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useSyncedStateRef)(mediaIndex || 0),
+    _useSyncedStateRef2 = _slicedToArray(_useSyncedStateRef, 3),
+    curElementIndex = _useSyncedStateRef2[0],
+    setCurElementIndex = _useSyncedStateRef2[1],
+    getCurElementIndex = _useSyncedStateRef2[2];
+  var _useCarousel = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useCarousel)(objRef, trackRef),
+    showEl = _useCarousel.showEl,
+    showElInstance = _useCarousel.showElInstance,
+    getTrackInitStyle = _useCarousel.getTrackInitStyle,
+    getObjInitStyle = _useCarousel.getObjInitStyle,
+    getElInitStyle = _useCarousel.getElInitStyle;
   var hasPrevIndex = function hasPrevIndex(curIndex) {
     return curIndex > 0;
   };
@@ -68942,25 +69308,24 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     return curIndex < media.length - 1;
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    var isValid = mediaIndex != null && mediaIndex >= 0 && mediaIndex < media.length;
-    if (isValid) {
-      setCurMediaIndex(mediaIndex);
-    }
-  }, [mediaIndex]);
+    showElInstance(mediaIndex || 0);
+  }, []);
   var resetVideo = function resetVideo() {
     setMuted(false);
     setPlay(false);
   };
   var next = function next() {
-    setCurMediaIndex(function (prevState) {
-      return prevState < media.length - 1 ? prevState + 1 : media.length - 1;
-    });
+    var prevState = getCurElementIndex();
+    var newState = prevState < media.length - 1 ? prevState + 1 : media.length - 1;
+    setCurElementIndex(newState);
+    showEl(newState);
     resetVideo();
   };
   var prev = function prev() {
-    setCurMediaIndex(function (prevState) {
-      return prevState > 0 ? prevState - 1 : 0;
-    });
+    var prevState = getCurElementIndex();
+    var newState = prevState > 0 ? prevState - 1 : 0;
+    setCurElementIndex(newState);
+    showEl(newState);
     resetVideo();
   };
   var mute = function mute() {
@@ -68979,14 +69344,14 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     return nextEl === el || prevEl === el || el === curEl;
   };
   var getContent = function getContent(item, idx) {
-    if (item == null || nearestElementsOnly && !isNearestElement(curMediaIndex, idx)) return undefined;
+    if (item == null || nearestElementsOnly && !isNearestElement(curElementIndex, idx)) return undefined;
     switch (item.type) {
       case 'video':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.VideoViewer, {
           src: item.src,
-          muted: curMediaIndex === idx ? muted : undefined,
-          play: curMediaIndex === idx ? play : undefined,
-          onChangePlay: curMediaIndex === idx ? function (play) {
+          muted: curElementIndex === idx ? muted : undefined,
+          play: curElementIndex === idx ? play : undefined,
+          onChangePlay: curElementIndex === idx ? function (play) {
             return setPlay(play);
           } : undefined
         }, idx);
@@ -69001,24 +69366,32 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.MediaViewer,
     style: style,
-    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Carousel, {
-      activeIndex: curMediaIndex,
-      setActiveIndex: setCurMediaIndex,
-      children: media.map(function (item, idx) {
-        return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-          className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content,
-          children: getContent(item, idx)
-        }, idx);
+    ref: containerRef,
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+      className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.content,
+      style: getObjInitStyle(),
+      ref: objRef,
+      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+        className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.track,
+        style: getTrackInitStyle(),
+        ref: trackRef,
+        children: media.map(function (item, idx) {
+          return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
+            className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.el,
+            style: _objectSpread({}, getElInitStyle()),
+            children: getContent(item, idx)
+          }, idx);
+        })
       })
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control,
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.ControlBar, {
         muted: muted,
         play: play,
-        onPlay: ((_media$curMediaIndex = media[curMediaIndex]) === null || _media$curMediaIndex === void 0 ? void 0 : _media$curMediaIndex.type) === 'video' ? _play : undefined,
-        onMute: ((_media$curMediaIndex2 = media[curMediaIndex]) === null || _media$curMediaIndex2 === void 0 ? void 0 : _media$curMediaIndex2.type) === 'video' ? mute : undefined,
-        onNext: hasNextIndex(curMediaIndex) ? next : undefined,
-        onPrev: hasPrevIndex(curMediaIndex) ? prev : undefined,
+        onPlay: ((_media$curElementInde = media[curElementIndex]) === null || _media$curElementInde === void 0 ? void 0 : _media$curElementInde.type) === 'video' ? _play : undefined,
+        onMute: ((_media$curElementInde2 = media[curElementIndex]) === null || _media$curElementInde2 === void 0 ? void 0 : _media$curElementInde2.type) === 'video' ? mute : undefined,
+        onNext: hasNextIndex(curElementIndex) ? next : undefined,
+        onPrev: hasPrevIndex(curElementIndex) ? prev : undefined,
         onClose: onClose
       })
     })]
@@ -69421,7 +69794,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"button":"MicroButton-module__button___QMj95","light":"MicroButton-module__light___pwfS3","dark":"MicroButton-module__dark___YCw8u","gray":"MicroButton-module__gray___pwAy2","color":"MicroButton-module__color___RO79e","colorHover":"MicroButton-module__colorHover___Rvxx7","redHover":"MicroButton-module__redHover____WGXq","colorFill":"MicroButton-module__colorFill___yLr74","grayFill":"MicroButton-module__grayFill___Rr1s4","redFill":"MicroButton-module__redFill___ANZAX","blueLight":"MicroButton-module__blueLight___zyiu5","size14":"MicroButton-module__size14___qZD63","size16":"MicroButton-module__size16___WFrFl","size20":"MicroButton-module__size20___ZVrVg","size24":"MicroButton-module__size24___JOi7y","size28":"MicroButton-module__size28___KCc7P"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"button":"MicroButton-module__button___QMj95","light":"MicroButton-module__light___pwfS3","dark":"MicroButton-module__dark___YCw8u","gray":"MicroButton-module__gray___pwAy2","color":"MicroButton-module__color___RO79e","colorHover":"MicroButton-module__colorHover___Rvxx7","rose":"MicroButton-module__rose___zhyPL","redHover":"MicroButton-module__redHover____WGXq","colorFill":"MicroButton-module__colorFill___yLr74","grayFill":"MicroButton-module__grayFill___Rr1s4","redFill":"MicroButton-module__redFill___ANZAX","blueLight":"MicroButton-module__blueLight___zyiu5","size14":"MicroButton-module__size14___qZD63","size16":"MicroButton-module__size16___WFrFl","size20":"MicroButton-module__size20___ZVrVg","size24":"MicroButton-module__size24___JOi7y","size28":"MicroButton-module__size28___KCc7P"});
 
 /***/ }),
 
@@ -69530,6 +69903,8 @@ var MicroButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
         return _styles__WEBPACK_IMPORTED_MODULE_3__.MicroButtonStyle.grayFill;
       case 'blue-light':
         return _styles__WEBPACK_IMPORTED_MODULE_3__.MicroButtonStyle.blueLight;
+      case 'rose':
+        return _styles__WEBPACK_IMPORTED_MODULE_3__.MicroButtonStyle.rose;
     }
   };
   var getSizeClassName = function getSizeClassName() {
@@ -69786,7 +70161,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"pageSwitcher":"PageSwitcher-module__pageSwitcher___PGQPI","arrowButtons":"PageSwitcher-module__arrowButtons___Ly4oS","buttonsList":"PageSwitcher-module__buttonsList___dxvZB","plug":"PageSwitcher-module__plug___vUKSL","numberButton":"PageSwitcher-module__numberButton___TgDNV","active":"PageSwitcher-module__active___Mx_1z","smallVersion":"PageSwitcher-module__smallVersion___YJr68"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"pageSwitcher":"PageSwitcher-module__pageSwitcher___PGQPI","arrowButtons":"PageSwitcher-module__arrowButtons___Ly4oS","buttonsList":"PageSwitcher-module__buttonsList___dxvZB","plug":"PageSwitcher-module__plug___vUKSL","numberButton":"PageSwitcher-module__numberButton___TgDNV","active":"PageSwitcher-module__active___Mx_1z","smallVersion":"PageSwitcher-module__smallVersion___YJr68","dark":"PageSwitcher-module__dark___kWpZ9"});
 
 /***/ }),
 
@@ -69900,7 +70275,9 @@ function PageSwitcher(_ref) {
     prev = _ref.prev,
     onChange = _ref.onChange,
     _ref$smallVersion = _ref.smallVersion,
-    smallVersion = _ref$smallVersion === void 0 ? false : _ref$smallVersion;
+    smallVersion = _ref$smallVersion === void 0 ? false : _ref$smallVersion,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   var getNumberButton = function getNumberButton(item, idx) {
     if (typeof item === 'string') {
       return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
@@ -69917,7 +70294,7 @@ function PageSwitcher(_ref) {
     }, idx);
   };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.pageSwitcher, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.smallVersion, smallVersion)),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_1__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.pageSwitcher, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.smallVersion, smallVersion), _styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.dark, theme === "dark")),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.Button, {
       onClick: prev,
       width: 'hug',
@@ -69925,6 +70302,7 @@ function PageSwitcher(_ref) {
       hierarchy: 'link-gray',
       size: 'small',
       disabled: curPage === 1,
+      theme: theme,
       children: smallVersion ? undefined : 'Предыдущая'
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_4__.PageSwitcherStyle.buttonsList,
@@ -69938,6 +70316,7 @@ function PageSwitcher(_ref) {
       hierarchy: 'link-gray',
       size: 'small',
       disabled: curPage === numPage,
+      theme: theme,
       children: smallVersion ? undefined : 'Следующая'
     })]
   });
@@ -69979,7 +70358,9 @@ function PaginationBar(_ref) {
     _ref$loadMoreButton = _ref.loadMoreButton,
     loadMoreButton = _ref$loadMoreButton === void 0 ? true : _ref$loadMoreButton,
     _ref$smallVersion = _ref.smallVersion,
-    smallVersion = _ref$smallVersion === void 0 ? false : _ref$smallVersion;
+    smallVersion = _ref$smallVersion === void 0 ? false : _ref$smallVersion,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_2__.PaginationBarStyle.paginationBar,
     children: [loadMoreButton && canLoadMore() && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
@@ -69987,6 +70368,7 @@ function PaginationBar(_ref) {
       hierarchy: 'secondary-gray',
       size: 'large',
       width: 'fill',
+      theme: theme,
       children: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0435\u0449\u0435"
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_PageSwitcher__WEBPACK_IMPORTED_MODULE_3__.PageSwitcher, {
       numPage: numPage,
@@ -69994,7 +70376,8 @@ function PaginationBar(_ref) {
       next: nextPage,
       prev: prevPage,
       smallVersion: smallVersion,
-      curPage: getCurPage()
+      curPage: getCurPage(),
+      theme: theme
     })]
   });
 }
@@ -70658,7 +71041,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"tabButtons":"TabButtons-module__tabButtons___vSLsZ","rightIcon":"TabButtons-module__rightIcon___Vllb5","leftIcon":"TabButtons-module__leftIcon___yDOkS","text":"TabButtons-module__text___EbNMB","active":"TabButtons-module__active___ShP43","disabled":"TabButtons-module__disabled___MlvE9","widthHug":"TabButtons-module__widthHug___Choqd","heightHug":"TabButtons-module__heightHug___jeoXZ","widthFill":"TabButtons-module__widthFill___MwxIJ","heightFill":"TabButtons-module__heightFill____mxL8"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"tabButtons":"TabButtons-module__tabButtons___vSLsZ","rightIcon":"TabButtons-module__rightIcon___Vllb5","leftIcon":"TabButtons-module__leftIcon___yDOkS","text":"TabButtons-module__text___EbNMB","active":"TabButtons-module__active___ShP43","disabled":"TabButtons-module__disabled___MlvE9","widthHug":"TabButtons-module__widthHug___Choqd","heightHug":"TabButtons-module__heightHug___jeoXZ","widthFill":"TabButtons-module__widthFill___MwxIJ","heightFill":"TabButtons-module__heightFill____mxL8","dark":"TabButtons-module__dark___E1fGg"});
 
 /***/ }),
 
@@ -70721,7 +71104,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../styles */ "./src/ui/TabButtons/styles/index.ts");
 /* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
 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); }
-var _excluded = ["active", "iconLeft", "iconRight", "disabled", "text", "children", "customComponent", "height", "width", "additionStyles"];
+var _excluded = ["active", "iconLeft", "iconRight", "disabled", "text", "children", "customComponent", "height", "width", "additionStyles", "theme"];
 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) { _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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -70746,9 +71129,11 @@ function TabButtons(_ref) {
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     additionStyles = _ref.additionStyles,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme,
     props = _objectWithoutProperties(_ref, _excluded);
   var getClassName = function getClassName() {
-    return (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.tabButtons, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.active, !disabled && active), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.heightFill, height === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.heightHug, height === 'hug'), additionStyles);
+    return (0,clsx__WEBPACK_IMPORTED_MODULE_3__["default"])(_styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.tabButtons, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.active, !disabled && active), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.heightFill, height === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.heightHug, height === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_2__.TabButtonsStyle.dark, theme === 'dark'), additionStyles);
   };
   var getMainContent = function getMainContent() {
     return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
@@ -70825,7 +71210,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"tabFrame":"TabFrame-module__tabFrame___Ppzzz","widthFill":"TabFrame-module__widthFill___phhlp","widthHug":"TabFrame-module__widthHug___wokCP"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"tabFrame":"TabFrame-module__tabFrame___Ppzzz","widthFill":"TabFrame-module__widthFill___phhlp","widthHug":"TabFrame-module__widthHug___wokCP","dark":"TabFrame-module__dark___uBrHA"});
 
 /***/ }),
 
@@ -70901,11 +71286,15 @@ function TabFrame(_ref) {
     width = _ref$width === void 0 ? 'fill' : _ref$width,
     _ref$tabs = _ref.tabs,
     tabs = _ref$tabs === void 0 ? [] : _ref$tabs,
-    additionStyles = _ref.additionStyles;
+    additionStyles = _ref.additionStyles,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "light" : _ref$theme;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.tabFrame, _defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.widthFill, width === 'fill'), additionStyles),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.tabFrame, _defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_3__.TabFrameStyle.dark, theme === 'dark'), additionStyles),
     children: tabs.map(function (item, idx) {
-      return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.TabButtons, _objectSpread({}, item), idx);
+      return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.TabButtons, _objectSpread(_objectSpread({}, item), {}, {
+        theme: theme
+      }), idx);
     })
   });
 }
@@ -71321,7 +71710,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggle":"Toggle-module__toggle___v6vwY","textBlock":"Toggle-module__textBlock___KUwlm","text":"Toggle-module__text___i2f7B","description":"Toggle-module__description___hvDOL","active":"Toggle-module__active___Skxl4","disabled":"Toggle-module__disabled___ME0Wv","hover":"Toggle-module__hover___Ws4WL","widthFill":"Toggle-module__widthFill___JEbCX","heightFill":"Toggle-module__heightFill___yalwe","widthHug":"Toggle-module__widthHug___EL72F","heightHug":"Toggle-module__heightHug___fFSTL"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggle":"Toggle-module__toggle___v6vwY","textBlock":"Toggle-module__textBlock___KUwlm","text":"Toggle-module__text___i2f7B","description":"Toggle-module__description___hvDOL","active":"Toggle-module__active___Skxl4","disabled":"Toggle-module__disabled___ME0Wv","hover":"Toggle-module__hover___Ws4WL","widthFill":"Toggle-module__widthFill___JEbCX","heightFill":"Toggle-module__heightFill___yalwe","widthHug":"Toggle-module__widthHug___EL72F","heightHug":"Toggle-module__heightHug___fFSTL","dark":"Toggle-module__dark___ogO9H"});
 
 /***/ }),
 
@@ -71415,7 +71804,9 @@ function Toggle(props) {
     beforeElement = props.beforeElement,
     afterElement = props.afterElement,
     textBeforeElement = props.textBeforeElement,
-    textAfterElement = props.textAfterElement;
+    textAfterElement = props.textAfterElement,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHover = _useState2[0],
@@ -71437,13 +71828,14 @@ function Toggle(props) {
     },
     onClick: onClick,
     disabled: disabled,
-    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.toggle, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.heightFill, height === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.heightHug, height === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.hover, isHover), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.active, active), additionStyle),
+    className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.toggle, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.widthFill, width === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.widthHug, width === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.heightFill, height === 'fill'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.heightHug, height === 'hug'), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.hover, isHover), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.active, active), _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.dark, theme === "dark"), additionStyle),
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.ToggleBase, {
       active: active,
       hover: isHover,
       size: 'medium',
       isButton: false,
-      disabled: disabled
+      disabled: disabled,
+      theme: theme
     }), text && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_4__.ToggleStyle.textBlock,
       children: [cloneElement(beforeElement), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("span", {
@@ -71507,7 +71899,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggleBase":"ToggleBase-module__toggleBase___Vkhhf","button":"ToggleBase-module__button___LaSpg","spacer":"ToggleBase-module__spacer___Ib4qu","active":"ToggleBase-module__active___q_Db4","error":"ToggleBase-module__error___IfdU2","medium":"ToggleBase-module__medium___iUKiN","large":"ToggleBase-module__large___YMT8p","disabled":"ToggleBase-module__disabled___Znl75","hover":"ToggleBase-module__hover___KiQjy"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"toggleBase":"ToggleBase-module__toggleBase___Vkhhf","button":"ToggleBase-module__button___LaSpg","spacer":"ToggleBase-module__spacer___Ib4qu","active":"ToggleBase-module__active___q_Db4","error":"ToggleBase-module__error___IfdU2","medium":"ToggleBase-module__medium___iUKiN","large":"ToggleBase-module__large___YMT8p","disabled":"ToggleBase-module__disabled___Znl75","hover":"ToggleBase-module__hover___KiQjy","dark":"ToggleBase-module__dark___dcBYN"});
 
 /***/ }),
 
@@ -71577,22 +71969,24 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 
 
-function ToggleBase(_ref) {
-  var _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    onClick = _ref.onClick,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$hover = _ref.hover,
-    hover = _ref$hover === void 0 ? false : _ref$hover,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$isButton = _ref.isButton,
-    isButton = _ref$isButton === void 0 ? true : _ref$isButton;
+function ToggleBase(props) {
+  var _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    onClick = props.onClick,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$hover = props.hover,
+    hover = _props$hover === void 0 ? false : _props$hover,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$isButton = props.isButton,
+    isButton = _props$isButton === void 0 ? true : _props$isButton,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? "light" : _props$theme;
   var getClassName = function getClassName() {
-    return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.toggleBase, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.active, active), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.error, error), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.hover, hover), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.large, size === 'large'), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.medium, size === 'medium'));
+    return (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.toggleBase, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.active, active), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.error, error), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.hover, hover), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.disabled, disabled), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.large, size === 'large'), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.medium, size === 'medium'), _styles__WEBPACK_IMPORTED_MODULE_3__.ToggleBaseStyle.dark, theme === 'dark'));
   };
   var componentWrapper = isButton ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", {});
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().cloneElement(componentWrapper, {
@@ -72723,6 +73117,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   uniqueByKey: () => (/* reexport safe */ _lib__WEBPACK_IMPORTED_MODULE_4__.uniqueByKey),
 /* harmony export */   useBackdropModal: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackdropModal),
 /* harmony export */   useBackgroundModalAnim: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useBackgroundModalAnim),
+/* harmony export */   useCarousel: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useCarousel),
 /* harmony export */   useCollapsible: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useCollapsible),
 /* harmony export */   useControlInput: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useControlInput),
 /* harmony export */   useDebouncedAccumulator: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_2__.useDebouncedAccumulator),