hrm_ui_lib 3.4.2 → 4.0.0

package/components/Modal/ModalConfirmation.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { TModalConfirmationPropTypes } from './types';
-export declare const ModalConfirmation: ({ isOpen, onClose, onSubmit, title, className, size, buttonProps, dataIdPrefix, closeOnOutsideClick, iconProps, subtitle }: TModalConfirmationPropTypes) => ReactElement | null;
+export declare const ModalConfirmation: ({ isOpen, onClose, onSubmit, title, className, size, buttonProps, dataTestIdPrefix, closeOnOutsideClick, iconProps, subtitle }: TModalConfirmationPropTypes) => ReactElement | null;

package/components/Modal/ModalConfirmation.js

@@ -7,7 +7,7 @@ import { Button } from '../Button';
 import { Text } from '../Text';
 import { useEscapeKey } from '../../hooks/useEscapeKey';
 import { createPortal } from 'react-dom';
-export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className = '', size = 'small', buttonProps, dataIdPrefix, closeOnOutsideClick = true, iconProps, subtitle }) => {
+export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className = '', size = 'small', buttonProps, dataTestIdPrefix, closeOnOutsideClick = true, iconProps, subtitle }) => {
     const { animationState, shouldRender } = useAnimation({
         isOpen,
         enterDuration: 400,
@@ -20,5 +20,5 @@ export const ModalConfirmation = ({ isOpen, onClose, onSubmit, title, className
     if (!shouldRender) {
         return null;
     }
-    return createPortal(_jsx("div", { className: classnames('modal modal--confirmation', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classnames('modal__container', 'text-center', `modal__container--${animationState}`), ref: setContainerRef, children: _jsxs("div", { className: 'modal__content', children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx("div", { className: "modal__icon mb-32", children: _jsx(iconProps.Component, { size: 'xlarge' }) })) : null, title ? (_jsx(Text, { weight: "bolder", lineHeight: "large", size: "large", dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title })) : null, subtitle ? _jsx(Text, { className: 'mt-12', children: subtitle }) : null, buttonProps ? (_jsxs("div", { className: "modal__footer mt-32", children: [_jsx(Button, Object.assign({ type: "secondary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {}))), _jsx(Button, Object.assign({ type: "danger", className: 'modal__footer__btn', onClick: onSubmit, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }) }) }), document.body);
+    return createPortal(_jsx("div", { className: classnames('modal modal--confirmation', `modal--${size}`, `modal--${animationState}`, className), children: _jsx("div", { className: classnames('modal__container', 'text-center', `modal__container--${animationState}`), ref: setContainerRef, children: _jsxs("div", { className: 'modal__content', children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx("div", { className: "modal__icon mb-32", children: _jsx(iconProps.Component, { size: 'xlarge' }) })) : null, title ? (_jsx(Text, { weight: "bolder", lineHeight: "large", size: "large", dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-title` : '', children: title })) : null, subtitle ? _jsx(Text, { className: 'mt-12', children: subtitle }) : null, buttonProps ? (_jsxs("div", { className: "modal__footer mt-32", children: [_jsx(Button, Object.assign({ type: "secondary", className: "modal__footer__btn mr-16", onClick: onClose, dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {}))), _jsx(Button, Object.assign({ type: "danger", className: 'modal__footer__btn', onClick: onSubmit, dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }) }) }), document.body);
 };

package/components/Modal/ModalContent.d.ts

@@ -4,7 +4,7 @@ import { TModalHeaderIconColor, TTitleSize } from './types';
 type TProps = {
     title?: string;
     subtitle?: string;
-    dataIdPrefix?: string;
+    dataTestIdPrefix?: string;
     closeIcon?: boolean;
     onClose: () => void;
     children?: ReactNode;
@@ -21,5 +21,5 @@ type TProps = {
     headerIconColor?: TModalHeaderIconColor;
     headerStatus?: React.ReactNode;
 };
-export declare const ModalContent: ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor, headerStatus, titleSize }: TProps) => ReactElement;
+export declare const ModalContent: ({ title, subtitle, dataTestIdPrefix, closeIcon, onClose, children, withFooter, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor, headerStatus, titleSize }: TProps) => ReactElement;
 export {};

package/components/Modal/ModalContent.js

@@ -6,6 +6,6 @@ import { Button } from '../Button';
 import { Text } from '../Text';
 import { Tooltip } from '../Tooltip';
 import { noop } from '../../utils/helpers';
-export const ModalContent = ({ title, subtitle, dataIdPrefix, closeIcon, onClose, children, withFooter = true, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor = 'brand', headerStatus, titleSize = 'large' }) => {
-    return (_jsxs(_Fragment, { children: [title ? (_jsxs("div", { className: "modal__header", children: [_jsxs("div", { className: "modal__header-content", children: [headerIcon ? (_jsx("div", { className: classNames('modal__header-icon', `modal__header-icon--${headerIconColor}`), children: headerIcon })) : null, _jsxs("div", { className: "modal__header-text", children: [_jsxs("div", { className: "modal__header-title-row", children: [_jsx(Text, { className: "modal__header-title", lineHeight: "large", size: titleSize, weight: 'bolder', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: title }), headerStatus ? _jsx("div", { className: "modal__header-status", children: headerStatus }) : null] }), subtitle ? (_jsx(Text, { className: 'mt-12', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-title` : '', children: subtitle })) : null] })] }), closeIcon ? (_jsx(Button, { className: 'modal__close ml-16', dataId: dataIdPrefix ? `${dataIdPrefix}-modal-close-button` : '', iconProps: { Component: IconDismiss }, onClick: onClose, type: "tertiary", size: titleSize === 'medium' ? 'small' : 'large' })) : null] })) : null, _jsx("div", { className: "modal__content scrollbar scrollbar--vertical", children: children }), withFooter && buttonProps ? (_jsxs("div", { className: "modal__footer", children: [buttonProps.cancel && (_jsx(Button, Object.assign({ type: "tertiary", className: "modal__footer__btn mr-16", onClick: onClose, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {})))), confirmBtnTooltipText ? (_jsx(Tooltip, { text: confirmBtnTooltipText, id: 'confirm-btn-tooltip', position: Positions.TOP_CENTER })) : null, _jsx(Button, Object.assign({ id: 'confirm-btn-tooltip', className: 'modal__footer__btn', type: "primary", onClick: onSubmit ? onSubmit : noop, dataId: dataIdPrefix ? `${dataIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }));
+export const ModalContent = ({ title, subtitle, dataTestIdPrefix, closeIcon, onClose, children, withFooter = true, confirmBtnTooltipText, buttonProps, onSubmit, headerIcon, headerIconColor = 'brand', headerStatus, titleSize = 'large' }) => {
+    return (_jsxs(_Fragment, { children: [title ? (_jsxs("div", { className: "modal__header", children: [_jsxs("div", { className: "modal__header-content", children: [headerIcon ? (_jsx("div", { className: classNames('modal__header-icon', `modal__header-icon--${headerIconColor}`), children: headerIcon })) : null, _jsxs("div", { className: "modal__header-text", children: [_jsxs("div", { className: "modal__header-title-row", children: [_jsx(Text, { className: "modal__header-title", lineHeight: "large", size: titleSize, weight: 'bolder', dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-title` : '', children: title }), headerStatus ? _jsx("div", { className: "modal__header-status", children: headerStatus }) : null] }), subtitle ? (_jsx(Text, { className: 'mt-12', dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-title` : '', children: subtitle })) : null] })] }), closeIcon ? (_jsx(Button, { className: 'modal__close ml-16', dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-close-button` : '', iconProps: { Component: IconDismiss }, onClick: onClose, type: "tertiary", size: titleSize === 'medium' ? 'small' : 'large' })) : null] })) : null, _jsx("div", { className: "modal__content scrollbar scrollbar--vertical", children: children }), withFooter && buttonProps ? (_jsxs("div", { className: "modal__footer", children: [buttonProps.cancel && (_jsx(Button, Object.assign({ type: "tertiary", className: "modal__footer__btn mr-16", onClick: onClose, dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-cancel-button` : '' }, (buttonProps.cancel || {})))), confirmBtnTooltipText ? (_jsx(Tooltip, { text: confirmBtnTooltipText, id: 'confirm-btn-tooltip', position: Positions.TOP_CENTER })) : null, _jsx(Button, Object.assign({ id: 'confirm-btn-tooltip', className: 'modal__footer__btn', type: "primary", onClick: onSubmit ? onSubmit : noop, dataTestId: dataTestIdPrefix ? `${dataTestIdPrefix}-modal-confirm-button` : '' }, buttonProps.confirm))] })) : null] }));
 };

package/components/Modal/types.d.ts

@@ -3,7 +3,7 @@ import { TButtonPropTypes } from '../Button/types';
 export type TTitleSize = 'medium' | 'large';
 export type TModalHeaderIconColor = 'brand' | 'green' | 'blue' | 'red' | 'purple' | 'yellow';
 export interface TModalPropTypes {
-    dataIdPrefix?: string;
+    dataTestIdPrefix?: string;
     closeOnOutsideClick?: boolean;
     isOpen: boolean;
     onClose: () => void;
@@ -26,7 +26,7 @@ export interface TModalPropTypes {
     headerStatus?: ReactNode;
 }
 export interface TModalConfirmationPropTypes {
-    dataIdPrefix?: string;
+    dataTestIdPrefix?: string;
     closeOnOutsideClick?: boolean;
     isOpen: boolean;
     onClose: () => void;

package/components/More/More.js

@@ -6,7 +6,7 @@ export const More = (props) => {
     const { textProps = {}, expandedText, collapsedText, buttonText = {
         expand: 'Ավելին',
         collapse: 'Փակել'
-    }, dataId = '' } = props;
+    }, dataTestId = '' } = props;
     const [isExpanded, setIsExpanded] = useState(false);
     const expand = (e) => {
         e.stopPropagation();
@@ -16,5 +16,5 @@ export const More = (props) => {
         e.stopPropagation();
         setIsExpanded(false);
     };
-    return (_jsxs(Text, Object.assign({}, textProps, { className: 'more', dataId: dataId, children: [`${isExpanded ? expandedText : collapsedText}`, _jsx(Button, { className: 'more__btn ml-4', type: "link", buttonText: isExpanded ? buttonText.collapse : buttonText.expand, dataId: dataId ? `${dataId}-action` : '', onClick: isExpanded ? collapse : expand })] })));
+    return (_jsxs(Text, Object.assign({}, textProps, { className: 'more', dataTestId: dataTestId, children: [`${isExpanded ? expandedText : collapsedText}`, _jsx(Button, { className: 'more__btn ml-4', type: "link", buttonText: isExpanded ? buttonText.collapse : buttonText.expand, dataTestId: dataTestId ? `${dataTestId}-action` : '', onClick: isExpanded ? collapse : expand })] })));
 };

package/components/More/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { TextPropTypes } from '../Text/types';
 export type TMorePropTypes = IBaseProps & {
     textProps?: TextPropTypes;

package/components/Pagination/Pagination.js

@@ -7,12 +7,12 @@ import IconChevronLeft from '../SVGIcons/IconChevronLeft';
 import IconMore from '../SVGIcons/IconMore';
 import { ICON_SIZE_MAPPING } from './consts';
 export const Pagination = (props) => {
-    const { totalCount, handleChangePage, classname = '', size = 'large', pageSize, disableInitialCallback = false, page, dataId = '', breakLabel = (_jsx(IconMore, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-more` : '' })), labels = {
-        previous: (_jsx(IconChevronLeft, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-prev` : '' })),
-        next: (_jsx(IconChevronRight, { size: ICON_SIZE_MAPPING[size], dataId: dataId ? `${dataId}-next` : '' }))
+    const { totalCount, handleChangePage, classname = '', size = 'large', pageSize, disableInitialCallback = false, page, dataTestId = '', breakLabel = (_jsx(IconMore, { size: ICON_SIZE_MAPPING[size], dataTestId: dataTestId ? `${dataTestId}-more` : '' })), labels = {
+        previous: (_jsx(IconChevronLeft, { size: ICON_SIZE_MAPPING[size], dataTestId: dataTestId ? `${dataTestId}-prev` : '' })),
+        next: (_jsx(IconChevronRight, { size: ICON_SIZE_MAPPING[size], dataTestId: dataTestId ? `${dataTestId}-next` : '' }))
     } } = props;
     const handlePageChange = ({ selected }) => {
         handleChangePage(selected + 1);
     };
-    return (_jsx("div", { className: "pagination-wrapper flexbox", "data-id": dataId, children: _jsx(ReactPaginate, Object.assign({ pageCount: Math.ceil(totalCount / pageSize), disableInitialCallback: disableInitialCallback, pageRangeDisplayed: PAGE_RANGE_DISPLAYED, marginPagesDisplayed: 1, onPageChange: handlePageChange, containerClassName: classNames(`pagination pagination--${size}`, classname), activeClassName: 'active', previousLabel: labels === null || labels === void 0 ? void 0 : labels.previous, nextLabel: labels === null || labels === void 0 ? void 0 : labels.next, breakClassName: "pagination__more", breakLinkClassName: "pagination__more__link", breakLabel: breakLabel }, (page ? { forcePage: page - 1 } : {}))) }));
+    return (_jsx("div", { className: "pagination-wrapper flexbox", "data-test-id": dataTestId, children: _jsx(ReactPaginate, Object.assign({ pageCount: Math.ceil(totalCount / pageSize), disableInitialCallback: disableInitialCallback, pageRangeDisplayed: PAGE_RANGE_DISPLAYED, marginPagesDisplayed: 1, onPageChange: handlePageChange, containerClassName: classNames(`pagination pagination--${size}`, classname), activeClassName: 'active', previousLabel: labels === null || labels === void 0 ? void 0 : labels.previous, nextLabel: labels === null || labels === void 0 ? void 0 : labels.next, breakClassName: "pagination__more", breakLinkClassName: "pagination__more__link", breakLabel: breakLabel }, (page ? { forcePage: page - 1 } : {}))) }));
 };

package/components/Pagination/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { ReactElement } from 'react';
 export type TPaginationProps = IBaseProps & {
     labels?: {

package/components/Popover/PopoverDesktop.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { Link } from '../Link';
 import { Text } from '../Text';
 export const PopoverDesktop = (props) => {
-    const { dataId, text, linkAddons, className = '', position = 'top-left', children, hideMessage, parent, clicked = false } = props;
+    const { dataTestId, text, linkAddons, className = '', position = 'top-left', children, hideMessage, parent, clicked = false } = props;
     const [popoverRef, setPopoverRef] = useState(null);
     const { tooltipPosition: popoverPosition, tooltipStyles: popoverStyles } = useGetTooltipStyles({
         elemRef: parent,
@@ -14,5 +14,5 @@ export const PopoverDesktop = (props) => {
     });
     useHideOnScroll(hideMessage, parent);
     useOnOutsideClick(popoverRef, hideMessage, clicked, useId());
-    return (_jsxs(_Fragment, { children: [clicked && (_jsx("div", { "data-id": dataId ? `${dataId}-popover-content` : '', className: classNames(`popover popover--${popoverPosition}`, className), ref: setPopoverRef, style: popoverStyles, children: _jsx("div", { className: "popover__inner scrollbar scrollbar--vertical pr-8", children: linkAddons ? (_jsx(Link, { dataId: linkAddons.dataId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataId: dataId ? `${dataId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", as: "div", children: text })) }) })), children] }));
+    return (_jsxs(_Fragment, { children: [clicked && (_jsx("div", { "data-test-id": dataTestId ? `${dataTestId}-popover-content` : '', className: classNames(`popover popover--${popoverPosition}`, className), ref: setPopoverRef, style: popoverStyles, children: _jsx("div", { className: "popover__inner scrollbar scrollbar--vertical pr-8", children: linkAddons ? (_jsx(Link, { dataTestId: linkAddons.dataTestId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataTestId: dataTestId ? `${dataTestId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", as: "div", children: text })) }) })), children] }));
 };

package/components/Popover/PopoverMobile.js

@@ -3,6 +3,6 @@ import { Modal } from '../Modal';
 import { Link } from '../Link';
 import { Text } from '../Text';
 export const PopoverMobile = (props) => {
-    const { dataId, text, linkAddons, mobileTitle, hideMessage, clicked = false, children } = props;
-    return (_jsxs(_Fragment, { children: [_jsx(Modal, { closeIcon: true, title: mobileTitle, onClose: hideMessage, isOpen: clicked, children: clicked && (_jsx(_Fragment, { children: linkAddons ? (_jsx(Link, { dataId: linkAddons.dataId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataId: dataId ? `${dataId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", children: text })) })) }), children] }));
+    const { dataTestId, text, linkAddons, mobileTitle, hideMessage, clicked = false, children } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { closeIcon: true, title: mobileTitle, onClose: hideMessage, isOpen: clicked, children: clicked && (_jsx(_Fragment, { children: linkAddons ? (_jsx(Link, { dataTestId: linkAddons.dataTestId, url: linkAddons.url, beforeLink: linkAddons.beforeLink, afterLink: linkAddons.afterLink, target: linkAddons.target, className: 'popover__link', children: text })) : (_jsx(Text, { dataTestId: dataTestId ? `${dataTestId}-popover-text` : '', type: "primary", weight: "regular", lineHeight: "medium", size: "small", children: text })) })) }), children] }));
 };

package/components/Popover/types.d.ts

@@ -1,3 +1,4 @@
+import { IFormCompProps } from '../../type';
 import { ReactElement, ReactNode } from 'react';
 import { LinkPropTypes } from '../Link/types';
 export interface TPopoverProps extends IFormCompProps {

package/components/Progress/Progress.js

@@ -5,12 +5,12 @@ var CIRCLE_SIZES;
     CIRCLE_SIZES[CIRCLE_SIZES["large"] = 45] = "large";
 })(CIRCLE_SIZES || (CIRCLE_SIZES = {}));
 export const Progress = (props) => {
-    const { percent, stepCount, currentStep, type = 'linear', size = 'large', noText = false, dimension, className = '', loop = false, dataId = '' } = props;
+    const { percent, stepCount, currentStep, type = 'linear', size = 'large', noText = false, dimension, className = '', loop = false, dataTestId = '' } = props;
     const _dimension = dimension ? dimension : CIRCLE_SIZES[size];
     const r = _dimension - 5;
     const _percent = stepCount && currentStep ? (currentStep / stepCount) * 100 : percent;
     const strokeDasharray = `${2 * r * 3.14}px`;
-    return (_jsxs("div", { "data-id": dataId, className: `progress-bar progress-bar--${type} progress-bar--${size} ${className}${loop ? ' progress-bar--loop' : ''}`, style: type == 'circle'
+    return (_jsxs("div", { "data-test-id": dataTestId, className: `progress-bar progress-bar--${type} progress-bar--${size} ${className}${loop ? ' progress-bar--loop' : ''}`, style: type == 'circle'
             ? {
                 width: 2 * _dimension,
                 height: 2 * _dimension
@@ -18,5 +18,5 @@ export const Progress = (props) => {
             : {}, children: [type == 'circle' ? (_jsxs("svg", { children: [_jsx("circle", { cx: _dimension, cy: _dimension, r: r }), _jsx("circle", { cx: _dimension, cy: _dimension, r: r, style: {
                             strokeDasharray,
                             strokeDashoffset: `calc(${strokeDasharray} - (${strokeDasharray} * ${_percent}) / 100)`
-                        } })] })) : (_jsx("div", { className: "progress-bar__inner", children: _jsx("div", { className: "progress-bar__filled", style: { width: `${_percent}%` } }) })), !noText ? (_jsx("span", { className: "progress-bar__percent", "data-id": dataId ? `${dataId}-text` : '', children: stepCount ? `${currentStep}/${stepCount}` : `${percent}%` })) : null] }));
+                        } })] })) : (_jsx("div", { className: "progress-bar__inner", children: _jsx("div", { className: "progress-bar__filled", style: { width: `${_percent}%` } }) })), !noText ? (_jsx("span", { className: "progress-bar__percent", "data-test-id": dataTestId ? `${dataTestId}-text` : '', children: stepCount ? `${currentStep}/${stepCount}` : `${percent}%` })) : null] }));
 };

package/components/Progress/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 export interface TProgressPropTypes extends IBaseProps {
     percent?: number;
     stepCount?: number;

package/components/ProgressStep/ProgressStep.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { Step } from './Step';
 export const ProgressStep = (props) => {
-    const { steps, stepType, activeStep, setActiveStep, stepSize = 'large', stepDirection = 'horizontal', dataId = '' } = props;
+    const { steps, stepType, activeStep, setActiveStep, stepSize = 'large', stepDirection = 'horizontal', dataTestId = '' } = props;
     const singleStepWidth = `${100 / steps.length}%`;
-    return (_jsx("div", { className: classnames('progress-stepper', `progress-stepper--${stepDirection}`), "data-id": dataId, children: steps.map((step, index) => {
-            return (_jsx(Step, { width: stepDirection == 'horizontal' ? singleStepWidth : '100%', step: step, index: index + 1, activeStep: activeStep, onStepClick: setActiveStep, stepType: stepType, stepSize: stepSize, dataId: dataId ? `${dataId}-item-${index}` : '' }, step.value));
+    return (_jsx("div", { className: classnames('progress-stepper', `progress-stepper--${stepDirection}`), "data-test-id": dataTestId, children: steps.map((step, index) => {
+            return (_jsx(Step, { width: stepDirection == 'horizontal' ? singleStepWidth : '100%', step: step, index: index + 1, activeStep: activeStep, onStepClick: setActiveStep, stepType: stepType, stepSize: stepSize, dataTestId: dataTestId ? `${dataTestId}-item-${index}` : '' }, step.value));
         }) }));
 };

package/components/ProgressStep/Step.js

@@ -7,7 +7,7 @@ import { PROGRESS_STATUSES } from './consts';
 import IconDismissCircle from '../SVGIcons/IconDismissCircle';
 import IconCheckmarkCircle from '../SVGIcons/IconCheckmarkCircle';
 export const Step = (props) => {
-    const { width, step, stepSize = 'large', index, activeStep, stepType, onStepClick, dataId = '' } = props;
+    const { width, step, stepSize = 'large', index, activeStep, stepType, onStepClick, dataTestId = '' } = props;
     const { label, subText, value, status } = step;
     const isActive = activeStep === value;
     const isCompleted = status === PROGRESS_STATUSES.completed;
@@ -29,7 +29,7 @@ export const Step = (props) => {
     };
     const stepItemContent = useMemo(() => {
         if (stepType === StepTypes.number) {
-            return (_jsx(Text, { type: textType, size: stepSize == 'large' ? 'medium' : 'small', weight: stepSize == 'large' ? 'semibold' : 'regular', dataId: dataId ? `${dataId}-number` : '', children: `${index}` }));
+            return (_jsx(Text, { type: textType, size: stepSize == 'large' ? 'medium' : 'small', weight: stepSize == 'large' ? 'semibold' : 'regular', dataTestId: dataTestId ? `${dataTestId}-number` : '', children: `${index}` }));
         }
         if (stepType === StepTypes.dot) {
             if (isActive) {
@@ -38,17 +38,17 @@ export const Step = (props) => {
             if (isCompleted) {
                 const iconSize = stepSize == 'large' ? 'small' : 'xsmall';
                 if (isRejected) {
-                    return (_jsx(IconDismissCircle, { size: iconSize, type: "inverse", dataId: dataId ? `${dataId}-icon` : '' }));
+                    return (_jsx(IconDismissCircle, { size: iconSize, type: "inverse", dataTestId: dataTestId ? `${dataTestId}-icon` : '' }));
                 }
-                return (_jsx(IconCheckmarkCircle, { size: iconSize, type: "inverse", dataId: dataId ? `${dataId}-icon` : '' }));
+                return (_jsx(IconCheckmarkCircle, { size: iconSize, type: "inverse", dataTestId: dataTestId ? `${dataTestId}-icon` : '' }));
             }
         }
         return null;
-    }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType, dataId]);
+    }, [index, stepType, stepSize, isCompleted, isActive, isRejected, textType, dataTestId]);
     return (_jsxs("div", { className: classNames('step', `step--${stepSize}`, {
             active: isActive,
             completed: isCompleted && !isActive,
             rejected: isRejected,
             review: isReview
-        }), style: { width }, onClick: onClick, "data-id": dataId, children: [_jsx("div", { className: "step__top", children: _jsx("div", { className: "step__circle", children: stepItemContent }) }), _jsxs("div", { className: "step__label", children: [_jsx(Text, { size: stepSize == 'large' ? 'standard' : 'small', weight: "semibold", lineHeight: 'large', className: "text-truncate", dataId: dataId ? `${dataId}-label` : '', children: label }), _jsx(Text, { size: stepSize == 'large' ? 'small' : 'xsmall', className: "text-truncate", dataId: dataId ? `${dataId}-subtext` : '', children: subText })] })] }));
+        }), style: { width }, onClick: onClick, "data-test-id": dataTestId, children: [_jsx("div", { className: "step__top", children: _jsx("div", { className: "step__circle", children: stepItemContent }) }), _jsxs("div", { className: "step__label", children: [_jsx(Text, { size: stepSize == 'large' ? 'standard' : 'small', weight: "semibold", lineHeight: 'large', className: "text-truncate", dataTestId: dataTestId ? `${dataTestId}-label` : '', children: label }), _jsx(Text, { size: stepSize == 'large' ? 'small' : 'xsmall', className: "text-truncate", dataTestId: dataTestId ? `${dataTestId}-subtext` : '', children: subText })] })] }));
 };

package/components/ProgressStep/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps } from '../../type';
 import { PROGRESS_STATUSES } from './consts';
 export type TStepValue = number | string;
 export interface TStep {

package/components/Radio/Radio.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { Text } from '../Text';
 import classnames from 'classnames';
 export const Radio = forwardRef((props, _ref) => {
-    const { name, label, helperText, disabled, setFieldValue, isSelected, value, className = '', onClick, dataId = '', iconProps } = props;
+    const { name, label, helperText, disabled, setFieldValue, isSelected, value, className = '', onClick, dataTestId = '', iconProps } = props;
     const isChecked = !!value || !!isSelected;
     const iconElement = iconProps ? iconProps : _jsx("span", { className: "controller__icon" });
     const changeHandler = () => {
@@ -16,6 +16,6 @@ export const Radio = forwardRef((props, _ref) => {
     };
     return (_jsxs("label", { className: classnames('controller', 'controller--radio', className, {
             'controller--disabled': disabled
-        }), children: [_jsx("input", { "data-id": dataId, type: "radio", tabIndex: 0, onChange: changeHandler, checked: isSelected, disabled: disabled }), iconElement, label ? (_jsxs("div", { className: "controller__right", children: [_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: label }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }));
+        }), children: [_jsx("input", { "data-test-id": dataTestId, type: "radio", tabIndex: 0, onChange: changeHandler, checked: isSelected, disabled: disabled }), iconElement, label ? (_jsxs("div", { className: "controller__right", children: [_jsx(Text, { type: disabled ? 'disabled' : 'primary', className: "controller__label", children: label }), helperText ? (_jsx(Text, { size: "small", type: disabled ? 'disabled' : 'secondary', children: helperText })) : null] })) : null] }));
 });
 Radio.displayName = 'Radio';

package/components/Radio/RadioGroup.js

@@ -17,7 +17,7 @@ export const RadioGroup = forwardRef((props, ref) => {
             'radio-group--horizontal': isHorizontal,
             'radio-group--vertical': !isHorizontal
         }, className), children: [_jsx(Label, { className: "radio-group__label", text: label, invalid: hasError, required: required, disabled: disabled, labelAddons: labelAddons }), _jsx("div", { className: "radio-group__inner", children: options.map((radioOption) => {
-                    return (_jsx(Radio, { label: radioOption.label, helperText: radioOption.helperText, name: name, disabled: disabled, className: "radio-group__item", isSelected: radioOption.value === value || radioOption.value === selected, onClick: () => onSelect(radioOption.value), dataId: radioOption.dataId }, radioOption.value));
+                    return (_jsx(Radio, { label: radioOption.label, helperText: radioOption.helperText, name: name, disabled: disabled, className: "radio-group__item", isSelected: radioOption.value === value || radioOption.value === selected, onClick: () => onSelect(radioOption.value), dataTestId: radioOption.dataTestId }, radioOption.value));
                 }) })] }));
 });
 RadioGroup.displayName = 'RadioGroup';

package/components/Radio/types.d.ts

@@ -1,3 +1,4 @@
+import { IBaseProps, IFormCompProps } from '../../type';
 import { ReactElement } from 'react';
 export interface TRadioProps extends IFormCompProps {
     showRadioIcon?: boolean;

package/components/SVGIcons/IconAdd.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAdd: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAdd: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAdd;

package/components/SVGIcons/IconAdd.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAdd = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAdd = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("path", { d: "M11.7501 3C12.1298 3 12.4436 3.28201 12.4934 3.64808L12.5002 3.74985L12.5014 11H19.7545C20.1687 11 20.5045 11.3358 20.5045 11.75C20.5045 12.1297 20.2224 12.4435 19.8563 12.4932L19.7545 12.5H12.5014L12.5035 19.7491C12.5036 20.1633 12.1679 20.4993 11.7536 20.4993C11.3739 20.4993 11.0601 20.2173 11.0104 19.8512L11.0035 19.7494L11.0014 12.5H3.75244C3.33823 12.5 3.00244 12.1642 3.00244 11.75C3.00244 11.3703 3.2846 11.0565 3.65067 11.0068L3.75244 11H11.0014L11.0002 3.75015C11.0002 3.33594 11.3359 3 11.7501 3Z" }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("path", { d: "M11.7501 3C12.1298 3 12.4436 3.28201 12.4934 3.64808L12.5002 3.74985L12.5014 11H19.7545C20.1687 11 20.5045 11.3358 20.5045 11.75C20.5045 12.1297 20.2224 12.4435 19.8563 12.4932L19.7545 12.5H12.5014L12.5035 19.7491C12.5036 20.1633 12.1679 20.4993 11.7536 20.4993C11.3739 20.4993 11.0601 20.2173 11.0104 19.8512L11.0035 19.7494L11.0014 12.5H3.75244C3.33823 12.5 3.00244 12.1642 3.00244 11.75C3.00244 11.3703 3.2846 11.0565 3.65067 11.0068L3.75244 11H11.0014L11.0002 3.75015C11.0002 3.33594 11.3359 3 11.7501 3Z" }) }));
 export default IconAdd;

package/components/SVGIcons/IconAddCircle.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAddCircle: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAddCircle: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAddCircle;

package/components/SVGIcons/IconAddCircle.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAddCircle = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAddCircle = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 7C12.4142 7 12.75 7.33579 12.75 7.75V11.25H16.25C16.6642 11.25 17 11.5858 17 12C17 12.4142 16.6642 12.75 16.25 12.75H12.75V16.25C12.75 16.6642 12.4142 17 12 17C11.5858 17 11.25 16.6642 11.25 16.25V12.75H7.75C7.33579 12.75 7 12.4142 7 12C7 11.5858 7.33579 11.25 7.75 11.25H11.25V7.75C11.25 7.33579 11.5858 7 12 7Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 7C12.4142 7 12.75 7.33579 12.75 7.75V11.25H16.25C16.6642 11.25 17 11.5858 17 12C17 12.4142 16.6642 12.75 16.25 12.75H12.75V16.25C12.75 16.6642 12.4142 17 12 17C11.5858 17 11.25 16.6642 11.25 16.25V12.75H7.75C7.33579 12.75 7 12.4142 7 12C7 11.5858 7.33579 11.25 7.75 11.25H11.25V7.75C11.25 7.33579 11.5858 7 12 7Z" }) }) }));
 export default IconAddCircle;

package/components/SVGIcons/IconAddCircleFilled.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAddCircleFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAddCircleFilled: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAddCircleFilled;

package/components/SVGIcons/IconAddCircleFilled.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAddCircleFilled = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAddCircleFilled = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7C11.6203 7 11.3065 7.28215 11.2568 7.64823L11.25 7.75V11.25H7.75C7.33579 11.25 7 11.5858 7 12C7 12.3797 7.28215 12.6935 7.64823 12.7432L7.75 12.75H11.25V16.25C11.25 16.6642 11.5858 17 12 17C12.3797 17 12.6935 16.7178 12.7432 16.3518L12.75 16.25V12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.6203 16.7178 11.3065 16.3518 11.2568L16.25 11.25H12.75V7.75C12.75 7.33579 12.4142 7 12 7Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 7C11.6203 7 11.3065 7.28215 11.2568 7.64823L11.25 7.75V11.25H7.75C7.33579 11.25 7 11.5858 7 12C7 12.3797 7.28215 12.6935 7.64823 12.7432L7.75 12.75H11.25V16.25C11.25 16.6642 11.5858 17 12 17C12.3797 17 12.6935 16.7178 12.7432 16.3518L12.75 16.25V12.75H16.25C16.6642 12.75 17 12.4142 17 12C17 11.6203 16.7178 11.3065 16.3518 11.2568L16.25 11.25H12.75V7.75C12.75 7.33579 12.4142 7 12 7Z" }) }) }));
 export default IconAddCircleFilled;

package/components/SVGIcons/IconAddFilled.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAddFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAddFilled: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAddFilled;

package/components/SVGIcons/IconAddFilled.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAddFilled = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAddFilled = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("path", { d: "M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z" }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("path", { d: "M11.8834 3.00673L12 3C12.5128 3 12.9355 3.38604 12.9933 3.88338L13 4V11H20C20.5128 11 20.9355 11.386 20.9933 11.8834L21 12C21 12.5128 20.614 12.9355 20.1166 12.9933L20 13H13V20C13 20.5128 12.614 20.9355 12.1166 20.9933L12 21C11.4872 21 11.0645 20.614 11.0067 20.1166L11 20V13H4C3.48716 13 3.06449 12.614 3.00673 12.1166L3 12C3 11.4872 3.38604 11.0645 3.88338 11.0067L4 11H11V4C11 3.48716 11.386 3.06449 11.8834 3.00673L12 3L11.8834 3.00673Z" }) }));
 export default IconAddFilled;

package/components/SVGIcons/IconAirplaneTakeOff.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAirplaneTakeOff: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAirplaneTakeOff: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAirplaneTakeOff;

package/components/SVGIcons/IconAirplaneTakeOff.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAirplaneTakeOff = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAirplaneTakeOff = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("path", { d: "M8.31551 8.40816L7.54364 7.28135C6.59057 5.89 7.58682 4 9.27329 4C9.75351 4 10.2192 4.16486 10.5924 4.46701L13.1732 6.55618C13.4827 6.22856 13.852 5.87691 14.2634 5.55966C14.9221 5.0518 15.7632 4.57418 16.6924 4.50263C18.9302 4.33032 20.6017 5.7461 21.547 6.82923C22.0357 7.38921 22.1337 8.09723 21.9247 8.71205C21.7201 9.31393 21.2312 9.80871 20.5828 10.0323L15.212 11.8842L12.0496 16.1009C11.6249 16.6672 10.9584 17.0004 10.2506 17.0004C8.83529 17.0004 7.77186 15.7086 8.04385 14.3196L8.29513 13.0364L5.7653 13.5826C4.34291 13.8897 3 12.8058 3 11.3506V7.69166C3 6.75761 3.7572 6.00041 4.69125 6.00041C5.31015 6.00041 5.87962 6.33847 6.17598 6.8818L7.14191 8.65266L8.31551 8.40816ZM8.78114 6.43365L9.90662 8.07668L11.8053 7.68112C11.8953 7.66237 11.9844 7.63316 12.0714 7.59414L9.64863 5.63288C9.54243 5.54691 9.40993 5.5 9.27329 5.5C8.79343 5.5 8.50996 6.03777 8.78114 6.43365ZM16.8076 5.9982C16.3011 6.0372 15.7399 6.31535 15.1793 6.74757C14.63 7.17109 14.1517 7.68771 13.8188 8.08877C13.3987 8.5949 12.813 9.00339 12.1113 9.14959L6.90297 10.2346C6.5794 10.3021 6.24985 10.1497 6.09158 9.85955L4.85914 7.60008C4.82563 7.53864 4.76123 7.50041 4.69125 7.50041C4.58562 7.50041 4.5 7.58604 4.5 7.69166V11.3506C4.5 11.8498 4.96073 12.2217 5.44873 12.1164L9.09172 11.3298C9.33829 11.2766 9.59511 11.3509 9.7752 11.5275C9.95528 11.7041 10.0345 11.9595 9.98602 12.207L9.51589 14.6078C9.42534 15.0703 9.7794 15.5004 10.2506 15.5004C10.4863 15.5004 10.7082 15.3895 10.8496 15.2009L14.15 10.8002C14.2399 10.6802 14.3638 10.59 14.5055 10.5411L20.0938 8.61424C20.3174 8.53712 20.4536 8.37897 20.5045 8.22935C20.5509 8.09266 20.5347 7.95059 20.4168 7.81553C19.5642 6.83853 18.3185 5.88186 16.8076 5.9982ZM3.75 19.5C3.33579 19.5 3 19.8358 3 20.25C3 20.6642 3.33579 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25C21 19.8358 20.6642 19.5 20.25 19.5H3.75Z" }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("path", { d: "M8.31551 8.40816L7.54364 7.28135C6.59057 5.89 7.58682 4 9.27329 4C9.75351 4 10.2192 4.16486 10.5924 4.46701L13.1732 6.55618C13.4827 6.22856 13.852 5.87691 14.2634 5.55966C14.9221 5.0518 15.7632 4.57418 16.6924 4.50263C18.9302 4.33032 20.6017 5.7461 21.547 6.82923C22.0357 7.38921 22.1337 8.09723 21.9247 8.71205C21.7201 9.31393 21.2312 9.80871 20.5828 10.0323L15.212 11.8842L12.0496 16.1009C11.6249 16.6672 10.9584 17.0004 10.2506 17.0004C8.83529 17.0004 7.77186 15.7086 8.04385 14.3196L8.29513 13.0364L5.7653 13.5826C4.34291 13.8897 3 12.8058 3 11.3506V7.69166C3 6.75761 3.7572 6.00041 4.69125 6.00041C5.31015 6.00041 5.87962 6.33847 6.17598 6.8818L7.14191 8.65266L8.31551 8.40816ZM8.78114 6.43365L9.90662 8.07668L11.8053 7.68112C11.8953 7.66237 11.9844 7.63316 12.0714 7.59414L9.64863 5.63288C9.54243 5.54691 9.40993 5.5 9.27329 5.5C8.79343 5.5 8.50996 6.03777 8.78114 6.43365ZM16.8076 5.9982C16.3011 6.0372 15.7399 6.31535 15.1793 6.74757C14.63 7.17109 14.1517 7.68771 13.8188 8.08877C13.3987 8.5949 12.813 9.00339 12.1113 9.14959L6.90297 10.2346C6.5794 10.3021 6.24985 10.1497 6.09158 9.85955L4.85914 7.60008C4.82563 7.53864 4.76123 7.50041 4.69125 7.50041C4.58562 7.50041 4.5 7.58604 4.5 7.69166V11.3506C4.5 11.8498 4.96073 12.2217 5.44873 12.1164L9.09172 11.3298C9.33829 11.2766 9.59511 11.3509 9.7752 11.5275C9.95528 11.7041 10.0345 11.9595 9.98602 12.207L9.51589 14.6078C9.42534 15.0703 9.7794 15.5004 10.2506 15.5004C10.4863 15.5004 10.7082 15.3895 10.8496 15.2009L14.15 10.8002C14.2399 10.6802 14.3638 10.59 14.5055 10.5411L20.0938 8.61424C20.3174 8.53712 20.4536 8.37897 20.5045 8.22935C20.5509 8.09266 20.5347 7.95059 20.4168 7.81553C19.5642 6.83853 18.3185 5.88186 16.8076 5.9982ZM3.75 19.5C3.33579 19.5 3 19.8358 3 20.25C3 20.6642 3.33579 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25C21 19.8358 20.6642 19.5 20.25 19.5H3.75Z" }) }));
 export default IconAirplaneTakeOff;

package/components/SVGIcons/IconAirplaneTakeOffFilled.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAirplaneTakeOffFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAirplaneTakeOffFilled: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAirplaneTakeOffFilled;

package/components/SVGIcons/IconAirplaneTakeOffFilled.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAirplaneTakeOffFilled = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAirplaneTakeOffFilled = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("path", { d: "M12.3937 5.92516L10.5225 4.41035C10.1945 4.14486 9.78533 4 9.36338 4C7.956 4 7.06844 5.51429 7.75609 6.74223L8.13761 7.42352L11.6014 6.7019C11.6567 6.69037 11.7711 6.64122 11.8952 6.49173C12.0355 6.32272 12.2028 6.1297 12.3937 5.92516ZM3 20C3 19.4477 3.44772 19 4 19H20C20.5523 19 21 19.4477 21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20ZM21.547 6.82934C20.6017 5.74617 18.9302 4.33032 16.6924 4.50263C15.7632 4.57418 14.9221 5.0518 14.2634 5.55966C13.5935 6.07622 13.0355 6.68399 12.6647 7.13069C12.4221 7.42283 12.1192 7.61572 11.8053 7.68112L7.14191 8.65266L6.17598 6.8818C5.87962 6.33847 5.31015 6.00041 4.69125 6.00041C3.7572 6.00041 3 6.75761 3 7.69166V11.3815C3 12.822 4.31234 13.906 5.72694 13.6339L9.02764 12.999L8.51953 14.2331C7.97639 15.5522 8.94626 17.0004 10.3728 17.0004C11.0037 17.0004 11.5978 16.7034 11.9763 16.1987L15.212 11.8842L20.5827 10.0324C21.2312 9.80882 21.7201 9.31405 21.9247 8.71216C22.1337 8.09735 22.0357 7.38933 21.547 6.82934Z" }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("path", { d: "M12.3937 5.92516L10.5225 4.41035C10.1945 4.14486 9.78533 4 9.36338 4C7.956 4 7.06844 5.51429 7.75609 6.74223L8.13761 7.42352L11.6014 6.7019C11.6567 6.69037 11.7711 6.64122 11.8952 6.49173C12.0355 6.32272 12.2028 6.1297 12.3937 5.92516ZM3 20C3 19.4477 3.44772 19 4 19H20C20.5523 19 21 19.4477 21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20ZM21.547 6.82934C20.6017 5.74617 18.9302 4.33032 16.6924 4.50263C15.7632 4.57418 14.9221 5.0518 14.2634 5.55966C13.5935 6.07622 13.0355 6.68399 12.6647 7.13069C12.4221 7.42283 12.1192 7.61572 11.8053 7.68112L7.14191 8.65266L6.17598 6.8818C5.87962 6.33847 5.31015 6.00041 4.69125 6.00041C3.7572 6.00041 3 6.75761 3 7.69166V11.3815C3 12.822 4.31234 13.906 5.72694 13.6339L9.02764 12.999L8.51953 14.2331C7.97639 15.5522 8.94626 17.0004 10.3728 17.0004C11.0037 17.0004 11.5978 16.7034 11.9763 16.1987L15.212 11.8842L20.5827 10.0324C21.2312 9.80882 21.7201 9.31405 21.9247 8.71216C22.1337 8.09735 22.0357 7.38933 21.547 6.82934Z" }) }));
 export default IconAirplaneTakeOffFilled;

package/components/SVGIcons/IconAlert.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAlert: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAlert: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAlert;

package/components/SVGIcons/IconAlert.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAlert = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAlert = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M11.9999 1.99609C16.0498 1.99609 19.3565 5.19084 19.4957 9.24515L19.4999 9.49609V13.5931L20.8799 16.7491C20.9489 16.907 20.9846 17.0775 20.9846 17.2499C20.9846 17.9402 20.4249 18.4999 19.7346 18.4999L14.9999 18.5014C14.9999 20.1582 13.6567 21.5014 11.9999 21.5014C10.4022 21.5014 9.09621 20.2524 9.00496 18.6776L8.99941 18.4991L4.27473 18.4999C4.10339 18.4999 3.93388 18.4646 3.77673 18.3964C3.14353 18.1213 2.85318 17.3851 3.12822 16.7519L4.49987 13.594V9.49599C4.50046 5.3412 7.85195 1.99609 11.9999 1.99609ZM13.4994 18.4991L10.4999 18.5014C10.4999 19.3298 11.1714 20.0014 11.9999 20.0014C12.7796 20.0014 13.4203 19.4065 13.493 18.6458L13.4994 18.4991ZM11.9999 3.49609C8.67971 3.49609 6.00034 6.17035 5.99987 9.49609V13.9057L4.65589 16.9999H19.3524L17.9999 13.9067L18 9.50895L17.9962 9.28375C17.8852 6.05027 15.2414 3.49609 11.9999 3.49609Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M11.9999 1.99609C16.0498 1.99609 19.3565 5.19084 19.4957 9.24515L19.4999 9.49609V13.5931L20.8799 16.7491C20.9489 16.907 20.9846 17.0775 20.9846 17.2499C20.9846 17.9402 20.4249 18.4999 19.7346 18.4999L14.9999 18.5014C14.9999 20.1582 13.6567 21.5014 11.9999 21.5014C10.4022 21.5014 9.09621 20.2524 9.00496 18.6776L8.99941 18.4991L4.27473 18.4999C4.10339 18.4999 3.93388 18.4646 3.77673 18.3964C3.14353 18.1213 2.85318 17.3851 3.12822 16.7519L4.49987 13.594V9.49599C4.50046 5.3412 7.85195 1.99609 11.9999 1.99609ZM13.4994 18.4991L10.4999 18.5014C10.4999 19.3298 11.1714 20.0014 11.9999 20.0014C12.7796 20.0014 13.4203 19.4065 13.493 18.6458L13.4994 18.4991ZM11.9999 3.49609C8.67971 3.49609 6.00034 6.17035 5.99987 9.49609V13.9057L4.65589 16.9999H19.3524L17.9999 13.9067L18 9.50895L17.9962 9.28375C17.8852 6.05027 15.2414 3.49609 11.9999 3.49609Z" }) }) }));
 export default IconAlert;

package/components/SVGIcons/IconAlertBadge.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAlertBadge: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAlertBadge: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAlertBadge;

package/components/SVGIcons/IconAlertBadge.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAlertBadge = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAlertBadge = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M11.9876 1.99609C13.4351 1.99609 14.7878 2.40297 15.9353 3.11058C15.5934 3.47585 15.329 3.91431 15.1682 4.39985C14.2457 3.82617 13.1554 3.49569 11.9876 3.49569C8.66297 3.49569 5.97997 6.16922 5.97949 9.49407V13.9025L4.63369 16.9958H19.3502L17.9958 13.9035L17.9959 9.50692L17.9921 9.28178C17.9884 9.17344 17.9818 9.06586 17.9725 8.95912C18.1435 8.98472 18.3185 8.99798 18.4966 8.99798C18.8347 8.99798 19.1616 8.95018 19.4709 8.86099C19.4816 8.98748 19.4892 9.1149 19.4936 9.24319L19.4978 9.49407V13.5899L20.8797 16.7451C20.9489 16.903 20.9846 17.0734 20.9846 17.2457C20.9846 17.9359 20.4241 18.4954 19.7329 18.4954L14.9917 18.4969C14.9917 20.1533 13.6467 21.4961 11.9876 21.4961C10.3878 21.4961 9.08004 20.2475 8.98867 18.6731L8.98312 18.4946L4.25202 18.4954C4.08044 18.4954 3.9107 18.4602 3.75334 18.392C3.11928 18.117 2.82853 17.3809 3.10394 16.7479L4.47746 13.5909V9.49396C4.47805 5.34029 7.8341 1.99609 11.9876 1.99609ZM13.4892 18.4946L10.4856 18.4969C10.4856 19.3251 11.1581 19.9965 11.9876 19.9965C12.7684 19.9965 13.41 19.4018 13.4828 18.6413L13.4892 18.4946ZM16.033 5.05266C16.1282 4.52552 16.3889 4.05584 16.7595 3.6992C17.2097 3.26601 17.822 2.99961 18.4966 2.99961C19.8792 2.99961 21 4.11859 21 5.49893C21 6.59182 20.2974 7.52087 19.3185 7.86042C19.0611 7.94973 18.7845 7.99826 18.4966 7.99826C18.2482 7.99826 18.0083 7.96214 17.7818 7.89488C16.7475 7.58775 15.9932 6.63128 15.9932 5.49893C15.9932 5.34661 16.0069 5.19746 16.033 5.05266Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Regular", children: _jsx("path", { id: "Shape", d: "M11.9876 1.99609C13.4351 1.99609 14.7878 2.40297 15.9353 3.11058C15.5934 3.47585 15.329 3.91431 15.1682 4.39985C14.2457 3.82617 13.1554 3.49569 11.9876 3.49569C8.66297 3.49569 5.97997 6.16922 5.97949 9.49407V13.9025L4.63369 16.9958H19.3502L17.9958 13.9035L17.9959 9.50692L17.9921 9.28178C17.9884 9.17344 17.9818 9.06586 17.9725 8.95912C18.1435 8.98472 18.3185 8.99798 18.4966 8.99798C18.8347 8.99798 19.1616 8.95018 19.4709 8.86099C19.4816 8.98748 19.4892 9.1149 19.4936 9.24319L19.4978 9.49407V13.5899L20.8797 16.7451C20.9489 16.903 20.9846 17.0734 20.9846 17.2457C20.9846 17.9359 20.4241 18.4954 19.7329 18.4954L14.9917 18.4969C14.9917 20.1533 13.6467 21.4961 11.9876 21.4961C10.3878 21.4961 9.08004 20.2475 8.98867 18.6731L8.98312 18.4946L4.25202 18.4954C4.08044 18.4954 3.9107 18.4602 3.75334 18.392C3.11928 18.117 2.82853 17.3809 3.10394 16.7479L4.47746 13.5909V9.49396C4.47805 5.34029 7.8341 1.99609 11.9876 1.99609ZM13.4892 18.4946L10.4856 18.4969C10.4856 19.3251 11.1581 19.9965 11.9876 19.9965C12.7684 19.9965 13.41 19.4018 13.4828 18.6413L13.4892 18.4946ZM16.033 5.05266C16.1282 4.52552 16.3889 4.05584 16.7595 3.6992C17.2097 3.26601 17.822 2.99961 18.4966 2.99961C19.8792 2.99961 21 4.11859 21 5.49893C21 6.59182 20.2974 7.52087 19.3185 7.86042C19.0611 7.94973 18.7845 7.99826 18.4966 7.99826C18.2482 7.99826 18.0083 7.96214 17.7818 7.89488C16.7475 7.58775 15.9932 6.63128 15.9932 5.49893C15.9932 5.34661 16.0069 5.19746 16.033 5.05266Z" }) }) }));
 export default IconAlertBadge;

package/components/SVGIcons/IconAlertBadgeFilled.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAlertBadgeFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAlertBadgeFilled: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAlertBadgeFilled;

package/components/SVGIcons/IconAlertBadgeFilled.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAlertBadgeFilled = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAlertBadgeFilled = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M18.5 9C18.8376 9 19.1641 8.95219 19.473 8.86298C19.4909 9.07425 19.5 9.28801 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391C13.4433 2.00391 14.7915 2.41162 15.9355 3.11815C15.355 3.74286 15 4.57997 15 5.5C15 7.433 16.567 9 18.5 9ZM14.9583 19.003C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003H14.9583ZM18.5 8C19.8807 8 21 6.88071 21 5.5C21 4.11929 19.8807 3 18.5 3C17.1193 3 16 4.11929 16 5.5C16 6.88071 17.1193 8 18.5 8Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M18.5 9C18.8376 9 19.1641 8.95219 19.473 8.86298C19.4909 9.07425 19.5 9.28801 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391C13.4433 2.00391 14.7915 2.41162 15.9355 3.11815C15.355 3.74286 15 4.57997 15 5.5C15 7.433 16.567 9 18.5 9ZM14.9583 19.003C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003H14.9583ZM18.5 8C19.8807 8 21 6.88071 21 5.5C21 4.11929 19.8807 3 18.5 3C17.1193 3 16 4.11929 16 5.5C16 6.88071 17.1193 8 18.5 8Z" }) }) }));
 export default IconAlertBadgeFilled;

package/components/SVGIcons/IconAlertFilled.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAlertFilled: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAlertFilled: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAlertFilled;

package/components/SVGIcons/IconAlertFilled.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAlertFilled = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAlertFilled = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M9.04173 19.003H14.9583C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003ZM12 2.00391C16.1421 2.00391 19.5 5.36177 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391Z" }) }) }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: _jsx("g", { id: "Size=24, Theme=Filled", children: _jsx("path", { id: "Shape", d: "M9.04173 19.003H14.9583C14.7196 20.4211 13.486 21.5015 12 21.5015C10.514 21.5015 9.28037 20.4211 9.04173 19.003ZM12 2.00391C16.1421 2.00391 19.5 5.36177 19.5 9.50391V13.5024L20.9183 16.6625C20.9732 16.7848 21.0016 16.9174 21.0016 17.0515C21.0016 17.5762 20.5763 18.0015 20.0516 18.0015H3.95219C3.8184 18.0015 3.68613 17.9733 3.56402 17.9186C3.08515 17.7042 2.87073 17.1422 3.08511 16.6633L4.50001 13.5028L4.50011 9.49099L4.50453 9.24107C4.6436 5.21035 7.95588 2.00391 12 2.00391Z" }) }) }));
 export default IconAlertFilled;

package/components/SVGIcons/IconAm.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAm: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAm: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAm;

package/components/SVGIcons/IconAm.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-const IconAm = ({ size, type, className = '', onClick, refHandler, id, dataId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
+const IconAm = ({ size, type, className = '', onClick, refHandler, id, dataTestId }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: classNames('svg-icon', {
         [`svg-icon__size-${size}`]: size,
         [`svg-icon__type-${type}`]: type,
         [className]: className
-    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-id": dataId ? `${dataId}-svg-icon` : '', children: [_jsx("rect", { y: "3.43005", width: "24", height: "17.1429", rx: "2", fill: "white" }), _jsx("mask", { id: "mask0_1993_1683", style: { maskType: 'luminance' }, maskUnits: "userSpaceOnUse", x: "0", y: "3", width: "24", height: "18", children: _jsx("rect", { y: "3.43005", width: "24", height: "17.1429", rx: "2", fill: "white" }) }), _jsxs("g", { mask: "url(#mask0_1993_1683)", children: [_jsx("path", { d: "M0 14.8587H24V9.14441H0V14.8587Z", fill: "#1047B9" }), _jsx("path", { d: "M0 9.14434H24V3.43005H0V9.14434Z", fill: "#F01C31" }), _jsx("path", { d: "M0 20.5729H24V14.8586H0V20.5729Z", fill: "#FECB2F" })] })] }));
+    }), viewBox: "0 0 24 24", fill: "none", onClick: onClick, ref: refHandler, id: id, "data-test-id": dataTestId ? `${dataTestId}-svg-icon` : '', children: [_jsx("rect", { y: "3.43005", width: "24", height: "17.1429", rx: "2", fill: "white" }), _jsx("mask", { id: "mask0_1993_1683", style: { maskType: 'luminance' }, maskUnits: "userSpaceOnUse", x: "0", y: "3", width: "24", height: "18", children: _jsx("rect", { y: "3.43005", width: "24", height: "17.1429", rx: "2", fill: "white" }) }), _jsxs("g", { mask: "url(#mask0_1993_1683)", children: [_jsx("path", { d: "M0 14.8587H24V9.14441H0V14.8587Z", fill: "#1047B9" }), _jsx("path", { d: "M0 9.14434H24V3.43005H0V9.14434Z", fill: "#F01C31" }), _jsx("path", { d: "M0 20.5729H24V14.8586H0V20.5729Z", fill: "#FECB2F" })] })] }));
 export default IconAm;

package/components/SVGIcons/IconAmd.d.ts

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { ISVGIconProps } from '../../type';
-declare const IconAmd: ({ size, type, className, onClick, refHandler, id, dataId }: ISVGIconProps) => ReactElement;
+declare const IconAmd: ({ size, type, className, onClick, refHandler, id, dataTestId }: ISVGIconProps) => ReactElement;
 export default IconAmd;