@cu-mkp/editioncrafter 1.3.0-beta.1 → 1.3.0-beta.3

package/dist/es/src/RecordList/component/PhraseListTable.jsx

@@ -0,0 +1,108 @@
+import { useContext, useMemo, useState } from 'react'
+import Pill from '../../common/components/Pill'
+import FilterContext from '../context/FilterContext'
+
+const MAX_PHRASE_LENGTH = 20
+
+function PhraseList(props) {
+  const phraseStr = useMemo(() => {
+    const arr = []
+
+    props.phrases.forEach((phrase) => {
+      if (phrase.layer !== props.layer) {
+        return
+      }
+
+      if (arr.includes(phrase.name)) {
+        return
+      }
+
+      if (phrase.name.length > MAX_PHRASE_LENGTH) {
+        arr.push(`${phrase.name.slice(0, MAX_PHRASE_LENGTH)}...`)
+      }
+      else {
+        arr.push(phrase.name)
+      }
+    })
+
+    return arr.join('; ')
+  }, [props.layer, props.phrases])
+
+  return <p>{phraseStr}</p>
+}
+
+function PhraseListTable(props) {
+  const ctx = useContext(FilterContext)
+
+  const [layer, setLayer] = useState(Object.keys(ctx.layers)[0])
+
+  const tagsToShow = useMemo(
+    () => Object.keys(props.tagCounts).filter(tagName => props.tagCounts[tagName].phrases.some(phrase => phrase.layer === layer)),
+    [layer, props.tagCounts],
+  )
+
+  return (
+    <div
+      className="phrase-list-table-container"
+      style={{ display: props.visible ? 'initial' : 'none' }}
+    >
+      <div className="layer-select-container">
+        <span>Layer</span>
+        <select
+          className="layer-select"
+          onChange={e => setLayer(e.target.value)}
+        >
+          {Object.keys(ctx.layers).map(xmlId => (
+            <option
+              key={xmlId}
+              value={xmlId}
+            >
+              {ctx.layers[xmlId]}
+            </option>
+          ))}
+        </select>
+      </div>
+      <table className="phrase-list-table">
+        <thead>
+          <tr>
+            <th>Tags for phrases</th>
+            <th>
+              <span>References in this layer</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {tagsToShow.length === 0 && (
+            <tr>
+              <td colSpan={2}>
+                <div className="empty-table-container">
+                  No tags in this layer.
+                </div>
+              </td>
+            </tr>
+          )}
+          {tagsToShow.map(tag => (
+            <tr key={tag}>
+              <td>
+                <Pill
+                  label={tag}
+                  isActive={ctx.tags.includes(props.tagCounts[tag].id)}
+                >
+                  <span className="tag-count">{props.tagCounts[tag].count}</span>
+                </Pill>
+              </td>
+              <td>
+                <PhraseList
+                  layer={layer}
+                  phrases={props.tagCounts[tag].phrases}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PhraseListTable

package/dist/es/src/RecordList/component/Record.jsx

@@ -1,6 +1,8 @@
-import { useContext, useMemo } from 'react'
+import { useContext, useMemo, useState } from 'react'
+import { IoChevronDownOutline, IoChevronUpOutline } from 'react-icons/io5'
+import Pill from '../../common/components/Pill'
 import FilterContext from '../context/FilterContext'
-import Pill from './Pill'
+import PhraseList from './PhraseListTable'
 
 function getRecordName(div) {
   if (div.element_name) {
@@ -22,7 +24,24 @@ function getSurfaceLink(baseUrl, div, cats, tags) {
   )
 }
 
+function PhraseToggle(props) {
+  return (
+    <button
+      aria-label="Toggle phrases"
+      className="phrase-toggle"
+      onClick={props.onClick}
+      type="button"
+    >
+      {props.toggled
+        ? <IoChevronUpOutline />
+        : <IoChevronDownOutline />}
+    </button>
+  )
+}
+
 function Record(props) {
+  const [showPhrases, setShowPhrases] = useState(false)
+
   const ctx = useContext(FilterContext)
 
   const categories = useMemo(
@@ -38,11 +57,19 @@ function Record(props) {
       tags.forEach((tag) => {
         if (result[tag.name]) {
           result[tag.name].count++
+          result[tag.name].phrases.push({
+            name: el.element_name,
+            layer: el.layer_xml_id,
+          })
         }
         else {
           result[tag.name] = {
             id: tag.xml_id,
             count: 1,
+            phrases: [{
+              name: el.element_name,
+              layer: el.layer_xml_id,
+            }],
           }
         }
       })
@@ -74,7 +101,16 @@ function Record(props) {
             <span className="tag-count">{tagCounts[tagName].count}</span>
           </Pill>
         ))}
+        <PhraseToggle
+          toggled={showPhrases}
+          onClick={() => setShowPhrases(!showPhrases)}
+        />
       </div>
+      <PhraseList
+        tagCounts={tagCounts}
+        elements={props.childElements}
+        visible={showPhrases}
+      />
     </div>
   )
 }

package/dist/es/src/RecordList/component/RecordListView.jsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react'
+import { getObjs } from '../../common/lib/sql'
 import FilterContext from '../context/FilterContext'
-import { getObjs } from '../lib/sql'
 import Record from './Record'
 
 function cleanUpTagIds(obj) {

package/dist/es/src/RecordList/component/Sidebar.jsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { getObjs } from '../lib/sql'
+import { getObjs } from '../../common/lib/sql'
 import CollapsibleMenu from './CollapsibleMenu'
 import SidebarTagList from './SidebarTagList'
 

package/dist/es/src/RecordList/component/SidebarTagList.jsx

@@ -1,7 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { IoCheckmarkSharp } from 'react-icons/io5'
+import Pill from '../../common/components/Pill'
 import FilterContext from '../context/FilterContext'
-import Pill from './Pill'
 
 function TagPill(props) {
   const { categories, toggleCategoryFilter, tags, toggleTagFilter } = useContext(FilterContext)

package/dist/es/src/RecordList/index.jsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import initSqlJs from 'sql.js'
-import Loading from './component/Loading'
+import sqlJsInfo from 'sql.js/package.json'
+import Loading from '../common/components/Loading'
 import RecordListView from './component/RecordListView'
 import Sidebar from './component/Sidebar'
-
 import FilterContext from './context/FilterContext'
 
 import './styles/base.css'
@@ -26,7 +26,7 @@ async function initDb(url) {
   const arr = new Uint8Array(buf)
 
   const SQL = await initSqlJs({
-    locateFile: file => `https://sql.js.org/dist/${file}`,
+    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/${sqlJsInfo.version}/${file}`,
   })
 
   const db = new SQL.Database(arr)
@@ -56,7 +56,8 @@ function RecordList(props) {
     ...filters,
     toggleCategoryFilter,
     toggleTagFilter,
-  }), [filters, toggleCategoryFilter, toggleTagFilter])
+    layers: props.layers,
+  }), [filters, toggleCategoryFilter, toggleTagFilter, props.layers])
 
   useEffect(() => {
     const loadDb = async () => {
@@ -83,7 +84,11 @@ function RecordList(props) {
     <FilterContext.Provider value={initialContext}>
       <div className="editioncrafter-record-list">
         <Sidebar db={db} />
-        <RecordListView db={db} recordLabel={props.recordLabel} viewerUrl={props.viewerUrl} />
+        <RecordListView
+          db={db}
+          recordLabel={props.recordLabel}
+          viewerUrl={props.viewerUrl}
+        />
       </div>
     </FilterContext.Provider>
   )

package/dist/es/src/RecordList/styles/base.css

@@ -3,7 +3,8 @@
 .editioncrafter-record-list {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
   gap: 20px;
   font-family: 'Inter', sans-serif;
   margin: 0;
@@ -60,19 +61,3 @@
   background-color: #ffffff;
 }
 
-.editioncrafter-record-list .pill {
-  appearance: none;
-  display: flex;
-  height: 32px;
-  padding: 4px 12px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  border-radius: 50px;
-  border: 1px solid #CEDAE7;
-  background: #CEDAE7;
-  color: #0A0A0A;
-  font-family: Inter;
-  font-size: 14px;
-  font-weight: 500;
-}

package/dist/es/src/RecordList/styles/record.css

@@ -36,13 +36,34 @@
   align-items: center;
   font-size: 14px;
   font-weight: 500;
+  position: relative;
 }
 
 .editioncrafter-record-list .record-list-view .record-box .tag-list .tag-list-label {
   font-weight: 600;
 }
 
-.editioncrafter-record-list .record-list-view .record-box .tag-list .pill {
+.editioncrafter-record-list .record-list-view .record-box .phrase-toggle {
+  position: absolute;
+  right: 0;
+  bottom: 2px;
+  background: #07529A;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-toggle svg {
+  height: 18px;
+  width: 18px;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .pill,
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table .pill {
   background: #ffffff;
   display: flex;
   height: 32px;
@@ -59,7 +80,7 @@
   color: #ffffff
 }
 
-.editioncrafter-record-list .record-list-view .record-box .tag-list .pill .tag-count {
+.editioncrafter-record-list .record-list-view .record-box .pill .tag-count {
   display: inline-flex;
   height: 24px;
   min-width: 24px;
@@ -73,12 +94,79 @@
   background: #B5C8DC99;
 }
 
-.editioncrafter-record-list .record-list-view .record-box .tag-list .pill.active {
+.editioncrafter-record-list .record-list-view .record-box .pill.active {
   border: 1px solid #07529A;
   color: #07529A;
 }
 
-.editioncrafter-record-list .record-list-view .record-box .tag-list .pill.active .tag-count {
+.editioncrafter-record-list .record-list-view .record-box .pill.active .tag-count {
   background: #07529A;
   color: #ffffff;
 }
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table-container {
+  position: relative;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table-container .layer-select-container {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table-container button:hover {
+  cursor: default;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table-container .layer-select {
+  display: flex;
+  height: 32px;
+  padding: 0px 12px;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid#E1E3E6;
+  background:#F3F4F7;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table-container .layer-select:hover {
+  cursor: pointer;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table th {
+  font-weight: 600;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table {
+  text-align: left;
+  border-collapse: collapse;
+  font-size: 14px;
+  width: 100%;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table tr {
+  border-bottom: 1px solid #E1E3E6;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table td,
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table th {
+  padding: 12px;
+
+}
+
+.editioncrafter-record-list .record-list-view .record-box .phrase-list-table .empty-table-container {
+  height: 80px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/es/src/TagExplore/assets/InsertLeft.jsx

@@ -0,0 +1,18 @@
+function InsertLeft() {
+  return (
+    <svg width="28" height="21" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="fluent:document-one-page-20-regular" clipPath="url(#clip0_527_47401)">
+        <path id="Vector" d="M1.26984 0H6.34921C6.68599 0 7.00898 0.158035 7.24712 0.43934C7.48526 0.720644 7.61905 1.10218 7.61905 1.5V10.5C7.61905 10.8978 7.48526 11.2794 7.24712 11.5607C7.00898 11.842 6.68599 12 6.34921 12H1.26984C0.933058 12 0.610069 11.842 0.371928 11.5607C0.133786 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133786 0.720644 0.371928 0.43934C0.610069 0.158035 0.933058 0 1.26984 0ZM1.26984 0.75C1.10145 0.75 0.939955 0.829018 0.820885 0.96967C0.701814 1.11032 0.634921 1.30109 0.634921 1.5V10.5C0.634921 10.6989 0.701814 10.8897 0.820885 11.0303C0.939955 11.171 1.10145 11.25 1.26984 11.25H6.34921C6.5176 11.25 6.67909 11.171 6.79816 11.0303C6.91723 10.8897 6.98413 10.6989 6.98413 10.5V1.5C6.98413 1.30109 6.91723 1.11032 6.79816 0.96967C6.67909 0.829018 6.5176 0.75 6.34921 0.75H1.26984Z" fill="white" />
+        <path id="Vector_2" opacity="0.4" d="M9.6507 0H14.7301C15.0668 0 15.3898 0.158035 15.628 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.628 11.5607C15.3898 11.842 15.0668 12 14.7301 12H9.6507C9.31392 12 8.99093 11.842 8.75279 11.5607C8.51465 11.2794 8.38086 10.8978 8.38086 10.5V1.5C8.38086 1.10218 8.51465 0.720644 8.75279 0.43934C8.99093 0.158035 9.31392 0 9.6507 0ZM9.6507 0.75C9.48231 0.75 9.32081 0.829018 9.20174 0.96967C9.08267 1.11032 9.01578 1.30109 9.01578 1.5V10.5C9.01578 10.6989 9.08267 10.8897 9.20174 11.0303C9.32081 11.171 9.48231 11.25 9.6507 11.25H14.7301C14.8985 11.25 15.06 11.171 15.179 11.0303C15.2981 10.8897 15.365 10.6989 15.365 10.5V1.5C15.365 1.30109 15.2981 1.11032 15.179 0.96967C15.06 0.829018 14.8985 0.75 14.7301 0.75H9.6507Z" fill="white" />
+        <path id="Vector_3" d="M5.82826 6.11765C5.82826 6.16445 5.81101 6.20934 5.7803 6.24243C5.74959 6.27553 5.70794 6.29412 5.66451 6.29412H4.02709V8.05882C4.02709 8.10563 4.00984 8.15051 3.97913 8.18361C3.94842 8.2167 3.90677 8.23529 3.86335 8.23529C3.81992 8.23529 3.77827 8.2167 3.74756 8.18361C3.71686 8.15051 3.6996 8.10563 3.6996 8.05882V6.29412H2.06218C2.01875 6.29412 1.9771 6.27553 1.9464 6.24243C1.91569 6.20934 1.89844 6.16445 1.89844 6.11765C1.89844 6.07084 1.91569 6.02596 1.9464 5.99286C1.9771 5.95977 2.01875 5.94118 2.06218 5.94118H3.6996V4.17647C3.6996 4.12967 3.71686 4.08478 3.74756 4.05169C3.77827 4.01859 3.81992 4 3.86335 4C3.90677 4 3.94842 4.01859 3.97913 4.05169C4.00984 4.08478 4.02709 4.12967 4.02709 4.17647V5.94118H5.66451C5.70794 5.94118 5.74959 5.95977 5.7803 5.99286C5.81101 6.02596 5.82826 6.07084 5.82826 6.11765Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47401">
+          <rect width="16" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default InsertLeft

package/dist/es/src/TagExplore/assets/InsertRight.jsx

@@ -0,0 +1,18 @@
+function InsertRight() {
+  return (
+    <svg width="28" height="21" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_527_47406)">
+        <path opacity="0.4" d="M1.27 0H6.35C6.68682 0 7.00985 0.158035 7.24802 0.43934C7.4862 0.720644 7.62 1.10218 7.62 1.5V10.5C7.62 10.8978 7.4862 11.2794 7.24802 11.5607C7.00985 11.842 6.68682 12 6.35 12H1.27C0.933175 12 0.610146 11.842 0.371974 11.5607C0.133803 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133803 0.720644 0.371974 0.43934C0.610146 0.158035 0.933175 0 1.27 0ZM1.27 0.75C1.10159 0.75 0.940073 0.829018 0.820987 0.96967C0.701902 1.11032 0.635 1.30109 0.635 1.5V10.5C0.635 10.6989 0.701902 10.8897 0.820987 11.0303C0.940073 11.171 1.10159 11.25 1.27 11.25H6.35C6.51841 11.25 6.67993 11.171 6.79901 11.0303C6.9181 10.8897 6.985 10.6989 6.985 10.5V1.5C6.985 1.30109 6.9181 1.11032 6.79901 0.96967C6.67993 0.829018 6.51841 0.75 6.35 0.75H1.27Z" fill="white" />
+        <path d="M9.64988 0H14.7299C15.0667 0 15.3897 0.158035 15.6279 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.6279 11.5607C15.3897 11.842 15.0667 12 14.7299 12H9.64988C9.31306 12 8.99003 11.842 8.75186 11.5607C8.51369 11.2794 8.37988 10.8978 8.37988 10.5V1.5C8.37988 1.10218 8.51369 0.720644 8.75186 0.43934C8.99003 0.158035 9.31306 0 9.64988 0ZM9.64988 0.75C9.48147 0.75 9.31996 0.829018 9.20087 0.96967C9.08178 1.11032 9.01488 1.30109 9.01488 1.5V10.5C9.01488 10.6989 9.08178 10.8897 9.20087 11.0303C9.31996 11.171 9.48147 11.25 9.64988 11.25H14.7299C14.8983 11.25 15.0598 11.171 15.1789 11.0303C15.298 10.8897 15.3649 10.6989 15.3649 10.5V1.5C15.3649 1.30109 15.298 1.11032 15.1789 0.96967C15.0598 0.829018 14.8983 0.75 14.7299 0.75H9.64988Z" fill="white" />
+        <path d="M14.2096 6.10028C14.2096 6.1404 14.1924 6.17887 14.1616 6.20724C14.1309 6.23561 14.0893 6.25154 14.0458 6.25154H12.4082V7.76415C12.4082 7.80426 12.391 7.84274 12.3603 7.87111C12.3295 7.89947 12.2879 7.91541 12.2445 7.91541C12.201 7.91541 12.1594 7.89947 12.1287 7.87111C12.0979 7.84274 12.0807 7.80426 12.0807 7.76415V6.25154H10.4431C10.3996 6.25154 10.358 6.23561 10.3273 6.20724C10.2966 6.17887 10.2793 6.1404 10.2793 6.10028C10.2793 6.06017 10.2966 6.02169 10.3273 5.99332C10.358 5.96496 10.3996 5.94902 10.4431 5.94902H12.0807V4.43642C12.0807 4.3963 12.0979 4.35783 12.1287 4.32946C12.1594 4.30109 12.201 4.28516 12.2445 4.28516C12.2879 4.28516 12.3295 4.30109 12.3603 4.32946C12.391 4.35783 12.4082 4.3963 12.4082 4.43642V5.94902H14.0458C14.0893 5.94902 14.1309 5.96496 14.1616 5.99332C14.1924 6.02169 14.2096 6.06017 14.2096 6.10028Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47406">
+          <rect width="16" height="12" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default InsertRight

package/dist/es/src/TagExplore/assets/Left.jsx

@@ -0,0 +1,17 @@
+function Left() {
+  return (
+    <svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_527_47371)">
+        <path d="M1.57302 0H6.01747C6.31215 0 6.59477 0.144866 6.80314 0.402728C7.01152 0.660591 7.12858 1.01033 7.12858 1.375V9.625C7.12858 9.98967 7.01152 10.3394 6.80314 10.5973C6.59477 10.8551 6.31215 11 6.01747 11H1.57302C1.27834 11 0.995725 10.8551 0.787351 10.5973C0.578977 10.3394 0.461914 9.98967 0.461914 9.625V1.375C0.461914 1.01033 0.578977 0.660591 0.787351 0.402728C0.995725 0.144866 1.27834 0 1.57302 0ZM1.57302 0.6875C1.42568 0.6875 1.28437 0.759933 1.18019 0.888864C1.076 1.0178 1.01747 1.19266 1.01747 1.375V9.625C1.01747 9.80734 1.076 9.98221 1.18019 10.1111C1.28437 10.2401 1.42568 10.3125 1.57302 10.3125H6.01747C6.16481 10.3125 6.30612 10.2401 6.41031 10.1111C6.51449 9.98221 6.57302 9.80734 6.57302 9.625V1.375C6.57302 1.19266 6.51449 1.0178 6.41031 0.888864C6.30612 0.759933 6.16481 0.6875 6.01747 0.6875H1.57302Z" fill="white" />
+        <path opacity="0.4" d="M8.90603 0H13.3505C13.6452 0 13.9278 0.144866 14.1362 0.402728C14.3445 0.660591 14.4616 1.01033 14.4616 1.375V9.625C14.4616 9.98967 14.3445 10.3394 14.1362 10.5973C13.9278 10.8551 13.6452 11 13.3505 11H8.90603C8.61135 11 8.32873 10.8551 8.12036 10.5973C7.91198 10.3394 7.79492 9.98967 7.79492 9.625V1.375C7.79492 1.01033 7.91198 0.660591 8.12036 0.402728C8.32873 0.144866 8.61135 0 8.90603 0ZM8.90603 0.6875C8.75869 0.6875 8.61738 0.759933 8.5132 0.888864C8.40901 1.0178 8.35048 1.19266 8.35048 1.375V9.625C8.35048 9.80734 8.40901 9.98221 8.5132 10.1111C8.61738 10.2401 8.75869 10.3125 8.90603 10.3125H13.3505C13.4978 10.3125 13.6391 10.2401 13.7433 10.1111C13.8475 9.98221 13.906 9.80734 13.906 9.625V1.375C13.906 1.19266 13.8475 1.0178 13.7433 0.888864C13.6391 0.759933 13.4978 0.6875 13.3505 0.6875H8.90603Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47371">
+          <rect width="14" height="11" fill="white" transform="translate(0.461914)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default Left

package/dist/es/src/TagExplore/assets/Right.jsx

@@ -0,0 +1,17 @@
+function Right() {
+  return (
+    <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_527_47381)">
+        <path opacity="0.4" d="M1.11111 0H5.55555C5.85024 0 6.13285 0.144866 6.34123 0.402728C6.5496 0.660591 6.66667 1.01033 6.66667 1.375V9.625C6.66667 9.98967 6.5496 10.3394 6.34123 10.5973C6.13285 10.8551 5.85024 11 5.55555 11H1.11111C0.816426 11 0.533811 10.8551 0.325437 10.5973C0.117063 10.3394 0 9.98967 0 9.625V1.375C0 1.01033 0.117063 0.660591 0.325437 0.402728C0.533811 0.144866 0.816426 0 1.11111 0ZM1.11111 0.6875C0.963768 0.6875 0.822461 0.759933 0.718274 0.888864C0.614087 1.0178 0.555555 1.19266 0.555555 1.375V9.625C0.555555 9.80734 0.614087 9.98221 0.718274 10.1111C0.822461 10.2401 0.963768 10.3125 1.11111 10.3125H5.55555C5.7029 10.3125 5.8442 10.2401 5.94839 10.1111C6.05258 9.98221 6.11111 9.80734 6.11111 9.625V1.375C6.11111 1.19266 6.05258 1.0178 5.94839 0.888864C5.8442 0.759933 5.7029 0.6875 5.55555 0.6875H1.11111Z" fill="white" />
+        <path d="M8.44412 0H12.8886C13.1832 0 13.4659 0.144866 13.6742 0.402728C13.8826 0.660591 13.9997 1.01033 13.9997 1.375V9.625C13.9997 9.98967 13.8826 10.3394 13.6742 10.5973C13.4659 10.8551 13.1832 11 12.8886 11H8.44412C8.14943 11 7.86682 10.8551 7.65844 10.5973C7.45007 10.3394 7.33301 9.98967 7.33301 9.625V1.375C7.33301 1.01033 7.45007 0.660591 7.65844 0.402728C7.86682 0.144866 8.14943 0 8.44412 0ZM8.44412 0.6875C8.29678 0.6875 8.15547 0.759933 8.05128 0.888864C7.94709 1.0178 7.88856 1.19266 7.88856 1.375V9.625C7.88856 9.80734 7.94709 9.98221 8.05128 10.1111C8.15547 10.2401 8.29678 10.3125 8.44412 10.3125H12.8886C13.0359 10.3125 13.1772 10.2401 13.2814 10.1111C13.3856 9.98221 13.4441 9.80734 13.4441 9.625V1.375C13.4441 1.19266 13.3856 1.0178 13.2814 0.888864C13.1772 0.759933 13.0359 0.6875 12.8886 0.6875H8.44412Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_527_47381">
+          <rect width="14" height="11" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default Right

package/dist/es/src/TagExplore/assets/insert_left.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fluent:document-one-page-20-regular" clip-path="url(#clip0_527_47401)">
+<path id="Vector" d="M1.26984 0H6.34921C6.68599 0 7.00898 0.158035 7.24712 0.43934C7.48526 0.720644 7.61905 1.10218 7.61905 1.5V10.5C7.61905 10.8978 7.48526 11.2794 7.24712 11.5607C7.00898 11.842 6.68599 12 6.34921 12H1.26984C0.933058 12 0.610069 11.842 0.371928 11.5607C0.133786 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133786 0.720644 0.371928 0.43934C0.610069 0.158035 0.933058 0 1.26984 0ZM1.26984 0.75C1.10145 0.75 0.939955 0.829018 0.820885 0.96967C0.701814 1.11032 0.634921 1.30109 0.634921 1.5V10.5C0.634921 10.6989 0.701814 10.8897 0.820885 11.0303C0.939955 11.171 1.10145 11.25 1.26984 11.25H6.34921C6.5176 11.25 6.67909 11.171 6.79816 11.0303C6.91723 10.8897 6.98413 10.6989 6.98413 10.5V1.5C6.98413 1.30109 6.91723 1.11032 6.79816 0.96967C6.67909 0.829018 6.5176 0.75 6.34921 0.75H1.26984Z" fill="white"/>
+<path id="Vector_2" opacity="0.4" d="M9.6507 0H14.7301C15.0668 0 15.3898 0.158035 15.628 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.628 11.5607C15.3898 11.842 15.0668 12 14.7301 12H9.6507C9.31392 12 8.99093 11.842 8.75279 11.5607C8.51465 11.2794 8.38086 10.8978 8.38086 10.5V1.5C8.38086 1.10218 8.51465 0.720644 8.75279 0.43934C8.99093 0.158035 9.31392 0 9.6507 0ZM9.6507 0.75C9.48231 0.75 9.32081 0.829018 9.20174 0.96967C9.08267 1.11032 9.01578 1.30109 9.01578 1.5V10.5C9.01578 10.6989 9.08267 10.8897 9.20174 11.0303C9.32081 11.171 9.48231 11.25 9.6507 11.25H14.7301C14.8985 11.25 15.06 11.171 15.179 11.0303C15.2981 10.8897 15.365 10.6989 15.365 10.5V1.5C15.365 1.30109 15.2981 1.11032 15.179 0.96967C15.06 0.829018 14.8985 0.75 14.7301 0.75H9.6507Z" fill="white"/>
+<path id="Vector_3" d="M5.82826 6.11765C5.82826 6.16445 5.81101 6.20934 5.7803 6.24243C5.74959 6.27553 5.70794 6.29412 5.66451 6.29412H4.02709V8.05882C4.02709 8.10563 4.00984 8.15051 3.97913 8.18361C3.94842 8.2167 3.90677 8.23529 3.86335 8.23529C3.81992 8.23529 3.77827 8.2167 3.74756 8.18361C3.71686 8.15051 3.6996 8.10563 3.6996 8.05882V6.29412H2.06218C2.01875 6.29412 1.9771 6.27553 1.9464 6.24243C1.91569 6.20934 1.89844 6.16445 1.89844 6.11765C1.89844 6.07084 1.91569 6.02596 1.9464 5.99286C1.9771 5.95977 2.01875 5.94118 2.06218 5.94118H3.6996V4.17647C3.6996 4.12967 3.71686 4.08478 3.74756 4.05169C3.77827 4.01859 3.81992 4 3.86335 4C3.90677 4 3.94842 4.01859 3.97913 4.05169C4.00984 4.08478 4.02709 4.12967 4.02709 4.17647V5.94118H5.66451C5.70794 5.94118 5.74959 5.95977 5.7803 5.99286C5.81101 6.02596 5.82826 6.07084 5.82826 6.11765Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47401">
+<rect width="16" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/insert_right.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_527_47406)">
+<path opacity="0.4" d="M1.27 0H6.35C6.68682 0 7.00985 0.158035 7.24802 0.43934C7.4862 0.720644 7.62 1.10218 7.62 1.5V10.5C7.62 10.8978 7.4862 11.2794 7.24802 11.5607C7.00985 11.842 6.68682 12 6.35 12H1.27C0.933175 12 0.610146 11.842 0.371974 11.5607C0.133803 11.2794 0 10.8978 0 10.5V1.5C0 1.10218 0.133803 0.720644 0.371974 0.43934C0.610146 0.158035 0.933175 0 1.27 0ZM1.27 0.75C1.10159 0.75 0.940073 0.829018 0.820987 0.96967C0.701902 1.11032 0.635 1.30109 0.635 1.5V10.5C0.635 10.6989 0.701902 10.8897 0.820987 11.0303C0.940073 11.171 1.10159 11.25 1.27 11.25H6.35C6.51841 11.25 6.67993 11.171 6.79901 11.0303C6.9181 10.8897 6.985 10.6989 6.985 10.5V1.5C6.985 1.30109 6.9181 1.11032 6.79901 0.96967C6.67993 0.829018 6.51841 0.75 6.35 0.75H1.27Z" fill="white"/>
+<path d="M9.64988 0H14.7299C15.0667 0 15.3897 0.158035 15.6279 0.43934C15.8661 0.720644 15.9999 1.10218 15.9999 1.5V10.5C15.9999 10.8978 15.8661 11.2794 15.6279 11.5607C15.3897 11.842 15.0667 12 14.7299 12H9.64988C9.31306 12 8.99003 11.842 8.75186 11.5607C8.51369 11.2794 8.37988 10.8978 8.37988 10.5V1.5C8.37988 1.10218 8.51369 0.720644 8.75186 0.43934C8.99003 0.158035 9.31306 0 9.64988 0ZM9.64988 0.75C9.48147 0.75 9.31996 0.829018 9.20087 0.96967C9.08178 1.11032 9.01488 1.30109 9.01488 1.5V10.5C9.01488 10.6989 9.08178 10.8897 9.20087 11.0303C9.31996 11.171 9.48147 11.25 9.64988 11.25H14.7299C14.8983 11.25 15.0598 11.171 15.1789 11.0303C15.298 10.8897 15.3649 10.6989 15.3649 10.5V1.5C15.3649 1.30109 15.298 1.11032 15.1789 0.96967C15.0598 0.829018 14.8983 0.75 14.7299 0.75H9.64988Z" fill="white"/>
+<path d="M14.2096 6.10028C14.2096 6.1404 14.1924 6.17887 14.1616 6.20724C14.1309 6.23561 14.0893 6.25154 14.0458 6.25154H12.4082V7.76415C12.4082 7.80426 12.391 7.84274 12.3603 7.87111C12.3295 7.89947 12.2879 7.91541 12.2445 7.91541C12.201 7.91541 12.1594 7.89947 12.1287 7.87111C12.0979 7.84274 12.0807 7.80426 12.0807 7.76415V6.25154H10.4431C10.3996 6.25154 10.358 6.23561 10.3273 6.20724C10.2966 6.17887 10.2793 6.1404 10.2793 6.10028C10.2793 6.06017 10.2966 6.02169 10.3273 5.99332C10.358 5.96496 10.3996 5.94902 10.4431 5.94902H12.0807V4.43642C12.0807 4.3963 12.0979 4.35783 12.1287 4.32946C12.1594 4.30109 12.201 4.28516 12.2445 4.28516C12.2879 4.28516 12.3295 4.30109 12.3603 4.32946C12.391 4.35783 12.4082 4.3963 12.4082 4.43642V5.94902H14.0458C14.0893 5.94902 14.1309 5.96496 14.1616 5.99332C14.1924 6.02169 14.2096 6.06017 14.2096 6.10028Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47406">
+<rect width="16" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/left.svg

@@ -0,0 +1,11 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_527_47371)">
+<path d="M1.57302 0H6.01747C6.31215 0 6.59477 0.144866 6.80314 0.402728C7.01152 0.660591 7.12858 1.01033 7.12858 1.375V9.625C7.12858 9.98967 7.01152 10.3394 6.80314 10.5973C6.59477 10.8551 6.31215 11 6.01747 11H1.57302C1.27834 11 0.995725 10.8551 0.787351 10.5973C0.578977 10.3394 0.461914 9.98967 0.461914 9.625V1.375C0.461914 1.01033 0.578977 0.660591 0.787351 0.402728C0.995725 0.144866 1.27834 0 1.57302 0ZM1.57302 0.6875C1.42568 0.6875 1.28437 0.759933 1.18019 0.888864C1.076 1.0178 1.01747 1.19266 1.01747 1.375V9.625C1.01747 9.80734 1.076 9.98221 1.18019 10.1111C1.28437 10.2401 1.42568 10.3125 1.57302 10.3125H6.01747C6.16481 10.3125 6.30612 10.2401 6.41031 10.1111C6.51449 9.98221 6.57302 9.80734 6.57302 9.625V1.375C6.57302 1.19266 6.51449 1.0178 6.41031 0.888864C6.30612 0.759933 6.16481 0.6875 6.01747 0.6875H1.57302Z" fill="white"/>
+<path opacity="0.4" d="M8.90603 0H13.3505C13.6452 0 13.9278 0.144866 14.1362 0.402728C14.3445 0.660591 14.4616 1.01033 14.4616 1.375V9.625C14.4616 9.98967 14.3445 10.3394 14.1362 10.5973C13.9278 10.8551 13.6452 11 13.3505 11H8.90603C8.61135 11 8.32873 10.8551 8.12036 10.5973C7.91198 10.3394 7.79492 9.98967 7.79492 9.625V1.375C7.79492 1.01033 7.91198 0.660591 8.12036 0.402728C8.32873 0.144866 8.61135 0 8.90603 0ZM8.90603 0.6875C8.75869 0.6875 8.61738 0.759933 8.5132 0.888864C8.40901 1.0178 8.35048 1.19266 8.35048 1.375V9.625C8.35048 9.80734 8.40901 9.98221 8.5132 10.1111C8.61738 10.2401 8.75869 10.3125 8.90603 10.3125H13.3505C13.4978 10.3125 13.6391 10.2401 13.7433 10.1111C13.8475 9.98221 13.906 9.80734 13.906 9.625V1.375C13.906 1.19266 13.8475 1.0178 13.7433 0.888864C13.6391 0.759933 13.4978 0.6875 13.3505 0.6875H8.90603Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47371">
+<rect width="14" height="11" fill="white" transform="translate(0.461914)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/es/src/TagExplore/assets/right.svg

@@ -0,0 +1,11 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_527_47381)">
+<path opacity="0.4" d="M1.11111 0H5.55555C5.85024 0 6.13285 0.144866 6.34123 0.402728C6.5496 0.660591 6.66667 1.01033 6.66667 1.375V9.625C6.66667 9.98967 6.5496 10.3394 6.34123 10.5973C6.13285 10.8551 5.85024 11 5.55555 11H1.11111C0.816426 11 0.533811 10.8551 0.325437 10.5973C0.117063 10.3394 0 9.98967 0 9.625V1.375C0 1.01033 0.117063 0.660591 0.325437 0.402728C0.533811 0.144866 0.816426 0 1.11111 0ZM1.11111 0.6875C0.963768 0.6875 0.822461 0.759933 0.718274 0.888864C0.614087 1.0178 0.555555 1.19266 0.555555 1.375V9.625C0.555555 9.80734 0.614087 9.98221 0.718274 10.1111C0.822461 10.2401 0.963768 10.3125 1.11111 10.3125H5.55555C5.7029 10.3125 5.8442 10.2401 5.94839 10.1111C6.05258 9.98221 6.11111 9.80734 6.11111 9.625V1.375C6.11111 1.19266 6.05258 1.0178 5.94839 0.888864C5.8442 0.759933 5.7029 0.6875 5.55555 0.6875H1.11111Z" fill="white"/>
+<path d="M8.44412 0H12.8886C13.1832 0 13.4659 0.144866 13.6742 0.402728C13.8826 0.660591 13.9997 1.01033 13.9997 1.375V9.625C13.9997 9.98967 13.8826 10.3394 13.6742 10.5973C13.4659 10.8551 13.1832 11 12.8886 11H8.44412C8.14943 11 7.86682 10.8551 7.65844 10.5973C7.45007 10.3394 7.33301 9.98967 7.33301 9.625V1.375C7.33301 1.01033 7.45007 0.660591 7.65844 0.402728C7.86682 0.144866 8.14943 0 8.44412 0ZM8.44412 0.6875C8.29678 0.6875 8.15547 0.759933 8.05128 0.888864C7.94709 1.0178 7.88856 1.19266 7.88856 1.375V9.625C7.88856 9.80734 7.94709 9.98221 8.05128 10.1111C8.15547 10.2401 8.29678 10.3125 8.44412 10.3125H12.8886C13.0359 10.3125 13.1772 10.2401 13.2814 10.1111C13.3856 9.98221 13.4441 9.80734 13.4441 9.625V1.375C13.4441 1.19266 13.3856 1.0178 13.2814 0.888864C13.1772 0.759933 13.0359 0.6875 12.8886 0.6875H8.44412Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_527_47381">
+<rect width="14" height="11" fill="white"/>
+</clipPath>
+</defs>
+</svg>