@itcase/ui 1.4.2 → 1.4.5

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button-BtAUGGPc.js';
+import { B as Button } from '../Button-Bsrw4D7p.js';
 import { G as Group } from '../Group-DiMnEfge.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import 'lodash/camelCase';
@@ -21,49 +21,30 @@ import '../Icon-htF_V35Y.js';
 import '../Link-BhJ5BdyS.js';
 import '../Tooltip-BYgzNVYI.js';
 import '../Title-Dck3eHNM.js';
-import '../Loader-CsPvc-9g.js';
+import '../Loader-D4_r7LML.js';
 
-var img$7 = "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$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 d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
 
-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='%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$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$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='%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$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$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='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' 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='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$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='%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$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$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='%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 = "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";
 
-/* eslint-disable perfectionist/sort-objects */
 var responseAppearance = {
-    cantLoadData: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'surfaceTertiary',
-        primaryButtonLabelTextSize: 'l',
-        primaryButtonShape: 'rounded',
-        primaryButtonSize: 'xxl',
-        primaryButtonWidth: 'fill',
-        secondaryButtonAppearance: 'surfaceSecondary',
-        secondaryButtonLabelTextSize: 'l',
-        secondaryButtonShape: 'rounded',
-        secondaryButtonSize: 'xxl',
-        secondaryButtonWidth: 'fill',
-        svgSrc: img$7,
+    custom: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    custom: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
         primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -74,16 +55,15 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+    },
+    error: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    dev: {
-        fill: 'surfaceSecondary',
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'surfaceTertiary',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'secondary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -93,15 +73,17 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgFill: 'surfacePrimary',
+        SvgImage: img$5,
+    },
+    success: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    error: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'secondary',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -111,16 +93,17 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgSrc: img$6,
+        svgFill: 'successPrimary',
+        SvgImage: img$2,
+    },
+    warning: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    fail: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'surfaceTertiary',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'primary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -130,15 +113,16 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgSrc: img$5,
+        svgFill: 'warningPrimary',
+        SvgImage: img,
+    },
+    fail: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    refresh: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -149,36 +133,36 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgSrc: img$3,
+        svgFill: 'surfacePrimary',
+        SvgImage: img$4,
+    },
+    nothingFound: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    off: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'success',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
         primaryButtonWidth: 'fill',
