@zohodesk/components 1.6.26 → 1.6.28

package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -6,7 +6,7 @@ exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-black hover:text-brand-80 focus:text-brand-80 active:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -30,7 +30,7 @@ exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER in selecte
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -54,7 +54,7 @@ exports[`Button Presets Should render preset BRAND_BG_ONSELECT 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -78,7 +78,7 @@ exports[`Button Presets Should render preset BRAND_BG_ONSELECT in selected state
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -102,7 +102,7 @@ exports[`Button Presets Should render preset BRAND_GHOST 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -126,7 +126,7 @@ exports[`Button Presets Should render preset BRAND_GHOST in selected state 1`] =
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:text-brand-80 selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -150,7 +150,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_ONLY 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -174,7 +174,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_ONLY in selected state 1
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -198,7 +198,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER 1`]
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button hover:bg-red-10 focus:bg-red-10 active:bg-red-10 text-brand-80 hover:text-red-70 focus:text-red-70 active:text-red-70 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -222,7 +222,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER in s
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-red-10 selected:text-red-70 selected:border-red-30 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -246,7 +246,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button hover:bg-brand-10 focus:bg-brand-10 active:bg-brand-10 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -270,7 +270,7 @@ exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER in selected
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -294,7 +294,7 @@ exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-10 text-brand-80 border-brand-10 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-10 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -318,7 +318,7 @@ exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE in selected st
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-10 text-brand-80 border-brand-10 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -342,7 +342,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELE
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-black border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-black hover:text-black focus:text-black active:text-black border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -366,7 +366,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELE
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-black border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-10 selected:text-black selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -390,7 +390,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-grey-65 border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -414,7 +414,7 @@ exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL in selected
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-grey-65 border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-grey-65 selected:text-white border-grey-65 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -438,7 +438,7 @@ exports[`Button Presets Should render preset SUCCESS_GHOST 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-green-80 border-green-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-80 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -462,7 +462,7 @@ exports[`Button Presets Should render preset SUCCESS_GHOST in selected state 1`]
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-green-80 border-green-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:text-green-80 selected:border-green-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -486,7 +486,7 @@ exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -510,7 +510,7 @@ exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY in selected state
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -534,7 +534,7 @@ exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-green-10 text-green-80 border-green-30 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-30 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -558,7 +558,7 @@ exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE in selected
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-green-10 text-green-80 border-green-30 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-green-10 selected:text-green-80 selected:border-green-30 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -875,7 +875,7 @@ exports[`Button Should render appearance of buttons - { bg: false, border: true
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button hover:bg-brand-80 focus:bg-brand-80 active:bg-brand-80 text-brand-80 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -893,7 +893,7 @@ exports[`Button Should render appearance of buttons - { bg: true, text: 'black'
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-black hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -911,7 +911,7 @@ exports[`Button Should render appearance of buttons - { border: true } 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -929,7 +929,7 @@ exports[`Button Should render appearance of buttons - { text: true } 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -947,7 +947,7 @@ exports[`Button Should render appearance of buttons - {} 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1019,7 +1019,7 @@ exports[`Button Should render hoverAppearance of buttons - { bg: false, border:
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1037,7 +1037,7 @@ exports[`Button Should render hoverAppearance of buttons - { bg: true, text: 'bl
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-black focus:text-black active:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1055,7 +1055,7 @@ exports[`Button Should render hoverAppearance of buttons - { border: true } 1`]
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1073,7 +1073,7 @@ exports[`Button Should render hoverAppearance of buttons - { text: true } 1`] =
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1091,7 +1091,7 @@ exports[`Button Should render hoverAppearance of buttons - {} 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1283,7 +1283,7 @@ exports[`Button Should render palette of buttons - brand 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1301,7 +1301,7 @@ exports[`Button Should render palette of buttons - brandLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-brand-10 text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1319,7 +1319,7 @@ exports[`Button Should render palette of buttons - danger 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-red-70 text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-red-70 hover:bg-red-100 focus:bg-red-100 active:bg-red-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1337,7 +1337,7 @@ exports[`Button Should render palette of buttons - dangerLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-red-10 text-red-70 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-red-10 hover:bg-red-30 focus:bg-red-30 active:bg-red-30 text-red-70 hover:text-red-100 focus:text-red-100 active:text-red-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1355,7 +1355,7 @@ exports[`Button Should render palette of buttons - info 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-blue-80 text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-blue-80 hover:bg-blue-100 focus:bg-blue-100 active:bg-blue-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1373,7 +1373,7 @@ exports[`Button Should render palette of buttons - infoLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-blue-10 text-blue-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-blue-10 hover:bg-blue-20 focus:bg-blue-20 active:bg-blue-20 text-blue-80 hover:text-blue-100 focus:text-blue-100 active:text-blue-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1391,7 +1391,7 @@ exports[`Button Should render palette of buttons - secondary 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-grey-65 text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-grey-65 hover:bg-grey-55 focus:bg-grey-55 active:bg-grey-55 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1409,7 +1409,7 @@ exports[`Button Should render palette of buttons - secondaryLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-grey-10 text-grey-65 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-grey-10 hover:bg-grey-20 focus:bg-grey-20 active:bg-grey-20 text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1427,7 +1427,7 @@ exports[`Button Should render palette of buttons - success 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-green-80 text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-green-80 hover:bg-green-100 focus:bg-green-100 active:bg-green-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1445,7 +1445,7 @@ exports[`Button Should render palette of buttons - successLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-green-10 text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1463,7 +1463,7 @@ exports[`Button Should render palette of buttons - warning 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-orange-80 text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-orange-80 hover:bg-orange-100 focus:bg-orange-100 active:bg-orange-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1481,7 +1481,7 @@ exports[`Button Should render palette of buttons - warningLighter 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    class="buttonReset button bg-orange-10 text-orange-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-orange-10 hover:bg-orange-15 focus:bg-orange-15 active:bg-orange-15 text-orange-80 hover:text-orange-100 focus:text-orange-100 active:text-orange-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1499,7 +1499,7 @@ exports[`Button Should render selectedAppearance of buttons - { bg: false, borde
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1517,7 +1517,7 @@ exports[`Button Should render selectedAppearance of buttons - { bg: true, text:
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-80 selected:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1535,7 +1535,7 @@ exports[`Button Should render selectedAppearance of buttons - { border: true } 1
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1553,7 +1553,7 @@ exports[`Button Should render selectedAppearance of buttons - { text: true } 1`]
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -1571,7 +1571,7 @@ exports[`Button Should render selectedAppearance of buttons - {} 1`] = `
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.26",
+  "version": "1.6.28",
   "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
@@ -30,9 +30,9 @@
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review",
     "postpublish": "node ../postPublish.js",
-    "test_": "npx ZDTestingFramework unit-test",
+    "test": "npx ZDTestingFramework unit-test",
     "test:changed": "ZDTestingFramework unit-test --onlyChanged",
     "snap-update": "npm run test-clean && ZDTestingFramework unit-test -u",
     "unit:report": "ZDTestingFramework ut-report",
@@ -82,8 +82,8 @@
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/icons": "1.4.0",
-    "@zohodesk/layout": "3.2.2",
-    "@zohodesk/svg": "1.4.0",
+    "@zohodesk/layout": "3.2.3",
+    "@zohodesk/svg": "1.4.1",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -93,7 +93,7 @@
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
     "@zohodesk/jsx_attribute_wrapper": "1.0.0",
-    "@dot-system/css-utility": "0.1.4",
+    "@dot-system/css-utility": "0.1.5",
     "@zohodesk-private/client_deployment_tool": "0.0.7",
     "@babel/preset-react": "7.29.7",
     "@zohodesk/testinglibrary": "4.1.16"
@@ -107,16 +107,16 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.4.0",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.4.0",
+    "@zohodesk/svg": "1.4.1",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.2.2",
+    "@zohodesk/layout": "3.2.3",
     "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.4"
+    "@dot-system/css-utility": "0.1.5"
   }
-}
+}