feat: add custom divider

Author: gabitoesmiapodo

source/import/Divider.tsx

@@ -0,0 +1,13 @@
+import BaseDivider from 'ink-divider'
+import React, { type FC } from 'react'
+
+const Divider: FC<{ title: string }> = ({ title }) => (
+  <BaseDivider
+    titlePadding={2}
+    titleColor={'whiteBright'}
+    title={title}
+    width={80}
+  />
+)
+
+export default Divider

source/import/Multiselect/index.ts

@@ -1 +1 @@
-export {default, Item, Indicator, CheckBox, ItemComponent} from './MultiSelect.js';
+export { default, type Item, Indicator, CheckBox, ItemComponent } from './MultiSelect.js'

source/import/Step2.tsx

@@ -1,6 +1,6 @@
-import Divider from 'ink-divider'
 import React, { type FC } from 'react'
 import CloneRepo from './CloneRepo.js'
+import Divider from './Divider.js'
 
 interface Props {
   projectName: string
@@ -9,11 +9,7 @@ interface Props {
 
 const Step2: FC<Props> = ({ projectName, onCompletion }) => (
   <>
-    <Divider
-      titlePadding={2}
-      titleColor={'whiteBright'}
-      title={`Cloning "${projectName}"`}
-    />
+    <Divider title={`Cloning "${projectName}"`} />
     <CloneRepo
       projectName={projectName}
       onCompletion={onCompletion}

source/import/Step3.tsx

@@ -1,8 +1,8 @@
 import figures from 'figures'
 import { Text } from 'ink'
-import Divider from 'ink-divider'
 import SelectInput from 'ink-select-input'
 import React, { useState, type FC } from 'react'
+import Divider from './Divider.js'
 
 export type Installation = 'full' | 'custom'
 
@@ -38,11 +38,7 @@ const Step3: FC<Props> = ({ onCompletion, onSelect }) => {
 
   return (
     <>
-      <Divider
-        titlePadding={2}
-        titleColor={'whiteBright'}
-        title={'Installation setup'}
-      />
+      <Divider title={'Installation setup'} />
       <Text color={'whiteBright'}>Choose installation type</Text>
       <SelectInput
         indicatorComponent={({ isSelected }) => (

source/import/Step5.tsx

@@ -1,10 +1,10 @@
 import { join } from 'node:path'
 import process from 'node:process'
 import { Box, Text } from 'ink'
-import Divider from 'ink-divider'
 import { Script, Spawn } from 'ink-spawn'
 import React, { type FC, useState } from 'react'
 import CustomInstallation from './CustomInstallation.js'
+import Divider from './Divider.js'
 import FullInstallation from './FullInstallation.js'
 import type { Installation } from './Step3.js'
 
@@ -20,11 +20,7 @@ const Step5: FC<Props> = ({ projectName, onCompletion, installation }) => {
 
   return (
     <>
-      <Divider
-        titlePadding={2}
-        titleColor={'whiteBright'}
-        title={`Performing ${installation ?? 'full'} installation`}
-      />
+      <Divider title={`Performing ${installation ?? 'full'} installation`} />
       <Box
         flexDirection={'column'}
         gap={0}