New Component Highlight (#1281)

* feat: add new component highlight

* docs: update highlight

* docs: add highlight icon and update docs

* test: update highlight tsx story

* docs: spell error

Co-authored-by: zhangyumei.0319 <[email protected]>

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/order.js

@@ -52,6 +52,7 @@ const order = [
     'descriptions',
     'dropdown',
     'empty',
+    'highlight',
     'image',
     'list',
     'modal',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 72
+order: 73
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 72
+order: 73
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/show/highlight/index-en-US.md

@@ -0,0 +1,108 @@
+---
+localeCode: en-US
+order: 54
+category: Show
+title: Highlight 
+icon: doc-highlight
+dir: column
+noInline: true
+brief: highlight specific content
+---
+
+## code demo
+
+### How to import
+
+Semi support `Highlight` component since v2.24.0
+
+```jsx import
+import { Highlight } from '@douyinfe/semi-ui';
+```
+
+
+### Basic usage
+
+You can specify keywords to be highlighted with `searchWords` and source text with `sourceString`
+
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code';
+    const searchWords = ['Any Design', 'Semi Design'];
+    
+    return (<h2>
+        <Highlight sourceString={sourceString} searchWords={searchWords} />
+    </h2>);
+};
+```
+
+### Specify highlight style
+
+By default, the highlighted text will have its own text style, the text color is --semi-yellow-4, and the background color is transparent.
+When you need to customize different highlight styles, you can specify them through `highlightClassName`, `highlightStyle`
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code';
+    const searchWords = ['Any Design', 'Semi Design'];
+    
+    return (<h2>
+        <Highlight
+            sourceString={sourceString}
+            searchWords={searchWords}
+            highlightStyle={{
+                borderRadius: 6,
+                marginLeft: 4,
+                marginRight: 4,
+                paddingLeft: 4,
+                paddingRight: 4,
+                backgroundColor: 'rgba(var(--semi-teal-5), 1)',
+                color: 'rgba(var(--semi-white), 1)'
+            }}
+        />
+    </h2>);
+};
+```
+
+
+### Specify the highlight tag
+
+Semi will wrap the text matching searchWords in sourceString with mark tag by default, you can also re-specify the tag through `component`
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code';
+    const searchWords = ['Any Design', 'Semi Design'];
+    
+    return (<h2>
+        <Highlight
+            sourceString={sourceString}
+            searchWords={searchWords}
+            component='strong'
+        />
+    </h2>);
+};
+```
+
+## API Reference
+
+### Highlight
+
+| property | description | type | default value |
+| ------------ | ------------------------------------ -------------------- | ----------------------------- --- | ---------- |
+| searchWords | expected highlighted text | string[] | '' |
+| sourceString | source text | string | |
+| component | Highlight label | string | `mark` |
+| highlightClassName | The style class name of the highlight tag | ReactNode | - |
+| highlightStyle | Inline style for highlight tags | ReactNode | - |
+| caseSensitive | Is case sensitive | false | - |
+| autoEscape | Whether to automatically escape | true | - |

content/show/highlight/index.md

@@ -0,0 +1,126 @@
+---
+localeCode: zh-CN
+order: 54
+category: 展示类
+title: Highlight 高亮文本
+icon: doc-highlight
+dir: column
+noInline: true
+brief: 高亮特定内容
+---
+
+## 代码演示
+
+### 如何引入
+
+Highlight 从 v2.24.0 版本开始支持
+
+```jsx import
+import { Highlight } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+你可以通过 `searchWords` 指定需要高亮的关键字，通过 `sourceString` 指定源文本
+
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const searchWords = ['设计系统', 'Semi Design'];
+    
+    return (<h2>
+        <Highlight sourceString={sourceString} searchWords={searchWords} />
+    </h2>);
+};
+```
+
+### 指定高亮样式
+
+默认情况下，高亮文本会自带文本样式，文字颜色为 --semi-yellow-4, 背景颜色为 transparent 透明。  
+当你需要自定义不同的高亮样式时，你可以通过 `highlightClassName`, `highlightStyle`来指定
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const searchWords = ['设计系统', 'Semi Design'];
+    
+    return (
+        <>
+            <h2>
+                <Highlight
+                    sourceString={sourceString}
+                    searchWords={searchWords}
+                    highlightStyle={{
+                        borderRadius: 6,
+                        marginLeft: 4,
+                        marginRight: 4,
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        backgroundColor: 'rgba(var(--semi-teal-5), 1)',
+                        color: 'rgba(var(--semi-white), 1)'
+                    }}
+                />
+            </h2>
+            <h2>
+                <Highlight
+                    sourceString={sourceString}
+                    searchWords={searchWords}
+                    highlightStyle={{
+                        borderRadius: 6,
+                        marginLeft: 4,
+                        marginRight: 4,
+                        paddingLeft: 4,
+                        paddingRight: 4,
+                        backgroundColor: 'var(--semi-color-primary)',
+                        color: 'rgba(var(--semi-white), 1)'
+                    }}
+                />
+            </h2>
+        </>
+    );
+};
+```
+
+
+### 指定高亮标签
+
+Semi 默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 `component` 重新指定标签
+
+```jsx live=true dir="column"
+import React from 'react';
+import { Highlight } from '@douyinfe/semi-ui';
+
+() => {
+    const sourceString = '从 Semi Design，到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
+    const searchWords = ['设计系统', 'Semi Design'];
+    
+    return (<h2>
+        <Highlight
+            sourceString={sourceString}
+            searchWords={searchWords}
+            component='strong'
+        />
+    </h2>);
+};
+```
+
+## API 参考
+
+### Highlight
+
+| 属性         | 说明                                                     | 类型                             | 默认值     |
+| ------------ | -------------------------------------------------------- | -------------------------------- | ---------- |
+| searchWords  | 期望高亮显示的文本                                          | string[]                          | ''   |
+| sourceString | 源文本                                      | string                           |           |
+| component   | 高亮标签                                              | string                           | `mark`          |
+| highlightClassName | 高亮标签的样式类名                                         | ReactNode                        | -          |
+| highlightStyle   | 高亮标签的内联样式                                                 | ReactNode                        | -          |
+| caseSensitive    | 是否大小写敏感                                            | false  | -          |
+| autoEscape       | 是否自动转义                                                | true                        | -          |

