@dreamcommerce/aurora 2.4.11 → 2.5.0

package/build/esm/packages/aurora/src/components/controls/hoc/control_input/index.js

@@ -17,11 +17,11 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, errors, labelAdditionalInfo, additionalInfo, ...props }) => {
+const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, labelAdditionalInfo, additionalInfo, ...props }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { prefix: prefix, postfix: postfix },
                 React.createElement(Control.Input, { id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyPress: onKeyPress, onKeyUp: onKeyUp, ...props }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_multi_select/index.js

@@ -3,11 +3,11 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import Multiple from '../../../dropdown/hoc/multiselect/index.js';
 
-const ControlMultiSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hasCloseIcon, labelAdditionalInfo }) => {
+const ControlMultiSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hintOptions = { isFixed: true }, hasCloseIcon, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Multiple, { key: name, name: name, options: options, defaultValues: defaultValues, isWithGroups: isWithGroups, isWithSearch: isWithSearch, defaultIsOpen: defaultIsOpen, defaultCloseOnClick: defaultCloseOnClick, isReadonly: isReadonly, isDisabled: isDisabled, onChange: onChange, onToggle: onToggle, hasCloseIcon: hasCloseIcon }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_radio/index.js

@@ -16,7 +16,7 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlRadio = ({ id, label, hint, name, value, defaultChecked, checked, disabled, onClick, errors, labelAdditionalInfo }) => {
+const ControlRadio = ({ id, label, hint, hintOptions = { isFixed: true }, name, value, defaultChecked, checked, disabled, onClick, errors, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { type: "radio", verticalPosition: labelAdditionalInfo ? VERTICAL_POSITION.top : undefined },
@@ -24,7 +24,7 @@ const ControlRadio = ({ id, label, hint, name, value, defaultChecked, checked, d
                 React.createElement(Label, { additionalInfo: labelAdditionalInfo, htmlFor: id },
                     label,
                     " ",
-                    hint && React.createElement(Hint, { hint: hint, spacingLeft: true })))),
+                    hint && React.createElement(Hint, { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true })))),
         React.createElement(Control.Errors, null)));
 };
 

package/build/esm/packages/aurora/src/components/controls/hoc/control_radio_group/index.js

@@ -3,11 +3,11 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import ControlRadio from '../control_radio/index.js';
 
-const ControlRadioGroup = ({ id, name, onClick, checkedValue, defaultCheckedValue, label, hint, options, errors, isRequired, labelAdditionalInfo }) => {
+const ControlRadioGroup = ({ id, name, onClick, checkedValue, defaultCheckedValue, label, hint, hintOptions = { isFixed: true }, options, errors, isRequired, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         options.map(({ value, label, hint, disabled }) => (React.createElement(ControlRadio, { key: `RadioGroup${id}-RadioElement-${value}`, label: label, id: `RadioGroup${id}-Radio-${value}`, value: value, hint: hint, disabled: disabled, name: name, defaultChecked: defaultCheckedValue ? defaultCheckedValue === value : undefined, checked: checkedValue ? checkedValue === value : undefined, onClick: onClick }))),
         React.createElement(Control.Errors, null)));
 };

package/build/esm/packages/aurora/src/components/controls/hoc/control_range/index.js

@@ -3,11 +3,11 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import Range from '../../../range/index.js';
 
-const ControlRange = ({ label, hint, isRequired, id, name, isDisabled, onChange, initialValue, step, max, min, errors, labelAdditionalInfo }) => {
+const ControlRange = ({ label, hint, hintOptions = { isFixed: true }, isRequired, id, name, isDisabled, onChange, initialValue, step, max, min, errors, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Range, { initialValue: initialValue, key: name, name: name, isDisabled: isDisabled, onChange: onChange, max: max, min: min, step: step }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_select/index.js

@@ -18,11 +18,11 @@ import Select from '../../../dropdown/hoc/select/index.js';
  *  />
  * )
  */
-const ControlSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, placeholder, additionalInfo, onScroll, innerAdditionalContent, hasCloseIcon, labelAdditionalInfo }) => {
+const ControlSelect = ({ label, isRequired, id, name, defaultValues, options, isWithGroups, isWithSearch, defaultIsOpen, defaultCloseOnClick, isReadonly, isDisabled, onChange, onToggle, errors, hint, hintOptions = { isFixed: true }, placeholder, additionalInfo, onScroll, innerAdditionalContent, hasCloseIcon, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Select, { key: name, name: name, options: options, defaultValues: defaultValues, isWithGroups: isWithGroups, isWithSearch: isWithSearch, defaultIsOpen: defaultIsOpen, defaultCloseOnClick: defaultCloseOnClick, isReadonly: isReadonly, isDisabled: isDisabled, placeholder: placeholder, onChange: onChange, onToggle: onToggle, onScroll: onScroll, innerAdditionalContent: innerAdditionalContent, hasCloseIcon: hasCloseIcon }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_tags_selector/index.js

@@ -3,11 +3,11 @@ import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
 import TagsSelector from '../../../tags_selector/index.js';
 
-const ControlTagsSelector = ({ id, name, label, isRequired, placeholder, minTagLength, withList, defaultTags, defaultListTags, onChange, onListItemClick, errors, hint, labelAdditionalInfo }) => {
+const ControlTagsSelector = ({ id, name, label, isRequired, placeholder, minTagLength, withList, defaultTags, defaultListTags, onChange, onListItemClick, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(TagsSelector, { id: id, name: name, placeholder: placeholder, minTagLength: minTagLength, withList: withList, defaultTags: defaultTags, tagsListValue: defaultListTags, onChange: onChange, onListItemClick: onListItemClick }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_textarea/index.js

@@ -17,11 +17,11 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, labelAdditionalInfo }, ref) => {
+const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true }, labelAdditionalInfo }, ref) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
-            hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
+            hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Control.Textarea, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyPress: onKeyPress, ref: ref }))),

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

@@ -1,10 +1,10 @@
-import { HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
 import { IMultiSelectProps, ISelectProps } from "../dropdown/types";
 import { IColorPickerProps } from "../color_picker/types";
 import { IFilePicker } from "../file_picker/types";
 import { IRange } from "../range/types";
-import React from 'react';
 import { TVerticalPosition } from "../../typings/general";
+import React from 'react';
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -32,10 +32,14 @@ export interface IControlProps {
 }
 interface IControlCommonProps {
     errors?: TControlErrors;
-    hint?: string | ReactElement;
+    hint?: string;
+    hintOptions?: TControlHintOptions;
     isRequired?: boolean;
     additionalInfo?: string | ReactNode;
 }
+interface TControlHintOptions {
+    isFixed: boolean;
+}
 export interface IContentProps {
     children: ReactNode;
 }

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,OAA0G,OAAO,CAAC;AAClH,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';