diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx
index 45a8e1436f..8c876eab27 100644
--- a/packages/canon/src/components/TextField/TextField.stories.tsx
+++ b/packages/canon/src/components/TextField/TextField.stories.tsx
@@ -155,7 +155,7 @@ export const DisabledWithLeftAndRightElements: Story = {
     ...WithLeftAndRightElements.args,
     disabled: true,
     rightElementProps: {
-      children: <CloseButton />,
+      children: <CloseButton disabled style={{ cursor: 'inherit' }} />,
     },
   },
 };
diff --git a/packages/canon/src/components/TextField/TextField.styles.css b/packages/canon/src/components/TextField/TextField.styles.css
index f30192f274..3830f084b2 100644
--- a/packages/canon/src/components/TextField/TextField.styles.css
+++ b/packages/canon/src/components/TextField/TextField.styles.css
@@ -53,23 +53,23 @@
 .canon-TextFieldInputWrapper {
   display: flex;
   align-items: center;
+  padding: 0 var(--canon-space-3);
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   background-color: var(--canon-bg-surface-1);
 }
 
 .canon-TextFieldInputLeftElement {
-  padding-left: var(--canon-space-4);
+  padding-right: var(--canon-space-1);
 }
 
 .canon-TextFieldInputRightElement {
-  padding-right: var(--canon-space-4);
+  padding-left: var(--canon-space-1);
 }
 
 .canon-TextFieldInput {
   border: none;
   background: none;
-  padding: 0 var(--canon-space-4);
   font-size: var(--canon-font-size-3);
   font-family: var(--canon-font-regular);
   font-weight: var(--canon-font-weight-regular);