feat: adjust select rate ui to latest design

components/TempDesignSystem/Chip/chip.module.css

@@ -1,14 +1,21 @@
 div.chip {
   --chip-text-color: var(--Base-Text-High-contrast);
   --chip-background-color: var(--Base-Surface-Primary-light-Normal);
-  display: flex;
-  justify-content: center;
   align-items: center;
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  gap: var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
   color: var(--chip-text-color);
   background-color: var(--chip-background-color);
+  border-radius: var(--Corner-radius-Small);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: center;
+}
+
+.chip.small {
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+}
+
+.chip.medium {
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
 }
 
 .chip *,
@@ -29,3 +36,8 @@ div.chip {
 .chip.tag {
   --chip-background-color: var(--Base-Surface-Subtle-Hover);
 }
+
+.chip.uiTextHighContrast {
+  --chip-background-color: var(--UI-Text-High-contrast);
+  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
+}

components/TempDesignSystem/Chip/index.tsx

@@ -4,9 +4,15 @@ import { chipVariants } from "./variants"
 
 import type { ChipProps } from "./chip"
 
-export default function Chip({ children, className, variant }: ChipProps) {
+export default function Chip({
+  children,
+  className,
+  size,
+  variant,
+}: ChipProps) {
   const classNames = chipVariants({
     className,
+    size,
     variant,
   })
   return (

components/TempDesignSystem/Chip/variants.ts

@@ -4,14 +4,20 @@ import styles from "./chip.module.css"
 
 export const chipVariants = cva(styles.chip, {
   variants: {
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+    },
     variant: {
       default: styles.default,
       burgundy: styles.burgundy,
       transparent: styles.transparent,
       tag: styles.tag,
+      uiTextHighContrast: styles.uiTextHighContrast,
     },
   },
   defaultVariants: {
+    size: "medium",
     variant: "default",
   },
 })