@dreamcommerce/aurora 2.4.3-5 → 2.4.3

package/build/esm/packages/aurora/src/components/controls/types.js

@@ -3,6 +3,6 @@ import '@auroraComponents/dropdown/types';
 import '@auroraComponents/color_picker/types';
 import '@auroraComponents/file_picker/types';
 import '@auroraComponents/range/types';
-import 'react';
 import '@auroraTypings/general';
+import 'react';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA4F,OAAO,CAAC;AACpG,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkC,wBAAwB,CAAC;AAC3D,OAAkB,OAAO,CAAC"}

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: styles[cssDatePickerCommonRanges], ref: ref },
+    return (React.createElement("div", { className: cssClasses[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: 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}` },
+    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}` },
             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 styles from '../../../css/date_picker/main.module.less.js';
-import { cssDatePickerLabelIcon } from '../css_classes.js';
 import IconCalendar from '../../../assets/icon_calendar.js';
+import { cssDatePickerLabelIcon } from '../css_classes.js';
+import cssClasses from '../../../css/date_picker/main.module.less.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: styles[cssDatePickerLabelIcon] }) }),
+        React.createElement(InputWrapper, { value: readable, preElements: React.createElement(IconCalendar, { className: cssClasses[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 { 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 cssClasses from '../../../css/date_picker/main.module.less.js';
+import { DATE_PICKER_TEST_ID } from '../constants.js';
+import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.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: `${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] },
+    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] },
             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: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
+        React.createElement("div", { onClick: nextMonth, className: `${cssClasses[cssDatePickerControllerArrow]} ${cssClasses[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: 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])))));
+    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])))));
 };
 
 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: 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]}` })));
+    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]}` })));
 };
 
 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 { YEARS_IN_VIEW } from '../../../constants.js';
 import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
