Problema al importar el componente desde el paquete NPM personal.

Estoy creando una biblioteca de componentes de demostración para probar sistemas de construcción para este tipo de bibliotecas. He creado mi componente de la siguiente manera:

import React from 'react';
import styled from 'styled-components';

const SCButton = styled.button
    color: #fff !important;
    text-transform: uppercase;
    text-decoration: none;
    background: #288a0f;
    padding: 20px;
    border-radius: 5px;
    display: inline-block;
    border: none;
    transition: all 0.4s ease 0s;
;

export interface Props extends ComponentProps {
    text: string;
}

interface ComponentProps {
    id?: string;
}

const Button = ({ text = 'Texto del botón', id }: Props) => {
    const componentProps: ComponentProps = {};
    if (id) {
        componentProps.id = id;
    }
    return <scbutton {...componentprops}="">{text}</scbutton>;
};

export default Button;

Ahora uso webpack para empaquetarlo en una carpeta dist. Cuando instalo el paquete desde npm e importo el componente, obtengo el siguiente error al usarlo:

Error: El tipo de elemento es inválido: se esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos), pero recibí un objeto. Probablemente olvidaste exportar tu componente desde el archivo donde está definido, o podrías haber mezclado importaciones predeterminadas y con nombre.

Lo he importado de la siguiente manera:

import logo from './logo.svg'
import './App.css'

import Button from 'design-system/dist/Button/Button'

function App() {
    return (
        <div classname="App">
            <header classname="App-header">
                <img src="{logo}" classname="App-logo" alt="logo">
                <button text="hola"></button>
                <p>
                    Editar <code>src/App.js</code> y guardar para recargar.
                </p>
                <a classname="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
                    Aprender React
                </a>
            </header>
        </div>
    )
}

export default App

No sé cuál es el problema ya que la importación y exportación son ambas predeterminadas y por lo general este error aparece cuando están fuera de sincronía.

Aquí tienes el ejemplo: https://github.com/JoshBowdenConcepts/aero-design-system