diff --git a/packages/chrome/src/elements/SkipNav.tsx b/packages/chrome/src/elements/SkipNav.tsx
index 3c78f8fbd23..8b5ab8d01ad 100644
--- a/packages/chrome/src/elements/SkipNav.tsx
+++ b/packages/chrome/src/elements/SkipNav.tsx
@@ -15,7 +15,7 @@ import { StyledSkipNav, StyledSkipNavIcon } from '../styled';
  */
 export const SkipNav = React.forwardRef<HTMLAnchorElement, ISkipNavProps>(
   ({ targetId, zIndex, children, ...props }, ref) => (
-    <StyledSkipNav href={`#${targetId}`} zIndex={zIndex} ref={ref} {...props}>
+    <StyledSkipNav href={`#${targetId}`} $zIndex={zIndex} ref={ref} {...props}>
       <StyledSkipNavIcon />
       {children}
     </StyledSkipNav>
diff --git a/packages/chrome/src/elements/body/Content.tsx b/packages/chrome/src/elements/body/Content.tsx
index 92ca5d150b2..016d34f8736 100644
--- a/packages/chrome/src/elements/body/Content.tsx
+++ b/packages/chrome/src/elements/body/Content.tsx
@@ -16,7 +16,7 @@ export const Content = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEl
   (props, ref) => {
     const { hasFooter } = useBodyContext() || {};
 
-    return <StyledContent ref={ref} hasFooter={hasFooter} {...props} />;
+    return <StyledContent ref={ref} $hasFooter={hasFooter} {...props} />;
   }
 );
 
diff --git a/packages/chrome/src/elements/header/Header.tsx b/packages/chrome/src/elements/header/Header.tsx
index 1c01ed5e0cf..8d576feb5af 100644
--- a/packages/chrome/src/elements/header/Header.tsx
+++ b/packages/chrome/src/elements/header/Header.tsx
@@ -14,9 +14,11 @@ import { HeaderItemIcon } from './HeaderItemIcon';
 import { HeaderItemText } from './HeaderItemText';
 import { HeaderItemWrapper } from './HeaderItemWrapper';
 
-export const HeaderComponent = React.forwardRef<HTMLElement, IHeaderProps>((props, ref) => (
-  <StyledHeader ref={ref} {...props} />
-));
+export const HeaderComponent = React.forwardRef<HTMLElement, IHeaderProps>(
+  ({ isStandalone, ...other }, ref) => (
+    <StyledHeader ref={ref} $isStandalone={isStandalone} {...other} />
+  )
+);
 
 HeaderComponent.displayName = 'Header';
 
diff --git a/packages/chrome/src/elements/header/HeaderItem.tsx b/packages/chrome/src/elements/header/HeaderItem.tsx
index d7ae14f1ed8..2cfa47539e6 100644
--- a/packages/chrome/src/elements/header/HeaderItem.tsx
+++ b/packages/chrome/src/elements/header/HeaderItem.tsx
@@ -16,12 +16,21 @@ import { StyledHeaderItem, StyledLogoHeaderItem } from '../../styled';
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const HeaderItem = React.forwardRef<HTMLButtonElement, IHeaderItemProps>(
-  ({ hasLogo, product, ...other }, ref) => {
+  ({ hasLogo, isRound, maxX, maxY, product, ...other }, ref) => {
     if (hasLogo) {
-      return <StyledLogoHeaderItem ref={ref} product={product} {...other} />;
+      return (
+        <StyledLogoHeaderItem
+          ref={ref}
+          $isRound={isRound}
+          $maxX={maxX}
+          $maxY={maxY}
+          $product={product}
+          {...other}
+        />
+      );
     }
 
-    return <StyledHeaderItem ref={ref} {...other} />;
+    return <StyledHeaderItem ref={ref} $isRound={isRound} $maxX={maxX} $maxY={maxY} {...other} />;
   }
 );
 
diff --git a/packages/chrome/src/elements/header/HeaderItemText.tsx b/packages/chrome/src/elements/header/HeaderItemText.tsx
index ee0744d4efa..4c21f6cc6a7 100644
--- a/packages/chrome/src/elements/header/HeaderItemText.tsx
+++ b/packages/chrome/src/elements/header/HeaderItemText.tsx
@@ -15,9 +15,11 @@ import { StyledHeaderItemText } from '../../styled';
  *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
-export const HeaderItemText = React.forwardRef<HTMLElement, IHeaderItemTextProps>((props, ref) => (
-  <StyledHeaderItemText ref={ref} {...props} />
-));
+export const HeaderItemText = React.forwardRef<HTMLElement, IHeaderItemTextProps>(
+  ({ isClipped, ...other }, ref) => (
+    <StyledHeaderItemText ref={ref} $isClipped={isClipped} {...other} />
+  )
+);
 
 HeaderItemText.displayName = 'Header.ItemText';
 
diff --git a/packages/chrome/src/elements/nav/Nav.tsx b/packages/chrome/src/elements/nav/Nav.tsx
index 33d8e3450b9..909c85a708b 100644
--- a/packages/chrome/src/elements/nav/Nav.tsx
+++ b/packages/chrome/src/elements/nav/Nav.tsx
@@ -17,23 +17,25 @@ import { NavItemIcon } from './NavItemIcon';
 import { NavItemText } from './NavItemText';
 import { NavList } from './NavList';
 
-export const NavComponent = React.forwardRef<HTMLElement, INavProps>((props, ref) => {
-  const { hue, isLight } = useChromeContext();
-  const navContextValue = useMemo(() => ({ isExpanded: !!props.isExpanded }), [props.isExpanded]);
+export const NavComponent = React.forwardRef<HTMLElement, INavProps>(
+  ({ isExpanded, ...other }, ref) => {
+    const { hue, isLight } = useChromeContext();
+    const navContextValue = useMemo(() => ({ isExpanded: !!isExpanded }), [isExpanded]);
 
-  return (
-    <ThemeProvider
-      theme={parentTheme => ({
-        ...parentTheme,
-        colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' }
-      })}
-    >
-      <NavContext.Provider value={navContextValue}>
-        <StyledNav ref={ref} {...props} hue={hue} />
-      </NavContext.Provider>
-    </ThemeProvider>
-  );
-});
+    return (
+      <ThemeProvider
+        theme={parentTheme => ({
+          ...parentTheme,
+          colors: { ...parentTheme.colors, base: isLight ? 'light' : 'dark' }
+        })}
+      >
+        <NavContext.Provider value={navContextValue}>
+          <StyledNav ref={ref} $isExpanded={isExpanded} $hue={hue} {...other} />
+        </NavContext.Provider>
+      </ThemeProvider>
+    );
+  }
+);
 
 NavComponent.displayName = 'Nav';
 
diff --git a/packages/chrome/src/elements/nav/NavItem.tsx b/packages/chrome/src/elements/nav/NavItem.tsx
index 943b48eafe4..3ff28bf5d26 100644
--- a/packages/chrome/src/elements/nav/NavItem.tsx
+++ b/packages/chrome/src/elements/nav/NavItem.tsx
@@ -32,7 +32,7 @@ export const NavItem = React.forwardRef<HTMLButtonElement, INavItemProps>(
     let retVal;
 
     if (hasLogo) {
-      retVal = <StyledLogoNavItem ref={ref} hue={hue} product={product} {...other} />;
+      retVal = <StyledLogoNavItem ref={ref} $hue={hue} $product={product} {...other} />;
     } else if (hasBrandmark) {
       retVal = <StyledBrandmarkNavItem ref={ref} {...other} />;
     } else {
@@ -40,8 +40,8 @@ export const NavItem = React.forwardRef<HTMLButtonElement, INavItemProps>(
         <StyledNavButton
           tabIndex={0}
           ref={ref}
-          isExpanded={isExpanded}
-          hue={hue}
+          $isExpanded={isExpanded}
+          $hue={hue}
           aria-current={isCurrent || undefined}
           {...other}
         />
diff --git a/packages/chrome/src/elements/nav/NavItemText.tsx b/packages/chrome/src/elements/nav/NavItemText.tsx
index 3e7c2ad0c5c..f0c1482d6e8 100644
--- a/packages/chrome/src/elements/nav/NavItemText.tsx
+++ b/packages/chrome/src/elements/nav/NavItemText.tsx
@@ -16,11 +16,15 @@ import { useNavContext } from '../../utils/useNavContext';
  *
  * @extends HTMLAttributes<HTMLSpanElement>
  */
-export const NavItemText = React.forwardRef<HTMLElement, INavItemTextProps>((props, ref) => {
-  const { isExpanded } = useNavContext();
+export const NavItemText = React.forwardRef<HTMLElement, INavItemTextProps>(
+  ({ isWrapped, ...other }, ref) => {
+    const { isExpanded } = useNavContext();
 
-  return <StyledNavItemText ref={ref} isExpanded={isExpanded} {...props} />;
-});
+    return (
+      <StyledNavItemText ref={ref} $isExpanded={isExpanded} $isWrapped={isWrapped} {...other} />
+    );
+  }
+);
 
 NavItemText.displayName = 'Nav.ItemText';
 
diff --git a/packages/chrome/src/elements/sheet/Sheet.tsx b/packages/chrome/src/elements/sheet/Sheet.tsx
index a560700b4aa..4ceda602c0a 100644
--- a/packages/chrome/src/elements/sheet/Sheet.tsx
+++ b/packages/chrome/src/elements/sheet/Sheet.tsx
@@ -52,10 +52,10 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
       <SheetContext.Provider value={sheetContext}>
         <StyledSheet
           inert={isOpen ? undefined : ''}
-          isOpen={isOpen}
-          isAnimated={isAnimated}
-          placement={placement}
-          size={size}
+          $isOpen={isOpen}
+          $isAnimated={isAnimated}
+          $placement={placement}
+          $size={size}
           tabIndex={-1}
           id={idPrefix}
           aria-labelledby={titleId}
@@ -64,10 +64,10 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
           {...props}
         >
           <StyledSheetWrapper
-            isOpen={isOpen}
-            isAnimated={isAnimated}
-            placement={placement}
-            size={size}
+            $isOpen={isOpen}
+            $isAnimated={isAnimated}
+            $placement={placement}
+            $size={size}
           >
             {children}
           </StyledSheetWrapper>
diff --git a/packages/chrome/src/elements/sheet/components/Footer.tsx b/packages/chrome/src/elements/sheet/components/Footer.tsx
index 229d07b451a..67cef20bcae 100644
--- a/packages/chrome/src/elements/sheet/components/Footer.tsx
+++ b/packages/chrome/src/elements/sheet/components/Footer.tsx
@@ -9,8 +9,8 @@ import React, { forwardRef } from 'react';
 import { ISheetFooterProps } from '../../../types';
 import { StyledSheetFooter } from '../../../styled';
 
-const SheetFooter = forwardRef<HTMLElement, ISheetFooterProps>((props, ref) => {
-  return <StyledSheetFooter ref={ref} {...props} />;
+const SheetFooter = forwardRef<HTMLElement, ISheetFooterProps>(({ isCompact, ...other }, ref) => {
+  return <StyledSheetFooter ref={ref} $isCompact={isCompact} {...other} />;
 });
 
 SheetFooter.displayName = 'Sheet.Footer';
diff --git a/packages/chrome/src/elements/sheet/components/Header.tsx b/packages/chrome/src/elements/sheet/components/Header.tsx
index 924b7903436..d388bba3607 100644
--- a/packages/chrome/src/elements/sheet/components/Header.tsx
+++ b/packages/chrome/src/elements/sheet/components/Header.tsx
@@ -13,7 +13,7 @@ import { useSheetContext } from '../../../utils/useSheetContext';
 const SheetHeader = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {
   const { isCloseButtonPresent } = useSheetContext();
 
-  return <StyledSheetHeader ref={ref} isCloseButtonPresent={isCloseButtonPresent} {...props} />;
+  return <StyledSheetHeader ref={ref} $isCloseButtonPresent={isCloseButtonPresent} {...props} />;
 });
 
 SheetHeader.displayName = 'Sheet.Header';
diff --git a/packages/chrome/src/styled/StyledSkipNav.ts b/packages/chrome/src/styled/StyledSkipNav.ts
index ef43e3e3dee..251f79b0915 100644
--- a/packages/chrome/src/styled/StyledSkipNav.ts
+++ b/packages/chrome/src/styled/StyledSkipNav.ts
@@ -90,7 +90,7 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
 };
 
 interface IStyledSkipNavProps {
-  zIndex?: number;
+  $zIndex?: number;
 }
 
 /*
@@ -109,7 +109,7 @@ export const StyledSkipNav = styled.a.attrs({
   justify-content: center;
   transform: translateX(-50%);
   direction: ${props => props.theme.rtl && 'rtl'};
-  z-index: ${props => props.zIndex};
+  z-index: ${props => props.$zIndex};
   border-radius: ${props => props.theme.borderRadii.md};
   text-decoration: underline;
   white-space: nowrap;
diff --git a/packages/chrome/src/styled/body/StyledContent.tsx b/packages/chrome/src/styled/body/StyledContent.tsx
index 4f59874c343..35e1dcfc924 100644
--- a/packages/chrome/src/styled/body/StyledContent.tsx
+++ b/packages/chrome/src/styled/body/StyledContent.tsx
@@ -13,12 +13,12 @@ import { getFooterHeight, getHeaderHeight } from '../utils';
 const COMPONENT_ID = 'chrome.content';
 
 interface IStyledContentProps {
-  hasFooter?: boolean;
+  $hasFooter?: boolean;
 }
 
-const sizeStyles = ({ theme, hasFooter }: IStyledContentProps & ThemeProps<DefaultTheme>) => {
+const sizeStyles = ({ theme, $hasFooter }: IStyledContentProps & ThemeProps<DefaultTheme>) => {
   const fontSize = theme.fontSizes.md;
-  const height = hasFooter
+  const height = $hasFooter
     ? `calc(100% - ${math(`${getHeaderHeight(theme)} + ${getFooterHeight(theme)}`)})`
     : `calc(100% - ${getHeaderHeight(theme)})`;
   const lineHeight = getLineHeight(theme.lineHeights.md, theme.fontSizes.md);
diff --git a/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts b/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts
index 87e474e86e8..b6061dc8061 100644
--- a/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts
+++ b/packages/chrome/src/styled/header/StyledBaseHeaderItem.ts
@@ -12,9 +12,9 @@ import { getHeaderItemSize } from '../utils';
 const COMPONENT_ID = 'chrome.base_header_item';
 
 export interface IStyledBaseHeaderItemProps {
-  maxX?: boolean;
-  maxY?: boolean;
-  isRound?: boolean;
+  $maxX?: boolean;
+  $maxY?: boolean;
+  $isRound?: boolean;
 }
 
 /*
@@ -22,19 +22,19 @@ export interface IStyledBaseHeaderItemProps {
  */
 const sizeStyles = ({
   theme,
-  maxY,
-  isRound
+  $maxY,
+  $isRound
 }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const margin = `0 ${theme.space.base * 3}px`;
   const size = getHeaderItemSize(theme);
-  const height = maxY ? '100%' : size;
+  const height = $maxY ? '100%' : size;
   const lineHeight = getLineHeight(size, theme.fontSizes.md);
   const padding = `0 ${theme.space.base * 0.75}px`;
   let borderRadius;
 
-  if (isRound) {
+  if ($isRound) {
     borderRadius = '100%';
-  } else if (maxY) {
+  } else if ($maxY) {
     borderRadius = '0';
   } else {
     borderRadius = theme.borderRadii.md;
@@ -61,9 +61,9 @@ export const StyledBaseHeaderItem = styled.button.attrs({
 })<IStyledBaseHeaderItemProps>`
   display: inline-flex;
   position: relative;
-  flex: ${props => props.maxX && '1'};
+  flex: ${props => props.$maxX && '1'};
   align-items: center;
-  justify-content: ${props => (props.maxX ? 'start' : 'center')};
+  justify-content: ${props => (props.$maxX ? 'start' : 'center')};
   order: 1;
   transition:
     box-shadow 0.1s ease-in-out,
diff --git a/packages/chrome/src/styled/header/StyledHeader.ts b/packages/chrome/src/styled/header/StyledHeader.ts
index 3d6ed377049..0a7313daac7 100644
--- a/packages/chrome/src/styled/header/StyledHeader.ts
+++ b/packages/chrome/src/styled/header/StyledHeader.ts
@@ -13,14 +13,14 @@ import { getHeaderHeight } from '../utils';
 const COMPONENT_ID = 'chrome.header';
 
 export interface IStyledHeaderProps {
-  isStandalone?: boolean;
+  $isStandalone?: boolean;
 }
 
-const colorStyles = ({ theme, isStandalone }: IStyledHeaderProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $isStandalone }: IStyledHeaderProps & ThemeProps<DefaultTheme>) => {
   const backgroundColor = getColor({ theme, variable: 'background.default' });
   const borderColor = getColor({ theme, variable: 'border.default' });
   const boxShadowColor = getColor({ variable: 'shadow.small', theme });
-  const boxShadow = isStandalone
+  const boxShadow = $isStandalone
     ? theme.shadows.lg('0', `${theme.space.base * 2}px`, boxShadowColor)
     : undefined;
   const foregroundColor = getColor({ theme, variable: 'foreground.subtle' });
@@ -53,7 +53,7 @@ export const StyledHeader = styled.header.attrs<IStyledHeaderProps>({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledHeaderProps>`
   display: flex;
-  position: ${props => props.isStandalone && 'relative'};
+  position: ${props => props.$isStandalone && 'relative'};
   align-items: center;
   justify-content: flex-end;
 
@@ -62,7 +62,7 @@ export const StyledHeader = styled.header.attrs<IStyledHeaderProps>({
   ${colorStyles};
 
   ${StyledLogoHeaderItem} {
-    display: ${props => props.isStandalone && 'inline-flex'};
+    display: ${props => props.$isStandalone && 'inline-flex'};
   }
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
diff --git a/packages/chrome/src/styled/header/StyledHeaderItem.ts b/packages/chrome/src/styled/header/StyledHeaderItem.ts
index ab0975d1bf0..ebc17408f91 100644
--- a/packages/chrome/src/styled/header/StyledHeaderItem.ts
+++ b/packages/chrome/src/styled/header/StyledHeaderItem.ts
@@ -18,7 +18,7 @@ const COMPONENT_ID = 'chrome.header_item';
 /*
  * 1. Anchor reset.
  */
-const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $maxY }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const options = { theme, variable: 'foreground.subtle' };
   const hoverColor = getColor({ ...options, dark: { offset: -100 }, light: { offset: 100 } });
   const activeColor = getColor({ ...options, dark: { offset: -200 }, light: { offset: 200 } });
@@ -29,7 +29,7 @@ const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<De
       color: inherit; /* [1] */
     }
 
-    ${focusStyles({ theme, inset: maxY })};
+    ${focusStyles({ theme, inset: $maxY })};
 
     /* prettier-ignore */
     &:hover ${StyledHeaderItemIcon},
@@ -45,8 +45,8 @@ const colorStyles = ({ theme, maxY }: IStyledBaseHeaderItemProps & ThemeProps<De
   `;
 };
 
-const sizeStyles = ({ theme, isRound }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
-  const iconBorderRadius = isRound ? '100px' : undefined;
+const sizeStyles = ({ theme, $isRound }: IStyledBaseHeaderItemProps & ThemeProps<DefaultTheme>) => {
+  const iconBorderRadius = $isRound ? '100px' : undefined;
   const imageBorderRadius = math(`${theme.borderRadii.md} - 1`);
   const imageSize = math(`${getHeaderItemSize(theme)} - ${theme.space.base * 2}`);
 
diff --git a/packages/chrome/src/styled/header/StyledHeaderItemText.ts b/packages/chrome/src/styled/header/StyledHeaderItemText.ts
index 584121da11f..264cae78495 100644
--- a/packages/chrome/src/styled/header/StyledHeaderItemText.ts
+++ b/packages/chrome/src/styled/header/StyledHeaderItemText.ts
@@ -12,7 +12,7 @@ import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'chrome.header_item_text';
 
 export interface IStyledHeaderItemTextProps {
-  isClipped?: boolean;
+  $isClipped?: boolean;
 }
 
 export const StyledHeaderItemText = styled.span.attrs<IStyledHeaderItemTextProps>({
@@ -21,7 +21,7 @@ export const StyledHeaderItemText = styled.span.attrs<IStyledHeaderItemTextProps
 })<IStyledHeaderItemTextProps>`
   margin: ${props => `0 ${props.theme.space.base * 0.75}px`};
 
-  ${props => props.isClipped && hideVisually()}
+  ${props => props.$isClipped && hideVisually()}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
diff --git a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts
index b19c99ebc6c..96395e086ea 100644
--- a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts
+++ b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts
@@ -17,13 +17,16 @@ import { getNavWidth, getProductColor } from '../utils';
 const COMPONENT_ID = 'chrome.header_item';
 
 export interface IStyledLogoHeaderItemProps {
-  product?: Product;
+  $product?: Product;
 }
 
-const colorStyles = ({ theme, product }: IStyledLogoHeaderItemProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({
+  theme,
+  $product
+}: IStyledLogoHeaderItemProps & ThemeProps<DefaultTheme>) => {
   const borderColor = getColor({ theme, variable: 'border.default' });
   const fill = getColor({ theme, variable: 'foreground.default' });
-  const color = getProductColor(product, fill /* fallback */);
+  const color = getProductColor($product, fill /* fallback */);
 
   return css`
     border-${theme.rtl ? 'left' : 'right'}-color: ${borderColor};
diff --git a/packages/chrome/src/styled/nav/StyledLogoNavItem.ts b/packages/chrome/src/styled/nav/StyledLogoNavItem.ts
index 92f92cca2dc..24eaf55e6a8 100644
--- a/packages/chrome/src/styled/nav/StyledLogoNavItem.ts
+++ b/packages/chrome/src/styled/nav/StyledLogoNavItem.ts
@@ -14,17 +14,17 @@ import { getProductColor } from '../utils';
 const COMPONENT_ID = 'chrome.logo_nav_list_item';
 
 export interface IStyledLogoNavItemProps {
-  hue: string;
-  product?: Product;
+  $hue: string;
+  $product?: Product;
 }
 
 const colorStyles = ({
   theme,
-  hue,
-  product
+  $hue,
+  $product
 }: IStyledLogoNavItemProps & ThemeProps<DefaultTheme>) => {
   const fillColor = getColor({ theme, variable: 'foreground.default' });
-  const color = hue === 'chromeHue' ? getProductColor(product) : fillColor;
+  const color = $hue === 'chromeHue' ? getProductColor($product) : fillColor;
 
   return css`
     color: ${color};
diff --git a/packages/chrome/src/styled/nav/StyledNav.ts b/packages/chrome/src/styled/nav/StyledNav.ts
index 8296bf219b8..c4c5e2404e9 100644
--- a/packages/chrome/src/styled/nav/StyledNav.ts
+++ b/packages/chrome/src/styled/nav/StyledNav.ts
@@ -12,13 +12,13 @@ import { getNavWidth, getNavWidthExpanded } from '../utils';
 const COMPONENT_ID = 'chrome.nav';
 
 interface IStyledNavProps {
-  hue: string;
-  isExpanded?: boolean;
+  $hue: string;
+  $isExpanded?: boolean;
 }
 
-const colorStyles = ({ theme, hue }: IStyledNavProps & ThemeProps<DefaultTheme>) => {
-  const shade = hue === 'chromeHue' ? 900 : undefined;
-  const backgroundColor = getColor({ theme, hue, shade });
+const colorStyles = ({ theme, $hue }: IStyledNavProps & ThemeProps<DefaultTheme>) => {
+  const shade = $hue === 'chromeHue' ? 900 : undefined;
+  const backgroundColor = getColor({ theme, hue: $hue, shade });
   const foregroundColor = getColor({ theme, dark: { hue: 'white' }, light: { hue: 'black' } });
 
   return css`
@@ -27,9 +27,9 @@ const colorStyles = ({ theme, hue }: IStyledNavProps & ThemeProps<DefaultTheme>)
   `;
 };
 
-const sizeStyles = ({ theme, isExpanded }: IStyledNavProps & ThemeProps<DefaultTheme>) => {
+const sizeStyles = ({ theme, $isExpanded }: IStyledNavProps & ThemeProps<DefaultTheme>) => {
   const fontSize = theme.fontSizes.md;
-  const width = isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
+  const width = $isExpanded ? getNavWidthExpanded() : getNavWidth(theme);
 
   return css`
     width: ${width};
diff --git a/packages/chrome/src/styled/nav/StyledNavButton.ts b/packages/chrome/src/styled/nav/StyledNavButton.ts
index 41aaad8eb9f..028121111c9 100644
--- a/packages/chrome/src/styled/nav/StyledNavButton.ts
+++ b/packages/chrome/src/styled/nav/StyledNavButton.ts
@@ -15,14 +15,14 @@ import { getNavWidth } from '../utils';
 const COMPONENT_ID = 'chrome.nav_button';
 
 interface IStyledNavItemProps {
-  isExpanded?: boolean;
-  hue: string;
+  $isExpanded?: boolean;
+  $hue: string;
 }
 
 /*
  * 1. Anchor reset
  */
-const colorStyles = ({ theme, hue }: IStyledNavItemProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $hue }: IStyledNavItemProps & ThemeProps<DefaultTheme>) => {
   const activeBackgroundColor = getColor({
     theme,
     dark: { hue: 'white' },
@@ -30,8 +30,8 @@ const colorStyles = ({ theme, hue }: IStyledNavItemProps & ThemeProps<DefaultThe
     transparency: theme.opacity[100]
   });
   const currentBackgroundColor =
-    hue === 'chromeHue'
-      ? getColor({ theme, hue, shade: 700 })
+    $hue === 'chromeHue'
+      ? getColor({ theme, hue: $hue, shade: 700 })
       : getColor({
           theme,
           dark: { hue: 'white' },
@@ -88,8 +88,8 @@ const colorStyles = ({ theme, hue }: IStyledNavItemProps & ThemeProps<DefaultThe
  * 1. Button reset
  * 2. Overrides flex default `min-width: auto`
  */
-const sizeStyles = ({ theme, isExpanded }: IStyledNavItemProps & ThemeProps<DefaultTheme>) => {
-  const iconMargin = isExpanded
+const sizeStyles = ({ theme, $isExpanded }: IStyledNavItemProps & ThemeProps<DefaultTheme>) => {
+  const iconMargin = $isExpanded
     ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}`
     : undefined;
 
@@ -115,9 +115,9 @@ export const StyledNavButton = styled(StyledBaseNavItem as 'button').attrs({
   as: 'button'
 })<IStyledNavItemProps>`
   flex: 1;
-  justify-content: ${props => props.isExpanded && 'start'};
+  justify-content: ${props => props.$isExpanded && 'start'};
   cursor: pointer;
-  text-align: ${props => props.isExpanded && 'inherit'};
+  text-align: ${props => props.$isExpanded && 'inherit'};
   text-decoration: none; /* [1] */
 
   ${sizeStyles};
diff --git a/packages/chrome/src/styled/nav/StyledNavItemText.ts b/packages/chrome/src/styled/nav/StyledNavItemText.ts
index ac94af3dfe2..e8ac095f0c8 100644
--- a/packages/chrome/src/styled/nav/StyledNavItemText.ts
+++ b/packages/chrome/src/styled/nav/StyledNavItemText.ts
@@ -14,23 +14,23 @@ import { getNavWidth } from '../utils';
 const COMPONENT_ID = 'chrome.nav_item_text';
 
 export interface IStyledNavItemTextProps {
-  isWrapped?: boolean;
-  isExpanded?: boolean;
+  $isWrapped?: boolean;
+  $isExpanded?: boolean;
 }
 
 const sizeStyles = ({
   theme,
-  isExpanded,
-  isWrapped
+  $isExpanded,
+  $isWrapped
 }: IStyledNavItemTextProps & ThemeProps<DefaultTheme>) => {
-  const clip = isExpanded ? 'auto' : undefined;
+  const clip = $isExpanded ? 'auto' : undefined;
   const lineHeight = getLineHeight(theme.space.base * 5, theme.fontSizes.md);
-  const margin = isExpanded
+  const margin = $isExpanded
     ? `0 ${math(`(${getNavWidth(theme)} - ${theme.iconSizes.lg}) / 4`)}`
     : undefined;
-  const width = isExpanded ? 'auto' : undefined;
-  const height = isExpanded ? 'auto' : undefined;
-  const whiteSpace = isWrapped ? undefined : 'nowrap';
+  const width = $isExpanded ? 'auto' : undefined;
+  const height = $isExpanded ? 'auto' : undefined;
+  const whiteSpace = $isWrapped ? undefined : 'nowrap';
 
   return css`
     clip: rect(1px, 1px, 1px, 1px);
@@ -57,9 +57,9 @@ export const StyledNavItemText = styled.span.attrs<IStyledNavItemTextProps>({
   overflow: hidden;
 
   ${StyledNavButton} > && {
-    position: ${props => (props.isExpanded ? 'static' : undefined)};
-    flex: ${props => (props.isExpanded ? 1 : undefined)};
-    text-overflow: ${props => (props.isExpanded ? 'ellipsis' : undefined)};
+    position: ${props => (props.$isExpanded ? 'static' : undefined)};
+    flex: ${props => (props.$isExpanded ? 1 : undefined)};
+    text-overflow: ${props => (props.$isExpanded ? 'ellipsis' : undefined)};
   }
 
   ${sizeStyles};
diff --git a/packages/chrome/src/styled/sheet/StyledSheet.spec.tsx b/packages/chrome/src/styled/sheet/StyledSheet.spec.tsx
index 11ab80aad6f..4668cb76dea 100644
--- a/packages/chrome/src/styled/sheet/StyledSheet.spec.tsx
+++ b/packages/chrome/src/styled/sheet/StyledSheet.spec.tsx
@@ -12,13 +12,13 @@ import { StyledSheet } from './StyledSheet';
 
 describe('StyledSheet', () => {
   it('renders correctly in rtl mode', () => {
-    renderRtl(<StyledSheet placement="end" />);
+    renderRtl(<StyledSheet $placement="end" />);
 
     expect(screen.getByRole('complementary')).toHaveStyleRule('border-right', 'none');
   });
 
   it('renders default styling correctly', () => {
-    render(<StyledSheet placement="end" />);
+    render(<StyledSheet $placement="end" />);
 
     const aside = screen.getByRole('complementary');
 
@@ -28,7 +28,7 @@ describe('StyledSheet', () => {
   });
 
   it('renders correctly when placement is set to "start"', () => {
-    render(<StyledSheet placement="start" />);
+    render(<StyledSheet $placement="start" />);
 
     expect(screen.getByRole('complementary')).toHaveStyleRule('border-right', 'none');
   });
@@ -36,13 +36,13 @@ describe('StyledSheet', () => {
   it('renders styling correctly when open', () => {
     const sheetSize = '200px';
 
-    render(<StyledSheet size={sheetSize} isOpen />);
+    render(<StyledSheet $size={sheetSize} $isOpen />);
 
     expect(screen.getByRole('complementary')).toHaveStyleRule('width', sheetSize);
   });
 
   it('renders styling correctly when animated', () => {
-    render(<StyledSheet isAnimated />);
+    render(<StyledSheet $isAnimated />);
 
     expect(screen.getByRole('complementary')).toHaveStyleRule(
       'transition',
diff --git a/packages/chrome/src/styled/sheet/StyledSheet.ts b/packages/chrome/src/styled/sheet/StyledSheet.ts
index 980f92fdef2..a2b5a4f203f 100644
--- a/packages/chrome/src/styled/sheet/StyledSheet.ts
+++ b/packages/chrome/src/styled/sheet/StyledSheet.ts
@@ -13,15 +13,15 @@ const COMPONENT_ID = 'chrome.sheet';
 
 interface IStyledSheetProps {
   inert?: string;
-  placement?: ISheetProps['placement'];
-  isOpen?: boolean;
-  isAnimated?: boolean;
-  size?: string;
+  $placement?: ISheetProps['placement'];
+  $isOpen?: boolean;
+  $isAnimated?: boolean;
+  $size?: string;
 }
 
-const colorStyles = ({ theme, isOpen }: IStyledSheetProps & ThemeProps<DefaultTheme>) => {
+const colorStyles = ({ theme, $isOpen }: IStyledSheetProps & ThemeProps<DefaultTheme>) => {
   const backgroundColor = getColor({ theme, variable: 'background.default' });
-  const borderColor = isOpen ? getColor({ theme, variable: 'border.default' }) : 'transparent';
+  const borderColor = $isOpen ? getColor({ theme, variable: 'border.default' }) : 'transparent';
 
   return css`
     border-color: ${borderColor};
@@ -31,17 +31,17 @@ const colorStyles = ({ theme, isOpen }: IStyledSheetProps & ThemeProps<DefaultTh
 
 const sizeStyles = ({
   theme,
-  isOpen,
-  placement,
-  size
+  $isOpen,
+  $placement,
+  $size
 }: IStyledSheetProps & ThemeProps<DefaultTheme>) => {
-  const width = isOpen ? size : 0;
+  const width = $isOpen ? $size : 0;
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
-  const border = isOpen ? theme.borders.sm : 'none';
+  const border = $isOpen ? theme.borders.sm : 'none';
   let borderProperty;
 
-  if (placement === 'start') {
+  if ($placement === 'start') {
     borderProperty = `border-${theme.rtl ? 'left' : 'right'}`;
   } else {
     borderProperty = `border-${theme.rtl ? 'right' : 'left'}`;
@@ -63,7 +63,7 @@ export const StyledSheet = styled.aside.attrs({
 })<IStyledSheetProps>`
   display: flex;
   order: 1;
-  transition: ${props => props.isAnimated && 'width 250ms ease-in-out'};
+  transition: ${props => props.$isAnimated && 'width 250ms ease-in-out'};
   overflow: hidden;
 
   ${sizeStyles};
diff --git a/packages/chrome/src/styled/sheet/StyledSheetFooter.spec.tsx b/packages/chrome/src/styled/sheet/StyledSheetFooter.spec.tsx
index 8e8ce822738..19e89065eae 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetFooter.spec.tsx
+++ b/packages/chrome/src/styled/sheet/StyledSheetFooter.spec.tsx
@@ -22,7 +22,7 @@ describe('StyledSheetFooter', () => {
   });
 
   it('renders compact styling when provided', () => {
-    render(<StyledSheetFooter isCompact />);
+    render(<StyledSheetFooter $isCompact />);
 
     const footer = screen.getByRole('contentinfo');
 
diff --git a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts
index c8b8d47b3ed..043b88ab69d 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts
+++ b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts
@@ -12,7 +12,7 @@ const COMPONENT_ID = 'chrome.sheet_footer';
 
 export interface IStyledSheetFooterProps {
   /** Sets the SheetFooter padding to half the standard and centers the elements  */
-  isCompact?: boolean;
+  $isCompact?: boolean;
 }
 
 const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
@@ -23,9 +23,9 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
   `;
 };
 
-const sizeStyles = ({ theme, isCompact }: IStyledSheetFooterProps & ThemeProps<DefaultTheme>) => {
+const sizeStyles = ({ theme, $isCompact }: IStyledSheetFooterProps & ThemeProps<DefaultTheme>) => {
   const border = theme.borders.sm;
-  const padding = `${theme.space.base * (isCompact ? 2.5 : 5)}px`;
+  const padding = `${theme.space.base * ($isCompact ? 2.5 : 5)}px`;
 
   return css`
     border-top: ${border};
@@ -40,7 +40,7 @@ export const StyledSheetFooter = styled.footer.attrs({
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: ${props => (props.isCompact ? 'center' : 'flex-end')};
+  justify-content: ${props => (props.$isCompact ? 'center' : 'flex-end')};
 
   ${sizeStyles};
 
diff --git a/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx b/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx
index f9813c3f6ea..23755ed92c6 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx
+++ b/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx
@@ -19,13 +19,13 @@ describe('StyledSheetHeader', () => {
   });
 
   it('renders correctly when button is present', () => {
-    render(<StyledSheetHeader isCloseButtonPresent>Header</StyledSheetHeader>);
+    render(<StyledSheetHeader $isCloseButtonPresent>Header</StyledSheetHeader>);
 
     expect(screen.getByText('Header')).toHaveStyleRule('padding', '20px 56px 20px 20px');
   });
 
   it('renders correctly in rtl mode when button is present', () => {
-    renderRtl(<StyledSheetHeader isCloseButtonPresent>Header</StyledSheetHeader>);
+    renderRtl(<StyledSheetHeader $isCloseButtonPresent>Header</StyledSheetHeader>);
 
     expect(screen.getByText('Header')).toHaveStyleRule('padding', '20px 20px 20px 56px');
   });
diff --git a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts
index 15ca5ae2519..0689c13f5b9 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts
+++ b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'
 const COMPONENT_ID = 'chrome.sheet_header';
 
 export interface IStyledSheetHeaderProps {
-  isCloseButtonPresent?: boolean;
+  $isCloseButtonPresent?: boolean;
 }
 
 const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
@@ -24,12 +24,12 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
 
 const sizeStyles = ({
   theme,
-  isCloseButtonPresent
+  $isCloseButtonPresent
 }: IStyledSheetHeaderProps & ThemeProps<DefaultTheme>) => {
   const border = theme.borders.sm;
   let padding = `${theme.space.base * 5}px`;
 
-  if (isCloseButtonPresent) {
+  if ($isCloseButtonPresent) {
     const paddingSide = `${theme.space.base * 14}px`;
 
     padding = theme.rtl
diff --git a/packages/chrome/src/styled/sheet/StyledSheetWrapper.spec.tsx b/packages/chrome/src/styled/sheet/StyledSheetWrapper.spec.tsx
index dfd11b732e9..0a76b9c058e 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetWrapper.spec.tsx
+++ b/packages/chrome/src/styled/sheet/StyledSheetWrapper.spec.tsx
@@ -14,25 +14,25 @@ describe('StyledSheetWrapper', () => {
   const sheetWrapperText = 'StyledSheetWrapper';
 
   it('renders correctly in rtl mode', () => {
-    renderRtl(<StyledSheetWrapper placement="end">{sheetWrapperText}</StyledSheetWrapper>);
+    renderRtl(<StyledSheetWrapper $placement="end">{sheetWrapperText}</StyledSheetWrapper>);
 
     expect(screen.getByText(sheetWrapperText)).toHaveStyleRule('transform', 'translateX(-100%)');
   });
 
   it('renders correctly when placement is set to "start"', () => {
-    render(<StyledSheetWrapper placement="start">{sheetWrapperText}</StyledSheetWrapper>);
+    render(<StyledSheetWrapper $placement="start">{sheetWrapperText}</StyledSheetWrapper>);
 
     expect(screen.getByText(sheetWrapperText)).toHaveStyleRule('transform', 'translateX(-100%)');
   });
 
   it('renders correctly when placement is set to "end"', () => {
-    render(<StyledSheetWrapper placement="end">{sheetWrapperText}</StyledSheetWrapper>);
+    render(<StyledSheetWrapper $placement="end">{sheetWrapperText}</StyledSheetWrapper>);
 
     expect(screen.getByText(sheetWrapperText)).toHaveStyleRule('transform', 'translateX(100%)');
   });
 
   it('renders default styling correctly', () => {
-    render(<StyledSheetWrapper isOpen>{sheetWrapperText}</StyledSheetWrapper>);
+    render(<StyledSheetWrapper $isOpen>{sheetWrapperText}</StyledSheetWrapper>);
 
     const div = screen.getByText(sheetWrapperText);
 
@@ -41,7 +41,7 @@ describe('StyledSheetWrapper', () => {
   });
 
   it('renders styling correctly when animated', () => {
-    render(<StyledSheetWrapper isAnimated>{sheetWrapperText}</StyledSheetWrapper>);
+    render(<StyledSheetWrapper $isAnimated>{sheetWrapperText}</StyledSheetWrapper>);
 
     expect(screen.getByText(sheetWrapperText)).toHaveStyleRule(
       'transition',
@@ -52,7 +52,7 @@ describe('StyledSheetWrapper', () => {
   it('renders styling correctly when given a size', () => {
     const sheetSize = '200px';
 
-    render(<StyledSheetWrapper size={sheetSize}>{sheetWrapperText}</StyledSheetWrapper>);
+    render(<StyledSheetWrapper $size={sheetSize}>{sheetWrapperText}</StyledSheetWrapper>);
 
     expect(screen.getByText(sheetWrapperText)).toHaveStyleRule('min-width', sheetSize);
   });
diff --git a/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts b/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts
index 9659dd11f76..c5e5c82bc4e 100644
--- a/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts
+++ b/packages/chrome/src/styled/sheet/StyledSheetWrapper.ts
@@ -12,24 +12,24 @@ import { ISheetProps } from '../../types';
 const COMPONENT_ID = 'chrome.sheet_wrapper';
 
 interface IStyledSheetWrapperProps {
-  isOpen?: boolean;
-  isAnimated?: boolean;
-  placement?: ISheetProps['placement'];
-  size?: string;
+  $isOpen?: boolean;
+  $isAnimated?: boolean;
+  $placement?: ISheetProps['placement'];
+  $size?: string;
 }
 
 const transformStyles = ({
   theme,
-  isAnimated,
-  isOpen,
-  placement
+  $isAnimated,
+  $isOpen,
+  $placement
 }: IStyledSheetWrapperProps & ThemeProps<DefaultTheme>) => {
-  const transition = isAnimated ? 'transform 250ms ease-in-out' : undefined;
+  const transition = $isAnimated ? 'transform 250ms ease-in-out' : undefined;
   let transform;
 
-  if (isOpen) {
+  if ($isOpen) {
     transform = 'translateX(0)';
-  } else if (placement === 'start') {
+  } else if ($placement === 'start') {
     transform = `translateX(${theme.rtl ? 100 : -100}%)`;
   } else {
     transform = `translateX(${theme.rtl ? -100 : 100}%)`;
@@ -48,7 +48,7 @@ export const StyledSheetWrapper = styled.div.attrs({
   display: flex;
   position: relative;
   flex-direction: column;
-  min-width: ${props => props.size};
+  min-width: ${props => props.$size};
 
   ${transformStyles};