fix(Brand): move styling props to img instead of picture (#5079)

* fix(Brand): move classNameOverride to img instead of picture

* fix(Brand): move style to img instead of picture

* fix(Workflow): fix Brand size

.changeset/giant-ghosts-sniff.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix Brand styling props to be on the `<img>` instead of `<picture>`

packages/components/src/Brand/Brand.tsx

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes, SVGAttributes } from "react"
+import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { assetUrl } from "~components/utils/hostedAssets"
 import { BrandCollectiveIntelligence } from "./BrandCollectiveIntelligence"
@@ -58,11 +59,11 @@ export const Brand = ({
     )
   }
 
-  const { alt, classNameOverride, ...otherProps } = restProps
+  const { alt, classNameOverride, style, ...otherProps } = restProps
   const brandTheme = reversed ? "-reversed" : "-default"
 
   return (
-    <picture className={classNameOverride} {...otherProps}>
+    <picture {...otherProps}>
       <source
         srcSet={assetUrl(`brand/${variant}-reversed.svg`)}
         media="(forced-colors: active) and (prefers-color-scheme: dark)"
@@ -74,7 +75,8 @@ export const Brand = ({
       <img
         src={assetUrl(`brand/${variant}${brandTheme}.svg`)}
         alt={alt}
-        className={styles.img}
+        className={classnames(styles.img, classNameOverride)}
+        style={style}
       />
     </picture>
   )

packages/components/src/Workflow/subcomponents/Header/components/Branding/Branding.module.css

@@ -1,15 +1,14 @@
 .branding {
-  justify-content: center;
   grid-area: branding;
   display: flex;
-  flex-grow: 1;
+  justify-content: center;
   padding-top: var(--spacing-4);
 
-  @media (width >= 768px) {
+  @media (width >=768px) {
     justify-content: unset;
   }
 }
 
 .logo {
-  flex-basis: 7.5rem;
+  width: 7.5rem;
 }