normalise classes to PascalCase

packages/react/src/Button/ButtonBase.module.css

@@ -227,7 +227,7 @@
 
   &:where([data-loading='true']) {
     &
-      .loadingSpinner:not(
+      .LoadingSpinner:not(
         [data-component='leadingVisual'],
         [data-component='trailingVisual'],
         [data-component='trailingAction']

packages/react/src/Button/ButtonBase.tsx

@@ -40,7 +40,7 @@ const renderModuleVisual = (
 ) => (
   <span
     data-component={visualName}
-    className={clsx(!counterLabel && classes.Visual, loading ? classes.loadingSpinner : classes.VisualWrap)}
+    className={clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap)}
   >
     {loading ? <Spinner size="small" /> : isElement(Visual) ? Visual : <Visual />}
   </span>

packages/react/src/Checkbox/Checkbox.tsx

@@ -210,12 +210,12 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <Box
             as="input"
             {...inputProps}
-            className={clsx(className, sharedClasses.input, classes.Checkbox)}
+            className={clsx(className, sharedClasses.Input, classes.Checkbox)}
             sx={sxProp}
           />
         )
       }
-      return <input {...inputProps} className={clsx(className, sharedClasses.input, classes.Checkbox)} />
+      return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
     }
 
     return <StyledCheckbox {...inputProps} className={className} sx={sxProp} />

packages/react/src/Checkbox/shared.module.css

@@ -1,4 +1,4 @@
-.input {
+.Input {
   position: relative;
   display: grid;
   width: var(--base-size-16);

packages/react/src/experimental/CSSComponent/component.module.css

@@ -1,4 +1,4 @@
-.component {
+.Component {
   width: fit-content;
   /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-xsmall-paddingBlock) var(--control-xsmall-paddingInline-normal);

packages/react/src/experimental/CSSComponent/index.tsx

@@ -3,5 +3,5 @@ import {clsx} from 'clsx'
 import classNames from './component.module.css'
 
 export const Component: React.FC<React.HTMLProps<HTMLDivElement>> = ({className, ...props}) => {
-  return <div className={clsx(classNames.component, className)} {...props} />
+  return <div className={clsx(classNames.Component, className)} {...props} />
 }