-        secondaryButtonAppearance: 'secondary',
+        secondaryButtonAppearance: 'surfaceSecondary',
         secondaryButtonLabelTextSize: 'l',
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgFill: 'errorPrimary',
-        svgPathFill: 'surfaceItemTertiary',
-        svgSrc: img$4,
+        svgFill: 'surfacePrimary',
+        SvgImage: img$3,
+    },
+    unableLoadData: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    search: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -189,18 +173,17 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgFill: 'errorPrimary',
-        svgPathFill: 'surfaceItemTertiary',
-        svgSrc: img$2,
+        svgFill: 'surfacePrimary',
+        SvgImage: img$1,
+    },
+    refresh: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    success: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'accent',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -210,16 +193,17 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgSrc: img$1,
+        svgFill: 'surfacePrimary',
+        SvgImage: img$3,
+    },
+    confirm: {
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
         titleTextWeight: 400,
-    },
-    warning: {
-        messageTextColor: 'surfaceTextPrimary',
-        messageTextSize: 'm',
-        messageTextWeight: 400,
-        primaryButtonAppearance: 'primary',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        descTextWeight: 400,
+        primaryButtonAppearance: 'secondary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -229,28 +213,29 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
-        svgSrc: img,
-        titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'xxl',
-        titleTextWeight: 400,
+        svgFill: 'surfacePrimary',
+        SvgImage: img$6,
     },
 };
 
 var responseConfig = {
     appearance: responseAppearance,
-    setAppearance: function (newComponent) {
-        responseConfig.appearance = newComponent;
+    setAppearance: function (appearanceConfig) {
+        responseConfig.appearance = appearanceConfig;
     },
 };
 function Response(props) {
-    var width = props.width, height = props.height, 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, SvgImage = props.SvgImage, svgSrc = props.svgSrc, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClickPrimaryButton = props.onClickPrimaryButton, onClickSecondaryButton = props.onClickSecondaryButton;
-    // @ts-expect-error
-    var appearanceConfig = responseConfig.appearance && responseConfig.appearance[appearance];
+    var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, secondaryButton = props.secondaryButton, before = props.before, after = props.after, onClickSecondaryButton = props.onClickSecondaryButton;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultAppearance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultAppearance), (_a = responseConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, borderWidthClass = propsGenerator.borderWidthClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, svgPathFillClass = propsGenerator.svgPathFillClass, textAlignClass = propsGenerator.textAlignClass;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textAlignClass = propsGenerator.textAlignClass, primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc, onClickPrimaryButton = propsGenerator.onClickPrimaryButton;
     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);
+        var src = imageSrc || svgSrc;
+        var Image = SvgImage;
+        console.log(src);
         if (Image) {
             var sizes = {};
             if (width) {
@@ -263,7 +248,7 @@ function Response(props) {
         }
         if (src) {
             if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
-                if (svgFillClass || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.svgFill)) {
+                if (svgFillClass) {
                     return jsx(SVG, { preProcessor: removeFillStroke, src: src });
                 }
                 else {
@@ -276,11 +261,11 @@ function Response(props) {
     }, [imageSrc, appearanceConfig, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     var _a = useStyles(props), responseStyles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxs("div", { className: clsx(className, 'response', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "response_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), set && "response_set_".concat(set)), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(svgPathFillClass)), children: ImageComponent }), jsxs(Group, { className: clsx('response__desc', textAlignClass && "text-align_".concat(textAlignClass)), width: "fill", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'xxl', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '400', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.messageTextSize) || 'm', 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 ||
+    return (jsxs("div", { className: clsx(className, 'response', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "response_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(svgPathFillClass)), children: ImageComponent }), jsxs(Group, { className: clsx('response__desc', textAlignClass && "text-align_".concat(textAlignClass)), width: "fill", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize) || 'xxl', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextWeight) || '400', children: title })), desc && (jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (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] }));
+                appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsx(Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
 }
 var removeFillStroke = function (code) {
     return code

package/dist/components/Select.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text-C6NSmetx.js';
-import { B as Badge } from '../Badge-CGHosmYx.js';
+import { B as Badge } from '../Badge-C68XnlcL.js';
 import { G as Group } from '../Group-DiMnEfge.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import 'react-inlinesvg';

package/dist/components/Tab.js

@@ -4,7 +4,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-CGHosmYx.js';
+import { B as Badge } from '../Badge-C68XnlcL.js';
 import { D as Divider } from '../Divider-BQcBkzt1.js';
 import { a as Link } from '../Link-BhJ5BdyS.js';
 import { T as Text } from '../Text-C6NSmetx.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge } from '../Badge-CGHosmYx.js';
+import { B as Badge } from '../Badge-C68XnlcL.js';
 import { T as Text } from '../Text-C6NSmetx.js';
 import { T as Title } from '../Title-Dck3eHNM.js';
 import 'react';

package/dist/css/components/Badge/Badge.css

@@ -86,3 +86,53 @@
     }
   }
 }
+:root {
+  --badge-size-xxl-padding: 1m 1.5m;
+  --badge-size-xxl-min-width: 40px;
+  --badge-size-xxl-min-height: 40px;
+  --badge-size-xxl-gap: 5px;
+  --badge-type-icon-size-xxl-max-width: 40px;
+  --badge-type-icon-size-xxl-max-height: 40px;
+
+  --badge-size-xl-padding: 0.5m 1.25m;
+  --badge-size-xl-min-width: 32px;
+  --badge-size-xl-min-height: 32px;
+  --badge-size-xl-gap: 6px;
+  --badge-type-icon-size-xl-max-width: 32px;
+  --badge-type-icon-size-xl-max-height: 32px;
+
+  --badge-size-l-padding: 0.5m 1m;
+  --badge-size-l-min-width: 28px;
+  --badge-size-l-min-height: 28px;
+  --badge-size-l-gap: 4px;
+  --badge-type-icon-size-l-max-width: 28px;
+  --badge-type-icon-size-l-max-height: 28px;
+
+  --badge-size-m-padding: 0 0.75m;
+  --badge-size-m-min-width: 24px;
+  --badge-size-m-min-height: 24px;
+  --badge-size-m-gap: 2px;
+  --badge-type-icon-size-m-max-width: 24px;
+  --badge-type-icon-size-m-max-height: 24px;
+
+  --badge-size-s-padding: 0 0.5m;
+  --badge-size-s-min-width: 20px;
+  --badge-size-s-min-height: 20px;
+  --badge-size-s-gap: 0px;
+  --badge-type-icon-size-s-max-width: 20px;
+  --badge-type-icon-size-s-max-height: 20px;
+
+  --badge-size-xs-padding: 0 0.25m;
+  --badge-size-xs-min-width: 16px;
+  --badge-size-xs-min-height: 16px;
+  --badge-size-xs-gap: 2px;
+  --badge-type-icon-size-xs-max-width: 16px;
+  --badge-type-icon-size-xs-max-height: 16px;
+
+  --badge-size-xxs-padding: 0 0.5m;
+  --badge-size-xxs-min-width: 12px;
+  --badge-size-xxs-min-height: 12px;
+  --badge-size-xxs-gap: 0px;
+  --badge-type-icon-size-xxs-max-width: 12px;
+  --badge-type-icon-size-xxs-max-height: 12px;
+}

package/dist/css/components/Button/Button.css

@@ -63,6 +63,30 @@
     }
   }
 }
+.button {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: buttonSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes buttonSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .button {
   @each $size in xxs, xs, s, m, l, xl, xxl {
     &_size_$(size) {

package/dist/css/components/Checkbox/Checkbox.css

@@ -2,8 +2,7 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
-  column-gap: var(--checkbox-column-gap, 4px);
-  row-gap: var(--checkbox-row-gap, 0);
+  gap: var(--checkbox-row-gap, 0) var(--checkbox-column-gap, 4px);
   &__item {
     min-width: 16px;
     min-height: 16px;
@@ -58,6 +57,30 @@
     }
   }
 }
+.checkbox {
+  &&_skeleton {
+    background-size: 200% !important;
+    border: none;
+    animation: checkboxSkeleton 3s infinite linear !important;
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    ) !important;
+    & * {
+      opacity: 0%;
+    }
+  }
+}
+@keyframes checkboxSkeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .checkbox {
   &_shape {
     &_rounded {

package/dist/css/components/Checkmark/Checkmark.css

@@ -10,19 +10,17 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    & svg {
-      transform: scale(0.65);
-    }
   }
 }
 .checkmark {
   &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
+    @each $size, $scale in (xxl, xl, l, m, s, xs, xxs), (1.2, 1, 0.8, 0.7, 0.7, 0.7, 0.8) {
       &_$(size) {
-        min-width: var(--checkmark-width-$(size));
-        min-height: var(--checkmark-height-$(size));
-        max-width: var(--checkmark-width-$(size));
-        max-height: var(--checkmark-height-$(size));
+        width: var(--checkmark-$(size)-width);
+        height: var(--checkmark-$(size)-height);
+        & svg {
+          transform: scale($(scale));
+        }
       }
     }
   }

package/dist/css/components/Label/Label.css

@@ -12,19 +12,17 @@
   }
 }
 .label {
-  &&_mode {
-    &_skeleton {
-      background-image: linear-gradient(
-        90deg,
-        var(--color-surface-secondary),
-        var(--color-surface-tertiary),
-        var(--color-surface-secondary)
-      );
-      background-size: 200%;
-      animation: labelSkeleton 3s infinite linear;
-      ^^&__label {
-        color: transparent;
-      }
+  &_skeleton {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-surface-secondary),
+      var(--color-surface-tertiary),
+      var(--color-surface-secondary)
+    );
+    background-size: 200%;
+    animation: labelSkeleton 3s infinite linear;
+    ^&__label {
+      color: transparent;
     }
   }
 }