@arcblock/ux 3.4.14 → 3.5.0

package/src/DIDConnect/with-container.tsx

@@ -1,323 +0,0 @@
-import { memo, useRef, useState } from 'react';
-import { Dialog, DialogContent, useMediaQuery, Box, Backdrop, SwipeableDrawer, Drawer } from '@mui/material';
-import { useDebounce, useMemoizedFn } from 'ahooks';
-import { useBrowser } from '@arcblock/react-hooks';
-import colorConvert from 'color-convert';
-
-import { useTheme } from '../Theme';
-import { mergeSx } from '../Util/style';
-import { hexToRgba } from '../Util';
-import { Locale } from '../type';
-
-// eslint-disable-next-line react/require-default-props
-const BackdropWrap = memo(({ ref, ...backdropProps }: { ref?: React.Ref<unknown> }) => {
-  return (
-    <Backdrop
-      open
-      ref={ref}
-      style={{
-        backgroundColor: 'rgba(0, 0, 0, 0.6)',
-        backdropFilter: 'blur(3px)',
-        touchAction: 'none',
-      }}
-      {...backdropProps}
-      key="background"
-    />
-  );
-});
-
-export default function withContainer(Component: React.ComponentType<any>) {
-  function WithContainerComponent({
-    popup = false,
-    open = false,
-    hideCloseButton = false,
-    ...rest
-  }: {
-    // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
-    popup?: boolean;
-    open?: boolean;
-    hideCloseButton?: boolean;
-    onClose: () => void;
-    blocklet?: any;
-    origin?: string;
-    host?: string;
-    locale?: Locale;
-  }) {
-    const [color, setColor] = useState('#fff');
-
-    const drawerDragger = useRef(null);
-    const browser = useBrowser();
-    // 屏宽小于 sm 且在 mobile 设备中全屏显示 dialog (PC 端屏宽小于 sm 的情况正常弹窗, 不全屏显示)
-    const matchSm = useMediaQuery('(max-width:640px)');
-    let openVariant = 'page';
-    if (popup) {
-      openVariant = 'dialog';
-      if (matchSm && browser.mobile.any) {
-        openVariant = 'drawer';
-      }
-    }
-
-    const theme = useTheme();
-
-    // 兼容 did-react 版本中存在的 responsive prop, responsive=true 则让 dialog 始终保持 open 状态, 否则遵循外部传入的 open prop
-    const isOpen = open;
-
-    const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
-    const debouncedShow = useDebounce(isOpen, {
-      wait: leavingScreenDelay,
-    });
-
-    const removeMagicToken = useMemoizedFn(() => {
-      const searchParams = new URLSearchParams(window.location.search);
-      if (searchParams.get('magicToken')) {
-        searchParams.delete('magicToken');
-      }
-      if (searchParams.toString()) {
-        window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
-      }
-    });
-
-    // eslint-disable-next-line no-unused-vars
-    const handleOnClose = (e: React.MouseEvent<HTMLElement>, reason: string) => {
-      if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
-      removeMagicToken();
-      rest?.onClose();
-    };
-
-    const showModal = debouncedShow || isOpen;
-
-    const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
-
-    const hslColor = colorConvert.hex.hsl(color);
-
-    const [h, s, l] = hslColor;
-    const percentageList = [0, 30, 60, 30, 0, 30, 60, 30];
-    const maxPercentage = Math.max(...percentageList);
-    const minPercentage = Math.min(...percentageList);
-    let useAlpha = false;
-    if ((l * (100 + maxPercentage)) / 100 > 100 || (l * (100 + minPercentage)) / 100 < 0) {
-      // 超出范围，使用 alpha 通道变化
-      useAlpha = true;
-    }
-    const colorList = percentageList.map((percentageItem) => {
-      let finalL = (l * (100 + percentageItem)) / 100;
-      let finalAlpha = 0.6;
-      if (useAlpha) {
-        finalAlpha = (0.5 * (100 + percentageItem)) / 100;
-      } else {
-        finalL = (l * (100 + percentageItem)) / 100;
-      }
-      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
-    });
-    const background = `linear-gradient(45deg, ${colorList.join(', ')})`;
-    const colorListGlow = percentageList.map((percentageItem) => {
-      let finalL = (l * (100 + percentageItem)) / 100;
-      let finalAlpha = 0.2;
-      if (useAlpha) {
-        finalAlpha = (0.3 * (100 + percentageItem)) / 100;
-      } else {
-        finalL = (l * (100 + percentageItem)) / 100;
-      }
-      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
-    });
-
-    const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
-
-    const glowStyle =
-      rest.blocklet?.settings?.didConnect?.showDidColor === false
-        ? {}
-        : {
-            overflow: 'visible',
-            '&::before, &::after': {
-              content: '""',
-              position: 'absolute',
-              top: '-3px',
-              right: '-3px',
-              bottom: '-3px',
-              left: '-3px',
-              background,
-              backgroundSize: '300% 300%',
-              backgroundRepeat: 'no-repeat',
-              animation: 'glowRotate 10s linear infinite',
-              borderRadius: '14px !important',
-              zIndex: 0,
-            },
-            '&::after': {
-              background: backgroundGlow,
-              filter: 'blur(15px)',
-            },
-
-            '@keyframes glowRotate': {
-              '0%': {
-                backgroundPosition: '0 0',
-              },
-              '50%': {
-                backgroundPosition: '100% 0',
-              },
-              '100%': {
-                backgroundPosition: '0 0',
-              },
-            },
-          };
-    const glowBorderStyle =
-      rest.blocklet?.settings?.didConnect?.showDidColor === false
-        ? {}
-        : {
-            animation: 'glowBreathe 7s linear infinite',
-            '.did-connect__root': {
-              backgroundColor: 'transparent',
-            },
-            overflow: 'hidden',
-            '@keyframes glowBreathe': {
-              '0%, 100%': {
-                boxShadow: `
-            inset 0 0 7px ${hexToRgba(color, 0.3)},
-            inset 0 0 12px ${hexToRgba(color, 0.3)}`,
-              },
-              '50%': {
-                boxShadow: `
-            inset 0 0 18px ${hexToRgba(color, 0.7)},
-            inset 0 0 24px ${hexToRgba(color, 0.5)}`,
-              },
-            },
-          };
-
-    const wrapOnClose = useMemoizedFn(() => {
-      removeMagicToken();
-      rest?.onClose?.();
-    });
-
-    if (openVariant === 'page') {
-      return (
-        <Box
-          className="did-connect__container-page"
-          sx={mergeSx(glowStyle, {
-            borderRadius: 1,
-            position: 'relative',
-            zIndex: 1,
-          })}>
-          <Box
-            sx={{
-              border: `1px solid ${hexToRgba(color, 0.1)}`,
-              m: '-1px',
-              position: 'relative',
-              borderRadius: '12px',
-              zIndex: 2,
-              overflow: 'hidden',
-            }}>
-            <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
-          </Box>
-        </Box>
-      );
-    }
-
-    if (openVariant === 'drawer') {
-      return (
-        <DrawerComponent
-          className="did-connect__container-drawer"
-          disableSwipeToOpen
-          open={isOpen}
-          anchor="bottom"
-          drawerDragger={drawerDragger.current}
-          // @ts-ignore
-          onClose={handleOnClose}
-          slots={{
-            backdrop: BackdropWrap,
-          }}
-          sx={{
-            zIndex: '1400 !important', // dialog 的默认 z-index 是 1300，在 dialog 中打开验证/登录时会被遮挡，这里强制设置为 1400，确保 Drawer 在最上层
-          }}
-          slotProps={{
-            paper: {
-              sx: {
-                backgroundColor: 'background.default',
-                borderRadius: 3, // 保持跟 DID Wallet 一致
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                p: '2px',
-                ...glowBorderStyle,
-              },
-            },
-          }}>
-          {hideCloseButton ? null : (
-            <Box
-              ref={drawerDragger}
-              sx={{
-                px: 1,
-                pt: 2,
-                m: 'auto',
-                mt: -1,
-                mb: -2,
-                zIndex: 2,
-              }}>
-              <Box
-                sx={{
-                  width: '48px',
-                  height: '4px',
-                  borderRadius: '100vw',
-                  backgroundColor: 'rgba(0, 0, 0, 0.2)',
-                }}
-              />
-            </Box>
-          )}
-          <Box
-            sx={{
-              touchAction: 'none',
-              maxWidth: '100%',
-              width: 500,
-              height: 'auto',
-            }}>
-            {/* HACK: 由于 MUI 文档中描述 使用 keepMounted: false 可能会造成问题，所以采用下面的方案进行 HACK */}
-            {/* https://mui.com/material-ui/react-drawer/#keep-mounted */}
-            {showModal ? (
-              <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
-            ) : null}
-          </Box>
-        </DrawerComponent>
-      );
-    }
-
-    return (
-      <Dialog
-        open={isOpen}
-        slots={{
-          backdrop: BackdropWrap,
-        }}
-        className="did-connect__container-dialog"
-        onClose={handleOnClose}
-        PaperProps={{
-          sx: {
-            // 避免样式被 server 中的定义覆盖
-            '&.MuiPaper-rounded': {
-              borderRadius: '12px !important',
-            },
-            position: 'relative',
-            ...glowStyle,
-          },
-        }}>
-        <DialogContent
-          sx={{
-            maxWidth: 'calc(100vw - 18px)',
-            maxHeight: 'calc(100vh - 18px)',
-            p: '0px !important',
-            height: 'auto',
-            backgroundColor: 'background.default',
-            borderRadius: '12px !important',
-            zIndex: 1,
-          }}>
-          {showModal ? (
-            <Component
-              {...rest}
-              onClose={wrapOnClose}
-              setColor={setColor}
-              hideCloseButton={hideCloseButton}
-              mode={openVariant}
-            />
-          ) : null}
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  return WithContainerComponent;
-}

package/src/DIDConnect/with-ux-theme.tsx

@@ -1,22 +0,0 @@
-import { createTheme, useTheme } from '@mui/material';
-import { DID_CONNECT_THEME_LIGHT, DID_CONNECT_THEME_DARK } from '@blocklet/theme';
-import { ThemeProvider } from '../Theme';
-
-// DID Connect 使用自己的 Theme 配置，不受 Blocklet theme 影响
-const themeLight = createTheme(DID_CONNECT_THEME_LIGHT);
-const themeDark = createTheme(DID_CONNECT_THEME_DARK);
-
-export default function withUxTheme(Component: React.ComponentType<any>) {
-  function WithUxThemeComponent(props: any) {
-    const { palette } = useTheme();
-    const theme = palette.mode === 'dark' ? themeDark : themeLight;
-
-    return (
-      <ThemeProvider theme={theme}>
-        <Component {...props} />
-      </ThemeProvider>
-    );
-  }
-
-  return WithUxThemeComponent;
-}

package/src/DIDLogo/Logo.stories.jsx

@@ -1,11 +0,0 @@
-export { default as WithDifferentSizes } from './demo/with-different-sizes';
-export { default as WithDifferentStyles } from './demo/with-different-styles';
-export { default as WithInheritStyles } from './demo/with-inherit-styles';
-export { default as MakeALogo } from './demo/make-a-logo';
-export { default as WithText } from './demo/with-text';
-export { default as WithPreset } from './demo/with-preset';
-export { default as WithDark } from './demo/with-dark';
-
-export default {
-  title: 'DID/Logo',
-};

package/src/DIDLogo/index.tsx

@@ -1,168 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-const presetMap = {
-  default: {
-    color: '#4598FA',
-    text: undefined,
-  },
-  wallet: {
-    color: '#4598FA',
-    text: 'Wallet',
-  },
-  spaces: {
-    color: '#8C6AFC',
-    text: 'Spaces',
-  },
-  names: {
-    color: '#5D8BB4',
-    text: 'Names',
-  },
-  connect: {
-    color: '#1DC1C7',
-    text: 'Connect',
-  },
-};
-
-export interface DIDLogoProps {
-  style?: React.CSSProperties;
-  size?: string | number;
-  className?: string;
-  color?: string;
-  text?: string;
-  textColor?: string;
-  fontSize?: string | number;
-  gap?: number;
-  variant?: 'contained' | 'default';
-  name?: keyof typeof presetMap;
-  dark?: boolean;
-}
-
-export default function DIDLogo({
-  style = {},
-  className = '',
-  size = '1em',
-  color = undefined,
-  text = undefined,
-  textColor = undefined,
-  fontSize = undefined,
-  gap = 10,
-  variant = 'default',
-  name = undefined,
-  dark = false,
-}: DIDLogoProps) {
-  const isContained = variant === 'contained';
-  const currentPreset = presetMap[name as keyof typeof presetMap] || presetMap.default;
-  // 可通过传入 text = null，强制隐藏文字
-  const finalText = text === undefined ? currentPreset?.text : text;
-  const finalColor = color || currentPreset?.color;
-  const finalTextColor = textColor || (dark ? 'white' : '#121212');
-
-  let scaleIcon = 1;
-  let initSize = 80;
-  let finalTextSize = fontSize;
-  let finalGap = gap + 5;
-  if (!isContained && finalText) {
-    initSize = 64;
-    scaleIcon = 1.25;
-    finalGap = gap;
-    if (!fontSize) finalTextSize = 32;
-  }
-  finalTextSize = finalTextSize || 40;
-
-  const textRef = useRef(null);
-  const iconRef = useRef(null);
-  const [svgWidth, setSvgWidth] = useState<number>();
-  const [textX, setTextX] = useState(initSize);
-  const [viewBoxWidth, setViewBoxWidth] = useState(initSize);
-  const textY = isContained ? initSize / 2 + 5 : initSize / 2 + 3;
-
-  const rx = initSize / 5;
-
-  useEffect(() => {
-    if (iconRef.current) {
-      setTimeout(() => {
-        if (iconRef.current) {
-          // @ts-ignore
-          const textBbox = textRef.current?.getBBox();
-          // @ts-ignore
-          const iconRect = iconRef.current.getBoundingClientRect();
-
-          const textWidth = textBbox?.width || 0;
-          const scaleSize = iconRect.height / initSize;
-
-          const newViewBoxWidth = initSize * scaleIcon + textWidth + (textWidth ? finalGap : 0);
-          setViewBoxWidth(newViewBoxWidth);
-          setTextX(initSize * scaleIcon + (textWidth ? finalGap : 0));
-          setSvgWidth(newViewBoxWidth * scaleSize);
-        }
-        // HACK: 留给字体渲染一些时间，否则首次出现时，计算的 svg 宽度是不对的
-        // 这个时间小于 dialog 动画出现的时间，所以不会引起视觉上的抖动
-      }, 300);
-    }
-  }, [finalText, finalGap, scaleIcon, initSize]);
-
-  const withBg = (
-    <>
-      <rect ref={iconRef} width={initSize} height={initSize} rx={rx} fill="currentColor" opacity={0.1} />
-      <path
-        d="M63.660598583984374,17.9996337890625C67.41619858398437,17.9997131347625,70.46059858398438,21.0441537890625,70.46059858398438,24.7996337890625L70.46059858398438,55.4496337890625C70.46059858398438,59.2048337890625,67.41619858398437,62.2496337890625,63.660598583984374,62.2496337890625L15.999798583984376,62.2496337890625C12.244398583984374,62.2496337890625,9.199918364984375,59.2048337890625,9.199798583984375,55.4496337890625L9.199798583984375,54.6668337890625L13.199798583984375,54.6668337890625L13.199798583984375,55.4496337890625C13.199918583984374,56.9960337890625,14.453558583984375,58.2496337890625,15.999798583984376,58.2496337890625L63.660598583984374,58.2496337890625C65.20699858398437,58.2496337890625,66.46059858398438,56.9960337890625,66.46059858398438,55.4496337890625L66.46059858398438,24.7996337890625C66.46059858398438,23.2532737890625,65.20699858398437,21.9997137890625,63.660598583984374,21.9996337890625L15.999798583984376,21.9996337890625C14.453478583984374,21.9997137890625,13.199798583984375,23.2532737890625,13.199798583984375,24.7996337890625L13.199798583984375,25.7683937890625L9.199798583984375,25.7683937890625L9.199798583984375,24.7996337890625C9.199798583984375,21.0441537890625,12.244318583984375,17.9997131347625,15.999798583984376,17.9996337890625L63.660598583984374,17.9996337890625ZM16.728718583984374,29.982433789062497C18.729478583984374,29.982433789062497,20.462598583984374,30.4036337890625,21.927498583984374,31.2457337890625C23.410198583984375,32.0687337890625,24.562398583984375,33.2364337890625,25.384198583984375,34.7484337890625C26.205998583984375,36.2605337890625,26.616998583984376,38.0406337890625,26.616998583984376,40.088833789062505C26.616998583984376,42.117633789062495,26.205898583984375,43.8784337890625,25.384198583984375,45.3716337890625C24.562398583984375,46.8644337890625,23.410198583984375,48.0228337890625,21.927498583984374,48.845633789062504C20.462598583984374,49.668833789062504,18.729478583984374,50.0800337890625,16.728718583984374,50.0800337890625L9.734958583984374,50.0800337890625L9.734958583984374,29.982433789062497L16.728718583984374,29.982433789062497ZM32.97789858398437,50.0800337890625L29.360398583984374,50.0800337890625L29.360398583984374,29.982433789062497L32.97789858398437,29.982433789062497L32.97789858398437,50.0800337890625ZM43.629798583984375,29.982433789062497C45.63059858398437,29.982433789062497,47.36379858398438,30.4036337890625,48.82859858398437,31.2457337890625C50.31139858398438,32.0687337890625,51.46339858398437,33.2364337890625,52.285398583984374,34.7484337890625C53.10699858398438,36.2605337890625,53.51819858398437,38.0406337890625,53.51819858398437,40.088833789062505C53.51819858398437,42.117633789062495,53.10699858398438,43.8784337890625,52.285398583984374,45.3716337890625C51.46339858398437,46.8644337890625,50.31139858398438,48.0228337890625,48.82859858398437,48.845633789062504C47.36379858398438,49.668833789062504,45.63059858398437,50.0800337890625,43.629798583984375,50.0800337890625L36.63609858398438,50.0800337890625L36.63609858398438,29.982433789062497L43.629798583984375,29.982433789062497ZM58.98419858398437,42.9380337890625C60.101798583984376,42.9380337890625,61.008198583984374,43.8440337890625,61.008198583984374,44.9616337890625C61.008198583984374,46.0796337890625,60.101798583984376,46.9860337890625,58.98419858398437,46.9860337890625C57.86659858398438,46.985633789062504,56.96059858398438,46.0792337890625,56.96019858398437,44.9616337890625C56.96059858398438,43.8440337890625,57.86659858398438,42.9380337890625,58.98419858398437,42.9380337890625ZM13.352518583984375,46.8360337890625L16.621678583984377,46.8360337890625C18.640238583984377,46.8360337890625,20.194398583984373,46.2424337890625,21.284198583984377,45.0560337890625C22.373898583984374,43.8500337890625,22.918998583984376,42.1940337890625,22.918998583984376,40.088833789062505C22.918898583984372,37.9641337890625,22.373898583984374,36.2894337890625,21.284198583984377,35.064433789062505C20.194398583984373,33.8395337890625,18.640278583984376,33.2270337890625,16.621678583984377,33.2270337890625L13.352518583984375,33.2270337890625L13.352518583984375,46.8360337890625ZM40.25379858398438,46.8360337890625L43.522998583984375,46.8360337890625C45.541398583984375,46.8360337890625,47.095798583984376,46.2424337890625,48.18539858398437,45.0560337890625C49.27499858398438,43.8500337890625,49.82019858398437,42.1940337890625,49.82019858398437,40.088833789062505C49.82019858398437,37.9641337890625,49.27499858398438,36.2894337890625,48.18539858398437,35.064433789062505C47.095798583984376,33.8395337890625,45.541398583984375,33.2270337890625,43.522998583984375,33.2270337890625L40.25379858398438,33.2270337890625L40.25379858398438,46.8360337890625ZM58.98419858398437,33.4934337890625C60.101798583984376,33.4934337890625,61.008198583984374,34.3994337890625,61.008198583984374,35.5172337890625C61.008198583984374,36.6349337890625,60.101798583984376,37.541033789062496,58.98419858398437,37.541033789062496C57.86659858398438,37.5408337890625,56.96059858398438,36.6348337890625,56.96019858398437,35.5172337890625C56.96019858398437,34.3995337890625,57.86659858398438,33.4935337890625,58.98419858398437,33.4934337890625Z"
-        fill="currentColor"
-      />
-    </>
-  );
-  const noBg = (
-    <>
-      <rect ref={iconRef} width={initSize * scaleIcon} height={initSize} rx={rx} fill="none" />
-      <path
-        d="M71.3426,5C75.0978,5.000119781,78.1426,8.04456,78.1426,11.8L78.1426,52.9101C78.1426,56.6657,75.0978,59.7101,71.3426,59.7101L8.79998,59.7101C5.0445,59.7101,2.0000801086,56.6657,2,52.9101L2,50.6765L5.99998,50.6765L5.99998,52.9101C6.00006,54.4565,7.25366,55.7101,8.79998,55.7101L71.3426,55.7101C72.8886,55.7101,74.1426,54.4565,74.1426,52.9101L74.1426,11.8C74.1426,10.25368,72.889,9.000119999999999,71.3426,9L8.79998,9C7.25358,9,5.99998,10.253599999999999,5.99998,11.8L5.99998,14.26796L2,14.26796L2,11.8C2,8.04448,5.04446,5,8.79998,5L71.3426,5ZM10.96602,19.576999999999998C13.4867,19.576999999999998,15.6701,20.107799999999997,17.5156,21.1688C19.3837,22.2057,20.8358,23.6766,21.8711,25.5816C22.9064,27.4867,23.4238,29.7295,23.4238,32.3097C23.4238,34.8661,22.9064,37.0845,21.8711,38.9657C20.8358,40.8465,19.3837,42.3057,17.5156,43.3425C15.6701,44.3793,13.4867,44.8981,10.96602,44.8981L2.154688,44.8981L2.154688,19.576999999999998L10.96602,19.576999999999998ZM31.4383,44.8981L26.8805,44.8981L26.8805,19.5774L31.4383,19.5774L31.4383,44.8981ZM44.8586,19.5774C47.3794,19.5774,49.5626,20.107799999999997,51.4082,21.1688C53.2762,22.2057,54.7282,23.6766,55.7638,25.5816C56.799,27.4867,57.3162,29.7296,57.3162,32.3097C57.3162,34.8661,56.799,37.0849,55.7638,38.9657C54.7282,40.8465,53.2762,42.3057,51.4082,43.3425C49.5626,44.3793,47.3794,44.8981,44.8586,44.8981L36.0469,44.8981L36.0469,19.5774L44.8586,19.5774ZM64.2034,35.899699999999996C65.6118,35.899699999999996,66.7534,37.0413,66.7534,38.4497C66.7534,39.8577,65.6118,40.9993,64.2034,40.9993C62.7954,40.9993,61.6534,39.8577,61.6534,38.4497C61.6534,37.0413,62.7954,35.899699999999996,64.2034,35.899699999999996ZM6.7121,40.8105L10.83126,40.8105C13.3745,40.8105,15.3326,40.0625,16.7055,38.5677C18.0783,37.0485,18.7648,34.9625,18.7648,32.3097C18.7648,29.6331,18.0784,27.523,16.7055,25.9797C15.3326,24.4364,13.3745,23.6645,10.83126,23.6644L6.7121,23.6644L6.7121,40.8105ZM40.6046,40.8105L44.7238,40.8105C47.267,40.8105,49.225,40.0629,50.5982,38.5681C51.971,37.0489,52.6574,34.9625,52.6574,32.3097C52.6574,29.6331,51.971,27.523,50.5982,25.9797C49.225,24.4364,47.267,23.6649,44.7238,23.6648L40.6046,23.6648L40.6046,40.8105ZM64.2034,24.0004C65.6118,24.0005,66.7534,25.1422,66.7534,26.5504C66.7534,27.9586,65.6118,29.1003,64.2034,29.1004C62.795,29.1004,61.6534,27.9587,61.6534,26.5504C61.6534,25.1421,62.7954,24.0004,64.2034,24.0004Z"
-        fill="currentColor"
-      />
-    </>
-  );
-  const noBgText = (
-    <>
-      <rect ref={iconRef} width={initSize * scaleIcon} height={initSize} rx={rx} fill="none" />
-      <path
-        d="M71.342621,13C75.097809,13.00011978147,78.142624,16.0445597,78.142624,19.799999200000002L78.142624,60.910069C78.142624,64.665668,75.097809,67.710068,71.342621,67.710068L8.799983000000001,67.710068C5.0445037,67.710068,2.000080108621,64.665668,2,60.910069L2,58.676472L5.9999835,58.676472L5.9999835,60.910069C6.0000634,62.456467,7.253664,63.710068,8.799983000000001,63.710068L71.342621,63.710068C72.888603,63.710068,74.142609,62.456467,74.142609,60.910069L74.142609,19.799999200000002C74.142609,18.2536793,72.889008,17.0001183,71.342621,16.9999986L8.799983000000001,16.9999986C7.2535834,16.9999986,5.9999835,18.2535977,5.9999835,19.799999200000002L5.9999835,22.267959599999998L2,22.267959599999998L2,19.799999200000002C2,16.0444784,5.0444634,13,8.799983000000001,13L71.342621,13ZM10.9660225,27.576957C13.486742,27.576957,15.670061,28.107757,17.515621,29.168756C19.383659,30.205677,20.835781,31.676603,21.871099,33.581635C22.906384,35.486677,23.423822,37.729511,23.423822,40.309677C23.423822,42.86607,22.906384,45.084473,21.871099,46.965672C20.835781,48.846466,19.383701,50.305676,17.515621,51.342476C15.670061,52.379284,13.486703,52.898083,10.9660225,52.898083L2.15468803,52.898083L2.15468803,27.576957L10.9660225,27.576957ZM31.438259,52.898083L26.880459,52.898083L26.880459,27.577358L31.438259,27.577358L31.438259,52.898083ZM44.858624,27.577358C47.379414,27.577358,49.562618,28.107757,51.408211,29.168756C53.276222,30.205677,54.728218,31.676636,55.763813,33.581635C56.799011,35.486677,57.316219,37.729555000000005,57.316219,40.309677C57.316219,42.86607,56.799011,45.084873,55.763813,46.965672C54.728218,48.846466,53.276222,50.305676,51.408211,51.342476C49.562618,52.379284,47.379414,52.898083,44.858624,52.898083L36.046856,52.898083L36.046856,27.577358L44.858624,27.577358ZM64.20340300000001,43.899673C65.611801,43.899673,66.75341,45.041279,66.75341,46.44968C66.75341,47.85767,65.611801,48.999275,64.20340300000001,48.999275C62.79541,48.999275,61.653412,47.85767,61.653412,46.44968C61.653412,45.041279,62.79541,43.899673,64.20340300000001,43.899673ZM6.7121043,48.810471L10.8312635,48.810471C13.374459,48.810471,15.332582,48.062473,16.705461,46.567677C18.078341,45.048477,18.764822,42.962473,18.764822,40.309677C18.764822,37.633072,18.078381,35.523035,16.705461,33.979670999999996C15.332582,32.436394,13.374459,31.664515,10.8312635,31.664434L6.7121043,31.664434L6.7121043,48.810471ZM40.604622,48.810471L44.723808,48.810471C47.267017,48.810471,49.225018,48.062874,50.598221,46.568077C51.97102,45.04887,52.657417,42.962473,52.657417,40.309677C52.657417,37.633114,51.97102,35.522997000000004,50.598221,33.979670999999996C49.225018,32.436394,47.267017,31.664913,44.723808,31.664837L40.604622,31.664837L40.604622,48.810471ZM64.20340300000001,32.000399C65.611801,32.000515,66.75341,33.142193,66.75341,34.550396C66.75341,35.958591,65.611801,37.100274999999996,64.20340300000001,37.100391C62.79501,37.100391,61.653412,35.958675,61.653412,34.550396C61.653412,33.142112999999995,62.79541,32.000399,64.20340300000001,32.000399Z"
-        fill="currentColor"
-      />
-    </>
-  );
-  let content = noBgText;
-  if (isContained) {
-    content = withBg;
-  } else if (finalText) {
-    content = noBg;
-  }
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={svgWidth}
-      height={size}
-      viewBox={`0 0 ${viewBoxWidth} ${initSize}`}
-      fill="currentColor"
-      className={`${className}`.trim()}
-      style={Object.assign({ color: finalColor }, style)}>
-      {content}
-      {finalText && (
-        <text
-          ref={textRef}
-          x={textX}
-          y={textY}
-          fontSize={finalTextSize}
-          fill={finalTextColor}
-          textAnchor="start"
-          dominantBaseline="middle"
-          fontFamily="Lato, Arial, sans-serif"
-          fontWeight="normal"
-          style={{
-            userSelect: 'none',
-            textTransform: 'capitalize',
-          }}>
-          {finalText}
-        </text>
-      )}
-    </svg>
-  );
-}