From 6febe2a7a378fe093086cb7949237f3512d7bbc1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 23 Jun 2025 13:25:41 +0100
Subject: [PATCH] Convert more components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/components/Box/Box.tsx     |   4 +-
 .../src/components/Checkbox/Checkbox.tsx      |   4 +-
 .../components/Collapsible/Collapsible.tsx    |  55 ++--
 .../src/components/Container/Container.tsx    |   5 +-
 .../src/components/FieldLabel/FieldLabel.tsx  |  14 +-
 packages/canon/src/components/Flex/Flex.tsx   |   4 +-
 packages/canon/src/components/Grid/Grid.tsx   |   8 +-
 .../canon/src/components/Heading/Heading.tsx  |  15 +-
 packages/canon/src/components/Icon/Icon.tsx   |   5 +-
 packages/canon/src/components/Link/Link.tsx   |  10 +-
 packages/canon/src/components/Menu/Menu.tsx   | 281 +++++++++++-------
 .../canon/src/utils/componentDefinitions.ts   | 140 +++++----
 12 files changed, 315 insertions(+), 230 deletions(-)

diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 8718c77724..4273ee86f9 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -24,6 +24,7 @@ import { widthPropDefs } from '../../props/width.props';
 import { heightPropDefs } from '../../props/height.props';
 import { positionPropDefs } from '../../props/position.props';
 import { displayPropDefs } from '../../props/display.props';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
@@ -38,11 +39,12 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
     ...boxPropDefs,
   };
 
+  const { classNames } = useStyles('Box');
   const { className, style } = extractProps(props, propDefs);
 
   return createElement(props.as || 'div', {
     ref,
-    className: clsx('canon-Box', className),
+    className: clsx(classNames.root, className),
     style,
     children,
   });
diff --git a/packages/canon/src/components/Checkbox/Checkbox.tsx b/packages/canon/src/components/Checkbox/Checkbox.tsx
index 8fbb4d40af..aaa6fb105b 100644
--- a/packages/canon/src/components/Checkbox/Checkbox.tsx
+++ b/packages/canon/src/components/Checkbox/Checkbox.tsx
@@ -50,14 +50,14 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         value={value}
         style={style}
       >
