@arcblock/ux 2.10.66 → 2.10.68

package/src/Util/index.ts

@@ -2,7 +2,7 @@
 import padStart from 'lodash/padStart';
 import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
 import { DID_PREFIX, WELLKNOWN_SERVICE_PATH_PREFIX } from './constant';
-import type { $TSFixMe } from '../type';
+import type { $TSFixMe, Locale } from '../type';
 
 let dateTool: $TSFixMe | null = null;
 
@@ -92,6 +92,11 @@ export const getBackground = (props: $TSFixMe) => {
   return props.theme.palette.common.white;
 };
 
+/**
+ * 1. 将 props 中以 ::prop:: 开头的字符串替换为 component.defaultProps 中的值
+ * 2. 将 props 中由 jsonAttrs 指定的 json 字符串转换为对象
+ * 3. 最后将 props 中的 ::prop:: 字符串替换为 ''
+ */
 export function mergeProps<P extends object>(
   props: Record<string, any>,
   component: React.ComponentType<P>,
@@ -180,7 +185,7 @@ export function getDateTool() {
 
 const createDateFormatter =
   (format: string) =>
-  (date: string, { locale, tz }: { locale?: string; tz?: string } = {}) => {
+  (date: string, { locale, tz }: { locale?: Locale; tz?: string } = {}) => {
     if (dateTool === null) {
       throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
     }
@@ -207,7 +212,7 @@ const createDateFormatter =
  * Ensure that the setDateTool() function is called first to set the time tool library.
  * @returns formatted date string
  */
-export function formatToDate(date: string, { locale = 'en', tz }: { locale?: string; tz?: string } = {}) {
+export function formatToDate(date: string, { locale = 'en', tz }: { locale?: Locale; tz?: string } = {}) {
   return createDateFormatter('ll')(date, { locale, tz });
 }
 
@@ -216,7 +221,7 @@ export function formatToDate(date: string, { locale = 'en', tz }: { locale?: str
  * Ensure that the setDateTool() function is called first to set the time tool library.
  * @returns formatted date string
  */
-export function formatToDatetime(date: string, { locale = 'en', tz }: { locale?: string; tz?: string } = {}) {
+export function formatToDatetime(date: string, { locale = 'en', tz }: { locale?: Locale; tz?: string } = {}) {
   return createDateFormatter('lll')(date, { locale, tz });
 }
 
@@ -239,7 +244,7 @@ export function openWebWallet({
 }: {
   webWalletUrl: string;
   action?: string;
-  locale?: string;
+  locale?: Locale;
   url: string;
   windowFeatures: $TSFixMe;
 }) {
@@ -409,15 +414,16 @@ type TranslationsObject = {
  * @return {string} The translated string based on the locale, with fallback options if necessary.
  */
 export const getTranslation = (
-  translations: string | TranslationsObject,
-  locale: string,
-  options: { fallbackLocale?: string; defaultValue?: string } = {}
+  translations: TranslationsObject,
+  locale: Locale,
+  options: { fallbackLocale?: Locale; defaultValue?: string } = {}
 ) => {
   const { fallbackLocale = 'en', defaultValue = 'unknown' } = options;
 
   if (typeof translations === 'string') {
     return translations;
   }
+
   let translation;
   if (locale) {
     translation = translations[locale];

package/src/Video/{index.jsx → index.tsx}

@@ -1,14 +1,18 @@
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import Player from 'react-player';
 import CircularProgress from '@mui/material/CircularProgress';
 
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
 
-const { string, number, array, oneOfType, object } = PropTypes;
+export interface VideoProps {
+  url: string;
+  width?: string | number;
+  height?: string | number;
+  style?: React.CSSProperties;
+}
 
-export default function Video(props) {
+export default function Video(props: VideoProps) {
   const newProps = mergeProps(props, Video, ['style']);
   const { url, width, height, style } = newProps;
   const [loaded, setLoaded] = useState(false);
@@ -36,13 +40,6 @@ export default function Video(props) {
   );
 }
 
-Video.propTypes = {
-  url: oneOfType([string, array, object]).isRequired,
-  width: oneOfType([string, number]),
-  height: oneOfType([string, number]),
-  style: oneOfType([string, object]),
-};
-
 Video.defaultProps = {
   width: 640,
   height: 400,

package/src/Wallet/{Action.jsx → Action.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 
 import logo from './images/abtwallet.png';
@@ -7,7 +6,14 @@ import colors from '../Colors';
 import Button from '../Button';
 import { styled } from '../Theme';
 
-export default function WalletAction(props) {
+export interface WalletActionProps {
+  action?: string;
+  size?: 'xlarge' | 'large' | 'medium' | 'small';
+  textLayout?: 'vertical' | 'horizontal';
+  style?: React.CSSProperties;
+}
+
+export default function WalletAction(props: WalletActionProps) {
   const newProps = mergeProps(props, WalletAction, ['style']);
   const { action, size, textLayout, style = {}, ...rest } = newProps;
   const styles = Object.assign({}, style, { border: 'none', padding: 0 });
@@ -32,17 +38,10 @@ export default function WalletAction(props) {
   );
 }
 
-WalletAction.propTypes = {
-  action: PropTypes.string,
-  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small']),
-  textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-};
-
 WalletAction.defaultProps = {
   action: 'Login',
-  textLayout: 'vertical',
-  size: 'medium',
+  textLayout: 'vertical' as const,
+  size: 'medium' as const,
   style: {},
 };
 
@@ -61,7 +60,12 @@ const sizes = {
   },
 };
 
-const Content = styled('div')`
+type ContentProps = {
+  size: NonNullable<WalletActionProps['size']>;
+  color: string;
+};
+
+const Content = styled('div')<ContentProps>`
   display: flex;
   justify-content: center;
   align-items: center;

package/src/Wallet/{Download.jsx → Download.tsx}

@@ -1,21 +1,31 @@
-import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
+import { type SxProps } from '@mui/material';
 
-// eslint-disable-next-line import/no-unresolved
-import AppStoreIcon from './images/app-store.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import GooglePlayIcon from './images/google-play.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import AndroidDownloadIcon from './images/android_download.svg?react';
+import { ReactComponent as AppStoreIcon } from './images/app-store.svg';
+import { ReactComponent as GooglePlayIcon } from './images/google-play.svg';
+import { ReactComponent as AndroidDownloadIcon } from './images/android_download.svg';
 
 import Button from '../Button';
 import { mergeProps } from '../Util';
 import { styled } from '../Theme';
+import type { Locale } from '../type';
 
-export default function WalletDownload(props) {
+export interface WalletDownloadProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  layout?: 'vertical' | 'horizontal';
+  storeLayout?: 'vertical' | 'horizontal';
+  style?: React.CSSProperties;
+  iosLink?: string;
+  androidLink?: string;
+  androidDownLoadUrl?: string;
+  locale?: Locale;
+  sx?: SxProps;
+}
+
+export default function WalletDownload(props: WalletDownloadProps) {
   const browser = useBrowser();
-  const newProps = mergeProps(props, WalletDownload, ['style']);
+  const newProps = mergeProps(props, WalletDownload, ['style']) as WalletDownloadProps;
   const { title, children, iosLink, androidLink, androidDownLoadUrl, locale, ...rest } = newProps;
 
   const isAndroid = browser.mobile.android.phone || browser.mobile.android.tablet;
@@ -77,17 +87,6 @@ export default function WalletDownload(props) {
   );
 }
 
-WalletDownload.propTypes = {
-  title: PropTypes.string,
-  layout: PropTypes.oneOf(['vertical', 'horizontal']),
-  storeLayout: PropTypes.oneOf(['vertical', 'horizontal']),
-  style: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  iosLink: PropTypes.string,
-  androidLink: PropTypes.string,
-  androidDownLoadUrl: PropTypes.string,
-  locale: PropTypes.oneOf(['en', 'zh']),
-};
-
 WalletDownload.defaultProps = {
   title: 'Download DID Wallet',
   layout: 'vertical',
@@ -97,9 +96,14 @@ WalletDownload.defaultProps = {
   androidDownLoadUrl: 'https://releases.arcblockio.cn/arcwallet_android/latest/abtwallet.apk',
   style: {},
   locale: 'zh',
+} as const;
+
+type ContainerProps = {
+  layout?: WalletDownloadProps['layout'];
+  storeLayout?: WalletDownloadProps['storeLayout'];
 };
 
-const Container = styled('div')`
+const Container = styled('div')<ContainerProps>`
   display: flex;
   flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   align-items: center;

package/src/Wallet/{Open.jsx → Open.tsx}

@@ -1,10 +1,15 @@
-import PropTypes from 'prop-types';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
 import Fab from '@mui/material/Fab';
 
 import { styled } from '../Theme';
+import type { Locale } from '../type';
 
-export default function OpenInWallet({ locale, link }) {
+export interface OpenInWalletProps {
+  link: string;
+  locale?: Locale;
+}
+
+export default function OpenInWallet({ link, locale = 'zh' }: OpenInWalletProps) {
   const buttonText = locale === 'zh' ? '在 DID 钱包打开' : 'Open in DID Wallet';
   const browser = useBrowser();
 
@@ -17,6 +22,7 @@ export default function OpenInWallet({ locale, link }) {
         href={deepLink}
         variant="extended"
         color="primary"
+        // @ts-expect-error
         rounded
         target="_blank"
         className="open-in-wallet-button">
@@ -27,15 +33,6 @@ export default function OpenInWallet({ locale, link }) {
   return null;
 }
 
-OpenInWallet.propTypes = {
-  locale: PropTypes.oneOf(['en', 'zh']),
-  link: PropTypes.string.isRequired,
-};
-
-OpenInWallet.defaultProps = {
-  locale: 'zh',
-};
-
 const Button = styled(Fab)`
   && {
     font-size: 12px;

package/src/WalletOSIcon/{index.jsx → index.tsx}

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import ApiIcon from '@iconify-icons/mdi/api';
 import IOSRoundedIcon from '@iconify-icons/material-symbols/ios-rounded';
@@ -9,7 +8,14 @@ import QuestionMarkRoundedIcon from '@iconify-icons/material-symbols/question-ma
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
 import { LOGIN_PROVIDER } from '../Util/constant';
 
-export default function WalletOSIcon({ loading, walletOS, provider, color }) {
+export interface WalletOSIconProps {
+  loading?: false | true;
+  walletOS?: string;
+  provider?: string;
+  color?: string;
+}
+
+export default function WalletOSIcon({ loading = false, walletOS, provider, color = 'black' }: WalletOSIconProps) {
   if (loading) {
     return <Icon icon={QuestionMarkRoundedIcon} style={{ color: 'transparent' }} />;
   }
@@ -31,17 +37,3 @@ export default function WalletOSIcon({ loading, walletOS, provider, color }) {
   }
   return null;
 }
-
-WalletOSIcon.propTypes = {
-  loading: PropTypes.bool,
-  walletOS: PropTypes.string,
-  provider: PropTypes.string,
-  color: PropTypes.string,
-};
-
-WalletOSIcon.defaultProps = {
-  loading: false,
-  walletOS: null,
-  provider: null,
-  color: 'black',
-};

package/src/WebWalletSWKeeper/{index.jsx → index.tsx}

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import useIdle from 'react-use/lib/useIdle';
 import { useLocalStorageState } from 'ahooks';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
@@ -12,21 +11,21 @@ const DEFAULT_MAX_IDLE_TIME = 1000 * 60 * 30;
 // 可使用 localStorage.setItem('wallet_sw_keeper_disabled', 1) 来禁用嵌入 wallet iframe
 const STORAGE_KEY_DISABLED = 'wallet_sw_keeper_disabled';
 // iframe id, 如果存在多个 WebWalletSWKeeper 组件实例, 共享此 id, 保证只有一个 iframe
-let id;
+let id: string;
 
-const injectIframe = (webWalletUrl) => {
+const injectIframe = (webWalletUrl: string) => {
   const iframe = document.createElement('iframe');
   iframe.title = 'abt wallet';
   iframe.id = id;
-  iframe.style.width = 0;
-  iframe.style.height = 0;
-  iframe.style.border = 0;
+  iframe.style.width = '0';
+  iframe.style.height = '0';
+  iframe.style.border = '0';
   // https://stackoverflow.com/questions/27858989/iframe-with-0-height-creates-a-gap
   iframe.style.display = 'block';
   // fix: 页面自动滚动到底部问题 (https://github.com/blocklet/abt-wallet/issues/1160)
   //      top: 0 可能不是必须的, 但测试中发现, 如果不设置, 在某些特殊情况下似乎也会导致页面自动滚动到底部
   iframe.style.position = 'absolute';
-  iframe.style.top = 0;
+  iframe.style.top = '0';
   iframe.src = `${webWalletUrl}?action=iframe`;
   document.body.appendChild(iframe);
 };
@@ -40,18 +39,23 @@ const removeIframe = () => {
 
 const cleanup = () => {
   removeIframe();
-  id = null;
+  id = '';
 };
 
-const enable = (webWalletUrl) => {
+const enable = (webWalletUrl: string) => {
   if (!id) {
     id = `web_wallet_sw_keeper_${Date.now()}`;
     injectIframe(webWalletUrl);
   }
 };
 
+interface WebWalletSWKeeperProps {
+  webWalletUrl: string;
+  maxIdleTime: number;
+}
+
 // 该组件通过嵌入一个 web wallet iframe 帮助 web wallet service worker 延最大空闲时间
-function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }) {
+function WebWalletSWKeeper({ webWalletUrl, maxIdleTime = DEFAULT_MAX_IDLE_TIME }: WebWalletSWKeeperProps) {
   // 渲染前先记录是否已经存在一个 WebWalletSWKeeper 实例
   const instanceExists = useRef(!!id);
   const isIdle = useIdle(maxIdleTime);
@@ -75,20 +79,9 @@ function WebWalletSWKeeper({ webWalletUrl, maxIdleTime }) {
   return null;
 }
 
-WebWalletSWKeeper.propTypes = {
-  webWalletUrl: PropTypes.string.isRequired,
-  maxIdleTime: PropTypes.number,
-};
-
-WebWalletSWKeeper.defaultProps = {
-  maxIdleTime: DEFAULT_MAX_IDLE_TIME,
-};
-
-export default WebWalletSWKeeper;
-
-export const withWebWalletSWKeeper = (Component) => {
+export const withWebWalletSWKeeper = <P extends { webWalletUrl: string }>(Component: React.ComponentType<P>) => {
   // eslint-disable-next-line react/prop-types
-  return function WithWebWalletSWKeeperComponent({ webWalletUrl, maxIdleTime, ...rest }) {
+  return function WithWebWalletSWKeeperComponent({ webWalletUrl, maxIdleTime, ...rest }: WebWalletSWKeeperProps & P) {
     const browser = useBrowser();
     // eslint-disable-next-line no-param-reassign
     webWalletUrl = webWalletUrl || getWebWalletUrl();
@@ -103,13 +96,17 @@ export const withWebWalletSWKeeper = (Component) => {
     // - 检查到 wallet 浏览器插件
     // - webWalletUrl 与当前页面 url 的 protocol 不同
     // - wallet webview
+
+    const props = { webWalletUrl, ...rest } as unknown as P;
     return (
       <>
         {!disabled && !extension && isSameProtocol && !isWalletWebview && (
           <WebWalletSWKeeper webWalletUrl={webWalletUrl} maxIdleTime={maxIdleTime} />
         )}
-        <Component webWalletUrl={webWalletUrl} {...rest} />
+        <Component {...props} />
       </>
     );
   };
 };
+
+export default WebWalletSWKeeper;

package/src/WechatPrompt/{index.jsx → index.tsx}

@@ -17,6 +17,7 @@ export default function WechatPrompt() {
     return null;
   }
 
+  // @ts-expect-error
   if (browser.android) {
     return (
       <Dialog open fullScreen>

package/src/global.d.ts

@@ -1,4 +1,19 @@
 declare module '@arcblock/did-motif';
+declare module 'd3-geo';
+declare module 'topojson-client';
+declare module 'versor';
+declare module 'axios/*';
+
+// ux svg 由 babel-plugin-inline-react-svg 处理
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export { ReactComponent };
+}
+
+declare module '*.png' {
+  export default string;
+}
 
 type Blocklet = import('./type').Blocklet;
 

package/src/type.d.ts

@@ -1,5 +1,14 @@
+import type { Theme } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+
 export type $TSFixMe = any;
+export type Translations = Record<string, Record<string, any>>;
+export type Locale = LiteralUnion<'en' | 'zh', string>;
 
+// TODO: 以下为 blocklet 应用专属的全局对象类型，可以更加具体
+export type User = Record<string, any>;
+export type Session = Record<string, any>;
+export type Passport = Record<string, any>;
 export type Blocklet = {
   appId: string;
   appIds: string[];
@@ -16,15 +25,15 @@ export type Blocklet = {
   version: string;
   mode: string;
   tenantMode: 'single' | 'multiple';
-  theme: TTheme;
-  navigation: TNavigation[];
+  theme: Theme;
+  navigation: $TSFixMe[];
   preferences: Record<string, any>;
   languages: {
     code: string;
     name: string;
   }[];
   passportColor: string;
-  componentMountPoints: TComponent[];
+  componentMountPoints: $TSFixMe[];
   alsoKnownAs: string[];
   trustedFactories: string[];
   [x: string]: any;

package/src/withTheme/{index.jsx → index.tsx}

@@ -1,10 +1,20 @@
 import { useEffect } from 'react';
 import { Global, css } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
+import { type PaletteOptions } from '@mui/material/styles/createPalette';
+import { type TypographyOptions } from '@mui/material/styles/createTypography';
 
 import { createTheme, ThemeProvider } from '../Theme';
 
-function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typography } = {}) {
+function withTheme<P extends object>(
+  Component: React.ComponentType<P>,
+  {
+    mode = 'light',
+    pageWidth = 'md',
+    palette,
+    typography,
+  }: { mode?: string; pageWidth?: string; palette?: PaletteOptions; typography?: TypographyOptions } = {}
+) {
   const theme = createTheme({ mode, pageWidth, palette, typography });
 
   const globalStyles = css`
@@ -41,7 +51,7 @@ function withTheme(Component, { mode = 'light', pageWidth = 'md', palette, typog
     }
   `;
 
-  return function WithTheme(props) {
+  return function WithTheme(props: P) {
     useEffect(() => {
       const jssStyles = document.querySelector('#jss-server-side');
       if (jssStyles && jssStyles.parentNode) {

package/src/withTracker/{index.jsx → index.tsx}

@@ -2,9 +2,9 @@ import { useLocation } from 'react-router-dom';
 import { useMount, useDeepCompareEffect } from 'ahooks';
 import ReactGA from 'react-ga4';
 
-export default (WrappedComponent) => {
+export default <P extends object>(WrappedComponent: React.ComponentType<P>) => {
   const trackingId = window.blocklet?.GA_MEASUREMENT_ID || '';
-  const trackPage = (page, title = document.title) => {
+  const trackPage = (page: string, title = document.title) => {
     if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
       return;
     }
@@ -14,7 +14,7 @@ export default (WrappedComponent) => {
     }
   };
 
-  const trackEvent = (category, action, label, value) => {
+  const trackEvent = (category: string, action: string, label: string, value: number) => {
     if (trackingId) {
       ReactGA.event({ category, action, label, value, transport: 'beacon' });
     }
@@ -24,10 +24,12 @@ export default (WrappedComponent) => {
     ReactGA.initialize(trackingId);
   }
 
+  // @ts-ignore
   window.trackPage = trackPage;
+  // @ts-ignore
   window.trackEvent = trackEvent;
 
-  return function TrackedComponent(props) {
+  return function TrackedComponent(props: P) {
     const location = useLocation();
 
     useMount(() => {

package/src/Layout/dashboard/external-link.jsx

@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-import { Link as RouterLink, NavLink as RouterNavLink } from 'react-router-dom';
-
-// 包裹 router Link/NavLink 组件, 支持 external link (external 为 true 时渲染为 a 标签)
-function ExternalLink({ children, routerLinkComponent: RouterLinkComponent, to, external, ...rest }) {
-  if (external) {
-    return (
-      <a href={to} {...rest}>
-        {children}
-      </a>
-    );
-  }
-  return (
-    <RouterLinkComponent to={to} {...rest}>
-      {children}
-    </RouterLinkComponent>
-  );
-}
-
-ExternalLink.propTypes = {
-  children: PropTypes.any.isRequired,
-  routerLinkComponent: PropTypes.elementType.isRequired,
-  external: PropTypes.bool,
-  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-};
-
-ExternalLink.defaultProps = {
-  external: false,
-};
-
-export function Link(props) {
-  return <ExternalLink routerLinkComponent={RouterLink} {...props} />;
-}
-
-export function NavLink({ className, ...rest }) {
-  // NavLink#className 支持 function
-  const classes = rest.external && typeof className === 'function' ? className({}) : className;
-  return <ExternalLink routerLinkComponent={RouterNavLink} className={classes} {...rest} />;
-}
-
-NavLink.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-};
-
-NavLink.defaultProps = {
-  className: '',
-};

package/src/Logo/index.jsx

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { styled } from '../Theme';
-
-// eslint-disable-next-line import/no-unresolved
-import LightLogo from './images/logo-light-top.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import LightText from './images/logo-light-text.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import DarkLogo from './images/logo-dark-top.svg?react';
-// eslint-disable-next-line import/no-unresolved
-import DarkText from './images/logo-dark-text.svg?react';
-
-/**
-  @typedef {import('react').HTMLAttributes<HTMLSpanElement> & {
-    mode?: 'light' | 'dark',
-    layout?: 'vertical' | 'horizontal',
-    showText?: boolean,
-    showLogo?: boolean,
-  }} LogoProps
-*/
-
-/**
- * @description
- * @export
- * @param {LogoProps} props
- * @return {React.ReactComponentElement}
- */
-export default function Logo({ showText, showLogo, mode, layout, ...rest }) {
-  const logo = mode === 'light' ? <LightLogo /> : <DarkLogo />;
-  const text = mode === 'light' ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
-
-  return (
-    <Container layout={layout} {...rest}>
-      {showLogo && logo}
-      {showText && text}
-    </Container>
-  );
-}
-
-Logo.propTypes = {
-  mode: PropTypes.oneOf(['light', 'dark']),
-  layout: PropTypes.oneOf(['vertical', 'horizontal']),
-  showText: PropTypes.bool,
-  showLogo: PropTypes.bool,
-};
-
-Logo.defaultProps = {
-  mode: 'dark',
-  layout: 'vertical',
-  showText: true,
-  showLogo: true,
-};
-
-/** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
-const Container = styled('span')`
-  display: inline-flex;
-  flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};
-  justify-content: center;
-  align-items: center;
-
-  .logo-text {
-    ${(props) => (props.layout === 'vertical' ? 'margin-top: 8px;' : '')}
-    ${(props) => (props.layout === 'vertical' ? '' : 'margin-left: 8px;')};
-  }
-`;