content/show/image/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Show
 title: Image
 icon: doc-image

content/show/image/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 展示类
 title: Image 图片
 icon: doc-image

content/show/list/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Show
 title: List
 subTitle: List

content/show/list/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 展示类
 title: List 列表
 icon: doc-list

content/show/modal/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title:  Modal
 subTitle: Modal

content/show/modal/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title: Modal 模态对话框
 icon: doc-modal

content/show/overflowlist/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title: OverflowList
 subTitle: OverflowList

content/show/overflowlist/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 58
 category: 展示类
 title: OverflowList 折叠列表
 icon: doc-overflowList

content/show/popover/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 59
 category: Show
 title: Popover
 subTitle: Popover

content/show/popover/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 58
+order: 59
 category: 展示类
 title: Popover 气泡卡片
 icon: doc-popover

content/show/scrolllist/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 59
+order: 60
 category: Show
 title:  ScrollList
 subTitle: ScrollList

content/show/scrolllist/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 59
+order: 60
 category: 展示类
 title: ScrollList 滚动列表
 icon: doc-scrolllist

content/show/sidesheet/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Show
 title: SideSheet
 subTitle: SideSheet

content/show/sidesheet/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 展示类
 title: SideSheet 滑动侧边栏
 icon: doc-sidesheet

content/show/table/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Show
 title: Table
 subTitle: Table

content/show/table/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 展示类
 title: Table 表格
 icon: doc-table

content/show/tag/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Show
 title: Tag
 subTitle: Tag

content/show/tag/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 展示类
 title: Tag 标签
 icon: doc-tag

content/show/timeline/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Show
 title:  Timeline
 subTitle: Timeline

content/show/timeline/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 展示类
 title: Timeline 时间轴
 icon: doc-timeline

content/show/tooltip/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Show
 title: Tooltip
 subTitle: Tooltip

content/show/tooltip/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 展示类
 title: Tooltip 工具提示
 icon: doc-tooltip

content/start/overview/index-en-US.md

@@ -76,7 +76,8 @@ SideSheet,
 Table,
 Tag,
 Timeline,
-Tooltip
+Tooltip,
+Highlight
 ```
 
 ## Feedback

content/start/overview/index.md

@@ -77,7 +77,8 @@ SideSheet 滑动侧边栏,
 Table 表格,
 Tag 标签,
 Timeline 时间轴,
-Tooltip 工具提示
+Tooltip 工具提示,
+Highlight 高亮文本
 ```
 
 ## 反馈类

gatsby-node.js

@@ -110,7 +110,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 'context': resolve('src/context'),
                 'components': resolve('src/components'),
                 'locale': resolve('src/locale'),
