@itcase/ui 1.2.30 → 1.2.32

package/dist/cjs/components/Page.js

@@ -1,19 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var alignDirection = require('../constants/componentProps/alignDirection.js');
-var align = require('../constants/componentProps/align.js');
-var fill = require('../constants/componentProps/fill.js');
-var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
-var position = require('../constants/componentProps/position.js');
-var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
@@ -22,7 +15,7 @@ require('lodash/upperFirst');
 require('../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.useDeviceTargetClass(props, {
         prefix: 'align_',
         propsKey: 'alignDirection',
@@ -47,45 +40,9 @@ function Page(props) {
         prefix: 'position_',
         propsKey: 'position',
     });
+    // @ts-expect-error
     var _a = useStyles.useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxRuntime.jsx("div", { id: id, className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: styles, children: jsxRuntime.jsxs("div", { className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'), style: wrapperStyles, children: [before, children, after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), id: id, style: styles, children: jsxRuntime.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(fill.default),
-    fillMobile: PropTypes.oneOf(fill.default),
-    fillTablet: PropTypes.oneOf(fill.default),
-    fillDesktop: PropTypes.oneOf(fill.default),
-    type: PropTypes.string,
-    tag: PropTypes.string,
-    position: PropTypes.oneOf(position.default),
-    positionMobile: PropTypes.oneOf(position.default),
-    positionTablet: PropTypes.oneOf(position.default),
-    positionDesktop: PropTypes.oneOf(position.default),
-    wrapperPosition: PropTypes.oneOf(position.default),
-    wrapperPositionMobile: PropTypes.oneOf(position.default),
-    wrapperPositionTablet: PropTypes.oneOf(position.default),
-    wrapperPositionDesktop: PropTypes.oneOf(position.default),
-    horizontalResizing: PropTypes.oneOf(horizontalResizeMode.default),
-    horizontalResizingMobile: PropTypes.oneOf(horizontalResizeMode.default),
-    horizontalResizingTablet: PropTypes.oneOf(horizontalResizeMode.default),
-    horizontalResizingDesktop: PropTypes.oneOf(horizontalResizeMode.default),
-    verticalResizing: PropTypes.oneOf(verticalResizeMode.default),
-    verticalResizingMobile: PropTypes.oneOf(verticalResizeMode.default),
-    verticalResizingTablet: PropTypes.oneOf(verticalResizeMode.default),
-    verticalResizingDesktop: PropTypes.oneOf(verticalResizeMode.default),
-    align: PropTypes.oneOf(align.default),
-    alignMobile: PropTypes.oneOf(align.default),
-    alignTablet: PropTypes.oneOf(align.default),
-    alignDesktop: PropTypes.oneOf(align.default),
-    alignDirection: PropTypes.oneOf(alignDirection.default),
-    alignDirectionMobile: PropTypes.oneOf(alignDirection.default),
-    alignDirectionTablet: PropTypes.oneOf(alignDirection.default),
-    alignDirectionDesktop: PropTypes.oneOf(alignDirection.default),
-};
 
 exports.Page = Page;

package/dist/cjs/components/Pagination.js

@@ -6,29 +6,24 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../../DropdownItem-toApJyeB.js');
-var Icon = require('../../Icon-B2BwTQnP.js');
-var Text = require('../../Text-CC0xnhmx.js');
-require('lodash/castArray');
+var DropdownItem = require('../../DropdownItem-E9HkOU63.js');
+var Icon = require('../../Icon-C8ACV9r7.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Divider-BjB5MD6u.js');
+require('../../Divider-BoB-f9Gr.js');
 require('../../Link-CqWzwh8V.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react-inlinesvg');
-require('../appearance/Icon.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Title-Ze_OL1Co.js');
-require('../appearance/Title.js');
-require('../appearance/Text.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Title-DWIc05TX.js');
 
 var paginationConfig = {
     appearance: undefined,

package/dist/cjs/components/Panel.js

@@ -5,19 +5,16 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-BiN0haVp.js');
-var Text = require('../../Text-CC0xnhmx.js');
-require('lodash/castArray');
+var Group = require('../../Group-u6YDbMxn.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/Group.js');
-require('../appearance/Text.js');
 
 var panelConfig = {
     appearance: undefined,

package/dist/cjs/components/Radio.js

@@ -2,28 +2,44 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var index = require('../appearance/Radio.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var Text = require('../../Text-CC0xnhmx.js');
+var Text = require('../../Text-R6XNq6Ca.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../appearance/Text.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../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: index.radioState,
+    appearance: radioState,
     setAppearance: function (newComponent) {
         radioConfig.appearance = newComponent;
     },
-    state: index.radioAppearance,
+    state: radioAppearance,
     // eslint-disable-next-line perfectionist/sort-objects
     setState: function (newComponent) {
         radioConfig.state = newComponent;
@@ -96,7 +112,6 @@ function Radio(props) {
 }
 Radio.defaultProps = {
     shape: 'circular',
-    tag: 'label',
 };
 
 exports.Radio = Radio;

package/dist/cjs/components/RangeSlider.js

@@ -6,10 +6,9 @@ var Slider = require('rc-slider');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');

package/dist/cjs/components/Response.js

@@ -1,55 +1,228 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
-var index = require('../appearance/Response.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Button = require('../../Button-BcOsYgoT.js');
-var Group = require('../../Group-BiN0haVp.js');
-var Text = require('../../Text-CC0xnhmx.js');
-var Title = require('../../Title-Ze_OL1Co.js');
-require('lodash/castArray');
+var Button = require('../../Button-ChSAts3j.js');
+var Group = require('../../Group-u6YDbMxn.js');
+var Text = require('../../Text-R6XNq6Ca.js');
+var Title = require('../../Title-DWIc05TX.js');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../appearance/Button.js');
-require('../../Icon-B2BwTQnP.js');
-require('../appearance/Icon.js');
+require('../../Icon-C8ACV9r7.js');
 require('../../Link-CqWzwh8V.js');
-require('../../tslib.es6-CCZ3TN_7.js');
-require('../../Tooltip-PrwacZFC.js');
-require('../appearance/Tooltip.js');
-require('../../Loader-Ck59IXGG.js');
-require('../appearance/Loader.js');
-require('../appearance/Group.js');
-require('../appearance/Text.js');
-require('../appearance/Title.js');
+require('../../Tooltip-BswHy19O.js');
+require('../../Loader-DReoCdZ2.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: index.responseAppearance,
+    appearance: responseAppearance,
     setAppearance: function (newComponent) {
         responseConfig.appearance = newComponent;
     },
 };
 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 = React.useMemo(function () {
-        if (imageSrc) {
-            if (imageSrc.endsWith('.svg')) {
-                return jsxRuntime.jsx(SVG, { src: imageSrc });
-            }
-            return jsxRuntime.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.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -78,21 +251,67 @@ function Response(props) {
         prefix: 'border_type_',
         propsKey: 'borderType',
     });
+    var svgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'svg_fill_',
+        propsKey: 'svgFill',
+    });
+    var svgPathFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'svg_path_fill_',
+        propsKey: 'svgPathFill',
+    });
+    var ImageComponent = React.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 jsxRuntime.jsx(Image, tslib_es6.__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 jsxRuntime.jsx(SVG, { preProcessor: removeFillStroke, src: src });
+                }
+                else {
+                    return jsxRuntime.jsx(SVG, { src: src });
+                }
+            }
+            return jsxRuntime.jsx("img", { src: src });
+        }
+        return null;
+    }, [imageSrc, appearanceConfig, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     var responseStyles = useStyles.useStyles(props).styles;
-    var appearanceConfig = appearance && responseConfig.appearance && responseConfig.appearance[appearance];
     return (jsxRuntime.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), jsxRuntime.jsxs(Group.Group, { className: "response__desc", width: "fill", children: [title && (jsxRuntime.jsx(Title.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 && (jsxRuntime.jsx(Text.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, jsxRuntime.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 }), jsxRuntime.jsxs(Group.Group, { className: "response__desc", width: "fill", children: [title && (jsxRuntime.jsx(Title.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 && (jsxRuntime.jsx(Text.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) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.primaryButtonLabel) ? (jsxRuntime.jsx(Button.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) ? (jsxRuntime.jsx(Button.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=''");
+};
 
 exports.Response = Response;
+exports.responseAppearance = responseAppearance;
 exports.responseConfig = responseConfig;

package/dist/cjs/components/SVGContent.js

@@ -5,10 +5,9 @@ var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');

package/dist/cjs/components/ScrollOnDrag.js

@@ -7,10 +7,9 @@ var clsx = require('clsx');
 var reactIndianaDragScroll = require('react-indiana-drag-scroll');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');

package/dist/cjs/components/ScrollToView.js

@@ -6,10 +6,9 @@ var reactScroll = require('react-scroll');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('lodash/castArray');
 require('lodash/camelCase');
+require('lodash/castArray');
 require('../context/UIContext.js');
-require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/maxBy');

package/dist/cjs/components/Scrollbar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Scrollbar = require('../../Scrollbar-DVlIZzvz.js');
+var Scrollbar = require('../../Scrollbar-CKbA0jQU.js');
 require('react/jsx-runtime');
 require('clsx');
 require('react-scrollbars-custom');