diff --git a/modules/react/_examples/stories/mdx/examples/Density.tsx b/modules/react/_examples/stories/mdx/examples/Density.tsx
index 23c08d7d5c..edbd9e842e 100644
--- a/modules/react/_examples/stories/mdx/examples/Density.tsx
+++ b/modules/react/_examples/stories/mdx/examples/Density.tsx
@@ -154,12 +154,6 @@ const formFieldStencil = createStencil({
],
});
-const creditCardInputStyles = createStyles({
- width: calc.add(system.space.x10, system.space.x10),
- minWidth: calc.add(system.space.x10, system.space.x10),
- textAlign: 'center',
-});
-
const selectStencil = createStencil({
base: {},
modifiers: {
@@ -187,7 +181,9 @@ const selectStencil = createStencil({
});
const inputStencil = createStencil({
- base: {},
+ base: {
+ minWidth: px2rem(200),
+ },
modifiers: {
density: {
high: {
@@ -207,6 +203,15 @@ const inputStencil = createStencil({
},
});
+const creditCardInputStencil = createStencil({
+ extends: inputStencil,
+ base: {
+ width: calc.add(system.space.x10, system.space.x10),
+ minWidth: calc.add(system.space.x10, system.space.x10),
+ textAlign: 'center',
+ },
+});
+
const flexContainerStencil = createStencil({
base: {
display: 'flex',
@@ -409,20 +414,20 @@ export const Density = () => {