-                'src':resolve('src')
+                'src': resolve('src')
             },
         },
         module: {

packages/semi-foundation/highlight/constants.ts

@@ -0,0 +1,7 @@
+import { BASE_CLASS_PREFIX } from "../base/constants";
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-highlight`,
+} as const;
+
+export { cssClasses };

packages/semi-foundation/highlight/highlight.scss

@@ -0,0 +1,11 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$highlight: #{$prefix}-highlight;
+$tag: #{$prefix}-highlight-tag;
+
+.#{$tag} {
+    color: $color-highlight-text-default;
+    background-color: $color-highlight-text-bg-default;
+    font-weight: $font-highlight-text-fontWeight;
+}

packages/semi-foundation/highlight/variables.scss

@@ -0,0 +1,5 @@
+
+$color-highlight-text-default: rgba(var(--semi-yellow-4), 1); // 高亮文字颜色
+$color-highlight-text-bg-default: transparent; // 高亮文字背景颜色
+
+$font-highlight-text-fontWeight: 600; // 高亮文字字重

packages/semi-ui/_utils/index.tsx

@@ -141,14 +141,14 @@ export const registerMediaQuery = (media: string, { match, unmatch, callInInit =
 };
 export interface GetHighLightTextHTMLProps {
     sourceString?: string;
-    searchWords?: any[];
+    searchWords?: string[];
     option: HighLightTextHTMLOption
 }
 
 export interface HighLightTextHTMLOption {
     highlightTag?: string;
     highlightClassName?: string;
-    highlightStyle?: Record<string, any>;
+    highlightStyle?: React.CSSProperties;
     caseSensitive: boolean;
     autoEscape: boolean
 }

packages/semi-ui/highlight/_story/highlight.stories.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Skeleton, Avatar, Button, ButtonGroup, Spin, Highlight } from '../../index';
+
+
+const searchWords = ['do', 'dollar'];
+const sourceString = 'aaa do dollar aaa';
+
+export default {
+  title: 'Highlight'
+}
+
+export const HighlightTag = () => (
+  <h2>
+    <Highlight
+        component='span'
+        sourceString='semi design connect designOps & devOps'
+        searchWords={['semi']}
+        />
+  </h2>
+);
+
+HighlightTag.story = {
+  name: 'different tag',
+};
+
+export const HighlightStyle = () => (
+  <h2>
+    <Highlight
+        component='span'
+        sourceString='semi design connect designOps & devOps'
+        searchWords={['semi', 'design']}
+        highlightStyle={{ backgroundColor: 'var(--semi-color-warning)', borderRadius: 4 }}
+    />
+  </h2>
+);
+
+HighlightStyle.story = {
+  name: 'custom style',
+};

packages/semi-ui/highlight/_story/highlight.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { Skeleton, Avatar, Button, ButtonGroup, Spin, Highlight } from '../../index';
+
+const searchWords = ['do', 'dollar'];
+const sourceString = 'aaa do dollar aaa';
+const stories = storiesOf('Highlight', module);
+
+const HighlightTag = () => (
+    <h2>
+        <Highlight
+            component='span'
+            sourceString='semi design connect designOps & devOps'
+            searchWords={['semi']}
+        />
+    </h2>
+);
+
+stories.add('List', () => (<HighlightTag></HighlightTag>));

packages/semi-ui/highlight/index-en-US.md

@@ -0,0 +1 @@
+../../../content/show/highlight/index-en-US.md

packages/semi-ui/highlight/index.md

@@ -0,0 +1 @@
+../../../content/show/highlight/index.md

packages/semi-ui/highlight/index.tsx

@@ -0,0 +1,70 @@
+import React, { PureComponent } from 'react';
+import cls from 'classnames';
+import PropTypes, { string } from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/highlight/constants';
+import { getHighLightTextHTML } from '../_utils/index';
+import '@douyinfe/semi-foundation/highlight/highlight.scss';
+
+export interface HighlightProps {
+    autoEscape?: boolean;
+    caseSensitive?: boolean;
+    sourceString?: string;
+    searchWords?: Array<string>;
+    highlightStyle?: React.CSSProperties;
+    highlightClassName?: string;
+    component?: string
+}
+
+const prefixCls = cssClasses.PREFIX;
+
+class Highlight extends PureComponent<HighlightProps> {
+
+    static propTypes = {
+        style: PropTypes.object,
+        className: PropTypes.string,
+        autoEscape: PropTypes.bool,
+        caseSensitive: PropTypes.bool,
+        sourceString: PropTypes.string,
+        searchWords: PropTypes.arrayOf(PropTypes.string),
+        highlightStyle: PropTypes.object,
+        highlightClassName: PropTypes.string,
+        component: PropTypes.string
+    };
+
+    static defaultProps = {
+        component: 'mark',
+        autoEscape: true,
+        caseSensitive: false,
+        sourceString: '',
+    };
+
+    render() {
+        const {
+            searchWords,
+            sourceString,
+            component,
+            highlightClassName,
+            highlightStyle,
+            caseSensitive,
+            autoEscape,
+        } = this.props;
+
+        const tagCls = cls({
+            [`${prefixCls}-tag`]: true,
+        }, highlightClassName);
+
+        const option = {
+            highlightTag: component,
+            highlightClassName: tagCls,
+            highlightStyle,
+            caseSensitive,
+            autoEscape,
+        };
+
+        return (
+            getHighLightTextHTML({ sourceString, searchWords, option })
+        );
+    }
+}
+
+export default Highlight;

packages/semi-ui/index.ts

@@ -79,7 +79,7 @@ export { default as TreeSelect } from './treeSelect';
 export { default as Upload } from './upload';
 export { default as Typography } from './typography';
 export { default as Transfer } from './transfer';
-
+export { default as Highlight } from './highlight';
 
 export { default as LocaleProvider } from './locale/localeProvider';
 export { default as LocaleConsumer } from './locale/localeConsumer';

packages/semi-ui/select/_story/select.stories.jsx

@@ -4,7 +4,6 @@ import './select.scss';
 import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag } from '../../index';
 import CustomTrigger from './CustomTrigger';
 import classNames from 'classnames';
-import { getHighLightTextHTML } from '../../_utils/index';
 const Option = Select.Option;
 import { IconSearch, IconGift } from '@douyinfe/semi-icons';
 
@@ -2826,26 +2825,6 @@ Value0.story = {
   name: 'value=0',
 };
 
-const Highlight = () => {
-  const searchWords = ['do', 'dollar'];
-  const sourceString = 'aaa do dollar aaa';
-  const result = getHighLightTextHTML({
-    searchWords,
-    sourceString,
-  });
-  const result2 = getHighLightTextHTML({
-    searchWords: ['z'],
-    sourceString: 'aaazaaazaaa',
-  });
-  return result2;
-};
-
-export const _Highlight = () => <Highlight />;
-
-_Highlight.story = {
-  name: 'highlight',
-};
-
 export const ScrollIntoView = () => (
   <div>
       <p>single selection</p>

src/images/docIcons/doc-highlight.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="8" width="18" height="8" rx="1" fill="#FAC800"/>
+<path d="M4.44342 4.44352C4.26265 4.62429 4.1611 4.86946 4.1611 5.12509V8.18065C4.1611 8.43629 4.26265 8.68146 4.44342 8.86222C4.62418 9.04299 4.86935 9.14454 5.12499 9.14454C5.38063 9.14454 5.6258 9.04299 5.80656 8.86222C5.98732 8.68146 6.08888 8.43629 6.08888 8.18065V6.08898H11.0361V17.9112H8.94443C8.68879 17.9112 8.44362 18.0128 8.26286 18.1935C8.0821 18.3743 7.98054 18.6195 7.98054 18.8751C7.98054 19.1307 8.0821 19.3759 8.26286 19.5567L8.40428 19.4152L8.26286 19.5567C8.44362 19.7374 8.68879 19.839 8.94443 19.839H15.0555C15.3112 19.839 15.5564 19.7374 15.7371 19.5567C15.9179 19.3759 16.0194 19.1307 16.0194 18.8751C16.0194 18.6195 15.9179 18.3743 15.7371 18.1935C15.5564 18.0128 15.3112 17.9112 15.0555 17.9112H12.9639V6.08898H17.9111V8.18065C17.9111 8.43629 18.0127 8.68146 18.1934 8.86222C18.3742 9.04299 18.6193 9.14454 18.875 9.14454C19.1306 9.14454 19.3758 9.04299 19.5566 8.86222C19.7373 8.68146 19.8389 8.43629 19.8389 8.18065V5.12509C19.8389 4.86946 19.7373 4.62429 19.5566 4.44352C19.3758 4.26276 19.1306 4.16121 18.875 4.16121H5.12499C4.86935 4.16121 4.62418 4.26276 4.44342 4.44352Z" fill="#6A6F7F" stroke="#6A6F7F" stroke-width="0.4"/>
+</svg>