@7shifts/sous-chef 3.87.0-beta.1 → 3.87.0-beta.2

package/dist/foundation/tokens/color/color-constants.d.ts

@@ -162,6 +162,9 @@ export declare const COLORS: {
     readonly 'warning-on-container-variant': "var(--color-warning-on-container-variant)";
     readonly 'shadow-overlay': "var(--color-shadow-overlay)";
     readonly 'shadow-active': "var(--color-shadow-active)";
+    readonly 'hover-inverse': "var(--color-hover-inverse)";
+    readonly 'hover-lighten': "var(--color-hover-lighten)";
+    readonly 'hover-darken': "var(--color-hover-darken)";
     readonly 'brand-neutrals-caviar-dynamic': "var(--color-brand-neutrals-caviar-dynamic)";
     readonly 'brand-neutrals-chefscoat-dynamic': "var(--color-brand-neutrals-chefscoat-dynamic)";
 };

package/dist/foundation/tokens/color/color-types.d.ts

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic';

package/dist/index.css

@@ -270,6 +270,9 @@
   --color-warning-on-container-variant: #765f2c;
   --color-shadow-overlay: var(--color-neutral-black-transparent-20);
   --color-shadow-active: #4570ff;
+  --color-hover-inverse: var(--color-neutral-white-transparent-05);
+  --color-hover-lighten: var(--color-neutral-white-transparent-20);
+  --color-hover-darken: var(--color-neutral-black-transparent-05);
   --color-brand-neutrals-caviar-dynamic: #000;
   --color-brand-neutrals-chefscoat-dynamic: #fff;
 }
@@ -354,6 +357,9 @@
   --color-neutral-on-container-variant: #c7c0b2;
   --color-shadow-overlay: var(--color-neutral-black-transparent-40);
   --color-shadow-active: #4570ff;
+  --color-hover-inverse: var(--color-neutral-black-transparent-05);
+  --color-hover-lighten: var(--color-neutral-black-transparent-20);
+  --color-hover-darken: var(--color-neutral-white-transparent-05);
   --color-brand-neutrals-caviar-dynamic: #fff;
   --color-brand-neutrals-chefscoat-dynamic: #000;
 }
@@ -765,8 +771,7 @@ Just for future references:
   color: var(--color-surface-on-color-bold);
 }
 ._ICNz7:hover {
-  border-color: var(--color-outline-variant);
-  background: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
   color: var(--color-surface-on-color-bold);
 }
 ._ICNz7:disabled {
@@ -786,8 +791,7 @@ Just for future references:
   color: var(--color-primary-on-color);
 }
 ._XwJWT:hover {
-  border-color: color-mix(in srgb, var(--color-primary-color) 100%, var(--color-surface-container) 25%);
-  background: color-mix(in srgb, var(--color-primary-color) 100%, var(--color-surface-container) 25%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-primary-color);
   color: var(--color-primary-on-color);
 }
 ._XwJWT:disabled {
@@ -807,8 +811,7 @@ Just for future references:
   color: var(--color-danger-on-color);
 }
 ._gr3Dh:hover {
-  border-color: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
-  background: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-container) 25%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-danger-color);
   color: var(--color-danger-on-color);
 }
 ._gr3Dh:disabled {
@@ -828,8 +831,7 @@ Just for future references:
   color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:hover {
-  border-color: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
-  background: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-container) 25%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-upsell-color-variant);
   color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:disabled {
@@ -849,8 +851,7 @@ Just for future references:
   color: var(--color-secondary-on-color);
 }
 ._mI-Dx:hover {
-  border-color: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
-  background: color-mix(in srgb, var(--color-secondary-color) 100%, var(--color-surface-container) 25%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-secondary-color);
   color: var(--color-secondary-on-color);
 }
 ._mI-Dx:disabled {
@@ -870,8 +871,7 @@ Just for future references:
   color: var(--color-surface-on-color-bold);
 }
 ._orywo:hover {
-  border-color: var(--color-outline-variant);
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-surface-on-color-bold);
 }
 ._orywo:disabled {
@@ -891,8 +891,7 @@ Just for future references:
   color: var(--color-surface-on-inverse);
 }
 ._obtsl:hover {
-  border-color: var(--color-outline-inverse);
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), transparent;
   color: var(--color-surface-on-inverse);
 }
 ._obtsl:disabled {
@@ -913,8 +912,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._00jK4:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-container) 10%);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), transparent;
   color: var(--color-surface-on-inverse);
   text-decoration: underline;
 }
