@rabbitio/ui-kit 1.0.0-beta.70 → 1.0.0-beta.72

package/src/swaps-lib/test/utils/swapUtils/safeHandleRequestsLimitExceeding.test.js

@@ -2,8 +2,8 @@ import sinon from "sinon";
 import should from "should";
 
 import { beforeEach, afterEach, describe, it } from "vitest";
-import { Logger } from "../../../../common/utils/logging/logger.js";
-import { EmailsApi } from "../../../../common/utils/emailAPI.js";
+import { Logger } from "../../../../common-apis/utils/logging/logger.js";
+import { EmailsApi } from "../../../../common-apis/utils/emailAPI.js";
 import { SwapUtils } from "../../../utils/swapUtils.js";
 
 describe("SwapUtils", function () {

package/src/swaps-lib/utils/swapUtils.js

@@ -1,13 +1,13 @@
 import { BigNumber } from "bignumber.js";
 
-import { AmountUtils } from "../../common/amountUtils.js";
-import { FiatCurrenciesService } from "../../common/fiatCurrenciesService.js";
-import { improveAndRethrow } from "../../common/errorUtils.js";
+import { AmountUtils } from "../../common-apis/amountUtils.js";
+import { FiatCurrenciesService } from "../../common-apis/fiatCurrenciesService.js";
+import { improveAndRethrow } from "../../common-apis/errorUtils.js";
 import { ExistingSwapWithFiatData } from "../models/existingSwapWithFiatData.js";
-import { EmailsApi } from "../../common/utils/emailAPI.js";
+import { EmailsApi } from "../../common-apis/utils/emailAPI.js";
 import { SwapProvider } from "../external-apis/swapProvider.js";
-import { Logger } from "../../common/utils/logging/logger.js";
-import { safeStringify } from "../../common/utils/safeStringify.js";
+import { Logger } from "../../common-apis/utils/logging/logger.js";
+import { safeStringify } from "../../common-apis/utils/safeStringify.js";
 
 export class SwapUtils {
     /**

package/{styles → src/ui-kit/assets/styles}/index.scss

@@ -1,7 +1,7 @@
 @import "variables";
 @import "global-classes";
 @import "placeholder";
-@import "_mixins";
+@import "mixins";
 
 // TODO: [feature, high] Uncomment fonts after adding a new packaging tool. task_id=7375fa84ccab4d66b9e3a177a41f7e26
 @font-face {

package/src/{assets → ui-kit/assets}/wrappedImages/arrowWhite.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-// Originally: arrow-tosca.svg
+// Originally: arrow-white.svg
 export default () => (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path

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

@@ -7,10 +7,11 @@ import s from "./asset-icon.module.scss";
  * AssetIcon component to display an icon for an asset.
  *
  * @component
- * @param {string} assetIconSrc - The source URL for the asset icon.
- * @param {string} [assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
- * @param {string} [fallbackSrc=null] - The fallback source URL in case the main source fails to load.
- * @param {boolean} [small=false] - Whether to display a smaller version of the icon.
+ * @param {Object} props - The props object.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.assetIconProtocolSrc=null] - The source URL for the asset icon that is base for this asset (e.g. ETH for USDT ERC20).
+ * @param {string} [props.fallbackSrc=null] - The fallback source URL in case the main source fails to load.
+ * @param {boolean} [props.small=false] - Whether to display a smaller version of the icon.
  */
 export const AssetIcon = ({ assetIconSrc, assetIconProtocolSrc = null, fallbackSrc = null, small = false }) => {
     const handleFailedLoad = e => {

package/src/{components → ui-kit/components}/atoms/AssetIcon/asset-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .asset-icon {
     width: 34px;

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

@@ -6,18 +6,19 @@ import ArrowIcon from "../../../assets/wrappedImages/arrowIcon.jsx";
 
 import { AssetIcon } from "../AssetIcon/AssetIcon.jsx";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
 
 /**
  * Component-button for triggering selecting an asset.
  *
  * @component
- * @param {Function} handleClick - The function to call when the component is clicked
- * @param {boolean} disabled - If true, disables click functionality
- * @param {string} assetIconSrc - The source URL for the asset icon
- * @param {string} [protocolName] - The name of the protocol, if any
- * @param {string} [assetIconProtocolSrc] - The source URL for the asset protocol icon
- * @param {string} [fallbackSrc] - The fallback source URL if the main asset icon fails to load
+ * @param {Object} props - The props object.
+ * @param {Function} props.handleClick - The function to call when the component is clicked.
+ * @param {boolean} props.disabled - If true, disables click functionality.
+ * @param {string} props.assetIconSrc - The source URL for the asset icon.
+ * @param {string} [props.protocolName] - The name of the protocol, if any.
+ * @param {string} [props.assetIconProtocolSrc] - The source URL for the asset protocol icon.
+ * @param {string} [props.fallbackSrc] - The fallback source URL if the main asset icon fails to load.
  */
 export const AssetSelection = ({
     handleClick = () => {},

package/src/{components → ui-kit/components}/atoms/AssetSelection/asset-selection.module.scss

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

package/src/{components → ui-kit/components}/atoms/BackgroundTitle/background-title.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .background-title {
     pointer-events: none;

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

@@ -9,11 +9,12 @@ import InfoIcon from "../../../assets/wrappedImages/infoIcon.jsx";
  * InformationMessage component to display an informational message with an optional icon.
  *
  * @component
- * @param {string} [text=""] - The text content of the message.
- * @param {string|boolean} [icon=false] - The URL or boolean indicating whether to display an icon.
- * @param {boolean} [bigImage=false] - Whether to use a larger image for the icon.
- * @param {boolean} [whiteText=false] - Whether the text should be displayed in white color.
- * @param {ReactNode} [children=null] - Additional child components.
+ * @param {Object} props - The props object.
+ * @param {string} [props.text=""] - The text content of the message.
+ * @param {string|boolean} [props.icon=false] - The URL or boolean indicating whether to display an icon.
+ * @param {boolean} [props.bigImage=false] - Whether to use a larger image for the icon.
+ * @param {boolean} [props.whiteText=false] - Whether the text should be displayed in white color.
+ * @param {ReactNode} [props.children=null] - Additional child components.
  */
 export const InformationMessage = ({
     text = "",

package/src/{components → ui-kit/components}/atoms/InformationMessage/information-message.module.scss

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

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

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
 
 import s from "./input.module.scss";
 
-import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils.js";
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
 
 import { Close } from "../buttons/Close/Close.jsx";
 import { Validation } from "../Validation/Validation.jsx";
@@ -13,26 +13,27 @@ import { Validation } from "../Validation/Validation.jsx";
  * Input component for forms.
  *
  * @component
- * @param {string} [type="text"] - The type of input (e.g., "text", "number", "email").
- * @param {string} [name=""] - The name of the input field.
- * @param {function} [onChange=() => {}] - Function called when the input value changes.
- * @param {string} [alertText=""] - Text for alert messages.
- * @param {string} [placeholder=""] - Placeholder text for the input.
- * @param {string} [className=""] - Additional CSS classes for styling.
- * @param {string} [defaultValue=""] - Default value for the input.
- * @param {boolean} [isBigHeight=false] - Whether the input has a larger height.
- * @param {boolean} [isSmallHeight=false] - Whether the input has a smaller height.
- * @param {string} [label=""] - Label text for the input.
- * @param {string} [id=null] - Unique ID for the input.
- * @param {string} [value=""] - Value of the input.
- * @param {string} [successAlertText=""] - Text for success alert messages.
- * @param {boolean} [disabled=false] - Whether the input is disabled.
- * @param {function} [onKeyUp=() => {}] - Function called on key up event.
- * @param {boolean} [autoFocus=false] - Whether the input should be autofocused.
- * @param {boolean} [fillWidth=false] - Whether the input should fill the width of its container.
- * @param {boolean} [clearButton=false] - Whether to show a clear button for the input.
- * @param {boolean} [imageBackground=false] - Whether the input has an image background.
- * @param {boolean} [errorEncountered=false] - Whether an error has been encountered for the input.
+ * @param {Object} props - The props object.
+ * @param {string} [props.type="text"] - The type of input (e.g., "text", "number", "email").
+ * @param {string} [props.name=""] - The name of the input field.
+ * @param {function} [props.onChange=() => {}] - Function called when the input value changes.
+ * @param {string} [props.alertText=""] - Text for alert messages.
+ * @param {string} [props.placeholder=""] - Placeholder text for the input.
+ * @param {string} [props.className=""] - Additional CSS classes for styling.
+ * @param {string} [props.defaultValue=""] - Default value for the input.
+ * @param {boolean} [props.isBigHeight=false] - Whether the input has a larger height.
+ * @param {boolean} [props.isSmallHeight=false] - Whether the input has a smaller height.
+ * @param {string} [props.label=""] - Label text for the input.
+ * @param {string} [props.id=null] - Unique ID for the input.
+ * @param {string} [props.value=""] - Value of the input.
+ * @param {string} [props.successAlertText=""] - Text for success alert messages.
+ * @param {boolean} [props.disabled=false] - Whether the input is disabled.
+ * @param {function} [props.onKeyUp=() => {}] - Function called on key up event.
+ * @param {boolean} [props.autoFocus=false] - Whether the input should be autofocused.
+ * @param {boolean} [props.fillWidth=false] - Whether the input should fill the width of its container.
+ * @param {boolean} [props.clearButton=false] - Whether to show a clear button for the input.
+ * @param {boolean} [props.imageBackground=false] - Whether the input has an image background.
+ * @param {boolean} [props.errorEncountered=false] - Whether an error has been encountered for the input.
  */
 export const Input = forwardRef(
     (

package/src/{components → ui-kit/components}/atoms/Input/input.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .input {
     position: relative;

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

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

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

@@ -3,19 +3,18 @@ import PropTypes from "prop-types";
 
 import s from "./notice-icon.module.scss";
 
-import { handleClickOutside } from "../../utils/uiUtils.js";
-import { Tooltip } from "../Tooltip/Tooltip.jsx";
+import { handleClickOutside } from "../../../utils/uiUtils.js";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
 import NoticeQuestionIcon from "../../../assets/wrappedImages/noticeQuestionIcon.jsx";
 
-import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
-
 /**
  * A component that displays a notice icon with optional tooltip.
  *
  * @component
- * @param {string} noticeText - The text to display inside the tooltip.
- * @param {string} [titleNoticeIcon] - The source URL for the icon displayed on the notice.
- * @param {string} tooltipPosition - Position for the tooltip relative to the icon.
+ * @param {Object} props - The props object.
+ * @param {string} props.noticeText - The text to display inside the tooltip.
+ * @param {string} [props.titleNoticeIcon] - The source URL for the icon displayed on the notice.
+ * @param {string} props.tooltipPosition - Position for the tooltip relative to the icon.
  */
 export const NoticeIcon = ({ noticeText, titleNoticeIcon = "", tooltipPosition = TOOLTIP_POSITIONS.TOP }) => {
     const [showTooltip, setShowTooltip] = useState(false);

package/src/{components → ui-kit/components}/atoms/NoticeIcon/notice-icon.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .notice-icon {
     position: relative;

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

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { logErrorOrOutputToConsole } from "../../../common/errorUtils";
-import { generateQrAndShowInCanvas } from "../../../common/adapters/qrUtils";
+import { logErrorOrOutputToConsole } from "../../../../common-apis/errorUtils.js";
+import { generateQrAndShowInCanvas } from "../../../../common-apis/adapters/qrUtils.js";
 
 import s from "./qr-code.module.scss";
 
+// TODO: [dev] add JSDoc
 export const QrCode = ({ address, fill = false }) => {
     const canvasRef = useRef();
 

package/src/{components → ui-kit/components}/atoms/QrCode/qr-code.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .qr-code {
     width: 180px !important;

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

@@ -2,6 +2,7 @@ import React from "react";
 
 import s from "./rate-selector.module.scss";
 
+// TODO: [dev] add JSDoc
 export const RateSelector = ({
     isFixed = false,
     setIsFixed = () => {},

package/src/{components → ui-kit/components}/atoms/RateSelector/rate-selector.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../assets/styles/index";
 
 .rate-selector {
     background-color: SolidColor("lightsmoke");

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

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 
+// TODO: [dev] add JSDoc
 export const SupportChat = ({ url, websiteToken, welcomeMessage = "", locale = "en" }) => {
     useEffect(() => {
         window.chatwootSettings = {

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