@dreamcommerce/aurora 2.4.3-6 → 2.4.3-7

package/build/esm/packages/aurora/src/components/date_picker/components/common_ranges.js

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerCommonRanges } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import Select from '../../dropdown/hoc/select/index.js';
 import { getRanges } from '../utilities.js';
 
@@ -15,7 +15,7 @@ const CommonRanges = () => {
     const onChange = ({ value }) => {
         setValue(dateRanges[value]);
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerCommonRanges], ref: ref },
+    return (React.createElement("div", { className: styles[cssDatePickerCommonRanges], ref: ref },
         React.createElement(Select, { name: "common-ranges", options: availableOptions, onChange: onChange, portalContainer: ref })));
 };
 

package/build/esm/packages/aurora/src/components/date_picker/components/days_grid.js

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
 import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerDaysGrid, cssDatePickerDaysGridRow, cssDatePickerDaysGridWeekName } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import SingleDay from './single_day.js';
 import useDateNames from '../hooks/use_date_names.js';
 
@@ -12,9 +12,9 @@ const DaysGrid = () => {
     const firstWeekDay = (new Date(year, month, 1).getDay() + 6) % 7;
     const { updateDate } = useContext(DatepickerContext);
     const { weekNameShortcuts } = useDateNames();
-    return (React.createElement("div", { className: cssClasses[cssDatePickerDaysGrid] },
-        React.createElement("div", { className: cssClasses[cssDatePickerDaysGridRow] }, weekNameShortcuts.map((weekName, index) => (React.createElement("div", { className: cssClasses[cssDatePickerDaysGridWeekName], key: `week-name-${index}` }, weekName)))),
-        React.createElement("div", { className: `${cssClasses[cssDatePickerDaysGridRow]} ${animationClassName}` },
+    return (React.createElement("div", { className: styles[cssDatePickerDaysGrid] },
+        React.createElement("div", { className: styles[cssDatePickerDaysGridRow] }, weekNameShortcuts.map((weekName, index) => (React.createElement("div", { className: styles[cssDatePickerDaysGridWeekName], key: `week-name-${index}` }, weekName)))),
+        React.createElement("div", { className: `${styles[cssDatePickerDaysGridRow]} ${animationClassName}` },
             Array.from(Array(firstWeekDay).keys()).map((_, index) => (React.createElement("div", { key: `empty-day-${index}` }))),
             Array.from(Array(daysInMonth).keys()).map((_, index) => (React.createElement(SingleDay, { date: index + 1, month: month, year: year, updateDate: updateDate, key: `day-${index}` }))))));
 };

package/build/esm/packages/aurora/src/components/date_picker/components/label.js

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import InputWrapper from '../../controls/components/input_wrapper.js';
 import DatepickerContext from '../context/value_controller_context.js';
-import IconCalendar from '../../../assets/icon_calendar.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerLabelIcon } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
+import IconCalendar from '../../../assets/icon_calendar.js';
 
 const DatepickerLabel = ({ name }) => {
     const { readable, inputValue } = useContext(DatepickerContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { value: readable, preElements: React.createElement(IconCalendar, { className: cssClasses[cssDatePickerLabelIcon] }) }),
+        React.createElement(InputWrapper, { value: readable, preElements: React.createElement(IconCalendar, { className: styles[cssDatePickerLabelIcon] }) }),
         React.createElement("input", { type: "hidden", name: name, value: inputValue })));
 };
 

package/build/esm/packages/aurora/src/components/date_picker/components/month_controller.js

@@ -1,10 +1,10 @@
 import React, { useContext, useRef } from 'react';
 import Dropdown from '../../dropdown/index.js';
-import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { DATE_PICKER_TEST_ID } from '../constants.js';
+import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
 import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
+import styles from '../../../css/date_picker/main.module.less.js';
+import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
 import useDateNames from '../hooks/use_date_names.js';
 import MonthYearPicker from './month_year_picker/index.js';
 
@@ -13,14 +13,14 @@ const MonthController = ({ month, year }) => {
     const { monthNames } = useDateNames();
     const controllerRef = useRef(null);
     useKeyboardNavigation();
-    return (React.createElement("div", { className: `${cssClasses[cssDatePickerController]}`, ref: controllerRef, "data-test-id": DATE_PICKER_TEST_ID.controller },
-        React.createElement("div", { onClick: previousMonth, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowLeft]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowLeft }),
-        React.createElement("div", { className: cssClasses[cssDatePickerControllerTitle] },
+    return (React.createElement("div", { className: `${styles[cssDatePickerController]}`, ref: controllerRef, "data-test-id": DATE_PICKER_TEST_ID.controller },
+        React.createElement("div", { onClick: previousMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowLeft }),
+        React.createElement("div", { className: styles[cssDatePickerControllerTitle] },
             React.createElement(Dropdown, null,
                 React.createElement(Dropdown.Label, { cssClass: animationClassName, label: `${monthNames[month]} ${year}` }),
                 React.createElement(Dropdown.Content, { portalContainer: controllerRef },
                     React.createElement(MonthYearPicker, { month: month, year: year })))),
-        React.createElement("div", { onClick: nextMonth, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
+        React.createElement("div", { onClick: nextMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
 };
 
 export default MonthController;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_view.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { DropdownContext } from '../../../../dropdown/context/index.js';
+import { MONTHS_IN_YEAR } from '../../../constants.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
-import { MONTHS_IN_YEAR } from '../../../constants.js';
 import useDateNames from '../../../hooks/use_date_names.js';
 
 const MonthView = () => {
@@ -14,7 +14,7 @@ const MonthView = () => {
         setMonth(monthIndex);
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerMonthTable] }, Array.from(Array(MONTHS_IN_YEAR).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onMonthClick(index), className: `${cssClasses[cssDatePickerMonthTableItem]} ${index === month ? cssClasses[cssDatePickerMonthTableItemSelected] : ''}` }, monthNameShortcuts[index])))));
+    return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(MONTHS_IN_YEAR).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onMonthClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${index === month ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, monthNameShortcuts[index])))));
 };
 
 export default MonthView;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_controller.js

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
 import { MonthYearPickerContext } from '../context.js';
 
 const MonthYearPickerController = () => {
     const { onArrowLeft, onArrowRight, monthPickerTitle, toggleView } = useContext(MonthYearPickerContext);
-    return (React.createElement("div", { className: cssClasses[cssDatePickerController] },
-        React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowLeft]}` }),
-        React.createElement("div", { onClick: toggleView, className: cssClasses[cssDatePickerControllerTitle] }, monthPickerTitle),
-        React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[cssDatePickerControllerArrowRight]}` })));
+    return (React.createElement("div", { className: styles[cssDatePickerController] },
+        React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}` }),
+        React.createElement("div", { onClick: toggleView, className: styles[cssDatePickerControllerTitle] }, monthPickerTitle),
+        React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}` })));
 };
 
 export default MonthYearPickerController;

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_picker_context_manager.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
-import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
 import { YEARS_IN_VIEW } from '../../../constants.js';
