diff --git a/lib/.eslintrc b/lib/.eslintrc
index de7f2439b..96b59d79c 100644
--- a/lib/.eslintrc
+++ b/lib/.eslintrc
@@ -63,7 +63,7 @@
     "react/jsx-boolean-value": "warn",
     "react/jsx-curly-brace-presence": ["warn", { "props": "never" }],
     "react/jsx-fragments": "warn",
-    "react/jsx-no-useless-fragment": "error",
+    "react/jsx-no-useless-fragment": "off",
     "react/no-array-index-key": "warn",
     "react/no-did-update-set-state": "warn",
     "react/no-direct-mutation-state": "error",
diff --git a/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx b/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
index a74334a3d..a5da12935 100644
--- a/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
+++ b/lib/src/components/alert-dialog/alert-context/AlertDialog.tsx
@@ -41,19 +41,15 @@ export const Alert: React.FC<AlertDialogContentProps> = ({
         {cancelActionText && (
           <Button
             appearance="outline"
-            as={AlertDialog.Cancel}
             onClick={() => onAction(false)}
             size="sm"
+            asChild
           >
-            {cancelActionText}
+            <AlertDialog.Cancel>{cancelActionText}</AlertDialog.Cancel>
           </Button>
         )}
-        <Button
-          as={AlertDialog.Action}
-          onClick={() => onAction(true)}
-          size="sm"
-        >
-          {confirmActionText}
+        <Button onClick={() => onAction(true)} size="sm" asChild>
+          <AlertDialog.Action>{confirmActionText}</AlertDialog.Action>
         </Button>
       </Stack>
     </AlertDialog.Content>
diff --git a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap
index c251d1b3a..84694359b 100644
--- a/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap
+++ b/lib/src/components/banner/banner-regular/__snapshots__/BannerRegular.test.tsx.snap
@@ -428,12 +428,18 @@ exports[`BannerRegular component renders 1`] = `
     margin-left: var(--space-2);
   }
 
-  .c-fkUJsw-eYnvrx-size-sm {
+  .c-fkUJsw-jMTgOB-size-sm {
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
     height: var(--sizes-3);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt {
+    height: 16px;
+    width: 16px;
   }
 
   .c-fkUJsw-fGHEql-fullWidth-true {
@@ -497,12 +503,20 @@ exports[`BannerRegular component renders 1`] = `
 }
 
 @media (min-width: 800px) {
-    .c-fkUJsw-hnmcil-size-md {
+    .c-fkUJsw-dbnTtJ-size-md {
       font-size: var(--fontSizes-md);
       line-height: 1.5;
       height: var(--sizes-4);
       padding-left: var(--space-5);
       padding-right: var(--space-5);
+      gap: var(--space-3);
+    }
+}
+
+@media (min-width: 800px) {
+    .c-fkUJsw-dbnTtJ-size-md .c-dbrbZt {
+      height: 20px;
+      width: 20px;
     }
 }
 
@@ -586,13 +600,13 @@ exports[`BannerRegular component renders 1`] = `
         class="c-jgdwfn c-jgdwfn-ejCoEP-direction-row c-jgdwfn-XefLA-wrap-wrap c-jgdwfn-awKDG-justify-start c-jgdwfn-jroWjL-align-center c-jgdwfn-dPMagj-gap-2 c-jgdwfn-hAgpth-gap-4"
       >
         <button
-          class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-hnmcil-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-iRJCoR-cv"
+          class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-dbnTtJ-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-iRJCoR-cv"
           type="button"
         >
           Contact an expert
         </button>
         <button
-          class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-hnmcil-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-bznQva-cv"
+          class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-dbnTtJ-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-bznQva-cv"
           type="button"
         >
           Secondary
@@ -1070,12 +1084,18 @@ exports[`BannerRegular component renders dismissible variant 1`] = `
     margin-left: var(--space-2);
   }
 
-  .c-fkUJsw-eYnvrx-size-sm {
+  .c-fkUJsw-jMTgOB-size-sm {
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
     height: var(--sizes-3);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt {
+    height: 16px;
+    width: 16px;
   }
 
   .c-fkUJsw-fGHEql-fullWidth-true {
@@ -1154,12 +1174,20 @@ exports[`BannerRegular component renders dismissible variant 1`] = `
 }
 
 @media (min-width: 800px) {
-    .c-fkUJsw-hnmcil-size-md {
+    .c-fkUJsw-dbnTtJ-size-md {
       font-size: var(--fontSizes-md);
       line-height: 1.5;
       height: var(--sizes-4);
       padding-left: var(--space-5);
       padding-right: var(--space-5);
+      gap: var(--space-3);
+    }
+}
+
+@media (min-width: 800px) {
+    .c-fkUJsw-dbnTtJ-size-md .c-dbrbZt {
+      height: 20px;
+      width: 20px;
     }
 }
 
@@ -1258,13 +1286,13 @@ exports[`BannerRegular component renders dismissible variant 1`] = `
         class="c-jgdwfn c-jgdwfn-ejCoEP-direction-row c-jgdwfn-XefLA-wrap-wrap c-jgdwfn-awKDG-justify-start c-jgdwfn-jroWjL-align-center c-jgdwfn-dPMagj-gap-2 c-jgdwfn-hAgpth-gap-4"
       >
         <button
-          class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-hnmcil-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-iRJCoR-cv"
+          class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-dbnTtJ-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-iRJCoR-cv"
           type="button"
         >
           Contact an expert
         </button>
         <button
-          class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-hnmcil-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-bznQva-cv"
+          class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-dbnTtJ-size-md c-fkUJsw-fXTFOn-fullWidth-false c-fkUJsw-bznQva-cv"
           type="button"
         >
           Secondary
diff --git a/lib/src/components/button/Button.test.tsx b/lib/src/components/button/Button.test.tsx
index 2c7071bc8..2bcf012ac 100644
--- a/lib/src/components/button/Button.test.tsx
+++ b/lib/src/components/button/Button.test.tsx
@@ -135,8 +135,8 @@ describe(`Button component`, () => {
 
   it('is polymorphic', async () => {
     render(
-      <Button as="a" href="https://app.atomlearning.co.uk">
-        BUTTON
+      <Button asChild>
+        <a href="https://app.atomlearning.co.uk">BUTTON</a>
       </Button>
     )
 
@@ -183,14 +183,5 @@ describe(`Button component`, () => {
 
       expect(handleClick).toHaveBeenCalledTimes(0)
     })
-
-    it('renders an anchor if provided a link', async () => {
-      render(<Button href="https://atomlearning.co.uk">ATOM</Button>)
-
-      expect(await screen.findByRole('link')).toHaveAttribute(
-        'href',
-        'https://atomlearning.co.uk'
-      )
-    })
   })
 })
diff --git a/lib/src/components/button/Button.tsx b/lib/src/components/button/Button.tsx
index e235a6a88..19cc8d5ec 100644
--- a/lib/src/components/button/Button.tsx
+++ b/lib/src/components/button/Button.tsx
@@ -1,12 +1,12 @@
+import { Slot } from '@radix-ui/react-slot'
 import type { VariantProps } from '@stitches/react'
 import { darken, opacify } from 'color2k'
 import * as React from 'react'
 
 import { Box } from '~/components/box'
-import { Icon } from '~/components/icon'
+import { StyledIcon } from '~/components/icon'
 import { Loader } from '~/components/loader'
 import { styled, theme } from '~/stitches'
-import { NavigatorActions } from '~/types'
 import { Override } from '~/utilities'
 
 const getButtonOutlineVariant = (
@@ -86,19 +86,24 @@ export const StyledButton = styled('button', {
         fontSize: '$sm',
         lineHeight: 1.53,
         height: '$3',
-        px: '$4'
+        px: '$4',
+        gap: '$2',
+        [`& ${StyledIcon}`]: { size: 16 }
       },
       md: {
         fontSize: '$md',
         lineHeight: 1.5,
         height: '$4',
-        px: '$5'
+        px: '$5',
+        gap: '$3',
+        [`& ${StyledIcon}`]: { size: 20 }
       },
       lg: {
         fontSize: '$lg',
         lineHeight: 1.5,
         height: '$5',
-        px: '$5'
+        px: '$5',
+        [`& ${StyledIcon}`]: { size: 22 }
       }
     },
     isLoading: {
@@ -117,7 +122,6 @@ export const StyledButton = styled('button', {
       }
     }
   },
-
   compoundVariants: [
     {
       theme: 'primary',
@@ -189,108 +193,81 @@ export const StyledButton = styled('button', {
   ]
 })
 
-const WithLoader = ({ isLoading, children }) => (
-  <>
-    <Loader
-      css={{
-        opacity: isLoading ? 1 : 0,
-        position: 'absolute',
-        transition: 'opacity 150ms'
-      }}
-    />
-    <Box
-      as="span"
-      css={isLoading ? { opacity: 0, transition: 'opacity 150ms' } : {}}
-    >
-      {children}
-    </Box>
-  </>
-)
-
-const getIconSize = (size) => {
-  switch (size) {
-    case 'lg':
-      return 22
-    case 'md':
-      return 20
-    case 'sm':
-    default:
-      return 16
+const ButtonContent = ({
+  children,
+  isLoading
+}: React.PropsWithChildren<Pick<ButtonProps, 'isLoading'>>) => {
+  if (typeof isLoading !== 'boolean') {
+    return <>{children}</>
   }
-}
 
-const getChildren = (children, size) =>
-  React.Children.map(children, (child, i) => {
-    if (child?.type === Icon) {
-      return React.cloneElement(child, {
-        css: {
-          [i === 0 ? 'mr' : 'ml']: size === 'sm' ? '$2' : '$3',
-          size: getIconSize(size),
-          ...(child.props.css ? child.props.css : {})
-        }
-      })
-    }
-    return child
-  })
+  return (
+    <>
+      <Loader
+        css={{
+          opacity: isLoading ? 1 : 0,
+          position: 'absolute',
+          transition: 'opacity 150ms'
+        }}
+      />
+      <Box
+        as="span"
+        css={isLoading ? { opacity: 0, transition: 'opacity 150ms' } : {}}
+      >
+        {children}
+      </Box>
+    </>
+  )
+}
 
 type ButtonProps = Override<
   React.ComponentProps<typeof StyledButton>,
   VariantProps<typeof StyledButton> & {
-    as?: React.ComponentType | React.ElementType
+    as?: never
+    asChild?: boolean
     children: React.ReactNode
     isLoading?: boolean
-  } & NavigatorActions
+  }
 >
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
+      as,
+      asChild,
       isLoading,
       onClick,
-      href,
       appearance = 'solid',
       size = 'md',
       theme = 'primary',
-      type = 'button',
       ...rest
     },
     ref
   ) => {
-    const linkSpecificProps = href
-      ? {
-          as: 'a',
-          href,
-          onClick: undefined
-        }
-      : {}
+    const props = {
+      ...rest,
+      appearance,
+      size,
+      theme,
+      children,
+      ref,
+      // Note: button is not disabled when loading for accessibility purposes.
+      // Instead the click action is not fired and the button looks faded
+      isLoading: isLoading || false,
+      onClick: !isLoading ? onClick : undefined
+    }
 
-    const buttonSpecificProps = href ? {} : { type }
+    if (asChild) {
+      return <StyledButton {...props} as={Slot} />
+    }
 
-    // Note: button is not disabled when loading for accessibility purposes.
-    // Instead the click action is not fired and the button looks faded
     return (
-      <StyledButton
-        isLoading={isLoading || false}
-        onClick={!isLoading ? onClick : undefined}
-        appearance={appearance}
-        size={size}
-        theme={theme}
-        {...rest}
-        {...linkSpecificProps}
-        {...buttonSpecificProps}
-        ref={ref}
-      >
-        {typeof isLoading === 'boolean' ? (
-          <WithLoader isLoading={isLoading}>
-            {getChildren(children, size)}
-          </WithLoader>
-        ) : (
-          getChildren(children, size)
-        )}
+      <StyledButton type="button" {...props}>
+        <ButtonContent isLoading={isLoading}>{children}</ButtonContent>
       </StyledButton>
     )
   }
-) as React.FC<ButtonProps>
+)
 
 Button.displayName = 'Button'
diff --git a/lib/src/components/button/__snapshots__/Button.test.tsx.snap b/lib/src/components/button/__snapshots__/Button.test.tsx.snap
index 3f0298430..9f1772403 100644
--- a/lib/src/components/button/__snapshots__/Button.test.tsx.snap
+++ b/lib/src/components/button/__snapshots__/Button.test.tsx.snap
@@ -56,12 +56,18 @@ exports[`Button component Loading state renders a loading button 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-dbrbZt-dMrjnF-size-md {
@@ -152,12 +158,6 @@ exports[`Button component Loading state renders a loading button 1`] = `
 }
 
 @media  {
-  .c-dbrbZt-idQfaGE-css {
-    margin-left: var(--space-3);
-    height: 20px;
-    width: 20px;
-  }
-
   .c-dhzjXW-ihMdMjL-css {
     justify-content: center;
     opacity: 1;
@@ -173,7 +173,7 @@ exports[`Button component Loading state renders a loading button 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-DdIlq-isLoading-true c-fkUJsw-gsycxF-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-DdIlq-isLoading-true c-fkUJsw-gsycxF-cv"
     type="button"
   >
     <div
@@ -225,12 +225,18 @@ exports[`Button component renders a button 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -259,7 +265,7 @@ exports[`Button component renders a button 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
     type="button"
   >
     BUTTON
@@ -297,12 +303,18 @@ exports[`Button component renders a button with an icon 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-dbrbZt-dMrjnF-size-md {
@@ -379,23 +391,15 @@ exports[`Button component renders a button with an icon 1`] = `
   }
 }
 
-@media  {
-  .c-dbrbZt-idQfaGE-css {
-    margin-left: var(--space-3);
-    height: 20px;
-    width: 20px;
-  }
-}
-
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
     type="button"
   >
     BUTTON 
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-dbrbZt-idQfaGE-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -428,12 +432,18 @@ exports[`Button component renders a disabled button 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -484,7 +494,7 @@ exports[`Button component renders a disabled button 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
     disabled=""
     type="button"
   >
@@ -514,12 +524,18 @@ exports[`Button component renders a disabled warning outline button 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -570,7 +586,7 @@ exports[`Button component renders a disabled warning outline button 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md"
     disabled=""
     type="button"
   >
@@ -600,12 +616,18 @@ exports[`Button component renders a outline button 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -656,7 +678,7 @@ exports[`Button component renders a outline button 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-fSssiS-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-fSssiS-cv"
     type="button"
   >
     BUTTON
@@ -685,12 +707,18 @@ exports[`Button component renders a outline button with secondary theme 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -763,7 +791,7 @@ exports[`Button component renders a outline button with secondary theme 1`] = `
 
 <div>
   <button
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-skNNT-cv"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-skNNT-cv"
     type="button"
   >
     BUTTON
diff --git a/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap b/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap
index dd2d45693..a4c7cbbef 100644
--- a/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/lib/src/components/calendar/__snapshots__/Calendar.test.tsx.snap
@@ -157,12 +157,18 @@ exports[`Calendar component renders 1`] = `
     max-width: 250px;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-dyvMgW-bndJoy-size-sm {
@@ -317,7 +323,7 @@ exports[`Calendar component renders 1`] = `
         class="c-dhzjXW c-dhzjXW-iePfWBT-css"
       >
         <button
-          class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-iRJCoR-cv c-fkUJsw-ikwYYXS-css"
+          class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-iRJCoR-cv c-fkUJsw-ikwYYXS-css"
           type="button"
         >
           Dec
diff --git a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap
index 818e473c3..7f76ad782 100644
--- a/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap
+++ b/lib/src/components/create-password-field/__snapshots__/CreatePasswordField.test.tsx.snap
@@ -207,12 +207,18 @@ exports[`CreatePasswordField component displays validation styling to the input
     max-width: 250px;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-PJLV-ldsiYK-theme-neutral {
@@ -390,7 +396,7 @@ exports[`CreatePasswordField component displays validation styling to the input
       </div>
     </div>
     <button
-      class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+      class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
       type="submit"
     >
       Submit
@@ -578,12 +584,18 @@ exports[`CreatePasswordField component renders 1`] = `
     max-width: 250px;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
@@ -711,7 +723,7 @@ exports[`CreatePasswordField component renders 1`] = `
       </div>
     </div>
     <button
-      class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+      class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
       type="submit"
     >
       Submit
diff --git a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
index 0610600e5..5ca33e597 100644
--- a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
+++ b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
@@ -461,12 +461,18 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     display: table;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-QtuIU-gtyVWU-size-sm {
@@ -716,7 +722,7 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
       Something is missing
     </p>
     <button
-      class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
+      class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
       type="button"
     >
       Click here
@@ -4526,12 +4532,18 @@ exports[`DataTable sticky columns renders 1`] = `
     display: table;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 }
 
diff --git a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap
index 20580a8fa..009aab28e 100644
--- a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap
+++ b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap
@@ -407,12 +407,18 @@ exports[`DateInput component renders lg size 1`] = `
     max-width: 250px;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-dyvMgW-bndJoy-size-sm {
diff --git a/lib/src/components/field-wrapper/FieldWrapper.tsx b/lib/src/components/field-wrapper/FieldWrapper.tsx
index 65ac608c8..65a6f9595 100644
--- a/lib/src/components/field-wrapper/FieldWrapper.tsx
+++ b/lib/src/components/field-wrapper/FieldWrapper.tsx
@@ -53,8 +53,13 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = ({
           {label}
         </Label>
         {prompt && (
-          <Link href={prompt?.link} onClick={prompt?.onClick} size="sm">
-            {prompt.label}
+          <Link
+            onClick={prompt?.onClick}
+            size="sm"
+            asChild={!prompt?.link}
+            href={prompt.link}
+          >
+            {!prompt?.link ? <button>{prompt.label}</button> : prompt.label}
           </Link>
         )}
       </LabelContainer>
diff --git a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap
index 7a69e00fe..446ed3112 100644
--- a/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap
+++ b/lib/src/components/field-wrapper/__snapshots__/FieldWrapper.test.tsx.snap
@@ -216,6 +216,8 @@ exports[`FieldWrapper component renders 1`] = `
       <a
         class="c-fucOQC c-fucOQC-bndJoy-size-sm"
         href="https://example.com"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         Example prompt
       </a>
diff --git a/lib/src/components/file-input/FileInput.tsx b/lib/src/components/file-input/FileInput.tsx
index 348971b18..0238e885f 100644
--- a/lib/src/components/file-input/FileInput.tsx
+++ b/lib/src/components/file-input/FileInput.tsx
@@ -24,16 +24,18 @@ export const FileInput: React.FC<FileInputProps> = ({
   }
 
   return (
-    <Button as="label" {...rest}>
-      <Icon is={Upload} />
-      {children}
-      <input
-        type="file"
-        onChange={handleFileSelect}
-        accept={accept}
-        multiple={multiple}
-        hidden
-      />
+    <Button {...rest} asChild>
+      <label>
+        <Icon is={Upload} />
+        {children}
+        <input
+          type="file"
+          onChange={handleFileSelect}
+          accept={accept}
+          multiple={multiple}
+          hidden
+        />
+      </label>
     </Button>
   )
 }
diff --git a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
index 408426573..a315a73b9 100644
--- a/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
+++ b/lib/src/components/file-input/__snapshots__/FileInput.test.tsx.snap
@@ -30,12 +30,18 @@ exports[`FileInput component renders 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-dbrbZt-dMrjnF-size-md {
@@ -68,22 +74,13 @@ exports[`FileInput component renders 1`] = `
   }
 }
 
-@media  {
-  .c-dbrbZt-idQgHjC-css {
-    margin-right: var(--space-3);
-    height: 20px;
-    width: 20px;
-  }
-}
-
 <div>
   <label
-    class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-gsycxF-cv"
-    type="button"
+    class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-gsycxF-cv"
   >
     <svg
       aria-hidden="true"
-      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md c-dbrbZt-idQgHjC-css"
+      class="c-dbrbZt c-dbrbZt-dMrjnF-size-md"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
diff --git a/lib/src/components/link/Link.test.tsx b/lib/src/components/link/Link.test.tsx
index 26ab30bce..0397b13fa 100644
--- a/lib/src/components/link/Link.test.tsx
+++ b/lib/src/components/link/Link.test.tsx
@@ -44,7 +44,11 @@ describe(`Link component`, () => {
   })
 
   it('is polymorphic', async () => {
-    render(<Link as="button">See more</Link>)
+    render(
+      <Link asChild>
+        <button>See more</button>
+      </Link>
+    )
 
     expect(screen.getByRole('button')).toBeInTheDocument()
   })
diff --git a/lib/src/components/link/Link.tsx b/lib/src/components/link/Link.tsx
index abfd9abe6..1fdb4a164 100644
--- a/lib/src/components/link/Link.tsx
+++ b/lib/src/components/link/Link.tsx
@@ -1,8 +1,8 @@
+import { Slot } from '@radix-ui/react-slot'
 import * as React from 'react'
 
 import { styled } from '~/stitches'
-import { NavigatorActions } from '~/types'
-import { Override } from '~/utilities'
+import { isExternalLink } from '~/utilities'
 
 import { StyledHeading } from '../heading/Heading'
 import { StyledLi } from '../list/List'
@@ -35,23 +35,29 @@ export const StyledLink = styled('a', {
   variants: textVariants
 })
 
-type LinkProps = Override<
-  React.ComponentProps<typeof StyledLink>,
-  {
-    as?: React.ComponentType | React.ElementType
-  } & NavigatorActions
->
+type LinkProps = React.ComponentProps<typeof StyledLink> & {
+  asChild?: boolean
+  as?: never
+}
 
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ size = 'md', href, ...props }, ref) => (
-    <StyledLink
-      {...(!href && { as: 'button', noCapsize: true })}
-      size={size}
-      href={href}
-      {...props}
-      ref={ref}
-    />
-  )
-) as React.FC<LinkProps>
+  ({ as, asChild, size = 'md', href, ...rest }, ref) => {
+    if (asChild) {
+      return <StyledLink noCapsize {...rest} as={Slot} size={size} ref={ref} />
+    }
+
+    return (
+      <StyledLink
+        {...(isExternalLink(href)
+          ? { target: '_blank', rel: 'noopener noreferrer' }
+          : {})}
+        {...rest}
+        href={href}
+        size={size}
+        ref={ref}
+      />
+    )
+  }
+)
 
 Link.displayName = 'Link'
diff --git a/lib/src/components/link/__snapshots__/Link.test.tsx.snap b/lib/src/components/link/__snapshots__/Link.test.tsx.snap
index 26ebf9813..52c20a11d 100644
--- a/lib/src/components/link/__snapshots__/Link.test.tsx.snap
+++ b/lib/src/components/link/__snapshots__/Link.test.tsx.snap
@@ -138,20 +138,20 @@ exports[`Link component can be nested within Text and Heading 1`] = `
   <p
     class="c-dyvMgW c-dyvMgW-gvmVBy-size-md"
   >
-    <button
-      class="c-fucOQC c-fucOQC-gvmVBy-size-md c-fucOQC-fmPQHp-noCapsize-true"
+    <a
+      class="c-fucOQC c-fucOQC-gvmVBy-size-md"
     >
       TEXT LINK
-    </button>
+    </a>
   </p>
   <h2
     class="c-jryFOR c-jryFOR-fOoUdm-size-md"
   >
-    <button
-      class="c-fucOQC c-fucOQC-gvmVBy-size-md c-fucOQC-fmPQHp-noCapsize-true"
+    <a
+      class="c-fucOQC c-fucOQC-gvmVBy-size-md"
     >
       HEADING LINK
-    </button>
+    </a>
   </h2>
 </div>
 `;
@@ -221,6 +221,8 @@ exports[`Link component renders an anchor 1`] = `
   <a
     class="c-fucOQC c-fucOQC-gvmVBy-size-md"
     href="https://google.com/"
+    rel="noopener noreferrer"
+    target="_blank"
   >
     GOOGLE
   </a>
@@ -309,6 +311,8 @@ exports[`Link component renders an large anchor 1`] = `
   <a
     class="c-fucOQC c-fucOQC-jvTRJO-size-lg"
     href="https://google.com/"
+    rel="noopener noreferrer"
+    target="_blank"
   >
     GOOGLE
   </a>
diff --git a/lib/src/components/markdown-content/__snapshots__/MarkdownContent.test.tsx.snap b/lib/src/components/markdown-content/__snapshots__/MarkdownContent.test.tsx.snap
index aef8046c0..df1c96571 100644
--- a/lib/src/components/markdown-content/__snapshots__/MarkdownContent.test.tsx.snap
+++ b/lib/src/components/markdown-content/__snapshots__/MarkdownContent.test.tsx.snap
@@ -683,6 +683,8 @@ line 3 of code
       <a
         class="c-fucOQC c-fucOQC-gvmVBy-size-md"
         href="http://dev.nodeca.com"
+        rel="noopener noreferrer"
+        target="_blank"
       >
         link text
       </a>
@@ -693,6 +695,8 @@ line 3 of code
       <a
         class="c-fucOQC c-fucOQC-gvmVBy-size-md"
         href="http://nodeca.github.io/pica/demo/"
+        rel="noopener noreferrer"
+        target="_blank"
         title="title text!"
       >
         link with title
diff --git a/lib/src/components/sidedrawer/__snapshots__/Sidedrawer.test.tsx.snap b/lib/src/components/sidedrawer/__snapshots__/Sidedrawer.test.tsx.snap
index b5719660f..f7f9f3bb1 100644
--- a/lib/src/components/sidedrawer/__snapshots__/Sidedrawer.test.tsx.snap
+++ b/lib/src/components/sidedrawer/__snapshots__/Sidedrawer.test.tsx.snap
@@ -332,12 +332,18 @@ exports[`Sidedrawer renders 1`] = `
     width: auto;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-fDzwZw-PrXKS-size-md {
@@ -598,7 +604,7 @@ exports[`Sidedrawer renders 1`] = `
     class="c-dtVmmL"
   >
     <button
-      class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-iSsXry-cv"
+      class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-iSsXry-cv"
       type="button"
     >
       Log out
@@ -939,12 +945,18 @@ exports[`Sidedrawer should expand an accordion by clicking on trigger and displa
     width: auto;
   }
 
-  .c-fkUJsw-elrwsr-size-md {
+  .c-fkUJsw-dXsdwv-size-md {
     font-size: var(--fontSizes-md);
     line-height: 1.5;
     height: var(--sizes-4);
     padding-left: var(--space-5);
     padding-right: var(--space-5);
+    gap: var(--space-3);
+  }
+
+  .c-fkUJsw-dXsdwv-size-md .c-dbrbZt {
+    height: 20px;
+    width: 20px;
   }
 
   .c-fDzwZw-PrXKS-size-md {
@@ -1245,7 +1257,7 @@ exports[`Sidedrawer should expand an accordion by clicking on trigger and displa
     class="c-dtVmmL"
   >
     <button
-      class="c-fkUJsw c-fkUJsw-elrwsr-size-md c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-iSsXry-cv"
+      class="c-fkUJsw c-fkUJsw-dXsdwv-size-md c-fkUJsw-fGHEql-fullWidth-true c-fkUJsw-iSsXry-cv"
       type="button"
     >
       Log out
diff --git a/lib/src/components/stepper/StepperStepForward.tsx b/lib/src/components/stepper/StepperStepForward.tsx
index db60996c6..859133a41 100644
--- a/lib/src/components/stepper/StepperStepForward.tsx
+++ b/lib/src/components/stepper/StepperStepForward.tsx
@@ -13,7 +13,7 @@ export const StepperStepForward: React.FC<
     if (onClick) {
       return onClick(goToNextStep)
     }
-    goToNextStep?.()
+    goToNextStep()
   }
 
   return (
diff --git a/lib/src/components/stepper/__snapshots__/Stepper.test.tsx.snap b/lib/src/components/stepper/__snapshots__/Stepper.test.tsx.snap
index 5b5e5fffd..fe5159d8a 100644
--- a/lib/src/components/stepper/__snapshots__/Stepper.test.tsx.snap
+++ b/lib/src/components/stepper/__snapshots__/Stepper.test.tsx.snap
@@ -60,12 +60,18 @@ exports[`Stepper renders correctly with default direction changed 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-eYnvrx-size-sm {
+  .c-fkUJsw-jMTgOB-size-sm {
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
     height: var(--sizes-3);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt {
+    height: 16px;
+    width: 16px;
   }
 
   .c-knmidH-ejCoEP-direction-horizontal {
@@ -272,7 +278,7 @@ exports[`Stepper renders correctly with default direction changed 1`] = `
     class="c-PJLV c-PJLV-ifGHEql-css"
   >
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fSssiS-cv"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fSssiS-cv"
       disabled=""
       type="button"
     >
@@ -317,7 +323,7 @@ exports[`Stepper renders correctly with default direction changed 1`] = `
       </div>
     </div>
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
       type="button"
     >
       Next
@@ -399,12 +405,18 @@ exports[`Stepper renders success icon for bullets when step is completed 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-eYnvrx-size-sm {
+  .c-fkUJsw-jMTgOB-size-sm {
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
     height: var(--sizes-3);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt {
+    height: 16px;
+    width: 16px;
   }
 
   .c-knmidH-ejCoEP-direction-horizontal {
@@ -639,7 +651,7 @@ exports[`Stepper renders success icon for bullets when step is completed 1`] = `
     class="c-PJLV c-PJLV-ifGHEql-css"
   >
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fSssiS-cv"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fSssiS-cv"
       disabled=""
       type="button"
     >
@@ -696,7 +708,7 @@ exports[`Stepper renders success icon for bullets when step is completed 1`] = `
       </div>
     </div>
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
       type="button"
     >
       Next
@@ -765,12 +777,18 @@ exports[`Stepper renders the correct number of bullets 1`] = `
 }
 
 @media  {
-  .c-fkUJsw-eYnvrx-size-sm {
+  .c-fkUJsw-jMTgOB-size-sm {
     font-size: var(--fontSizes-sm);
     line-height: 1.53;
     height: var(--sizes-3);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .c-fkUJsw-jMTgOB-size-sm .c-dbrbZt {
+    height: 16px;
+    width: 16px;
   }
 
   .c-knmidH-ejCoEP-direction-horizontal {
@@ -894,7 +912,7 @@ exports[`Stepper renders the correct number of bullets 1`] = `
     class="c-PJLV c-PJLV-ifGHEql-css"
   >
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-fSssiS-cv"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-fSssiS-cv"
       disabled=""
       type="button"
     >
@@ -939,7 +957,7 @@ exports[`Stepper renders the correct number of bullets 1`] = `
       </div>
     </div>
     <button
-      class="c-fkUJsw c-fkUJsw-eYnvrx-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
+      class="c-fkUJsw c-fkUJsw-jMTgOB-size-sm c-fkUJsw-gsycxF-cv c-fkUJsw-icKSZB-css"
       type="button"
     >
       Next
diff --git a/lib/src/components/stepper/stepper-context/StepperContext.tsx b/lib/src/components/stepper/stepper-context/StepperContext.tsx
index 608bab3ee..74305d9a0 100644
--- a/lib/src/components/stepper/stepper-context/StepperContext.tsx
+++ b/lib/src/components/stepper/stepper-context/StepperContext.tsx
@@ -4,9 +4,9 @@ import { Context, StepperProviderProps } from '../types'
 
 const StepperContext = React.createContext<Context>({
   steps: [],
-  goToPreviousStep: () => null,
-  goToNextStep: () => null,
-  goToStep: () => null,
+  goToPreviousStep: () => undefined,
+  goToNextStep: () => undefined,
+  goToStep: () => undefined,
   activeStep: 0,
   viewedSteps: [],
   allowSkip: false,
@@ -72,9 +72,9 @@ export const StepperProvider: React.FC<StepperProviderProps> = ({
     <StepperContext.Provider
       value={{
         steps: steps || Array(stepCount).fill(''),
-        goToPreviousStep: isControlled ? undefined : goToPreviousStep,
-        goToNextStep: isControlled ? undefined : goToNextStep,
-        goToStep: isControlled ? undefined : goToStep,
+        goToPreviousStep: isControlled ? () => undefined : goToPreviousStep,
+        goToNextStep: isControlled ? () => undefined : goToNextStep,
+        goToStep: isControlled ? () => undefined : goToStep,
         activeStep,
         viewedSteps,
         completedSteps,
diff --git a/lib/src/components/stepper/types.ts b/lib/src/components/stepper/types.ts
index 39de37c15..2c1ba9ae9 100644
--- a/lib/src/components/stepper/types.ts
+++ b/lib/src/components/stepper/types.ts
@@ -17,9 +17,9 @@ export type Direction = 'vertical' | 'horizontal'
 
 export type Context = {
   steps: Step[]
-  goToPreviousStep?: () => void
-  goToNextStep?: () => void
-  goToStep?: (index: number) => void
+  goToPreviousStep: () => void | undefined
+  goToNextStep: () => void | undefined
+  goToStep: (index: number) => void | undefined
   activeStep: number
   viewedSteps: number[]
   completedSteps: number[]
diff --git a/lib/src/utilities/css-wrapper/CSSWrapper.tsx b/lib/src/utilities/css-wrapper/CSSWrapper.tsx
index f5fad31bc..3176c721b 100644
--- a/lib/src/utilities/css-wrapper/CSSWrapper.tsx
+++ b/lib/src/utilities/css-wrapper/CSSWrapper.tsx
@@ -12,13 +12,6 @@ export const CSSWrapper = ({
   css,
   children
 }: CssWrapperProps): React.ReactElement =>
-  css ? (
-    <Box css={css}>{children}</Box>
-  ) : (
-    // children could be multiple elements/components,
-    // so we need a fragment here.
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>{children}</>
-  )
+  css ? <Box css={css}>{children}</Box> : <>{children}</>
 
 CSSWrapper.displayName = 'CSSWrapper'
diff --git a/lib/src/utilities/index.ts b/lib/src/utilities/index.ts
index c6ec805e4..749e38c4a 100644
--- a/lib/src/utilities/index.ts
+++ b/lib/src/utilities/index.ts
@@ -3,3 +3,4 @@ export * from './css-wrapper'
 export { NoOverflowWrapper, noOverflowStyleBlock } from './no-overflow-wrapper'
 export * from './style'
 export * from './types'
+export * from './uri'
diff --git a/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx b/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx
index 0182da652..42da1a2a3 100644
--- a/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx
+++ b/lib/src/utilities/optionally-visually-hidden-container/OptionallyVisuallyHiddenContainer.tsx
@@ -6,10 +6,5 @@ export const OptionallyVisuallyHiddenContainer: React.FC<{
 }> = ({ children, hidden = false }) => {
   if (hidden) return <VisuallyHidden.Root>{children}</VisuallyHidden.Root>
 
-  return children ? (
-    // children could be multiple elements/components,
-    // so we need a fragment here.
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    <>{children}</>
-  ) : null
+  return children ? <>{children}</> : null
 }
diff --git a/lib/src/utilities/uri.ts b/lib/src/utilities/uri.ts
new file mode 100644
index 000000000..7235f5de6
--- /dev/null
+++ b/lib/src/utilities/uri.ts
@@ -0,0 +1,4 @@
+export const isExternalLink = (link = '') => {
+  const isAbsolute = /^https?:\/\//.test(link)
+  return isAbsolute && new URL(link).origin !== window.location.origin
+}