+import { YEARS_IN_VIEW } from '../../../constants.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: 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)))));
+    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)))));
 };
 
 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 { 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 cssClasses from '../../../css/date_picker/main.module.less.js';
+import { MAX_MONTH, MIN_MONTH } from '../constants.js';
+import useAnimation from '../hooks/use_animation.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} ${styles[cssDatePickerContainer]}` },
+    return (React.createElement("div", { className: `${className} ${cssClasses[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
-    ], styles), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
+    ], cssClasses), [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
-    ], styles), [roundedBorders, selected, navigation, today]);
+    ], cssClasses), [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 { 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 cssClasses from '../../../css/date_picker/main.module.less.js';
+import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.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: styles[cssRangePicker] },
+    return (React.createElement("div", { className: cssClasses[cssRangePicker] },
         showDefaultRanges && React.createElement(CommonRanges, null),
-        React.createElement("div", { className: styles[cssRangePickerContainer] },
+        React.createElement("div", { className: cssClasses[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: styles[cssDatePicker] },
+        React.createElement("div", { className: cssClasses[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 useValueController from './hooks/use_value_controller.js';
 import DatepickerContext from './context/value_controller_context.js';
+import useValueController from './hooks/use_value_controller.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

@@ -11,7 +11,7 @@ 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 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';
@@ -22,7 +22,7 @@ import { UiDomUtils } from '@dreamcommerce/utilities';
  * @example
  * <Dropdown.Content> ... </Dropdown.Content>
  */
-const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children, arrowSide = 'left', horizontalPosition = 'left', verticalPosition = 'bottom', wrapperWidth, cssClass, 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();
@@ -37,14 +37,14 @@ 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();
@@ -52,7 +52,8 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
     const contentClassName = classNames([
         cssDropdownContent,
         arrowSide === 'right' && cssDropdownArrowHorizontalDirectionRight,
-        dropdownIsOutsideBottomViewport && cssDropdownArrowVerticalDirectionBottom,
+        (dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport)) &&
+            cssDropdownArrowVerticalDirectionBottom,
         cssClass
     ], cssClasses);
     const screenWidthName = useScreenDetect();
@@ -67,43 +68,39 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
     });
     useEffect(() => {
         if ((wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) && contentRef.current) {
-            const { x, y, height } = 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 positionTop = height + y + windowYScroll + yOffset - yModifier;
-            const positionBottom = windowHeightMinusYOffset - y + yOffset;
-            const positionLeft = x - xModifier;
             const isInModal = isChildOfModal(wrapperRef);
             const zIndex = isInModal ? DROPDOWN_ON_MODAL_Z_INDEX : DROPDOWN_Z_INDEX;
+            const positionTop = wrapperHeight + wrapperYPosition + windowYScroll + yOffset - yModifier;
+            const positionBottom = windowHeightMinusYOffset - wrapperYPosition + yOffset;
+            const positionLeft = wrapperXPosition - xModifier;
             let topPositionValue = '';
             let bottomPositionValue = '';
             let leftPositionValue = '';
-            let leftPositionStickedToRightBorderValue;
-            if (horizontalPosition === 'right' && !wrapperWidth) {
-                throw new Error(`To use horizontal right position you must set "wrapperWidth" value`);
-            }
-            if (wrapperWidth) {
-                leftPositionStickedToRightBorderValue = x + wrapperWidth - contentWidth;
-            }
+            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') {
-                topPositionValue = 'auto';
-                bottomPositionValue = `${positionBottom}px`;
-                if (dropdownIsOutsideTopViewport) {
-                    topPositionValue = `${positionTop}px`;
-                    bottomPositionValue = 'auto';
-                }
+                setTopPosition();
+                if (dropdownIsOutsideTopViewport)
+                    setBottomPosition();
             }
             if (verticalPosition === 'bottom') {
-                topPositionValue = `${positionTop}px`;
-                bottomPositionValue = 'auto';
-                if (dropdownIsOutsideBottomViewport) {
-                    topPositionValue = 'auto';
-                    bottomPositionValue = `${positionBottom}px`;
-                }
+                setBottomPosition();
+                if (dropdownIsOutsideBottomViewport)
+                    setTopPosition();
             }
             screenWidthName === SCREEN_XS
                 ? setStyles({ top: `0px`, bottom: 'auto', left: `0px`, zIndex })
@@ -117,8 +114,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
         dropdownIsOutsideTopViewport,
         dropdownIsOutsideBottomViewport,
         windowYScroll,
-        windowHeightMinusYOffset,
-        wrapperWidth
+        windowHeightMinusYOffset
     ]);
     useEffect(() => {
         var _a;

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;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;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/types.d.ts

@@ -46,7 +46,6 @@ export interface IDropdownContentProps {
     arrowSide?: 'left' | 'right';
     horizontalPosition?: 'left' | 'right';
     verticalPosition?: 'top' | 'bottom';
-    wrapperWidth?: number;
     cssClass?: string;
 }
 export interface IDropdownItemWithHover {

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,6 +1,5 @@
 import React, { ReactElement } from 'react';
-import { IDropdownProps } from "../dropdown/types";
-export interface IHint extends IDropdownProps {
+export interface IHint {
     hint: string | ReactElement;
     vPosition?: 'top' | 'bottom';
     hPosition?: 'left' | 'right' | 'center';
@@ -11,6 +10,7 @@ export interface IHint extends IDropdownProps {
     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,17 +1,10 @@
 import React, { useRef } from 'react';
-import { DropdownContext } from '../dropdown/context/index.js';
 import { classNames } from '../../utilities/styles/classNames.js';
-import { useToggle } from '../dropdown/hooks/use_toggle.js';
-import Dropdown from '../dropdown/index.js';
-import IconHint from '../../assets/icon_hint.js';
 import styles from '../../css/hint/main.module.less.js';
+import IconHint from '../../assets/icon_hint.js';
+import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
 
-const Hint = ({ hint, vPosition = 'top', yellow, hPosition = 'right', iconClass, Icon, spacingLeft, spacingRight, onToggle }) => {
-    var _a;
-    const wrapperRef = useRef(null);
-    const [isOpen, toggleDropdown] = useToggle(false, onToggle);
-    const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
-    const wrapperWidth = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+const Hint = ({ hint, fixed, vPosition = 'top', yellow, hPosition = 'right', iconClass, Icon, spacingLeft, spacingRight }) => {
     const containerClassName = classNames([
         'hint',
         spacingLeft && 'hint_spacing-left',
@@ -20,19 +13,13 @@ const Hint = ({ hint, vPosition = 'top', yellow, hPosition = 'right', iconClass,
         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 IconComponent = Icon || IconHint;
-    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: "", horizontalPosition: hPosition === 'right' ? 'left' : 'right', verticalPosition: vPosition === 'top' ? 'top' : 'bottom', wrapperWidth: wrapperWidth },
-                React.createElement("span", null, hint)))));
+    return (React.createElement("div", { className: containerClassName, onMouseEnter: onMouseEnter },
+        React.createElement(IconComponent, { className: iconClass }),
+        React.createElement("div", { ref: hintContentRef, className: contentClassName, style: style }, 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;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;"}

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;
 };