Merge develop

components/TempDesignSystem/Link/link.module.css

@@ -196,3 +196,25 @@
   letter-spacing: var(--typography-Caption-Bold-letterSpacing);
   line-height: var(--typography-Caption-Bold-lineHeight);
 }
+
+.menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  width: 100%;
+  padding: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+  color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  line-height: var(--typography-Body-Bold-lineHeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.menu:hover {
+  color: var(--Base-Text-High-contrast);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}

components/TempDesignSystem/Link/variants.ts

@@ -31,6 +31,7 @@ export const linkVariants = cva(styles.link, {
       icon: styles.icon,
       underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
+      menu: styles.menu,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
       tab: styles.tab,
@@ -40,6 +41,7 @@ export const linkVariants = cva(styles.link, {
     color: "black",
     variant: "default",
     textDecoration: "none",
+    size: "regular",
   },
   compoundVariants: [
     {