@itcase/ui 1.8.36 → 1.8.37

package/dist/{Avatar_cjs_DBoMi2WA.js → Avatar_cjs_nMPCDjk8.js}

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Image = require('./Image_cjs_CCWqbNn4.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 

package/dist/{Avatar_es_DHREqfOD.js → Avatar_es_B73a6TzA.js}

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { I as Icon, B as Badge } from './Tooltip_es_LV5ZNg3B.js';
+import { I as Icon, B as Badge } from './Tooltip_es_ltCY-w4M.js';
 import { I as Image } from './Image_es_DZUVp0FS.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 

package/dist/{Button_cjs_djJUZATX.js → Button_cjs_plv5-qcj.js}

@@ -4,7 +4,7 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Link = require('./Link_cjs_DbRGq2Yk.js');
 var Loader = require('./Loader_cjs_Ca4i0sER.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
@@ -302,6 +302,15 @@ var buttonAppearanceSurface = {
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
 };
 
 var buttonAppearanceWarning = {

package/dist/{Button_es_X1DzVhok.js → Button_es_BigB2Wz6.js}

@@ -2,7 +2,7 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { I as Icon } from './Tooltip_es_LV5ZNg3B.js';
+import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
 import { a as LinkWrapper } from './Link_es_DxtZLeKY.js';
 import { L as Loader } from './Loader_es_GYOr0UTX.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
@@ -300,6 +300,15 @@ var buttonAppearanceSurface = {
         iconFillIcon: 'surfaceItemPrimary',
         loaderAppearance: 'surfacePrimary',
     },
+    surfaceQuaternary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        labelTextColor: 'surfaceTextPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+        iconFillIcon: 'surfaceItemPrimary',
+        loaderAppearance: 'surfacePrimary',
+    },
 };
 
 var buttonAppearanceWarning = {

package/dist/{ChipsGroup_cjs_5xsEchPo.js → ChipsGroup_cjs_DrOhD-Fc.js}

@@ -6,7 +6,7 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var React = require('react');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var chipsAppearanceAccent = {
@@ -180,9 +180,7 @@ var chipsAppearanceStyle = {
     outlined: {
         fill: 'none',
     },
-    full: {
-        borderColor: 'none',
-    },
+    full: {},
     ghost: {
         fill: 'none',
         borderColor: 'none',

package/dist/{ChipsGroup_es_4TOkv-fm.js → ChipsGroup_es_B9m4l0wN.js}

@@ -4,7 +4,7 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { useMemo } from 'react';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, B as Badge } from './Tooltip_es_LV5ZNg3B.js';
+import { I as Icon, B as Badge } from './Tooltip_es_ltCY-w4M.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var chipsAppearanceAccent = {
@@ -178,9 +178,7 @@ var chipsAppearanceStyle = {
     outlined: {
         fill: 'none',
     },
-    full: {
-        borderColor: 'none',
-    },
+    full: {},
     ghost: {
         fill: 'none',
         borderColor: 'none',

package/dist/{DatePicker_cjs_DffhgUnQ.js → DatePicker_cjs_CmqgSNw7.js}

@@ -8,10 +8,10 @@ var locale = require('date-fns/locale');
 var DatePicker = require('react-datepicker');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Button = require('./Button_cjs_djJUZATX.js');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Button = require('./Button_cjs_plv5-qcj.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Input = require('./Input_cjs_CPmXkQGd.js');
-var Label = require('./Label_cjs_C88e2CIP.js');
+var Label = require('./Label_cjs_BGJfyrOL.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
 

package/dist/{DatePicker_es_GmkagjKf.js → DatePicker_es_mk9wFTe9.js}

@@ -6,10 +6,10 @@ import { ru } from 'date-fns/locale';
 import DatePicker from 'react-datepicker';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { B as Button } from './Button_es_X1DzVhok.js';
-import { I as Icon } from './Tooltip_es_LV5ZNg3B.js';
+import { B as Button } from './Button_es_BigB2Wz6.js';
+import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
 import { I as Input } from './Input_es_D9Y1Rj5Y.js';
-import { L as Label } from './Label_es_Bn2aRjLl.js';
+import { L as Label } from './Label_es_C4Px7b-N.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 import { icons14 } from '@itcase/icons/default';
 

package/dist/{DropdownItem_cjs_DxBpJAi9.js → DropdownItem_cjs_DQvByLbN.js}

@@ -7,7 +7,7 @@ var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDe
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
 var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
 var Divider = require('./Divider_cjs_BmCJj3TN.js');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 function Dropdown(props) {

package/dist/{DropdownItem_es_Loneq6M7.js → DropdownItem_es_KppIfto7.js}

@@ -5,7 +5,7 @@ import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevi
 import { useStyles } from './hooks/useStyles/useStyles.js';
 import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
 import { D as Divider } from './Divider_es_kY-30pft.js';
-import { I as Icon } from './Tooltip_es_LV5ZNg3B.js';
+import { I as Icon } from './Tooltip_es_ltCY-w4M.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 function Dropdown(props) {

package/dist/{Label_cjs_C88e2CIP.js → Label_cjs_BGJfyrOL.js}

@@ -6,16 +6,16 @@ var React = require('react');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-var Tooltip = require('./Tooltip_cjs_oS1iOamX.js');
+var Tooltip = require('./Tooltip_cjs_DHduWa-v.js');
 var Text = require('./Text_cjs_C9fOm0nd.js');
 
 var labelAppearanceAccent = {
     accentMutedPrimary: {
-        fill: 'accentMutedPrimary',
-        labelTextColor: 'accentMutedTextQuaternary',
-        borderColor: 'accentMutedBorderSecondary',
-        iconAfterFillIcon: 'accentMutedItemQuaternary',
-        iconBeforeFillIcon: 'accentMutedItemQuaternary',
+        fill: 'accentTertiary',
+        labelTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBeforeFillIcon: 'accentItemQuaternary',
     },
     accentPrimary: {
         fill: 'accentPrimary',
@@ -32,11 +32,11 @@ var labelAppearanceAccent = {
 
 var labelAppearanceDanger = {
     dangerMutedPrimary: {
-        fill: 'dangerMutedPrimary',
-        labelTextColor: 'dangerMutedTextQuaternary',
-        borderColor: 'dangerMutedBorderQuaternary',
-        iconAfterFillIcon: 'dangerMutedItemQuaternary',
-        iconBeforeFillIcon: 'dangerMutedItemQuaternary',
+        fill: 'dangerTertiary',
+        labelTextColor: 'dangerTextQuaternary',
+        borderColor: 'dangerBorderQuaternary',
+        iconAfterFillIcon: 'dangerItemQuaternary',
+        iconBeforeFillIcon: 'dangerItemQuaternary',
     },
     dangerPrimary: {
         fill: 'dangerPrimary',
@@ -49,7 +49,7 @@ var labelAppearanceDanger = {
 
 var labelAppearanceDisable = {
     disableMutedPrimary: {
-        fill: 'disableMutedPrimary',
+        fill: 'disableMuted',
         labelTextColor: 'disableMutedTextPrimary',
         borderColor: 'disableMutedBorderSecondary',
         iconAfterFillIcon: 'disableMutedItemPrimary',
@@ -66,11 +66,11 @@ var labelAppearanceDisable = {
 
 var labelAppearanceError = {
     errorMutedPrimary: {
-        fill: 'errorMutedPrimary',
-        labelTextColor: 'errorMutedTextQuaternary',
-        borderColor: 'errorMutedBorderSecondary',
-        iconAfterFillIcon: 'errorMutedItemQuaternary',
-        iconBeforeFillIcon: 'errorMutedItemQuaternary',
+        fill: 'errorDisabled',
+        labelTextColor: 'errorTextQuaternary',
+        borderColor: 'errorBorderSecondary',
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBeforeFillIcon: 'errorItemQuaternary',
     },
     errorPrimary: {
         fill: 'errorPrimary',
@@ -84,7 +84,7 @@ var labelAppearanceError = {
 
 var labelAppearanceInfo = {
     infoMutedPrimary: {
-        fill: 'infoMutedPrimary',
+        fill: 'infoMuted',
         labelTextColor: 'infoMutedTextPrimary',
         borderColor: 'infoMutedBorderSecondary',
         iconAfterFillIcon: 'infoMutedItemPrimary',
@@ -108,28 +108,29 @@ var labelAppearanceInfo = {
 
 var labelAppearancePrimary = {
     primaryMutedPrimary: {
-        fill: 'primaryMutedPrimary',
-        labelTextColor: 'primaryMutedTextSecondary',
-        borderColor: 'primaryMutedBorderTertiary',
-        iconAfterFillIcon: 'primaryMutedItemSecondary',
-        iconBeforeFillIcon: 'primaryMutedItemSecondary',
+        fill: 'primaryDisabled',
+        labelTextColor: 'primaryTextSecondary',
+        labelTextColorHover: 'primaryTextSecondary',
+        borderColor: 'primaryBorderTertiary',
+        iconAfterFillIcon: 'primaryItemSecondary',
+        iconBeforeFillIcon: 'primaryItemSecondary',
     },
     primaryPrimary: {
-        fill: 'primaryPrimary',
-        labelTextColor: 'primaryTextPrimary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'dangerItemPrimary',
-        iconBeforeFillIcon: 'dangerItemPrimary',
+        fill: 'primaryDisabled',
+        labelTextColor: 'primaryTextSecondary',
+        borderColor: 'primaryBorderTertiary',
+        iconAfterFillIcon: 'primaryItemSecondary',
+        iconBeforeFillIcon: 'primaryItemSecondary',
     },
 };
 
 var labelAppearanceSecondary = {
     secondaryMutedPrimary: {
-        fill: 'secondaryMutedPrimary',
-        labelTextColor: 'secondaryMutedTextQuaternary',
-        borderColor: 'secondaryMutedBorderDisabled',
-        iconAfterFillIcon: 'secondaryMutedItemQuaternary',
-        iconBeforeFillIcon: 'secondaryMutedItemQuaternary',
+        fill: 'secondaryDisabled',
+        labelTextColor: 'secondaryTextQuaternary',
+        borderColor: 'secondaryBorderDisabled',
+        iconAfterFillIcon: 'secondaryItemQuaternary',
+        iconBeforeFillIcon: 'secondaryItemQuaternary',
     },
     secondaryPrimary: {
         fill: 'secondaryPrimary',
@@ -215,11 +216,11 @@ var labelAppearanceStyle = {
 
 var labelAppearanceSuccess = {
     successMutedPrimary: {
-        fill: 'successMutedPrimary',
-        labelTextColor: 'successMutedTextPrimary',
-        borderColor: 'successMutedBorderSecondary',
-        iconAfterFillIcon: 'successMutedItemPrimary',
-        iconBeforeFillIcon: 'successMutedItemPrimary',
+        fill: 'successTertiary',
+        labelTextColor: 'successTextQuaternary',
+        borderColor: 'successBorderQuaternary',
+        iconAfterFillIcon: 'successItemQuaternary',
+        iconBeforeFillIcon: 'successItemQuaternary',
     },
     successPrimary: {
         fill: 'successPrimary',
@@ -233,11 +234,12 @@ var labelAppearanceSuccess = {
 
 var labelAppearanceSurface = {
     surfaceMutedPrimary: {
-        fill: 'surfaceMutedPrimary',
-        labelTextColor: 'surfaceMutedTextQuaternary',
-        borderColor: 'surfaceMutedBorderQuaternary',
-        iconAfterFillIcon: 'surfaceMutedItemQuaternary',
-        iconBeforeFillIcon: 'surfaceMutedItemQuaternary',
+        fill: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextQuaternary',
+        labelTextColorHover: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemQuaternary',
+        iconBeforeFillIcon: 'surfaceItemQuaternary',
     },
     surfacePrimary: {
         fill: 'surfacePrimary',
@@ -262,11 +264,11 @@ var labelAppearanceSurface = {
 
 var labelAppearanceWarning = {
     warningMutedPrimary: {
-        fill: 'warningMutedPrimary',
-        labelTextColor: 'warningMutedTextSecondary',
-        borderColor: 'warningMutedBorderSecondary',
-        iconAfterFillIcon: 'warningMutedItemSecondary',
-        iconBeforeFillIcon: 'warningMutedItemSecondary',
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBeforeFillIcon: 'warningItemSecondary',
     },
     warningPrimary: {
         fill: 'warningPrimary',

package/dist/{Label_es_Bn2aRjLl.js → Label_es_C4Px7b-N.js}

@@ -4,16 +4,16 @@ import { useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from './hooks/useStyles/useStyles.js';
-import { I as Icon, T as Tooltip } from './Tooltip_es_LV5ZNg3B.js';
+import { I as Icon, T as Tooltip } from './Tooltip_es_ltCY-w4M.js';
 import { T as Text } from './Text_es_BfLRfj-5.js';
 
 var labelAppearanceAccent = {
     accentMutedPrimary: {
-        fill: 'accentMutedPrimary',
-        labelTextColor: 'accentMutedTextQuaternary',
-        borderColor: 'accentMutedBorderSecondary',
-        iconAfterFillIcon: 'accentMutedItemQuaternary',
-        iconBeforeFillIcon: 'accentMutedItemQuaternary',
+        fill: 'accentTertiary',
+        labelTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBeforeFillIcon: 'accentItemQuaternary',
     },
     accentPrimary: {
         fill: 'accentPrimary',
@@ -30,11 +30,11 @@ var labelAppearanceAccent = {
 
 var labelAppearanceDanger = {
     dangerMutedPrimary: {
-        fill: 'dangerMutedPrimary',
-        labelTextColor: 'dangerMutedTextQuaternary',
-        borderColor: 'dangerMutedBorderQuaternary',
-        iconAfterFillIcon: 'dangerMutedItemQuaternary',
-        iconBeforeFillIcon: 'dangerMutedItemQuaternary',
+        fill: 'dangerTertiary',
+        labelTextColor: 'dangerTextQuaternary',
+        borderColor: 'dangerBorderQuaternary',
+        iconAfterFillIcon: 'dangerItemQuaternary',
+        iconBeforeFillIcon: 'dangerItemQuaternary',
     },
     dangerPrimary: {
         fill: 'dangerPrimary',
@@ -47,7 +47,7 @@ var labelAppearanceDanger = {
 
 var labelAppearanceDisable = {
     disableMutedPrimary: {
-        fill: 'disableMutedPrimary',
+        fill: 'disableMuted',
         labelTextColor: 'disableMutedTextPrimary',
         borderColor: 'disableMutedBorderSecondary',
         iconAfterFillIcon: 'disableMutedItemPrimary',
@@ -64,11 +64,11 @@ var labelAppearanceDisable = {
 
 var labelAppearanceError = {
     errorMutedPrimary: {
-        fill: 'errorMutedPrimary',
-        labelTextColor: 'errorMutedTextQuaternary',
-        borderColor: 'errorMutedBorderSecondary',
-        iconAfterFillIcon: 'errorMutedItemQuaternary',
-        iconBeforeFillIcon: 'errorMutedItemQuaternary',
+        fill: 'errorDisabled',
+        labelTextColor: 'errorTextQuaternary',
+        borderColor: 'errorBorderSecondary',
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBeforeFillIcon: 'errorItemQuaternary',
     },
     errorPrimary: {
         fill: 'errorPrimary',
@@ -82,7 +82,7 @@ var labelAppearanceError = {
 
 var labelAppearanceInfo = {
     infoMutedPrimary: {
-        fill: 'infoMutedPrimary',
+        fill: 'infoMuted',
         labelTextColor: 'infoMutedTextPrimary',
         borderColor: 'infoMutedBorderSecondary',
         iconAfterFillIcon: 'infoMutedItemPrimary',
@@ -106,28 +106,29 @@ var labelAppearanceInfo = {
 
 var labelAppearancePrimary = {
     primaryMutedPrimary: {
-        fill: 'primaryMutedPrimary',
-        labelTextColor: 'primaryMutedTextSecondary',
-        borderColor: 'primaryMutedBorderTertiary',
-        iconAfterFillIcon: 'primaryMutedItemSecondary',
-        iconBeforeFillIcon: 'primaryMutedItemSecondary',
+        fill: 'primaryDisabled',
+        labelTextColor: 'primaryTextSecondary',
+        labelTextColorHover: 'primaryTextSecondary',
+        borderColor: 'primaryBorderTertiary',
+        iconAfterFillIcon: 'primaryItemSecondary',
+        iconBeforeFillIcon: 'primaryItemSecondary',
     },
     primaryPrimary: {
-        fill: 'primaryPrimary',
-        labelTextColor: 'primaryTextPrimary',
-        borderColor: 'primaryBorderSecondary',
-        iconAfterFillIcon: 'dangerItemPrimary',
-        iconBeforeFillIcon: 'dangerItemPrimary',
+        fill: 'primaryDisabled',
+        labelTextColor: 'primaryTextSecondary',
+        borderColor: 'primaryBorderTertiary',
+        iconAfterFillIcon: 'primaryItemSecondary',
+        iconBeforeFillIcon: 'primaryItemSecondary',
     },
 };
 
 var labelAppearanceSecondary = {
     secondaryMutedPrimary: {
-        fill: 'secondaryMutedPrimary',
-        labelTextColor: 'secondaryMutedTextQuaternary',
-        borderColor: 'secondaryMutedBorderDisabled',
-        iconAfterFillIcon: 'secondaryMutedItemQuaternary',
-        iconBeforeFillIcon: 'secondaryMutedItemQuaternary',
+        fill: 'secondaryDisabled',
+        labelTextColor: 'secondaryTextQuaternary',
+        borderColor: 'secondaryBorderDisabled',
+        iconAfterFillIcon: 'secondaryItemQuaternary',
+        iconBeforeFillIcon: 'secondaryItemQuaternary',
     },
     secondaryPrimary: {
         fill: 'secondaryPrimary',
@@ -213,11 +214,11 @@ var labelAppearanceStyle = {
 
 var labelAppearanceSuccess = {
     successMutedPrimary: {
-        fill: 'successMutedPrimary',
-        labelTextColor: 'successMutedTextPrimary',
-        borderColor: 'successMutedBorderSecondary',
-        iconAfterFillIcon: 'successMutedItemPrimary',
-        iconBeforeFillIcon: 'successMutedItemPrimary',
+        fill: 'successTertiary',
+        labelTextColor: 'successTextQuaternary',
+        borderColor: 'successBorderQuaternary',
+        iconAfterFillIcon: 'successItemQuaternary',
+        iconBeforeFillIcon: 'successItemQuaternary',
     },
     successPrimary: {
         fill: 'successPrimary',
@@ -231,11 +232,12 @@ var labelAppearanceSuccess = {
 
 var labelAppearanceSurface = {
     surfaceMutedPrimary: {
-        fill: 'surfaceMutedPrimary',
-        labelTextColor: 'surfaceMutedTextQuaternary',
-        borderColor: 'surfaceMutedBorderQuaternary',
-        iconAfterFillIcon: 'surfaceMutedItemQuaternary',
-        iconBeforeFillIcon: 'surfaceMutedItemQuaternary',
+        fill: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextQuaternary',
+        labelTextColorHover: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemQuaternary',
+        iconBeforeFillIcon: 'surfaceItemQuaternary',
     },
     surfacePrimary: {
         fill: 'surfacePrimary',
@@ -260,11 +262,11 @@ var labelAppearanceSurface = {
 
 var labelAppearanceWarning = {
     warningMutedPrimary: {
-        fill: 'warningMutedPrimary',
-        labelTextColor: 'warningMutedTextSecondary',
-        borderColor: 'warningMutedBorderSecondary',
-        iconAfterFillIcon: 'warningMutedItemSecondary',
-        iconBeforeFillIcon: 'warningMutedItemSecondary',
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBeforeFillIcon: 'warningItemSecondary',
     },
     warningPrimary: {
         fill: 'warningPrimary',