@dreamcommerce/aurora 2.5.0 → 2.5.2

package/build/esm/packages/aurora/src/components/dropdown/components/content.js

@@ -1,20 +1,22 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { createPortal } from 'react-dom';
-import cssClasses$1 from '../../../css/icons/main.module.less.js';
+import cssClasses$3 from '../../../css/icons/main.module.less.js';
+import classnames from 'classnames';
 import { useDropdownContext } from '../context/index.js';
 import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
 import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import withTranslation from '../../../utilities/translation/with_translation.js';
-import { classNames } from '../../../utilities/styles/classNames.js';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
-import { cssDropdownContent, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
+import { cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
-import { getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
+import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
 import { useClickOutside } from '../../../hooks/use_click_outside.js';
 import IconArrow from '../../../assets/icon_arrow.js';
 import { UiDomUtils } from '@dreamcommerce/utilities';
+import cssClasses$1 from '../../../css/hint/main.module.less.js';
+import cssClasses$2 from '../../../css/tooltip/main.module.less.js';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -22,27 +24,36 @@ import { UiDomUtils } from '@dreamcommerce/utilities';
  * @example
  * <Dropdown.Content> ... </Dropdown.Content>
  */
-const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', portalContainer }) => {
+const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', cssClass, portalContainer }) => {
     const [t] = useTranslation();
     const contentRef = useRef(null);
-    const { wrapperRef, toggleDropdown, isOpen, closeDropdown } = useDropdownContext();
+    const { wrapperRef, toggleDropdown, isOpen } = useDropdownContext();
     const [styles, setStyles] = useState({
-        left: '0px',
         top: '0px',
         bottom: '0px',
+        left: '0px',
         zIndex: DROPDOWN_Z_INDEX
     });
-    const windowHeightMinusYOffset = window.innerHeight - window.pageYOffset;
-    const checkIfIsOutsideBottomViewport = (elem) => {
-        const bounding = elem.getBoundingClientRect();
-        return bounding.bottom > windowHeightMinusYOffset;
+    const windowYScroll = window.scrollY;
+    const windowHeightMinusYOffset = window.innerHeight - windowYScroll;
+    const checkIfIsOutsideTopViewport = () => {
+        if (!contentRef.current)
+            return;
+        const bounding = getBounding(contentRef.current);
+        return bounding.top <= 0;
+    };
+    const checkIfIsOutsideBottomViewport = () => {
+        if (!contentRef.current)
+            return;
+        const element = contentRef.current;
+        const elementHeight = getBounding(element).height;
+        return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
     };
-    const dropdownIsOutsideBottomViewport = contentRef.current && checkIfIsOutsideBottomViewport(contentRef.current);
-    const contentClassName = classNames([
-        cssDropdownContent,
-        arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
-        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom
-    ], cssClasses);
+    const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
+    const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
+    const contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport);
+    const contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || (verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
+    const contentClassName = classnames(cssClasses[cssDropdownContent], contentShouldAppearOnTop && `${cssClasses$1[cssDropdownContentOnTop]} ${cssClasses$2[cssDropdownContentOnTop]}`, contentShouldAppearOnBottom && `${cssClasses$1[cssDropdownContentOnBottom]} ${cssClasses$2[cssDropdownContentOnBottom]}`, arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom], cssClass);
     const screenWidthName = useScreenDetect();
     const refs = [contentRef];
     if (wrapperRef) {
@@ -54,30 +65,63 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         }
     });
     useEffect(() => {
-        if (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) {
-            const { x, y, height } = wrapperRef.current.getBoundingClientRect();
-            const yOffset = 10;
+        if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
+            const { x: wrapperXPosition, y: wrapperYPosition, width: wrapperWidth, height: wrapperHeight } = getBounding(wrapperRef.current);
+            const { width: contentWidth } = getBounding(contentRef.current);
             const { xModifier, yModifier } = getXYModifiersForNestedDropdowns(portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current);
-            const positionTop = height + y + yOffset - yModifier;
-            const positionBottom = windowHeightMinusYOffset - y + yOffset;
-            const positionLeft = x - xModifier;
+            const yOffset = 10;
             const isInModal = isChildOfModal(wrapperRef);
             const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
-            const topPositionValue = !dropdownIsOutsideBottomViewport ? `${positionTop}px` : 'auto';
-            const bottomPositionValue = dropdownIsOutsideBottomViewport ? `${positionBottom}px` : 'auto';
+            const positionTop = wrapperHeight + wrapperYPosition + windowYScroll + yOffset - yModifier;
+            const positionBottom = windowHeightMinusYOffset - wrapperYPosition + yOffset;
+            const positionLeft = wrapperXPosition - xModifier;
+            let topPositionValue = '';
+            let bottomPositionValue = '';
+            let leftPositionValue = '';
+            const leftPositionStickedToRightBorderValue = wrapperXPosition + wrapperWidth - contentWidth;
+            const setTopPosition = () => {
+                topPositionValue = 'auto';
+                bottomPositionValue = `${positionBottom}px`;
+            };
+            const setBottomPosition = () => {
+                topPositionValue = `${positionTop}px`;
+                bottomPositionValue = 'auto';
+            };
+            horizontalPosition === 'left'
+                ? (leftPositionValue = `${positionLeft}px`)
+                : (leftPositionValue = `${leftPositionStickedToRightBorderValue}px`);
+            if (verticalPosition === 'top') {
+                setTopPosition();
+                if (dropdownIsOutsideTopViewport)
+                    setBottomPosition();
+            }
+            if (verticalPosition === 'bottom') {
+                setBottomPosition();
+                if (dropdownIsOutsideBottomViewport)
+                    setTopPosition();
+            }
             screenWidthName === SCREEN_XS
-                ? setStyles({ left: `0px`, top: `0px`, bottom: 'auto', zIndex })
-                : setStyles({ left: `${positionLeft}px`, top: topPositionValue, bottom: bottomPositionValue, zIndex });
+                ? setStyles({ top: `0px`, bottom: 'auto', left: `0px`, zIndex })
+                : setStyles({ top: topPositionValue, bottom: bottomPositionValue, left: leftPositionValue, zIndex });
         }
-    }, [portalContainer, screenWidthName, wrapperRef, isOpen, dropdownIsOutsideBottomViewport]);
+    }, [
+        portalContainer,
+        screenWidthName,
+        wrapperRef,
+        isOpen,
+        dropdownIsOutsideTopViewport,
+        dropdownIsOutsideBottomViewport,
+        windowYScroll,
+        windowHeightMinusYOffset
+    ]);
     useEffect(() => {
         var _a;
         if (!(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) || !isOpen)
             return;
         const scrollableParent = (_a = UiDomUtils.getFirstScrollableParent(wrapperRef.current)) !== null && _a !== void 0 ? _a : document.body;
         const handleWindowScroll = () => {
-            if (typeof closeDropdown === 'function') {
-                closeDropdown();
+            if (typeof toggleDropdown === 'function') {
+                toggleDropdown();
             }
         };
         scrollableParent.addEventListener('scroll', handleWindowScroll, { once: true });
@@ -86,12 +130,12 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
             enter: cssClasses['dropdown-enter'],
             enterActive: cssClasses['dropdown-enter-active'],
             exit: cssClasses['dropdown-exit'],
-            exitActive: cssClasses['dropdown-exit-active']
+            exitActive: verticalPosition === 'top' ? cssClasses['dropdown-exit-active'] : cssClasses['dropdown-exit-active-reversed']
         } },
         React.createElement("div", { ref: contentRef, style: styles, className: contentClassName },
             React.createElement("div", { className: cssClasses[cssDropdownHeader] },
                 React.createElement("div", { onClick: () => typeof toggleDropdown === 'function' && toggleDropdown() }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : (React.createElement("div", { className: cssClasses[cssDropdownHeaderContent] },
-                    headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$1['icon_rotate-180'] }),
+                    headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$3['icon_rotate-180'] }),
                     React.createElement("span", { className: cssClasses[cssDropdownHeaderTitle] }, headerGoBackText !== null && headerGoBackText !== void 0 ? headerGoBackText : t('Go back')))))),
             children))) : null), (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current) || document.body);
 };