-        <CheckboxPrimitive.Indicator className="canon-CheckboxIndicator">
+        <CheckboxPrimitive.Indicator className={classNames.indicator}>
           <Icon name="check" size={12} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     );
 
     return label ? (
-      <label className="canon-CheckboxLabel">
+      <label className={classNames.label}>
         {checkboxElement}
         {label}
       </label>
diff --git a/packages/canon/src/components/Collapsible/Collapsible.tsx b/packages/canon/src/components/Collapsible/Collapsible.tsx
index 75ba4565e0..64d55bdffc 100644
--- a/packages/canon/src/components/Collapsible/Collapsible.tsx
+++ b/packages/canon/src/components/Collapsible/Collapsible.tsx
@@ -17,41 +17,54 @@
 import { forwardRef } from 'react';
 import { Collapsible as CollapsiblePrimitive } from '@base-ui-components/react/collapsible';
 import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles';
 
 const CollapsibleRoot = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Root
-    ref={ref}
-    className={clsx('canon-CollapsibleRoot', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Collapsible');
+
+  return (
+    <CollapsiblePrimitive.Root
+      ref={ref}
+      className={clsx(classNames.root, className)}
+      {...props}
+    />
+  );
+});
 CollapsibleRoot.displayName = CollapsiblePrimitive.Root.displayName;
 
 const CollapsibleTrigger = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Trigger
-    ref={ref}
-    className={clsx('canon-CollapsibleTrigger', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Collapsible');
+
+  return (
+    <CollapsiblePrimitive.Trigger
+      ref={ref}
+      className={clsx(classNames.trigger, className)}
+      {...props}
+    />
+  );
+});
 CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
 
 const CollapsiblePanel = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Panel>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.Panel
-    ref={ref}
-    className={clsx('canon-CollapsiblePanel', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Collapsible');
+
+  return (
+    <CollapsiblePrimitive.Panel
+      ref={ref}
+      className={clsx(classNames.panel, className)}
+      {...props}
+    />
+  );
+});
 CollapsiblePanel.displayName = CollapsiblePrimitive.Panel.displayName;
 
 /**
diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index ebdc17ac85..7be4e5fdce 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -20,12 +20,15 @@ import clsx from 'clsx';
 import { displayPropDefs } from '../../props/display.props';
 import { extractProps } from '../../utils/extractProps';
 import { spacingPropDefs } from '../../props/spacing.props';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
     const { children } = props;
 
+    const { classNames } = useStyles('Container');
+
     // Create a subset of spacing props that match the interface
     const containerSpacingProps = {
       my: spacingPropDefs.my,
@@ -44,7 +47,7 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
 
     return createElement('div', {
       ref,
-      className: clsx('canon-Container', className),
+      className: clsx(classNames.root, className),
       style,
       children,
     });
diff --git a/packages/canon/src/components/FieldLabel/FieldLabel.tsx b/packages/canon/src/components/FieldLabel/FieldLabel.tsx
index 8fee7dffed..df0735389a 100644
--- a/packages/canon/src/components/FieldLabel/FieldLabel.tsx
+++ b/packages/canon/src/components/FieldLabel/FieldLabel.tsx
@@ -16,31 +16,31 @@
 import { Label } from 'react-aria-components';
 import { forwardRef } from 'react';
 import type { FieldLabelProps } from './types';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
   (props: FieldLabelProps, ref) => {
     const { label, secondaryLabel, description, htmlFor, id, ...rest } = props;
 
+    const { classNames } = useStyles('FieldLabel');
+
     if (!label) return null;
 
     return (
-      <div className="canon-FieldLabel" {...rest} ref={ref}>
+      <div className={classNames.root} {...rest} ref={ref}>
         {label && (
-          <Label className="canon-FieldLabelLabel" htmlFor={htmlFor} id={id}>
+          <Label className={classNames.label} htmlFor={htmlFor} id={id}>
             {label}
             {secondaryLabel && (
-              <span
-                aria-hidden="true"
-                className="canon-FieldLabelSecondaryLabel"
-              >
+              <span aria-hidden="true" className={classNames.secondaryLabel}>
                 ({secondaryLabel})
               </span>
             )}
           </Label>
         )}
         {description && (
-          <div className="canon-FieldLabelDescription">{description}</div>
+          <div className={classNames.description}>{description}</div>
         )}
       </div>
     );
diff --git a/packages/canon/src/components/Flex/Flex.tsx b/packages/canon/src/components/Flex/Flex.tsx
index a53e0d28f4..ded4fffffa 100644
--- a/packages/canon/src/components/Flex/Flex.tsx
+++ b/packages/canon/src/components/Flex/Flex.tsx
@@ -21,6 +21,7 @@ import { flexPropDefs } from './Flex.props';
 import { extractProps } from '../../utils/extractProps';
 import { gapPropDefs } from '../../props/gap-props';
 import { spacingPropDefs } from '../../props/spacing.props';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
@@ -30,11 +31,12 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
     ...spacingPropDefs,
   };
 
+  const { classNames } = useStyles('Flex');
   const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Flex', className),
+    className: clsx(classNames.root, className),
     style,
     children: props.children,
   });
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index 7bb5486a2d..27257c8972 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -21,6 +21,7 @@ import { gridItemPropDefs, gridPropDefs } from './Grid.props';
 import clsx from 'clsx';
 import type { GridItemProps, GridProps } from './types';
 import { spacingPropDefs } from '../../props/spacing.props';
+import { useStyles } from '../../hooks/useStyles';
 
 const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const propDefs = {
@@ -29,11 +30,13 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
     ...spacingPropDefs,
   };
 
+  const { classNames } = useStyles('Grid');
+
   const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Grid', className),
+    className: clsx(classNames.root, className),
     style,
     children: props.children,
   });
@@ -44,11 +47,12 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
     ...gridItemPropDefs,
   };
 
+  const { classNames } = useStyles('Grid');
   const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-GridItem', className),
+    className: clsx(classNames.item, className),
     style,
     children: props.children,
   });
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index 4df5f85bc9..746d10ff1d 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -16,9 +16,9 @@
 
 import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import type { ElementType } from 'react';
 import type { HeadingProps } from './types';
+import { useStyles } from '../../hooks/useStyles';
 
 function HeadingComponent<T extends ElementType = 'h1'>(
   {
@@ -34,16 +34,17 @@ function HeadingComponent<T extends ElementType = 'h1'>(
 ) {
   const Component = as || 'h1';
 
-  const responsiveVariant = useResponsiveValue(variant);
-  const responsiveColor = useResponsiveValue(color);
+  const { classNames, dataAttributes } = useStyles('Heading', {
+    variant,
+    color,
+    truncate,
+  });
 
   return (
     <Component
       ref={ref}
-      className={clsx('canon-Heading', className)}
-      data-variant={responsiveVariant}
-      data-color={responsiveColor}
-      data-truncate={truncate}
+      className={clsx(classNames.root, className)}
+      {...dataAttributes}
       style={style}
       {...restProps}
     />
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 8877420a84..85b476339d 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -18,6 +18,7 @@ import { ComponentType } from 'react';
 import { useIcons } from './context';
 import type { IconProps } from './types';
 import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const Icon = (props: IconProps) => {
@@ -31,9 +32,11 @@ export const Icon = (props: IconProps) => {
     return null;
   }
 
+  const { classNames } = useStyles('Icon');
+
   return (
     <CanonIcon
-      className={clsx('canon-Icon', className)}
+      className={clsx(classNames.root, className)}
       style={{
         ...(size ? { width: size, height: size } : {}),
         ...style,
diff --git a/packages/canon/src/components/Link/Link.tsx b/packages/canon/src/components/Link/Link.tsx
index 8609517bc0..869134d8a7 100644
--- a/packages/canon/src/components/Link/Link.tsx
+++ b/packages/canon/src/components/Link/Link.tsx
@@ -16,8 +16,8 @@
 
 import { useRef, forwardRef } from 'react';
 import { useRender } from '@base-ui-components/react/use-render';
-import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles';
 
 import type { LinkProps } from './types';
 
@@ -31,16 +31,14 @@ export const Link = forwardRef<HTMLElement, LinkProps>((props, ref) => {
     ...restProps
   } = props;
 
-  const responsiveVariant = useResponsiveValue(variant);
-  const responsiveWeight = useResponsiveValue(weight);
+  const { classNames, dataAttributes } = useStyles('Link', { variant, weight });
   const internalRef = useRef<HTMLElement | null>(null);
 
   const { renderElement } = useRender({
     render,
     props: {
-      className: clsx('canon-Link', className),
-      ['data-variant']: responsiveVariant,
-      ['data-weight']: responsiveWeight,
+      className: clsx(classNames.root, className),
+      ...dataAttributes,
       ...restProps,
     },
     refs: [ref, internalRef],
diff --git a/packages/canon/src/components/Menu/Menu.tsx b/packages/canon/src/components/Menu/Menu.tsx
index 123b01b283..9c475fdf5f 100644
--- a/packages/canon/src/components/Menu/Menu.tsx
+++ b/packages/canon/src/components/Menu/Menu.tsx
@@ -20,190 +20,255 @@ import clsx from 'clsx';
 import { MenuComponent } from './types';
 import { Combobox } from './Combobox';
 import { Icon } from '../Icon';
+import { useStyles } from '../../hooks/useStyles';
 
 const MenuTrigger = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Trigger
-    ref={ref}
-    className={clsx('canon-MenuTrigger', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Trigger
+      ref={ref}
+      className={clsx(classNames.trigger, className)}
+      {...props}
+    />
+  );
+});
 MenuTrigger.displayName = MenuPrimitive.Trigger.displayName;
 
 const MenuBackdrop = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Backdrop>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Backdrop>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Backdrop
-    ref={ref}
-    className={clsx('canon-MenuBackdrop', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Backdrop
+      ref={ref}
+      className={clsx(classNames.backdrop, className)}
+      {...props}
+    />
+  );
+});
 MenuBackdrop.displayName = MenuPrimitive.Backdrop.displayName;
 
 const MenuPositioner = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Positioner>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Positioner>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Positioner
-    ref={ref}
-    className={clsx('canon-MenuPositioner', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Positioner
+      ref={ref}
+      className={clsx(classNames.positioner, className)}
+      {...props}
+    />
+  );
+});
 MenuPositioner.displayName = MenuPrimitive.Positioner.displayName;
 
 const MenuPopup = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Popup>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Popup
-    ref={ref}
-    className={clsx('canon-MenuPopup', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Popup
+      ref={ref}
+      className={clsx(classNames.popup, className)}
+      {...props}
+    />
+  );
+});
 MenuPopup.displayName = MenuPrimitive.Popup.displayName;
 
 const MenuArrow = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Arrow
-    ref={ref}
-    className={clsx('canon-MenuArrow', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Arrow
+      ref={ref}
+      className={clsx(classNames.arrow, className)}
+      {...props}
+    />
+  );
+});
 MenuArrow.displayName = MenuPrimitive.Arrow.displayName;
 
 const MenuItem = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Item
-    ref={ref}
-    className={clsx('canon-MenuItem', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Item
+      ref={ref}
+      className={clsx(classNames.item, className)}
+      {...props}
+    />
+  );
+});
 MenuItem.displayName = MenuPrimitive.Item.displayName;
 
 const MenuGroup = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Group>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Group
-    ref={ref}
-    className={clsx('canon-MenuGroup', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Group
+      ref={ref}
+      className={clsx(classNames.group, className)}
+      {...props}
+    />
+  );
+});
 MenuGroup.displayName = MenuPrimitive.Group.displayName;
 
 const MenuGroupLabel = forwardRef<
   React.ElementRef<typeof MenuPrimitive.GroupLabel>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.GroupLabel>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.GroupLabel
-    ref={ref}
-    className={clsx('canon-MenuGroupLabel', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.GroupLabel
+      ref={ref}
+      className={clsx(classNames.groupLabel, className)}
+      {...props}
+    />
+  );
+});
 MenuGroupLabel.displayName = MenuPrimitive.GroupLabel.displayName;
 
 const MenuRadioGroup = forwardRef<
   React.ElementRef<typeof MenuPrimitive.RadioGroup>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.RadioGroup
-    ref={ref}
-    className={clsx('canon-MenuRadioGroup', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.RadioGroup
+      ref={ref}
+      className={clsx(classNames.radioGroup, className)}
+      {...props}
+    />
+  );
+});
 MenuRadioGroup.displayName = MenuPrimitive.RadioGroup.displayName;
 
 const MenuRadioItem = forwardRef<
   React.ElementRef<typeof MenuPrimitive.RadioItem>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.RadioItem
-    ref={ref}
-    className={clsx('canon-MenuRadioItem', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.RadioItem
+      ref={ref}
+      className={clsx(classNames.radioItem, className)}
+      {...props}
+    />
+  );
+});
 MenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName;
 
 const MenuRadioItemIndicator = forwardRef<
   React.ElementRef<typeof MenuPrimitive.RadioItemIndicator>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItemIndicator>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.RadioItemIndicator
-    ref={ref}
-    className={clsx('canon-MenuRadioItemIndicator', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.RadioItemIndicator
+      ref={ref}
+      className={clsx(classNames.radioItemIndicator, className)}
+      {...props}
+    />
+  );
+});
 MenuRadioItemIndicator.displayName =
   MenuPrimitive.RadioItemIndicator.displayName;
 
 const MenuCheckboxItem = forwardRef<
   React.ElementRef<typeof MenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.CheckboxItem
-    ref={ref}
-    className={clsx('canon-MenuCheckboxItem', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.CheckboxItem
+      ref={ref}
+      className={clsx(classNames.checkboxItem, className)}
+      {...props}
+    />
+  );
+});
 MenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName;
 
 const MenuCheckboxItemIndicator = forwardRef<
   React.ElementRef<typeof MenuPrimitive.CheckboxItemIndicator>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItemIndicator>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.CheckboxItemIndicator
-    ref={ref}
-    className={clsx('canon-MenuCheckboxItemIndicator', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.CheckboxItemIndicator
+      ref={ref}
+      className={clsx(classNames.checkboxItemIndicator, className)}
+      {...props}
+    />
+  );
+});
 MenuCheckboxItemIndicator.displayName =
   MenuPrimitive.CheckboxItemIndicator.displayName;
 
 const MenuSubmenuTrigger = forwardRef<
   React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger>
->(({ className, children, ...props }, ref) => (
-  <MenuPrimitive.SubmenuTrigger
-    ref={ref}
-    className={clsx('canon-MenuSubmenuTrigger', className)}
-    {...props}
-  >
-    <div>{children}</div>
-    <Icon aria-label="Submenu indicator icon" name="chevron-right" size={20} />
-  </MenuPrimitive.SubmenuTrigger>
-));
+>(({ className, children, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      ref={ref}
+      className={clsx(classNames.submenuTrigger, className)}
+      {...props}
+    >
+      <div>{children}</div>
+      <Icon
+        aria-label="Submenu indicator icon"
+        name="chevron-right"
+        size={20}
+      />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+});
 MenuSubmenuTrigger.displayName = MenuPrimitive.SubmenuTrigger.displayName;
 
 const MenuSeparator = forwardRef<
   React.ElementRef<typeof MenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenuPrimitive.Separator
-    ref={ref}
-    className={clsx('canon-MenuSeparator', className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const { classNames } = useStyles('Menu');
+
+  return (
+    <MenuPrimitive.Separator
+      ref={ref}
+      className={clsx(classNames.separator, className)}
+      {...props}
+    />
+  );
+});
 MenuSeparator.displayName = MenuPrimitive.Separator.displayName;
 
 /** @public */
diff --git a/packages/canon/src/utils/componentDefinitions.ts b/packages/canon/src/utils/componentDefinitions.ts
index 1c49a94b9c..53ba9dd517 100644
--- a/packages/canon/src/utils/componentDefinitions.ts
+++ b/packages/canon/src/utils/componentDefinitions.ts
@@ -65,21 +65,86 @@ export const componentDefinitions = {
       checked: [true, false] as const,
     },
   },
