├── .env
├── screenshot.png
├── tests
    └── unit
    │   └── .eslintrc.js
├── src
    ├── typings
    │   ├── shims-vue.d.ts
    │   ├── shims-tsx.d.ts
    │   └── figma.d.ts
    ├── ui
    │   ├── store.ts
    │   ├── App.vue
    │   ├── main.ts
    │   ├── views
    │   │   ├── Home.vue
    │   │   └── Styleguide.vue
    │   ├── router.ts
    │   ├── components
    │   │   └── CreateRect.vue
    │   └── assets
    │   │   └── styleguide
    │   │       └── main.css
    └── main
    │   └── index.ts
├── public
    ├── manifest.json
    └── index.html
├── .gitignore
├── tsconfig.json
├── README.md
├── vue.config.js
└── package.json


/.env:
--------------------------------------------------------------------------------
1 | BASE_URL=/


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph1p/figma-plugin-vue-starter/HEAD/screenshot.png


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/src/typings/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue';
3 |   export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Figma Plugin with vue",
3 |   "id": "12345",
4 |   "api": "1.0.0",
5 |   "main": "./main.js",
6 |   "ui": "./index.html"
7 | }


--------------------------------------------------------------------------------
/src/ui/store.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {}
10 | });
11 | 


--------------------------------------------------------------------------------
/src/ui/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/styleguide">Styleguide</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/src/ui/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import store from './store';
 5 | 
 6 | import './assets/styleguide/main.css';
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | new Vue({
11 |   router,
12 |   store,
13 |   render: h => h(App)
14 | }).$mount('#app');
15 | 


--------------------------------------------------------------------------------
/src/typings/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/ui/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <h2>Vue Figma</h2>
 4 |     <CreateRect />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { Component, Vue } from 'vue-property-decorator';
10 | import CreateRect from '@/components/CreateRect.vue'; // @ is an alias to /src
11 | 
12 | @Component({
13 |   components: {
14 |     CreateRect
15 |   }
16 | })
17 | export default class Home extends Vue {}
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/ui/router.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import Home from './views/Home.vue';
 4 | import Styleguide from './views/Styleguide.vue';
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: 'hash',
10 |   base: process.env.BASE_URL,
11 |   routes: [
12 |     {
13 |       path: '',
14 |       name: 'home',
15 |       component: Home
16 |     },
17 |     {
18 |       path: '/styleguide',
19 |       name: 'Styleguide',
20 |       component: Styleguide
21 |     }
22 |   ]
23 | });
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "typeRoots": ["./src/typings"],
 5 |     "outDir": "./dist",
 6 |     "strict": false,
 7 |     "jsx": "preserve",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "node",
10 |     "experimentalDecorators": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "baseUrl": ".",
14 |     "types": ["node", "webpack-env", "jest"],
15 |     "paths": {
16 |       "@/*": ["src/*"]
17 |     },
18 |     "lib": ["esnext", "dom"]
19 |   },
20 |   "include": [
21 |     "src/**/*.ts*",
22 |     "src/**/*.tsx*",
23 |     "src/**/*.vue",
24 |     "tests/**/*.ts*",
25 |     "tests/**/*.tsx*"
26 |   ],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # figma-plugin-vue-starter
 2 | 
 3 | ![Screenshot](/screenshot.png)
 4 | 
 5 | This is an experiment. This "starter-kit" let's you build an figma-plugin with vue.
 6 | 
 7 | [Figma Plugin Documentation](https://www.figma.com/plugin-docs/intro/)
 8 | 
 9 | ## Project setup
10 | 
11 | Run
12 | 
13 | ```
14 | npm install
15 | npm run build
16 | ```
17 | 
18 | Open the `dist/manifest.json` with figma.
19 | 
20 | ### Compiles and hot-reloads for development
21 | 
22 | ```
23 | npm run serve
24 | ```
25 | 
26 | ### Compiles and minifies for production
27 | 
28 | ```
29 | npm run build
30 | ```
31 | 
32 | ### Run your tests
33 | 
34 | ```
35 | npm run test
36 | ```
37 | 
38 | ### Lints and fixes files
39 | 
40 | ```
41 | npm run lint
42 | ```
43 | 
44 | ### Run your unit tests
45 | 
46 | ```
47 | npm run test:unit
48 | ```
49 | 


--------------------------------------------------------------------------------
/src/ui/components/CreateRect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     Create <strong>{{ count }}</strong> Rectangles in a row.
 4 | 
 5 |     <input v-model="count" />
 6 |     <button @click="createRect">create</button>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script lang="ts">
11 | import { Component, Prop, Vue } from 'vue-property-decorator';
12 | 
13 | @Component
14 | export default class CreateRect extends Vue {
15 |   count: number = 0;
16 | 
17 |   createRect() {
18 |     parent.postMessage(
19 |       {
20 |         pluginMessage: {
21 |           type: 'create-rectangles',
22 |           count: this.count
23 |         }
24 |       },
25 |       '*'
26 |     );
27 |   }
28 | 
29 |   cancel() {
30 |     parent.postMessage(
31 |       {
32 |         pluginMessage: { type: 'cancel' }
33 |       },
34 |       '*'
35 |     );
36 |   }
37 | }
38 | </script>
39 | 
40 | <style scoped lang="scss">
41 | h3 {
42 |   margin: 40px 0 0;
43 | }
44 | ul {
45 |   list-style-type: none;
46 |   padding: 0;
47 | }
48 | li {
49 |   display: inline-block;
50 |   margin: 0 10px;
51 | }
52 | a {
53 |   color: #42b983;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/main/index.ts:
--------------------------------------------------------------------------------
 1 | // This shows the HTML page in "ui.html".
 2 | figma.showUI(__html__, {
 3 |   width: 600,
 4 |   height: 520
 5 | });
 6 | 
 7 | // Calls to "parent.postMessage" from within the HTML page will trigger this
 8 | // callback. The callback will be passed the "pluginMessage" property of the
 9 | // posted message.
10 | figma.ui.onmessage = msg => {
11 |   // One way of distinguishing between different types of messages sent from
12 |   // your HTML page is to use an object with a "type" property like this.
13 |   if (msg.type === 'create-rectangles') {
14 |     const nodes: SceneNode[] = [];
15 |     for (let i = 0; i < msg.count; i++) {
16 |       const rect = figma.createRectangle();
17 |       rect.x = i * 150;
18 |       rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
19 |       figma.currentPage.appendChild(rect);
20 |       nodes.push(rect);
21 |     }
22 |     figma.currentPage.selection = nodes;
23 |     figma.viewport.scrollAndZoomIntoView(nodes);
24 |   }
25 | 
26 |   // Make sure to close the plugin when you're done. Otherwise the plugin will
27 |   // keep running, which shows the cancel button at the bottom of the screen.
28 |   figma.closePlugin();
29 | };
30 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 4 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 5 | 
 6 | const isMain = process.env.TARGET_NODE === 'main';
 7 | 
 8 | if (isMain) {
 9 |   webpack(
10 |     {
11 |       stats: 'minimal',
12 |       mode: 'production',
13 |       devtool: false,
14 |       entry: {
15 |         main: './src/main/index.ts'
16 |       },
17 |       module: {
18 |         rules: [{ test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/ }]
19 |       },
20 |       resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] },
21 |       output: {
22 |         filename: '[name].js',
23 |         path: path.resolve(__dirname, 'dist')
24 |       }
25 |     },
26 |     () => {
27 |       console.log('main created');
28 |     }
29 |   );
30 | } else {
31 |   const config = {
32 |     css: {
33 |       extract: false
34 |     },
35 |     configureWebpack: {
36 |       stats: 'minimal',
37 |       devtool: false,
38 |       optimization: {
39 |         splitChunks: false
40 |       },
41 |       entry: {
42 |         app: './src/ui/main.ts'
43 |       },
44 |       resolve: {
45 |         alias: {
46 |           '@': __dirname + '/src/ui'
47 |         }
48 |       },
49 |       output: {
50 |         filename: '[name].js',
51 |         chunkFilename: '[name].js'
52 |       },
53 |       devServer: {
54 |         host: '127.0.0.1',
55 |         port: 8080,
56 |         compress: true,
57 |         disableHostCheck: true,
58 |         writeToDisk: true,
59 |         historyApiFallback: true
60 |       },
61 |       plugins: [
62 |         new HtmlWebpackPlugin({
63 |           template: 'public/index.html',
64 |           inlineSource: '.(js|css)$',
65 |           chunks: ['app']
66 |         }),
67 |         new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin)
68 |       ]
69 |     }
70 |   };
71 | 
72 |   module.exports = config;
73 | }
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "figma-plugin-vue-starter",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "scripts": {
  6 |     "serve": "concurrently \"vue-cli-service serve\" \"npm run serve:main\"",
  7 |     "build": "rm -rf dist && vue-cli-service build --modern && npm run build:main",
  8 |     "build:main": "TARGET_NODE=main node vue.config.js",
  9 |     "serve:main": "nodemon --exec \"npm run build:main\" ./src/main/index.ts",
 10 |     "lint": "vue-cli-service lint",
 11 |     "test:unit": "vue-cli-service test:unit"
 12 |   },
 13 |   "dependencies": {
 14 |     "core-js": "^3.6.4",
 15 |     "vue": "^2.6.11",
 16 |     "vue-class-component": "^7.2.2",
 17 |     "vue-property-decorator": "^8.3.0",
 18 |     "vue-router": "^3.1.5",
 19 |     "vue-server-renderer": "^2.6.11",
 20 |     "vuex": "^3.1.2",
 21 |     "webpack-node-externals": "^1.7.2"
 22 |   },
 23 |   "devDependencies": {
 24 |     "@types/jest": "^24.9.1",
 25 |     "@typescript-eslint/eslint-plugin": "^2.17.0",
 26 |     "@typescript-eslint/parser": "^2.17.0",
 27 |     "@vue/cli-plugin-babel": "^4.1.2",
 28 |     "@vue/cli-plugin-eslint": "^4.1.2",
 29 |     "@vue/cli-plugin-typescript": "^4.1.2",
 30 |     "@vue/cli-plugin-unit-jest": "^4.1.2",
 31 |     "@vue/cli-service": "^4.1.2",
 32 |     "@vue/eslint-config-prettier": "^6.0.0",
 33 |     "@vue/eslint-config-typescript": "^5.0.1",
 34 |     "@vue/test-utils": "1.0.0-beta.29",
 35 |     "babel-core": "7.0.0-bridge.0",
 36 |     "babel-eslint": "^10.0.3",
 37 |     "concurrently": "^5.0.2",
 38 |     "eslint": "^6.8.0",
 39 |     "eslint-plugin-prettier": "^3.1.2",
 40 |     "eslint-plugin-vue": "^6.1.2",
 41 |     "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
 42 |     "html-webpack-plugin": "^4.0.0-beta.4",
 43 |     "nodemon": "^2.0.2",
 44 |     "sass": "^1.25.0",
 45 |     "sass-loader": "^8.0.2",
 46 |     "ts-jest": "^25.0.0",
 47 |     "typescript": "^3.7.5",
 48 |     "vue-template-compiler": "^2.6.11"
 49 |   },
 50 |   "babel": {
 51 |     "presets": [
 52 |       "@vue/app"
 53 |     ]
 54 |   },
 55 |   "prettier": {
 56 |     "singleQuote": true
 57 |   },
 58 |   "eslintConfig": {
 59 |     "root": true,
 60 |     "env": {
 61 |       "node": true
 62 |     },
 63 |     "extends": [
 64 |       "plugin:vue/essential",
 65 |       "@vue/prettier",
 66 |       "@vue/typescript"
 67 |     ],
 68 |     "rules": {},
 69 |     "parserOptions": {
 70 |       "parser": "@typescript-eslint/parser"
 71 |     }
 72 |   },
 73 |   "postcss": {
 74 |     "plugins": {
 75 |       "autoprefixer": {}
 76 |     }
 77 |   },
 78 |   "browserslist": [
 79 |     "> 1%",
 80 |     "last 2 versions"
 81 |   ],
 82 |   "jest": {
 83 |     "moduleFileExtensions": [
 84 |       "js",
 85 |       "jsx",
 86 |       "json",
 87 |       "vue",
 88 |       "ts",
 89 |       "tsx"
 90 |     ],
 91 |     "transform": {
 92 |       "^.+\\.vue$": "vue-jest",
 93 |       ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
 94 |       "^.+\\.tsx?$": "ts-jest"
 95 |     },
 96 |     "transformIgnorePatterns": [
 97 |       "/node_modules/"
 98 |     ],
 99 |     "moduleNameMapper": {
100 |       "^@/(.*)$": "<rootDir>/src/$1"
101 |     },
102 |     "snapshotSerializers": [
103 |       "jest-serializer-vue"
104 |     ],
105 |     "testMatch": [
106 |       "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
107 |     ],
108 |     "testURL": "http://localhost/",
109 |     "watchPlugins": [
110 |       "jest-watch-typeahead/filename",
111 |       "jest-watch-typeahead/testname"
112 |     ],
113 |     "globals": {
114 |       "ts-jest": {
115 |         "babelConfig": true
116 |       }
117 |     }
118 |   }
119 | }
120 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 | <div id="app"></div>
2 | <script>
3 | (function(){"use strict";var e,t={selector:"disclosure"},n=function(t){let n=this.parentNode.parentNode,l=n.querySelectorAll("li"),o=this.parentNode.classList.contains(e+"--expanded");console.log(o),l.forEach(t=>{t.classList.remove(e+"--expanded")}),this.parentNode.classList.add(e+"--expanded"),o&&this.parentNode.classList.remove(e+"--expanded")};window.disclosure={init:function(l){let o=Object.assign({},t,l);e=o.selector;let i=document.querySelectorAll("."+e+"__label");i.forEach(e=>{e.addEventListener("click",n,!1)})},destroy:function(){let t=document.querySelectorAll("."+e+"__label");t.forEach(e=>{e.removeEventListener("click",n,!1)})}},disclosure.init()})(),function(){"use strict";var e,t={selector:".input-icon"},n=function(e){let t=this.parentNode,n=t.querySelector(".icon");n.classList.remove("icon--black-3"),n.classList.add("icon--blue")},l=function(e){let t=this.parentNode,n=t.querySelector(".icon");n.classList.add("icon--black-3"),n.classList.remove("icon--blue")};window.iconInput={init:function(o){let i=Object.assign({},t,o);e=i.selector;let s=document.querySelectorAll(e);s.forEach(e=>{e.addEventListener("focusin",n,!1),e.addEventListener("focusout",l,!1)})},destroy:function(){let t=document.querySelectorAll(e);t.forEach(e=>{e.removeEventListener("focusin",n,!1),e.removeEventListener("focusout",l,!1)})}},iconInput.init()}(),function(){"use strict";function e(){let e=c.length;for(let o=0;o<e;o++){t(document.createElement("div"),o);let e=c[o].getElementsByTagName("optgroup");if(r=c[o].selectedIndex,d=0,0!=e.length){let t;t=!!e[0].label;for(let o=0;o<e.length;o++){let i=e[o].getElementsByTagName("option"),c=document.createElement("div");if(c.className=s+"__divider",1==t){let t=document.createElement("span"),r=document.createTextNode(e[o].label);t.className=s+"__divider-label",0===o&&t.classList.add(s+"__divider-label--first"),t.appendChild(r),c.appendChild(t),a.appendChild(c),l(t);for(let e=0;e<i.length;e++)n(i[e])}else{for(let e=0;e<i.length;e++)n(i[e]);if(o!=e.length-1){let e=document.createElement("span");e.className=s+"__divider-line",c.appendChild(e),a.appendChild(c),l(e)}}c.addEventListener("click",f,!1)}}else for(let e=0;e<c[o].length;e++)n(c[o].options[e])}}function t(e,t){let n=c[t];n.style.display="none",n.options[n.selectedIndex].selected=!0,n.parentNode.insertBefore(e,n),e.appendChild(n),e.className=s;let l,o=document.createElement("button"),r=document.createElement("span"),d=document.createElement("span");if(a=document.createElement("ul"),0==n.selectedIndex)l=document.createTextNode(n.options[0].text);else{let e=n.selectedIndex;l=document.createTextNode(n.options[e].text)}o.className=s+"__button",r.className=s+"__button-label",d.className=s+"__icon",a.className=s+"__list",e.appendChild(o),e.appendChild(a),o.appendChild(r),o.appendChild(d),r.appendChild(l),"overlap"==i.position&&(a.style.top=0),o.addEventListener("click",m,!1)}function n(e){if(""!=e.value){let t=document.createElement("li"),n=document.createElement("span"),o=document.createElement("span");if(t.className=s+"__list-item",n.className=s+"__list-item-icon",o.className=s+"__list-item-text",t.setAttribute("data-value",e.value),o.innerHTML+=e.text,t.appendChild(n),t.appendChild(o),a.appendChild(t),"positionToSelection"==i.position&&(t.setAttribute("position",d),l(t)),e.index==r&&(t.classList.add(s+"__list-item--active"),"positionToSelection"==i.position)){let e=-Math.abs(parseInt(t.getAttribute("position")));a.style.top=e+"px"}t.addEventListener("click",m,!1)}}function l(e){let t=[parseInt(window.getComputedStyle(e,null).getPropertyValue("margin-top")),parseInt(window.getComputedStyle(e,null).getPropertyValue("margin-bottom")),parseInt(window.getComputedStyle(e,null).getPropertyValue("padding-top")),parseInt(window.getComputedStyle(e,null).getPropertyValue("padding-bottom")),parseInt(window.getComputedStyle(e,null).getPropertyValue("height"))];d+=o(t)}function o(e){return e.reduce(function(e,t){return e+t},0)}var i,s,c,a,r,d,u={selector:"select-menu",position:"under"},p=!1,m=function(e){let t=this;if("BUTTON"==t.tagName){this.classList.toggle(s+"__button--active");let e=t.parentNode.querySelector("UL");e.classList.toggle(s+"__list--active")}else if("LI"==t.tagName){let e=t.parentNode.parentNode.querySelector("UL"),n=e.getElementsByTagName("LI");for(let e=0;e<n.length;e++)n[e].classList.remove(s+"__list-item--active");t.classList.add(s+"__list-item--active");let l=e.parentNode.querySelector("SELECT"),o=t.getAttribute("data-value"),c=l.querySelectorAll("option"),a=c.length;c.forEach(e=>{e.removeAttribute("selected")}),l.value=o;for(let e=0;e<a;e++){let t=c[e].value;t==o&&c[e].setAttribute("selected","selected")}let r=t.parentNode.parentNode.querySelector("BUTTON"),d=r.querySelector("."+s+"__button-label");if(d.textContent=t.textContent,r.classList.toggle(s+"__button--active"),e.classList.toggle(s+"__list--active"),"positionToSelection"==i.position){let e=-Math.abs(parseInt(t.getAttribute("position")));t.parentNode.style.top=e+"px"}}},f=function(e){e.stopPropagation()},v=function(e){let t=document.querySelectorAll("select."+s);t.forEach(t=>{let n=t.parentNode,l=n.querySelector("UL"),o=n.querySelector("BUTTON");if(l.classList.contains(s+"__list--active")){let t=n.contains(e.target);t||(l.classList.remove(s+"__list--active"),o.classList.remove(s+"__button--active"))}})};window.selectMenu={init:function(t){1==p&&selectMenu.destroy(),i=Object.assign({},u,t),s=i.selector,c=document.querySelectorAll("."+s),e(),document.addEventListener("click",v,!1),p=!0},destroy:function(){let e=document.querySelectorAll("select."+s);e.forEach(e=>{let t=e.parentNode,n=t.querySelector("BUTTON"),l=t.querySelector("UL");n.remove(),l.remove(),t.outerHTML=t.innerHTML}),document.removeEventListener("click",v,!1),p=!1}},selectMenu.init()}();
4 | </script>


