Consistent className merging using cx()/cn()

[ravisuhag]

Summary

Some components use string template literal concatenation for combining CSS classes instead of the cx() / cn() utility used elsewhere in the design system. This leads to inconsistent className handling and potential issues with falsy values.

Goal

Standardize all className merging to use the same utility function across the entire component library.

Known Affected Components

Component	Issue	Details
Callout (#603)	item 1	Uses template literal instead of cx()
Button (#601)	item 1	Uses template literal concatenation instead of cx()

Problem

// Current (inconsistent)
className={\`\${button(...)} \${isLoaderOnly ? styles.loader : ''}\`}

// Should be
className={cx(button(...), isLoaderOnly && styles.loader)}

Template literal concatenation:

• Leaves trailing spaces for falsy values
• Doesn't handle undefined/null/false gracefully
• Inconsistent with rest of codebase

Acceptance Criteria

• All components use the same className merging utility
• No string template concatenation for className assembly
• Utility handles falsy values correctly