+  Collapsible: {
+    classNames: {
+      root: 'canon-CollapsibleRoot',
+      trigger: 'canon-CollapsibleTrigger',
+      panel: 'canon-CollapsiblePanel',
+    },
+  },
   Container: {
     classNames: {
       root: 'canon-Container',
     },
   },
-
+  FieldLabel: {
+    classNames: {
+      root: 'canon-FieldLabel',
+      label: 'canon-FieldLabelLabel',
+      secondaryLabel: 'canon-FieldLabelSecondaryLabel',
+      description: 'canon-FieldLabelDescription',
+    },
+  },
   Flex: {
     classNames: {
       root: 'canon-Flex',
     },
   },
-
   Grid: {
     classNames: {
       root: 'canon-Grid',
+      item: 'canon-GridItem',
+    },
+  },
+  Heading: {
+    classNames: {
+      root: 'canon-Heading',
+    },
+    dataAttributes: {
+      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,
+      color: ['primary', 'secondary', 'muted'] as const,
+      truncate: [true, false] as const,
+    },
+  },
+  Icon: {
+    classNames: {
+      root: 'canon-Icon',
+    },
+  },
+  Link: {
+    classNames: {
+      root: 'canon-Link',
+    },
+    dataAttributes: {
+      variant: ['subtitle', 'body', 'caption', 'label'] as const,
+      weight: ['regular', 'bold'] as const,
+    },
+  },
+  Menu: {
+    classNames: {
+      trigger: 'canon-MenuTrigger',
+      backdrop: 'canon-MenuBackdrop',
+      positioner: 'canon-MenuPositioner',
+      popup: 'canon-MenuPopup',
+      arrow: 'canon-MenuArrow',
+      item: 'canon-MenuItem',
+      group: 'canon-MenuGroup',
+      groupLabel: 'canon-MenuGroupLabel',
+      radioGroup: 'canon-MenuRadioGroup',
+      radioItem: 'canon-MenuRadioItem',
+      radioItemIndicator: 'canon-MenuRadioItemIndicator',
+      checkboxItem: 'canon-MenuCheckboxItem',
+      checkboxItemIndicator: 'canon-MenuCheckboxItemIndicator',
+      submenuTrigger: 'canon-MenuSubmenuTrigger',
+      separator: 'canon-MenuSeparator',
+    },
+  },
+  ScrollArea: {
+    classNames: {
+      root: 'canon-ScrollAreaRoot',
+      viewport: 'canon-ScrollAreaViewport',
+      scrollbar: 'canon-ScrollAreaScrollbar',
+      thumb: 'canon-ScrollAreaThumb',
     },
   },
 