--------------------------------------------------------------------------------
/src/ui/views/Styleguide.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>Typography</h1>
  4 | 
  5 |     <h2>Positive applications</h2>
  6 |     <div
  7 |       style="background-color: #FFFFFF; border: 1px solid #cccccc; padding: 16px;"
  8 |     >
  9 |       <p class="type type--11-pos">UI 11 Normal</p>
 10 |       <p class="type type--11-pos-medium">UI 11 Medium</p>
 11 |       <p class="type type--11-pos-bold">UI 11 Bold</p>
 12 |       <br />
 13 |       <p class="type type--12-pos">UI 12 Normal</p>
 14 |       <p class="type type--12-pos-medium">UI 12 Medium</p>
 15 |       <p class="type type--12-pos-bold">UI 12 Bold</p>
 16 |     </div>
 17 | 
 18 |     <h2>Negative applications</h2>
 19 |     <div style="background-color: #000000; padding: 16px;">
 20 |       <p class="type type--11-neg">UI 11 Normal</p>
 21 |       <p class="type type--11-neg-medium">UI 11 Medium</p>
 22 |       <p class="type type--11-neg-bold">UI 11 Bold</p>
 23 |       <br />
 24 |       <p class="type type--12-neg">UI 12 Normal</p>
 25 |       <p class="type type--12-neg-medium">UI 12 Medium</p>
 26 |       <p class="type type--12-neg-bold">UI 12 Bold</p>
 27 |     </div>
 28 | 
 29 |     <hr />
 30 | 
 31 |     <h1>Text components</h1>
 32 |     <div class="label">Label</div>
 33 |     <div class="section-title">Section title</div>
 34 | 
 35 |     <hr />
 36 | 
 37 |     <h1>Controls</h1>
 38 | 
 39 |     <h2>Inputs</h2>
 40 | 
 41 |     <input type="input" class="input" placeholder="Value" />
 42 |     <br />
 43 |     <input type="input" class="input" value="0" />
 44 |     <br />
 45 |     <div class="input-icon">
 46 |       <div class="input-icon__icon">
 47 |         <div class="icon icon--angle icon--black-3"></div>
 48 |         <!--use icon component here-->
 49 |       </div>
 50 |       <input type="input" class="input-icon__input" placeholder="Value" />
 51 |     </div>
 52 |     <br />
 53 |     <textarea rows="2" class="textarea"></textarea>
 54 |     <br />
 55 |     <h2>Switch</h2>
 56 | 
 57 |     <label class="switch">
 58 |       <div class="switch__container">
 59 |         <input type="checkbox" class="switch__checkbox" />
 60 |         <span class="switch__slider"></span>
 61 |       </div>
 62 |       <div class="switch__label">Label</div>
 63 |     </label>
 64 |     <br />
 65 |     <h2>Checkbox</h2>
 66 | 
 67 |     <label class="checkbox">
 68 |       <div class="checkbox__container">
 69 |         <input type="checkbox" class="checkbox__box" />
 70 |         <span class="checkbox__mark"></span>
 71 |       </div>
 72 |       <div class="checkbox__label">Label</div>
 73 |     </label>
 74 |     <hr />
 75 | 
 76 |     <h1>Buttons</h1>
 77 | 
 78 |     <h2>Primary</h2>
 79 | 
 80 |     <h3>Normal</h3>
 81 |     <button class="button button--primary">Label</button>
 82 |     <button class="button button--primary" disabled>Label</button>
 83 |     <h3>Destructive</h3>
 84 |     <button class="button button--primary-destructive">Label</button>
 85 |     <button class="button button--primary-destructive" disabled>Label</button>
 86 | 
 87 |     <h2>Secondary</h2>
 88 | 
 89 |     <h3>Normal</h3>
 90 |     <button class="button button--secondary">Label</button>
 91 |     <button class="button button--secondary" disabled>Label</button>
 92 |     <h3>Destructive</h3>
 93 |     <button class="button button--secondary-destructive">Label</button>
 94 |     <button class="button button--secondary-destructive" disabled>Label</button>
 95 | 
 96 |     <hr />
 97 | 
 98 |     <h1>Icon component</h1>
 99 | 
100 |     <h2>Icons</h2>
101 |     <h3>For text icon use --text. Default color.</h3>
102 |     <div style="display: flex; flex-direction: row; flex-wrap:wrap;">
103 |       <div class="icon icon--adjust"></div>
104 |       <div class="icon icon--angle"></div>
105 |       <div class="icon icon--break"></div>
106 |       <div class="icon icon--close"></div>
107 |       <div class="icon icon--break"></div>
108 |       <div class="icon icon--ellipses"></div>
109 |       <div class="icon icon--eyedropper"></div>
110 |       <div class="icon icon--visible"></div>
111 |       <div class="icon icon--hidden"></div>
112 |       <div class="icon icon--hyperlink"></div>
113 |       <div class="icon icon--link"></div>
114 |       <div class="icon icon--link-broken"></div>
115 |       <div class="icon icon--lock"></div>
116 |       <div class="icon icon--unlock"></div>
117 |       <div class="icon icon--minus"></div>
118 |       <div class="icon icon--plus"></div>
119 |       <div class="icon icon--play"></div>
120 |       <div class="icon icon--recent"></div>
121 |       <div class="icon icon--resolve"></div>
122 |       <div class="icon icon--resolve-filled"></div>
123 |       <div class="icon icon--search"></div>
124 |       <div class="icon icon--trash"></div>
125 |       <div class="icon icon--text">W</div>
126 |       <div class="icon icon--text">H</div>
127 |       <div class="icon icon--text">X</div>
128 |       <div class="icon icon--text">Y</div>
129 |     </div>
130 | 
131 |     <h3>Modifier: --black-3</h3>
132 |     <div style="display: flex; flex-direction: row; flex-wrap:wrap;">
133 |       <div class="icon icon--adjust icon--black-3"></div>
134 |       <div class="icon icon--angle icon--black-3"></div>
135 |       <div class="icon icon--break icon--black-3"></div>
136 |       <div class="icon icon--close icon--black-3"></div>
137 |       <div class="icon icon--break icon--black-3"></div>
138 |       <div class="icon icon--ellipses icon--black-3"></div>
139 |       <div class="icon icon--eyedropper icon--black-3"></div>
140 |       <div class="icon icon--visible icon--black-3"></div>
141 |       <div class="icon icon--hidden icon--black-3"></div>
142 |       <div class="icon icon--hyperlink icon--black-3"></div>
143 |       <div class="icon icon--link icon--black-3"></div>
144 |       <div class="icon icon--link-broken icon--black-3"></div>
145 |       <div class="icon icon--lock icon--black-3"></div>
146 |       <div class="icon icon--unlock icon--black-3"></div>
147 |       <div class="icon icon--minus icon--black-3"></div>
148 |       <div class="icon icon--plus icon--black-3"></div>
149 |       <div class="icon icon--play icon--black-3"></div>
150 |       <div class="icon icon--recent icon--black-3"></div>
151 |       <div class="icon icon--resolve icon--black-3"></div>
152 |       <div class="icon icon--resolve-filled icon--black-3"></div>
153 |       <div class="icon icon--search icon--black-3"></div>
154 |       <div class="icon icon--trash icon--black-3"></div>
155 |       <div class="icon icon--text icon icon--black-3">W</div>
156 |       <div class="icon icon--text icon--black-3">H</div>
157 |       <div class="icon icon--text icon--black-3">X</div>
158 |       <div class="icon icon--text icon--black-3">Y</div>
159 |     </div>
160 | 
161 |     <h3>Modifier: --blue</h3>
162 |     <div style="display: flex; flex-direction: row; flex-wrap:wrap;">
163 |       <div class="icon icon--adjust icon--blue"></div>
164 |       <div class="icon icon--angle icon--blue"></div>
165 |       <div class="icon icon--break icon--blue"></div>
166 |       <div class="icon icon--close icon--blue"></div>
167 |       <div class="icon icon--break icon--blue"></div>
168 |       <div class="icon icon--ellipses icon--blue"></div>
169 |       <div class="icon icon--eyedropper icon--blue"></div>
170 |       <div class="icon icon--visible icon--blue"></div>
171 |       <div class="icon icon--hidden icon--blue"></div>
172 |       <div class="icon icon--hyperlink icon--blue"></div>
173 |       <div class="icon icon--link icon--blue"></div>
174 |       <div class="icon icon--link-broken icon--blue"></div>
175 |       <div class="icon icon--lock icon--blue"></div>
176 |       <div class="icon icon--unlock icon--blue"></div>
177 |       <div class="icon icon--minus icon--blue"></div>
178 |       <div class="icon icon--plus icon--blue"></div>
179 |       <div class="icon icon--play icon--blue"></div>
180 |       <div class="icon icon--recent icon--blue"></div>
181 |       <div class="icon icon--resolve icon--blue"></div>
182 |       <div class="icon icon--resolve-filled icon--blue"></div>
183 |       <div class="icon icon--search icon--blue"></div>
184 |       <div class="icon icon--trash icon--blue"></div>
185 |       <div class="icon icon--text icon--blue">W</div>
186 |       <div class="icon icon--text icon--blue">H</div>
187 |       <div class="icon icon--text icon--blue">X</div>
188 |       <div class="icon icon--text icon--blue">Y</div>
189 |     </div>
190 | 
191 |     <h2>Icon button</h2>
192 |     <h3>Modifier: --button</h3>
193 |     <div style="display: flex; flex-direction: row; flex-wrap:wrap;">
194 |       <div class="icon icon--adjust icon--button"></div>
195 |       <div class="icon icon--angle icon--button"></div>
196 |       <div class="icon icon--break icon--button"></div>
197 |       <div class="icon icon--close icon--button"></div>
198 |       <div class="icon icon--break icon--button"></div>
199 |       <div class="icon icon--ellipses icon--button"></div>
200 |       <div class="icon icon--eyedropper icon--button"></div>
201 |       <div class="icon icon--visible icon--button"></div>
202 |       <div class="icon icon--hidden icon--button"></div>
203 |       <div class="icon icon--hyperlink icon--button"></div>
204 |       <div class="icon icon--link icon--button"></div>
205 |       <div class="icon icon--link-broken icon--button"></div>
206 |       <div class="icon icon--lock icon--button"></div>
207 |       <div class="icon icon--unlock icon--button"></div>
208 |       <div class="icon icon--minus icon--button"></div>
209 |       <div class="icon icon--plus icon--button"></div>
210 |       <div class="icon icon--play icon--button"></div>
211 |       <div class="icon icon--recent icon--button"></div>
212 |       <div class="icon icon--resolve icon--button"></div>
213 |       <div class="icon icon--resolve-filled icon--button"></div>
214 |       <div class="icon icon--search icon--button"></div>
215 |       <div class="icon icon--trash icon--button"></div>
216 |     </div>
217 | 
218 |     <hr />
219 | 
220 |     <h1>Visual Bell</h1>
221 |     <br />
222 |     <div class="visual-bell">
223 |       <div class="visual-bell__spinner-container">
224 |         <span class="visual-bell__spinner"></span>
225 |       </div>
226 |       <span class="visual-bell__msg">Loading...</span>
227 |     </div>
228 |     <br />
229 |     <div class="visual-bell visual-bell--loading">
230 |       <div class="visual-bell__spinner-container">
231 |         <span class="visual-bell__spinner"></span>
232 |       </div>
233 |       <span class="visual-bell__msg">Loading...</span>
234 |     </div>
235 |     <br />
236 |     <div class="visual-bell visual-bell--error">
237 |       <div class="visual-bell__spinner-container">
238 |         <span class="visual-bell__spinner"></span>
239 |       </div>
240 |       <span class="visual-bell__msg">Loading...</span>
241 |     </div>
242 |     <br />
243 | 
244 |     <hr />
245 | 
246 |     <h1>Onboarding tip</h1>
247 |     <br />
248 |     <div class="onboarding-tip">
249 |       <div class="onboarding-tip__icon">
250 |         <div class="icon icon--visible"></div>
251 |       </div>
252 |       <div class="onboarding-tip__msg">Your onboarding tip goes here.</div>
253 |     </div>
254 |   </div>
255 | </template>
256 | 
257 | <style>
258 | /* these styles are just used for presentation of components */
259 | 
260 | body {
261 |   width: 400px;
262 |   margin: 24px auto 150px auto;
263 | }
264 | 
265 | h1,
266 | h2,
267 | h3 {
268 |   box-sizing: border-box;
269 |   margin-top: 12px;
270 |   margin-bottom: 12px;
271 | 
272 |   font-family: sans-serif;
273 | }
274 | 
275 | h1 {
276 |   font-size: 24px;
277 | }
278 | 
279 | h2 {
280 |   font-size: 16px;
281 |   font-weight: 500;
282 | }
283 | 
284 | h3 {
285 |   font-size: 14px;
286 |   font-weight: normal;
287 | }
288 | 
289 | hr {
290 |   margin: 48px 0 48px 0;
291 |   border-top: 1px solid #cccccc;
292 |   border-bottom: none;
293 |   outline: none;
294 | }
295 | </style>
296 | 


