@itcase/ui 1.2.31 → 1.2.33

package/dist/components/Menu.js

@@ -2,21 +2,19 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-zHzWXIvQ.js';
+import { M as MenuItem } from '../MenuItem-C7frDyBO.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/MenuItem.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Text-DlSG_p4u.js';
-import '../appearance/Text.js';
+import '../Text-C4Bg2Mv6.js';
 
 function Menu(props) {
     var after = props.after, before = props.before, children = props.children, className = props.className, items = props.items, type = props.type, onClickItem = props.onClickItem;

package/dist/components/MenuItem.js

@@ -1,11 +1,10 @@
-export { M as MenuItem, m as menuItemConfig } from '../MenuItem-zHzWXIvQ.js';
+export { M as MenuItem, m as menuItemConfig } from '../MenuItem-C7frDyBO.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/MenuItem.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -15,5 +14,4 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../Text-DlSG_p4u.js';
-import '../appearance/Text.js';
+import '../Text-C4Bg2Mv6.js';

package/dist/components/Modal.js

@@ -2,22 +2,23 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import clsx from 'clsx';
 import ReactDOM from 'react-dom';
-import { modalAppearance } from '../appearance/Modal.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { O as Overlay } from '../Overlay-DO5dnSRE.js';
-import { L as Loader } from '../Loader-CqEocvjh.js';
-import 'lodash/castArray';
+import { L as Loader } from '../Loader-DHNcD09o.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Loader.js';
-import '../Text-DlSG_p4u.js';
-import '../appearance/Text.js';
+import '../Text-C4Bg2Mv6.js';
+
+var modalAppearance = {
+    dev: {},
+};
 
 var modalConfig = {
     appearance: modalAppearance,

package/dist/components/ModalSheetBottom.js

@@ -5,8 +5,8 @@ import { Sheet } from 'react-modal-sheet';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -26,7 +26,7 @@ function ModalSheetBottom(props) {
     });
     // @ts-expect-error
     var styles = useStyles(props).styles;
-    return (jsxs(Sheet, __assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxs(Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton })) : (jsx(Sheet.Header, { className: clsx('modal-sheet-bottom__header') })), jsx(Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsx(Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
+    return (jsxs(Sheet, __assign({ className: clsx(className, 'modal-sheet-bottom', borderColorClass, fillClass), isOpen: isOpenModal, onClose: closeModal }, props, { children: [jsxs(Sheet.Container, { className: clsx(className, 'modal-sheet-bottom__container', borderColorClass, fillClass), style: styles, children: [closeButton ? (jsx("div", { className: "modal-sheet-bottom__header", children: jsx("div", { className: clsx('modal-sheet-bottom__close'), onClick: closeModal, children: closeButton }) })) : (jsx(Sheet.Header, { className: "modal-sheet-bottom__header" })), jsx(Sheet.Content, { className: clsx('modal-sheet-bottom__content'), children: children })] }), jsx(Sheet.Backdrop, { className: clsx('modal-sheet-bottom__backdrop'), onClick: closeModal })] })));
 }
 
 export { ModalSheetBottom };

package/dist/components/Notification.js

@@ -1,25 +1,55 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { notificationItemAppearance } from '../appearance/Notification.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import { T as Title } from '../Title-mkus84Rh.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Title } from '../Title-YVzIwk68.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'uuid';
 
+var notificationItemAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        textColor: 'accentTextPrimary',
+        titleTextColor: 'accentTextPrimary',
+    },
+    primary: {
+        fill: 'primaryPrimary',
+        textColor: 'primaryTextPrimary',
+        titleTextColor: 'primaryTextPrimary',
+    },
+    secondary: {
+        fill: 'secondaryPrimary',
+        textColor: 'secondaryTextPrimary',
+        titleTextColor: 'secondaryTextPrimary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        textColor: 'surfaceTextPrimary',
+        titleTextColor: 'surfaceTextPrimary',
+    },
+};
+
 var notificationItemConfig = {
     appearance: notificationItemAppearance,
     setAppearance: function (newComponent) {
@@ -53,4 +83,4 @@ function NotificationList(props) {
     return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(NotificationItem, { closeButton: closeButton, id: notification.id, size: notification.size || size, status: notification.status, text: notification.text, title: notification.title, type: notification.type || type, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
 }
 
-export { NotificationItem, NotificationList, notificationItemConfig };
+export { NotificationItem, NotificationList, notificationItemAppearance, notificationItemConfig };

package/dist/components/Overlay.js

@@ -3,8 +3,8 @@ import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Page.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Pagination.js

@@ -4,11 +4,11 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-DzDP45iO.js';
-import { I as Icon } from '../Icon-B7BJo5kW.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import 'lodash/castArray';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-B8IMNQww.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -16,18 +16,12 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/DropdownItem.js';
-import '../Divider-DE2Q5J36.js';
-import '../appearance/Divider.js';
+import '../Divider-DHIuQUsH.js';
 import '../Link-CeQuavin.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
-import '../Tooltip-f5EWhsGj.js';
-import '../appearance/Tooltip.js';
-import '../Title-mkus84Rh.js';
-import '../appearance/Title.js';
-import '../appearance/Text.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
 
 var paginationConfig = {
     appearance: undefined,

package/dist/components/Panel.js

@@ -3,18 +3,16 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-Dc70Z4_7.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import 'lodash/castArray';
+import { G as Group } from '../Group-BCvs5UxK.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Group.js';
-import '../appearance/Text.js';
 
 var panelConfig = {
     appearance: undefined,

package/dist/components/Radio.js

@@ -1,20 +1,37 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { radioState, radioAppearance } from '../appearance/Radio.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../appearance/Text.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
+var radioAppearance = {
+    dev: {
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 's',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+        stateBorderColor: 'surfaceBorderTertiary',
+        stateBorderWidth: 1,
+        stateCheckmarkFill: 'surfaceItemAccent',
+        stateShape: 'circular',
+    },
+};
+var radioState = {
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+};
+
 var radioConfig = {
     appearance: radioState,
     setAppearance: function (newComponent) {

package/dist/components/RangeSlider.js

@@ -4,8 +4,8 @@ import Slider from 'rc-slider';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Response.js

@@ -1,34 +1,215 @@
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
-import { responseAppearance } from '../appearance/Response.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Button } from '../Button-DS2l65oq.js';
-import { G as Group } from '../Group-Dc70Z4_7.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import { T as Title } from '../Title-mkus84Rh.js';
-import 'lodash/castArray';
+import { B as Button } from '../Button-C8MATksY.js';
+import { G as Group } from '../Group-BCvs5UxK.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Title } from '../Title-YVzIwk68.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Button.js';
-import '../Icon-B7BJo5kW.js';
-import '../tslib.es6-5FtW-kfi.js';
-import '../appearance/Icon.js';
+import '../Icon-DptCmI_y.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-f5EWhsGj.js';
-import '../appearance/Tooltip.js';
-import '../Loader-CqEocvjh.js';
-import '../appearance/Loader.js';
-import '../appearance/Group.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Loader-DHNcD09o.js';
+
+var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$5 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23E00000'/%3e%3cpath d='M90.5027 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5027 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+var img$4 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M116.144 71.2426C118.487 68.8995 118.487 65.1005 116.144 62.7574C113.801 60.4142 110.002 60.4142 107.659 62.7574L89.4506 80.9654L71.2426 62.7574C68.8995 60.4142 65.1005 60.4142 62.7574 62.7574C60.4142 65.1005 60.4142 68.8995 62.7574 71.2426L80.9654 89.4506L62.7574 107.659C60.4142 110.002 60.4142 113.801 62.7574 116.144C65.1005 118.487 68.8995 118.487 71.2426 116.144L89.4506 97.9359L107.659 116.144C110.002 118.487 113.801 118.487 116.144 116.144C118.487 113.801 118.487 110.002 116.144 107.659L97.9359 89.4506L116.144 71.2426Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$3 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M89.4468 113.833C98.5743 113.833 106.51 108.762 110.56 101.299L116.507 109.116C110.49 117.519 100.612 123 89.4468 123C74.5162 123 61.888 113.2 57.7156 99.7167H51L62.3388 84.8667L73.6777 99.7167H67.55C71.2908 108.036 79.6878 113.833 89.4468 113.833Z' fill='%23747474'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M122.212 84.6833C119.654 68.9858 105.958 57 89.4468 57C77.527 57 67.0747 63.2463 61.2209 72.6261L67.4218 80.5738C71.0963 72.0991 79.5747 66.1667 89.4468 66.1667C100.848 66.1667 110.391 74.0798 112.821 84.6833H106.322L117.661 99.5333L129 84.6833H122.212ZM118.759 84.6833H118.81L118.793 84.6618L118.759 84.6833Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$2 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M128.811 123.436L110.56 105.386C115.694 99.2993 118.754 91.5088 118.754 82.9879C118.754 63.6507 102.929 48.0001 83.3768 48.0001C63.8246 47.9653 48 63.6159 48 82.9531C48 102.29 63.8246 117.941 83.3768 117.941C88.933 117.941 94.1727 116.689 98.8497 114.428C99.131 114.846 99.4475 115.263 99.8343 115.611L118.261 133.835C121.18 136.722 125.892 136.722 128.811 133.835C131.73 130.983 131.73 126.323 128.811 123.436ZM55.4551 82.9531C55.4551 67.6851 67.9742 55.3385 83.3768 55.3385C98.8145 55.3385 111.298 67.7198 111.298 82.9531C111.298 98.2211 98.7794 110.568 83.3768 110.568C67.9742 110.603 55.4551 98.2211 55.4551 82.9531Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$1 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%2374B43D'/%3e%3cpath d='M61.3408 97.5419L82.9609 118.659L127.71 65.3632' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+var img = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23DE8806'/%3e%3cpath d='M90.5028 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5028 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+
+var responseAppearance = {
+    dev: {
+        fill: 'surfaceSecondary',
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'surfaceTertiary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    custom: {
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'accent',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    error: {
+        svgSrc: img$5,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'secondary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    success: {
+        svgSrc: img$1,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'accent',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    warning: {
+        svgSrc: img,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'primary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    fail: {
+        svgSrc: img$4,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'surfaceTertiary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    search: {
+        svgSrc: img$2,
+        svgFill: 'errorPrimary',
+        svgPathFill: 'surfaceItemTertiary',
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'surfaceTertiary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    cantLoadData: {
+        svgSrc: img$6,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'surfaceTertiary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+    refresh: {
+        svgSrc: img$3,
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 300,
+        primaryButtonAppearance: 'surfaceTertiary',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'surfaceSecondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'h2',
+        titleTextWeight: 400,
+    },
+};
 
 var responseConfig = {
     appearance: responseAppearance,
@@ -37,19 +218,9 @@ var responseConfig = {
     },
 };
 function Response(props) {
-    var after = props.after, appearance = props.appearance, before = props.before, className = props.className, imageSrc = props.imageSrc, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
+    var after = props.after, width = props.width, height = props.height, appearance = props.appearance, before = props.before, className = props.className, imageSrc = props.imageSrc, svgSrc = props.svgSrc, SvgImage = props.SvgImage, message = props.message, messageTextColor = props.messageTextColor, messageTextSize = props.messageTextSize, messageTextWeight = props.messageTextWeight, primaryButton = props.primaryButton, primaryButtonAfter = props.primaryButtonAfter, primaryButtonAppearance = props.primaryButtonAppearance, primaryButtonBefore = props.primaryButtonBefore, primaryButtonFill = props.primaryButtonFill, primaryButtonFillHover = props.primaryButtonFillHover, primaryButtonLabel = props.primaryButtonLabel, primaryButtonLabelTextColor = props.primaryButtonLabelTextColor, primaryButtonLabelTextSize = props.primaryButtonLabelTextSize, primaryButtonShape = props.primaryButtonShape, primaryButtonSize = props.primaryButtonSize, primaryButtonWidth = props.primaryButtonWidth, secondaryButton = props.secondaryButton, secondaryButtonAfter = props.secondaryButtonAfter, secondaryButtonAppearance = props.secondaryButtonAppearance, secondaryButtonBefore = props.secondaryButtonBefore, secondaryButtonFill = props.secondaryButtonFill, secondaryButtonFillHover = props.secondaryButtonFillHover, secondaryButtonLabel = props.secondaryButtonLabel, secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = props.secondaryButtonLabelTextSize, secondaryButtonShape = props.secondaryButtonShape, secondaryButtonSize = props.secondaryButtonSize, secondaryButtonWidth = props.secondaryButtonWidth, set = props.set, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
     // prettier-ignore
     var appearanceConfig = (appearance && responseConfig.appearance && responseConfig.appearance[appearance]);
-    var ImageComponent = useMemo(function () {
-        var src = imageSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc);
-        if (src) {
-            if (src.endsWith('.svg')) {
-                return jsx(SVG, { src: src });
-            }
-            return jsx("img", { src: src });
-        }
-        return null;
-    }, [imageSrc, appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc]);
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -78,6 +249,40 @@ function Response(props) {
         prefix: 'border_type_',
         propsKey: 'borderType',
     });
+    var svgFillClass = useDeviceTargetClass(props, {
+        prefix: 'svg_fill_',
+        propsKey: 'svgFill',
+    });
+    var svgPathFillClass = useDeviceTargetClass(props, {
+        prefix: 'svg_path_fill_',
+        propsKey: 'svgPathFill',
+    });
+    var ImageComponent = useMemo(function () {
+        var src = imageSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc) || svgSrc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgSrc);
+        var Image = SvgImage || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.SvgImage);
+        if (Image) {
+            var sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return jsx(Image, __assign({}, sizes));
+        }
+        if (src) {
+            if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
+                if (svgFillClass || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgFill)) {
+                    return jsx(SVG, { preProcessor: removeFillStroke, src: src });
+                }
+                else {
+                    return jsx(SVG, { src: src });
+                }
+            }
+            return jsx("img", { src: src });
+        }
+        return null;
+    }, [imageSrc, appearanceConfig, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     var responseStyles = useStyles(props).styles;
     return (jsxs("div", { className: clsx(className, 'response', fillClass ||
@@ -90,11 +295,19 @@ function Response(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
                 "border-color_".concat(appearanceConfig.borderColor)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, ImageComponent, jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextColor), textWeight: messageTextWeight, children: message }))] }), (primaryButtonLabel ||
+                    .toLowerCase()), borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, jsx("div", { className: clsx('response__image', svgFillClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgFill) &&
+                        "svg_fill_".concat(appearanceConfig.svgFill).replace(/([A-Z])/g, '-$1').toLowerCase()), svgPathFillClass ||
+                    ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgPathFill) &&
+                        "svg_path_fill_".concat(appearanceConfig.svgPathFill).replace(/([A-Z])/g, '-$1').toLowerCase())), children: ImageComponent }), jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextColor), textWeight: messageTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextWeight), children: message }))] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
                 appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel) ? (jsx(Button, { className: "response__button-item", width: primaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonWidth) || 'fill', labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabelTextSize), fill: primaryButtonFill, fillHover: primaryButtonFillHover, after: primaryButtonAfter, before: primaryButtonBefore, label: primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel), shape: primaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonShape), size: primaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonSize), appearance: primaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonAppearance) || 'dev', onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel) ? (jsx(Button, { className: "response__button-item", width: secondaryButtonWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonWidth) || 'fill', labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabelTextSize), fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, after: secondaryButtonAfter, before: secondaryButtonBefore, label: secondaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonLabel), shape: secondaryButtonShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonShape), size: secondaryButtonSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonSize), appearance: secondaryButtonAppearance || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.secondaryButtonAppearance) || 'dev', onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
 }
+var removeFillStroke = function (code) {
+    console.log(code);
+    return code.replace(/fill=".*?"/g, 'fill=""').replace(/fill='.*?'/g, "fill=''").replace(/stroke=".*?"/g, 'stroke=""').replace(/stroke='.*?'/g, "stroke=''");
+};
 
-export { Response, responseConfig };
+export { Response, responseAppearance, responseConfig };