fix(Menu): label props passing

Author: LexSwed

src/lib/form-field/label.tsx

@@ -7,7 +7,7 @@ import { flexCss, FlexVariants } from '../flex/flex';
 
 import styles from './form-field.module.css';
 
-type LabelProps<C extends ElementType> = PolyProps<
+export type LabelProps<C extends ElementType> = PolyProps<
   C,
   FlexVariants & {
     label: ReactNode;
@@ -16,7 +16,7 @@ type LabelProps<C extends ElementType> = PolyProps<
     size?: 'sm' | 'md' | 'lg';
   }
 >;
-type LabelComponent = <C extends ElementType = 'label'>(props: LabelProps<C>) => ReactElement | null;
+export type LabelComponent = <C extends ElementType = 'label'>(props: LabelProps<C>) => ReactElement | null;
 
 export const Label: LabelComponent = forwardRef(
   <C extends ElementType = 'label'>(

src/lib/menu/menu.tsx

@@ -1,5 +1,6 @@
 import {
   ComponentProps,
+  ElementType,
   forwardRef,
   ForwardRefExoticComponent,
   ReactElement,
@@ -18,6 +19,8 @@ import { ListItem, ListItemVariants } from '../shared/list-item';
 import { useIsomorphicLayoutEffect } from '../utils/hooks';
 import { Presence } from '../shared/presence';
 
+import type { LabelComponent, LabelProps } from '../form-field/label';
+import type { PolyRef } from '../utils/polymorphic';
 import styles from './menu.module.css';
 
 interface MenuProps {
@@ -109,13 +112,15 @@ export const Separator = (props: ComponentProps<'div'>) => {
   return <div {...props} className={clsx(styles.separator, props.className)} />;
 };
 
-const MenuLabel = forwardRef((props, ref) => {
-  return (
-    <RdxMenu.Label asChild>
-      <Label {...props} ref={ref} />
-    </RdxMenu.Label>
-  );
-}) as typeof Label;
+const MenuLabel: LabelComponent = forwardRef(
+  <C extends ElementType = 'label'>(props: LabelProps<C>, ref: PolyRef<C>) => {
+    return (
+      <RdxMenu.Label asChild>
+        <Label {...props} ref={ref} />
+      </RdxMenu.Label>
+    );
+  }
+);
 
 MenuRoot.List = List;
 MenuRoot.Item = MenuItem;

src/pages-helpers/PaletteRenderer.tsx

@@ -22,9 +22,7 @@ export const ColorBox = ({ color, className }: ColorBoxProps) => {
   return (
     <div className={`w-1/4 flex-1 grow-0 basis-1/4 p-2 last-of-type:grow ${className}`}>
       <Column className="h-full">
-        <Text textStyle="label-sm" weight={600}>
-          {color}
-        </Text>
+        <Text textStyle="label-sm">{color}</Text>
         <Text textStyle="mono-sm">{defaultTheme.colors[color]}</Text>
         <div className="self-end mt-auto">
           <CopyButton label="Copy color token" text={color} />