hunk.code_window: const CenterDiv = styled.div`
     overflow: auto;
     padding: 30px;
   `;
   function SharableUrl({ watch }: { watch: UseFormWatch<FieldValues> }) {
     const { environment } = useEnvController();
     const oauthUrlClipboard = useClipboard({ timeout: 1000 });
     const clientId = watch(CredentialsKeyEnum.ClientId);
     const redirectUrl = watch(CredentialsKeyEnum.RedirectUrl);
  
hunk.labels: keep keep keep keep keep replace keep keep keep keep
hunk.after_edit: export function SharableUrl({ watch }: { watch: UseFormWatch<FieldValues> }) {
  
hunk.file_path: apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx
hunk.type: replace
file: import React from 'react';
  import { useNavigate } from 'react-router-dom';
  import { Center } from '@mantine/core';
  import styled from '@emotion/styled';
  
  import { Button } from '../../../design-system';
  import { currentOnboardingStep } from './route/store';
  
  export function NavButton({
    pulse = false,
    navigateTo,
    variant,
    handleOnClick,
    children,
    ...props
  }: {
    pulse?: boolean;
    navigateTo: string;
    variant?: 'outline' | 'gradient';
    handleOnClick?: () => void;
    children: React.ReactNode;
  } & React.HTMLAttributes<HTMLDivElement>) {
    const navigate = useNavigate();
  
    function handleNavigationClick() {
      if (handleOnClick) {
        handleOnClick();
      }
  
      currentOnboardingStep().set(navigateTo);
  
      if (navigateTo) {
        navigate(navigateTo);
      }
    }
  
    return (
      <Center data-test-id="get-started-footer-left-side" inline onClick={handleNavigationClick} {...props}>
        <StyledButton fullWidth variant={variant ?? 'outline'} pulse={pulse}>
          <>{children}</>
        </StyledButton>
      </Center>
    );
  }
  
  const StyledButton = styled(Button)`
    height: 50px;
  `;
  