@vchasno/ui-kit 0.3.11 → 0.3.13

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.12] - 2024-08-07
+
+## Added
+
+-   Datepicker - restyle new UI
+-   Pagination - add --vchasno-ui-pagination-hover-bg-color css variable
+
 ## [0.3.11] - 2024-08-04
 
 ## Added

package/dist/Datepicker/index.cjs.js

@@ -7506,6 +7506,7 @@ function onClickOutsideHOC(WrappedComponent, config) {
 
         handlersMap[_this._uid] = function (event) {
           if (_this.componentNode === null) return;
+          if (_this.initTimeStamp > event.timeStamp) return;
 
           if (_this.props.preventDefault) {
             event.preventDefault();
@@ -7553,6 +7554,7 @@ function onClickOutsideHOC(WrappedComponent, config) {
       };
 
       _this._uid = uid();
+      _this.initTimeStamp = performance.now();
       return _this;
     }
     /**
@@ -7693,9 +7695,18 @@ function isOverflowElement(element) {
 function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
-function isContainingBlock(element) {
+function isTopLayer$1(element) {
+  return [':popover-open', ':modal'].some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (e) {
+      return false;
+    }
+  });
+}
+function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = getComputedStyle(element);
+  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
@@ -7705,9 +7716,10 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
+    } else if (isTopLayer$1(currentNode)) {
+      return null;
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -7729,8 +7741,8 @@ function getNodeScroll(element) {
     };
   }
   return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
   };
 }
 function getParentNode(node) {
@@ -7770,10 +7782,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
   const win = getWindow(scrollableAncestor);
   if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
   }
   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
 
 /**
  * Custom positioning reference element.
@@ -7891,12 +7907,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -8116,7 +8141,7 @@ async function detectOverflow(state, options) {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow$2 = options => ({
+const arrow$3 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -8199,7 +8224,7 @@ const arrow$2 = options => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$1 = function (options) {
+const flip$2 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -8359,7 +8384,7 @@ async function convertValueToCoords(state, options) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (options) {
+const offset$1 = function (options) {
   if (options === void 0) {
     options = 0;
   }
@@ -8991,14 +9016,14 @@ function autoUpdate(reference, floating, update, options) {
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = flip$1;
+const flip$1 = flip$2;
 
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow$1 = arrow$2;
+const arrow$2 = arrow$3;
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
@@ -9023,44 +9048,6 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = options => {
-  function isRef(value) {
-    return {}.hasOwnProperty.call(value, 'current');
-  }
-  return {
-    name: 'arrow',
-    options,
-    fn(state) {
-      const {
-        element,
-        padding
-      } = typeof options === 'function' ? options(state) : options;
-      if (element && isRef(element)) {
-        if (element.current != null) {
-          return arrow$1({
-            element: element.current,
-            padding
-          }).fn(state);
-        }
-        return {};
-      }
-      if (element) {
-        return arrow$1({
-          element,
-          padding
-        }).fn(state);
-      }
-      return {};
-    }
-  };
-};
-
 var index$1 = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
@@ -9285,6 +9272,78 @@ function useFloating$1(options) {
   }), [data, update, refs, elements, floatingStyles]);
 }
 
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow$1 = options => {
+  function isRef(value) {
+    return {}.hasOwnProperty.call(value, 'current');
+  }
+  return {
+    name: 'arrow',
+    options,
+    fn(state) {
+      const {
+        element,
+        padding
+      } = typeof options === 'function' ? options(state) : options;
+      if (element && isRef(element)) {
+        if (element.current != null) {
+          return arrow$2({
+            element: element.current,
+            padding
+          }).fn(state);
+        }
+        return {};
+      }
+      if (element) {
+        return arrow$2({
+          element,
+          padding
+        }).fn(state);
+      }
+      return {};
+    }
+  };
+};
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = (options, deps) => ({
+  ...offset$1(options),
+  options: [options, deps]
+});
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = (options, deps) => ({
+  ...flip$1(options),
+  options: [options, deps]
+});
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = (options, deps) => ({
+  ...arrow$1(options),
+  options: [options, deps]
+});
+
 // https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
 const SafeReact = {
   ...React__namespace
@@ -9417,6 +9476,16 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
     }
   }
   const clipPathId = useId();
+  const [isRTL, setIsRTL] = React__namespace.useState(false);
+
+  // https://github.com/floating-ui/floating-ui/issues/2932
+  index(() => {
+    if (!floating) return;
+    const isRTL = getComputedStyle(floating).direction === 'rtl';
+    if (isRTL) {
+      setIsRTL(true);
+    }
+  }, [floating]);
   if (!floating) {
     return null;
   }
@@ -9428,7 +9497,6 @@ const FloatingArrow = /*#__PURE__*/React__namespace.forwardRef(function Floating
   const svgX = width / 2 * (tipRadius / -8 + 1);
   const svgY = height / 2 * tipRadius / 4;
   const [side, alignment] = placement.split('-');
-  const isRTL = platform.isRTL(floating);
   const isCustomShape = !!d;
   const isVerticalSide = side === 'top' || side === 'bottom';
   const yOffsetProp = staticOffset && alignment === 'end' ? 'bottom' : 'top';
@@ -9515,29 +9583,79 @@ const useFloatingParentNodeId = () => {
  */
 const useFloatingTree = () => React__namespace.useContext(FloatingTreeContext);
 
+function useFloatingRootContext(options) {
+  const {
+    open = false,
+    onOpenChange: onOpenChangeProp,
+    elements: elementsProp
+  } = options;
+  const floatingId = useId();
+  const dataRef = React__namespace.useRef({});
+  const [events] = React__namespace.useState(() => createPubSub());
+  const nested = useFloatingParentNodeId() != null;
+  if (process.env.NODE_ENV !== "production") {
+    const optionDomReference = elementsProp.reference;
+    if (optionDomReference && !isElement(optionDomReference)) {
+      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
+    }
+  }
+  const [positionReference, setPositionReference] = React__namespace.useState(elementsProp.reference);
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    dataRef.current.openEvent = open ? event : undefined;
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
+  });
+  const refs = React__namespace.useMemo(() => ({
+    setPositionReference
+  }), []);
+  const elements = React__namespace.useMemo(() => ({
+    reference: positionReference || elementsProp.reference || null,
+    floating: elementsProp.floating || null,
+    domReference: elementsProp.reference
+  }), [positionReference, elementsProp.reference, elementsProp.floating]);
+  return React__namespace.useMemo(() => ({
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  }), [open, onOpenChange, elements, events, floatingId, refs]);
+}
+
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/useFloating
  */
 function useFloating(options) {
-  var _options$elements;
   if (options === void 0) {
     options = {};
   }
   const {
-    open = false,
-    onOpenChange: unstable_onOpenChange,
     nodeId
   } = options;
+  const internalRootContext = useFloatingRootContext({
+    ...options,
+    elements: {
+      reference: null,
+      floating: null,
+      ...options.elements
+    }
+  });
+  const rootContext = options.rootContext || internalRootContext;
+  const computedElements = rootContext.elements;
   const [_domReference, setDomReference] = React__namespace.useState(null);
   const [positionReference, _setPositionReference] = React__namespace.useState(null);
-  const optionDomReference = (_options$elements = options.elements) == null ? void 0 : _options$elements.reference;
+  const optionDomReference = computedElements == null ? void 0 : computedElements.reference;
   const domReference = optionDomReference || _domReference;
-  if (process.env.NODE_ENV !== "production") {
-    if (optionDomReference && !isElement(optionDomReference)) {
-      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
-    }
-  }
+  const domReferenceRef = React__namespace.useRef(null);
+  const tree = useFloatingTree();
   index(() => {
     if (domReference) {
       domReferenceRef.current = domReference;
@@ -9546,28 +9664,12 @@ function useFloating(options) {
   const position = useFloating$1({
     ...options,
     elements: {
-      ...options.elements,
+      ...computedElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
-  const tree = useFloatingTree();
-  const nested = useFloatingParentNodeId() != null;
-  const onOpenChange = useEffectEvent((open, event, reason) => {
-    dataRef.current.openEvent = open ? event : undefined;
-    events.emit('openchange', {
-      open,
-      event,
-      reason,
-      nested
-    });
-    unstable_onOpenChange == null || unstable_onOpenChange(open, event, reason);
-  });
-  const domReferenceRef = React__namespace.useRef(null);
-  const dataRef = React__namespace.useRef({});
-  const events = React__namespace.useState(() => createPubSub())[0];
-  const floatingId = useId();
   const setPositionReference = React__namespace.useCallback(node => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -9606,16 +9708,13 @@ function useFloating(options) {
   }), [position.elements, domReference]);
   const context = React__namespace.useMemo(() => ({
     ...position,
+    ...rootContext,
     refs,
     elements,
-    dataRef,
-    nodeId,
-    floatingId,
-    events,
-    open,
-    onOpenChange
-  }), [position, nodeId, floatingId, events, open, onOpenChange, refs, elements]);
+    nodeId
+  }), [position, refs, elements, nodeId, rootContext]);
   index(() => {
+    rootContext.dataRef.current.floatingContext = context;
     const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
     if (node) {
       node.context = context;
@@ -15564,7 +15663,7 @@ var Spinner = function (_a) {
             React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
-var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 3px;\n    background-color: #fff;\n    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 3px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 3px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 3px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 3px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 3px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 3px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 3px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 3px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 40px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
+var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
 styleInject(css_248z);
 
 var SvgCalendar = function () { return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -15582,16 +15681,20 @@ var defaultMask = [
     /\d/,
     /\d/,
 ];
-/** Компонент вводу дати/часу */
+/**
+ * @see <https://reactdatepicker.com/>
+ */
 var DatePicker = function (_a) {
     var label = _a.label, disabled = _a.disabled, required = _a.required, loading = _a.loading, hint = _a.hint, error = _a.error, _b = _a.dateFormat, dateFormat = _b === void 0 ? DATE_FORMATS : _b, className = _a.className, _c = _a.timeCaption, timeCaption = _c === void 0 ? 'Час' : _c, _d = _a.enableTabLoop, enableTabLoop = _d === void 0 ? false : _d, _e = _a.locale, locale = _e === void 0 ? uk : _e, _f = _a.showMask, showMask = _f === void 0 ? false : _f, _g = _a.mask, mask = _g === void 0 ? defaultMask : _g, rest = __rest(_a, ["label", "disabled", "required", "loading", "hint", "error", "dateFormat", "className", "timeCaption", "enableTabLoop", "locale", "showMask", "mask"]);
+    var valueExists = !!rest.selected || !!rest.value;
     return (React.createElement("label", { className: cn('vchasno-ui-date-picker', {
             '--loading': loading,
             '--required': required,
             '--disabled': disabled,
+            '--not-empty': valueExists,
         }, className) },
-        React.createElement(LabelText, null, label),
         React.createElement("span", { className: "vchasno-ui-date-picker__wrapper" },
+            label && React.createElement(LabelText, null, label),
             React.createElement(DatePicker$1, __assign({ enableTabLoop: enableTabLoop, locale: locale, timeCaption: timeCaption, disabled: disabled, placeholderText: " ", className: "vchasno-ui-date-picker__picker", dateFormat: dateFormat, customInput: showMask ? React.createElement(MaskedInput, { inputMode: "text", mask: mask, showMask: true }) : undefined }, rest)),
             loading ? React.createElement(Spinner, { height: "18px" }) : React.createElement(SvgCalendar, null)),
         React.createElement(InputMeta, { hint: hint, error: error })));