@itcase/ui 1.2.30 → 1.2.32

package/dist/components/Page.js

@@ -1,17 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import alignDirectionProps from '../constants/componentProps/alignDirection.js';
-import alignProps from '../constants/componentProps/align.js';
-import fillProps from '../constants/componentProps/fill.js';
-import horizontalResizeModeProps from '../constants/componentProps/horizontalResizeMode.js';
-import positionProps from '../constants/componentProps/position.js';
-import verticalResizeModeProps from '../constants/componentProps/verticalResizeMode.js';
 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';
@@ -20,7 +13,7 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
 function Page(props) {
-    var after = props.after, before = props.before, children = props.children, className = props.className, id = props.id; props.tag; var type = props.type;
+    var id = props.id, children = props.children, after = props.after, before = props.before, className = props.className, type = props.type;
     var alignDirectionClass = useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -45,45 +38,9 @@ function Page(props) {
         prefix: 'position_',
         propsKey: 'position',
     });
+    // @ts-expect-error
     var _a = useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsx("div", { id: id, className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: styles, children: jsxs("div", { className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'), style: wrapperStyles, children: [before, children, after] }) }));
+    return (jsx("div", { className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), id: id, style: styles, children: jsxs("div", { className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'), style: wrapperStyles, children: [before, children, after] }) }));
 }
-Page.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    before: PropTypes.string,
-    after: PropTypes.string,
-    id: PropTypes.string,
-    fill: PropTypes.oneOf(fillProps),
-    fillMobile: PropTypes.oneOf(fillProps),
-    fillTablet: PropTypes.oneOf(fillProps),
-    fillDesktop: PropTypes.oneOf(fillProps),
-    type: PropTypes.string,
-    tag: PropTypes.string,
-    position: PropTypes.oneOf(positionProps),
-    positionMobile: PropTypes.oneOf(positionProps),
-    positionTablet: PropTypes.oneOf(positionProps),
-    positionDesktop: PropTypes.oneOf(positionProps),
-    wrapperPosition: PropTypes.oneOf(positionProps),
-    wrapperPositionMobile: PropTypes.oneOf(positionProps),
-    wrapperPositionTablet: PropTypes.oneOf(positionProps),
-    wrapperPositionDesktop: PropTypes.oneOf(positionProps),
-    horizontalResizing: PropTypes.oneOf(horizontalResizeModeProps),
-    horizontalResizingMobile: PropTypes.oneOf(horizontalResizeModeProps),
-    horizontalResizingTablet: PropTypes.oneOf(horizontalResizeModeProps),
-    horizontalResizingDesktop: PropTypes.oneOf(horizontalResizeModeProps),
-    verticalResizing: PropTypes.oneOf(verticalResizeModeProps),
-    verticalResizingMobile: PropTypes.oneOf(verticalResizeModeProps),
-    verticalResizingTablet: PropTypes.oneOf(verticalResizeModeProps),
-    verticalResizingDesktop: PropTypes.oneOf(verticalResizeModeProps),
-    align: PropTypes.oneOf(alignProps),
-    alignMobile: PropTypes.oneOf(alignProps),
-    alignTablet: PropTypes.oneOf(alignProps),
-    alignDesktop: PropTypes.oneOf(alignProps),
-    alignDirection: PropTypes.oneOf(alignDirectionProps),
-    alignDirectionMobile: PropTypes.oneOf(alignDirectionProps),
-    alignDirectionTablet: PropTypes.oneOf(alignDirectionProps),
-    alignDirectionDesktop: PropTypes.oneOf(alignDirectionProps),
-};
 
 export { Page };

package/dist/components/Pagination.js

@@ -4,29 +4,24 @@ 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-CFkRx8LX.js';
-import { I as Icon } from '../Icon-ClsRaxDk.js';
-import { T as Text } from '../Text-kxGZButz.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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-U5UdY-ef.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
+import '../Divider-DHIuQUsH.js';
+import '../Link-CeQuavin.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Title-CQ_Fr1hO.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,19 +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-kxGZButz.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 'prop-types';
 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,21 +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-kxGZButz.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 'prop-types';
 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) {
@@ -94,7 +110,6 @@ function Radio(props) {
 }
 Radio.defaultProps = {
     shape: 'circular',
-    tag: 'label',
 };
 
 export { Radio, radioConfig };

package/dist/components/RangeSlider.js

@@ -4,10 +4,9 @@ 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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/Response.js

@@ -1,35 +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-avhviao1.js';
-import { G as Group } from '../Group-Dc70Z4_7.js';
-import { T as Text } from '../Text-kxGZButz.js';
-import { T as Title } from '../Title-CQ_Fr1hO.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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Button.js';
-import '../Icon-ClsRaxDk.js';
-import '../appearance/Icon.js';
-import '../Link-CzC1kU5C.js';
-import '../tslib.es6-w7hdJ3oZ.js';
-import '../Tooltip-ccRCMYQM.js';
-import '../appearance/Tooltip.js';
-import '../Loader-CU_5Ydmy.js';
-import '../appearance/Loader.js';
-import '../appearance/Group.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
+import '../Icon-DptCmI_y.js';
+import '../Link-CeQuavin.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,
@@ -38,16 +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 ImageComponent = useMemo(function () {
-        if (imageSrc) {
-            if (imageSrc.endsWith('.svg')) {
-                return jsx(SVG, { src: imageSrc });
-            }
-            return jsx("img", { src: imageSrc });
-        }
-        return null;
-    }, [imageSrc]);
+    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 fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -76,20 +249,65 @@ 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;
-    var appearanceConfig = appearance && responseConfig.appearance && responseConfig.appearance[appearance];
     return (jsxs("div", { className: clsx(className, 'response', fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
                 "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.shape) &&
-                "fill_hover_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && "response_set_".concat(set)), style: responseStyles, children: [before, ImageComponent || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.imageSrc), 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 ||
+                "fill_hover_".concat(appearanceConfig.shape).replace(/([A-Z])/g, '-$1').toLowerCase()), borderColorClass ||
+            ((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, 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 };

package/dist/components/SVGContent.js

@@ -3,10 +3,9 @@ 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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/ScrollOnDrag.js

@@ -1,14 +1,13 @@
-import { a as __assign } from '../tslib.es6-w7hdJ3oZ.js';
+import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import clsx from 'clsx';
 import { ScrollContainer } from 'react-indiana-drag-scroll';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
-import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/ScrollToView.js

@@ -4,10 +4,9 @@ import { ScrollLink } from 'react-scroll';
 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 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';

package/dist/components/Scrollbar.js

@@ -1,4 +1,4 @@
-export { S as Scrollbar } from '../Scrollbar-CrGXCZ_F.js';
+export { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react-scrollbars-custom';