Add i18n, use default imports for UI.

src/components/ui/Banner.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Banner = styled.div`
+export default styled.div`
 	padding: 8px;
     font-size: 14px;
     text-align: center;

src/components/ui/Button.tsx

@@ -5,7 +5,7 @@ interface Props {
     readonly error?: boolean;
 };
 
-export const Button = styled.button<Props>`
+export default styled.button<Props>`
 	z-index: 1;
 	padding: 8px;
 	font-size: 16px;

src/components/ui/Checkbox.tsx

@@ -67,7 +67,7 @@ interface Props {
     onChange: (state: boolean) => void;
 }
 
-export function Checkbox(props: Props) {
+export default function Checkbox(props: Props) {
     return (
         <CheckboxBase disabled={props.disabled}>
             <CheckboxContent>

src/components/ui/ColourSwatches.tsx

@@ -86,7 +86,7 @@ const Rows = styled.div`
     }
 `;
 
-export function ColourSwatches({ value, onChange }: Props) {
+export default function ColourSwatches({ value, onChange }: Props) {
     const ref = useRef<HTMLInputElement>();
 
     return (

src/components/ui/ComboBox.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const ComboBox = styled.select`
+export default styled.select`
 	padding: 8px;
     border-radius: 2px;
     color: var(--secondary-foreground);

src/components/ui/InputBox.tsx

@@ -4,7 +4,7 @@ interface Props {
     readonly contrast?: boolean;
 };
 
-export const InputBox = styled.input<Props>`
+export default styled.input<Props>`
     z-index: 1;
     padding: 8px 16px;
     border-radius: 6px;

src/components/ui/LineDivider.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const LineDivider = styled.div`
+export default styled.div`
     height: 0px;
     opacity: 0.6;
     flex-shrink: 0;

src/components/ui/Overline.tsx

@@ -32,7 +32,7 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
     ${ props => props.block && css`display: block;` }
 `;
 
-export function Overline(props: Props) {
+export default function Overline(props: Props) {
     return (
         <OverlineBase {...props}>
             { props.children }

src/components/ui/Preloader.tsx

@@ -1,3 +1,3 @@
-export function Preloader() {
+export default function Preloader() {
     return <span>LOADING</span>
 }

src/components/ui/Radio.tsx

@@ -81,7 +81,7 @@ const RadioDescription = styled.span<BaseProps>`
     ` }
 `;
 
-export function Radio(props: Props) {
+export default function Radio(props: Props) {
     return (
         <RadioBase
             selected={props.checked}

src/components/ui/Tip.tsx

@@ -26,7 +26,7 @@ export const TipBase = styled.div`
     }
 `;
 
-export function Tip(props: { children: Children }) {
+export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
             <Info size={20} strokeWidth={2} />