feat(@ui): migrate textarea and tip

src/components/ui/TextArea.module.scss

@@ -1,31 +0,0 @@
-.container {
-    font-size: .875rem;
-    line-height: 20px;
-    position: relative;
-}
-
-.textarea {
-    width: 100%;
-    white-space: pre-wrap;
-
-    textarea::placeholder {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-}
-
-.hide {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-}
-
-.ghost {
-    width: 100%;
-    white-space: pre-wrap;
-    
-    top: 0;
-    position: absolute;
-    visibility: hidden;
-}

src/components/ui/TextArea.tsx

@@ -1,58 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-export interface TextAreaProps {
-    code?: boolean;
-    padding?: string;
-    lineHeight?: string;
-    hideBorder?: boolean;
-}
-
-export const TEXT_AREA_BORDER_WIDTH = 2;
-export const DEFAULT_TEXT_AREA_PADDING = 16;
-export const DEFAULT_LINE_HEIGHT = 20;
-
-export default styled.textarea<TextAreaProps>`
-    width: 100%;
-    resize: none;
-    display: block;
-    color: var(--foreground);
-    background: var(--secondary-background);
-    padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
-    line-height: ${(props) =>
-        props.lineHeight ?? "var(--textarea-line-height)"};
-
-    ${(props) =>
-        props.hideBorder &&
-        css`
-            border: none;
-        `}
-
-    ${(props) =>
-        !props.hideBorder &&
-        css`
-            border-radius: var(--border-radius);
-            transition: border-color 0.2s ease-in-out;
-            border: var(--input-border-width) solid transparent;
-        `}
-
-    &:focus {
-        outline: none;
-
-        ${(props) =>
-            !props.hideBorder &&
-            css`
-                border: var(--input-border-width) solid var(--accent);
-            `}
-    }
-
-    ${(props) =>
-        props.code
-            ? css`
-                  font-family: var(--monospace-font), monospace;
-              `
-            : css`
-                  font-family: inherit;
-              `}
-
-    font-variant-ligatures: var(--ligatures);
-`;

src/components/ui/Tip.tsx

@@ -1,72 +0,0 @@
-import { InfoCircle } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components/macro";
-
-import { Children } from "../../types/Preact";
-
-interface Props {
-    warning?: boolean;
-    error?: boolean;
-}
-
-export const Separator = styled.div<Props>`
-    height: 1px;
-    width: calc(100% - 10px);
-    background: var(--secondary-header);
-    margin: 18px auto;
-`;
-
-export const TipBase = styled.div<Props>`
-    display: flex;
-    padding: 12px;
-    font-weight: 500;
-    overflow: hidden;
-    align-items: center;
-
-    font-size: 14px;
-    background: var(--primary-header);
-    border-radius: var(--border-radius);
-    border: 2px solid var(--secondary-header);
-
-    a {
-        cursor: pointer;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    svg {
-        flex-shrink: 0;
-        margin-inline-end: 10px;
-    }
-
-    ${(props) =>
-        props.warning &&
-        css`
-            color: var(--warning);
-            border: 2px solid var(--warning);
-            background: var(--secondary-header);
-        `}
-
-    ${(props) =>
-        props.error &&
-        css`
-            color: white;
-            border: 2px solid var(--error);
-            background: var(--error);
-        `}
-`;
-
-export default function Tip(
-    props: Props & { children: Children; hideSeparator?: boolean },
-) {
-    const { children, hideSeparator, ...tipProps } = props;
-    return (
-        <>
-            {!hideSeparator && <Separator />}
-            <TipBase {...tipProps}>
-                <InfoCircle size={20} />
-                <span>{children}</span>
-            </TipBase>
-        </>
-    );
-}