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 = () => {