--------------------------------------------------------------------------------
/src/typings/figma.d.ts:
--------------------------------------------------------------------------------
  1 | // Figma Plugin API version 1, update 9
  2 | 
  3 | declare global {
  4 |   // Global variable with Figma's plugin API.
  5 |   const figma: PluginAPI;
  6 |   const __html__: string;
  7 | 
  8 |   interface PluginAPI {
  9 |     readonly apiVersion: '1.0.0';
 10 |     readonly command: string;
 11 |     readonly viewport: ViewportAPI;
 12 |     closePlugin(message?: string): void;
 13 | 
 14 |     notify(message: string, options?: NotificationOptions): NotificationHandler;
 15 | 
 16 |     showUI(html: string, options?: ShowUIOptions): void;
 17 |     readonly ui: UIAPI;
 18 | 
 19 |     readonly clientStorage: ClientStorageAPI;
 20 | 
 21 |     getNodeById(id: string): BaseNode | null;
 22 |     getStyleById(id: string): BaseStyle | null;
 23 | 
 24 |     readonly root: DocumentNode;
 25 |     currentPage: PageNode;
 26 | 
 27 |     on(
 28 |       type: 'selectionchange' | 'currentpagechange' | 'close',
 29 |       callback: () => void
 30 |     ): void;
 31 |     once(
 32 |       type: 'selectionchange' | 'currentpagechange' | 'close',
 33 |       callback: () => void
 34 |     ): void;
 35 |     off(
 36 |       type: 'selectionchange' | 'currentpagechange' | 'close',
 37 |       callback: () => void
 38 |     ): void;
 39 | 
 40 |     readonly mixed: unique symbol;
 41 | 
 42 |     createRectangle(): RectangleNode;
 43 |     createLine(): LineNode;
 44 |     createEllipse(): EllipseNode;
 45 |     createPolygon(): PolygonNode;
 46 |     createStar(): StarNode;
 47 |     createVector(): VectorNode;
 48 |     createText(): TextNode;
 49 |     createFrame(): FrameNode;
 50 |     createComponent(): ComponentNode;
 51 |     createPage(): PageNode;
 52 |     createSlice(): SliceNode;
 53 |     /**
 54 |      * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead.
 55 |      */
 56 |     createBooleanOperation(): BooleanOperationNode;
 57 | 
 58 |     createPaintStyle(): PaintStyle;
 59 |     createTextStyle(): TextStyle;
 60 |     createEffectStyle(): EffectStyle;
 61 |     createGridStyle(): GridStyle;
 62 | 
 63 |     // The styles are returned in the same order as displayed in the UI. Only
 64 |     // local styles are returned. Never styles from team library.
 65 |     getLocalPaintStyles(): PaintStyle[];
 66 |     getLocalTextStyles(): TextStyle[];
 67 |     getLocalEffectStyles(): EffectStyle[];
 68 |     getLocalGridStyles(): GridStyle[];
 69 | 
 70 |     importComponentByKeyAsync(key: string): Promise<ComponentNode>;
 71 |     importStyleByKeyAsync(key: string): Promise<BaseStyle>;
 72 | 
 73 |     listAvailableFontsAsync(): Promise<Font[]>;
 74 |     loadFontAsync(fontName: FontName): Promise<void>;
 75 |     readonly hasMissingFont: boolean;
 76 | 
 77 |     createNodeFromSvg(svg: string): FrameNode;
 78 | 
 79 |     createImage(data: Uint8Array): Image;
 80 |     getImageByHash(hash: string): Image;
 81 | 
 82 |     group(
 83 |       nodes: ReadonlyArray<BaseNode>,
 84 |       parent: BaseNode & ChildrenMixin,
 85 |       index?: number
 86 |     ): GroupNode;
 87 |     flatten(
 88 |       nodes: ReadonlyArray<BaseNode>,
 89 |       parent?: BaseNode & ChildrenMixin,
 90 |       index?: number
 91 |     ): VectorNode;
 92 | 
 93 |     union(
 94 |       nodes: ReadonlyArray<BaseNode>,
 95 |       parent: BaseNode & ChildrenMixin,
 96 |       index?: number
 97 |     ): BooleanOperationNode;
 98 |     subtract(
 99 |       nodes: ReadonlyArray<BaseNode>,
100 |       parent: BaseNode & ChildrenMixin,
101 |       index?: number
102 |     ): BooleanOperationNode;
103 |     intersect(
104 |       nodes: ReadonlyArray<BaseNode>,
105 |       parent: BaseNode & ChildrenMixin,
106 |       index?: number
107 |     ): BooleanOperationNode;
108 |     exclude(
109 |       nodes: ReadonlyArray<BaseNode>,
110 |       parent: BaseNode & ChildrenMixin,
111 |       index?: number
112 |     ): BooleanOperationNode;
113 |   }
114 | 
115 |   interface ClientStorageAPI {
116 |     getAsync(key: string): Promise<any | undefined>;
117 |     setAsync(key: string, value: any): Promise<void>;
118 |   }
119 | 
120 |   interface NotificationOptions {
121 |     timeout?: number;
122 |   }
123 | 
124 |   interface NotificationHandler {
125 |     cancel: () => void;
126 |   }
127 | 
128 |   interface ShowUIOptions {
129 |     visible?: boolean;
130 |     width?: number;
131 |     height?: number;
132 |   }
133 | 
134 |   interface UIPostMessageOptions {
135 |     origin?: string;
136 |   }
137 | 
138 |   interface OnMessageProperties {
139 |     origin: string;
140 |   }
141 | 
142 |   type MessageEventHandler = (
143 |     pluginMessage: any,
144 |     props: OnMessageProperties
145 |   ) => void;
146 | 
147 |   interface UIAPI {
148 |     show(): void;
149 |     hide(): void;
150 |     resize(width: number, height: number): void;
151 |     close(): void;
152 | 
153 |     postMessage(pluginMessage: any, options?: UIPostMessageOptions): void;
154 |     onmessage: MessageEventHandler | undefined;
155 |     on(type: 'message', callback: MessageEventHandler): void;
156 |     once(type: 'message', callback: MessageEventHandler): void;
157 |     off(type: 'message', callback: MessageEventHandler): void;
158 |   }
159 | 
160 |   interface ViewportAPI {
161 |     center: { x: number; y: number };
162 |     zoom: number;
163 |     scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>): void;
164 |   }
165 | 
166 |   ////////////////////////////////////////////////////////////////////////////////
167 |   // Datatypes
168 | 
169 |   type Transform = [[number, number, number], [number, number, number]];
170 | 
171 |   interface Vector {
172 |     readonly x: number;
173 |     readonly y: number;
174 |   }
175 | 
176 |   interface RGB {
177 |     readonly r: number;
178 |     readonly g: number;
179 |     readonly b: number;
180 |   }
181 | 
182 |   interface RGBA {
183 |     readonly r: number;
184 |     readonly g: number;
185 |     readonly b: number;
186 |     readonly a: number;
187 |   }
188 | 
189 |   interface FontName {
190 |     readonly family: string;
191 |     readonly style: string;
192 |   }
193 | 
194 |   type TextCase = 'ORIGINAL' | 'UPPER' | 'LOWER' | 'TITLE';
195 | 
196 |   type TextDecoration = 'NONE' | 'UNDERLINE' | 'STRIKETHROUGH';
197 | 
198 |   interface ArcData {
199 |     readonly startingAngle: number;
200 |     readonly endingAngle: number;
201 |     readonly innerRadius: number;
202 |   }
203 | 
204 |   interface ShadowEffect {
205 |     readonly type: 'DROP_SHADOW' | 'INNER_SHADOW';
206 |     readonly color: RGBA;
207 |     readonly offset: Vector;
208 |     readonly radius: number;
209 |     readonly visible: boolean;
210 |     readonly blendMode: BlendMode;
211 |   }
212 | 
213 |   interface BlurEffect {
214 |     readonly type: 'LAYER_BLUR' | 'BACKGROUND_BLUR';
215 |     readonly radius: number;
216 |     readonly visible: boolean;
217 |   }
218 | 
219 |   type Effect = ShadowEffect | BlurEffect;
220 | 
221 |   type ConstraintType = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'SCALE';
222 | 
223 |   interface Constraints {
224 |     readonly horizontal: ConstraintType;
225 |     readonly vertical: ConstraintType;
226 |   }
227 | 
228 |   interface ColorStop {
229 |     readonly position: number;
230 |     readonly color: RGBA;
231 |   }
232 | 
233 |   interface ImageFilters {
234 |     readonly exposure?: number;
235 |     readonly contrast?: number;
236 |     readonly saturation?: number;
237 |     readonly temperature?: number;
238 |     readonly tint?: number;
239 |     readonly highlights?: number;
240 |     readonly shadows?: number;
241 |   }
242 | 
243 |   interface SolidPaint {
244 |     readonly type: 'SOLID';
245 |     readonly color: RGB;
246 | 
247 |     readonly visible?: boolean;
248 |     readonly opacity?: number;
249 |     readonly blendMode?: BlendMode;
250 |   }
251 | 
252 |   interface GradientPaint {
253 |     readonly type:
254 |       | 'GRADIENT_LINEAR'
255 |       | 'GRADIENT_RADIAL'
256 |       | 'GRADIENT_ANGULAR'
257 |       | 'GRADIENT_DIAMOND';
258 |     readonly gradientTransform: Transform;
259 |     readonly gradientStops: ReadonlyArray<ColorStop>;
260 | 
261 |     readonly visible?: boolean;
262 |     readonly opacity?: number;
263 |     readonly blendMode?: BlendMode;
264 |   }
265 | 
266 |   interface ImagePaint {
267 |     readonly type: 'IMAGE';
268 |     readonly scaleMode: 'FILL' | 'FIT' | 'CROP' | 'TILE';
269 |     readonly imageHash: string | null;
270 |     readonly imageTransform?: Transform; // setting for "CROP"
271 |     readonly scalingFactor?: number; // setting for "TILE"
272 |     readonly filters?: ImageFilters;
273 | 
274 |     readonly visible?: boolean;
275 |     readonly opacity?: number;
276 |     readonly blendMode?: BlendMode;
277 |   }
278 | 
279 |   type Paint = SolidPaint | GradientPaint | ImagePaint;
280 | 
281 |   interface Guide {
282 |     readonly axis: 'X' | 'Y';
283 |     readonly offset: number;
284 |   }
285 | 
286 |   interface RowsColsLayoutGrid {
287 |     readonly pattern: 'ROWS' | 'COLUMNS';
288 |     readonly alignment: 'MIN' | 'MAX' | 'STRETCH' | 'CENTER';
289 |     readonly gutterSize: number;
290 | 
291 |     readonly count: number; // Infinity when "Auto" is set in the UI
292 |     readonly sectionSize?: number; // Not set for alignment: "STRETCH"
293 |     readonly offset?: number; // Not set for alignment: "CENTER"
294 | 
295 |     readonly visible?: boolean;
296 |     readonly color?: RGBA;
297 |   }
298 | 
299 |   interface GridLayoutGrid {
300 |     readonly pattern: 'GRID';
301 |     readonly sectionSize: number;
302 | 
303 |     readonly visible?: boolean;
304 |     readonly color?: RGBA;
305 |   }
306 | 
307 |   type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid;
308 | 
309 |   interface ExportSettingsConstraints {
310 |     readonly type: 'SCALE' | 'WIDTH' | 'HEIGHT';
311 |     readonly value: number;
312 |   }
313 | 
314 |   interface ExportSettingsImage {
315 |     readonly format: 'JPG' | 'PNG';
316 |     readonly contentsOnly?: boolean; // defaults to true
317 |     readonly suffix?: string;
318 |     readonly constraint?: ExportSettingsConstraints;
319 |   }
320 | 
321 |   interface ExportSettingsSVG {
322 |     readonly format: 'SVG';
323 |     readonly contentsOnly?: boolean; // defaults to true
324 |     readonly suffix?: string;
325 |     readonly svgOutlineText?: boolean; // defaults to true
326 |     readonly svgIdAttribute?: boolean; // defaults to false
327 |     readonly svgSimplifyStroke?: boolean; // defaults to true
328 |   }
329 | 
330 |   interface ExportSettingsPDF {
331 |     readonly format: 'PDF';
332 |     readonly contentsOnly?: boolean; // defaults to true
333 |     readonly suffix?: string;
334 |   }
335 | 
336 |   type ExportSettings =
337 |     | ExportSettingsImage
338 |     | ExportSettingsSVG
339 |     | ExportSettingsPDF;
340 | 
341 |   type WindingRule = 'NONZERO' | 'EVENODD';
342 | 
343 |   interface VectorVertex {
344 |     readonly x: number;
345 |     readonly y: number;
346 |     readonly strokeCap?: StrokeCap;
347 |     readonly strokeJoin?: StrokeJoin;
348 |     readonly cornerRadius?: number;
349 |     readonly handleMirroring?: HandleMirroring;
350 |   }
351 | 
352 |   interface VectorSegment {
353 |     readonly start: number;
354 |     readonly end: number;
355 |     readonly tangentStart?: Vector; // Defaults to { x: 0, y: 0 }
356 |     readonly tangentEnd?: Vector; // Defaults to { x: 0, y: 0 }
357 |   }
358 | 
359 |   interface VectorRegion {
360 |     readonly windingRule: WindingRule;
361 |     readonly loops: ReadonlyArray<ReadonlyArray<number>>;
362 |   }
363 | 
364 |   interface VectorNetwork {
365 |     readonly vertices: ReadonlyArray<VectorVertex>;
366 |     readonly segments: ReadonlyArray<VectorSegment>;
367 |     readonly regions?: ReadonlyArray<VectorRegion>; // Defaults to []
368 |   }
369 | 
370 |   interface VectorPath {
371 |     readonly windingRule: WindingRule | 'NONE';
372 |     readonly data: string;
373 |   }
374 | 
375 |   type VectorPaths = ReadonlyArray<VectorPath>;
376 | 
377 |   interface LetterSpacing {
378 |     readonly value: number;
379 |     readonly unit: 'PIXELS' | 'PERCENT';
380 |   }
381 | 
382 |   type LineHeight =
383 |     | {
384 |         readonly value: number;
385 |         readonly unit: 'PIXELS' | 'PERCENT';
386 |       }
387 |     | {
388 |         readonly unit: 'AUTO';
389 |       };
390 | 
391 |   type BlendMode =
392 |     | 'PASS_THROUGH'
393 |     | 'NORMAL'
394 |     | 'DARKEN'
395 |     | 'MULTIPLY'
396 |     | 'LINEAR_BURN'
397 |     | 'COLOR_BURN'
398 |     | 'LIGHTEN'
399 |     | 'SCREEN'
400 |     | 'LINEAR_DODGE'
401 |     | 'COLOR_DODGE'
402 |     | 'OVERLAY'
403 |     | 'SOFT_LIGHT'
404 |     | 'HARD_LIGHT'
405 |     | 'DIFFERENCE'
406 |     | 'EXCLUSION'
407 |     | 'HUE'
408 |     | 'SATURATION'
409 |     | 'COLOR'
410 |     | 'LUMINOSITY';
411 | 
412 |   interface Font {
413 |     fontName: FontName;
414 |   }
415 | 
416 |   type Reaction = { action: Action; trigger: Trigger };
417 | 
418 |   type Action =
419 |     | { readonly type: 'BACK' | 'CLOSE' }
420 |     | { readonly type: 'URL'; url: string }
421 |     | {
422 |         readonly type: 'NODE';
423 |         readonly destinationId: string | null;
424 |         readonly navigation: Navigation;
425 |         readonly transition: Transition | null;
426 |         readonly preserveScrollPosition: boolean;
427 | 
428 |         // Only present if navigation == "OVERLAY" and the destination uses
429 |         // overlay position type "RELATIVE"
430 |         readonly overlayRelativePosition?: Vector;
431 |       };
432 | 
433 |   interface SimpleTransition {
434 |     readonly type: 'DISSOLVE' | 'SMART_ANIMATE';
435 |     readonly easing: Easing;
436 |     readonly duration: number;
437 |   }
438 | 
439 |   interface DirectionalTransition {
440 |     readonly type: 'MOVE_IN' | 'MOVE_OUT' | 'PUSH' | 'SLIDE_IN' | 'SLIDE_OUT';
441 |     readonly direction: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM';
442 |     readonly matchLayers: boolean;
443 | 
444 |     readonly easing: Easing;
445 |     readonly duration: number;
446 |   }
447 | 
448 |   export type Transition = SimpleTransition | DirectionalTransition;
449 | 
450 |   type Trigger =
451 |     | { readonly type: 'ON_CLICK' | 'ON_HOVER' | 'ON_PRESS' | 'ON_DRAG' }
452 |     | { readonly type: 'AFTER_TIMEOUT'; readonly timeout: number }
453 |     | {
454 |         readonly type:
455 |           | 'MOUSE_ENTER'
456 |           | 'MOUSE_LEAVE'
457 |           | 'MOUSE_UP'
458 |           | 'MOUSE_DOWN';
459 |         readonly delay: number;
460 |       };
461 | 
462 |   type Navigation = 'NAVIGATE' | 'SWAP' | 'OVERLAY';
463 | 
464 |   interface Easing {
465 |     readonly type: 'EASE_IN' | 'EASE_OUT' | 'EASE_IN_AND_OUT' | 'LINEAR';
466 |   }
467 | 
468 |   type OverflowDirection = 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'BOTH';
469 | 
470 |   type OverlayPositionType =
471 |     | 'CENTER'
472 |     | 'TOP_LEFT'
473 |     | 'TOP_CENTER'
474 |     | 'TOP_RIGHT'
475 |     | 'BOTTOM_LEFT'
476 |     | 'BOTTOM_CENTER'
477 |     | 'BOTTOM_RIGHT'
478 |     | 'MANUAL';
479 | 
480 |   type OverlayBackground =
481 |     | { readonly type: 'NONE' }
482 |     | { readonly type: 'SOLID_COLOR'; readonly color: RGBA };
483 | 
484 |   type OverlayBackgroundInteraction = 'NONE' | 'CLOSE_ON_CLICK_OUTSIDE';
485 | 
486 |   ////////////////////////////////////////////////////////////////////////////////
487 |   // Mixins
488 | 
489 |   interface BaseNodeMixin {
490 |     readonly id: string;
491 |     readonly parent: (BaseNode & ChildrenMixin) | null;
492 |     name: string; // Note: setting this also sets \`autoRename\` to false on TextNodes
493 |     readonly removed: boolean;
494 |     toString(): string;
495 |     remove(): void;
496 | 
497 |     getPluginData(key: string): string;
498 |     setPluginData(key: string, value: string): void;
499 | 
500 |     // Namespace is a string that must be at least 3 alphanumeric characters, and should
501 |     // be a name related to your plugin. Other plugins will be able to read this data.
502 |     getSharedPluginData(namespace: string, key: string): string;
503 |     setSharedPluginData(namespace: string, key: string, value: string): void;
504 |   }
505 | 
506 |   interface SceneNodeMixin {
507 |     visible: boolean;
508 |     locked: boolean;
509 |   }
510 | 
511 |   interface ChildrenMixin {
512 |     readonly children: ReadonlyArray<SceneNode>;
513 | 
514 |     appendChild(child: SceneNode): void;
515 |     insertChild(index: number, child: SceneNode): void;
516 | 
517 |     findAll(callback?: (node: SceneNode) => boolean): SceneNode[];
518 |     findOne(callback: (node: SceneNode) => boolean): SceneNode | null;
519 |   }
520 | 
521 |   interface ConstraintMixin {
522 |     constraints: Constraints;
523 |   }
524 | 
525 |   interface LayoutMixin {
526 |     readonly absoluteTransform: Transform;
527 |     relativeTransform: Transform;
528 |     x: number;
529 |     y: number;
530 |     rotation: number; // In degrees
531 | 
532 |     readonly width: number;
533 |     readonly height: number;
534 | 
535 |     layoutAlign: 'MIN' | 'CENTER' | 'MAX'; // applicable only inside auto-layout frames
536 | 
537 |     resize(width: number, height: number): void;
538 |     resizeWithoutConstraints(width: number, height: number): void;
539 |   }
540 | 
541 |   interface BlendMixin {
542 |     opacity: number;
543 |     blendMode: BlendMode;
544 |     isMask: boolean;
545 |     effects: ReadonlyArray<Effect>;
546 |     effectStyleId: string;
547 |   }
548 | 
549 |   interface ContainerMixin {
550 |     backgrounds: ReadonlyArray<Paint>; // DEPRECATED: use 'fills' instead
551 |     layoutGrids: ReadonlyArray<LayoutGrid>;
552 |     clipsContent: boolean;
553 |     guides: ReadonlyArray<Guide>;
554 |     gridStyleId: string;
555 |     backgroundStyleId: string; // DEPRECATED: use 'fillStyleId' instead
556 |   }
557 | 
558 |   type StrokeCap =
559 |     | 'NONE'
560 |     | 'ROUND'
561 |     | 'SQUARE'
562 |     | 'ARROW_LINES'
563 |     | 'ARROW_EQUILATERAL';
564 |   type StrokeJoin = 'MITER' | 'BEVEL' | 'ROUND';
565 |   type HandleMirroring = 'NONE' | 'ANGLE' | 'ANGLE_AND_LENGTH';
566 | 
567 |   interface GeometryMixin {
568 |     fills: ReadonlyArray<Paint> | PluginAPI['mixed'];
569 |     strokes: ReadonlyArray<Paint>;
570 |     strokeWeight: number;
571 |     strokeAlign: 'CENTER' | 'INSIDE' | 'OUTSIDE';
572 |     strokeCap: StrokeCap | PluginAPI['mixed'];
573 |     strokeJoin: StrokeJoin | PluginAPI['mixed'];
574 |     dashPattern: ReadonlyArray<number>;
575 |     fillStyleId: string | PluginAPI['mixed'];
576 |     strokeStyleId: string;
577 |   }
578 | 
579 |   interface CornerMixin {
580 |     cornerRadius: number | PluginAPI['mixed'];
581 |     cornerSmoothing: number;
582 |   }
583 | 
584 |   interface RectangleCornerMixin {
585 |     topLeftRadius: number;
586 |     topRightRadius: number;
587 |     bottomLeftRadius: number;
588 |     bottomRightRadius: number;
589 |   }
590 | 
591 |   interface ExportMixin {
592 |     exportSettings: ReadonlyArray<ExportSettings>;
593 |     exportAsync(settings?: ExportSettings): Promise<Uint8Array>; // Defaults to PNG format
594 |   }
595 | 
596 |   interface ReactionMixin {
597 |     readonly reactions: ReadonlyArray<Reaction>; // PROPOSED API ONLY
598 |   }
599 | 
600 |   interface DefaultShapeMixin
601 |     extends BaseNodeMixin,
602 |       SceneNodeMixin,
603 |       ReactionMixin,
604 |       BlendMixin,
605 |       GeometryMixin,
606 |       LayoutMixin,
607 |       ExportMixin {}
608 | 
609 |   interface DefaultFrameMixin
610 |     extends BaseNodeMixin,
611 |       SceneNodeMixin,
612 |       ReactionMixin,
613 |       ChildrenMixin,
614 |       ContainerMixin,
615 |       GeometryMixin,
616 |       CornerMixin,
617 |       RectangleCornerMixin,
618 |       BlendMixin,
619 |       ConstraintMixin,
620 |       LayoutMixin,
621 |       ExportMixin {
622 |     layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
623 |     counterAxisSizingMode: 'FIXED' | 'AUTO'; // applicable only if layoutMode != "NONE"
624 |     horizontalPadding: number; // applicable only if layoutMode != "NONE"
625 |     verticalPadding: number; // applicable only if layoutMode != "NONE"
626 |     itemSpacing: number; // applicable only if layoutMode != "NONE"
627 | 
628 |     overflowDirection: OverflowDirection; // PROPOSED API ONLY
629 |     numberOfFixedChildren: number; // PROPOSED API ONLY
630 | 
631 |     readonly overlayPositionType: OverlayPositionType; // PROPOSED API ONLY
632 |     readonly overlayBackground: OverlayBackground; // PROPOSED API ONLY
633 |     readonly overlayBackgroundInteraction: OverlayBackgroundInteraction; // PROPOSED API ONLY
634 |   }
635 | 
636 |   ////////////////////////////////////////////////////////////////////////////////
637 |   // Nodes
638 | 
639 |   interface DocumentNode extends BaseNodeMixin {
640 |     readonly type: 'DOCUMENT';
641 | 
642 |     readonly children: ReadonlyArray<PageNode>;
643 | 
644 |     appendChild(child: PageNode): void;
645 |     insertChild(index: number, child: PageNode): void;
646 | 
647 |     findAll(
648 |       callback?: (node: PageNode | SceneNode) => boolean
649 |     ): Array<PageNode | SceneNode>;
650 |     findOne(
651 |       callback: (node: PageNode | SceneNode) => boolean
652 |     ): PageNode | SceneNode | null;
653 |   }
654 | 
655 |   interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
656 |     readonly type: 'PAGE';
657 |     clone(): PageNode;
658 | 
659 |     guides: ReadonlyArray<Guide>;
660 |     selection: ReadonlyArray<SceneNode>;
661 | 
662 |     backgrounds: ReadonlyArray<Paint>;
663 | 
664 |     readonly prototypeStartNode:
665 |       | FrameNode
666 |       | GroupNode
667 |       | ComponentNode
668 |       | InstanceNode
669 |       | null; // PROPOSED API ONLY
670 |   }
671 | 
672 |   interface FrameNode extends DefaultFrameMixin {
673 |     readonly type: 'FRAME';
674 |     clone(): FrameNode;
675 |   }
676 | 
677 |   interface GroupNode
678 |     extends BaseNodeMixin,
679 |       SceneNodeMixin,
680 |       ReactionMixin,
681 |       ChildrenMixin,
682 |       ContainerMixin,
683 |       BlendMixin,
684 |       LayoutMixin,
685 |       ExportMixin {
686 |     readonly type: 'GROUP';
687 |     clone(): GroupNode;
688 |   }
689 | 
690 |   interface SliceNode
691 |     extends BaseNodeMixin,
692 |       SceneNodeMixin,
693 |       LayoutMixin,
694 |       ExportMixin {
695 |     readonly type: 'SLICE';
696 |     clone(): SliceNode;
697 |   }
698 | 
699 |   interface RectangleNode
700 |     extends DefaultShapeMixin,
701 |       ConstraintMixin,
702 |       CornerMixin,
703 |       RectangleCornerMixin {
704 |     readonly type: 'RECTANGLE';
705 |     clone(): RectangleNode;
706 |   }
707 | 
708 |   interface LineNode extends DefaultShapeMixin, ConstraintMixin {
709 |     readonly type: 'LINE';
710 |     clone(): LineNode;
711 |   }
712 | 
713 |   interface EllipseNode
714 |     extends DefaultShapeMixin,
715 |       ConstraintMixin,
716 |       CornerMixin {
717 |     readonly type: 'ELLIPSE';
718 |     clone(): EllipseNode;
719 |     arcData: ArcData;
720 |   }
721 | 
722 |   interface PolygonNode
723 |     extends DefaultShapeMixin,
724 |       ConstraintMixin,
725 |       CornerMixin {
726 |     readonly type: 'POLYGON';
727 |     clone(): PolygonNode;
728 |     pointCount: number;
729 |   }
730 | 
731 |   interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
732 |     readonly type: 'STAR';
733 |     clone(): StarNode;
734 |     pointCount: number;
735 |     innerRadius: number;
736 |   }
737 | 
738 |   interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin {
739 |     readonly type: 'VECTOR';
740 |     clone(): VectorNode;
741 |     vectorNetwork: VectorNetwork;
742 |     vectorPaths: VectorPaths;
743 |     handleMirroring: HandleMirroring | PluginAPI['mixed'];
744 |   }
745 | 
746 |   interface TextNode extends DefaultShapeMixin, ConstraintMixin {
747 |     readonly type: 'TEXT';
748 |     clone(): TextNode;
749 |     characters: string;
750 |     readonly hasMissingFont: boolean;
751 |     textAlignHorizontal: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED';
752 |     textAlignVertical: 'TOP' | 'CENTER' | 'BOTTOM';
753 |     textAutoResize: 'NONE' | 'WIDTH_AND_HEIGHT' | 'HEIGHT';
754 |     paragraphIndent: number;
755 |     paragraphSpacing: number;
756 |     autoRename: boolean;
757 | 
758 |     textStyleId: string | PluginAPI['mixed'];
759 |     fontSize: number | PluginAPI['mixed'];
760 |     fontName: FontName | PluginAPI['mixed'];
761 |     textCase: TextCase | PluginAPI['mixed'];
762 |     textDecoration: TextDecoration | PluginAPI['mixed'];
763 |     letterSpacing: LetterSpacing | PluginAPI['mixed'];
764 |     lineHeight: LineHeight | PluginAPI['mixed'];
765 | 
766 |     getRangeFontSize(start: number, end: number): number | PluginAPI['mixed'];
767 |     setRangeFontSize(start: number, end: number, value: number): void;
768 |     getRangeFontName(start: number, end: number): FontName | PluginAPI['mixed'];
769 |     setRangeFontName(start: number, end: number, value: FontName): void;
770 |     getRangeTextCase(start: number, end: number): TextCase | PluginAPI['mixed'];
771 |     setRangeTextCase(start: number, end: number, value: TextCase): void;
772 |     getRangeTextDecoration(
773 |       start: number,
774 |       end: number
775 |     ): TextDecoration | PluginAPI['mixed'];
776 |     setRangeTextDecoration(
777 |       start: number,
778 |       end: number,
779 |       value: TextDecoration
780 |     ): void;
781 |     getRangeLetterSpacing(
782 |       start: number,
783 |       end: number
784 |     ): LetterSpacing | PluginAPI['mixed'];
785 |     setRangeLetterSpacing(
786 |       start: number,
787 |       end: number,
788 |       value: LetterSpacing
789 |     ): void;
790 |     getRangeLineHeight(
791 |       start: number,
792 |       end: number
793 |     ): LineHeight | PluginAPI['mixed'];
794 |     setRangeLineHeight(start: number, end: number, value: LineHeight): void;
795 |     getRangeFills(start: number, end: number): Paint[] | PluginAPI['mixed'];
796 |     setRangeFills(start: number, end: number, value: Paint[]): void;
797 |     getRangeTextStyleId(
798 |       start: number,
799 |       end: number
800 |     ): string | PluginAPI['mixed'];
801 |     setRangeTextStyleId(start: number, end: number, value: string): void;
802 |     getRangeFillStyleId(
803 |       start: number,
804 |       end: number
805 |     ): string | PluginAPI['mixed'];
806 |     setRangeFillStyleId(start: number, end: number, value: string): void;
807 |   }
808 | 
809 |   interface ComponentNode extends DefaultFrameMixin {
810 |     readonly type: 'COMPONENT';
811 |     clone(): ComponentNode;
812 | 
813 |     createInstance(): InstanceNode;
814 |     description: string;
815 |     readonly remote: boolean;
816 |     readonly key: string; // The key to use with "importComponentByKeyAsync"
817 |   }
818 | 
819 |   interface InstanceNode extends DefaultFrameMixin {
820 |     readonly type: 'INSTANCE';
821 |     clone(): InstanceNode;
822 |     masterComponent: ComponentNode;
823 |   }
824 | 
825 |   interface BooleanOperationNode
826 |     extends DefaultShapeMixin,
827 |       ChildrenMixin,
828 |       CornerMixin {
829 |     readonly type: 'BOOLEAN_OPERATION';
830 |     clone(): BooleanOperationNode;
831 |     booleanOperation: 'UNION' | 'INTERSECT' | 'SUBTRACT' | 'EXCLUDE';
832 |   }
833 | 
834 |   type BaseNode = DocumentNode | PageNode | SceneNode;
835 | 
836 |   type SceneNode =
837 |     | SliceNode
838 |     | FrameNode
839 |     | GroupNode
840 |     | ComponentNode
841 |     | InstanceNode
842 |     | BooleanOperationNode
843 |     | VectorNode
844 |     | StarNode
845 |     | LineNode
846 |     | EllipseNode
847 |     | PolygonNode
848 |     | RectangleNode
849 |     | TextNode;
850 | 
851 |   type NodeType =
852 |     | 'DOCUMENT'
853 |     | 'PAGE'
854 |     | 'SLICE'
855 |     | 'FRAME'
856 |     | 'GROUP'
857 |     | 'COMPONENT'
858 |     | 'INSTANCE'
859 |     | 'BOOLEAN_OPERATION'
860 |     | 'VECTOR'
861 |     | 'STAR'
862 |     | 'LINE'
863 |     | 'ELLIPSE'
864 |     | 'POLYGON'
865 |     | 'RECTANGLE'
866 |     | 'TEXT';
867 | 
868 |   ////////////////////////////////////////////////////////////////////////////////
869 |   // Styles
870 |   type StyleType = 'PAINT' | 'TEXT' | 'EFFECT' | 'GRID';
871 | 
872 |   interface BaseStyle {
873 |     readonly id: string;
874 |     readonly type: StyleType;
875 |     name: string;
876 |     description: string;
877 |     remote: boolean;
878 |     readonly key: string; // The key to use with "importStyleByKeyAsync"
879 |     remove(): void;
880 |   }
881 | 
882 |   interface PaintStyle extends BaseStyle {
883 |     type: 'PAINT';
884 |     paints: ReadonlyArray<Paint>;
885 |   }
886 | 
887 |   interface TextStyle extends BaseStyle {
888 |     type: 'TEXT';
889 |     fontSize: number;
890 |     textDecoration: TextDecoration;
891 |     fontName: FontName;
892 |     letterSpacing: LetterSpacing;
893 |     lineHeight: LineHeight;
894 |     paragraphIndent: number;
895 |     paragraphSpacing: number;
896 |     textCase: TextCase;
897 |   }
898 | 
899 |   interface EffectStyle extends BaseStyle {
900 |     type: 'EFFECT';
901 |     effects: ReadonlyArray<Effect>;
902 |   }
903 | 
904 |   interface GridStyle extends BaseStyle {
905 |     type: 'GRID';
906 |     layoutGrids: ReadonlyArray<LayoutGrid>;
907 |   }
908 | 
909 |   ////////////////////////////////////////////////////////////////////////////////
910 |   // Other
911 | 
912 |   interface Image {
913 |     readonly hash: string;
914 |     getBytesAsync(): Promise<Uint8Array>;
915 |   }
916 | } // declare global
917 | 
918 | export {};
919 | 


