From 04499ab2a65b8d41fa3dcd475f9e899053660784 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 11 Aug 2025 16:43:00 +0000
Subject: [PATCH 1/2] Initial plan


From caf9e4e855ec020c4427926a135e6cfc7a82b052 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 11 Aug 2025 17:00:52 +0000
Subject: [PATCH 2/2] Update KeybindingHint.features.stories.tsx to no longer
 use styled-components

Co-authored-by: hectahertz <24622853+hectahertz@users.noreply.github.com>
---
 .../KeybindingHint.features.stories.module.css         |  9 +++++++++
 .../KeybindingHint/KeybindingHint.features.stories.tsx | 10 +++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css

diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css
new file mode 100644
index 00000000000..0387fd63fac
--- /dev/null
+++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.module.css
@@ -0,0 +1,9 @@
+.OnEmphasisWrapper {
+  background-color: var(--bgColor-black);
+  padding: var(--base-size-16);
+}
+
+.OnPrimaryWrapper {
+  background-color: var(--button-primary-bgColor-rest);
+  padding: var(--base-size-16);
+}
\ No newline at end of file
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
index feeb2d60fbe..d459119c6fb 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
+++ b/packages/react/src/KeybindingHint/KeybindingHint.features.stories.tsx
@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {KeybindingHint, type KeybindingHintProps} from '.'
-import Box from '../Box'
+import styles from './KeybindingHint.features.stories.module.css'
 
 export default {
   title: 'Experimental/Components/KeybindingHint/Features',
@@ -21,18 +21,18 @@ export const SequenceFull = {args: {keys: sequence, format: 'full'}}
 
 export const OnEmphasis: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'var(--bgColor-black)', p: 3}}>
+    <div className={styles.OnEmphasisWrapper}>
       <KeybindingHint {...args} />
-    </Box>
+    </div>
   ),
   args: {keys: chord, variant: 'onEmphasis'},
 }
 
 export const OnPrimary: StoryObj<KeybindingHintProps> = {
   render: args => (
-    <Box sx={{backgroundColor: 'var(--button-primary-bgColor-rest)', p: 3}}>
+    <div className={styles.OnPrimaryWrapper}>
       <KeybindingHint {...args} />
-    </Box>
+    </div>
   ),
   args: {keys: chord, variant: 'onPrimary'},
 }