+import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
 import { MonthYearPickerContext } from '../context.js';
 import { MONTH_VIEW, YEARS_VIEW } from '../constants.js';
 

package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/years_view.js

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
+import { YEARS_IN_VIEW } from '../../../constants.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
+import styles from '../../../../../css/date_picker/main.module.less.js';
 import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
-import cssClasses from '../../../../../css/date_picker/main.module.less.js';
-import { YEARS_IN_VIEW } from '../../../constants.js';
 import { MonthYearPickerContext } from '../context.js';
 import { MONTH_VIEW } from '../constants.js';
 
@@ -13,7 +13,7 @@ const YearView = () => {
         setYear(yearRange + yearIndex);
         setView(MONTH_VIEW);
     };
-    return (React.createElement("div", { className: cssClasses[cssDatePickerMonthTable] }, Array.from(Array(YEARS_IN_VIEW).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onYearClick(index), className: `${cssClasses[cssDatePickerMonthTableItem]} ${yearRange + index === year ? cssClasses[cssDatePickerMonthTableItemSelected] : ''}` }, yearRange + index)))));
+    return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(YEARS_IN_VIEW).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onYearClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${yearRange + index === year ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, yearRange + index)))));
 };
 
 export default YearView;

package/build/esm/packages/aurora/src/components/date_picker/components/pure_date_picker.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
-import { cssDatePickerContainer } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { MAX_MONTH, MIN_MONTH } from '../constants.js';
+import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import useAnimation from '../hooks/use_animation.js';
+import { cssDatePickerContainer } from '../css_classes.js';
 import DaysGrid from './days_grid.js';
 import MonthController from './month_controller.js';
 
@@ -38,7 +38,7 @@ const PureDatepicker = ({ className = '', setMonthYear, month, year }) => {
         setMonthYearWithDelay(({ year }) => ({ month, year }));
     };
     const setYear = (year) => setMonthYearWithDelay(({ month }) => ({ month, year }));