package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/components/option_multiple.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import classnames from 'classnames';
-import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
 import { cssDropdownListItem, cssDropdownListItemSelected, cssDropdownListItemDisabled, cssDropdownListItemReadonly } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import Item from './item.js';
+import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
 
 /**
  * Dropdown.OptionMultiple component. Should be only used within Dropdown.List

package/build/esm/packages/aurora/src/components/dropdown/components/select.js

@@ -2,10 +2,10 @@ import React, { useRef } from 'react';
 import { useDropdownContext } from '../context/index.js';
 import { cssControlInputRemoveButton } from '../../controls/css_classes.js';
 import inputCssClasses from '../../../css/input/main.module.less.js';
-import InputWrapper from '../../controls/components/input_wrapper.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
 import IconClose from '../../../assets/icon_close.js';
+import InputWrapper from '../../controls/components/input_wrapper.js';
 
 /**
  * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.

package/build/esm/packages/aurora/src/components/dropdown/css_classes.d.ts

@@ -1,5 +1,7 @@
 export declare const cssDropdown = "dropdown";
 export declare const cssDropdownContent: string;
+export declare const cssDropdownContentOnTop: string;
+export declare const cssDropdownContentOnBottom: string;
 export declare const cssDropdownArrowHorizontalDirectionRight: string;
 export declare const cssDropdownArrowVerticalDirectionBottom: string;
 export declare const cssDropdownHeader: string;

package/build/esm/packages/aurora/src/components/dropdown/css_classes.js

@@ -1,7 +1,9 @@
 const cssDropdown = 'dropdown';
 const cssDropdownContent = `${cssDropdown}__content`;
-const cssDropdownArrowHorizontalDirectionRight = `${cssDropdownContent}_right`;
-const cssDropdownArrowVerticalDirectionBottom = `${cssDropdownContent}_bottom`;
+const cssDropdownContentOnTop = `${cssDropdownContent}_top`;
+const cssDropdownContentOnBottom = `${cssDropdownContent}_bottom`;
+const cssDropdownArrowHorizontalDirectionRight = `${cssDropdownContent}_arrow-right`;
+const cssDropdownArrowVerticalDirectionBottom = `${cssDropdownContent}_arrow-bottom`;
 const cssDropdownHeader = `${cssDropdown}__header`;
 const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;
 const cssDropdownHeaderContent = `${cssDropdown}__header-content`;
@@ -16,5 +18,5 @@ const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;
 const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;
 const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;
 
-export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
+export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownContentOnBottom, cssDropdownContentOnTop, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/dropdown/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/types.d.ts

@@ -44,6 +44,9 @@ export interface IDropdownContentProps {
     headerGoBackIcon?: JSX.Element;
     portalContainer?: RefObject<HTMLElement>;
     arrowSide?: 'left' | 'right';
+    horizontalPosition?: 'left' | 'right';
+    verticalPosition?: 'top' | 'bottom';
+    cssClass?: string;
 }
 export interface IDropdownItemWithHover {
     children?: ReactNode;

package/build/esm/packages/aurora/src/components/dropdown/utilities.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
 import { ISelectOption } from './types';
+import { RefObject } from 'react';
 /**
  * checks if the given option is selected within array of selectedValues array
  * @param {ISelectOption} option select/multiselect option
@@ -30,3 +30,4 @@ export declare const getXYModifiersForNestedDropdowns: (portalContainer: HTMLEle
     yModifier: number;
 };
 export declare const isChildOfModal: (ref: RefObject<HTMLElement>) => boolean;
+export declare const getBounding: (element: HTMLElement) => DOMRect;

package/build/esm/packages/aurora/src/components/dropdown/utilities.js

@@ -1,8 +1,8 @@
 import 'react';
 import cssClasses$1 from '../../css/modal/main.module.less.js';
 import { cssDropdownContent } from './css_classes.js';
-import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
 import cssClasses from '../../css/dropdown/main.module.less.js';
+import { fuzzySearch } from '../../utilities/fuzzy_search/fuzzy_search.js';
 
 /**
  * checks if the given option is selected within array of selectedValues array
@@ -65,7 +65,10 @@ const isChildOfModal = (ref) => {
         currentParent = currentParent === null || currentParent === void 0 ? void 0 : currentParent.parentElement;
     }
     return false;
+};
+const getBounding = (element) => {
+    return element.getBoundingClientRect();
 };
 
-export { getXYModifiersForNestedDropdowns, handleItemClick, handleSearchKeyUp, isChildOfModal, isSelected };
+export { getBounding, getXYModifiersForNestedDropdowns, handleItemClick, handleSearchKeyUp, isChildOfModal, isSelected };
 //# sourceMappingURL=utilities.js.map

package/build/esm/packages/aurora/src/components/dropdown/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/hint/index.d.ts

@@ -1,8 +1,9 @@
 import React, { ReactElement } from 'react';
-export interface IHint {
+import { IDropdownProps } from "../dropdown/types";
+export interface IHint extends IDropdownProps {
     hint: string | ReactElement;
     vPosition?: 'top' | 'bottom';
-    hPosition?: 'left' | 'right' | 'center';
+    hPosition?: 'left' | 'right';
     spacingLeft?: boolean;
     spacingRight?: boolean;
     iconClass?: string;
@@ -10,7 +11,6 @@ export interface IHint {
     Icon?: React.FC<{
         className?: string;
     }>;
-    fixed?: boolean;
 }
 declare const Hint: React.FC<IHint>;
 export default Hint;

package/build/esm/packages/aurora/src/components/hint/index.js

@@ -1,25 +1,29 @@
 import React, { useRef } from 'react';
+import { DropdownContext } from '../dropdown/context/index.js';
 import { classNames } from '../../utilities/styles/classNames.js';
-import styles from '../../css/hint/main.module.less.js';
+import cssClasses from '../../css/hint/main.module.less.js';
+import { useToggle } from '../dropdown/hooks/use_toggle.js';
+import Dropdown from '../dropdown/index.js';
 import IconHint from '../../assets/icon_hint.js';
-import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
 
-const Hint = ({ hint, fixed, vPosition = 'top', yellow, hPosition = 'right', iconClass, Icon, spacingLeft, spacingRight }) => {
-    const containerClassName = classNames([
-        'hint',
-        spacingLeft && 'hint_spacing-left',
-        spacingRight && 'hint_spacing-right',
-        hPosition === 'right' && 'hint_right',
-        hPosition === 'center' && 'hint_horizontal-center',
-        vPosition === 'top' && 'hint_top'
-    ], styles);
-    const hintContentRef = useRef(null);
-    const { onMouseEnter, style } = useFixedChildPosition({ useFixed: fixed, vPosition, hPosition, childRef: hintContentRef });
-    const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], styles);
+const Hint = ({ hint, vPosition = 'top', yellow, hPosition = 'right', spacingLeft, spacingRight, iconClass, Icon, onToggle }) => {
+    const wrapperRef = useRef(null);
+    const [isOpen, toggleDropdown] = useToggle(false, onToggle);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const containerClassName = classNames(['hint', spacingLeft && 'hint_spacing-left', spacingRight && 'hint_spacing-right'], cssClasses);
+    const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], cssClasses);
     const IconComponent = Icon || IconHint;
-    return (React.createElement("div", { className: containerClassName, onMouseEnter: onMouseEnter },
-        React.createElement(IconComponent, { className: iconClass }),
-        React.createElement("div", { ref: hintContentRef, className: contentClassName, style: style }, hint)));
+    const handleOnMouseEnter = () => {
+        toggleDropdown();
+    };
+    const handleOnMouseLeave = () => {
+        toggleDropdown();
+    };
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("span", { className: containerClassName, ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
+            React.createElement(IconComponent, { className: iconClass }),
+            React.createElement(Dropdown.Content, { cssClass: contentClassName, headerComponent: "", arrowSide: hPosition === 'left' ? 'right' : 'left', horizontalPosition: hPosition === 'right' ? 'left' : 'right', verticalPosition: vPosition === 'top' ? 'top' : 'bottom' },
+                React.createElement("span", null, hint)))));
 };
 
 export default Hint;

package/build/esm/packages/aurora/src/components/hint/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js

@@ -19,7 +19,7 @@ const useStyles = createUseStyles({
         transform: getTransformFromAnimationDirection
     }
 });
-const AbsoluteModal = ({ vPosition, hPosition, offset = 0, transform, transformLength = DEFAULT_TRANSLATE_MOVE, children, animationDirection, isVisible, withBackground, ...rest }) => {
+const AbsoluteModal = ({ vPosition, hPosition, offset = 0, transform, transformLength = DEFAULT_TRANSLATE_MOVE, children, animationDirection, isVisible, style = {}, withBackground, ...rest }) => {
     const modalRef = useRef(null);
     const [updater, setUpdater] = useState(0);
     const [position, setPosition] = useState({});
@@ -56,7 +56,7 @@ const AbsoluteModal = ({ vPosition, hPosition, offset = 0, transform, transformL
         return () => observer.disconnect();
     }, []);
     return createPortal(React.createElement(React.Fragment, null,
-        React.createElement(Modal, { className: `${classes.modal} ${isVisible ? cssClasses['modal-window_visible'] : ''}`, modalRef: modalRef, ...rest }, children),
+        React.createElement(Modal, { style: style, className: `${classes.modal} ${isVisible ? cssClasses['modal-window_visible'] : ''}`, modalRef: modalRef, ...rest }, children),
         isVisible && withBackground && React.createElement("div", { className: cssClasses['modal-window-mask'] })), document.body);
 };
 

package/build/esm/packages/aurora/src/components/modal/index.js

@@ -4,8 +4,8 @@ import Content from './components/content.js';
 import Header from './components/header.js';
 import Footer from './components/footer.js';
 
-const Modal = ({ children, className, modalRef }) => {
-    return (React.createElement("div", { ref: modalRef, className: `${cssClasses['modal-window']} ${className}` },
+const Modal = ({ children, className, modalRef, style = {} }) => {
+    return (React.createElement("div", { style: style, ref: modalRef, className: `${cssClasses['modal-window']} ${className}` },
         React.createElement("div", { className: cssClasses['modal-window__body'] }, children)));
 };
 Modal.Header = Header;

package/build/esm/packages/aurora/src/components/modal/types.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react';
+import { CSSProperties, FC, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react';
 export interface IHeaderProps {
     title?: string;
     actions?: ReactElement | ReactNodeArray | ReactNode;
@@ -13,6 +13,7 @@ export interface IModalProps {
     className?: string;
     withBackground?: boolean;
     modalRef?: RefObject<HTMLDivElement>;
+    style?: CSSProperties;
 }
 export interface IModalComposition {
     Header: FC<IHeaderProps>;

package/build/esm/packages/aurora/src/components/modal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAuE,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAsF,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/tooltip/css_classes.d.ts

@@ -0,0 +1,2 @@
+export declare const cssTooltip = "tooltip";
+export declare const cssTooltipContainer: string;

package/build/esm/packages/aurora/src/components/tooltip/css_classes.js

@@ -0,0 +1,5 @@
+const cssTooltip = 'tooltip';
+const cssTooltipContainer = `${cssTooltip}__container`;
+
+export { cssTooltip, cssTooltipContainer };
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/tooltip/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tooltip/index.js

@@ -1,20 +1,24 @@
 import React, { useRef } from 'react';
-import { classNames } from '../../utilities/styles/classNames.js';
-import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
+import { DropdownContext } from '../dropdown/context/index.js';
 import cssClasses from '../../css/tooltip/main.module.less.js';
+import { useToggle } from '../dropdown/hooks/use_toggle.js';
+import Dropdown from '../dropdown/index.js';
+import { cssTooltip, cssTooltipContainer } from './css_classes.js';
 
-const Tooltip = ({ fixed, left, top, disabled, children, content }) => {
-    const className = classNames(['tooltip', left && 'tooltip_left', top && 'tooltip_top'], cssClasses);
-    const childRef = useRef(null);
-    const { onMouseEnter, style } = useFixedChildPosition({
-        useFixed: fixed,
-        hPosition: left ? 'left' : 'right',
-        vPosition: top ? 'top' : 'bottom',
-        childRef
-    });
-    return (React.createElement("span", { className: className, onMouseEnter: onMouseEnter },
-        children,
-        !disabled && (React.createElement("div", { style: style, ref: childRef, className: cssClasses['tooltip__container'] }, content))));
+const Tooltip = ({ left, top, disabled, onToggle, children, content }) => {
+    const wrapperRef = useRef(null);
+    const [isOpen, toggleDropdown] = useToggle(false, onToggle);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    const handleOnMouseEnter = () => {
+        !isOpen && toggleDropdown();
+    };
+    const handleOnMouseLeave = () => {
+        isOpen && toggleDropdown();
+    };
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("span", { className: cssClasses[cssTooltip], ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
+            children,
+            !disabled && (React.createElement(Dropdown.Content, { cssClass: cssClasses[cssTooltipContainer], horizontalPosition: left ? 'left' : 'right', verticalPosition: top ? 'top' : 'bottom' }, content)))));
 };
 
 export default Tooltip;

package/build/esm/packages/aurora/src/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.d.ts

@@ -1,9 +1,9 @@
+import { IDropdownProps } from "../dropdown/types";
 import { ReactElement } from 'react';
-export interface ITooltip {
+export interface ITooltip extends IDropdownProps {
     content: string | ReactElement;
-    fixed?: boolean;
+    disabled?: boolean;
     left?: boolean;
     top?: boolean;
-    disabled?: boolean;
     children: React.ReactNode;
 }

package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js

@@ -1,2 +1,3 @@
+import '@auroraComponents/dropdown/types';
 import 'react';
 //# sourceMappingURL=tooltip_types.js.map

package/build/esm/packages/aurora/src/components/tooltip/tooltip_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip_types.ts"],"names":[],"mappings":"AAAA,OAA6B,OAAO,CAAC"}
+{"version":3,"file":"tooltip_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip_types.ts"],"names":[],"mappings":"AAAA,OAA+B,kCAAkC,CAAC;AAClE,OAA6B,OAAO,CAAC"}

package/build/esm/packages/aurora/src/css/date_picker/main.module.less.js

@@ -1,8 +1,8 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
 var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (min-width: 577px) {\n  .main-module_date-picker__ZqlVj {\n    max-width: 16rem;\n  }\n}\n@media screen and (max-width: 576px) {\n  .main-module_date-picker__ZqlVj,\n  .main-module_range-picker__2nqS6 {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n  }\n  .main-module_date-picker__container__3Jt5v {\n    flex-grow: 1;\n  }\n  .main-module_range-picker__2nqS6 .main-module_date-picker__container__3Jt5v:nth-child(1) {\n    flex-grow: 1;\n  }\n  .main-module_range-picker__2nqS6 .main-module_date-picker__container__3Jt5v:nth-child(2) {\n    display: none;\n  }\n}\n.main-module_date-picker__container__3Jt5v {\n  width: 100%;\n  background: #ffffff;\n}\n.main-module_date-picker__common-ranges__3aEeE {\n  margin: 0 1rem;\n}\n.main-module_date-picker__controller__1csI7 {\n  display: flex;\n  align-items: center;\n  margin: 0.5rem 1rem;\n}\n.main-module_date-picker__controller-arrow__2ip9A {\n  border-color: #135cc8;\n  border-style: solid;\n  width: 0.5rem;\n  height: 0.5rem;\n  cursor: pointer;\n  border-bottom-width: 1px;\n  border-right-width: 1px;\n  border-top-width: 0;\n  border-left-width: 0;\n}\n.main-module_date-picker__controller-arrow_left__1FemM {\n  transform: rotate(135deg);\n}\n.main-module_date-picker__controller-arrow_right__2e84W {\n  transform: rotate(-45deg);\n}\n.main-module_date-picker__controller-title__3wWrg {\n  cursor: pointer;\n  text-transform: capitalize;\n  text-align: center;\n  color: #135cc8;\n  flex-grow: 1;\n  display: block;\n}\n.main-module_date-picker__label-icon__38IQW {\n  height: 1.5rem;\n  fill: #135cc8;\n}\n.main-module_date-picker__days-grid__3VC3X {\n  width: 100%;\n}\n.main-module_date-picker__days-grid-row__32HHK {\n  display: -ms-grid;\n  display: grid;\n  margin: auto;\n  padding: 0.5rem 1rem 0;\n  -ms-grid-columns: auto auto auto auto auto auto auto;\n  grid-template-columns: auto auto auto auto auto auto auto;\n}\n.main-module_date-picker__days-grid-week-name__k47gT {\n  text-align: center;\n  text-transform: capitalize;\n  color: #abb4cd;\n}\n.main-module_date-picker__day-text_today__2dJSg {\n  color: #2d3748;\n  background-color: rgba(245, 245, 245, 0.5);\n  border-radius: 1rem;\n}\n.main-module_date-picker__day-text_selected__2shDu {\n  background: white;\n  border: 2px solid #3c83ec;\n  color: #5c657e;\n  transition: 0.1s color;\n}\n.main-module_date-picker__day-text_rounded-borders__3JVfx {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 2rem;\n  height: calc(2rem - 4px);\n  border-radius: 1rem;\n}\n.main-module_date-picker__day-text_navigation__nAkfO {\n  background: #5c657e;\n  color: #ffffff;\n}\n.main-module_date-picker__day__2qClw {\n  width: 2rem;\n  height: 2rem;\n  justify-content: center;\n  -ms-grid-column-align: center;\n      justify-self: center;\n  align-items: center;\n  display: inline-flex;\n  color: #5c657e;\n  text-align: center;\n  cursor: pointer;\n}\n.main-module_date-picker__day_blocked__1reCa {\n  color: #cccccc;\n}\n.main-module_date-picker__day_in-range__sRkO_ {\n  transition: 0.3s background-color, 0.2s color;\n  background: #3c83ec;\n  color: #ffffff;\n}\n.main-module_date-picker__day_proposed__3Wv7O {\n  background-color: #6fb9f7;\n}\n.main-module_date-picker__day_navigation__39Z6G {\n  background: #5c657e;\n  color: #ffffff;\n}\n.main-module_date-picker__day_range-end-left__2nlsF {\n  background: linear-gradient(to left, #3c83ec, #3c83ec 50%, #ffffff 50%);\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\n}\n.main-module_date-picker__day_range-end-left-proposed__38kpH {\n  background: linear-gradient(to left, #6fb9f7, #6fb9f7 50%, #ffffff 50%);\n}\n.main-module_date-picker__day_range-end-right__1137l {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n  background: linear-gradient(to right, #3c83ec, #3c83ec 50%, #ffffff 50%);\n}\n.main-module_date-picker__day_range-end-right-proposed__HBi_C {\n  background: linear-gradient(to right, #6fb9f7, #6fb9f7 50%, #ffffff 50%);\n}\n.main-module_date-picker__month-table__1Edhl {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: 4fr 4fr 4fr;\n  grid-template-columns: 4fr 4fr 4fr;\n}\n.main-module_date-picker__month-table-item__1nkBu {\n  text-align: center;\n  padding: 0.5rem;\n  color: #5c657e;\n  text-transform: capitalize;\n  cursor: pointer;\n}\n.main-module_date-picker__month-table-item_selected__2kb5V {\n  font-weight: 600;\n  color: #3c83ec;\n  border-radius: 1.5rem;\n}\n.main-module_range-picker__2nqS6 {\n  flex-grow: 1;\n}\n.main-module_range-picker__container__Z23eL {\n  display: flex;\n  flex-grow: 1;\n}\n";
-var cssClasses = {"date-picker":"main-module_date-picker__ZqlVj","range-picker":"main-module_range-picker__2nqS6","date-picker__container":"main-module_date-picker__container__3Jt5v","date-picker__common-ranges":"main-module_date-picker__common-ranges__3aEeE","date-picker__controller":"main-module_date-picker__controller__1csI7","date-picker__controller-arrow":"main-module_date-picker__controller-arrow__2ip9A","date-picker__controller-arrow_left":"main-module_date-picker__controller-arrow_left__1FemM","date-picker__controller-arrow_right":"main-module_date-picker__controller-arrow_right__2e84W","date-picker__controller-title":"main-module_date-picker__controller-title__3wWrg","date-picker__label-icon":"main-module_date-picker__label-icon__38IQW","date-picker__days-grid":"main-module_date-picker__days-grid__3VC3X","date-picker__days-grid-row":"main-module_date-picker__days-grid-row__32HHK","date-picker__days-grid-week-name":"main-module_date-picker__days-grid-week-name__k47gT","date-picker__day-text_today":"main-module_date-picker__day-text_today__2dJSg","date-picker__day-text_selected":"main-module_date-picker__day-text_selected__2shDu","date-picker__day-text_rounded-borders":"main-module_date-picker__day-text_rounded-borders__3JVfx","date-picker__day-text_navigation":"main-module_date-picker__day-text_navigation__nAkfO","date-picker__day":"main-module_date-picker__day__2qClw","date-picker__day_blocked":"main-module_date-picker__day_blocked__1reCa","date-picker__day_in-range":"main-module_date-picker__day_in-range__sRkO_","date-picker__day_proposed":"main-module_date-picker__day_proposed__3Wv7O","date-picker__day_navigation":"main-module_date-picker__day_navigation__39Z6G","date-picker__day_range-end-left":"main-module_date-picker__day_range-end-left__2nlsF","date-picker__day_range-end-left-proposed":"main-module_date-picker__day_range-end-left-proposed__38kpH","date-picker__day_range-end-right":"main-module_date-picker__day_range-end-right__1137l","date-picker__day_range-end-right-proposed":"main-module_date-picker__day_range-end-right-proposed__HBi_C","date-picker__month-table":"main-module_date-picker__month-table__1Edhl","date-picker__month-table-item":"main-module_date-picker__month-table-item__1nkBu","date-picker__month-table-item_selected":"main-module_date-picker__month-table-item_selected__2kb5V","range-picker__container":"main-module_range-picker__container__Z23eL"};
+var styles = {"date-picker":"main-module_date-picker__ZqlVj","range-picker":"main-module_range-picker__2nqS6","date-picker__container":"main-module_date-picker__container__3Jt5v","date-picker__common-ranges":"main-module_date-picker__common-ranges__3aEeE","date-picker__controller":"main-module_date-picker__controller__1csI7","date-picker__controller-arrow":"main-module_date-picker__controller-arrow__2ip9A","date-picker__controller-arrow_left":"main-module_date-picker__controller-arrow_left__1FemM","date-picker__controller-arrow_right":"main-module_date-picker__controller-arrow_right__2e84W","date-picker__controller-title":"main-module_date-picker__controller-title__3wWrg","date-picker__label-icon":"main-module_date-picker__label-icon__38IQW","date-picker__days-grid":"main-module_date-picker__days-grid__3VC3X","date-picker__days-grid-row":"main-module_date-picker__days-grid-row__32HHK","date-picker__days-grid-week-name":"main-module_date-picker__days-grid-week-name__k47gT","date-picker__day-text_today":"main-module_date-picker__day-text_today__2dJSg","date-picker__day-text_selected":"main-module_date-picker__day-text_selected__2shDu","date-picker__day-text_rounded-borders":"main-module_date-picker__day-text_rounded-borders__3JVfx","date-picker__day-text_navigation":"main-module_date-picker__day-text_navigation__nAkfO","date-picker__day":"main-module_date-picker__day__2qClw","date-picker__day_blocked":"main-module_date-picker__day_blocked__1reCa","date-picker__day_in-range":"main-module_date-picker__day_in-range__sRkO_","date-picker__day_proposed":"main-module_date-picker__day_proposed__3Wv7O","date-picker__day_navigation":"main-module_date-picker__day_navigation__39Z6G","date-picker__day_range-end-left":"main-module_date-picker__day_range-end-left__2nlsF","date-picker__day_range-end-left-proposed":"main-module_date-picker__day_range-end-left-proposed__38kpH","date-picker__day_range-end-right":"main-module_date-picker__day_range-end-right__1137l","date-picker__day_range-end-right-proposed":"main-module_date-picker__day_range-end-right-proposed__HBi_C","date-picker__month-table":"main-module_date-picker__month-table__1Edhl","date-picker__month-table-item":"main-module_date-picker__month-table-item__1nkBu","date-picker__month-table-item_selected":"main-module_date-picker__month-table-item_selected__2kb5V","range-picker__container":"main-module_range-picker__container__Z23eL"};
 styleInject(css_248z);
 
-export default cssClasses;
+export default styles;
 //# sourceMappingURL=main.module.less.js.map

package/build/esm/packages/aurora/src/css/dropdown/main.module.less.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n  .main-module_dropdown__content__X9kz_ {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n  .main-module_dropdown__header__kvhNn {\n    display: block;\n  }\n  .main-module_dropdown__header-title__7NXxw {\n    margin-left: 0.5rem;\n  }\n}\n@media (min-width: 576px) {\n  .main-module_dropdown__header__kvhNn {\n    display: none;\n  }\n}\n.main-module_dropdown__36KKf {\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n  flex: 0 0 auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1200;\n  width: auto;\n  padding: 0.5rem 0;\n  background-color: #ffffff;\n  border-radius: 3px;\n  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -14px;\n  left: 7px;\n  border-width: 7px;\n  border-style: solid;\n  border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__content_right__Rp4hR::before {\n  right: 7px;\n  left: auto;\n}\n.main-module_dropdown__content_bottom__1OlNP::before {\n  top: auto;\n  bottom: -14px;\n  border-color: #ffffff transparent transparent transparent;\n}\n.main-module_dropdown__item-with-hover__3g-Za {\n  pointer-events: all;\n}\n.main-module_dropdown__item-with-hover__3g-Za:hover {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list__2bd_r {\n  flex: 0 0 auto;\n  padding: 0;\n  width: 100%;\n  min-width: 20rem;\n  text-align: left;\n  font-size: 14px;\n  font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n  list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n  padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n  scrollbar-color: #79829c #ffffff;\n  scrollbar-width: thin;\n  max-height: 280px;\n  overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n  width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n  background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n  background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n  background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n  background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n  display: block;\n  padding: 0.5rem 1rem;\n  cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n  color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n  color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n  padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n  margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n  margin-right: 1rem;\n  color: #abb4cd;\n  font-size: 10px;\n  font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n  font-weight: 600;\n  color: #5c657e;\n}\n.main-module_dropdown__error__1oS0H {\n  display: flex;\n  align-items: center;\n  color: #e60c54;\n  gap: 6px;\n  padding: 0.5rem 1rem;\n}\n.main-module_dropdown__error-icon__3OLzE {\n  fill: #e60c54;\n}\n.main-module_dropdown__additional-info__1aTtM {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0.5rem 1rem;\n}\n.main-module_select__1ocPo {\n  position: relative;\n  display: flex;\n  flex: 0 2 auto;\n  align-items: center;\n  width: 100%;\n}\n.main-module_select__1ocPo::after {\n  content: '';\n  position: absolute;\n  display: block;\n  right: 0.715em;\n  width: 7px;\n  height: 7px;\n  transform: translateY(-25%) rotate(-45deg);\n  border-width: 0 0 1px 1px;\n  border-style: solid;\n  border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n  width: 100%;\n  text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n  opacity: 0;\n  transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n  opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n  opacity: 1;\n  transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n  opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n  opacity: 0;\n  transform: translate3d(0, -2rem, 0);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n  opacity: 0;\n  transition: opacity 0.1s;\n}\n";
-var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__content_right":"main-module_dropdown__content_right__Rp4hR","dropdown__content_bottom":"main-module_dropdown__content_bottom__1OlNP","dropdown__item-with-hover":"main-module_dropdown__item-with-hover__3g-Za","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","dropdown__error":"main-module_dropdown__error__1oS0H","dropdown__error-icon":"main-module_dropdown__error-icon__3OLzE","dropdown__additional-info":"main-module_dropdown__additional-info__1aTtM","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n  .main-module_dropdown__content__X9kz_ {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n  .main-module_dropdown__header__kvhNn {\n    display: block;\n  }\n  .main-module_dropdown__header-title__7NXxw {\n    margin-left: 0.5rem;\n  }\n}\n@media (min-width: 576px) {\n  .main-module_dropdown__header__kvhNn {\n    display: none;\n  }\n}\n.main-module_dropdown__36KKf {\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n  flex: 0 0 auto;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1200;\n  width: auto;\n  padding: 0.5rem 0;\n  background-color: #ffffff;\n  border-radius: 3px;\n  box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -14px;\n  left: 7px;\n  border-width: 7px;\n  border-style: solid;\n  border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__content_arrow-right__2dhyy::before {\n  right: 7px;\n  left: auto;\n}\n.main-module_dropdown__content_arrow-bottom__mY8R9::before {\n  top: auto;\n  bottom: -14px;\n  border-color: #ffffff transparent transparent transparent;\n}\n.main-module_dropdown__item-with-hover__3g-Za {\n  pointer-events: all;\n}\n.main-module_dropdown__item-with-hover__3g-Za:hover {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list__2bd_r {\n  flex: 0 0 auto;\n  padding: 0;\n  width: 100%;\n  min-width: 20rem;\n  text-align: left;\n  font-size: 14px;\n  font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n  list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n  padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n  scrollbar-color: #79829c #ffffff;\n  scrollbar-width: thin;\n  max-height: 280px;\n  overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n  width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n  background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n  background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n  background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n  background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n  display: block;\n  padding: 0.5rem 1rem;\n  cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n  background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n  color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n  color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n  padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n  margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n  margin-right: 1rem;\n  color: #abb4cd;\n  font-size: 10px;\n  font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n  font-weight: 600;\n  color: #5c657e;\n}\n.main-module_dropdown__error__1oS0H {\n  display: flex;\n  align-items: center;\n  color: #e60c54;\n  gap: 6px;\n  padding: 0.5rem 1rem;\n}\n.main-module_dropdown__error-icon__3OLzE {\n  fill: #e60c54;\n}\n.main-module_dropdown__additional-info__1aTtM {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0.5rem 1rem;\n}\n.main-module_select__1ocPo {\n  position: relative;\n  display: flex;\n  flex: 0 2 auto;\n  align-items: center;\n  width: 100%;\n}\n.main-module_select__1ocPo::after {\n  content: '';\n  position: absolute;\n  display: block;\n  right: 0.715em;\n  width: 7px;\n  height: 7px;\n  transform: translateY(-25%) rotate(-45deg);\n  border-width: 0 0 1px 1px;\n  border-style: solid;\n  border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n  width: 100%;\n  text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n  opacity: 0;\n  transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n  opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n  opacity: 1;\n  transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n  opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n  pointer-events: none;\n  opacity: 0;\n  transform: translate3d(0, -2rem, 0);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_dropdown-exit-active-reversed__DNTne {\n  pointer-events: none;\n  opacity: 0;\n  transform: translate3d(0, 2rem, 0);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n  opacity: 0;\n  transition: opacity 0.1s;\n}\n";
+var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__content_arrow-right":"main-module_dropdown__content_arrow-right__2dhyy","dropdown__content_arrow-bottom":"main-module_dropdown__content_arrow-bottom__mY8R9","dropdown__item-with-hover":"main-module_dropdown__item-with-hover__3g-Za","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","dropdown__error":"main-module_dropdown__error__1oS0H","dropdown__error-icon":"main-module_dropdown__error-icon__3OLzE","dropdown__additional-info":"main-module_dropdown__additional-info__1aTtM","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","dropdown-exit-active-reversed":"main-module_dropdown-exit-active-reversed__DNTne","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
 styleInject(css_248z);
 
 export default cssClasses;

package/build/esm/packages/aurora/src/css/hint/main.module.less.js

@@ -1,8 +1,8 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_hint_spacing-left__1dKcO {\n  margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n  margin-right: 1rem;\n}\n.main-module_hint__3cahT:hover span {\n  color: #3c83ec;\n}\n.main-module_hint__3cahT:hover .main-module_hint__content__IIh3W {\n  display: block;\n}\n.main-module_hint__content__IIh3W {\n  min-width: 258px;\n  max-width: 500px;\n  position: absolute;\n  display: none;\n  right: -0.25rem;\n  top: 150%;\n  z-index: 6;\n  padding: 1rem;\n  text-align: left;\n  background-color: #ffffff;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n.main-module_hint__content__IIh3W::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -14px;\n  right: 4px;\n  border-width: 7px;\n  border-style: solid;\n  border-color: transparent transparent #ffffff transparent;\n}\n.main-module_hint__content__IIh3W::before {\n  content: '';\n  position: absolute;\n  top: -20px;\n  right: 0;\n  display: block;\n  width: 200px;\n  height: 20px;\n}\n.main-module_hint__content_yellow__3NyBP {\n  background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP::after {\n  border-color: transparent transparent #fff6cc transparent;\n}\n.main-module_hint_right__21Xe4 .main-module_hint__content__IIh3W {\n  right: auto;\n  left: 0;\n}\n.main-module_hint_right__21Xe4 .main-module_hint__content__IIh3W::before {\n  left: 0;\n  right: auto;\n}\n.main-module_hint_right__21Xe4 .main-module_hint__content__IIh3W::after {\n  right: auto;\n  left: 4px;\n}\n.main-module_hint_top__pxKX0 .main-module_hint__content__IIh3W {\n  bottom: 150%;\n  top: auto;\n}\n.main-module_hint_top__pxKX0 .main-module_hint__content__IIh3W::before {\n  bottom: -20px;\n  top: auto;\n}\n.main-module_hint_top__pxKX0 .main-module_hint__content__IIh3W::after {\n  bottom: -14px;\n  top: auto;\n  border-color: #ffffff transparent transparent transparent;\n}\n.main-module_hint_top__pxKX0 .main-module_hint__content_yellow__3NyBP::after {\n  border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint_horizontal-center__2Kuvh {\n  position: inherit;\n}\n.main-module_hint_horizontal-center__2Kuvh .main-module_hint__content__IIh3W {\n  top: auto;\n  left: 0;\n  right: 0;\n  width: 100%;\n  margin-top: 0.25rem;\n}\n.main-module_hint_horizontal-center__2Kuvh .main-module_hint__content__IIh3W::after {\n  display: none;\n}\n.main-module_hint_link__RsB7x .main-module_hint__content__IIh3W::before {\n  top: -8px;\n  height: 8px;\n}\n";
-var styles = {"hint":"main-module_hint__3cahT","hint_spacing-left":"main-module_hint_spacing-left__1dKcO","hint_spacing-right":"main-module_hint_spacing-right__2dV0Q","hint__content":"main-module_hint__content__IIh3W","hint__content_yellow":"main-module_hint__content_yellow__3NyBP","hint_right":"main-module_hint_right__21Xe4","hint_top":"main-module_hint_top__pxKX0","hint_horizontal-center":"main-module_hint_horizontal-center__2Kuvh","hint_link":"main-module_hint_link__RsB7x"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n  vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n  margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n  margin-right: 1rem;\n}\n.main-module_hint__3cahT:hover span {\n  color: #3c83ec;\n}\n.main-module_hint__content__IIh3W {\n  min-width: 258px;\n  max-width: 500px;\n  padding: 1rem !important;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n  background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n  border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n  border-color: transparent transparent #fff6cc transparent;\n}\n";
+var cssClasses = {"hint":"main-module_hint__3cahT","hint_spacing-left":"main-module_hint_spacing-left__1dKcO","hint_spacing-right":"main-module_hint_spacing-right__2dV0Q","hint__content":"main-module_hint__content__IIh3W","hint__content_yellow":"main-module_hint__content_yellow__3NyBP","dropdown__content_top":"main-module_dropdown__content_top__1bZPH","dropdown__content_bottom":"main-module_dropdown__content_bottom__10hXS"};
 styleInject(css_248z);
 
-export default styles;
+export default cssClasses;
 //# sourceMappingURL=main.module.less.js.map