--------------------------------------------------------------------------------
/src/ui/assets/styleguide/main.css:
--------------------------------------------------------------------------------
   1 | /* https://www.figma.com/plugin-docs/figma-components/ */
   2 | * {
   3 |   -webkit-box-sizing: border-box;
   4 |           box-sizing: border-box;
   5 | }
   6 | 
   7 | /*  Typography */
   8 | @font-face {
   9 |   font-family: 'Inter';
  10 |   font-style: normal;
  11 |   font-weight: 400;
  12 |   src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.7") format("woff");
  13 | }
  14 | 
  15 | @font-face {
  16 |   font-family: 'Inter';
  17 |   font-style: normal;
  18 |   font-weight: 500;
  19 |   src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7") format("woff");
  20 | }
  21 | 
  22 | @font-face {
  23 |   font-family: 'Inter';
  24 |   font-style: normal;
  25 |   font-weight: 600;
  26 |   src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7") format("woff2"), url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7") format("woff");
  27 | }
  28 | 
  29 | .icon {
  30 |   width: 32px;
  31 |   height: 32px;
  32 |   cursor: default;
  33 |   color: #000000;
  34 |   background-repeat: no-repeat;
  35 |   background-position: 0 0;
  36 | }
  37 | 
  38 | .icon--blue {
  39 |   color: #18a0fb;
  40 |   background-position: 0 -64px;
  41 | }
  42 | 
  43 | .icon--black-3 {
  44 |   color: rgba(0, 0, 0, 0.3);
  45 |   background-position: 0 -32px;
  46 | }
  47 | 
  48 | .icon--button {
  49 |   border: 2px solid transparent;
  50 |   border-radius: 2px;
  51 |   outline: none;
  52 |   background-position: -2px -2px;
  53 | }
  54 | 
  55 | .icon--button:hover {
  56 |   background-color: rgba(0, 0, 0, 0.06);
  57 | }
  58 | 
  59 | .icon--button:active {
  60 |   border: 2px solid #18a0fb;
  61 |   background-color: rgba(0, 0, 0, 0.06);
  62 | }
  63 | 
  64 | .icon--button:disabled {
  65 |   opacity: 0.37;
  66 | }
  67 | 
  68 | .icon--text {
  69 |   display: -webkit-box;
  70 |   display: -ms-flexbox;
  71 |   display: flex;
  72 |   -webkit-box-align: center;
  73 |       -ms-flex-align: center;
  74 |           align-items: center;
  75 |   -webkit-box-pack: center;
  76 |       -ms-flex-pack: center;
  77 |           justify-content: center;
  78 |   font-family: "Inter", sans-serif;
  79 |   font-size: 11px;
  80 | }
  81 | 
  82 | .icon--adjust {
  83 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m12%2016.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m12%2048.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m12%2080.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  84 | }
  85 | 
  86 | .icon--angle {
  87 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m12%2012v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m12%2044v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m12%2076v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  88 | }
  89 | 
  90 | .icon--break {
  91 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13.0002%209v3h1v-3zm9.1031.89644c-1.1617-1.16176-3.0453-1.16176-4.2071.00002l-2.7499%202.74994.7071.7071%202.7499-2.7499c.7712-.77128%202.0217-.77129%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.75c1.1618-1.1617%201.1618-3.0453%200-4.20706zm-12.20691%2012.20706c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m13.0002%2041v3h1v-3zm9.1031.8964c-1.1617-1.1617-3.0453-1.1617-4.2071.0001l-2.7499%202.7499.7071.7071%202.7499-2.7499c.7712-.7713%202.0217-.7713%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.75c1.1618-1.1617%201.1618-3.0453%200-4.2071zm-12.20691%2012.2071c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m13.0002%2073v3h1v-3zm9.1031.8965c-1.1617-1.1618-3.0453-1.1618-4.2071%200l-2.7499%202.7499.7071.7071%202.7499-2.7499c.7712-.7713%202.0217-.7713%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.7499c1.1618-1.1618%201.1618-3.0454%200-4.2071zm-12.20691%2012.207c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%2318a0fb%22%20opacity%3D%22.9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  92 | }
  93 | 
  94 | .icon--close {
  95 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2015.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2047.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2079.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  96 | }
  97 | 
  98 | .icon--ellipses {
  99 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m11.5%2016c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m11.5%2048c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m11.5%2080c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 100 | }
 101 | 
 102 | .icon--eyedropper {
 103 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m22.4473%209.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m22.4473%2041.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m22.4473%2073.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fsvg%3E");
 104 | }
 105 | 
 106 | .icon--hidden {
 107 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m21.5085%2015.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m21.5085%2047.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m21.5085%2079.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 108 | }
 109 | 
 110 | .icon--hyperlink {
 111 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13.5%2018c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m13.5%2050c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m13.5%2082c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 112 | }
 113 | 
 114 | .icon--link-broken {
 115 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m18%2014v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m18%2046v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m18%2078v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 116 | }
 117 | 
 118 | .icon--link {
 119 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2010c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2042c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2074c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 120 | }
 121 | 
 122 | .icon--lock {
 123 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m17.5%2013.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m17.5%2045.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m17.5%2077.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 124 | }
 125 | 
 126 | .icon--minus {
 127 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m21.5%2016.5h-11v-1h11z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m21.5%2048.5h-11v-1h11z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m21.5%2080.5h-11v-1h11z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 128 | }
 129 | 
 130 | .icon--play {
 131 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13%2010.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m13%2042.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m13%2074.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 132 | }
 133 | 
 134 | .icon--plus {
 135 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m15.5%2015.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m15.5%2047.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m15.5%2079.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 136 | }
 137 | 
 138 | .icon--recent {
 139 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m23%2016c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m23%2048c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m23%2080c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 140 | }
 141 | 
 142 | .icon--recent {
 143 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2023.9999c4.4183%200%208-3.5817%208-8s-3.5817-8.00002-8-8.00002-8%203.58172-8%208.00002%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2055.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2087.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 144 | }
 145 | 
 146 | .icon--resolve-filled {
 147 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2023.9999c4.4183%200%208-3.5817%208-8s-3.5817-8.00002-8-8.00002-8%203.58172-8%208.00002%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2055.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2087.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 148 | }
 149 | 
 150 | .icon--resolve {
 151 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m23%2015.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7.00002%207-7.00002%207%203.13402%207%207.00002zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8.00002%208-8.00002%208%203.58172%208%208.00002zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m23%2047.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m23%2079.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 152 | }
 153 | 
 154 | .icon--search {
 155 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m20%2015c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m20%2047c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m20%2079c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 156 | }
 157 | 
 158 | .icon--trash {
 159 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m15%209.5c-.5523%200-1%20.44772-1%201h4c0-.55228-.4477-1-1-1zm4%201c0-1.10457-.8954-2-2-2h-2c-1.1046%200-2%20.89543-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m15%2041.5c-.5523%200-1%20.4477-1%201h4c0-.5523-.4477-1-1-1zm4%201c0-1.1046-.8954-2-2-2h-2c-1.1046%200-2%20.8954-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m15%2073.5c-.5523%200-1%20.4477-1%201h4c0-.5523-.4477-1-1-1zm4%201c0-1.1046-.8954-2-2-2h-2c-1.1046%200-2%20.8954-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 160 | }
 161 | 
 162 | .icon--unlock {
 163 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m18%2014v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m18%2046v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m18%2078v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 164 | }
 165 | 
 166 | .icon--visible {
 167 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16.0001%2019c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16.0001%2051c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16.0001%2083c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 168 | }
 169 | 
 170 | .label {
 171 |   display: -webkit-box;
 172 |   display: -ms-flexbox;
 173 |   display: flex;
 174 |   -webkit-box-align: center;
 175 |       -ms-flex-align: center;
 176 |           align-items: center;
 177 |   height: 32px;
 178 |   padding: 8px 4px 8px 8px;
 179 |   color: rgba(0, 0, 0, 0.3);
 180 |   background-color: #ffffff;
 181 |   font-family: "Inter", sans-serif;
 182 |   font-weight: 400;
 183 |   font-size: 11px;
 184 |   line-height: 16px;
 185 |   letter-spacing: 0.005em;
 186 | }
 187 | 
 188 | .section-title {
 189 |   display: -webkit-box;
 190 |   display: -ms-flexbox;
 191 |   display: flex;
 192 |   -webkit-box-align: center;
 193 |       -ms-flex-align: center;
 194 |           align-items: center;
 195 |   height: 32px;
 196 |   padding: 8px 4px 8px 8px;
 197 |   color: rgba(0, 0, 0, 0.8);
 198 |   background-color: #ffffff;
 199 |   font-family: "Inter", sans-serif;
 200 |   font-weight: 600;
 201 |   font-size: 11px;
 202 |   line-height: 16px;
 203 |   letter-spacing: 0.005em;
 204 | }
 205 | 
 206 | .type {
 207 |   margin: 0;
 208 |   padding: 0;
 209 | }
 210 | 
 211 | .type--11-pos {
 212 |   color: rgba(0, 0, 0, 0.8);
 213 |   font-family: "Inter", sans-serif;
 214 |   font-weight: 400;
 215 |   font-size: 11px;
 216 |   line-height: 16px;
 217 |   letter-spacing: 0.005em;
 218 | }
 219 | 
 220 | .type--11-pos-medium {
 221 |   color: rgba(0, 0, 0, 0.8);
 222 |   font-family: "Inter", sans-serif;
 223 |   font-weight: 500;
 224 |   font-size: 11px;
 225 |   line-height: 16px;
 226 |   letter-spacing: 0.005em;
 227 | }
 228 | 
 229 | .type--11-pos-bold {
 230 |   color: rgba(0, 0, 0, 0.8);
 231 |   font-family: "Inter", sans-serif;
 232 |   font-weight: 600;
 233 |   font-size: 11px;
 234 |   line-height: 16px;
 235 |   letter-spacing: 0.005em;
 236 | }
 237 | 
 238 | .type--12-pos {
 239 |   color: rgba(0, 0, 0, 0.8);
 240 |   font-family: "Inter", sans-serif;
 241 |   font-weight: 400;
 242 |   font-size: 12px;
 243 |   line-height: 16px;
 244 |   letter-spacing: 0;
 245 | }
 246 | 
 247 | .type--12-pos-medium {
 248 |   color: rgba(0, 0, 0, 0.8);
 249 |   font-family: "Inter", sans-serif;
 250 |   font-weight: 500;
 251 |   font-size: 12px;
 252 |   line-height: 16px;
 253 |   letter-spacing: 0;
 254 | }
 255 | 
 256 | .type--12-pos-bold {
 257 |   font-family: "Inter", sans-serif;
 258 |   font-weight: 600;
 259 |   font-size: 12px;
 260 |   line-height: 16px;
 261 |   letter-spacing: 0;
 262 | }
 263 | 
 264 | .type--11-neg {
 265 |   color: #ffffff;
 266 |   font-family: "Inter", sans-serif;
 267 |   font-weight: 400;
 268 |   font-size: 11px;
 269 |   line-height: 16px;
 270 |   letter-spacing: 0.01em;
 271 | }
 272 | 
 273 | .type--11-neg-medium {
 274 |   color: #ffffff;
 275 |   font-family: "Inter", sans-serif;
 276 |   font-weight: 500;
 277 |   font-size: 11px;
 278 |   line-height: 16px;
 279 |   letter-spacing: 0.01em;
 280 | }
 281 | 
 282 | .type--11-neg-bold {
 283 |   color: #ffffff;
 284 |   font-family: "Inter", sans-serif;
 285 |   font-weight: 600;
 286 |   font-size: 11px;
 287 |   line-height: 16px;
 288 |   letter-spacing: 0.01em;
 289 | }
 290 | 
 291 | .type--12-neg {
 292 |   color: #ffffff;
 293 |   font-family: "Inter", sans-serif;
 294 |   font-weight: 400;
 295 |   font-size: 12px;
 296 |   line-height: 16px;
 297 |   letter-spacing: 0.005em;
 298 | }
 299 | 
 300 | .type--12-neg-medium {
 301 |   color: #ffffff;
 302 |   font-family: "Inter", sans-serif;
 303 |   font-weight: 500;
 304 |   font-size: 12px;
 305 |   line-height: 16px;
 306 |   letter-spacing: 0.005em;
 307 | }
 308 | 
 309 | .type--12-neg-bold {
 310 |   color: #ffffff;
 311 |   font-family: "Inter", sans-serif;
 312 |   font-weight: 600;
 313 |   font-size: 12px;
 314 |   line-height: 16px;
 315 |   letter-spacing: 0.005em;
 316 | }
 317 | 
 318 | .button {
 319 |   display: inline-block;
 320 |   -ms-flex-negative: 0;
 321 |       flex-shrink: 0;
 322 |   margin: 1px 0 1px 0;
 323 |   padding: 5px 16px 5px 16px;
 324 |   border: 2px solid transparent;
 325 |   border-radius: 6px;
 326 |   outline: none;
 327 | }
 328 | 
 329 | .button--primary {
 330 |   color: #ffffff;
 331 |   background-color: #18a0fb;
 332 |   font-family: "Inter", sans-serif;
 333 |   font-weight: 500;
 334 |   font-size: 11px;
 335 |   line-height: 16px;
 336 |   letter-spacing: 0.01em;
 337 | }
 338 | 
 339 | .button--primary:active, .button--primary:focus {
 340 |   border: 2px solid rgba(0, 0, 0, 0.3);
 341 | }
 342 | 
 343 | .button--primary:disabled {
 344 |   background-color: rgba(0, 0, 0, 0.3);
 345 | }
 346 | 
 347 | .button--primary-destructive {
 348 |   color: #ffffff;
 349 |   background-color: #f24822;
 350 |   font-family: "Inter", sans-serif;
 351 |   font-weight: 500;
 352 |   font-size: 11px;
 353 |   line-height: 16px;
 354 |   letter-spacing: 0.01em;
 355 | }
 356 | 
 357 | .button--primary-destructive:active, .button--primary-destructive:focus {
 358 |   border: 2px solid rgba(0, 0, 0, 0.3);
 359 | }
 360 | 
 361 | .button--primary-destructive:disabled {
 362 |   opacity: .4;
 363 | }
 364 | 
 365 | .button--secondary {
 366 |   color: rgba(0, 0, 0, 0.8);
 367 |   border: 1px solid rgba(0, 0, 0, 0.8);
 368 |   background-color: #ffffff;
 369 |   font-family: "Inter", sans-serif;
 370 |   font-weight: 500;
 371 |   font-size: 11px;
 372 |   line-height: 16px;
 373 |   letter-spacing: 0.005em;
 374 | }
 375 | 
 376 | .button--secondary:active, .button--secondary:focus {
 377 |   padding: 4px 15px 4px 15px;
 378 |   border: 2px solid #18a0fb;
 379 | }
 380 | 
 381 | .button--secondary:disabled {
 382 |   color: rgba(0, 0, 0, 0.3);
 383 |   border: 1px solid rgba(0, 0, 0, 0.3);
 384 | }
 385 | 
 386 | .button--secondary-destructive {
 387 |   color: #f24822;
 388 |   border: 1px solid #f24822;
 389 |   background-color: #ffffff;
 390 |   font-family: "Inter", sans-serif;
 391 |   font-weight: 500;
 392 |   font-size: 11px;
 393 |   line-height: 16px;
 394 |   letter-spacing: 0.005em;
 395 | }
 396 | 
 397 | .button--secondary-destructive:active, .button--secondary-destructive:focus {
 398 |   padding: 4px 15px 4px 15px;
 399 |   border: 2px solid #f24822;
 400 | }
 401 | 
 402 | .button--secondary-destructive:disabled {
 403 |   opacity: .4;
 404 | }
 405 | 
 406 | .input {
 407 |   font-family: "Inter", sans-serif;
 408 |   font-weight: 400;
 409 |   font-size: 11px;
 410 |   line-height: 16px;
 411 |   letter-spacing: 0.005em;
 412 |   position: relative;
 413 |   display: -webkit-box;
 414 |   display: -ms-flexbox;
 415 |   display: flex;
 416 |   overflow: visible;
 417 |   -webkit-box-align: center;
 418 |       -ms-flex-align: center;
 419 |           align-items: center;
 420 |   width: 100%;
 421 |   height: 30px;
 422 |   margin: 1px 0 1px 0;
 423 |   padding: 8px 4px 8px 7px;
 424 |   color: rgba(0, 0, 0, 0.8);
 425 |   border: 1px solid transparent;
 426 |   border-radius: 2px;
 427 |   outline: none;
 428 |   background-color: #ffffff;
 429 | }
 430 | 
 431 | .input:hover {
 432 |   color: rgba(0, 0, 0, 0.8);
 433 |   border: 1px solid rgba(0, 0, 0, 0.1);
 434 | }
 435 | 
 436 | .input:active, .input:focus {
 437 |   padding: 8px 4px 8px 6px;
 438 |   color: #000000;
 439 |   border: 2px solid #18a0fb;
 440 |   border-radius: 2px;
 441 | }
 442 | 
 443 | .input::-moz-selection {
 444 |   color: #000000;
 445 |   background-color: rgba(24, 145, 251, 0.3);
 446 | }
 447 | 
 448 | .input::selection {
 449 |   color: #000000;
 450 |   background-color: rgba(24, 145, 251, 0.3);
 451 | }
 452 | 
 453 | .input::-webkit-input-placeholder {
 454 |   color: rgba(0, 0, 0, 0.3);
 455 | }
 456 | 
 457 | .input:-ms-input-placeholder {
 458 |   color: rgba(0, 0, 0, 0.3);
 459 | }
 460 | 
 461 | .input::-ms-input-placeholder {
 462 |   color: rgba(0, 0, 0, 0.3);
 463 | }
 464 | 
 465 | .input::placeholder {
 466 |   color: rgba(0, 0, 0, 0.3);
 467 | }
 468 | 
 469 | .input:not(:disabled):not(:hover):placeholder-shown {
 470 |   background: linear-gradient(90deg, transparent 6px, rgba(0, 0, 0, 0.1) 0);
 471 |   background-repeat: repeat-x;
 472 |   background-position: left bottom -1px;
 473 |   background-size: calc(100% - 6px) 1px;
 474 | }
 475 | 
 476 | .input:disabled {
 477 |   color: rgba(0, 0, 0, 0.3);
 478 | }
 479 | 
 480 | .input:disabled:hover {
 481 |   border: 1px solid transparent;
 482 | }
 483 | 
 484 | .input-icon {
 485 |   position: relative;
 486 |   width: 100%;
 487 | }
 488 | 
 489 | .input-icon__icon {
 490 |   position: absolute;
 491 |   top: -1px;
 492 |   left: 0;
 493 |   width: 32px;
 494 |   height: 32px;
 495 | }
 496 | 
 497 | .input-icon__input {
 498 |   font-family: "Inter", sans-serif;
 499 |   font-weight: 400;
 500 |   font-size: 11px;
 501 |   line-height: 16px;
 502 |   letter-spacing: 0.005em;
 503 |   display: -webkit-box;
 504 |   display: -ms-flexbox;
 505 |   display: flex;
 506 |   -webkit-box-align: center;
 507 |       -ms-flex-align: center;
 508 |           align-items: center;
 509 |   width: 100%;
 510 |   height: 30px;
 511 |   margin: 1px 0 1px 0;
 512 |   padding: 8px 4px 8px 0;
 513 |   text-indent: 32px;
 514 |   color: rgba(0, 0, 0, 0.8);
 515 |   border: 1px solid transparent;
 516 |   border-radius: 2px;
 517 |   outline: none;
 518 |   background-color: #ffffff;
 519 | }
 520 | 
 521 | .input-icon__input:hover {
 522 |   color: rgba(0, 0, 0, 0.8);
 523 |   border: 1px solid rgba(0, 0, 0, 0.1);
 524 | }
 525 | 
 526 | .input-icon__input:active, .input-icon__input:focus {
 527 |   margin-left: -1px;
 528 |   padding: 8px 4px 8px 0;
 529 |   color: #000000;
 530 |   border: 2px solid #18a0fb;
 531 |   border-radius: 2px;
 532 | }
 533 | 
 534 | .input-icon__input::-moz-selection {
 535 |   color: #000000;
 536 |   background-color: rgba(24, 145, 251, 0.3);
 537 | }
 538 | 
 539 | .input-icon__input::selection {
 540 |   color: #000000;
 541 |   background-color: rgba(24, 145, 251, 0.3);
 542 | }
 543 | 
 544 | .input-icon__input::-webkit-input-placeholder {
 545 |   color: rgba(0, 0, 0, 0.3);
 546 | }
 547 | 
 548 | .input-icon__input:-ms-input-placeholder {
 549 |   color: rgba(0, 0, 0, 0.3);
 550 | }
 551 | 
 552 | .input-icon__input::-ms-input-placeholder {
 553 |   color: rgba(0, 0, 0, 0.3);
 554 | }
 555 | 
 556 | .input-icon__input::placeholder {
 557 |   color: rgba(0, 0, 0, 0.3);
 558 | }
 559 | 
 560 | .input-icon__input:not(:disabled):not(:hover):placeholder-shown {
 561 |   background: linear-gradient(90deg, transparent 6px, rgba(0, 0, 0, 0.1) 0);
 562 |   background-repeat: repeat-x;
 563 |   background-position: left bottom -1px;
 564 |   background-size: calc(100% - 6px) 1px;
 565 | }
 566 | 
 567 | .input-icon__input:disabled {
 568 |   color: rgba(0, 0, 0, 0.3);
 569 | }
 570 | 
 571 | .input-icon__input:disabled:hover {
 572 |   border: 1px solid transparent;
 573 | }
 574 | 
 575 | .textarea {
 576 |   font-family: "Inter", sans-serif;
 577 |   font-weight: 400;
 578 |   font-size: 11px;
 579 |   line-height: 16px;
 580 |   letter-spacing: 0.005em;
 581 |   display: -webkit-box;
 582 |   display: -ms-flexbox;
 583 |   display: flex;
 584 |   overflow: hidden;
 585 |   -webkit-box-align: center;
 586 |       -ms-flex-align: center;
 587 |           align-items: center;
 588 |   width: calc(100% - 16px);
 589 |   min-height: 62px;
 590 |   margin: 1px 8px 1px 8px;
 591 |   padding: 7px 4px 7px 7px;
 592 |   resize: none;
 593 |   color: rgba(0, 0, 0, 0.8);
 594 |   border: 1px solid rgba(0, 0, 0, 0.1);
 595 |   border-radius: 2px;
 596 |   outline: none;
 597 |   background-color: #ffffff;
 598 | }
 599 | 
 600 | .textarea:active, .textarea:focus {
 601 |   padding: 6px 4px 6px 6px;
 602 |   color: #000000;
 603 |   border: 2px solid #18a0fb;
 604 |   border-radius: 2px;
 605 | }
 606 | 
 607 | .textarea::-moz-selection {
 608 |   color: #000000;
 609 |   background-color: rgba(24, 145, 251, 0.3);
 610 | }
 611 | 
 612 | .textarea::selection {
 613 |   color: #000000;
 614 |   background-color: rgba(24, 145, 251, 0.3);
 615 | }
 616 | 
 617 | .textarea::-webkit-input-placeholder {
 618 |   color: rgba(0, 0, 0, 0.3);
 619 | }
 620 | 
 621 | .textarea:-ms-input-placeholder {
 622 |   color: rgba(0, 0, 0, 0.3);
 623 | }
 624 | 
 625 | .textarea::-ms-input-placeholder {
 626 |   color: rgba(0, 0, 0, 0.3);
 627 | }
 628 | 
 629 | .textarea::placeholder {
 630 |   color: rgba(0, 0, 0, 0.3);
 631 | }
 632 | 
 633 | .textarea:disabled {
 634 |   color: rgba(0, 0, 0, 0.3);
 635 | }
 636 | 
 637 | .textarea:disabled:focus {
 638 |   border: 1px solid rgba(0, 0, 0, 0.1);
 639 | }
 640 | 
 641 | .select-menu {
 642 |   position: relative;
 643 |   display: block;
 644 |   -webkit-box-sizing: border-box;
 645 |           box-sizing: border-box;
 646 |   width: 100%;
 647 |   cursor: default;
 648 | }
 649 | 
 650 | .select-menu__button {
 651 |   position: relative;
 652 |   display: -webkit-box;
 653 |   display: -ms-flexbox;
 654 |   display: flex;
 655 |   -webkit-box-pack: justify;
 656 |       -ms-flex-pack: justify;
 657 |           justify-content: space-between;
 658 |   width: 100%;
 659 |   height: 30px;
 660 |   margin: 1px 0 1px 0;
 661 |   padding: 6px 0 6px 8px;
 662 |   cursor: default;
 663 |   color: rgba(0, 0, 0, 0.8);
 664 |   border: 1px solid transparent;
 665 |   border-radius: 2px;
 666 |   background-color: #ffffff;
 667 |   font-family: "Inter", sans-serif;
 668 |   font-weight: 400;
 669 |   font-size: 11px;
 670 |   line-height: 16px;
 671 |   letter-spacing: 0.005em;
 672 | }
 673 | 
 674 | .select-menu__button:hover {
 675 |   border: 1px solid rgba(0, 0, 0, 0.1);
 676 | }
 677 | 
 678 | .select-menu__button:hover span:after {
 679 |   opacity: 0;
 680 | }
 681 | 
 682 | .select-menu__button:hover .select-menu__icon {
 683 |   opacity: 1;
 684 | }
 685 | 
 686 | .select-menu__button:focus, .select-menu__button:active {
 687 |   width: 100%;
 688 |   padding: 5px 0 5px 7px;
 689 |   border: 2px solid #18a0fb;
 690 |   outline: none;
 691 | }
 692 | 
 693 | .select-menu__button:focus span:after, .select-menu__button:active span:after {
 694 |   opacity: 0;
 695 | }
 696 | 
 697 | .select-menu__button:focus .select-menu__icon, .select-menu__button:active .select-menu__icon {
 698 |   opacity: 1;
 699 | }
 700 | 
 701 | .select-menu__button--active:hover {
 702 |   width: 100%;
 703 |   padding: 5px 0 5px 7px;
 704 |   border: 2px solid #18a0fb;
 705 |   outline: none;
 706 | }
 707 | 
 708 | .select-menu__button-label {
 709 |   display: inline-block;
 710 |   text-align: left;
 711 | }
 712 | 
 713 | .select-menu__button-label:after {
 714 |   display: inline-block;
 715 |   width: 7px;
 716 |   height: 5px;
 717 |   margin-top: 6px;
 718 |   margin-left: 6px;
 719 |   content: '';
 720 |   background-color: transparent;
 721 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%225%22%20viewBox%3D%220%200%207%205%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m3%203.70711-3-3.000003.707107-.707107%202.646443%202.64645%202.64645-2.64645.70711.707107-3%203.000003-.35356.35355z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 722 | }
 723 | 
 724 | .select-menu__icon {
 725 |   position: absolute;
 726 |   top: 0;
 727 |   right: 0;
 728 |   width: 30px;
 729 |   height: 30px;
 730 |   opacity: 0;
 731 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20width%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m15%2016.7071-3-3%20.7071-.7071%202.6465%202.6464%202.6464-2.6464.7071.7071-3%203-.3535.3536z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 732 |   background-repeat: no-repeat;
 733 |   background-position: center center;
 734 | }
 735 | 
 736 | .select-menu__list {
 737 |   position: absolute;
 738 |   z-index: 2;
 739 |   display: none;
 740 |   -webkit-box-orient: vertical;
 741 |   -webkit-box-direction: normal;
 742 |       -ms-flex-direction: column;
 743 |           flex-direction: column;
 744 |   width: 100%;
 745 |   margin: 0;
 746 |   padding: 8px 0 8px 0;
 747 |   border-radius: 2px;
 748 |   background-color: #222222;
 749 |   -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
 750 |           box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
 751 | }
 752 | 
 753 | .select-menu__list--active {
 754 |   display: -webkit-box;
 755 |   display: -ms-flexbox;
 756 |   display: flex;
 757 | }
 758 | 
 759 | .select-menu__list-item {
 760 |   display: -webkit-box;
 761 |   display: -ms-flexbox;
 762 |   display: flex;
 763 |   -webkit-box-align: center;
 764 |       -ms-flex-align: center;
 765 |           align-items: center;
 766 |   width: 100%;
 767 |   height: 24px;
 768 |   padding: 0 8px 0 4px;
 769 |   color: #ffffff;
 770 |   font-family: "Inter", sans-serif;
 771 |   font-weight: 400;
 772 |   font-size: 12px;
 773 |   line-height: 16px;
 774 |   letter-spacing: 0.005em;
 775 | }
 776 | 
 777 | .select-menu__list-item--active .select-menu__list-item-icon {
 778 |   opacity: 1 !important;
 779 | }
 780 | 
 781 | .select-menu__list-item:hover {
 782 |   background-color: #18a0fb;
 783 | }
 784 | 
 785 | .select-menu__list-item-text {
 786 |   display: -webkit-box;
 787 |   display: -ms-flexbox;
 788 |   display: flex;
 789 |   -webkit-box-align: center;
 790 |       -ms-flex-align: center;
 791 |           align-items: center;
 792 |   width: 100%;
 793 |   height: 100%;
 794 |   padding: 0 0 0 4px;
 795 | }
 796 | 
 797 | .select-menu__list-item-icon {
 798 |   display: block;
 799 |   -ms-flex-negative: 0;
 800 |       flex-shrink: 0;
 801 |   width: 24px;
 802 |   height: 24px;
 803 |   opacity: 0;
 804 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m13.2069%205.20724-5.50002%205.49996-.70711.7072-.70711-.7072-3-2.99996%201.41422-1.41421%202.29289%202.29289%204.79293-4.79289z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 805 |   background-repeat: no-repeat;
 806 |   background-position: center center;
 807 | }
 808 | 
 809 | .select-menu__divider {
 810 |   margin: 0;
 811 | }
 812 | 
 813 | .select-menu__divider-line {
 814 |   display: block;
 815 |   height: 1px;
 816 |   margin: 8px 0 7px;
 817 |   background-color: rgba(255, 255, 255, 0.2);
 818 | }
 819 | 
 820 | .select-menu__divider-label {
 821 |   display: -webkit-box;
 822 |   display: -ms-flexbox;
 823 |   display: flex;
 824 |   -webkit-box-align: center;
 825 |       -ms-flex-align: center;
 826 |           align-items: center;
 827 |   height: 32px;
 828 |   margin-top: 8px;
 829 |   padding: 8px 8px 0 32px;
 830 |   color: rgba(255, 255, 255, 0.4);
 831 |   border-top: 1px solid rgba(255, 255, 255, 0.2);
 832 |   font-family: "Inter", sans-serif;
 833 |   font-weight: 400;
 834 |   font-size: 12px;
 835 |   line-height: 16px;
 836 |   letter-spacing: 0.005em;
 837 | }
 838 | 
 839 | .select-menu__divider-label--first {
 840 |   height: 24px;
 841 |   margin-top: 0;
 842 |   padding: 0 8px 0 32px;
 843 |   border-top: none;
 844 | }
 845 | 
 846 | .switch {
 847 |   position: relative;
 848 |   display: -webkit-box;
 849 |   display: -ms-flexbox;
 850 |   display: flex;
 851 |   -webkit-box-align: center;
 852 |       -ms-flex-align: center;
 853 |           align-items: center;
 854 |   -ms-flex-item-align: 1;
 855 |       align-self: 1;
 856 |   -webkit-box-orient: horizontal;
 857 |   -webkit-box-direction: normal;
 858 |       -ms-flex-direction: row;
 859 |           flex-direction: row;
 860 |   cursor: default;
 861 | }
 862 | 
 863 | .switch__container {
 864 |   position: relative;
 865 |   width: 24px;
 866 |   height: 12px;
 867 |   margin: 10px 16px 10px 8px;
 868 | }
 869 | 
 870 | .switch__label {
 871 |   font-family: "Inter", sans-serif;
 872 |   font-weight: 400;
 873 |   font-size: 11px;
 874 |   line-height: 16px;
 875 |   letter-spacing: 0.005em;
 876 | }
 877 | 
 878 | .switch__checkbox {
 879 |   width: 0;
 880 |   height: 0;
 881 |   opacity: 0;
 882 | }
 883 | 
 884 | .switch__checkbox:checked + .switch__slider {
 885 |   background-color: #000000;
 886 | }
 887 | 
 888 | .switch__checkbox:focus + .switch__slider {
 889 |   outline: none;
 890 |   -webkit-box-shadow: 0 0 1px #2196f3;
 891 |           box-shadow: 0 0 1px #2196f3;
 892 | }
 893 | 
 894 | .switch__checkbox:checked + .switch__slider:before {
 895 |   -webkit-transform: translateX(12px);
 896 |           transform: translateX(12px);
 897 | }
 898 | 
 899 | .switch__slider {
 900 |   position: absolute;
 901 |   top: 0;
 902 |   right: 0;
 903 |   bottom: 0;
 904 |   left: 0;
 905 |   -webkit-transition: -webkit-transform .2s;
 906 |   transition: -webkit-transform .2s;
 907 |   transition: transform .2s;
 908 |   transition: transform .2s, -webkit-transform .2s;
 909 |   -webkit-transition: background-color 0 .2s;
 910 |   transition: background-color 0 .2s;
 911 |   border: 1px solid #000000;
 912 |   border-radius: 12px;
 913 |   background-color: #ffffff;
 914 | }
 915 | 
 916 | .switch__slider::before {
 917 |   position: absolute;
 918 |   top: -1px;
 919 |   left: -1px;
 920 |   width: 10px;
 921 |   height: 10px;
 922 |   content: '';
 923 |   -webkit-transition: -webkit-transform .2s;
 924 |   transition: -webkit-transform .2s;
 925 |   transition: transform .2s;
 926 |   transition: transform .2s, -webkit-transform .2s;
 927 |   -webkit-transition: background-color 0 .2s;
 928 |   transition: background-color 0 .2s;
 929 |   border: 1px solid #000000;
 930 |   border-radius: 50%;
 931 |   background-color: white;
 932 | }
 933 | 
 934 | .checkbox {
 935 |   display: -webkit-box;
 936 |   display: -ms-flexbox;
 937 |   display: flex;
 938 |   -webkit-box-orient: horizontal;
 939 |   -webkit-box-direction: normal;
 940 |       -ms-flex-direction: row;
 941 |           flex-direction: row;
 942 |   height: 28px;
 943 |   cursor: default;
 944 | }
 945 | 
 946 | .checkbox__container {
 947 |   position: relative;
 948 |   width: 32px;
 949 |   height: 32px;
 950 | }
 951 | 
 952 | .checkbox__label {
 953 |   display: -webkit-box;
 954 |   display: -ms-flexbox;
 955 |   display: flex;
 956 |   -webkit-box-align: center;
 957 |       -ms-flex-align: center;
 958 |           align-items: center;
 959 |   padding-top: 4px;
 960 |   font-family: "Inter", sans-serif;
 961 |   font-weight: 400;
 962 |   font-size: 11px;
 963 |   line-height: 16px;
 964 |   letter-spacing: 0.005em;
 965 | }
 966 | 
 967 | .checkbox__box {
 968 |   position: absolute;
 969 |   width: 0;
 970 |   height: 0;
 971 |   opacity: 0;
 972 | }
 973 | 
 974 | .checkbox__box:checked ~ .checkbox__mark {
 975 |   border: 1px solid #18a0fb;
 976 |   background-color: #18a0fb;
 977 | }
 978 | 
 979 | .checkbox__box:checked ~ .checkbox__mark:after {
 980 |   display: block;
 981 | }
 982 | 
 983 | .checkbox__mark {
 984 |   position: absolute;
 985 |   top: 10px;
 986 |   left: 10px;
 987 |   width: 12px;
 988 |   height: 12px;
 989 |   border: 1px solid #000000;
 990 |   border-radius: 2px;
 991 |   background-color: #ffffff;
 992 | }
 993 | 
 994 | .checkbox__mark:after {
 995 |   position: absolute;
 996 |   width: 12px;
 997 |   height: 12px;
 998 |   content: '';
 999 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%227%22%20viewBox%3D%220%200%208%207%22%20width%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m1.17647%201.88236%201.88235%201.88236%203.76471-3.76472%201.17647%201.17648-4.94118%204.9412-3.05882-3.05884z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
1000 |   background-repeat: no-repeat;
1001 |   background-position: 1px 2px;
1002 | }
1003 | 
1004 | .divider {
1005 |   display: block;
1006 |   width: 100%;
1007 |   height: 1px;
1008 |   margin: 8px 0 8px 0;
1009 |   padding: 0;
1010 |   background-color: #e5e5e5;
1011 | }
1012 | 
1013 | .visual-bell {
1014 |   display: -webkit-box;
1015 |   display: -ms-flexbox;
1016 |   display: flex;
1017 |   -webkit-box-align: center;
1018 |       -ms-flex-align: center;
1019 |           align-items: center;
1020 |   -ms-flex-item-align: start;
1021 |       align-self: flex-start;
1022 |   -ms-flex-negative: 1;
1023 |       flex-shrink: 1;
1024 |   height: 36px;
1025 |   padding: 0 16px 0 16px;
1026 |   -webkit-transition: all 0.3s ease-out;
1027 |   transition: all 0.3s ease-out;
1028 |   border: 1px solid rgba(0, 0, 0, 0.1);
1029 |   border-radius: 5px;
1030 |   background-color: #222222;
1031 |   -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
1032 |           box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
1033 | }
1034 | 
1035 | .visual-bell__msg {
1036 |   font-family: "Inter", sans-serif;
1037 |   font-weight: 400;
1038 |   font-size: 14px;
1039 |   line-height: 24px;
1040 |   letter-spacing: -0.001em;
1041 |   display: block;
1042 |   color: #ffffff;
1043 | }
1044 | 
1045 | .visual-bell__spinner-container {
1046 |   display: none;
1047 |   overflow: hidden;
1048 |   width: 24px;
1049 |   height: 24px;
1050 |   margin-right: 8px;
1051 |   margin-left: -4px;
1052 | }
1053 | 
1054 | .visual-bell__spinner {
1055 |   display: block;
1056 |   width: 24px;
1057 |   height: 24px;
1058 |   -webkit-animation: rotating 1.0s linear infinite;
1059 |           animation: rotating 1.0s linear infinite;
1060 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4.848%209.74l.477.15-.477-.15zm2.622-3.08a.5.5%200%200%200-.617-.787l.617.787zm10.677%201.99a7%207%200%200%201%20.838%203.803l.998.065a8%208%200%200%200-.958-4.346l-.878.478zm.838%203.803a7%207%200%200%201-1.324%203.662l.81.588a8%208%200%200%200%201.513-4.186l-.998-.065zm-1.324%203.662a7%207%200%200%201-3.076%202.388l.37.93a8%208%200%200%200%203.515-2.729l-.81-.588zm-3.076%202.388a7%207%200%200%201-3.876.375l-.184.983a8%208%200%200%200%204.43-.428l-.37-.93zm-3.876.375a7%207%200%200%201-3.477-1.755l-.68.732a8%208%200%200%200%203.973%202.005l.184-.983zm-3.477-1.755a7%207%200%200%201-2.001-3.341l-.967.255a8%208%200%200%200%202.287%203.818l.68-.732zm-2-3.34a7%207%200%200%201%20.094-3.893l-.954-.3a8%208%200%200%200-.107%204.449l.967-.255zm.094-3.893c.323-1.024.863-1.835%201.326-2.394.23-.278.44-.49.6-.632l.175-.157.044-.037c.01-.008.01-.008-.298-.402l-.31-.393-.026.02-.06.05-.21.2c-.175.165-.413.407-.674.722-.52.627-1.137%201.55-1.5%202.73l.954.3z%22%20fill%3D%22%23a5a5a5%22%2F%3E%3C%2Fsvg%3E");
1061 |   background-repeat: none;
1062 | }
1063 | 
1064 | .visual-bell--loading .visual-bell__spinner-container {
1065 |   display: block;
1066 | }
1067 | 
1068 | .visual-bell--hidden {
1069 |   margin-top: 8px;
1070 |   opacity: 0;
1071 | }
1072 | 
1073 | .visual-bell--error {
1074 |   border: 1px solid #f24822;
1075 |   background-color: #f24822;
1076 | }
1077 | 
1078 | @-webkit-keyframes rotating {
1079 |   from {
1080 |     -webkit-transform: rotate(0deg);
1081 |             transform: rotate(0deg);
1082 |   }
1083 |   to {
1084 |     -webkit-transform: rotate(360deg);
1085 |             transform: rotate(360deg);
1086 |   }
1087 | }
1088 | 
1089 | @keyframes rotating {
1090 |   from {
1091 |     -webkit-transform: rotate(0deg);
1092 |             transform: rotate(0deg);
1093 |   }
1094 |   to {
1095 |     -webkit-transform: rotate(360deg);
1096 |             transform: rotate(360deg);
1097 |   }
1098 | }
1099 | 
1100 | .onboarding-tip {
1101 |   display: -webkit-box;
1102 |   display: -ms-flexbox;
1103 |   display: flex;
1104 |   -webkit-box-align: top;
1105 |       -ms-flex-align: top;
1106 |           align-items: top;
1107 |   -webkit-box-orient: horizontal;
1108 |   -webkit-box-direction: normal;
1109 |       -ms-flex-direction: row;
1110 |           flex-direction: row;
1111 |   padding: 0 16px 0 0;
1112 | }
1113 | 
1114 | .onboarding-tip__icon {
1115 |   width: 32px;
1116 |   height: 32px;
1117 |   margin-right: 8px;
1118 | }
1119 | 
1120 | .onboarding-tip__msg {
1121 |   padding: 8px 0 8px 0;
1122 |   color: rgba(0, 0, 0, 0.8);
1123 |   font-family: "Inter", sans-serif;
1124 |   font-weight: 400;
1125 |   font-size: 11px;
1126 |   line-height: 16px;
1127 |   letter-spacing: 0.005em;
1128 | }
1129 | 
1130 | .onboarding-tip__msg a:link, .onboarding-tip__msg a:hover, .onboarding-tip__msg a:active, .onboarding-tip__msg a:visited {
1131 |   text-decoration: none;
1132 |   color: #18a0fb;
1133 | }
1134 | 
1135 | .onboarding-tip--hidden {
1136 |   display: none;
1137 | }
1138 | 
1139 | .onboarding-tip--light {
1140 |   color: rgba(0, 0, 0, 0.3);
1141 | }
1142 | 
1143 | .onboarding-tip--pt5 {
1144 |   padding-top: 8px;
1145 | }
1146 | 
1147 | .disclosure {
1148 |   position: relative;
1149 |   display: block;
1150 |   width: 100%;
1151 |   margin: 0;
1152 |   padding: 0;
1153 |   list-style-type: none;
1154 | }
1155 | 
1156 | .disclosure__item {
1157 |   display: -webkit-box;
1158 |   display: -ms-flexbox;
1159 |   display: flex;
1160 |   -webkit-box-orient: vertical;
1161 |   -webkit-box-direction: normal;
1162 |       -ms-flex-direction: column;
1163 |           flex-direction: column;
1164 |   border-bottom: 1px solid #e5e5e5;
1165 |   background-color: #ffffff;
1166 |   font-family: "Inter", sans-serif;
1167 |   font-weight: 400;
1168 |   font-size: 11px;
1169 |   line-height: 16px;
1170 |   letter-spacing: 0.005em;
1171 | }
1172 | 
1173 | .disclosure__item:last-child {
1174 |   border-bottom: 1px solid transparent;
1175 | }
1176 | 
1177 | .disclosure__label {
1178 |   position: relative;
1179 |   display: -webkit-box;
1180 |   display: -ms-flexbox;
1181 |   display: flex;
1182 |   -webkit-box-align: center;
1183 |       -ms-flex-align: center;
1184 |           align-items: center;
1185 |   height: 32px;
1186 |   padding: 0 8px 0 24px;
1187 |   cursor: default;
1188 |   color: rgba(0, 0, 0, 0.8);
1189 |   font-family: "Inter", sans-serif;
1190 |   font-weight: 400;
1191 |   font-size: 11px;
1192 |   line-height: 16px;
1193 |   letter-spacing: 0.005em;
1194 | }
1195 | 
1196 | .disclosure__label:before {
1197 |   position: absolute;
1198 |   top: 8px;
1199 |   left: 4px;
1200 |   display: block;
1201 |   width: 16px;
1202 |   height: 16px;
1203 |   content: '';
1204 |   opacity: .3;
1205 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m11%208-4-3v6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
1206 |   background-repeat: no-repeat;
1207 |   background-position: center center;
1208 | }
1209 | 
1210 | .disclosure__label:hover:before {
1211 |   opacity: .8;
1212 | }
1213 | 
1214 | .disclosure__content {
1215 |   display: none;
1216 |   padding: 8px 8px 8px 24px;
1217 |   color: rgba(0, 0, 0, 0.8);
1218 |   font-family: "Inter", sans-serif;
1219 |   font-weight: 400;
1220 |   font-size: 11px;
1221 |   line-height: 16px;
1222 |   letter-spacing: 0.005em;
1223 | }
1224 | 
1225 | .disclosure--section .disclosure__label {
1226 |   font-family: "Inter", sans-serif;
1227 |   font-weight: 600;
1228 |   font-size: 11px;
1229 |   line-height: 16px;
1230 |   letter-spacing: 0.005em;
1231 | }
1232 | 
1233 | .disclosure--expanded .disclosure__content {
1234 |   display: block;
1235 | }
1236 | 
1237 | .disclosure--expanded .disclosure__label:before {
1238 |   opacity: .8;
1239 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9%2010%203-4h-6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
1240 | }
1241 | 


--------------------------------------------------------------------------------