poe-svelte-ui-lib 1.1.21 → 1.2.0

package/dist/Tabs/TabsProps.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import { updateProperty, type ISelectOption, type ITabsProps, type UIComponent } from '../types'
+  import * as UI from '..'
+  import { optionsStore } from '../options'
+  import { ICONS } from '../icons'
+  import Modal from '../Modal.svelte'
+  import Button from '../Button/Button.svelte'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
+  import ButtonAdd from '../libIcons/ButtonAdd.svelte'
+  import ButtonDelete from '../libIcons/ButtonDelete.svelte'
+  import { twMerge } from 'tailwind-merge'
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<ITabsProps> }
+    onPropertyChange: (value: string | object, name?: string) => void
+    forConstructor?: boolean
+  }>()
+
+  let showIconLib = $state(false)
+  let tabIcon = $state({ index: 0, isModalOpen: false })
+
+  const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
+
+  const initialAlign = $derived(
+    $optionsStore.JUSTIFY_ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('justify-'))),
+    ),
+  )
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
+    ),
+  )
+
+  const initialPosition = $derived(
+    $optionsStore.ICON_TEXT_POSITION_OPTIONS.find((c) =>
+      (c.value as string).includes(
+        component.properties.items
+          .find((item: ISelectOption) => item.class?.includes('flex-'))
+          .class.split(' ')
+          .find((cls: string) => cls.startsWith('flex-')),
+      ),
+    ),
+  )
+
+  const initialWidth = $derived(() => {
+    let width = component.properties.items.find((item: ISelectOption) => item.class?.split(' ').find((cls: string) => cls.startsWith('w-')))
+    if (!width) {
+      return 1
+    } else if (width.class.includes('w-auto')) return 1
+    else return 2
+  })
+
+  const handleImageUpload = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    if (!input.files || input.files.length === 0) return
+
+    const file = input.files[0]
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      const base64String = e.target?.result as string
+      updateProperty('image', base64String, component, onPropertyChange)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  let currentImage = $derived(component.properties.image ?? '')
+</script>
+
+{#if forConstructor}
+  <div class="flex items-center justify-center gap-8">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.JUSTIFY_ALIGN_OPTIONS}
+        onUpdate={(option) => updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)}
+      />
+
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.colors') }}
+        type="buttons"
+        options={$optionsStore.COLOR_OPTIONS.slice(1)}
+        value={initialColor}
+        onUpdate={(option) => {
+          updateProperty('wrapperClass', twMerge(component.properties.wrapperClass, option.value), component, onPropertyChange)
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, `text-${option.value?.slice(3)}-500`)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        wrapperClass="h-14"
+        label={{ name: $t('constructor.props.icon.text.position') }}
+        type="buttons"
+        options={$optionsStore.ICON_TEXT_POSITION_OPTIONS}
+        value={initialPosition}
+        onUpdate={(option) => {
+          component.properties.items.forEach((_item: any, index: number) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['class'] = twMerge(items[index].class, option.value)
+            updateProperty('items', items, component, onPropertyChange)
+          })
+        }}
+      />
+      <UI.Switch
+        label={{
+          name: $t('constructor.props.widthMode'),
+          captionLeft: $t('constructor.props.height.small'),
+          captionRight: $t('constructor.props.equal'),
+        }}
+        value={initialWidth()}
+        onChange={(value) => {
+          if (value === 2) {
+            component.properties.items.forEach((_item: any, index: number) => {
+              let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, `w-[${tabWidth}px]`)
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          } else {
+            component.properties.items.forEach((_item: any, index: number) => {
+              const items = [...(component.properties?.items || [])]
+              items[index]['class'] = twMerge(items[index].class, 'w-auto')
+              updateProperty('items', items, component, onPropertyChange)
+            })
+          }
+          console.log(component.properties?.items)
+        }}
+      />
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$t('constructor.props.options.title')}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          let tabWidth = Math.max(...Array.from(document.body.querySelectorAll('.tab')).map((item) => (item as HTMLElement).offsetWidth))
+          const newItem: { name: string; icon: string; class: string } = {
+            name: `Tab ${component.properties?.items.length + 1}`,
+            class: `w-${initialWidth() === 2 ? `[${tabWidth}px]` : 'auto'} text-${initialColor?.value.slice(3)}-500 ${initialPosition?.value}`,
+            icon: '',
+          }
+          const items = [...(component.properties?.items || []), newItem]
+          updateProperty('items', items, component, onPropertyChange)
+        }}
+      />
+    </div>
+
+    {#each component.properties.items || [] as tab, index}
+      <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Input
+          label={{ name: $t('constructor.props.optionname') }}
+          wrapperClass="w-5/10"
+          value={tab.name}
+          onUpdate={(value) => {
+            const items = [...(component.properties?.items || [])]
+            items[index]['name'] = value
+            updateProperty('items', items, component, onPropertyChange)
+          }}
+        />
+        <div class="relative mt-5 flex w-3/10 gap-2">
+          <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (tabIcon = { index: index, isModalOpen: true })} />
+
+          {#if tab.icon}
+            <Button
+              wrapperClass="w-8.5 "
+              componentClass="p-0.5 bg-red"
+              content={{ icon: CrossIcon }}
+              onClick={() => {
+                const items = [...(component.properties?.items || [])]
+                items[index]['icon'] = ''
+                updateProperty('items', items, component, onPropertyChange)
+              }}
+            />
+          {/if}
+        </div>
+
+        {#if component.properties.items.length > 1}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const items = [...(component.properties?.items || [])]
+              items.splice(index, 1)
+              updateProperty('items', items, component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    {/each}
+    {#if tabIcon.isModalOpen}
+      <Modal bind:isOpen={tabIcon.isModalOpen} wrapperClass="w-130">
+        {#snippet main()}
+          <div class="grid grid-cols-3">
+            {#each ICONS as category}
+              <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                <div class="grid grid-cols-3 place-items-center gap-2">
+                  {#each category[1] as icon}
+                    <button
+                      class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                      onclick={() => {
+                        const items = [...(component.properties?.items || [])]
+                        items[tabIcon.index]['icon'] = icon as string
+                        updateProperty('items', items, component, onPropertyChange)
+                      }}
+                    >
+                      {@html icon}
+                    </button>{/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        {/snippet}
+      </Modal>
+    {/if}
+  </div>
+{:else}
+  <div class="flex items-center justify-center gap-8">
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.id') }}
+        value={component.properties.id}
+        onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
+      />
+      <UI.Select
+        label={{ name: $t('constructor.props.type') }}
+        type="buttons"
+        value={initialType}
+        options={$optionsStore.ACCORDION_TYPE_OPTIONS}
+        onUpdate={(item) => updateProperty('outline', item.value as boolean, component, onPropertyChange)}
+      />
+      <div class="flex w-full gap-4">
+        <UI.Input
+          label={{ name: $t('constructor.props.size.height') }}
+          value={component.properties.size.height}
+          onUpdate={(value) => updateProperty('size.height', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+        <UI.Input
+          label={{ name: $t('constructor.props.size.width') }}
+          value={component.properties.size.width}
+          onUpdate={(value) => updateProperty('size.width', value as number, component, onPropertyChange)}
+          number={{ minNum: 1, maxNum: 1000, step: 1 }}
+          type="number"
+        />
+      </div>
+
+      <UI.Switch
+        label={{ name: $t('constructor.props.open') }}
+        value={component.properties.isOpen ? 2 : 1}
+        onChange={(value) => updateProperty('isOpen', value === 2, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Input
+        label={{ name: $t('constructor.props.wrapperclass') }}
+        value={component.properties.wrapperClass}
+        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+      />
+      <div class="relative mt-5 flex w-full gap-2">
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
+        {#if showIconLib}
+          <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
+            {#snippet main()}
+              <div class="grid grid-cols-3">
+                {#each ICONS as category}
+                  <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                    <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                    <div class="grid grid-cols-3 place-items-center gap-2">
+                      {#each category[1] as icon}
+                        <button
+                          class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                          onclick={() => {
+                            updateProperty('label.icon', icon as string, component, onPropertyChange)
+                          }}
+                        >
+                          {@html icon}
+                        </button>{/each}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/snippet}
+          </Modal>
+        {/if}
+        {#if component.properties.label.icon}
+          <Button
+            wrapperClass="w-8.5 "
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('label.icon', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+
+      <UI.Input
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.label.name}
+        onUpdate={(value) => updateProperty('label.name', value as string, component, onPropertyChange)}
+      />
+      <UI.Input
+        label={{ name: $t('constructor.props.label.class') }}
+        value={component.properties.label.class}
+        onUpdate={(value) => updateProperty('label.class', value as string, component, onPropertyChange)}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col items-center gap-2 px-2">
+      <div class="flex">
+        <UI.FileAttach
+          type="image"
+          label={{ name: $t('constructor.props.image') }}
+          accept="image/png, image/jpeg, image/webp"
+          bind:currentImage
+          onChange={handleImageUpload}
+        />
+        {#if currentImage}
+          <Button
+            wrapperClass="w-8.5 mt-6"
+            componentClass="p-0.5 bg-red"
+            content={{ icon: CrossIcon }}
+            onClick={() => {
+              updateProperty('image', '', component, onPropertyChange)
+            }}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/Tabs/TabsProps.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ITabsProps, type UIComponent } from '../types';
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<ITabsProps>;
+    };
+    onPropertyChange: (value: string | object, name?: string) => void;
+    forConstructor?: boolean;
+};
+declare const TabsProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabsProps = ReturnType<typeof TabsProps>;
+export default TabsProps;

package/dist/TextField/TextFieldProps.svelte

@@ -115,11 +115,10 @@
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
       <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
       />
-
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.textcolors') }}
@@ -130,11 +129,6 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        label={{ name: $t('constructor.props.label') }}
-        value={component.properties.content.name}
-        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
-      />
       <UI.Select
         label={{ name: $t('constructor.props.size') }}
         type="buttons"

package/dist/{Accordion/icons.js → icons.js}

@@ -7,36 +7,24 @@ export const ICONS = [
     ["common", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3.2c0-1.12 0-1.68.218-2.11c.192-.376.498-.682.874-.874c.428-.218.988-.218 2.11-.218h.6c1.12 0 1.68 0 2.11.218c.376.192.682.498.874.874c.218.428.218.988.218 2.11v.6c0 1.12 0 1.68-.218 2.11a2 2 0 0 1-.874.874c-.428.218-.988.218-2.11.218h-.6c-1.12 0-1.68 0-2.11-.218a2 2 0 0 1-.874-.874C9 5.482 9 4.922 9 3.8zM12.2 1h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-.6c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422a17 17 0 0 1-.024-1.23v-.6c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085C11.253 1 11.626 1 12.2 1M.218 4.09C0 4.518 0 5.078 0 6.2v6.6c0 1.12 0 1.68.218 2.11c.192.376.498.682.874.874c.428.218.988.218 2.11.218h6.6c1.12 0 1.68 0 2.11-.218c.376-.192.682-.498.874-.874c.218-.428.218-.988.218-2.11v-.6c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-2.8v-2.8c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-.6c-1.12 0-1.68 0-2.11.218a2 2 0 0 0-.874.874zm5.78 2.11V9h-5V6.2c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085c.283-.023.656-.024 1.23-.024h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23zm-5 3.8h5v5h-2.8c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422C1 13.749 1 13.376 1 12.802v-2.8zm6 0h2.8c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-2.8v-5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n  ><path\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-width=\"1.5\"\r\n    d=\"M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78\"\r\n  /></svg\r\n>\r\n",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n>\r\n  <path\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-width=\"1.5\"\r\n    d=\"M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 2c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C1.302.001 1.534.001 2 .001s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 2.697 0 2.465 0 2m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 2.389 1 2.24 1 2s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354c-.004.001.021-.007.128-.012C1.611 1 1.759 1 2 1s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354c-.001-.004.007.021.012.128C3 1.611 3 1.759 3 2s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354c.004-.001-.021.007-.128.012C2.389 3 2.241 3 2 3M0 8c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06c.191-.051.423-.051.888-.051s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 8.697 0 8.465 0 8m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 8.389 1 8.241 1 8s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354s.028-.007.128-.012C1.611 7 1.759 7 2 7s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354s.007.028.012.128C3 7.611 3 7.759 3 8s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354s-.028.007-.128.012C2.389 9 2.241 9 2 9M.051 13.1C0 13.291 0 13.523 0 13.988s0 .698.051.888a1.5 1.5 0 0 0 1.06 1.06c.191.051.423.051.888.051s.697 0 .888-.051a1.5 1.5 0 0 0 1.06-1.06c.051-.191.051-.423.051-.888s0-.698-.05-.888a1.5 1.5 0 0 0-1.06-1.06c-.192-.051-.424-.051-.889-.051s-.697 0-.888.051a1.5 1.5 0 0 0-1.06 1.06m1.45 1.88c.112.005.26.005.501.005s.39 0 .501-.005a.6.6 0 0 0 .128-.012a.5.5 0 0 0 .353-.354c0-.003.007-.034.012-.128c.005-.112.005-.26.005-.5s0-.39-.005-.502c-.005-.1-.012-.128-.012-.128a.5.5 0 0 0-.353-.353s-.028-.007-.128-.011c-.112-.005-.26-.006-.501-.006s-.389 0-.501.006a1 1 0 0 0-.128.011a.5.5 0 0 0-.353.354s-.007.028-.012.128c-.005.112-.005.26-.005.501s0 .39.005.501c.005.107.013.132.012.128a.5.5 0 0 0 .354.354a1 1 0 0 0 .128.012z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M6.5 2a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM6 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m.5 5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 11.9a6.005 6.005 0 0 1-9.48-4.89c0-3.31 2.69-6 6-6a6.005 6.005 0 0 1 4.89 9.48l2.82 2.82a.996.996 0 0 1 0 1.41a.994.994 0 0 1-1.41 0zm1.52-4.89c0 2.76-2.24 5-5 5s-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M6.5 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5m3.5.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.12 0h-.241c-.402 0-.735 0-1.01.022c-.281.023-.539.072-.782.196a2 2 0 0 0-.874.874c-.124.243-.173.501-.196.782c-.022.271-.022.603-.022 1.01v.121h-3.5a.5.5 0 0 0 0 1h.54l.597 7.16c.063.758.113 1.36.192 1.84c.08.492.196.9.41 1.27c.354.604.88 1.09 1.51 1.39c.386.184.803.265 1.3.304c.487.038 1.09.038 1.85.038h.21c.76 0 1.36 0 1.85-.038c.497-.039.913-.12 1.3-.304a3.5 3.5 0 0 0 1.51-1.39c.216-.368.33-.777.41-1.27c.08-.48.129-1.08.193-1.84l.597-7.16h.54a.5.5 0 0 0 0-1h-3.5v-.12c0-.403 0-.736-.022-1.01c-.023-.282-.072-.54-.196-.783a2 2 0 0 0-.874-.874C9.669.094 9.41.045 9.13.022C8.859 0 8.527 0 8.12 0M3.04 4l.588 7.06c.065.784.112 1.34.184 1.78c.07.432.159.705.287.924a2.5 2.5 0 0 0 1.08.992c.229.11.509.175.945.21c.442.035 1 .035 1.79.035h.167c.787 0 1.35 0 1.79-.035c.436-.034.716-.1.945-.21a2.5 2.5 0 0 0 1.08-.992c.128-.219.217-.493.288-.924c.071-.438.118-.997.184-1.78L12.956 4h-9.91zM6 3h4v-.1c0-.428 0-.719-.019-.944c-.018-.219-.05-.331-.09-.41a1 1 0 0 0-.437-.437c-.078-.04-.19-.072-.41-.09A13 13 0 0 0 8.1 1h-.2c-.428 0-.719 0-.944.019c-.219.018-.331.05-.41.09a1 1 0 0 0-.437.437c-.04.078-.072.19-.09.41C6 2.181 6 2.472 6 2.9z\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 9a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5A.75.75 0 0 1 8 9m-1 3a1 1 0 1 1 2 0a1 1 0 0 1-2 0\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m.325 11.6l5.02-9.99c1.1-2.19 4.21-2.19 5.31 0l5.02 9.99c1 2-.436 4.36-2.66 4.36h-10c-2.22 0-3.66-2.36-2.66-4.36zm.894.449l5.02-9.99c.733-1.46 2.79-1.46 3.52 0l5.02 9.99c.676 1.35-.301 2.91-1.76 2.91h-10c-1.46 0-2.44-1.57-1.76-2.91z\" clip-rule=\"evenodd\"/></svg>"
         ]],
-    ["control", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z\"/><path fill=\"currentColor\" d=\"M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z\"/></svg>"
-        ]],
-    ["electronic", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z\"/><path fill=\"currentColor\" d=\"M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m2.56 3.42l-1.55 9c-.045.263.165.577.546.577h11.3a.54.54 0 0 0 .546-.423l1.55-9c.045-.263-.165-.577-.546-.577h-11.3a.54.54 0 0 0-.546.423M.02 12.25C-.138 13.164.592 14 1.55 14h11.3c.759 0 1.41-.53 1.53-1.25l1.55-9C16.088 2.836 15.358 2 14.4 2H3.1c-.759 0-1.41.53-1.53 1.25z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m7 11l.167-1h5L12 11zM5.09 4.53a.746.746 0 0 0-1.05-.117a.746.746 0 0 0-.117 1.05l1.54 1.93l-2.44 2.03a.754.754 0 0 0-.096 1.06a.754.754 0 0 0 1.06.096l3-2.5a.745.745 0 0 0 .106-1.04l-2-2.5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z\" clip-rule=\"evenodd\"/></svg>"
-        ]],
-    ["image", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z\" clip-rule=\"evenodd\"/></svg>"
-        ]],
     ["info", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"m14.9 11.1l-.062-.07a4 4 0 0 1-.201-.255l-.16-.233a7 7 0 0 1-.48-.865c-.47-1-.952-2.55-.952-4.72a4.97 4.97 0 0 0-1.43-3.49a5 5 0 0 0-3.46-1.5a4.97 4.97 0 0 0-3.52 1.35a5 5 0 0 0-1.58 3.43l-.005.217c0 2.17-.482 3.73-.952 4.72c-.236.5-.47.864-.64 1.1l-.06.082l-.171.208l-.032.035a.5.5 0 0 0 .354.852h13a.498.498 0 0 0 .354-.852zM4 5.36l.005-.404c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0c.75.75 1.17 1.77 1.17 2.83c0 2.33.518 4.02 1.05 5.15c.157.334.314.617.46.85h-11a9 9 0 0 0 .46-.85c.498-1.06.987-2.62 1.04-4.75zm6.4 9.4a.497.497 0 0 0-.1-.7a.5.5 0 0 0-.7.1a1.995 1.995 0 0 1-2.495.589a2 2 0 0 1-.705-.59a.501.501 0 0 0-.895.23a.5.5 0 0 0 .095.37a3 3 0 0 0 2.4 1.2a3 3 0 0 0 2.4-1.2z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .276.447l3 1.5a.5.5 0 0 0 .447-.895l-2.72-1.36v-4.19z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8M1 8c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7s-7-3.13-7-7\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M.75.75v22.5h22.5\"/><path d=\"M14.15 17.358a5.5 5.5 0 0 0 1.487 1.623l.713.519m-12.6 0l.713-.519A5.39 5.39 0 0 0 6.7 14.939l.4-6.979a2.92 2.92 0 0 1 2.95-2.71h.137\"/><path d=\"m9.15 19.5l.713-.519a5.39 5.39 0 0 0 2.237-4.042l.4-6.979a2.92 2.92 0 0 1 2.95-2.71a2.92 2.92 0 0 1 2.955 2.71l.4 6.979a5.39 5.39 0 0 0 2.232 4.042l.713.519\"/></g></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 16c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8m0-1c3.87 0 7-3.13 7-7s-3.13-7-7-7s-7 3.13-7 7s3.13 7 7 7\" clip-rule=\"evenodd\"/></svg>"
         ]],
+    ["media", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z\"/><path fill=\"currentColor\" d=\"M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z\" clip-rule=\"evenodd\"/></svg>"
+        ]],
     ["network", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from\r\n    Huge Icons by Hugeicons - undefined -->\r\n    <g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n        <path stroke-linecap=\"round\" d=\"M12 11v9\" />\r\n        <path d=\"M14 9a2 2 0 1 1-4 0a2 2 0 0 1 4 0Z\" />\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            d=\"M16.959 6C17.619 6.87 18 7.898 18 9s-.381 2.13-1.041 3M7.04 6C6.381 6.87 6 7.898 6 9s.381 2.13 1.041 3m13.275-8C21.38 5.43 22 7.15 22 9s-.62 3.57-1.684 5M3.684 4C2.62 5.43 2 7.15 2 9s.62 3.57 1.684 5\" />\r\n    </g>\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M0 6c0-3.31 2.69-6 6-6c2.62 0 4.84 1.68 5.66 4.01q.166-.014.337-.014c2.21 0 4 1.79 4 4c0 1.63-.97 3.03-2.36 3.65c-.312.14-.636-.11-.636-.452c0-.222.142-.415.34-.514a2.999 2.999 0 0 0-1.931-5.622a.5.5 0 0 1-.581-.36a5.002 5.002 0 1 0-8.942 4.15a.6.6 0 0 1 .112.346c0 .495-.566.732-.857.332a5.97 5.97 0 0 1-1.14-3.52z\"/><path fill=\"currentColor\" d=\"M5 15.5V8.71L3.85 9.86a.5.5 0 0 1-.707-.707l2-2a.5.5 0 0 1 .35-.147h.006a.5.5 0 0 1 .351.146l2 2a.5.5 0 0 1-.707.707l-1.15-1.15v6.79a.5.5 0 0 1-1 0zM10.5 7a.5.5 0 0 1 .5.5v6.79l1.15-1.15a.5.5 0 0 1 .707.707l-2 2a.5.5 0 0 1-.351.146H10.5a.5.5 0 0 1-.35-.147l-2-2a.5.5 0 0 1 .707-.707l1.15 1.15V7.5a.5.5 0 0 1 .5-.5z\"/></svg>",
@@ -46,16 +34,28 @@ export const ICONS = [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15 3a2.996 2.996 0 0 1-5.34 1.87L5.83 7c.111.313.171.649.171 1s-.06.687-.171 1l3.83 2.13A2.996 2.996 0 0 1 15 13c0 1.66-1.34 3-3 3a2.996 2.996 0 0 1-2.829-4l-3.83-2.13A2.996 2.996 0 0 1 .001 8a2.996 2.996 0 0 1 5.34-1.87L9.171 4A2.996 2.996 0 0 1 12 0c1.66 0 3 1.34 3 3m-1 0a2 2 0 1 1-4.001.001A2 2 0 0 1 14 3M5 8a2 2 0 1 1-4.001.001A2 2 0 0 1 5 8m7 7a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 15\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M.9 6.55C2.52 4.39 5.1 3 8 3s5.48 1.39 7.1 3.55a.5.5 0 0 0 .8-.6A9.85 9.85 0 0 0 8 2C4.77 2 1.9 3.55.1 5.95a.5.5 0 0 0 .799.6z\"/><path fill=\"currentColor\" d=\"M2.9 8.55A6.36 6.36 0 0 1 8 6c2.09 0 3.94 1 5.1 2.55a.5.5 0 0 0 .8-.6A7.36 7.36 0 0 0 8 5C5.59 5 3.44 6.16 2.1 7.95a.5.5 0 0 0 .799.6z\"/><path fill=\"currentColor\" d=\"M8 9c-1.27 0-2.39.608-3.1 1.55a.5.5 0 0 1-.8-.6A4.87 4.87 0 0 1 8 8c1.6 0 3.01.767 3.9 1.95a.5.5 0 0 1-.799.6A3.87 3.87 0 0 0 8.001 9zm0 5a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/></svg>"
         ]],
+    ["periphery", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z\" clip-rule=\"evenodd\"/></svg>"
+        ]],
     ["power", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M15.8.195a.664.664 0 0 0-.94 0l-.293.293a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l.293-.293c.26-.26.26-.68 0-.94zM13.3 1.78a.25.25 0 0 1 .354 0l.587.587a.25.25 0 0 1 0 .354l-.587.587a.25.25 0 0 1-.354 0l-.586-.587a.25.25 0 0 1 0-.354zm-1.5 1.88a.25.25 0 0 0-.354 0l-1.53 1.53a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l1.53-1.53a.25.25 0 0 0 0-.354zM8.52 6.07a.994.994 0 0 0-1.41 0L3.59 9.59a1.994 1.994 0 1 0 2.82 2.82l3.52-3.52a.994.994 0 0 0 0-1.41zM2.78 13.9a.5.5 0 1 0-.554-.832c-1.31.874-.692 2.92.883 2.92h8.39a.5.5 0 0 0 0-1h-8.39c-.585 0-.815-.759-.328-1.08z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 17.25a6 6 0 0 1-6-6v-4.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 1.5 1.5v4.5a6 6 0 0 1-6 6\"/><path d=\"M9 16.447v2.3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-2.3M9 5.25V.75m6 4.5V.75m-3 19.5v3\"/></g></svg>"
         ]],
+    ["scenarios", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z\"/><path fill=\"currentColor\" d=\"M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z\"/></svg>"
+        ]],
     ["settings", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    fill-rule=\"evenodd\"\r\n    d=\"M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572\"\r\n    clip-rule=\"evenodd\"\r\n  />\r\n</svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    fill-rule=\"evenodd\"\r\n    d=\"M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572\"\r\n    clip-rule=\"evenodd\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8.39 1c.699 0 1.4.2 2 .7l2.1 1.8c.1.1.1.3 0 .4s-.1.3 0 .4l.51.45c.098.094.259.08.388-.05c.158-.158.2-.173.399 0l1 .911c.185.181.196.289.096.389l-1.6 1.9c-.11.139-.27.198-.4.1l-.897-.8c-.1-.1-.088-.276 0-.4s.107-.304 0-.4l-.522-.431c-.156-.121-.226-.148-.45.031c-.15.121-.251.105-.351.031c-.1-.073-.086-.062-.195-.152c-.135-.11-.238-.132-.38.021l-2.6 3.2c.3.2.3.6.1.9l-3.79 4.5c-.398.3-.798.5-1.2.5s-.698-.1-.997-.4c-.7-.6-.7-1.5-.2-2.2l3.79-4.5c.1-.1.299-.2.499-.2c.1 0 .299 0 .399.1l2.2-2.6c.399-.4.25-.9-.15-1.3l-.23-.215C7.412 3.185 6.69 3 5.89 3h-.398c-.1 0-.154-.12-.1-.2l.599-.7c.599-.7 1.5-1.1 2.4-1.1zm0-1c-1.2 0-2.4.5-3.09 1.5l-.599.7c-.299.3-.399.8-.2 1.2c.2.4.599.6.998.6h.499c.499 0 .998.2 1.3.5l.2.2l-1.8 2h-.1q-.748 0-1.2.6l-3.79 4.5c-.898 1.1-.799 2.7.3 3.6c.498.4.997.6 1.7.6c.798 0 1.5-.3 1.9-.9l3.79-4.5c.298-.4.398-.9.298-1.4l1.9-2.2c.105-.119.3-.113.3 0c0 .3.2.7.5.9l.897.8q.45.3.898.3c.4 0 .8-.2.998-.5l1.6-1.9c.5-.5.33-1.32-.2-1.8l-.898-.8q-.3-.3-.898-.3h-.1c0-.3-.2-.7-.499-.9l-2.1-1.8c-.699-.7-1.6-1-2.6-1z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8.2 1H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 3.36.999 3.94.999 4.8v5.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18c.25.02.54.03.895.034c.13.36.328.702.596 1c-1.42-.002-2.17-.027-2.76-.327a3 3 0 0 1-1.31-1.31c-.327-.642-.327-1.48-.327-3.16V4.8c0-1.68 0-2.52.327-3.16A3.02 3.02 0 0 1 1.641.33c.642-.327 1.48-.327 3.16-.327h3.4c1.68 0 2.52 0 3.16.327a3.02 3.02 0 0 1 1.31 1.31c.24.47.304 1.05.321 1.99a3 3 0 0 0-.359.015a3.1 3.1 0 0 0-.664-.607l-.009-.12c-.036-.438-.1-.663-.18-.82a2 2 0 0 0-.874-.873c-.156-.08-.38-.145-.819-.18c-.45-.037-1.03-.038-1.89-.038z\"/><path fill=\"currentColor\" d=\"M8.07 3H2.5a.5.5 0 0 0 0 1h3.07a3.1 3.1 0 0 1 1.8-.362c.202-.247.441-.463.71-.638zM2.5 6h1.31a3 3 0 0 0-.183 1h-1.12a.5.5 0 0 1 0-1zm.09 3h-.094a.5.5 0 0 0 0 1v-.238q0-.395.094-.762\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 12c1.1 0 2-.895 2-2c0-1.1-.895-2-2-2c-1.1 0-2 .895-2 2c0 1.1.895 2 2 2m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.2 4h-.474c-.79 0-1.45.575-1.57 1.33a5 5 0 0 0-.211.087a1.59 1.59 0 0 0-2.05.173l-.337.337a1.594 1.594 0 0 0-.173 2.05q-.046.105-.087.211a1.596 1.596 0 0 0-1.33 1.57v.474c0 .793.577 1.45 1.33 1.58q.04.104.085.206a1.6 1.6 0 0 0 .171 2.06l.33.33c.562.562 1.44.62 2.07.168q.098.045.198.083a1.6 1.6 0 0 0 1.58 1.34h.458c.8 0 1.46-.584 1.59-1.35q.098-.039.194-.081c.628.454 1.51.398 2.08-.167l.321-.321c.565-.565.621-1.45.167-2.08q.043-.097.081-.194a1.61 1.61 0 0 0 1.35-1.59v-.458c0-.797-.581-1.46-1.34-1.58a5 5 0 0 0-.082-.2c.45-.625.394-1.5-.17-2.07l-.328-.328a1.6 1.6 0 0 0-2.06-.171a5 5 0 0 0-.206-.086a1.596 1.596 0 0 0-1.58-1.33zM9.13 5.6c0-.329.266-.595.595-.595h.474c.33 0 .598.268.598.598c0 .282.199.521.466.613q.236.081.458.191c.254.125.566.097.766-.103a.6.6 0 0 1 .847 0l.329.329a.603.603 0 0 1 0 .852c-.201.201-.23.513-.106.768q.105.217.184.447c.093.27.334.472.619.472c.333 0 .603.27.603.603v.458a.606.606 0 0 1-.606.606c-.286 0-.528.202-.622.471q-.078.226-.182.439c-.125.257-.097.572.106.774a.605.605 0 0 1 0 .857l-.321.321a.605.605 0 0 1-.857 0c-.202-.202-.517-.231-.774-.106q-.213.104-.439.182c-.27.094-.472.336-.472.622a.606.606 0 0 1-.606.606h-.458a.603.603 0 0 1-.603-.603c0-.285-.202-.527-.472-.619a4 4 0 0 1-.447-.184c-.255-.124-.567-.095-.768.105a.603.603 0 0 1-.852 0l-.329-.329a.6.6 0 0 1 0-.847c.2-.2.228-.512.103-.766a4 4 0 0 1-.191-.458c-.092-.267-.331-.466-.613-.466a.6.6 0 0 1-.598-.598v-.474c0-.329.266-.595.595-.595c.282 0 .52-.199.611-.466a4 4 0 0 1 .193-.466c.124-.252.096-.561-.103-.76a.596.596 0 0 1 0-.842l.337-.337a.596.596 0 0 1 .842 0c.199.199.508.227.76.103q.225-.11.466-.193c.267-.09.466-.329.466-.611z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n  ><path\r\n    fill=\"currentColor\"\r\n    d=\"M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z\"\r\n  /></svg\r\n>\r\n",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    d=\"M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 0C6.9 0 6 .895 6 2v.068a.46.46 0 0 1-.285.423a.45.45 0 0 1-.492-.096a1.924 1.924 0 0 0-2.72 0l-.109.11a1.924 1.924 0 0 0 0 2.72a.45.45 0 0 1 .096.491a.46.46 0 0 1-.424.285h-.068a2 2 0 1 0 0 4h.068c.183 0 .352.112.424.285a.45.45 0 0 1-.096.492a1.924 1.924 0 0 0 0 2.72l.109.11c.751.75 1.97.75 2.72 0a.45.45 0 0 1 .492-.097c.172.072.285.24.285.424v.068a2 2 0 1 0 4 0v-.068c0-.183.112-.352.285-.424a.45.45 0 0 1 .492.096c.751.751 1.97.751 2.72 0l.109-.109a1.924 1.924 0 0 0 0-2.72a.45.45 0 0 1-.096-.492a.46.46 0 0 1 .424-.285H14a2 2 0 1 0 0-4h-.067a.46.46 0 0 1-.424-.285a.45.45 0 0 1 .096-.492a1.924 1.924 0 0 0 0-2.72l-.109-.109a1.924 1.924 0 0 0-2.72 0a.45.45 0 0 1-.492.096a.46.46 0 0 1-.285-.424V2c0-1.1-.895-2-2-2M7 2a1 1 0 0 1 2 0v.068c0 .59.359 1.12.902 1.35c.54.223 1.17.102 1.58-.314a.917.917 0 0 1 1.3 0l.109.11a.93.93 0 0 1 0 1.31a1.45 1.45 0 0 0-.313 1.58c.225.543.756.902 1.35.902h.067a1 1 0 0 1 0 2h-.067a1.47 1.47 0 0 0-1.35.902c-.224.54-.103 1.17.313 1.58c.36.36.36.945 0 1.3l-.109.109a.917.917 0 0 1-1.3 0a1.45 1.45 0 0 0-1.58-.313A1.46 1.46 0 0 0 9 13.934V14a1 1 0 0 1-2 0v-.067a1.47 1.47 0 0 0-.902-1.35a1.45 1.45 0 0 0-1.58.313a.917.917 0 0 1-1.3 0l-.109-.11a.93.93 0 0 1 0-1.31a1.45 1.45 0 0 0 .313-1.58a1.46 1.46 0 0 0-1.35-.901h-.068a1 1 0 0 1 0-2h.068a1.47 1.47 0 0 0 1.35-.902c.224-.54.103-1.17-.313-1.58a.917.917 0 0 1 0-1.3l.109-.11a.93.93 0 0 1 1.31 0a1.45 1.45 0 0 0 1.58.314c.543-.225.902-.756.902-1.35V2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.1 3.12a1 1 0 0 1 .706.71c.452 1.71.032 3.62-1.32 4.97a5.14 5.14 0 0 1-4.87 1.36a.34.34 0 0 0-.148-.006l-.025.008l-5.08 5.08a2.563 2.563 0 0 1-3.62 0a2.563 2.563 0 0 1 0-3.62l5.08-5.08l.008-.025a.34.34 0 0 0-.006-.148a5.16 5.16 0 0 1 1.366-4.88a5.11 5.11 0 0 1 4.97-1.32a1 1 0 0 1 .452 1.674l-2.1 2.1l.383 1.15l1.15.383l2.1-2.1a1 1 0 0 1 .968-.258zM5.81 6.55l.001-.002zm3.62 3.62l.002-.001zm4.34-2.07a4.16 4.16 0 0 1-3.93 1.1c-.396-.096-.827-.023-1.12.265l-5.08 5.08c-.607.608-1.6.608-2.21 0a1.57 1.57 0 0 1 0-2.21l5.08-5.08c.288-.288.361-.721.265-1.12a4.2 4.2 0 0 1-.043-1.78a4.2 4.2 0 0 1 1.14-2.15c.76-.76 1.74-1.16 2.73-1.2a4.3 4.3 0 0 1 1.28.137l-2.1 2.1a1 1 0 0 0-.242 1.02l.383 1.15c.1.299.334.533.632.632l1.15.383a.99.99 0 0 0 1.02-.242l2.1-2.1c.11.418.156.849.137 1.28a4.1 4.1 0 0 1-1.2 2.73z\" clip-rule=\"evenodd\"/></svg>"
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.1 3.12a1 1 0 0 1 .706.71c.452 1.71.032 3.62-1.32 4.97a5.14 5.14 0 0 1-4.87 1.36a.34.34 0 0 0-.148-.006l-.025.008l-5.08 5.08a2.563 2.563 0 0 1-3.62 0a2.563 2.563 0 0 1 0-3.62l5.08-5.08l.008-.025a.34.34 0 0 0-.006-.148a5.16 5.16 0 0 1 1.366-4.88a5.11 5.11 0 0 1 4.97-1.32a1 1 0 0 1 .452 1.674l-2.1 2.1l.383 1.15l1.15.383l2.1-2.1a1 1 0 0 1 .968-.258zM5.81 6.55l.001-.002zm3.62 3.62l.002-.001zm4.34-2.07a4.16 4.16 0 0 1-3.93 1.1c-.396-.096-.827-.023-1.12.265l-5.08 5.08c-.607.608-1.6.608-2.21 0a1.57 1.57 0 0 1 0-2.21l5.08-5.08c.288-.288.361-.721.265-1.12a4.2 4.2 0 0 1-.043-1.78a4.2 4.2 0 0 1 1.14-2.15c.76-.76 1.74-1.16 2.73-1.2a4.3 4.3 0 0 1 1.28.137l-2.1 2.1a1 1 0 0 0-.242 1.02l.383 1.15c.1.299.334.533.632.632l1.15.383a.99.99 0 0 0 1.02-.242l2.1-2.1c.11.418.156.849.137 1.28a4.1 4.1 0 0 1-1.2 2.73z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m2.56 3.42l-1.55 9c-.045.263.165.577.546.577h11.3a.54.54 0 0 0 .546-.423l1.55-9c.045-.263-.165-.577-.546-.577h-11.3a.54.54 0 0 0-.546.423M.02 12.25C-.138 13.164.592 14 1.55 14h11.3c.759 0 1.41-.53 1.53-1.25l1.55-9C16.088 2.836 15.358 2 14.4 2H3.1c-.759 0-1.41.53-1.53 1.25z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m7 11l.167-1h5L12 11zM5.09 4.53a.746.746 0 0 0-1.05-.117a.746.746 0 0 0-.117 1.05l1.54 1.93l-2.44 2.03a.754.754 0 0 0-.096 1.06a.754.754 0 0 0 1.06.096l3-2.5a.745.745 0 0 0 .106-1.04l-2-2.5z\" clip-rule=\"evenodd\"/></svg>"
         ]]
 ];

package/dist/index.d.ts

@@ -20,8 +20,10 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabsProps } from './Tabs/TabsProps.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';
 export * from './locales/translations';
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, } from './types';
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITabsProps, } from './types';

package/dist/index.js

@@ -10,6 +10,8 @@ export { default as Graph } from './Graph/Graph.svelte';
 export { default as GraphProps } from './Graph/GraphProps.svelte';
 export { default as Input } from './Input/Input.svelte';
 export { default as InputProps } from './Input/InputProps.svelte';
+// export { default as Joystick } from './Joystick/Joystick.svelte'
+// export { default as JoystickProps } from './Joystick/JoystickProps.svelte'
 export { default as Modal } from './Modal.svelte';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.svelte';
 export { default as ProgressBarProps } from './ProgressBar/ProgressBarProps.svelte';
@@ -21,6 +23,8 @@ export { default as Switch } from './Switch/Switch.svelte';
 export { default as SwitchProps } from './Switch/SwitchProps.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { default as TableProps } from './Table/TableProps.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as TabsProps } from './Tabs/TabsProps.svelte';
 export { default as TextField } from './TextField/TextField.svelte';
 export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
 export * from './locales/i18n';