-    return (React.createElement("div", { className: `${className} ${cssClasses[cssDatePickerContainer]}` },
+    return (React.createElement("div", { className: `${className} ${styles[cssDatePickerContainer]}` },
         React.createElement(MonthYearNavigationContext.Provider, { value: {
                 previousMonth: prevMonthWithAnimation,
                 nextMonth: nextMonthWithAnimation,

package/build/esm/packages/aurora/src/components/date_picker/components/single_day.js

@@ -1,9 +1,9 @@
 import React, { useContext, useMemo } from 'react';
 import { classNames } from '../../../utilities/styles/classNames.js';
+import { DATE_PICKER_TEST_ID } from '../constants.js';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePickerDay, cssDatePickerDayNavigation, cssDatePickerDaySelected, cssDatePickerDayBlocked, cssDatePickerDayProposed, cssDatePickerDayRangeEndLeft, cssDatePickerDayRangeEndLeftProposed, cssDatePickerDayRangeEndRight, cssDatePickerDayRangeEndRightProposed, cssDatePickerDayInRange, cssDatePickerDayText, cssDatePickerDayTextRoundedBorders, cssDatePickerDayTextNavigation, cssDatePickerDayTextToday, cssDatePickerDayTextSelected } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
-import { DATE_PICKER_TEST_ID } from '../constants.js';
 
 const SingleDay = ({ date, month, year }) => {
     const { updateDate, isSelected, isInRange, isNavigation, isBlocked, isToday, setHoverDate, isProposed } = useContext(DatepickerContext);
@@ -32,7 +32,7 @@ const SingleDay = ({ date, month, year }) => {
         lastRangeDay && proposed && cssDatePickerDayRangeEndRightProposed,
         oneDayRange && cssDatePickerDaySelected,
         inRange && cssDatePickerDayInRange
-    ], cssClasses), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
+    ], styles), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
     const dayTextClassName = useMemo(() => classNames([
         cssDatePickerDayText,
         roundedBorders && cssDatePickerDayTextRoundedBorders,
@@ -40,7 +40,7 @@ const SingleDay = ({ date, month, year }) => {
         today && navigation && cssDatePickerDayTextNavigation,
         today && cssDatePickerDayTextToday,
         selected && cssDatePickerDayTextSelected
-    ], cssClasses), [roundedBorders, selected, navigation, today]);
+    ], styles), [roundedBorders, selected, navigation, today]);
     return (React.createElement("div", { className: dayClassName, onClick: () => updateDate(new Date(year, month, date)), onMouseOver: () => {
             setHoverDate(new Date(year, month, date));
         } },

package/build/esm/packages/aurora/src/components/date_picker/hoc/range_picker.js

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
-import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
+import styles from '../../../css/date_picker/main.module.less.js';
+import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
 import { PureDatepicker } from '../components/pure_date_picker.js';
 import CommonRanges from '../components/common_ranges.js';
 import Buttons from '../components/buttons.js';
@@ -36,9 +36,9 @@ const RangePicker = ({ className = '', showButtons, showDefaultRanges }) => {
         //eslint-disable-next-line
     }, [setEarlierMonthYear, laterMonthYear.year, laterMonthYear.month]);
     useKeyboardNavigation();
-    return (React.createElement("div", { className: cssClasses[cssRangePicker] },
+    return (React.createElement("div", { className: styles[cssRangePicker] },
         showDefaultRanges && React.createElement(CommonRanges, null),
-        React.createElement("div", { className: cssClasses[cssRangePickerContainer] },
+        React.createElement("div", { className: styles[cssRangePickerContainer] },
             React.createElement(PureDatepicker, { setMonthYear: setEarlierMonthYear, ...earlierMonthYear, className: className }),
             React.createElement(PureDatepicker, { setMonthYear: setLaterMonthYear, ...laterMonthYear, className: className })),
         showButtons && React.createElement(Buttons, null)));

package/build/esm/packages/aurora/src/components/date_picker/hoc/single_date_picker.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import DatepickerContext from '../context/value_controller_context.js';
+import styles from '../../../css/date_picker/main.module.less.js';
 import { cssDatePicker } from '../css_classes.js';
-import cssClasses from '../../../css/date_picker/main.module.less.js';
 import { PureDatepicker } from '../components/pure_date_picker.js';
 import Buttons from '../components/buttons.js';
 
@@ -13,7 +13,7 @@ const SingleDatepicker = ({ className, showButtons }) => {
         year: currentDate.getFullYear()
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cssClasses[cssDatePicker] },
+        React.createElement("div", { className: styles[cssDatePicker] },
             React.createElement(PureDatepicker, { setMonthYear: setMonthYear, month: month, year: year, className: className }),
             showButtons && React.createElement(Buttons, null))));
 };

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
-import DatepickerContext from './context/value_controller_context.js';
 import useValueController from './hooks/use_value_controller.js';
+import DatepickerContext from './context/value_controller_context.js';
 import { RangePicker } from './hoc/range_picker.js';
 export { RangePicker } from './hoc/range_picker.js';
 import { SingleDatepicker } from './hoc/single_date_picker.js';

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

@@ -1,20 +1,21 @@
 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$2 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';
 
 /**
  * Dropdown.Content component. This togglable part of dropdown.
@@ -37,24 +38,21 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
     const checkIfIsOutsideTopViewport = () => {
         if (!contentRef.current)
             return;
-        const bounding = contentRef.current.getBoundingClientRect();
+        const bounding = getBounding(contentRef.current);
         return bounding.top <= 0;
     };
     const checkIfIsOutsideBottomViewport = () => {
         if (!contentRef.current)
             return;
         const element = contentRef.current;
-        const elementHeight = element.getBoundingClientRect().height;
+        const elementHeight = getBounding(element).height;
         return elementHeight + element.offsetTop > window.innerHeight + windowYScroll;
     };
     const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
     const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
-    const contentClassName = classNames([
-        cssDropdownContent,
-        arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
-        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom,
-        cssClass
-    ], cssClasses);
+    const contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport);
+    const contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || (verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
+    const contentClassName = classnames(cssClass, cssClasses[cssDropdownContent], contentShouldAppearOnTop && cssClasses$1[cssDropdownContentOnTop], contentShouldAppearOnBottom && cssClasses$1[cssDropdownContentOnBottom], arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom]);
     const screenWidthName = useScreenDetect();
     const refs = [contentRef];
     if (wrapperRef) {
@@ -67,8 +65,8 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
     });
     useEffect(() => {
         if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
-            const { x: wrapperXPosition, y: wrapperYPosition, width: wrapperWidth, height: wrapperHeight } = wrapperRef.current.getBoundingClientRect();
-            const { width: contentWidth } = contentRef.current.getBoundingClientRect();
+            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 yOffset = 10;
             const isInModal = isChildOfModal(wrapperRef);
@@ -136,7 +134,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         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$2['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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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/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,16 +1,14 @@
 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';
-    spacingLeft?: boolean;
-    spacingRight?: boolean;
+    hPosition?: 'left' | 'right';
     iconClass?: string;
     yellow?: boolean;
     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,28 @@
 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', iconClass, Icon, onToggle }) => {
+    const wrapperRef = useRef(null);
+    const [isOpen, toggleDropdown] = useToggle(false, onToggle);
+    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
+    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: cssClasses['hint'], 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;"}

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

@@ -12,8 +12,9 @@ const Label = ({ isRequired = false, children, additionalInfo, ...props }) => {
         [cssClasses[cssLabelError]]: errors
     });
     return (React.createElement("label", { className: labelClasses, ...props },
-        React.createElement(Stack, { align: "center" }, children),
-        additionalInfo && React.createElement("span", { className: cssClasses[cssLabelAdditionalInfo] }, additionalInfo)));
+        children,
+        additionalInfo && (React.createElement(Stack, { as: "span" },
+            React.createElement("span", { className: cssClasses[cssLabelAdditionalInfo] }, additionalInfo)))));
 };
 
 export default Label;

package/build/esm/packages/aurora/src/components/label/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/loader/constants.d.ts

@@ -1,10 +1,12 @@
 export declare const LOADER_SIZE: {
-    readonly small: "small";
-    readonly large: "large";
-    readonly extraLarge: "extraLarge";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly l: "l";
+    readonly xl: "xl";
 };
 export declare const LOADER_SIZE_CSS_CLASS_MAP: {
-    readonly small: string;
-    readonly large: string;
-    readonly extraLarge: string;
+    readonly xs: string;
+    readonly s: string;
+    readonly l: string;
+    readonly xl: string;
 };

package/build/esm/packages/aurora/src/components/loader/constants.js

@@ -1,14 +1,16 @@
-import { cssLoaderSizeSmall, cssLoaderSizeLarge, cssLoaderSizeExtraLarge } from './css_classes.js';
+import { cssLoaderSizeExtraSmall, cssLoaderSizeSmall, cssLoaderSizeLarge, cssLoaderSizeExtraLarge } from './css_classes.js';
 
 const LOADER_SIZE = {
-    small: 'small',
-    large: 'large',
-    extraLarge: 'extraLarge'
+    xs: 'xs',
+    s: 's',
+    l: 'l',
+    xl: 'xl'
 };
 const LOADER_SIZE_CSS_CLASS_MAP = {
-    [LOADER_SIZE.small]: cssLoaderSizeSmall,
-    [LOADER_SIZE.large]: cssLoaderSizeLarge,
-    [LOADER_SIZE.extraLarge]: cssLoaderSizeExtraLarge
+    [LOADER_SIZE.xs]: cssLoaderSizeExtraSmall,
+    [LOADER_SIZE.s]: cssLoaderSizeSmall,
+    [LOADER_SIZE.l]: cssLoaderSizeLarge,
+    [LOADER_SIZE.xl]: cssLoaderSizeExtraLarge
 };
 
 export { LOADER_SIZE, LOADER_SIZE_CSS_CLASS_MAP };

package/build/esm/packages/aurora/src/components/loader/constants.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;"}
+{"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;"}