@rabbitio/ui-kit 1.0.0-beta.71 → 1.0.0-beta.73

package/src/{components → ui-kit/components}/atoms/Textarea/Textarea.jsx

@@ -4,27 +4,29 @@ import PropTypes from "prop-types";
 
 import s from "./textarea.module.scss";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors";
-import { Validation } from "../Validation/Validation";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { Validation } from "../Validation/Validation.jsx";
 
 /**
  * A textarea component with optional adaptive height and validation messaging.
  *
- * @param {string} name - The name of the textarea.
- * @param {function} onChange - Handler for change events.
- * @param {string} placeholder - Placeholder text for the textarea.
- * @param {string} alertText - Text for the alert message.
- * @param {string} successAlertText - Text for the success alert message.
- * @param {string} value - Value of the textarea.
- * @param {string} label - Label text for the textarea.
- * @param {string|null} id - ID for the textarea element.
- * @param {boolean} autoFocus - If the textarea should be auto-focused.
- * @param {boolean} fullHeight - If the textarea should be full height.
- * @param {boolean} smallText - If the textarea should use small text styling.
- * @param {boolean} adaptiveHeight - If the textarea should adjust its height based on content.
- * @param {boolean} disabled - If the textarea is disabled.
- * @param {boolean} errorEncountered - If there is an error related to the textarea.
- * @param {boolean} ignoreEnter - If Enter key presses should be ignored.
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.name - The name of the textarea.
+ * @param {function} props.onChange - Handler for change events.
+ * @param {string} props.placeholder - Placeholder text for the textarea.
+ * @param {string} props.alertText - Text for the alert message.
+ * @param {string} props.successAlertText - Text for the success alert message.
+ * @param {string} props.value - Value of the textarea.
+ * @param {string} props.label - Label text for the textarea.
+ * @param {string|null} props.id - ID for the textarea element.
+ * @param {boolean} props.autoFocus - If the textarea should be auto-focused.
+ * @param {boolean} props.fullHeight - If the textarea should be full height.
+ * @param {boolean} props.smallText - If the textarea should use small text styling.
+ * @param {boolean} props.adaptiveHeight - If the textarea should adjust its height based on content.
+ * @param {boolean} props.disabled - If the textarea is disabled.
+ * @param {boolean} props.errorEncountered - If there is an error related to the textarea.
+ * @param {boolean} props.ignoreEnter - If Enter key presses should be ignored.
  */
 export const Textarea = forwardRef(
     (

package/src/{components → ui-kit/components}/atoms/Textarea/textarea.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .textarea {
     display: flex;

package/src/{components → ui-kit/components}/atoms/TitleBox/TitleBox.jsx

@@ -3,33 +3,33 @@ import PropTypes from "prop-types";
 
 import s from "./title-box.module.scss";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { copyBrowserTextToClipboard } from "../../utils/textUtils.js";
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { copyBrowserTextToClipboard } from "../../../utils/textUtils.js";
 
 import { NoticeIcon } from "../NoticeIcon/NoticeIcon.jsx";
 import { LinkButton } from "../buttons/LinkButton/LinkButton.jsx";
-import { Tooltip } from "../Tooltip/Tooltip.jsx";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
 
 /**
  * A box component for displaying a title with optional controls like buttons or icons and any children inside.
  *
  * @component
- * @param {string} title - The main title text.
- * @param {string} linkText - The text for the link button, if any.
- * @param {Function} linkButtonClick - The function to execute when the link button is clicked.
- * @param {boolean} isLinkButtonDisabled - Determines if the link button is disabled.
- * @param {React.ReactNode} children - Child components to be rendered.
- * @param {boolean} linkButtonLoader - Displays a loader animation on the link button if true.
- * @param {boolean} fullWidth - If true, the title box will take full width of its container.
- * @param {string} titleNoticeText - The text for a notice icon tooltip.
- * @param {string} titleNoticeIcon - The icon for the notice tooltip.
- * @param {string} titleNoticePosition - Tooltip position for the notice icon.
- * @param {boolean} bigTitle - If true, uses a larger font size for the title.
- * @param {boolean} transparentTitle - If true, the title has a transparent background.
- * @param {string} copyButtonText - The text for the copy button.
- * @param {string} copyButtonContent - The content to be copied to the clipboard.
- * @param {string} copyButtonTooltipContent - Tooltip content displayed after copying.
+ * @param {Object} props - The props object.
+ * @param {string} props.title - The main title text.
+ * @param {string} [props.linkText] - The text for the link button, if any.
+ * @param {Function} [props.linkButtonClick] - The function to execute when the link button is clicked.
+ * @param {boolean} [props.isLinkButtonDisabled] - Determines if the link button is disabled.
+ * @param {React.ReactNode} props.children - Child components to be rendered.
+ * @param {boolean} [props.linkButtonLoader] - Displays a loader animation on the link button if true.
+ * @param {boolean} [props.fullWidth] - If true, the title box will take full width of its container.
+ * @param {string} [props.titleNoticeText] - The text for a notice icon tooltip.
+ * @param {string} [props.titleNoticeIcon] - The icon for the notice tooltip.
+ * @param {string} [props.titleNoticePosition] - Tooltip position for the notice icon.
+ * @param {boolean} [props.bigTitle] - If true, uses a larger font size for the title.
+ * @param {boolean} [props.transparentTitle] - If true, the title has a transparent background.
+ * @param {string} [props.copyButtonText] - The text for the copy button.
+ * @param {string} [props.copyButtonContent] - The content to be copied to the clipboard.
+ * @param {string} [props.copyButtonTooltipContent] - Tooltip content displayed after copying.
  */
 export const TitleBox = ({
     title = "",

package/src/{components → ui-kit/components}/atoms/TitleBox/title-box.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .title-box {
     &.full-width {

package/src/{components → ui-kit/components}/atoms/Tooltip/Tooltip.jsx

@@ -5,19 +5,28 @@ import PropTypes from "prop-types";
 import s from "./tooltip.module.scss";
 import DarkRectangle from "../../../assets/wrappedImages/darkRectangle.jsx";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+
+export const TOOLTIP_POSITIONS = {
+    TOP: "top",
+    LEFT: "left",
+    RIGHT: "right",
+    BOTTOM: "bottom",
+    TOP_LEFT: "top-left",
+    TOP_RIGHT: "top-right",
+};
 
 /**
  * Tooltip component for displaying contextual information.
  *
  * @component
- * @param {React.ReactNode} children - The content to display inside the tooltip.
- * @param {boolean} showTooltip - Controls whether the tooltip is visible.
- * @param {Function} handleClick - Handler for click events.
- * @param {boolean} wide - If true, applies a wider style to the tooltip.
- * @param {string} position - One of the predefined positions for the tooltip.
- * @param {boolean} ignorePointerEvents - If true, the tooltip will not react to pointer events.
+ * @param {Object} props - The props object.
+ * @param {React.ReactNode} props.children - The content to display inside the tooltip.
+ * @param {boolean} props.showTooltip - Controls whether the tooltip is visible.
+ * @param {Function} props.handleClick - Handler for click events.
+ * @param {boolean} [props.wide] - If true, applies a wider style to the tooltip.
+ * @param {string} props.position - One of the predefined positions for the tooltip.
+ * @param {boolean} [props.ignorePointerEvents] - If true, the tooltip will not react to pointer events.
  */
 export const Tooltip = ({
     children,

package/src/{components → ui-kit/components}/atoms/Tooltip/tooltip.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .tooltip {
     @include typograpy("p");

package/src/{components → ui-kit/components}/atoms/TwoLinesOfText/LinesOfText.jsx

@@ -7,15 +7,17 @@ import s from "./lines-of-text.module.scss";
  * Renders up to three lines of text with configurable options for horizontal layout, text wrapping, and breaking.
  * Optionally, displays a default text content centered vertically if provided.
  *
- * @param {string} firstLineText - Text for the first line.
- * @param {string} secondLineText - Text for the second line.
- * @param {string} thirdLineText - Text for the third line.
- * @param {boolean} isHorizontal - If true, displays the text horizontally.
- * @param {string} defaultTextContent - Default text content to display, centered vertically.
- * @param {boolean} isFirstLineTextReducible - If true, the first line text can be reduced.
- * @param {string} firstLineNotReducibleSuffix - Suffix to append to the first line text if not reducible.
- * @param {boolean} wrapFirstLine - If true, allows the first line text to wrap.
- * @param {boolean} breakFirstLine - If true, allows the first line text to break onto the next line.
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.firstLineText - Text for the first line.
+ * @param {string} props.secondLineText - Text for the second line.
+ * @param {string} props.thirdLineText - Text for the third line.
+ * @param {boolean} props.isHorizontal - If true, displays the text horizontally.
+ * @param {string} [props.defaultTextContent] - Default text content to display, centered vertically.
+ * @param {boolean} [props.isFirstLineTextReducible] - If true, the first line text can be reduced.
+ * @param {string} [props.firstLineNotReducibleSuffix] - Suffix to append to the first line text if not reducible.
+ * @param {boolean} [props.wrapFirstLine] - If true, allows the first line text to wrap.
+ * @param {boolean} [props.breakFirstLine] - If true, allows the first line text to break onto the next line.
  */
 export const LinesOfText = ({
     firstLineText = "",

package/src/{components → ui-kit/components}/atoms/TwoLinesOfText/lines-of-text.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .first-line-text {
     display: flex;

package/src/{components → ui-kit/components}/atoms/Validation/Validation.jsx

@@ -2,8 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import s from "./validation.module.scss";
-import SuccessfulValidationIcon from "../../../assets/wrappedImages/successfulValidationIcon";
-import FailedValidationIcon from "../../../assets/wrappedImages/failedValidationIcon";
+import SuccessfulValidationIcon from "../../../assets/wrappedImages/successfulValidationIcon.jsx";
+import FailedValidationIcon from "../../../assets/wrappedImages/failedValidationIcon.jsx";
 
 /**
  * Simple validation message with an icon.

package/src/{components → ui-kit/components}/atoms/Validation/validation.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .validation {
     display: flex;

package/src/{components → ui-kit/components}/atoms/buttons/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .button {
     @extend %text-very-bold;

package/src/{components → ui-kit/components}/atoms/buttons/Close/Close.jsx

@@ -3,8 +3,13 @@ import PropTypes from "prop-types";
 
 import s from "./close.module.scss";
 
-import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
-import { CLOSE_COLORS } from "../../../../constants/atoms/Close/close";
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
+
+export const CLOSE_COLORS = {
+    WHITE: "white",
+    DARK: "dark",
+    DARK_INVERT: "dark-invert",
+};
 
 /**
  * A component for rendering a close icon that handles errors on click.

package/src/{components → ui-kit/components}/atoms/buttons/Close/close.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .close {
     width: 24px;

package/src/{components → ui-kit/components}/atoms/buttons/LinkButton/LinkButton.jsx

@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
-import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
-import { ICON_ROTATE_OPTIONS } from "../../../../constants/atoms/LinkButton/linkButton";
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
 
 import s from "./link-button.module.scss";
-import { LoadingDots } from "../../LoadingDots/LoadingDots";
+import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
+
+export const ICON_ROTATE_OPTIONS = {
+    rotate0: "0deg",
+    rotate90: "90deg",
+    rotate180: "180deg",
+    rotate270: "270deg",
+};
 
 /**
  * LinkButton renders a clickable button which can optionally display an icon and loading animation.

package/src/{components → ui-kit/components}/atoms/buttons/LinkButton/link-button.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .link-button {
     display: flex;

package/src/{components → ui-kit/components}/atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 import s from "./radio-button-with-text.module.scss";
 
-import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
 
 import { Tooltip } from "../../Tooltip/Tooltip.jsx";
 import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";

package/src/{components → ui-kit/components}/atoms/buttons/RadioButtonWithText/radio-button-with-text.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .radio-button-with-text-container {
     display: flex;

package/src/{components → ui-kit/components}/molecules/AmountInput/AmountInput.jsx

@@ -4,15 +4,16 @@ import { BigNumber } from "bignumber.js";
 import s from "./amount-input.module.scss";
 import WalletIcon from "../../../assets/wrappedImages/walletIcon.jsx";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { InputValuesProviders } from "../../utils/inputValueProviders.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { InputValuesProviders } from "../../../utils/inputValueProviders.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
-import { AmountUtils } from "../../../common/amountUtils.js";
+import { AmountUtils } from "../../../../common-apis/amountUtils.js";
 import { AssetSelection } from "../../atoms/AssetSelection/AssetSelection.jsx";
 import { Validation } from "../../atoms/Validation/Validation.jsx";
 
+// TODO: [dev] add JSDoc
 export const AmountInput = React.forwardRef(
     (
         {

package/src/{components → ui-kit/components}/molecules/AmountInput/amount-input.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .amount-input-container {
     padding: Padding("5");

package/src/{components → ui-kit/components}/molecules/CoinPicker/CoinPicker.jsx

@@ -4,14 +4,14 @@ import PropTypes from "prop-types";
 import s from "./coin-picker.module.scss";
 import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
 
-import { useReferredState } from "../../hooks/useReferredState.js";
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { RadioButtonWithText } from "../../atoms/buttons/RadioButtonWithText/RadioButtonWithText.jsx";
 import { Input } from "../../atoms/Input/Input.jsx";
 import { InformationMessage } from "../../atoms/InformationMessage/InformationMessage.jsx";
-import { FALLBACK_ASSET_ICON_URL } from "../../../constants/globalConstants.jsx";
+import { FALLBACK_ASSET_ICON_URL } from "../../../../common-apis/globalConstants.jsx";
 import { AssetIcon } from "../../atoms/AssetIcon/AssetIcon.jsx";
 import { Button } from "../../atoms/buttons/Button/Button.jsx";
 import { LoadingDots } from "../../atoms/LoadingDots/LoadingDots.jsx";
@@ -44,27 +44,29 @@ const defaultTexts = {
  *   - you MUST NOT pass setCoinPickerValue (it will be ignored)
  *   - if you don't pass loadCoinsAndContent function, you MUST pass allCoins
  *
- * @param [mode] {string} one-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES
- * @param [allCoins] {Coin[]} all coins despite on their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function
- * @param [initiallyEnabledCoinsList] {Coin[]} - pass this when using CHECKBOX mode
- * @param [handleClick] {function} handler function for the event when an asset is clicked
- * @param [triggerToReloadData] {number|undefined} trigger to reload the component when some related data changes
- * @param [search=false] {boolean} whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height
- * @param [searchAdaptive=true] {boolean} show search bar only after six assets in the list
- * @param [setCoinPickerValue] {function} is called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode
- * @param [setCoinPickerListChanged] {function} is called with the only parameter (flag signalling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode
- * @param [loadCoinsAndContent] {function} optional, you can provide it if you need custom logic for coins list composing or custom subtitles
- *                              {
- *                                  coins: Coin[],
- *                                  content: { coin: Coin, subtitle: string }[],
- *                                  isCoinsDataReloadable: boolean
- *                              }
- * @param [showRequestMissingCoinsInfoMessage=true] {boolean} whether to show message about advising missing coins
- * @param [supportUrl] {string} needed when showRequestMissingCoinsInfoMessage=true
- * @param coinToIconPaths {function}
- * @param [partialLoadingEnabled=true] {boolean} enables only partialLoadingIncrement items are shown by default and user can show more clicking the load-more button
- * @param [partialLoadingIncrement=100]
- * @param [texts] {object} texts translated to desired locale, default texts use english locale
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} [props.mode] - One-time button selection or multi-selection via toggles, available options are located in COIN_PICKER_MODES.
+ * @param {Coin[]} [props.allCoins] - All coins despite their enabled/disabled status. Pass this list if you use CHECKBOX mode or you don't pass the loadCoinsAndContent function.
+ * @param {Coin[]} [props.initiallyEnabledCoinsList] - Pass this when using CHECKBOX mode.
+ * @param {function} [props.handleClick] - Handler function for the event when an asset is clicked.
+ * @param {number|undefined} [props.triggerToReloadData] - Trigger to reload the component when some related data changes.
+ * @param {boolean} [props.search=false] - Whether to show the search bar above the assets list, when enabled overrides searchAdaptive and locks the list height.
+ * @param {boolean} [props.searchAdaptive=true] - Show search bar only after six assets in the list.
+ * @param {function} [props.setCoinPickerValue] - Called with the only parameter (final enabled tickers list) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.setCoinPickerListChanged] - Called with the only parameter (flag signaling that the list of enabled coins was changed - true, or was not changed - false) when closing/confirming dialog in CHECKBOX mode.
+ * @param {function} [props.loadCoinsAndContent] - Optional, you can provide it if you need custom logic for coins list composing or custom subtitles. Expected return format:
+ *                               {
+ *                                   coins: Coin[],
+ *                                   content: { coin: Coin, subtitle: string }[],
+ *                                   isCoinsDataReloadable: boolean
+ *                               }
+ * @param {boolean} [props.showRequestMissingCoinsInfoMessage=true] - Whether to show message about advising missing coins.
+ * @param {string} [props.supportUrl] - Needed when showRequestMissingCoinsInfoMessage=true.
+ * @param {function} props.coinToIconPaths - Function to map coins to their icon paths.
+ * @param {boolean} [props.partialLoadingEnabled=true] - Enables only partialLoadingIncrement items to be shown by default, with the user able to show more by clicking the load-more button.
+ * @param {number} [props.partialLoadingIncrement=100] - The number of items to incrementally load when partial loading is enabled.
+ * @param {object} [props.texts] - Texts translated to the desired locale; default texts use English locale.
  */
 export const CoinPicker = ({
     mode = COIN_PICKER_MODES.BUTTON,

package/src/{components → ui-kit/components}/molecules/CoinPicker/coin-picker.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .coin-picker {
     display: flex;

package/src/{components → ui-kit/components}/molecules/LineWithIconLink/line-with-icon-link.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .line-with-icon-link {
     display: flex;

package/src/{components → ui-kit/components}/molecules/TitledLineWithIconLink/TitledLineWithIconLink.jsx

@@ -1,16 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { TitleBox } from "../../atoms/TitleBox/TitleBox";
-import { LineWithIconLink } from "../LineWithIconLink/LineWithIconLink";
+import { TitleBox } from "../../atoms/TitleBox/TitleBox.jsx";
+import { LineWithIconLink } from "../LineWithIconLink/LineWithIconLink.jsx";
 
 /**
  * TitledLineWithIconLink component renders a title box with a text line that includes an icon with a clickable link.
  *
- * @param {string} title - The title to display in the TitleBox.
- * @param {string} text - The text to display in the LineWithIconLink.
- * @param {string} icon - The icon to display next to the text in the LineWithIconLink.
- * @param {string} url - The URL for the LineWithIconLink.
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.title - The title to display in the TitleBox.
+ * @param {string} props.text - The text to display in the LineWithIconLink.
+ * @param {string} props.icon - The icon to display next to the text in the LineWithIconLink.
+ * @param {string} props.url - The URL for the LineWithIconLink.
  */
 export const TitledLineWithIconLink = ({ title, text, icon, url }) => {
     return (

package/src/{components → ui-kit/components}/organisms/CoinPickerDialogStep/CoinPickerDialogStep.jsx

@@ -2,8 +2,10 @@ import React from "react";
 
 import { CoinPicker } from "../../molecules/CoinPicker/CoinPicker.jsx";
 import { DialogStep } from "../Dialog/DialogStep/DialogStep.jsx";
-import { DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog.js";
 
+import { DIALOG_SIZES } from "../Dialog/Dialog.jsx";
+
+// TODO: [dev] add JSDoc
 export const CoinPickerDialogStep = ({
     stepName,
     controls,

package/src/{components → ui-kit/components}/organisms/Dialog/Dialog.jsx

@@ -3,17 +3,46 @@ import PropTypes from "prop-types";
 import { CSSTransition } from "react-transition-group";
 import AnimateHeight from "react-animate-height";
 import ResizeObserver from "resize-observer-polyfill";
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import animateScrollTo from "animated-scroll-to";
 
-import { useReferredState } from "../../hooks/useReferredState";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
-import { DIALOG_TRANSITION_STEP_DURATION, DIALOG_SIZES } from "../../../constants/organisms/dialog/dialog";
+import { useReferredState } from "../../../hooks/useReferredState.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import s from "./dialog.module.scss";
-import { Close } from "../../atoms/buttons/Close/Close";
-import { DialogButtons } from "./DialogButtons/DialogButtons";
+import { Close } from "../../atoms/buttons/Close/Close.jsx";
+import { DialogButtons } from "./DialogButtons/DialogButtons.jsx";
+
+export const DIALOG_SIZES = {
+    small: {
+        width: "550px",
+        height: "650px",
+    },
+    regular: {
+        width: "600px",
+        height: "650px",
+    },
+    large: {
+        width: "700px",
+        height: "650px",
+    },
+    largePlus: {
+        width: "750px",
+        height: "650px",
+    },
+    largePlusPlus: {
+        width: "800px",
+        height: "650px",
+    },
+    extraLarge: {
+        width: "1000px",
+        height: "650px",
+    },
+};
+
+export const DIALOG_TRANSITION_STEP_DURATION = 200;
 
+// If changed - update the prop configuration in the stories and related components.
 /**
  * Flexible modal window component with support for multiple steps. Can be used as an inline component and inserted in regular layouts. Only <DialogStep> components can be passed as children.
  *

package/src/{components → ui-kit/components}/organisms/Dialog/DialogButtons/DialogButtons.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+import { useCallHandlingErrors } from "../../../../hooks/useCallHandlingErrors.js";
 
 import s from "./dialog-buttons.module.scss";
-import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton";
-import { Button } from "../../../atoms/buttons/Button/Button";
+import { LinkButton } from "../../../atoms/buttons/LinkButton/LinkButton.jsx";
+import { Button } from "../../../atoms/buttons/Button/Button.jsx";
 
 /**
  * Renders a dialog component with configurable primary and secondary buttons.

package/src/{components → ui-kit/components}/organisms/Dialog/DialogButtons/dialog-buttons.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/index";
+@import "../../../../assets/styles/index";
 
 .dialog-buttons {
     display: flex;