@@ -939,8 +937,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._JPwJ7:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
@@ -965,8 +962,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._9TprN:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-danger-color);
   text-decoration: underline;
 }
@@ -991,8 +987,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._tktX-:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-upsell-color);
   text-decoration: underline;
 }
@@ -1017,8 +1012,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._r3SQl:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
@@ -1043,8 +1037,7 @@ Just for future references:
   text-decoration: underline;
 }
 ._oFBLN:hover {
-  border-color: transparent;
-  background: color-mix(in srgb, transparent 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), transparent;
   color: var(--color-surface-on-color-subtle);
   text-decoration: underline;
 }
@@ -1395,7 +1388,7 @@ h5._6SgoN {
   padding: 0;
 }
 ._aMs9c {
-  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._ISJ4M {
   width: 100%;
@@ -1493,7 +1486,7 @@ h5._6SgoN {
   text-align: inherit;
 }
 ._uc-GV:not(._ft0I1):hover {
-  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._uc-GV:focus {
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -1557,8 +1550,7 @@ h5._6SgoN {
   border: 1px solid transparent;
 }
 ._fo7-A:hover {
-  background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
-  border-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
   text-decoration: none;
 }
 ._fo7-A:focus {
@@ -1881,8 +1873,9 @@ h5._6SgoN {
 }
 
 ._X7MoW:not(._AeJUw) {
-  color: var(--color-primary-on-container-variant);
-  font-weight: 700;
+  color: var(--color-primary-color);
+  font-weight: var(--p-font-weight-bold);
+  text-decoration: underline;
 }
 
 ._AeJUw._AeJUw {
@@ -1964,8 +1957,9 @@ h5._6SgoN {
 }
 
 ._Snv-V:not(._Zf-6C) {
-  color: var(--color-primary-on-container-variant);
-  font-weight: 700;
+  color: var(--color-primary-color);
+  font-weight: var(--p-font-weight-bold);
+  text-decoration: underline;
 }
 
 ._Zf-6C._Zf-6C {
@@ -2724,7 +2718,7 @@ input:disabled + ._kmvBP::after {
   cursor: pointer;
 }
 ._ej5Ke:not(._qDTAh):hover td {
-  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._qDTAh td {
   background-color: var(--color-primary-container-variant);
@@ -2812,7 +2806,7 @@ input:disabled + ._kmvBP::after {
   z-index: var(--z-index-base);
 }
 ._jp9-G input:hover {
-  background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._BzPeH {
   text-align: right;
@@ -3241,7 +3235,7 @@ input:disabled + ._kmvBP::after {
   transition: all ease-in-out 150ms;
 }
 ._G-7Pi:hover {
-  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._G-7Pi:focus {
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3296,7 +3290,7 @@ input:disabled + ._kmvBP::after {
   cursor: pointer;
 }
 ._N37zE:not(._42Bvz):hover {
-  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._N37zE:not(._42Bvz):focus {
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3316,7 +3310,7 @@ input:disabled + ._kmvBP::after {
   cursor: pointer;
 }
 ._9wFtw:hover {
-  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
 }
 ._9wFtw:focus {
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
@@ -3334,7 +3328,12 @@ input:disabled + ._kmvBP::after {
   border-left: 0;
 }
 ._RezMY {
-  display: flex;
+  display: inline-flex;
+  gap: 2px;
+  background-color: var(--color-surface-container-high);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--border-radius-400);
+  padding: 2px;
 }
 ._lehFG {
   font-family: var(--font-family-body);
@@ -3345,84 +3344,25 @@ input:disabled + ._kmvBP::after {
   position: relative;
   background-color: transparent;
   color: var(--color-surface-on-color-bold);
-  border-style: solid;
-  border-color: var(--color-outline);
-  padding: 9px 12px;
+  border: 0;
+  border-radius: 6px;
+  padding: 7px 12px;
   min-width: 38px;
-  height: 38px;
+  height: 32px;
   cursor: pointer;
   display: inline-flex;
 }
 ._lehFG:not(._Fr5kb):hover {
-  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
-  border-color: var(--color-outline);
+  background-color: var(--color-surface-container-highest);
 }
 ._Fr5kb {
-  background-color: var(--color-surface-container-high);
+  color: var(--color-surface-on-inverse);
+  background-color: var(--color-surface-inverse);
 }
 ._lehFG:focus {
-  box-shadow: 0 0 8px 0 var(--color-shadow-active);
   outline: none;
   text-decoration: none;
 }
-._lehFG:first-child {
-  border-radius: var(--border-radius-400) 0 0 var(--border-radius-400);
-  border-width: 1px 0px 1px 1px;
-}
-._lehFG:first-child:not(._Fr5kb):hover::after {
-  content: "";
-  height: 36px;
-  width: 1px;
-  background-color: var(--color-outline);
-  border-width: 1px 0px;
-  border-color: var(--color-outline);
-  border-style: solid;
-  position: absolute;
-  top: -1px;
-  right: -1px;
-}
-._lehFG:not(:first-child):not(:last-child) {
-  border-radius: 0;
-  border-width: 1px 0px 1px 0px;
-}
-._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::after, ._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::before {
-  content: "";
-  height: 36px;
-  width: 1px;
-  background-color: var(--color-outline);
-  border-width: 1px 0px;
-  border-color: var(--color-outline);
-  border-style: solid;
-  position: absolute;
-  top: -1px;
-}
-._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::after {
-  right: -1px;
-}
-._lehFG:not(:first-child):not(:last-child):not(._Fr5kb):hover::before {
-  left: -1px;
-}
-._lehFG:last-child {
-  border-radius: 0 var(--border-radius-400) var(--border-radius-400) 0;
-  border-width: 1px 1px 1px 0px;
-}
-._lehFG:last-child:not(._Fr5kb):hover::before {
-  content: "";
-  height: 36px;
-  width: 1px;
-  background-color: var(--color-outline);
-  border-width: 1px 0px;
-  border-color: var(--color-outline);
-  border-style: solid;
-  position: absolute;
-  top: -1px;
-  left: -1px;
-}
-._GEqG9 {
-  height: 38px;
-  width: 1px;
-  background-color: var(--color-outline);
-}
 ._8-Ykj {
   max-width: 500px;
 }
@@ -3548,8 +3488,8 @@ input:disabled + ._kmvBP::after {
   justify-content: center;
   background-color: var(--color-surface-container-high);
   padding: 8px 16px;
-  border: 1px solid var(--color-surface-container-high);
   border-radius: 25px;
+  border: 0;
   min-height: 38px;
   min-width: 60px;
   text-align: center;
@@ -3567,7 +3507,7 @@ input:disabled + ._kmvBP::after {
 }
 ._ZxEwG {
   color: transparent;
-  border-color: var(--color-primary-color);
+  border: 1px solid var(--color-primary-color);
 }
 ._Odw1V {
   padding: 0;
@@ -3584,25 +3524,19 @@ input:disabled + ._kmvBP::after {
   margin: -6px;
 }
 ._Yti6k:hover > input:not(:disabled) ~ ._JXakU, ._MsKVV:hover {
-  background-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
-  border-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container-high);
   cursor: pointer;
 }
 ._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU {
-  background-color: color-mix(in srgb, var(--color-primary-container) 100%, var(--color-surface-inverse) 5%);
-  border-color: var(--color-primary-on-container);
-  color: var(--color-primary-on-container);
-}
-._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU ._Odw1V {
-  color: var(--color-primary-on-container);
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
 }
 input:checked ~ ._JXakU {
-  background-color: var(--color-primary-container);
-  border-color: var(--color-primary-on-container);
-  color: var(--color-primary-on-container);
+  background-color: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
 }
 input:checked ~ ._JXakU ._Odw1V {
-  color: var(--color-primary-on-container);
+  color: var(--color-surface-on-inverse);
 }
 input:disabled + ._JXakU {
   background-color: var(--color-surface-container-disabled);
@@ -3613,12 +3547,9 @@ input:disabled + ._JXakU ._Odw1V {
   color: var(--color-surface-on-container-disabled);
 }
 input:disabled:checked + ._JXakU {
-  background-color: var(--color-primary-container);
-  border-color: var(--color-outline-variant);
-  color: var(--color-outline-variant);
+  background-color: var(--color-surface-inverse);
 }
 input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
-  border: 1px solid var(--color-primary-color);
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
   outline: none;
 }
@@ -4110,8 +4041,9 @@ input:disabled + ._Yfxkl::after {
 }
 
 ._lFzs7:not(._TjttB) {
-  color: var(--color-primary-on-container-variant);
-  font-weight: 700;
+  color: var(--color-primary-color);
+  font-weight: var(--p-font-weight-bold);
+  text-decoration: underline;
 }
 
 ._TjttB._TjttB {