diff --git a/packages/react/src/components/Button/__snapshots__/index.story.storyshot b/packages/react/src/components/Button/__snapshots__/index.story.storyshot
index 43114e1fb..ca8f1a6d5 100644
--- a/packages/react/src/components/Button/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Button/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots Button Danger 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots Button Danger 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots Button Danger 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -130,6 +130,7 @@ exports[`Storyshots Button Danger 1`] = `
 
 exports[`Storyshots Button Default 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -148,7 +149,11 @@ exports[`Storyshots Button Default 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -160,11 +165,6 @@ exports[`Storyshots Button Default 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -258,6 +258,7 @@ exports[`Storyshots Button Default 1`] = `
 
 exports[`Storyshots Button Disabled 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -276,7 +277,11 @@ exports[`Storyshots Button Disabled 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -288,11 +293,6 @@ exports[`Storyshots Button Disabled 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -386,6 +386,7 @@ exports[`Storyshots Button Disabled 1`] = `
 
 exports[`Storyshots Button Fixed 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -404,7 +405,11 @@ exports[`Storyshots Button Fixed 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -416,11 +421,6 @@ exports[`Storyshots Button Fixed 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-fill-available;
   width: -moz-available;
@@ -514,6 +514,7 @@ exports[`Storyshots Button Fixed 1`] = `
 
 exports[`Storyshots Button Focus 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -532,7 +533,11 @@ exports[`Storyshots Button Focus 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -544,11 +549,6 @@ exports[`Storyshots Button Focus 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -642,6 +642,7 @@ exports[`Storyshots Button Focus 1`] = `
 
 exports[`Storyshots Button Layout Example 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -660,7 +661,11 @@ exports[`Storyshots Button Layout Example 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -672,11 +677,6 @@ exports[`Storyshots Button Layout Example 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1204,16 +1204,25 @@ exports[`Storyshots Button Layout Example 1`] = `
 
 exports[`Storyshots Button Link 1`] = `
 .c0 {
-  color: inherit;
   cursor: pointer;
-}
-
-.c0:focus {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
   outline: none;
-}
-
-.c0 .text {
-  top: calc(1em + 2em);
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
 }
 
 .c0:disabled,
@@ -1221,6 +1230,15 @@ exports[`Storyshots Button Link 1`] = `
   cursor: default;
 }
 
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1303,7 +1321,6 @@ exports[`Storyshots Button Link 1`] = `
   data-dark={false}
 >
   <a
-    aria-disabled={false}
     className="c0 c1"
     href="#"
     onClick={[Function]}
@@ -1315,6 +1332,7 @@ exports[`Storyshots Button Link 1`] = `
 
 exports[`Storyshots Button Navigation 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1333,7 +1351,11 @@ exports[`Storyshots Button Navigation 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -1345,11 +1367,6 @@ exports[`Storyshots Button Navigation 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1443,6 +1460,7 @@ exports[`Storyshots Button Navigation 1`] = `
 
 exports[`Storyshots Button Nihongo 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1461,7 +1479,11 @@ exports[`Storyshots Button Nihongo 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -1473,11 +1495,6 @@ exports[`Storyshots Button Nihongo 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1571,6 +1588,7 @@ exports[`Storyshots Button Nihongo 1`] = `
 
 exports[`Storyshots Button Overlay 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1589,7 +1607,11 @@ exports[`Storyshots Button Overlay 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -1601,11 +1623,6 @@ exports[`Storyshots Button Overlay 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1699,6 +1716,7 @@ exports[`Storyshots Button Overlay 1`] = `
 
 exports[`Storyshots Button Primary 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1717,7 +1735,11 @@ exports[`Storyshots Button Primary 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -1729,11 +1751,6 @@ exports[`Storyshots Button Primary 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -1827,6 +1844,7 @@ exports[`Storyshots Button Primary 1`] = `
 
 exports[`Storyshots Button Small 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1845,7 +1863,11 @@ exports[`Storyshots Button Small 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -1857,11 +1879,6 @@ exports[`Storyshots Button Small 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
diff --git a/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot b/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
index 242f98ef9..33d34d8d0 100644
--- a/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Clickable/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots Clickable Button 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots Clickable Button 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots Clickable Button 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 <div
   data-dark={false}
 >
@@ -51,16 +51,25 @@ exports[`Storyshots Clickable Button 1`] = `
 
 exports[`Storyshots Clickable Link 1`] = `
 .c0 {
-  color: inherit;
   cursor: pointer;
-}
-
-.c0:focus {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
   outline: none;
-}
-
-.c0 .text {
-  top: calc(1em + 2em);
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
 }
 
 .c0:disabled,
@@ -68,11 +77,19 @@ exports[`Storyshots Clickable Link 1`] = `
   cursor: default;
 }
 
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
 <div
   data-dark={false}
 >
   <a
-    aria-disabled={false}
     className="c0"
     href="#"
     onClick={[Function]}
diff --git a/packages/react/src/components/Clickable/index.tsx b/packages/react/src/components/Clickable/index.tsx
index 1f1dcd500..c1d779e8f 100644
--- a/packages/react/src/components/Clickable/index.tsx
+++ b/packages/react/src/components/Clickable/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   LinkProps,
   useComponentAbstraction,
@@ -28,34 +28,33 @@ export type ClickableElement = HTMLButtonElement & HTMLAnchorElement
 const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
   function Clickable(props, ref) {
     const { Link } = useComponentAbstraction()
-    if ('to' in props) {
-      const { onClick, disabled = false, ...rest } = props
-      return (
-        <A<typeof Link>
-          {...rest}
-          as={disabled ? undefined : Link}
-          onClick={disabled ? undefined : onClick}
-          aria-disabled={disabled}
-          ref={ref}
-        />
-      )
-    } else {
-      return <Button {...props} ref={ref} />
+    const isLink = 'to' in props
+    const as = isLink ? Link : 'button'
+    const ariaDisabled = isLink && props.disabled === true ? true : undefined
+    let rest = props
+    if (isLink) {
+      const { disabled, ..._rest } = props
+      rest = _rest
     }
+    return (
+      <StyledClickableDiv
+        {...rest}
+        ref={ref}
+        as={as}
+        aria-disabled={ariaDisabled}
+      />
+    )
   }
 )
 export default Clickable
 
-const clickableCss = css`
-  /* Clickable style */
+const StyledClickableDiv = styled.div`
   cursor: pointer;
 
   ${disabledSelector} {
     cursor: default;
   }
-`
 
-const Button = styled.button`
   /* Reset button appearance */
   appearance: none;
   background: transparent;
@@ -88,21 +87,4 @@ const Button = styled.button`
     border-style: none;
     padding: 0;
   }
-
-  ${clickableCss}
-`
-
-const A = styled.span`
-  /* Reset a-tag appearance */
-  color: inherit;
-
-  &:focus {
-    outline: none;
-  }
-
-  .text {
-    top: calc(1em + 2em);
-  }
-
-  ${clickableCss}
 `
diff --git a/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot
index a80ddfb59..447e0b67e 100644
--- a/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
index cfdd57a5e..c0f65424a 100644
--- a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -402,6 +402,7 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 
 exports[`Storyshots DropdownSelector In Modal 1`] = `
 .c11 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -420,7 +421,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c11:disabled,
+.c11[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c11:focus {
@@ -432,11 +437,6 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   padding: 0;
 }
 
-.c11:disabled,
-.c11[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c7 {
   display: inline-block;
   width: 100%;
@@ -844,7 +844,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
           </div>
         </div>
         <button
-          className="c11 c12 c13 sc-gWXbKe c13"
+          className="c11 c12 c13 sc-hiCibw c13"
           height={32}
           onClick={[Function]}
           size="S"
@@ -862,6 +862,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 
 exports[`Storyshots DropdownSelector Playground 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -880,7 +881,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -892,11 +897,6 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
diff --git a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
index 4c2011487..b023d9530 100644
--- a/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/IconButton/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots IconButton Default M 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots IconButton Default M 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots IconButton Default M 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -118,6 +118,7 @@ exports[`Storyshots IconButton Default M 1`] = `
 
 exports[`Storyshots IconButton Overlay M 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -136,7 +137,11 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -148,11 +153,6 @@ exports[`Storyshots IconButton Overlay M 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
index 1f653685d..f8dd1ca37 100644
--- a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots Modal Bottom Sheet 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -135,6 +135,7 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
 
 exports[`Storyshots Modal Default 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -153,7 +154,11 @@ exports[`Storyshots Modal Default 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -165,11 +170,6 @@ exports[`Storyshots Modal Default 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -268,6 +268,7 @@ exports[`Storyshots Modal Default 1`] = `
 
 exports[`Storyshots Modal Full Bottom Sheet 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -286,7 +287,11 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -298,11 +303,6 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
@@ -401,6 +401,7 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
 
 exports[`Storyshots Modal Internal Scroll 1`] = `
 .c0 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -419,7 +420,11 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c0:focus {
@@ -431,11 +436,6 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
   padding: 0;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   width: -webkit-min-content;
   width: -moz-min-content;
diff --git a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
index c2aed46d4..473f94522 100644
--- a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
+++ b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
@@ -265,6 +265,7 @@ exports[`Storyshots TextArea Auto Height 1`] = `
 
 exports[`Storyshots TextArea Default 1`] = `
 .c7 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -283,7 +284,11 @@ exports[`Storyshots TextArea Default 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c7:focus {
@@ -295,11 +300,6 @@ exports[`Storyshots TextArea Default 1`] = `
   padding: 0;
 }
 
-.c7:disabled,
-.c7[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
@@ -580,6 +580,7 @@ exports[`Storyshots TextArea Default 1`] = `
 
 exports[`Storyshots TextArea Has Count 1`] = `
 .c7 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -598,7 +599,11 @@ exports[`Storyshots TextArea Has Count 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c7:focus {
@@ -610,11 +615,6 @@ exports[`Storyshots TextArea Has Count 1`] = `
   padding: 0;
 }
 
-.c7:disabled,
-.c7[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
@@ -910,6 +910,7 @@ exports[`Storyshots TextArea Has Count 1`] = `
 
 exports[`Storyshots TextArea Has Label 1`] = `
 .c9 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -928,7 +929,11 @@ exports[`Storyshots TextArea Has Label 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c9:disabled,
+.c9[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c9:focus {
@@ -940,11 +945,6 @@ exports[`Storyshots TextArea Has Label 1`] = `
   padding: 0;
 }
 
-.c9:disabled,
-.c9[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
diff --git a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
index 5256e7d8d..072eae638 100644
--- a/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
+++ b/packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot
@@ -2,6 +2,7 @@
 
 exports[`Storyshots TextField Default 1`] = `
 .c7 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -20,7 +21,11 @@ exports[`Storyshots TextField Default 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c7:focus {
@@ -32,11 +37,6 @@ exports[`Storyshots TextField Default 1`] = `
   padding: 0;
 }
 
-.c7:disabled,
-.c7[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
@@ -648,6 +648,7 @@ exports[`Storyshots TextField Has Affix 1`] = `
 
 exports[`Storyshots TextField Has Count 1`] = `
 .c7 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -666,7 +667,11 @@ exports[`Storyshots TextField Has Count 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c7:disabled,
+.c7[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c7:focus {
@@ -678,11 +683,6 @@ exports[`Storyshots TextField Has Count 1`] = `
   padding: 0;
 }
 
-.c7:disabled,
-.c7[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
@@ -1001,6 +1001,7 @@ exports[`Storyshots TextField Has Count 1`] = `
 
 exports[`Storyshots TextField Has Label 1`] = `
 .c9 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1019,7 +1020,11 @@ exports[`Storyshots TextField Has Label 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c9:disabled,
+.c9[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c9:focus {
@@ -1031,11 +1036,6 @@ exports[`Storyshots TextField Has Label 1`] = `
   padding: 0;
 }
 
-.c9:disabled,
-.c9[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   font-size: 14px;
   line-height: 22px;
@@ -1389,6 +1389,7 @@ exports[`Storyshots TextField Has Label 1`] = `
 
 exports[`Storyshots TextField Prefix Icon 1`] = `
 .c12 {
+  cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1407,7 +1408,11 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   margin: 0;
   overflow: visible;
   text-transform: none;
-  cursor: pointer;
+}
+
+.c12:disabled,
+.c12[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
 }
 
 .c12:focus {
@@ -1419,11 +1424,6 @@ exports[`Storyshots TextField Prefix Icon 1`] = `
   padding: 0;
 }
 
-.c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c3 {
   font-size: 14px;
   line-height: 22px;