@@ -96,17 +161,6 @@ export const componentDefinitions = {
     },
   },
 
-  Heading: {
-    classNames: {
-      root: 'canon-Heading',
-    },
-    dataAttributes: {
-      variant: ['title1', 'title2', 'title3', 'subtitle'] as const,
-      color: ['primary', 'secondary', 'muted'] as const,
-      truncate: [true, false] as const,
-    },
-  },
-
   TextField: {
     classNames: {
       root: 'canon-TextField',
@@ -122,16 +176,6 @@ export const componentDefinitions = {
     },
   },
 
-  FieldLabel: {
-    classNames: {
-      root: 'canon-FieldLabel',
-      required: 'canon-FieldLabel-required',
-    },
-    dataAttributes: {
-      required: [true, false] as const,
-    },
-  },
-
   Select: {
     classNames: {
       root: 'canon-Select',
@@ -162,26 +206,6 @@ export const componentDefinitions = {
   },
 
   // Navigation Components
-  Link: {
-    classNames: {
-      root: 'canon-Link',
-    },
-    dataAttributes: {
-      variant: ['primary', 'secondary'] as const,
-    },
-  },
-
-  Menu: {
-    classNames: {
-      root: 'canon-Menu',
-      trigger: 'canon-Menu-trigger',
-      content: 'canon-Menu-content',
-      item: 'canon-Menu-item',
-      separator: 'canon-Menu-separator',
-      label: 'canon-Menu-label',
-      group: 'canon-Menu-group',
-    },
-  },
 
   Tabs: {
     classNames: {
@@ -223,15 +247,6 @@ export const componentDefinitions = {
     },
   },
 
-  Icon: {
-    classNames: {
-      root: 'canon-Icon',
-    },
-    dataAttributes: {
-      size: ['small', 'medium', 'large'] as const,
-    },
-  },
-
   // Feedback Components
   Tooltip: {
     classNames: {
@@ -243,27 +258,6 @@ export const componentDefinitions = {
   },
 
   // Disclosure Components
-  Collapsible: {
-    classNames: {
-      root: 'canon-Collapsible',
-      trigger: 'canon-Collapsible-trigger',
-      content: 'canon-Collapsible-content',
-      icon: 'canon-Collapsible-icon',
-    },
-    dataAttributes: {
-      open: [true, false] as const,
-    },
-  },
 
   // Utility Components
-  ScrollArea: {
-    classNames: {
-      root: 'canon-ScrollArea',
-      viewport: 'canon-ScrollArea-viewport',
-      scrollbar: 'canon-ScrollArea-scrollbar',
-      thumb: 'canon-ScrollArea-thumb',
-      corner: 'canon-ScrollArea-corner',
-      track: 'canon-ScrollArea-track',
-    },
-  },
 } as const satisfies Record<string, ComponentDefinition>;