├── .gitignore
├── src
    ├── ui.html
    ├── cover_art_1920x960.png
    ├── icon_round_128x128.png
    ├── icon_square_128x128.png
    ├── maximum_override_logo_2x.png
    ├── logo.svg
    ├── icon.svg
    ├── ui.scss
    ├── util.ts
    ├── code.ts
    ├── ui.tsx
    └── figma-plugin-ds.css
├── manifest.json
├── tsconfig.json
├── .vscode
    └── launch.json
├── package.json
├── dist
    ├── code.css
    └── ui.js.map
├── webpack.config.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/src/ui.html:
--------------------------------------------------------------------------------
1 | <div id="react-page"></div>


--------------------------------------------------------------------------------
/src/cover_art_1920x960.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrookedGrin/maximum-override/HEAD/src/cover_art_1920x960.png


--------------------------------------------------------------------------------
/src/icon_round_128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrookedGrin/maximum-override/HEAD/src/icon_round_128x128.png


--------------------------------------------------------------------------------
/src/icon_square_128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrookedGrin/maximum-override/HEAD/src/icon_square_128x128.png


--------------------------------------------------------------------------------
/src/maximum_override_logo_2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CrookedGrin/maximum-override/HEAD/src/maximum_override_logo_2x.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Maximum Override",
3 |   "id": "844697202715835091",
4 |   "api": "1.0.0",
5 |   "main": "dist/code.js",
6 |   "ui": "dist/ui.html",
7 |   "editorType": ["figma"]
8 | }


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |   <path d="M27 5V27H5M31 9V31H9M1 1H23V23H1V1Z" stroke="black" stroke-width="2"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "jsx": "react",
 5 |     "moduleResolution": "node",
 6 |     "typeRoots": [
 7 |       "./node_modules/@types",
 8 |       "./node_modules/@figma"
 9 |     ]
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "chrome",
 9 |             "request": "launch",
10 |             "name": "Launch Chrome against localhost",
11 |             "url": "http://localhost:8080",
12 |             "webRoot": "${workspaceFolder}"
13 |         }
14 |     ]
15 | }


--------------------------------------------------------------------------------
/src/icon.svg:
--------------------------------------------------------------------------------
1 | <svg width="102" height="62" viewBox="0 0 102 62" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M88.36 18.5781L68.9388 18.5781L56.2577 31L68.9388 43.4218L88.36 43.4218L101.279 31L88.36 18.5781Z" stroke="#7A64FA"/>
3 | <rect x="-0.714371" y="-5.96046e-08" width="17.4585" height="17.4585" transform="matrix(-0.71437 -0.699768 -0.714371 0.699768 62.2304 48.5834)" stroke="#7A64FA"/>
4 | <path d="M62.7407 12.9167L50.2689 0.699758L37.797 12.9167L50.2689 25.1336L62.7407 12.9167Z" stroke="#7A64FA"/>
5 | <path d="M31.5989 18.5781L1.21952 18.5781L13.5434 30.6501L13.9006 31L13.5434 31.3499L1.21952 43.4219L31.5989 43.4219L44.28 31L31.5989 18.5781Z" stroke="#7A64FA"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "maximum-override",
 3 |   "version": "1.1.1",
 4 |   "description": "Figma plugin for comparing and swapping props",
 5 |   "main": "dist/code.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "npx webpack --mode=development --watch"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "deep-equal": "^2.0.3",
14 |     "figma-plugin-ds": "^0.1.8",
15 |     "html-webpack-inline-source-plugin": "0.0.10",
16 |     "html-webpack-plugin": "^3.2.0",
17 |     "react": "^16.13.1",
18 |     "react-dom": "^16.13.1",
19 |     "ts-loader": "^6.0.4",
20 |     "typescript": "^3.5.3",
21 |     "url-loader": "^2.1.0",
22 |     "webpack": "^4.43.0",
23 |     "webpack-cli": "^3.3.6"
24 |   },
25 |   "devDependencies": {
26 |     "@figma/plugin-typings": "^1.28.0",
27 |     "@types/node-sass": "^4.11.1",
28 |     "@types/react": "^16.9.35",
29 |     "css-loader": "^3.5.3",
30 |     "mini-css-extract-plugin": "^0.9.0",
31 |     "node-sass": "^7.0.3",
32 |     "sass-loader": "^8.0.2",
33 |     "style-loader": "^0.23.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/dist/code.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font: 12px sans-serif;
 3 |   text-align: center;
 4 |   margin: 20px; }
 5 | 
 6 | .buttons {
 7 |   display: flex;
 8 |   flex-flow: column nowrap; }
 9 |   .buttons button {
10 |     border-radius: 5px;
11 |     background: white;
12 |     color: black;
13 |     border: none;
14 |     padding: 8px 15px;
15 |     margin: 2px;
16 |     box-shadow: inset 0 0 0 1px black;
17 |     outline: none; }
18 | 
19 | .diff {
20 |   margin: 16px;
21 |   display: flex;
22 |   flex-flow: row nowrap; }
23 | 
24 | .overrides {
25 |   text-align: left; }
26 |   .overrides .props {
27 |     display: flex;
28 |     flex-flow: column nowrap; }
29 |     .overrides .props .prop {
30 |       display: block; }
31 |     .overrides .props .rgbColor {
32 |       display: block;
33 |       width: 16px;
34 |       height: 16px; }
35 | 
36 | 
37 | /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvdWkuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQSxlQUFlOztBQUVmO0FBQ0E7QUFDQSwyQkFBMkI7QUFDM0I7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGtCQUFrQjs7QUFFbEI7QUFDQTtBQUNBO0FBQ0Esd0JBQXdCOztBQUV4QjtBQUNBLG1CQUFtQjtBQUNuQjtBQUNBO0FBQ0EsNkJBQTZCO0FBQzdCO0FBQ0EscUJBQXFCO0FBQ3JCO0FBQ0E7QUFDQTtBQUNBLG1CQUFtQiIsImZpbGUiOiJjb2RlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHkge1xuICBmb250OiAxMnB4IHNhbnMtc2VyaWY7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgbWFyZ2luOiAyMHB4OyB9XG5cbi5idXR0b25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1mbG93OiBjb2x1bW4gbm93cmFwOyB9XG4gIC5idXR0b25zIGJ1dHRvbiB7XG4gICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgIGJhY2tncm91bmQ6IHdoaXRlO1xuICAgIGNvbG9yOiBibGFjaztcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgcGFkZGluZzogOHB4IDE1cHg7XG4gICAgbWFyZ2luOiAycHg7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IGJsYWNrO1xuICAgIG91dGxpbmU6IG5vbmU7IH1cblxuLmRpZmYge1xuICBtYXJnaW46IDE2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZmxvdzogcm93IG5vd3JhcDsgfVxuXG4ub3ZlcnJpZGVzIHtcbiAgdGV4dC1hbGlnbjogbGVmdDsgfVxuICAub3ZlcnJpZGVzIC5wcm9wcyB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWZsb3c6IGNvbHVtbiBub3dyYXA7IH1cbiAgICAub3ZlcnJpZGVzIC5wcm9wcyAucHJvcCB7XG4gICAgICBkaXNwbGF5OiBibG9jazsgfVxuICAgIC5vdmVycmlkZXMgLnByb3BzIC5yZ2JDb2xvciB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHdpZHRoOiAxNnB4O1xuICAgICAgaGVpZ2h0OiAxNnB4OyB9XG4iXSwic291cmNlUm9vdCI6IiJ9*/


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 4 | const path = require('path')
 5 | const isDevelopment = process.env.NODE_ENV === 'development'
 6 | const webpack = require('webpack')
 7 | 
 8 | module.exports = (env, argv) => ({
 9 |   mode: argv.mode === 'production' ? 'production' : 'development',
10 | 
11 |   // This is necessary because Figma's 'eval' works differently than normal eval
12 |   devtool: argv.mode === 'production' ? false : 'inline-source-map',
13 | 
14 |   entry: {
15 |     ui: './src/ui.tsx', // The entry point for your UI code
16 |     code: './src/code.ts', // The entry point for your plugin code
17 |   },
18 | 
19 |   module: {
20 |     rules: [
21 |       // Converts TypeScript code to JavaScript
22 |       { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
23 | 
24 |       // Enables including CSS by doing "import './file.css'" in your TypeScript code
25 |       { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] },
26 | 
27 |       // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI
28 |       { test: /\.(png|jpg|gif|webp|svg|zip)$/, loader: [{ loader: 'url-loader' }] },
29 | 
30 |       {
31 |         test: /\.s(a|c)ss$/,
32 |         loader: [
33 |           isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
34 |           'css-loader',
35 |           {
36 |             loader: 'sass-loader',
37 |             options: {
38 |               sourceMap: isDevelopment
39 |             }
40 |           }
41 |         ]
42 |       }
43 | 
44 |     ],
45 |   },
46 | 
47 |   // Webpack tries these extensions for you if you omit the extension like "import './file'"
48 |   resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '.scss'] },
49 | 
50 |   output: {
51 |     filename: '[name].js',
52 |     path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
53 |   },
54 | 
55 |   // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
56 |   plugins: [
57 |     new webpack.DefinePlugin({
58 |       'global': {} // Fix missing symbol error when running in developer VM
59 |     }),
60 |     new HtmlWebpackPlugin({
61 |       template: './src/ui.html',
62 |       filename: 'ui.html',
63 |       inlineSource: '.(js)$',
64 |       chunks: ['ui'],
65 |     }),
66 |     new HtmlWebpackInlineSourcePlugin(),
67 |     new MiniCssExtractPlugin({
68 |       filename: '[name].css',
69 |       chunkFilename: '[id].css'
70 |     })
71 |   ],
72 | })
73 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Maximium Override
 2 | 
 3 | <img src="./src/maximum_override_logo_2x.png" width="400" />
 4 | 
 5 | ### Take control of your Figma overrides!
 6 | 
 7 | Compare objects to see what's different, then copy and paste the changes. Compare instances to their default main component and copy and paste the overrides.
 8 | 
 9 | [https://www.figma.com/community/plugin/844697202715835091/Maximum-Override](https://www.figma.com/community/plugin/844697202715835091/Maximum-Override)
10 | 
11 | <br />
12 | 
13 | ---
14 | 
15 | ## Features
16 | 
17 | ### **1. Copy and paste overrides between symbols**
18 | 
19 | Two of Figma's greatest strengths are:
20 | 1. Overriding colors, text, and other properties on component instances, and 
21 | 2. Swapping out instances of components, such as a icons or states.
22 | 
23 | But when you swap an instance, you lose all the overrides you've made, including changes to nested instances within a parent component.
24 | 
25 | Maximum Override allows you to copy your overrides, swap out an instance, and then paste the overrides back onto the new instance, to retain all of your changes. This includes nested instances that you've swapped with a different symbol.
26 | 
27 | 
28 | ### **2. Compare properties between objects**
29 | 
30 | Maximum Override also allows you to select any two nodes on the stage and compare them against each other to see what's different. (In software, this is known as a "diff".) You can then copy the changes from object A to object B, or vice-versa. If you select a single instance, Maximum Override will compare it against its own main component.
31 | 
32 | <br/>
33 | 
34 | ---
35 | ## Usage
36 | 
37 | 
38 | 
39 | Install and run Maximum Override like any other Figma plugin. See [Figma's plugin guide](https://help.figma.com/hc/en-us/articles/360040450413-Browse-and-Install-Plugins#Install_a_Plugin).
40 | 
41 | ### Comparing
42 | 
43 | Select a single component instance to compare it against its own main component.
44 | 
45 | Select two items to compare them to each other. These can be any type of object on stage, including instances. Click "Swap" to change which is the source and which is the target of the overrides.
46 | 
47 | By default, Maximum Override will collapse all the nodes that don't contain overrides, but you can click the title of any node to expand and see its children.
48 | 
49 | To save space while you work, you can also collapse the header, and the interface window will collapse as well.
50 | 
51 | Within overrides, hover over colors to see the corresponding hex value.
52 | 
53 | ### Copying
54 | 
55 | Click "Copy overrides" to save the current set of target overrides. This data is saved locally on your computer and will persist when you close the plugin or close Figma.
56 | 
57 | ### Pasting
58 | 
59 | Select a single item and click "Paste overrides" to apply the saved overrides to the selected item. If the structure of the target item doesn't match the structure that the overrides were originally pulled from, Maximum Override will still attempt to apply the overrides, but results may vary.
60 | 
61 | <br/>
62 | 
63 | ---
64 | 
65 | ### Not Supported (yet) / Known Issues
66 | 
67 | #### Very large components
68 | 
69 | Components with large numbers of layers and nested instances may be quite slow to process. Future versions may include a progress bar and other optimizations.
70 | 
71 | #### Multiple text styles
72 | 
73 | Text layers get very complicated, since each character can have its own set of styles and overrides. Maximum Override currently assumes that there is only one font / style applied to a given text field.
74 | 
75 | <br/>
76 | 
77 | ---
78 | 
79 | ### Development
80 | 
81 | 
82 | To build:
83 | 
84 |     $ npm install
85 | 
86 | To run locally:
87 | 
88 |     $ npm run start
89 | 


--------------------------------------------------------------------------------
/src/ui.scss:
--------------------------------------------------------------------------------
  1 | .MaximumOverride {
  2 |   padding: 12px;
  3 |   --mo-blue-light: #56CCF2;
  4 |   --mo-blue-med: #6DBFFA;
  5 | }
  6 | 
  7 | ::-webkit-scrollbar {
  8 |   width: 40px;
  9 | }
 10 | 
 11 | .emptyState {
 12 |   position: absolute;
 13 |   display: flex;
 14 |   flex-flow: column nowrap;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 |   top: 0;
 18 |   bottom: 0;
 19 |   left: 0;
 20 |   right: 0;
 21 |   background: var(--silver);
 22 |   text-align: left;
 23 |   z-index: 100;
 24 | 
 25 |   p {
 26 |     width: 320px;
 27 |     margin-bottom: 0.25em;
 28 |     font-size: var(--font-size-xlarge);
 29 | 
 30 |     &.centered {
 31 |       text-align: center;
 32 |     }
 33 |   }
 34 | 
 35 |   .logo {
 36 |     width: 320px;
 37 |     height: 200px;
 38 |     background: url(./maximum_override_logo_2x.png);
 39 |     background-position: 50% 50%;
 40 |     background-size: contain;
 41 |     background-repeat: no-repeat;
 42 |   }
 43 | }
 44 | 
 45 | .expand-collapse {
 46 |   border-radius: 100%;
 47 |   opacity: 0.5;
 48 |   transition: opacity 0.1s;
 49 | 
 50 |   .icon {
 51 |     background-size: 150%;
 52 |   }
 53 | }
 54 | 
 55 | .buttons {
 56 |   display: flex;
 57 |   flex-flow: row nowrap;
 58 |   margin-bottom: 8px;
 59 | 
 60 |   button {
 61 |     margin-right: 8px;
 62 |     cursor: pointer;
 63 | 
 64 |     &:disabled {
 65 |       cursor: default;
 66 |     }
 67 |   }
 68 | 
 69 | }
 70 | 
 71 | .icon {
 72 |   background-size: contain;
 73 | }
 74 | 
 75 | .content {
 76 |   background-color: var(--silver);
 77 |   border-radius: 8px;
 78 |   overflow: hidden;
 79 | }
 80 | 
 81 | .header {
 82 |   display: flex;
 83 |   flex-flow: row nowrap;
 84 |   align-items: center;
 85 |   font-weight: bold;
 86 |   font-size: var(--font-size-large);
 87 |   // border-bottom: 1px solid rgba(0,0,0,0.15);
 88 |   background-color: rgba(0,0,0,0.1);
 89 |   padding: 0 14px 0 0;
 90 |   height: 36px;
 91 |   overflow: hidden;
 92 |   cursor: pointer;
 93 | 
 94 |   .expand-collapse {
 95 |     margin-left: -2px;
 96 |     margin-right: -8px;
 97 |   }
 98 | 
 99 |   .icon {
100 |     width: 24px;
101 |     height: 24px;
102 |     background-position: center;
103 |     pointer-events: none;
104 |   }
105 | 
106 |   .arrow {
107 |     margin: 0 4px;
108 |   }
109 | 
110 |   .compare-node {
111 |     display: block;
112 |     overflow: hidden;
113 |     white-space: nowrap;
114 |     text-overflow: ellipsis;
115 |     max-width: 40%;
116 |   }
117 | 
118 |   &:hover {
119 |     .expand-collapse {
120 |       opacity: 1;
121 |     }
122 |   }
123 | 
124 |   &--loading {
125 |     padding-left: 22px;
126 |   }
127 | 
128 | }
129 | 
130 | .diff {
131 |   position: relative;
132 |   font-size: var(--font-size-small);
133 |   display: flex;
134 |   flex-flow: row nowrap;
135 |   background-color: var(--silver);
136 |   padding: 8px 8px 16px 16px;
137 |   height: 500px;
138 |   width: 100%;
139 |   overflow-y: auto;
140 |   overflow-x: hidden;
141 | 
142 |   &--collapsed {
143 |     display: none;
144 |   }
145 | }
146 | 
147 | .nodes {
148 |   width: 100%;
149 | }
150 | 
151 | .node {
152 |   position: relative;
153 |   text-align: left;
154 |   border-left: 1px solid rgba(0,0,0,0.1);
155 |   border-top-right-radius: 4px;
156 |   border-bottom-right-radius: 4px;
157 |   padding: 4px 0 0 5px;
158 |   margin-left: 9px;
159 | 
160 |   &--top {
161 |     border-left: none;
162 |     padding-left: 0;
163 |     margin-left: 0;
164 |     margin-bottom: 24px;
165 |   }
166 | 
167 |   .expand-collapse {
168 |     margin-right: -6px;
169 |   }
170 | 
171 |   .icon {
172 |     width: 20px;
173 |     height: 20px;
174 |     background-position: center;
175 |     overflow: hidden;
176 |   }
177 | 
178 |   .title {
179 |     font-weight: bold;
180 |     display: flex;
181 |     align-items: center;
182 |     margin: 0;
183 |     border-radius: 4px;
184 |     pointer-events: none;
185 |     max-width: 100%;
186 | 
187 |     &--collapsible {
188 |       pointer-events: inherit;
189 |       cursor: pointer;
190 |     }
191 | 
192 |     .node-name {
193 |       max-width: calc(100% - 36px);
194 |       overflow: hidden;
195 |       white-space: nowrap;
196 |       text-overflow: ellipsis;
197 |     }
198 | 
199 |     &:hover > .expand-collapse {
200 |         opacity: 1;
201 |     }
202 | 
203 | 
204 |   }
205 | 
206 |   .props {
207 |     width: 100%;
208 | 
209 |     .prop {
210 |       display: flex;
211 |       position: relative;
212 |       align-items: center;
213 |       padding: 2px 6px 2px 20px;
214 |       background: #fff;
215 |       opacity: .5;
216 |       border-radius: 4px;
217 |       margin: 0 8px 4px;
218 |       max-width: fit-content;
219 |       cursor: pointer;
220 |       pointer-events: all;
221 | 
222 |       &::after {
223 |         content: ' ';
224 |         position: absolute;
225 |         left: 4px;
226 |         color: var(--purple);
227 |         background: #eee;
228 |         border-radius: 2px;
229 |         height: 11px;
230 |         width: 11px;
231 |         line-height: 11px;
232 |         box-shadow: 1px 1px 0px #888 inset, -1px -1px 0px #ddd inset;
233 |         overflow: hidden;
234 |         padding: 0 0 1px 1px;
235 | 
236 |       }
237 | 
238 |       &:hover::after {
239 |         content: '';
240 |         background: #ccc;
241 |       }
242 | 
243 |       &.selected {
244 |         opacity: 1;
245 |       }
246 | 
247 |       &.selected::after {
248 |         content: '✓';
249 |         background: #fff;
250 |       }
251 |       
252 |       &.selected:hover::after {
253 |         content: '✓';
254 |         background: #ddd;
255 |       }
256 | 
257 |       // &--inline {
258 |       //   display: inline-flex;
259 |       // }
260 | 
261 |       .prop-inner {
262 |         display: flex;
263 |         position: relative;
264 |         align-items: center;
265 | 
266 |         // span:not(:first-child) {
267 |         //   margin-left: 2px;
268 |         // }
269 |       }
270 | 
271 |       .value {
272 |         display: inline-flex;
273 |         color: var(--purple);
274 |         max-width: 70%;
275 |         overflow: hidden;
276 |         padding: 0 2px;
277 | 
278 |         .string {
279 |           overflow: hidden;
280 |           text-overflow: ellipsis;
281 |           white-space: nowrap;
282 |         }
283 | 
284 |         &--object {
285 |           display: flex;
286 |           flex-flow: column nowrap;
287 | 
288 |           .sub-prop {
289 |             display: block;
290 |             margin: 0;
291 |   
292 |             .sub-key {
293 |               font-style: italic;
294 |               margin-right: 4px;
295 |             }
296 |             
297 |             .sub-value {
298 |               font-weight: bold;
299 |             }
300 |           }
301 |         }
302 | 
303 |         &--corners {
304 |           border: 1px solid rgba(0,0,0,0.1);
305 |           border-radius: 8px;
306 |           width: auto;
307 |           display: grid;
308 |           grid-template-columns: auto auto;
309 |           padding: 0;
310 | 
311 |           span {
312 |             margin: 0 !important;
313 |             padding: 2px 6px;
314 | 
315 |             &.right {
316 |               text-align: right;
317 |             }
318 |           }
319 |         }
320 | 
321 |         &--padding {
322 |           border: 1px solid rgba(0,0,0,0.1);
323 |           border-radius: 8px;
324 |           width: auto;
325 |           display: flex;
326 |           flex-flow: row nowrap;
327 |           padding: 0;
328 | 
329 |           span {
330 |             margin: 0 !important;
331 |             padding: 2px 6px;
332 |             text-align: center;
333 |             display: flex;
334 |             flex-flow: column nowrap;
335 |             justify-content: center;
336 |             align-items: center;
337 | 
338 |             &.middle {
339 |               padding: 0;
340 |             }
341 | 
342 |             &.right {
343 |               text-align: right;
344 |             }
345 |           }
346 |         }
347 | 
348 |   
349 |       }
350 | 
351 | 
352 |       .key, .arrow {
353 |         text-transform: capitalize;
354 |         color: var(--hud)
355 |       }
356 |     }
357 | 
358 |     .color {
359 |       display: inline-flex;
360 |       align-items: center;
361 |       position: relative;
362 |       margin: 0 2px;
363 |     }
364 | 
365 |     .rgbColor {
366 |       display: inline-flex;
367 |       align-items: center;
368 |       position: relative;
369 |       width: 13px;
370 |       height: 13px;
371 |       border: 1px solid #333;
372 |       border-radius: 4px;
373 |       margin-right: 2px;
374 | 
375 |       &--none {
376 |         border-color: #ccc;
377 |       }
378 |       
379 |       &--none::before {
380 |         position: absolute;
381 |         display: flex;
382 |         overflow: hidden;
383 |         align-items: center;
384 |         justify-content: center;
385 |         content: "╳";
386 |         right: 0;
387 |         bottom: 0;
388 |         top: 0;
389 |         left: 0;
390 |         color: #999;
391 |       }
392 | 
393 |       &--image {
394 |         background:
395 |           url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>') 
396 |           0 0/50% 50%;
397 |       }
398 | 
399 |       &--gradient {
400 |         background: linear-gradient(45deg, #666, #fff);
401 |       }
402 |     }
403 |   }
404 | }
405 | 
406 | // TODO: Implement tooltip that doesn't go outside page
407 | .hasTooltip {
408 |   cursor: default;
409 |   transition: all 0.15s;
410 |   // box-shadow: 0 2px 4px rgba(0,0,0,0);
411 |   
412 |   &::after {
413 |     display: flex;
414 |     white-space: pre-line;
415 |     content: attr(data-tooltip);
416 |     position: absolute;
417 |     font-size: var(--font-size-xsmall);
418 |     bottom: 1.5em;
419 |     // left: 50%;
420 |     // transform: translateX(-50%);
421 |     max-width: 100vw;
422 |     background: #333;
423 |     color: #fff;
424 |     padding: 4px 8px;
425 |     border-radius: 4px;
426 |     opacity: 0;
427 |     transition: opacity 0.15s;
428 |     transition-delay: 0;
429 |     pointer-events: none;
430 |   }
431 |   
432 |   &:hover {
433 |     // box-shadow: 0 2px 4px rgba(0,0,0,0.3);
434 |     border-radius: 4px;
435 |     z-index: 10;
436 |     
437 |     &::after {
438 |       transition-delay: 0.25s;
439 |       opacity: 1;
440 |     }
441 |   }
442 | }
443 | 
444 | @keyframes spin {
445 |   0% {
446 |       transform:rotate(0deg);
447 |   }
448 |   // 75% {
449 |   //     transform:rotate(360deg);
450 |   // }
451 |   100% {
452 |       transform:rotate(360deg);
453 |   }
454 | }
455 | 
456 | .loader {
457 |   inset: 0;
458 |   position: fixed;
459 |   margin: auto;
460 |   width: 64px;
461 |   height: 64px;
462 |   isolation: isolate;
463 | 
464 |   span {
465 |     width: 68px;
466 |     height: 68px;
467 |     position: absolute;
468 |     inset: 0;
469 |     display: inline-block;
470 | 
471 |     &::before, &::after {
472 |       content: '⚆';
473 |       color: var(--purple);
474 |       font-size: 60px;
475 |       font-weight: 100;
476 |       width: auto;
477 |       height: 64px;
478 |       border-radius: 8px;
479 |       position: absolute;
480 |       inset: 0;
481 |       display: flex;
482 |       justify-content: center;
483 |       align-items: center;
484 |       animation: spin 1.25s ease-in-out infinite;
485 |       opacity: .5;
486 |     }
487 |   }
488 |   span:first-child {
489 |     &::before { 
490 |       animation-delay: 0; 
491 |       z-index: 4;
492 |       opacity: 1;
493 |     }
494 |     &::after { 
495 |       filter: saturate(125%) brightness(125%) hue-rotate(45deg);
496 |       animation-delay: 0.05s; 
497 |       z-index: 3;
498 |     }
499 |   }
500 |   span:last-child {
501 |     &::before { 
502 |       filter: saturate(150%) brightness(170%) hue-rotate(90deg);;
503 |       animation-delay: 0.1s; 
504 |       z-index: 2;
505 |     }
506 |     &::after { 
507 |       filter: saturate(175%) brightness(250%) hue-rotate(135deg);
508 |       animation-delay: 0.15s;
509 |       z-index: 1;
510 |     }
511 |   }
512 | 
513 | 
514 | }


--------------------------------------------------------------------------------
/src/util.ts:
--------------------------------------------------------------------------------
  1 | import equal from 'deep-equal';
  2 | 
  3 | const env = process.env.NODE_ENV;
  4 | 
  5 | export function log(indentLevel:number = 0, ...args) {
  6 |     if (env !== "development") return;
  7 |     let indent:string = "──".repeat(indentLevel) + " ";
  8 |     console.log(indent, ...args);
  9 | }
 10 | 
 11 | // Recursive
 12 | export function flattenData(data:IOverrideData):{} {
 13 |     let flat = {};
 14 |     if (!data) return flat;
 15 |     if (data.overriddenProps) {
 16 |         data.overriddenProps.map(prop => {
 17 |             flat[`${data.id}--${prop.key}`] = prop;
 18 |         });
 19 |     }
 20 |     if (data.children) {
 21 |         data.children.map(child => {
 22 |             flat = Object.assign({}, flat, flattenData(child));
 23 |         });
 24 |     }
 25 |     return flat;
 26 | }
 27 | 
 28 | // Override data associated with a node and its children
 29 | export interface IOverrideData {
 30 |     sourceName: string;
 31 |     targetName: string;
 32 |     type: string;
 33 |     id: string; // Combo of source and target IDs
 34 |     sourceNode: SceneNode;
 35 |     targetNode: SceneNode;
 36 |     overriddenProps?: IOverrideProp[];
 37 |     children?: IOverrideData[];
 38 |     isCollapsed?: boolean;
 39 |     parentId?: string;
 40 | }
 41 | 
 42 | // An individual overridden property on a node. Values can be of many different types (see IProps)
 43 | export interface IOverrideProp {
 44 |     key: string;
 45 |     sourceValue: any;
 46 |     targetValue: any;
 47 |     isApplied: boolean;
 48 | }
 49 | 
 50 | export interface IBoxSides {
 51 |     top: number;
 52 |     bottom: number;
 53 |     left: number;
 54 |     right: number;
 55 | }
 56 | 
 57 | export interface IBoxCorners {
 58 |     topLeft: number;
 59 |     topRight: number;
 60 |     bottomLeft: number;
 61 |     bottomRight: number;
 62 | }
 63 | 
 64 | export function getCombinedId(source:SceneNode, target:SceneNode):string {
 65 |     return `${source.id}__${target.id}`;
 66 | }
 67 | 
 68 | export function createOverrideData(sourceNode: SceneNode, targetNode: SceneNode): IOverrideData {
 69 |     let data: IOverrideData = {
 70 |         sourceName: sourceNode.name,
 71 |         targetName: targetNode.name,
 72 |         type: targetNode.type,
 73 |         id: getCombinedId(sourceNode, targetNode),
 74 |         sourceNode,
 75 |         targetNode,
 76 |         isCollapsed: true, // collapsed by default; recursively set to false if overrides exist
 77 |     };
 78 |     return data;
 79 | }
 80 | 
 81 | export interface IProps {
 82 |     width: number;
 83 |     height: number;
 84 | 
 85 |     // absoluteTransform: Transform;
 86 |     arcData: ArcData;
 87 |     // backgrounds: Paint[]; // Deprecated
 88 |     // backgroundStyleId: string; // Deprecated
 89 |     bottomLeftRadius: number;
 90 |     bottomRightRadius: number;
 91 |     blendMode: BlendMode;
 92 |     clipsContent: boolean;
 93 |     constrainProportions: boolean;
 94 |     constraints: Constraints;
 95 |     cornerRadius: number | PluginAPI["mixed"];
 96 |     corners: IBoxCorners; // Special case: constructed from other props
 97 |     cornerSmoothing: number;
 98 |     counterAxisSizingMode: string;
 99 |     counterAxisAlignItems: string;
100 |     dashPattern: number[];
101 |     effects: Effect[];
102 |     effectStyleId: string;
103 |     fills: Paint[] | PluginAPI["mixed"];
104 |     fillStyleId: string | PluginAPI["mixed"];
105 |     itemSpacing: number;
106 |     isMask: boolean;
107 |     layoutAlign: string;
108 |     layoutGrow: number;
109 |     layoutMode: string;
110 |     locked: boolean;
111 |     mainComponent: ComponentNode;
112 |     name: string;
113 |     opacity: number;
114 |     padding: IBoxSides; // Special case: constructed from other props
115 |     paddingBottom: number;
116 |     paddingLeft: number;
117 |     paddingRight: number;
118 |     paddingTop: number;
119 |     primaryAxisSizingMode: string;
120 |     primaryAxisAlignItems: string;
121 |     // relativeTransform: Transform;
122 |     rotation: number;
123 |     strokeAlign: string;
124 |     strokeCap: string | PluginAPI["mixed"];
125 |     strokeJoin: string | PluginAPI["mixed"];
126 |     strokes: Paint[];
127 |     strokeStyleId: string;
128 |     topLeftRadius: number;
129 |     topRightRadius: number;
130 |     visible: boolean;
131 | 
132 |     characters: string;
133 |     fontName: FontName | PluginAPI["mixed"];
134 |     fontSize: number | PluginAPI["mixed"];
135 |     letterSpacing: LetterSpacing | PluginAPI["mixed"];
136 |     lineHeight: PluginAPI["mixed"] | any;
137 |     paragraphIndent: number;
138 |     paragraphSpacing: number;
139 |     textAlignHorizontal: string;
140 |     textAlignVertical: string;
141 |     textAutoResize: string;
142 |     textCase: string | PluginAPI["mixed"];
143 |     textDecoration: string | PluginAPI["mixed"];
144 |     textStyleId: string | PluginAPI["mixed"];
145 | }
146 | 
147 | const parentTypes = [
148 |     'FRAME',
149 |     'GROUP',
150 |     'INSTANCE',
151 |     'COMPONENT',
152 |     'BOOLEAN_OPERATION'
153 | ]
154 | 
155 | export function supportsChildren(node:any):boolean {
156 |     return (parentTypes.indexOf(node.type) > -1);
157 | }
158 | 
159 | const autoLayoutTypes = [
160 |     'FRAME',
161 |     'INSTANCE',
162 |     'COMPONENT'
163 | ]
164 | 
165 | export function supportsAutoLayout(node:any):boolean {
166 |     return (autoLayoutTypes.indexOf(node.type) > -1);
167 | }
168 | 
169 | export function checkEquality(key: string, sourceValue: any, targetValue: any) {
170 |     if (sourceValue === undefined && targetValue === undefined) return true;
171 |     switch (key) {
172 |         case "mainComponent":
173 |             return sourceValue.id === targetValue.id;
174 |         default:
175 |             return equal(sourceValue, targetValue);
176 |     }
177 | }
178 | 
179 | export function formatOverrideValue(key: string, prop: any) {
180 |     switch (key) {
181 |         case "backgrounds":
182 |         case "fills":
183 |         case "strokes":
184 |             if (!Array.isArray(prop) || !prop[0]) {
185 |                 return [];
186 |             }
187 |             break;
188 |         case "mainComponent":
189 |             return { name: prop.name, id: prop.id };
190 |     }
191 |     if (typeof prop === 'symbol') return '(Mixed)';
192 |     return prop;
193 | }
194 | 
195 | export function countChildren(node:any):number {
196 |     let counter:number = 0;
197 |     if (node.children) {
198 |         node.children.forEach((child) => {
199 |             counter++;
200 |             counter += countChildren(child);
201 |         })
202 |     }
203 |     return counter;
204 | }
205 | 
206 | 
207 | 
208 | /**
209 |  * NOTE: Using the explicit property names like this is many, many times
210 |  * faster than an iterated string-based property lookup like node[key].
211 |  */
212 | export function getPropsFromNode(node:any):IProps {
213 |     let props:any = {};
214 | 
215 |     props.width = node.width;
216 |     props.height = node.height;
217 | 
218 |     // props.absoluteTransform = node.absoluteTransform;
219 |     props.arcData = node.arcData;
220 |     // props.backgrounds = node.backgrounds; // Deprecated
221 |     // props.backgroundStyleId = node.backgroundStyleId; // Deprecated
222 |     props.blendMode = node.blendMode;
223 |     props.bottomLeftRadius = node.bottomLeftRadius;
224 |     props.bottomRightRadius = node.bottomRightRadius;
225 |     props.clipsContent = node.clipsContent;
226 |     props.constrainProportions = node.constrainProportions;
227 |     props.constraints = node.constraints;
228 |     props.cornerRadius = node.cornerRadius;
229 |     props.cornerSmoothing = node.cornerSmoothing;
230 |     props.counterAxisSizingMode = node.counterAxisSizingMode;
231 |     props.counterAxisAlignItems = node.counterAxisAlignItems;
232 |     props.dashPattern = node.dashPattern;
233 |     props.effects = node.effects;
234 |     props.effectStyleId = node.effectStyleId;
235 |     props.fills = node.fills;
236 |     props.fillStyleId = node.fillStyleId;
237 |     props.isMask = node.isMask;
238 |     props.itemSpacing = node.itemSpacing;
239 |     props.layoutAlign = node.layoutAlign;
240 |     props.layoutGrow = node.layoutGrow;
241 |     props.layoutMode = node.layoutMode;
242 |     props.locked = node.locked;
243 |     props.mainComponent = node.mainComponent;
244 |     props.name = node.name;
245 |     props.opacity = node.opacity;
246 |     props.paddingBottom = node.paddingBottom;
247 |     props.paddingLeft = node.paddingLeft;
248 |     props.paddingRight = node.paddingRight;
249 |     props.paddingTop = node.paddingTop;
250 |     props.primaryAxisSizingMode = node.primaryAxisSizingMode;
251 |     props.primaryAxisAlignItems = node.primaryAxisAlignItems;
252 |     props.rotation = node.rotation;
253 |     // props.relativeTransform = node.relativeTransform;
254 |     props.strokeAlign = node.strokeAlign;
255 |     props.strokeCap = node.strokeCap;
256 |     props.strokeJoin = node.strokeJoin;
257 |     props.strokes = node.strokes;
258 |     props.strokeStyleId = node.strokeStyleId;
259 |     props.topLeftRadius = node.topLeftRadius;
260 |     props.topRightRadius = node.topRightRadius;
261 |     props.visible = node.visible;
262 | 
263 |     props.characters = node.characters;
264 |     props.fontName = node.fontName;
265 |     props.fontSize = node.fontSize;
266 |     props.letterSpacing = node.letterSpacing;
267 |     props.lineHeight = node.lineHeight;
268 |     props.paragraphIndent = node.paragraphIndent
269 |     props.paragraphSpacing = node.paragraphSpacing
270 |     props.textAlignHorizontal = node.textAlignHorizontal;
271 |     props.textAlignVertical = node.textAlignVertical;
272 |     props.textAutoResize = node.textAutoResize;
273 |     props.textCase = node.textCase;
274 |     props.textDecoration = node.textDecoration;
275 |     props.textStyleId = node.textStyleId;
276 | 
277 |     // Construct special-case objects
278 |     props.padding = {
279 |         top: node.paddingTop,
280 |         bottom: node.paddingBottom,
281 |         left: node.paddingLeft,
282 |         right: node.paddingRight
283 |     }
284 | 
285 |     if (typeof node.cornerRadius === 'symbol') {
286 |         props.corners = {
287 |             topLeft: node.topLeftRadius,
288 |             topRight: node.topRightRadius,
289 |             bottomLeft: node.bottomLeftRadius,
290 |             bottomRight: node.bottomRightRadius
291 |         }
292 |     } else {
293 |         props.corners = {
294 |             topLeft: node.cornerRadius,
295 |             topRight: node.cornerRadius,
296 |             bottomLeft: node.cornerRadius,
297 |             bottomRight: node.cornerRadius
298 |         }
299 |     }
300 | 
301 |     return props;
302 | }
303 | 
304 | export enum SelectionValidation {
305 |     NO_SELECTION = "Nothing selected",
306 |     MORE_THAN_TWO = "More than two",
307 |     IS_NODE = "Not an Instance",
308 |     IS_INSTANCE = "One Instance",
309 |     IS_TWO = "Two nodes",
310 | }
311 | 
312 | export interface ISelectionValidation {
313 |     isValid: boolean;
314 |     reason?: SelectionValidation;
315 |     childCount?: number;
316 | }
317 | 
318 | export function validateSelection(selection: SceneNode[]): ISelectionValidation {
319 |     if (selection.length === 0) {
320 |         return { isValid: false, reason: SelectionValidation.NO_SELECTION };
321 |     }
322 |     if (selection.length > 2) {
323 |         return { isValid: false, reason: SelectionValidation.MORE_THAN_TWO };
324 |     }
325 |     if (selection.length === 1) {
326 |         let childCount = countChildren(selection[0]);
327 |         if (selection[0].type !== "INSTANCE") {
328 |             return { isValid: false, reason: SelectionValidation.IS_NODE, childCount };
329 |         } else {
330 |             return { isValid: true, reason: SelectionValidation.IS_INSTANCE, childCount };
331 |         }
332 |     }
333 |     if (selection.length === 2) {
334 |         let childCount = countChildren(selection[0]);
335 |         return { isValid: true, reason: SelectionValidation.IS_TWO, childCount };
336 |     }
337 | }
338 | 
339 | export interface IColor {
340 |     r: number;
341 |     g: number;
342 |     b: number;
343 |     a?: number;
344 | }
345 | 
346 | export function formatRgbaColor(color: IColor):IColor {
347 |     let converted: IColor = {
348 |         r: Math.round(color.r * 255),
349 |         g: Math.round(color.g * 255),
350 |         b: Math.round(color.b * 255)
351 |     }
352 |     if (color.a !== undefined) {
353 |         converted.a = Math.round(color.a * 255);
354 |     }
355 |     return converted;
356 | }
357 | 
358 | export function rgbaToHex(color: IColor) {
359 |     let returnString:string;
360 |     let base = 16;
361 |     let r = color.r.toString(base);
362 |     let g = color.g.toString(base);
363 |     let b = color.b.toString(base);
364 |     if (r.length == 1)
365 |         r = "0" + r;
366 |     if (g.length == 1)
367 |         g = "0" + g;
368 |     if (b.length == 1)
369 |         b = "0" + b;
370 |     returnString = "#" + r + g + b;
371 |     if (color.a !== undefined) {
372 |         let a = color.a.toString(base);
373 |         if (a.length == 1)
374 |             a = "0" + a;
375 |         returnString += a;
376 |     }
377 |     return returnString.toUpperCase();
378 | }
379 | 
380 | export function createCssGradient(paint:GradientPaint) {
381 |     let gradient:string = "";
382 |     switch (paint.type) {
383 |         default:
384 |         case "GRADIENT_LINEAR":
385 |             gradient += "linear-gradient(";
386 |             break;
387 |         case "GRADIENT_RADIAL":
388 |             gradient += "radial-gradient(";
389 |             break;
390 |         case "GRADIENT_ANGULAR":
391 |         case "GRADIENT_DIAMOND":
392 |             gradient += "conic-gradient(";
393 |             break;
394 |     }
395 |     paint.gradientStops.forEach(stop => {
396 |         let formatted = formatRgbaColor(stop.color);
397 |         let stopString:string = rgbaToHex(formatted);
398 |         gradient += stopString + ", "
399 |     })
400 |     gradient = gradient.slice(0, -2);
401 |     gradient += ")";
402 |     return gradient;
403 | }
404 | 
405 | export function truncate(value:any, chars:number = 0) {
406 |     if (!isNaN(value)) {
407 |         return parseFloat((value as number).toFixed(chars));
408 |     } else {
409 |         return value;
410 |     }
411 | }
412 | 
413 | export function deCamel(s:string):string {
414 |     const regex = s.replace(/([A-Z]{1,})/g, " $1");
415 |     return regex.charAt(0).toUpperCase() + regex.slice(1);
416 | }
417 | 


--------------------------------------------------------------------------------
/src/code.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   IOverrideData,
  3 |   IOverrideProp,
  4 |   checkEquality,
  5 |   createOverrideData,
  6 |   formatOverrideValue,
  7 |   getPropsFromNode,
  8 |   log,
  9 |   supportsAutoLayout,
 10 |   supportsChildren,
 11 |   validateSelection,
 12 | } from "./util";
 13 | 
 14 | figma.showUI(__html__, { title: "Maximum Override", width: 540, height: 600 });
 15 | 
 16 | let temporaryNodes: SceneNode[] = [];
 17 | let dataById: { [id: string]: IOverrideData };
 18 | let comparedNodeCount: number = 0;
 19 | let hasOverrides: IOverrideData[] = [];
 20 | 
 21 | /**
 22 |  * @param data The node that's being recursively introspected
 23 |  * @param recursionLevel Integer for indenting output strings
 24 |  */
 25 | function getOverridesForData(
 26 |   data:IOverrideData,
 27 |   recursionLevel: number
 28 | ):IOverrideData {
 29 |   let {sourceNode, targetNode} = data;
 30 |   // let start = new Date().getTime();
 31 |   if (targetNode.type !== sourceNode.type) {
 32 |     log(recursionLevel, `Can't compare ${sourceNode.type} to ${targetNode.type}`);
 33 |     return null;
 34 |   }
 35 |   let overriddenProps = [];
 36 |   let targetProps = getPropsFromNode(targetNode);
 37 |   let sourceProps = getPropsFromNode(sourceNode);
 38 |   for (const key in targetProps) {
 39 |     if (!checkEquality(key, targetProps[key], sourceProps[key])) {
 40 |       let prop: IOverrideProp = {
 41 |         key: key,
 42 |         sourceValue: formatOverrideValue(key, sourceProps[key]),
 43 |         targetValue: formatOverrideValue(key, targetProps[key]),
 44 |         isApplied: true,
 45 |       };
 46 |       overriddenProps.push(prop);
 47 |     }
 48 |   }
 49 |   data.overriddenProps = overriddenProps;
 50 |   return data;
 51 | }
 52 | 
 53 | // Recursive
 54 | function compareProps(
 55 |   data: IOverrideData,
 56 |   recursionLevel: number
 57 | ):IOverrideData {
 58 |   data.overriddenProps = []; // Clear in case of swap
 59 |   data = getOverridesForData(data, recursionLevel + 1);
 60 |   if (!data || !data.overriddenProps) return;
 61 |   if (data.overriddenProps.length > 0) {
 62 |     hasOverrides.push(data);
 63 |   }
 64 |   const targetNode:any = data.targetNode;
 65 |   /*
 66 |     If the target's mainComponent has changed, we need to compare against an instance
 67 |     of that main rather than the original component. Note that this only applies to
 68 |     nested instances within the target, not the root level, hence recursionLevel > 1.
 69 |     TODO: make this toggleable?
 70 |     */
 71 |   let hasNewMain: boolean;
 72 |   data.overriddenProps.forEach((prop) => {
 73 |     if (prop.key === "mainComponent" && recursionLevel > 1) {
 74 |       hasNewMain = true;
 75 |     }
 76 |   });
 77 |   if (hasNewMain) {
 78 |     let component = (data.targetNode as InstanceNode).mainComponent as ComponentNode;
 79 |     if (component.remote) {
 80 |       log(recursionLevel + 1, "Remote component detected. Key:", component.key);
 81 |     }
 82 |     try {
 83 |       let newSourceNode: SceneNode = component.createInstance();
 84 |       let newSourceData: IOverrideData = createOverrideData(newSourceNode, targetNode);
 85 |       log(recursionLevel, "New Main", newSourceNode.name, newSourceData);
 86 |       temporaryNodes.push(newSourceNode);
 87 |     } catch (e) {
 88 |       log(recursionLevel + 1, "Couldn't create an instance. Is this a nested main component?", e );
 89 |       return;
 90 |     }
 91 |   }
 92 | 
 93 |   if (supportsChildren(targetNode)) {
 94 |     const targetChildren = targetNode.children;
 95 |     let dataChildren:IOverrideData[] = [];
 96 |     for (let i = 0, n = targetChildren.length; i < n; i++) {
 97 |       const targetChild = targetChildren[i] as SceneNode;
 98 |       const sourceNode:any = data.sourceNode;
 99 |       if (supportsChildren(sourceNode)) {
100 |         const sourceChild = (sourceNode as any).children[i];
101 |         if (sourceChild === undefined) {
102 |           log(recursionLevel + 1, `sourceChild at ${i} is undefined in ${sourceNode.children}`);
103 |           break;
104 |         }
105 |         const childData = createOverrideData(sourceChild, targetChild);
106 |         childData.parentId = data.id;
107 |         dataChildren.push(compareProps(childData, recursionLevel + 1));
108 |       } else {
109 |         log(recursionLevel + 1, `Original node ${data.sourceName} has no matching children.`);
110 |       }
111 |     }
112 |     data.children = dataChildren.length > 0 ? dataChildren : null;
113 |   }
114 | 
115 |   comparedNodeCount++;
116 |   dataById[data.id] = data;
117 |   return data;
118 | }
119 | 
120 | function cleanUpTemporaryNodes() {
121 |   temporaryNodes.forEach((node) => {
122 |     node.remove();
123 |   });
124 |   temporaryNodes = [];
125 | }
126 | 
127 | function getDataFromSelection(selection: SceneNode[]): any {
128 |   let targetNode: SceneNode, sourceNode: SceneNode;
129 |   let data: IOverrideData;
130 |   if (selection.length === 1) {
131 |     targetNode = selection[0];
132 |     if (targetNode.type === "INSTANCE") {
133 |       targetNode = selection[0] as InstanceNode;
134 |       sourceNode = targetNode.mainComponent.createInstance();
135 |       data = createOverrideData(sourceNode, targetNode);
136 |       data.sourceName = "Main";
137 |       log(0, `Comparing main ${data.sourceName} to target ${data.targetName}`);
138 |       temporaryNodes.push(data.sourceNode);
139 |     } else {
140 |       log(0, "Selection must be an Instance.");
141 |     }
142 |   } else if (selection.length == 2) {
143 |     // note that order is reversed
144 |     sourceNode = selection[0];
145 |     targetNode = selection[1];
146 |     data = createOverrideData(sourceNode, targetNode);
147 |   } else {
148 |     log(0, "Cannot compare more than two selected items.");
149 |   }
150 |   return data;
151 | }
152 | 
153 | // Recursive (in reverse)
154 | function expandParents(data: IOverrideData) {
155 |   data.isCollapsed = false;
156 |   if (data.parentId) {
157 |     const parent = dataById[data.parentId];
158 |     // if the parent has already been expanded, stop here
159 |     if (parent.isCollapsed) expandParents(parent);
160 |   }
161 | }
162 | 
163 | function getOverrides(
164 |   data: IOverrideData
165 | ) {
166 |   hasOverrides = [];
167 |   dataById = {};
168 |   data = compareProps(data, 1);
169 |   hasOverrides.forEach((data) => expandParents(data));
170 |   cleanUpTemporaryNodes();
171 |   return data;
172 | }
173 | 
174 | /******************************************
175 |  *  Apply overrides
176 |  ******************************************/
177 | 
178 | /**
179 |  * @param key Override property key as string
180 |  * @param prop The prop data object
181 |  * @param target The Figma node to apply the prop to
182 |  * @param isRoot Whether this is the top-level parent
183 |  * @returns true if we're updating the main component
184 |  */
185 | function applyOverrideProp(
186 |   key: string,
187 |   prop: any,
188 |   target: SceneNode,
189 |   isRoot: boolean
190 | ): boolean {
191 |   let textProps: any[] = [];
192 |   switch (key) {
193 |     case "backgrounds":
194 |     case "fills":
195 |     case "strokes":
196 |       if (Array.isArray(prop)) {
197 |         target[key] = prop;
198 |       }
199 |       return false;
200 |     case "mainComponent":
201 |       // don't apply this one at the root level
202 |       if (!isRoot) {
203 |         //TODO: Add checkbox for "don't rename layers"
204 |         // target["autoRename"] = false;
205 |         target[key] = prop;
206 |       }
207 |       return true;
208 |     // For these text props, we must async load the font first.
209 |     // Applying them should be almost synchronous once the font has been loaded.
210 |     case "fontName":
211 |       let textNode = target as TextNode;
212 |       let fontName: FontName = prop as FontName;
213 |       figma.loadFontAsync(fontName).then((data) => {
214 |         (textNode as any).fontName = fontName;
215 |       });
216 |       return false;
217 |     case "characters":
218 |     case "fontSize":
219 |     case "letterSpacing":
220 |     case "lineHeight":
221 |     case "paragraphIndent":
222 |     case "paragraphSpacing":
223 |     case "paragraphSpacing":
224 |     case "textAlignHorizontal":
225 |     case "textAlignVertical":
226 |     case "textAutoResize":
227 |     case "textCase":
228 |     case "textDecoration":
229 |     case "textStyleId":
230 |       //TODO: Send UI notifications for errors
231 |       if (key in target) {
232 |         if (typeof prop === "symbol") {
233 |           log(0, "Multiple font attributes detected within ", prop);
234 |           return false;
235 |         }
236 |         let textNode = target as TextNode;
237 |         if (textNode.hasMissingFont) {
238 |           log(0, "Text field has missing font. Can't edit properties.");
239 |           return false;
240 |         }
241 |         textProps.push({ key, prop });
242 |         let fontName = textNode.fontName;
243 |         if (typeof fontName === "symbol") {
244 |           log(0, "Multiple font attributes detected within ", target.name);
245 |           return false;
246 |         }
247 |         figma.loadFontAsync(fontName).then((data) => {
248 |           (textNode as any)[key] = prop;
249 |         });
250 |       }
251 |       return false;
252 |     //TODO: Only call resize() once
253 |     case "width":
254 |       target.resize(prop, target.height);
255 |       return false;
256 |     case "height":
257 |       target.resize(target.width, prop);
258 |       return false;
259 |     case "x":
260 |     case "y":
261 |       const hasAutoLayout =
262 |         supportsAutoLayout(target) && (target as any).layoutAlign !== "NONE";
263 |       if (!hasAutoLayout && !isRoot) {
264 |         target[key] = prop;
265 |       }
266 |     default:
267 |       target[key] = prop;
268 |       return false;
269 |   }
270 | }
271 | 
272 | // Recursive
273 | function applyOverridesToNode(
274 |   data: IOverrideData,
275 |   target: any,
276 |   recursionLevel: number
277 | ) {
278 |   const isRoot = recursionLevel === 1;
279 |   log(recursionLevel, "applyOverridesToNode", data.targetName);
280 |   data.overriddenProps.forEach((prop) => {
281 |     try {
282 |       if (prop.key in target) {
283 |         if (prop.isApplied) {
284 |           applyOverrideProp(prop.key, prop.sourceValue, target, isRoot);
285 |         }
286 |       }
287 |     } catch (e) {
288 |       log(0, "Cannot apply prop", prop, e);
289 |     }
290 |   });
291 |   // recursion
292 |   if (data.children) {
293 |     for (let i: number = 0; i < data.children.length; i++) {
294 |       const childData = data.children[i];
295 |       // find child element by corresponding position in hierarchy
296 |       let targetChild: SceneNode;
297 |       try {
298 |         targetChild = target.children[i] as SceneNode;
299 |         applyOverridesToNode(childData, targetChild, recursionLevel + 1);
300 |       } catch (e) {
301 |         log(0, "Error", e, "in applyOverridesToNode.");
302 |         log(0, "   targetChild:", targetChild);
303 |         log(0, "   in", target.children, "at", i, "on parent", target);
304 |       }
305 |     }
306 |   }
307 | }
308 | 
309 | /*******************************************************
310 |  * Handle UI
311 |  *******************************************************/
312 | 
313 | async function validateClientStorage() {
314 |   const data = await figma.clientStorage.getAsync("copiedOverrides");
315 |   const isValid = data !== undefined;
316 |   if (isValid) {
317 |     figma.ui.postMessage({
318 |       type: "client-storage-validated",
319 |     });
320 |   }
321 |   return isValid;
322 | }
323 | 
324 | figma.on("selectionchange", () => {
325 |   const selection: SceneNode[] = Array.from(figma.currentPage.selection);
326 |   const validation = validateSelection(selection);
327 |   validateClientStorage()
328 |     .then((isValid) => {
329 |       figma.ui.postMessage({
330 |         type: "selection-validation",
331 |         validation,
332 |         clientStorageIsValid: isValid,
333 |       });
334 |     })
335 |     .catch(() => {
336 |       // TODO: Notify client
337 |       figma.ui.postMessage({
338 |         type: "selection-validation",
339 |         validation,
340 |         clientStorageIsValid: false,
341 |       });
342 |     });
343 | });
344 | 
345 | figma.ui.onmessage = (msg) => {
346 |   if (msg.type === "initial-render") {
347 |     const selection: SceneNode[] = Array.from(figma.currentPage.selection);
348 |     figma.ui.postMessage({
349 |       type: "selection-validation",
350 |       validation: validateSelection(selection),
351 |     });
352 |     validateClientStorage();
353 |   }
354 | 
355 |   if (msg.type === "compare-selected") {
356 |     const selection: SceneNode[] = Array.from(figma.currentPage.selection);
357 |     let start = new Date().getTime();
358 |     log(0, "Started inspecting selected nodes...")
359 |     let data = getDataFromSelection(selection);
360 |     let diff = getOverrides(data);
361 |     let end = new Date().getTime();
362 |     log(1, "Finished inspecting selected nodes.", data.id, end - start);
363 |     figma.ui.postMessage({
364 |       type: "comparison-finished",
365 |       payload: diff,
366 |     });
367 |   }
368 | 
369 |   if (msg.type === "copy-overrides") {
370 |     log(0, "Received override data. Saving...", msg);
371 |     let data: IOverrideData = msg.data;
372 |     figma.clientStorage.setAsync("copiedOverrides", data);
373 |     figma.ui.postMessage({ type: "copy-confirmation" });
374 |   }
375 | 
376 |   if (msg.type === "paste-overrides") {
377 |     log(0, "Received paste request. Getting node...", msg);
378 |     let target: SceneNode;
379 |     if (figma.currentPage.selection.length === 1) {
380 |       target = figma.currentPage.selection[0] as SceneNode;
381 |     } else {
382 |       if (msg.data.targetId) {
383 |         target = figma.getNodeById(msg.data.targetId) as SceneNode;
384 |       }
385 |     }
386 |     if (target === undefined) {
387 |       target = figma.currentPage.selection[0] as SceneNode;
388 |     }
389 |     figma.clientStorage
390 |       .getAsync("copiedOverrides")
391 |       .then((data) => {
392 |         log(0, "got async data", data, "target", target);
393 |         applyOverridesToNode(data, target, 1);
394 |       })
395 |       .catch((error) => {
396 |         // TODO: post notification
397 |         log(0, "ERROR: async", error);
398 |       })
399 |       .finally(() => {});
400 |   }
401 | 
402 |   if (msg.type === "swap-selected") {
403 |     log(0, "Swapping symbols", msg);
404 |     let originalData:IOverrideData = createOverrideData(
405 |       figma.getNodeById(msg.data.targetId) as SceneNode,
406 |       figma.getNodeById(msg.data.sourceId) as SceneNode
407 |     );
408 |     let diff = getOverrides(
409 |       originalData,
410 |     );
411 |     log(0, "Finished inspecting swapped nodes.", originalData.id);
412 |     figma.ui.postMessage({
413 |       type: "comparison-finished",
414 |       payload: diff,
415 |     });
416 |   }
417 | 
418 |   if (msg.type === "expand-ui") {
419 |     figma.ui.resize(540, 100);
420 |   }
421 | 
422 |   if (msg.type === "collapse-ui") {
423 |     figma.ui.resize(540, 600);
424 |   }
425 | 
426 |   if (msg.type === "prop-click") {
427 |     log(0, `Prop "${msg.propId}" clicked on node ${msg.nodeId}`);
428 |   }
429 | };
430 | 


--------------------------------------------------------------------------------
/dist/ui.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/ui.css","webpack:///./node_modules/css-loader/dist/runtime/api.js","webpack:///./node_modules/style-loader/lib/addStyles.js","webpack:///./node_modules/style-loader/lib/urls.js","webpack:///./src/ui.css?3b97","webpack:///./src/ui.ts"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA;;;;;;;;;;;;AClFA,2BAA2B,mBAAO,CAAC,qGAAgD;AACnF;AACA,cAAc,QAAS,SAAS,0BAA0B,uBAAuB,iBAAiB,GAAG,YAAY,kBAAkB,6BAA6B,GAAG,UAAU,uBAAuB,sBAAsB,iBAAiB,iBAAiB,sBAAsB,gBAAgB,sCAAsC,kBAAkB,GAAG,WAAW,qBAAqB,wBAAwB,iBAAiB,GAAG,SAAS,iBAAiB,kBAAkB,iBAAiB,GAAG,eAAe,gDAAgD,EAAE,gBAAgB,qCAAqC,EAAE,iBAAiB,gDAAgD,EAAE,eAAe,qCAAqC,EAAE;;;;;;;;;;;;;ACF7sB;;AAEb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;;AAEhB;AACA;AACA;;AAEA;AACA,2CAA2C,qBAAqB;AAChE;;AAEA;AACA,KAAK;AACL,IAAI;AACJ;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,mBAAmB,iBAAiB;AACpC;AACA;;AAEA;AACA;AACA;AACA;;AAEA,oBAAoB,qBAAqB;AACzC,6BAA6B;AAC7B;AACA;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,8BAA8B;;AAE9B;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA,CAAC;;;AAGD;AACA;AACA;AACA,qDAAqD,cAAc;AACnE;AACA,C;;;;;;;;;;;ACzFA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,8CAA8C;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;;AAEA,cAAc,mBAAO,CAAC,uDAAQ;;AAE9B;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;AACA;;AAEA,iBAAiB,mBAAmB;AACpC;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,iBAAiB,sBAAsB;AACvC;;AAEA;AACA,mBAAmB,2BAA2B;;AAE9C;AACA;AACA;AACA;AACA;;AAEA;AACA,gBAAgB,mBAAmB;AACnC;AACA;;AAEA;AACA;;AAEA,iBAAiB,2BAA2B;AAC5C;AACA;;AAEA,QAAQ,uBAAuB;AAC/B;AACA;AACA,GAAG;AACH;;AAEA,iBAAiB,uBAAuB;AACxC;AACA;;AAEA,2BAA2B;AAC3B;AACA;AACA;;AAEA;AACA;AACA;;AAEA,gBAAgB,iBAAiB;AACjC;AACA;AACA;AACA;AACA;AACA,cAAc;;AAEd,kDAAkD,sBAAsB;AACxE;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA,EAAE;AACF;AACA,EAAE;AACF;AACA;AACA,EAAE;AACF;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,EAAE;AACF;;AAEA;AACA,KAAK,KAAwC,EAAE,EAE7C;;AAEF,QAAQ,sBAAiB;AACzB;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;;AAEA,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,CAAC;;AAED;AACA;;AAEA;AACA;AACA,EAAE;AACF;AACA;;AAEA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,EAAE;AACF;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uDAAuD;AACvD;;AAEA,6BAA6B,mBAAmB;;AAEhD;;AAEA;;AAEA;AACA;;;;;;;;;;;;;AC9YA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC,WAAW,EAAE;AACrD,wCAAwC,WAAW,EAAE;;AAErD;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,sCAAsC;AACtC,GAAG;AACH;AACA,8DAA8D;AAC9D;;AAEA;AACA;AACA,EAAE;;AAEF;AACA;AACA;;;;;;;;;;;;;ACvFA,cAAc,mBAAO,CAAC,4GAAmD;;AAEzE,4CAA4C,QAAS;;AAErD;AACA;;;;AAIA,eAAe;;AAEf;AACA;;AAEA,aAAa,mBAAO,CAAC,mGAAgD;;AAErE;;AAEA,GAAG,KAAU,EAAE,E;;;;;;;;;;;;ACnBf;AAAA;AAAA;AAAkB;AAClB;AACA,wBAAwB,iBAAiB,qBAAqB,EAAE;AAChE;AACA;AACA,wBAAwB,iBAAiB,sBAAsB,EAAE;AACjE;AACA;AACA,oBAAoB,iBAAiB,qBAAqB,EAAE","file":"ui.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/ui.ts\");\n","exports = module.exports = require(\"../node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.id, \"body {\\n  font: 12px sans-serif;\\n  text-align: center;\\n  margin: 20px;\\n}\\n.buttons {\\n  display: flex;\\n  flex-flow: column nowrap;\\n}\\nbutton {\\n  border-radius: 5px;\\n  background: white;\\n  color: black;\\n  border: none;\\n  padding: 8px 15px;\\n  margin: 2px;\\n  box-shadow: inset 0 0 0 1px black;\\n  outline: none;\\n}\\n#create {\\n  box-shadow: none;\\n  background: #18A0FB;\\n  color: white;\\n}\\ninput {\\n  border: none;\\n  outline: none;\\n  padding: 8px;\\n}\\ninput:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }\\nbutton:focus { box-shadow: inset 0 0 0 2px #18A0FB; }\\n#create:focus { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3); }\\ninput:focus { box-shadow: inset 0 0 0 2px #18A0FB; }\\n\", \"\"]);\n","\"use strict\";\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item, useSourceMap);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \"{\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join('');\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery) {\n    if (typeof modules === 'string') {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, '']];\n    }\n\n    var alreadyImportedModules = {};\n\n    for (var i = 0; i < this.length; i++) {\n      // eslint-disable-next-line prefer-destructuring\n      var id = this[i][0];\n\n      if (id != null) {\n        alreadyImportedModules[id] = true;\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = modules[_i]; // skip already imported module\n      // this implementation is not 100% perfect for weird media query combinations\n      // when a module is imported multiple times with different media queries.\n      // I hope this will never occur (Hey this way we have smaller bundles)\n\n      if (item[0] == null || !alreadyImportedModules[item[0]]) {\n        if (mediaQuery && !item[2]) {\n          item[2] = mediaQuery;\n        } else if (mediaQuery) {\n          item[2] = \"(\".concat(item[2], \") and (\").concat(mediaQuery, \")\");\n        }\n\n        list.push(item);\n      }\n    }\n  };\n\n  return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n  var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n  var cssMapping = item[3];\n\n  if (!cssMapping) {\n    return content;\n  }\n\n  if (useSourceMap && typeof btoa === 'function') {\n    var sourceMapping = toComment(cssMapping);\n    var sourceURLs = cssMapping.sources.map(function (source) {\n      return \"/*# sourceURL=\".concat(cssMapping.sourceRoot).concat(source, \" */\");\n    });\n    return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n  }\n\n  return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n  // eslint-disable-next-line no-undef\n  var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n  var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n  return \"/*# \".concat(data, \" */\");\n}","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target, parent) {\n  if (parent){\n    return parent.querySelector(target);\n  }\n  return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target, parent) {\n                // If passing function in options, then use it for resolve \"head\" element.\n                // Useful for Shadow Root style i.e\n                // {\n                //   insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n                // }\n                if (typeof target === 'function') {\n                        return target();\n                }\n                if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target, parent);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = require(\"./urls\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n\t// tags it will allow on a page\n\tif (!options.singleton && typeof options.singleton !== \"boolean\") options.singleton = isOldIE();\n\n\t// By default, add <style> tags to the <head> element\n        if (!options.insertInto) options.insertInto = \"head\";\n\n\t// By default, add <style> tags to the bottom of the target\n\tif (!options.insertAt) options.insertAt = \"bottom\";\n\n\tvar styles = listToStyles(list, options);\n\n\taddStylesToDom(styles, options);\n\n\treturn function update (newList) {\n\t\tvar mayRemove = [];\n\n\t\tfor (var i = 0; i < styles.length; i++) {\n\t\t\tvar item = styles[i];\n\t\t\tvar domStyle = stylesInDom[item.id];\n\n\t\t\tdomStyle.refs--;\n\t\t\tmayRemove.push(domStyle);\n\t\t}\n\n\t\tif(newList) {\n\t\t\tvar newStyles = listToStyles(newList, options);\n\t\t\taddStylesToDom(newStyles, options);\n\t\t}\n\n\t\tfor (var i = 0; i < mayRemove.length; i++) {\n\t\t\tvar domStyle = mayRemove[i];\n\n\t\t\tif(domStyle.refs === 0) {\n\t\t\t\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\n\n\t\t\t\tdelete stylesInDom[domStyle.id];\n\t\t\t}\n\t\t}\n\t};\n};\n\nfunction addStylesToDom (styles, options) {\n\tfor (var i = 0; i < styles.length; i++) {\n\t\tvar item = styles[i];\n\t\tvar domStyle = stylesInDom[item.id];\n\n\t\tif(domStyle) {\n\t\t\tdomStyle.refs++;\n\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\n\t\t\t}\n\n\t\t\tfor(; j < item.parts.length; j++) {\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\t\t} else {\n\t\t\tvar parts = [];\n\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\n\t\t}\n\t}\n}\n\nfunction listToStyles (list, options) {\n\tvar styles = [];\n\tvar newStyles = {};\n\n\tfor (var i = 0; i < list.length; i++) {\n\t\tvar item = list[i];\n\t\tvar id = options.base ? item[0] + options.base : item[0];\n\t\tvar css = item[1];\n\t\tvar media = item[2];\n\t\tvar sourceMap = item[3];\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\n\n\t\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\n\t\telse newStyles[id].parts.push(part);\n\t}\n\n\treturn styles;\n}\n\nfunction insertStyleElement (options, style) {\n\tvar target = getElement(options.insertInto)\n\n\tif (!target) {\n\t\tthrow new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");\n\t}\n\n\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\n\n\tif (options.insertAt === \"top\") {\n\t\tif (!lastStyleElementInsertedAtTop) {\n\t\t\ttarget.insertBefore(style, target.firstChild);\n\t\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\n\t\t\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\n\t\t} else {\n\t\t\ttarget.appendChild(style);\n\t\t}\n\t\tstylesInsertedAtTop.push(style);\n\t} else if (options.insertAt === \"bottom\") {\n\t\ttarget.appendChild(style);\n\t} else if (typeof options.insertAt === \"object\" && options.insertAt.before) {\n\t\tvar nextSibling = getElement(options.insertAt.before, target);\n\t\ttarget.insertBefore(style, nextSibling);\n\t} else {\n\t\tthrow new Error(\"[Style Loader]\\n\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\n Must be 'top', 'bottom', or Object.\\n (https://github.com/webpack-contrib/style-loader#insertat)\\n\");\n\t}\n}\n\nfunction removeStyleElement (style) {\n\tif (style.parentNode === null) return false;\n\tstyle.parentNode.removeChild(style);\n\n\tvar idx = stylesInsertedAtTop.indexOf(style);\n\tif(idx >= 0) {\n\t\tstylesInsertedAtTop.splice(idx, 1);\n\t}\n}\n\nfunction createStyleElement (options) {\n\tvar style = document.createElement(\"style\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\n\tif(options.attrs.nonce === undefined) {\n\t\tvar nonce = getNonce();\n\t\tif (nonce) {\n\t\t\toptions.attrs.nonce = nonce;\n\t\t}\n\t}\n\n\taddAttrs(style, options.attrs);\n\tinsertStyleElement(options, style);\n\n\treturn style;\n}\n\nfunction createLinkElement (options) {\n\tvar link = document.createElement(\"link\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\toptions.attrs.rel = \"stylesheet\";\n\n\taddAttrs(link, options.attrs);\n\tinsertStyleElement(options, link);\n\n\treturn link;\n}\n\nfunction addAttrs (el, attrs) {\n\tObject.keys(attrs).forEach(function (key) {\n\t\tel.setAttribute(key, attrs[key]);\n\t});\n}\n\nfunction getNonce() {\n\tif (typeof __webpack_nonce__ === 'undefined') {\n\t\treturn null;\n\t}\n\n\treturn __webpack_nonce__;\n}\n\nfunction addStyle (obj, options) {\n\tvar style, update, remove, result;\n\n\t// If a transform function was defined, run it on the css\n\tif (options.transform && obj.css) {\n\t    result = typeof options.transform === 'function'\n\t\t ? options.transform(obj.css) \n\t\t : options.transform.default(obj.css);\n\n\t    if (result) {\n\t    \t// If transform returns a value, use that instead of the original css.\n\t    \t// This allows running runtime transformations on the css.\n\t    \tobj.css = result;\n\t    } else {\n\t    \t// If the transform function returns a falsy value, don't add this css.\n\t    \t// This allows conditional loading of css\n\t    \treturn function() {\n\t    \t\t// noop\n\t    \t};\n\t    }\n\t}\n\n\tif (options.singleton) {\n\t\tvar styleIndex = singletonCounter++;\n\n\t\tstyle = singleton || (singleton = createStyleElement(options));\n\n\t\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\n\t\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\n\n\t} else if (\n\t\tobj.sourceMap &&\n\t\ttypeof URL === \"function\" &&\n\t\ttypeof URL.createObjectURL === \"function\" &&\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\n\t\ttypeof Blob === \"function\" &&\n\t\ttypeof btoa === \"function\"\n\t) {\n\t\tstyle = createLinkElement(options);\n\t\tupdate = updateLink.bind(null, style, options);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\n\t\t\tif(style.href) URL.revokeObjectURL(style.href);\n\t\t};\n\t} else {\n\t\tstyle = createStyleElement(options);\n\t\tupdate = applyToTag.bind(null, style);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\t\t};\n\t}\n\n\tupdate(obj);\n\n\treturn function updateStyle (newObj) {\n\t\tif (newObj) {\n\t\t\tif (\n\t\t\t\tnewObj.css === obj.css &&\n\t\t\t\tnewObj.media === obj.media &&\n\t\t\t\tnewObj.sourceMap === obj.sourceMap\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tupdate(obj = newObj);\n\t\t} else {\n\t\t\tremove();\n\t\t}\n\t};\n}\n\nvar replaceText = (function () {\n\tvar textStore = [];\n\n\treturn function (index, replacement) {\n\t\ttextStore[index] = replacement;\n\n\t\treturn textStore.filter(Boolean).join('\\n');\n\t};\n})();\n\nfunction applyToSingletonTag (style, index, remove, obj) {\n\tvar css = remove ? \"\" : obj.css;\n\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = replaceText(index, css);\n\t} else {\n\t\tvar cssNode = document.createTextNode(css);\n\t\tvar childNodes = style.childNodes;\n\n\t\tif (childNodes[index]) style.removeChild(childNodes[index]);\n\n\t\tif (childNodes.length) {\n\t\t\tstyle.insertBefore(cssNode, childNodes[index]);\n\t\t} else {\n\t\t\tstyle.appendChild(cssNode);\n\t\t}\n\t}\n}\n\nfunction applyToTag (style, obj) {\n\tvar css = obj.css;\n\tvar media = obj.media;\n\n\tif(media) {\n\t\tstyle.setAttribute(\"media\", media)\n\t}\n\n\tif(style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\twhile(style.firstChild) {\n\t\t\tstyle.removeChild(style.firstChild);\n\t\t}\n\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n}\n\nfunction updateLink (link, options, obj) {\n\tvar css = obj.css;\n\tvar sourceMap = obj.sourceMap;\n\n\t/*\n\t\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\n\t\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\n\t\ton by default.  Otherwise default to the convertToAbsoluteUrls option\n\t\tdirectly\n\t*/\n\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\n\n\tif (options.convertToAbsoluteUrls || autoFixUrls) {\n\t\tcss = fixUrls(css);\n\t}\n\n\tif (sourceMap) {\n\t\t// http://stackoverflow.com/a/26603875\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\n\t}\n\n\tvar blob = new Blob([css], { type: \"text/css\" });\n\n\tvar oldSrc = link.href;\n\n\tlink.href = URL.createObjectURL(blob);\n\n\tif(oldSrc) URL.revokeObjectURL(oldSrc);\n}\n","\n/**\n * When source maps are enabled, `style-loader` uses a link element with a data-uri to\n * embed the css on the page. This breaks all relative urls because now they are relative to a\n * bundle instead of the current page.\n *\n * One solution is to only use full urls, but that may be impossible.\n *\n * Instead, this function \"fixes\" the relative urls to be absolute according to the current page location.\n *\n * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.\n *\n */\n\nmodule.exports = function (css) {\n  // get current location\n  var location = typeof window !== \"undefined\" && window.location;\n\n  if (!location) {\n    throw new Error(\"fixUrls requires window.location\");\n  }\n\n\t// blank or null?\n\tif (!css || typeof css !== \"string\") {\n\t  return css;\n  }\n\n  var baseUrl = location.protocol + \"//\" + location.host;\n  var currentDir = baseUrl + location.pathname.replace(/\\/[^\\/]*$/, \"/\");\n\n\t// convert each url(...)\n\t/*\n\tThis regular expression is just a way to recursively match brackets within\n\ta string.\n\n\t /url\\s*\\(  = Match on the word \"url\" with any whitespace after it and then a parens\n\t   (  = Start a capturing group\n\t     (?:  = Start a non-capturing group\n\t         [^)(]  = Match anything that isn't a parentheses\n\t         |  = OR\n\t         \\(  = Match a start parentheses\n\t             (?:  = Start another non-capturing groups\n\t                 [^)(]+  = Match anything that isn't a parentheses\n\t                 |  = OR\n\t                 \\(  = Match a start parentheses\n\t                     [^)(]*  = Match anything that isn't a parentheses\n\t                 \\)  = Match a end parentheses\n\t             )  = End Group\n              *\\) = Match anything and then a close parens\n          )  = Close non-capturing group\n          *  = Match anything\n       )  = Close capturing group\n\t \\)  = Match a close parens\n\n\t /gi  = Get all matches, not the first.  Be case insensitive.\n\t */\n\tvar fixedCss = css.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi, function(fullMatch, origUrl) {\n\t\t// strip quotes (if they exist)\n\t\tvar unquotedOrigUrl = origUrl\n\t\t\t.trim()\n\t\t\t.replace(/^\"(.*)\"$/, function(o, $1){ return $1; })\n\t\t\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\n\n\t\t// already a full url? no change\n\t\tif (/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/|\\s*$)/i.test(unquotedOrigUrl)) {\n\t\t  return fullMatch;\n\t\t}\n\n\t\t// convert the url to a full url\n\t\tvar newUrl;\n\n\t\tif (unquotedOrigUrl.indexOf(\"//\") === 0) {\n\t\t  \t//TODO: should we add protocol?\n\t\t\tnewUrl = unquotedOrigUrl;\n\t\t} else if (unquotedOrigUrl.indexOf(\"/\") === 0) {\n\t\t\t// path should be relative to the base url\n\t\t\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\n\t\t} else {\n\t\t\t// path should be relative to current directory\n\t\t\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\.\\//, \"\"); // Strip leading './'\n\t\t}\n\n\t\t// send back the fixed url(...)\n\t\treturn \"url(\" + JSON.stringify(newUrl) + \")\";\n\t});\n\n\t// send back the fixed css\n\treturn fixedCss;\n};\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js!./ui.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js!./ui.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js!./ui.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import './ui.css';\ndocument.getElementById('save').onclick = () => {\n    parent.postMessage({ pluginMessage: { type: 'save-props' } }, '*');\n};\ndocument.getElementById('apply').onclick = () => {\n    parent.postMessage({ pluginMessage: { type: 'apply-props' } }, '*');\n};\n// On load\nparent.postMessage({ pluginMessage: { type: 'save-props' } }, '*');\n"],"sourceRoot":""}


--------------------------------------------------------------------------------
/src/ui.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import * as ReactDOM from 'react-dom'
  3 | import './ui.scss'
  4 | import '../dist/ui.css'
  5 | import '../node_modules/figma-plugin-ds/dist/figma-plugin-ds.css';
  6 | import { 
  7 |     ISelectionValidation,
  8 |     SelectionValidation,
  9 |     IColor,
 10 |     IOverrideData,
 11 |     IOverrideProp,
 12 |     IBoxCorners,
 13 |     IBoxSides,
 14 |     rgbaToHex,
 15 |     formatRgbaColor,
 16 |     createCssGradient,
 17 |     truncate,
 18 |     deCamel,
 19 |     flattenData
 20 | } from './util'
 21 | declare function require(path: string): any
 22 | 
 23 | interface IProps {}
 24 | 
 25 | interface IState {
 26 |     inspectEnabled: boolean;
 27 |     inspectMessage: string;
 28 |     copyEnabled: boolean;
 29 |     pasteEnabled: boolean;
 30 |     swapEnabled: boolean;
 31 |     selectionValidation: ISelectionValidation;
 32 |     diffCollapsed: boolean;
 33 |     data?: IOverrideData;
 34 |     copyButtonMessage: string;
 35 |     clientStorageValidated: boolean;
 36 |     totalNodeCount: number;
 37 |     comparedNodeCount: number;
 38 |     comparisonInProgress: boolean;
 39 |     propToggleStates: any;
 40 | }
 41 | 
 42 | 
 43 | class App extends React.Component<IProps, IState> {
 44 | 
 45 |     /**********************************
 46 |      * State management
 47 |      **********************************/
 48 | 
 49 |     state: IState = {
 50 |         diffCollapsed: false,
 51 |         inspectMessage: '',
 52 |         inspectEnabled: false,
 53 |         copyEnabled: false,
 54 |         pasteEnabled: false,
 55 |         swapEnabled: false,
 56 |         selectionValidation: undefined,
 57 |         data: undefined,
 58 |         copyButtonMessage: "Copy overrides",
 59 |         clientStorageValidated: false,
 60 |         totalNodeCount: 0,
 61 |         comparedNodeCount: 0,
 62 |         comparisonInProgress: false,
 63 |         propToggleStates: undefined
 64 |     };
 65 | 
 66 |     // Recursive
 67 |     initPropToggleStates = (nodeData:IOverrideData) => {
 68 |         let a = {
 69 |             props: {},
 70 |             children: {}
 71 |         };
 72 |         if (!nodeData) return a;
 73 |         if (nodeData.overriddenProps) {
 74 |             let props = nodeData.overriddenProps;
 75 |             props.map(prop => {
 76 |                 a.props[prop.key] = prop.isApplied;
 77 |             })
 78 |         }
 79 |         if (nodeData.children) {
 80 |             nodeData.children.map(childData => {
 81 |                 a.children[childData.id] = this.initPropToggleStates(childData);
 82 |             });
 83 |         }
 84 |         return a;
 85 |     }
 86 | 
 87 |     getPropToggleStates = () => {
 88 |         let s = {};
 89 |         return s;
 90 |     }
 91 | 
 92 |     /**********************************
 93 |      * Lifecycle
 94 |      **********************************/
 95 | 
 96 |     componentDidMount = () => {
 97 |         window.addEventListener("message", (event) => {
 98 |             const message = event.data.pluginMessage;
 99 |             const payload = message.payload;
100 |             switch (message.type) {
101 |                 case "selection-validation":
102 |                     const validation:ISelectionValidation = message.validation;
103 |                     let inspectMessage:string;
104 |                     let canPaste: boolean = false;
105 |                     switch (validation.reason) {
106 |                         case SelectionValidation.IS_INSTANCE:
107 |                             inspectMessage = "Compare instance to main";
108 |                             canPaste = true;
109 |                             break;
110 |                         case SelectionValidation.IS_TWO:
111 |                             inspectMessage = "Compare selected";
112 |                             canPaste = true;
113 |                             break;
114 |                         case SelectionValidation.IS_NODE:
115 |                             inspectMessage = "Select an instance";
116 |                             canPaste = true;
117 |                             break;
118 |                         default:
119 |                             inspectMessage = "Select items to compare";
120 |                             break;
121 |                     }
122 |                     let canSwap:boolean = (validation.reason === SelectionValidation.IS_TWO) && (this.state.data !== undefined);
123 |                     this.setState({
124 |                         inspectEnabled: validation.isValid,
125 |                         selectionValidation: validation,
126 |                         pasteEnabled: canPaste && message.clientStorageIsValid,
127 |                         inspectMessage,
128 |                         totalNodeCount: validation.childCount,
129 |                         swapEnabled: canSwap
130 |                     });
131 |                     break;
132 |                 case "client-storage-validated":
133 |                     this.setState({
134 |                         clientStorageValidated: true
135 |                     });
136 |                     break;
137 |                 case "comparison-finished":
138 |                     this.setState({
139 |                         data: payload,
140 |                         copyEnabled: true,
141 |                         swapEnabled: this.state.selectionValidation.reason === SelectionValidation.IS_TWO,
142 |                         copyButtonMessage: "Copy overrides",
143 |                         inspectEnabled: false,
144 |                         comparisonInProgress: false,
145 |                         propToggleStates: flattenData(payload)
146 |                     });
147 |                     break;
148 |                 case "copy-confirmation":
149 |                     this.setState({
150 |                         copyButtonMessage: "Overrides copied",
151 |                         copyEnabled: false,
152 |                         pasteEnabled: true
153 |                     });
154 |                     break;
155 |             }
156 |         });
157 |         // Request selection validation
158 |         parent.postMessage({ 
159 |             pluginMessage: { type: 'initial-render' } 
160 |         }, '*');
161 | 
162 |         // TEST - compare on initial load (assumes selection)
163 |         // parent.postMessage({
164 |         //     pluginMessage: {
165 |         //         type: 'compare-selected'
166 |         //     }
167 |         // }, '*')
168 |     }
169 | 
170 | 
171 |     /**********************************
172 |      * Button handlers
173 |      **********************************/
174 | 
175 |     onInspect = () => {
176 |         this.setState({
177 |             comparisonInProgress: true
178 |         }, this.forceUpdate);
179 |         requestAnimationFrame(() => {
180 |             parent.postMessage({
181 |                 pluginMessage: {
182 |                     type: 'compare-selected'
183 |                 }
184 |             }, '*')
185 |         });
186 |     }
187 | 
188 |     onSwap = () => {
189 |         parent.postMessage({
190 |             pluginMessage: {
191 |                 type: 'swap-selected',
192 |                 data: {
193 |                     // Figma won't pass the whole object, so just send the ids
194 |                     targetId: this.state.data.targetNode.id,
195 |                     sourceId: this.state.data.sourceNode.id
196 |                 }
197 |             }
198 |         }, '*')
199 |     }
200 | 
201 |     onCopy = () => {
202 |         parent.postMessage({
203 |             pluginMessage: {
204 |                 type: 'copy-overrides',
205 |                 data: this.state.data,
206 |             }
207 |         }, '*')
208 |     }
209 | 
210 |     onPaste = () => {
211 |         parent.postMessage({
212 |             pluginMessage: {
213 |                 type: 'paste-overrides',
214 |                 // If there are 2 nodes selected, paste back from target onto source
215 |                 data: {
216 |                     targetId: this.state.data ? this.state.data.targetNode.id : undefined
217 |                 }
218 |             }
219 |         }, '*')
220 |     }
221 | 
222 |     onExpandCollapse = () => {
223 |         this.setState({diffCollapsed: !this.state.diffCollapsed})
224 |         if (this.state.diffCollapsed) {
225 |             parent.postMessage({
226 |                 pluginMessage: {
227 |                     type: 'collapse-ui'
228 |                 }
229 |             }, '*')
230 |         } else {
231 |             parent.postMessage({
232 |                 pluginMessage: {
233 |                     type: 'expand-ui'
234 |                 }
235 |             }, '*')
236 |         }
237 |     }
238 | 
239 |     onPropClick = (e) => {
240 |         const dataset = e.currentTarget.dataset;
241 |         const id = `${dataset.nodeid}--${dataset.propid}`;
242 |         const prop:IOverrideProp = this.state.propToggleStates[id];
243 |         prop.isApplied = !prop.isApplied;
244 |         this.forceUpdate();
245 |     }
246 | 
247 | 
248 |     /**********************************
249 |      * Rendering
250 |      **********************************/
251 | 
252 |     renderEmptyBlock = () => {
253 |        return (
254 |            <span className="color">
255 |                <span className="rgbColor rgbColor--none"/>
256 |                <span>(None)</span>
257 |            </span>
258 |        )
259 |     }
260 | 
261 |     renderSolidBlock = (color:IColor) => {
262 |        let formatted:IColor = formatRgbaColor(color);
263 |        let toolTip:string = `RGB:\u00A0${formatted.r},\u00A0${formatted.g},\u00A0${formatted.b}`;
264 |        let hexString:string = rgbaToHex(formatted);
265 |        let rgbString:string = `rgb(${formatted.r}, ${formatted.g}, ${formatted.b})`
266 |        return (
267 |             <span className="color">
268 |                 <span
269 |                     className="rgbColor hasTooltip"
270 |                     style={{backgroundColor: rgbString}}
271 |                     data-tooltip={toolTip}
272 |                 />
273 |                 <span>{hexString}</span>
274 |             </span>
275 |        )
276 |     }
277 | 
278 |     renderGradientBlock = (paint:GradientPaint) => {
279 |         let toolTip:string = "";
280 |         paint.gradientStops.forEach(stop => {
281 |             let color = formatRgbaColor(stop.color);
282 |             let str = rgbaToHex(color);
283 |             toolTip += str + ", "
284 |         });
285 |         toolTip = toolTip.slice(0, -2);
286 |         let gradient:string = createCssGradient(paint);
287 |         return (
288 |             <span className="color">
289 |                 <span
290 |                     className="rgbColor rgbColor--gradient hasTooltip"
291 |                     style={{background: gradient}}
292 |                     data-tooltip={toolTip}
293 |                 />
294 |                 <span>Gradient</span>
295 |             </span>
296 |         )
297 |     }
298 | 
299 |     renderImageBlock = () => {
300 |         return (
301 |             <span className="color">
302 |                 <span className="rgbColor rgbColor--image" />
303 |                 <span>Image</span>
304 |             </span>
305 |         )
306 |     }
307 | 
308 |     renderColor = (paint: any) => {
309 |         if (paint === undefined) {
310 |             paint = {
311 |                 type: "NONE", 
312 |                 color: {r: 1, g: 1, b: 1}
313 |             };
314 |         }
315 |         switch (paint.type) {
316 |             case "SOLID":
317 |                 return this.renderSolidBlock(paint.color);
318 |             case "IMAGE":
319 |                 return this.renderImageBlock();
320 |             case "GRADIENT_LINEAR":
321 |             case "GRADIENT_RADIAL":
322 |             case "GRADIENT_ANGULAR":
323 |             case "GRADIENT_DIAMOND":
324 |                 return this.renderGradientBlock(paint);
325 |             case "NONE":
326 |             default:
327 |                 return this.renderEmptyBlock();
328 |         }
329 |     }
330 | 
331 |     renderCorners = (corners:IBoxCorners) => {
332 |         return (
333 |             <span className="value value--corners">
334 |                 <span>{corners.topLeft}</span>
335 |                 <span className="right">{corners.topRight}</span>
336 |                 <span>{corners.bottomLeft}</span>
337 |                 <span className="right">{corners.bottomRight}</span>
338 |             </span>
339 |         )
340 |     }
341 | 
342 |     renderPadding = (sides:IBoxSides) => {
343 |         return (
344 |             <span className="value value--padding">
345 |                 <span>{sides.left}</span>
346 |                 <span className="middle">
347 |                     <span>{sides.top}</span>
348 |                     <span>{sides.bottom}</span>
349 |                 </span>
350 |                 <span className="right">{sides.right}</span>
351 |             </span>
352 |         )
353 |     }
354 | 
355 |     renderLineValue = (value: any) => {
356 |         if (typeof value === 'string') {
357 |             return <span className="value">{value}</span>
358 |         }
359 |         return <span className="value">{value.value} {value.unit.toLowerCase()}</span>
360 |     }
361 | 
362 |     renderFontValue = (value: any) => {
363 |         if (typeof value === 'string') {
364 |             return <span className="value">{value}</span>
365 |         }
366 |         return <span className="value">{value.family} {value.style}</span>
367 |     }
368 | 
369 |     renderDefaultValue = (value: any) => {
370 |         if (typeof value === 'object') {
371 |             return (
372 |                 <span className="value value--object">
373 |                     {Object.keys(value).map(key => {
374 |                         return (
375 |                             <span className="sub-prop">
376 |                                 <span className="sub-key">{deCamel(key)}:</span>
377 |                                 <span className="sub-value">{truncate(value[key], 4)}</span>
378 |                             </span>
379 |                         );
380 |                     })}
381 |                 </span>
382 |             );
383 |         }
384 |         if (typeof value === 'symbol') {
385 |             return <span className="value">(Mixed)</span>
386 |         }
387 |         return <span className="value">{value.toString()}</span>
388 |     }
389 | 
390 |     renderOverrideProp = (prop: IOverrideProp) => {
391 |         const { key, sourceValue, targetValue } = prop;
392 |         switch (key) {
393 |             case 'effects':
394 |             case 'fills':
395 |             case 'strokes':
396 |                 /* Only display the first in the array for these */
397 |                 return (
398 |                     <span className="prop-inner prop--inline">
399 |                         <span className="key">{key}:</span>
400 |                         <span>{this.renderColor(sourceValue[0])}</span>
401 |                         <span className="arrow">→</span>
402 |                         <span>{this.renderColor(targetValue[0])}</span>
403 |                     </span>
404 |                 )
405 |             case "mainComponent":
406 |                 return (
407 |                     <div className="prop-inner">
408 |                         <span className="key">Main:</span>
409 |                         <span className="value">
410 |                             <span 
411 |                                 className="string hasTooltip" 
412 |                                 data-tooltip={sourceValue.name}>
413 |                                     {sourceValue.name}
414 |                                 </span>
415 |                             </span>
416 |                         <span className="arrow">→</span>
417 |                         <span className="value">
418 |                             <span 
419 |                                 className="string hasTooltip" 
420 |                                 data-tooltip={targetValue.name}>
421 |                                     {targetValue.name}
422 |                                 </span>
423 |                             </span>
424 |                     </div>
425 |                 )
426 |             case "name":
427 |             case "characters":
428 |                 const source = sourceValue.toString();
429 |                 const target = targetValue.toString();
430 |                 //TODO: tooltips are useless on these unless they don't run off the page
431 |                 // const showSourceTT = source.length > 100;
432 |                 // const showTargetTT = target.length > 100;
433 |                 // const sourceTT = source.substring(0, 400);
434 |                 // const targetTT = target.substring(0, 400);
435 |                 return (
436 |                     <div className="prop-inner">
437 |                         <span className="key">{key}:</span>
438 |                         <span className="value">
439 |                             {/* <span className={`string ${showSourceTT ? 'hasTooltip' : ''}`} data-tooltip={sourceTT}> */}
440 |                             <span className={`string`}>
441 |                                 {sourceValue}
442 |                             </span>
443 |                         </span>
444 |                         <span className="arrow">→</span>
445 |                         <span className="value">
446 |                             {/* <span className={`string ${showTargetTT ? 'hasTooltip' : ''}`} data-tooltip={targetTT}> */}
447 |                             <span className={`string`}>
448 |                                 {target}
449 |                             </span>
450 |                         </span>
451 |                     </div>
452 |                 )
453 |             case "fontName":
454 |                 return (
455 |                     <div className="prop-inner">
456 |                         <span className="key">{deCamel(key)}:</span>
457 |                         {this.renderFontValue(sourceValue)}
458 |                         <span className="arrow">→</span>
459 |                         {this.renderFontValue(targetValue)}
460 |                     </div>
461 |                 )
462 |             case "letterSpacing":
463 |             case "lineHeight":
464 |                 return (
465 |                     <div className="prop-inner">
466 |                         <span className="key">{deCamel(key)}:</span>
467 |                         {this.renderLineValue(sourceValue)}
468 |                         <span className="arrow">→</span>
469 |                         {this.renderLineValue(targetValue)}
470 |                     </div>
471 |                 )
472 |             case "corners":
473 |                 return (
474 |                     <div className="prop-inner">
475 |                         <span className="key">Corners:</span>
476 |                         {this.renderCorners(sourceValue)}
477 |                         <span className="arrow">→</span>
478 |                         {this.renderCorners(targetValue)}
479 |                     </div>
480 |                 )
481 |             case "padding":
482 |                 return (
483 |                     <div className="prop-inner">
484 |                         <span className="key">Padding:</span>
485 |                         {this.renderPadding(sourceValue)}
486 |                         <span className="arrow">→</span>
487 |                         {this.renderPadding(targetValue)}
488 |                     </div>
489 |                 )
490 |             default:
491 |                 return (
492 |                     <span className="prop-inner">
493 |                         <span className="key">{deCamel(key)}:</span>
494 |                         {this.renderDefaultValue(sourceValue)}
495 |                         <span className="arrow">→</span>
496 |                         {this.renderDefaultValue(targetValue)}
497 |                     </span>
498 |                 )
499 |         }
500 |     }
501 | 
502 |     renderOverrideProps = (props: any[], nodeId: string) => {
503 |         const doNotRender = [
504 |             'backgrounds',
505 |             'backgroundStyleId',
506 |             'effectStyleId',
507 |             'fillStyleId',
508 |             'strokeStyleId',
509 |             'paddingLeft',
510 |             'paddingRight',
511 |             'paddingTop',
512 |             'paddingBottom',
513 |             'topLeftRadius',
514 |             'topRightRadius',
515 |             'bottomLeftRadius',
516 |             'bottomRightRadius',
517 |             'cornerRadius',
518 |         ]
519 |         return (
520 |             <div className="props">
521 |                 {
522 |                     props.map(prop => {
523 |                         if (doNotRender.includes(prop.key)) return false;
524 |                         return (
525 |                             <div
526 |                                 className={`prop ${prop.isApplied ? 'selected' : ''} `}
527 |                                 key={prop.key}
528 |                                 data-propid={prop.key}
529 |                                 data-nodeid={nodeId}
530 |                                 onClick={this.onPropClick}
531 |                             >
532 |                                 {this.renderOverrideProp(prop)}
533 |                             </div>
534 |                         )
535 |                     })
536 |                 }
537 |             </div>
538 |         )
539 |     }
540 | 
541 |     renderNodeIcon = (type: string) => {
542 |         let iconText: string = "";
543 |         let iconType = type.toLowerCase();
544 |         switch (type) {
545 |             case "TEXT":
546 |                 iconText = "T";
547 |                 break;
548 |             case "VECTOR":
549 |                 iconText = "▱";
550 |                 break;
551 |             case "ELLIPSE":
552 |                 iconText = "○";
553 |                 break;
554 |             case "RECTANGLE":
555 |                 iconText = "▭";
556 |                 break;
557 |             case "LINE":
558 |                 iconText = "─";
559 |                 break;
560 |         }
561 |         let iconClass = `icon icon--purple icon--${iconType}`;
562 |         return <div className={iconClass}>{iconText}</div>
563 |     }
564 | 
565 |     toggleNode = (nodeData: IOverrideData) => {
566 |         nodeData.isCollapsed = !nodeData.isCollapsed;
567 |         this.forceUpdate();
568 |     }
569 | 
570 |     // Recursive
571 |     renderDiff = (nodeData: IOverrideData, isTop: boolean) => {
572 |         let classes = isTop ? "node node--top" : "node";
573 |         if (!nodeData) {
574 |             return;
575 |         }
576 |         const isCollapsible = nodeData.children || nodeData.overriddenProps.length > 0;
577 |         const titleClasses = isCollapsible ? "title title--collapsible" : "title";
578 |         return (
579 |             <div className={classes} key={nodeData.id.toString()}>
580 |                 <span className={titleClasses} onClick={() => this.toggleNode(nodeData)}>
581 |                     {isCollapsible &&
582 |                         this.renderCaret(nodeData.isCollapsed)
583 |                     }
584 |                     {this.renderNodeIcon(nodeData.type)}
585 |                     <span className="node-name">{nodeData.sourceName}</span>
586 |                 </span>
587 |                 {!nodeData.isCollapsed && (
588 |                     <>
589 |                         {nodeData.overriddenProps &&
590 |                             this.renderOverrideProps(nodeData.overriddenProps, nodeData.id)
591 |                         }
592 |                         {nodeData.children &&
593 |                             nodeData.children.map(child => {
594 |                                 return this.renderDiff(child, false);
595 |                             })
596 |                         }
597 |                     </>
598 |                 )}
599 |             </div>
600 |         )
601 |     }
602 | 
603 |     renderCaret(isCollapsed:boolean) {
604 |         return (
605 |             <div className="expand-collapse">
606 |                 {isCollapsed &&
607 |                     <div className="icon icon--caret-right" />
608 |                 }
609 |                 {!isCollapsed &&
610 |                     <div className="icon icon--caret-down" />
611 |                 }
612 |             </div>
613 |         )
614 |     }
615 | 
616 |     renderHeader() {
617 |         let {data, comparisonInProgress} = this.state;
618 |         if (comparisonInProgress) {
619 |             return (
620 |                 <div className="header header--loading">
621 |                     <span>Comparing {this.state.totalNodeCount} nodes...</span>
622 |                 </div>
623 |             )
624 |         }
625 |         if (data === undefined) return <div className="header" />
626 |         return (
627 |             <div className="header" onClick={this.onExpandCollapse}>
628 |                 {this.renderCaret(this.state.diffCollapsed)}
629 |                 <span>{this.renderNodeIcon(data.type)}</span>
630 |                 <span className="compare-node">{data.sourceName}</span>
631 |                 <span className="arrow">→</span>
632 |                 <span>{this.renderNodeIcon(data.type)}</span>
633 |                 <span className="compare-node">{data.targetName}</span>
634 |             </div>
635 |         )
636 |     }
637 | 
638 | 
639 |     render() {
640 |         const diffClasses = this.state.diffCollapsed ? "diff diff--collapsed" : "diff";
641 |         return (
642 |             <>
643 |                 <div className="MaximumOverride">
644 |                     <div className="buttons">
645 |                         <button
646 |                             className="button button--secondary"
647 |                             id="inspect"
648 |                             onClick={this.onInspect}
649 |                             disabled={!this.state.inspectEnabled}>
650 |                             {this.state.inspectMessage}
651 |                         </button>
652 |                         <button
653 |                             className="button button--secondary"
654 |                             id="swap"
655 |                             onClick={this.onSwap}
656 |                             disabled={!this.state.swapEnabled}>
657 |                             Swap
658 |                         </button>
659 |                         <button
660 |                             className="button button--secondary"
661 |                             id="copy"
662 |                             onClick={this.onCopy}
663 |                             disabled={!this.state.copyEnabled}>
664 |                             {this.state.copyButtonMessage}
665 |                         </button>
666 |                         <button
667 |                             className="button button--secondary"
668 |                             id="paste"
669 |                             onClick={this.onPaste}
670 |                             disabled={!this.state.pasteEnabled}>
671 |                             Paste overrides
672 |                         </button>
673 |                     </div>
674 |                     <div className="content">
675 |                         {this.renderHeader()}
676 |                         <div className={diffClasses}>
677 |                             <div className="nodes">
678 |                                 {this.state.comparisonInProgress && 
679 |                                     <div className="loader"><span/><span/></div>
680 |                                 }
681 |                                 {!this.state.comparisonInProgress && <>
682 |                                     {this.state.data === undefined &&
683 |                                         <div className="emptyState">
684 |                                             <div className="logo" />
685 |                                             <p>Select one <strong>component instance</strong> to compare it against its main component</p>
686 |                                             <p className="centered"><strong>OR</strong></p>
687 |                                             <p>Select <strong>two items</strong> of any type to compare them to each other.</p>
688 |                                         </div>
689 |                                     }
690 |                                     {this.state.data && 
691 |                                         this.renderDiff(this.state.data, true)
692 |                                     }
693 |                                 </>}
694 |                             </div>
695 |                         </div>
696 |                     </div>
697 |                 </div>
698 |             </>
699 |         )
700 |     }
701 | }
702 | 
703 | 
704 | ReactDOM.render(<App />, document.getElementById('react-page'))


--------------------------------------------------------------------------------
/src/figma-plugin-ds.css:
--------------------------------------------------------------------------------
   1 | /* Vars */
   2 | :root {
   3 |   /* COLORS */
   4 |   /* Accent */
   5 |   --blue: #18a0fb;
   6 |   --purple: #7b61ff;
   7 |   --hot-pink: #ff00ff;
   8 |   --green: #1bc47d;
   9 |   --red: #f24822;
  10 |   --yellow: #ffeb00;
  11 |   /* Basic foreground */
  12 |   --black: #000000;
  13 |   --black8: rgba(0, 0, 0, .8);
  14 |   --black8-opaque: #333333;
  15 |   --black3: rgba(0, 0, 0, .3);
  16 |   --black3-opaque: #B3B3B3;
  17 |   --white: #ffffff;
  18 |   --white8: rgba(255, 255, 255, .8);
  19 |   --white4: rgba(255, 255, 255, .4);
  20 |   /* Basic background */
  21 |   --grey: #f0f0f0;
  22 |   --silver: #e5e5e5;
  23 |   --hud: #222222;
  24 |   --toolbar: #2c2c2c;
  25 |   /* Special */
  26 |   --black1: rgba(0, 0, 0, .1);
  27 |   --blue3: rgba(24, 145, 251, .3);
  28 |   --purple4: rgba(123, 97, 255, .4);
  29 |   --hover-fill: rgba(0, 0, 0, .06);
  30 |   --selection-a: #daebf7;
  31 |   --selection-b: #edf5fa;
  32 |   --white2: rgba(255, 255, 255, .2);
  33 |   /* TYPOGRAPHY */
  34 |   /* Pos = positive applications (black on white) */
  35 |   /* Neg = negative applications (white on black) */
  36 |   /* Font stack */
  37 |   --font-stack: 'Inter', sans-serif;
  38 |   /* Font sizes */
  39 |   --font-size-xsmall: 11px;
  40 |   --font-size-small: 12px;
  41 |   --font-size-large: 13px;
  42 |   --font-size-xlarge: 14px;
  43 |   /* Font weights */
  44 |   --font-weight-normal: 400;
  45 |   --font-weight-medium: 500;
  46 |   --font-weight-bold: 600;
  47 |   /* Lineheight */
  48 |   --font-line-height: 16px;
  49 |   /* Use For xsmall, small font sizes */
  50 |   --font-line-height-large: 24px;
  51 |   /* Use For large, xlarge font sizes */
  52 |   /* Letterspacing */
  53 |   --font-letter-spacing-pos-xsmall: .005em;
  54 |   --font-letter-spacing-neg-xsmall: .01em;
  55 |   --font-letter-spacing-pos-small: 0;
  56 |   --font-letter-spacing-neg-small: .005em;
  57 |   --font-letter-spacing-pos-large: -.0025em;
  58 |   --font-letter-spacing-neg-large: .0025em;
  59 |   --font-letter-spacing-pos-xlarge: -.001em;
  60 |   --font-letter-spacing-neg-xlarge: -.001em;
  61 |   /* BORDER RADIUS */
  62 |   --border-radius-small: 2px;
  63 |   --border-radius-med: 5px;
  64 |   --border-radius-large: 6px;
  65 |   /* SHADOWS */
  66 |   --shadow-hud: 0 5px 17px rgba(0, 0, 0, .2), 0 2px 7px rgba(0, 0, 0, .15);
  67 |   --shadow-floating-window: 0 2px 14px rgba(0, 0, 0, .15);
  68 |   /* SPACING + SIZING */
  69 |   --size-xxxsmall: 4px;
  70 |   --size-xxsmall: 8px;
  71 |   --size-xsmall: 16px;
  72 |   --size-small: 24px;
  73 |   --size-medium: 32px;
  74 |   --size-large: 40px;
  75 |   --size-xlarge: 48px;
  76 |   --size-xxlarge: 64px;
  77 |   --size-xxxlarge: 80px;
  78 | }
  79 | 
  80 | /* Global styles */
  81 | * {
  82 |   box-sizing: border-box;
  83 | }
  84 | 
  85 | body {
  86 |   position: relative;
  87 |   box-sizing: border-box;
  88 |   font-family: 'Inter', sans-serif;
  89 |   margin: 0;
  90 |   padding: 0;
  91 | }
  92 | 
  93 | /*  FONTS */
  94 | @font-face {
  95 |   font-family: 'Inter';
  96 |   font-weight: 400;
  97 |   font-style: normal;
  98 |   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");
  99 | }
 100 | 
 101 | @font-face {
 102 |   font-family: 'Inter';
 103 |   font-weight: 500;
 104 |   font-style: normal;
 105 |   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");
 106 | }
 107 | 
 108 | @font-face {
 109 |   font-family: 'Inter';
 110 |   font-weight: 600;
 111 |   font-style: normal;
 112 |   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");
 113 | }
 114 | 
 115 | /* UTILITIES */
 116 | /* padding */
 117 | .p-xxxsmall {
 118 |   padding: var(--size-xxxsmall);
 119 | }
 120 | 
 121 | .p-xxsmall {
 122 |   padding: var(--size-xxsmall);
 123 | }
 124 | 
 125 | .p-xsmall {
 126 |   padding: var(--size-xsmall);
 127 | }
 128 | 
 129 | .p-small {
 130 |   padding: var(--size-small);
 131 | }
 132 | 
 133 | .p-medium {
 134 |   padding: var(--size-medium);
 135 | }
 136 | 
 137 | .p-large {
 138 |   padding: var(--size-large);
 139 | }
 140 | 
 141 | .p-xlarge {
 142 |   padding: var(--size-xlarge);
 143 | }
 144 | 
 145 | .p-xxlarge {
 146 |   padding: var(--size-xxlarge);
 147 | }
 148 | 
 149 | .p-huge {
 150 |   padding: var(--size-xxxlarge);
 151 | }
 152 | 
 153 | /* padding top */
 154 | .pt-xxxsmall {
 155 |   padding-top: var(--size-xxxsmall);
 156 | }
 157 | 
 158 | .pt-xxsmall {
 159 |   padding-top: var(--size-xxsmall);
 160 | }
 161 | 
 162 | .pt-xsmall {
 163 |   padding-top: var(--size-xsmall);
 164 | }
 165 | 
 166 | .pt-small {
 167 |   padding-top: var(--size-small);
 168 | }
 169 | 
 170 | .pt-medium {
 171 |   padding-top: var(--size-medium);
 172 | }
 173 | 
 174 | .pt-large {
 175 |   padding-top: var(--size-large);
 176 | }
 177 | 
 178 | .pt-xlarge {
 179 |   padding-top: var(--size-xlarge);
 180 | }
 181 | 
 182 | .pt-xxlarge {
 183 |   padding-top: var(--size-xxlarge);
 184 | }
 185 | 
 186 | .pt-huge {
 187 |   padding-top: var(--size-xxxlarge);
 188 | }
 189 | 
 190 | /* padding right */
 191 | .pr-xxxsmall {
 192 |   padding-right: var(--size-xxxsmall);
 193 | }
 194 | 
 195 | .pr-xxsmall {
 196 |   padding-right: var(--size-xxsmall);
 197 | }
 198 | 
 199 | .pr-xsmall {
 200 |   padding-right: var(--size-xsmall);
 201 | }
 202 | 
 203 | .pr-small {
 204 |   padding-right: var(--size-small);
 205 | }
 206 | 
 207 | .pr-medium {
 208 |   padding-right: var(--size-medium);
 209 | }
 210 | 
 211 | .pr-large {
 212 |   padding-right: var(--size-large);
 213 | }
 214 | 
 215 | .pr-xlarge {
 216 |   padding-right: var(--size-xlarge);
 217 | }
 218 | 
 219 | .pr-xxlarge {
 220 |   padding-right: var(--size-xxlarge);
 221 | }
 222 | 
 223 | .pr-huge {
 224 |   padding-right: var(--size-xxxlarge);
 225 | }
 226 | 
 227 | /* padding bottom */
 228 | .pb-xxxsmall {
 229 |   padding-bottom: var(--size-xxxsmall);
 230 | }
 231 | 
 232 | .pb-xxsmall {
 233 |   padding-bottom: var(--size-xxsmall);
 234 | }
 235 | 
 236 | .pb-xsmall {
 237 |   padding-bottom: var(--size-xsmall);
 238 | }
 239 | 
 240 | .pb-small {
 241 |   padding-bottom: var(--size-small);
 242 | }
 243 | 
 244 | .pb-medium {
 245 |   padding-bottom: var(--size-medium);
 246 | }
 247 | 
 248 | .pb-large {
 249 |   padding-bottom: var(--size-large);
 250 | }
 251 | 
 252 | .pb-xlarge {
 253 |   padding-bottom: var(--size-xlarge);
 254 | }
 255 | 
 256 | .pb-xxlarge {
 257 |   padding-bottom: var(--size-xxlarge);
 258 | }
 259 | 
 260 | .pb-huge {
 261 |   padding-bottom: var(--size-xxxlarge);
 262 | }
 263 | 
 264 | /* padding left */
 265 | .pl-xxxsmall {
 266 |   padding-left: var(--size-xxxsmall);
 267 | }
 268 | 
 269 | .pl-xxsmall {
 270 |   padding-left: var(--size-xxsmall);
 271 | }
 272 | 
 273 | .pl-xsmall {
 274 |   padding-left: var(--size-xsmall);
 275 | }
 276 | 
 277 | .pl-small {
 278 |   padding-left: var(--size-small);
 279 | }
 280 | 
 281 | .pl-medium {
 282 |   padding-left: var(--size-medium);
 283 | }
 284 | 
 285 | .pl-large {
 286 |   padding-left: var(--size-large);
 287 | }
 288 | 
 289 | .pl-xlarge {
 290 |   padding-left: var(--size-xlarge);
 291 | }
 292 | 
 293 | .pl-xxlarge {
 294 |   padding-left: var(--size-xxlarge);
 295 | }
 296 | 
 297 | .pl-huge {
 298 |   padding-left: var(--size-xxxlarge);
 299 | }
 300 | 
 301 | /* margin */
 302 | .m-xxxsmall {
 303 |   margin: var(--size-xxxsmall);
 304 | }
 305 | 
 306 | .m-xxsmall {
 307 |   margin: var(--size-xxsmall);
 308 | }
 309 | 
 310 | .m-xsmall {
 311 |   margin: var(--size-xsmall);
 312 | }
 313 | 
 314 | .m-small {
 315 |   margin: var(--size-small);
 316 | }
 317 | 
 318 | .m-medium {
 319 |   margin: var(--size-medium);
 320 | }
 321 | 
 322 | .m-large {
 323 |   margin: var(--size-large);
 324 | }
 325 | 
 326 | .m-xlarge {
 327 |   margin: var(--size-xlarge);
 328 | }
 329 | 
 330 | .m-xxlarge {
 331 |   margin: var(--size-xxlarge);
 332 | }
 333 | 
 334 | .m-huge {
 335 |   margin: var(--size-xxxlarge);
 336 | }
 337 | 
 338 | /* margin top */
 339 | .mt-xxxsmall {
 340 |   margin-top: var(--size-xxxsmall);
 341 | }
 342 | 
 343 | .mt-xxsmall {
 344 |   margin-top: var(--size-xxsmall);
 345 | }
 346 | 
 347 | .mt-xsmall {
 348 |   margin-top: var(--size-xsmall);
 349 | }
 350 | 
 351 | .mt-small {
 352 |   margin-top: var(--size-small);
 353 | }
 354 | 
 355 | .mt-medium {
 356 |   margin-top: var(--size-medium);
 357 | }
 358 | 
 359 | .mt-large {
 360 |   margin-top: var(--size-large);
 361 | }
 362 | 
 363 | .mt-xlarge {
 364 |   margin-top: var(--size-xlarge);
 365 | }
 366 | 
 367 | .mt-xxlarge {
 368 |   margin-top: var(--size-xxlarge);
 369 | }
 370 | 
 371 | .mt-huge {
 372 |   margin-top: var(--size-xxxlarge);
 373 | }
 374 | 
 375 | /* margin right */
 376 | .mr-xxxsmall {
 377 |   margin-right: var(--size-xxxsmall);
 378 | }
 379 | 
 380 | .mr-xxsmall {
 381 |   margin-right: var(--size-xxsmall);
 382 | }
 383 | 
 384 | .mr-xsmall {
 385 |   margin-right: var(--size-xsmall);
 386 | }
 387 | 
 388 | .mr-small {
 389 |   margin-right: var(--size-small);
 390 | }
 391 | 
 392 | .mr-medium {
 393 |   margin-right: var(--size-medium);
 394 | }
 395 | 
 396 | .mr-large {
 397 |   margin-right: var(--size-large);
 398 | }
 399 | 
 400 | .mr-xlarge {
 401 |   margin-right: var(--size-xlarge);
 402 | }
 403 | 
 404 | .mr-xxlarge {
 405 |   margin-right: var(--size-xxlarge);
 406 | }
 407 | 
 408 | .mr-huge {
 409 |   margin-right: var(--size-xxxlarge);
 410 | }
 411 | 
 412 | /* margin bottom */
 413 | .mb-xxxsmall {
 414 |   margin-bottom: var(--size-xxxsmall);
 415 | }
 416 | 
 417 | .mb-xxsmall {
 418 |   margin-bottom: var(--size-xxsmall);
 419 | }
 420 | 
 421 | .mb-xsmall {
 422 |   margin-bottom: var(--size-xsmall);
 423 | }
 424 | 
 425 | .mb-small {
 426 |   margin-bottom: var(--size-small);
 427 | }
 428 | 
 429 | .mb-medium {
 430 |   margin-bottom: var(--size-medium);
 431 | }
 432 | 
 433 | .mb-large {
 434 |   margin-bottom: var(--size-large);
 435 | }
 436 | 
 437 | .mb-xlarge {
 438 |   margin-bottom: var(--size-xlarge);
 439 | }
 440 | 
 441 | .mb-xxlarge {
 442 |   margin-bottom: var(--size-xxlarge);
 443 | }
 444 | 
 445 | .mb-huge {
 446 |   margin-bottom: var(--size-xxxlarge);
 447 | }
 448 | 
 449 | /* margin left */
 450 | .ml-xxxsmall {
 451 |   margin-left: var(--size-xxxsmall);
 452 | }
 453 | 
 454 | .ml-xxsmall {
 455 |   margin-left: var(--size-xxsmall);
 456 | }
 457 | 
 458 | .ml-xsmall {
 459 |   margin-left: var(--size-xsmall);
 460 | }
 461 | 
 462 | .ml-small {
 463 |   margin-left: var(--size-small);
 464 | }
 465 | 
 466 | .ml-medium {
 467 |   margin-left: var(--size-medium);
 468 | }
 469 | 
 470 | .ml-large {
 471 |   margin-left: var(--size-large);
 472 | }
 473 | 
 474 | .ml-xlarge {
 475 |   margin-left: var(--size-xlarge);
 476 | }
 477 | 
 478 | .ml-xxlarge {
 479 |   margin-left: var(--size-xxlarge);
 480 | }
 481 | 
 482 | .ml-huge {
 483 |   margin-left: var(--size-xxxlarge);
 484 | }
 485 | 
 486 | /* layout utilities */
 487 | .hidden {
 488 |   display: none;
 489 | }
 490 | 
 491 | .inline {
 492 |   display: inline;
 493 | }
 494 | 
 495 | .block {
 496 |   display: block;
 497 | }
 498 | 
 499 | .inline-block {
 500 |   display: inline-block;
 501 | }
 502 | 
 503 | .flex {
 504 |   display: flex;
 505 | }
 506 | 
 507 | .inline-flex {
 508 |   display: inline-flex;
 509 | }
 510 | 
 511 | .column {
 512 |   flex-direction: column;
 513 | }
 514 | 
 515 | .column-reverse {
 516 |   flex-direction: column-reverse;
 517 | }
 518 | 
 519 | .row {
 520 |   flex-direction: row;
 521 | }
 522 | 
 523 | .row-reverse {
 524 |   flex-direction: row-reverse;
 525 | }
 526 | 
 527 | .flex-wrap {
 528 |   flex-wrap: wrap;
 529 | }
 530 | 
 531 | .flex-wrap-reverse {
 532 |   flex-wrap: wrap-reverse;
 533 | }
 534 | 
 535 | .flex-no-wrap {
 536 |   flex-wrap: nowrap;
 537 | }
 538 | 
 539 | .flex-shrink {
 540 |   flex-shrink: 1;
 541 | }
 542 | 
 543 | .flex-no-shrink {
 544 |   flex-shrink: 0;
 545 | }
 546 | 
 547 | .flex-grow {
 548 |   flex-grow: 1;
 549 | }
 550 | 
 551 | .flex-no-grow {
 552 |   flex-grow: 0;
 553 | }
 554 | 
 555 | .justify-content-start {
 556 |   justify-content: flex-start;
 557 | }
 558 | 
 559 | .justify-content-end {
 560 |   justify-content: flex-end;
 561 | }
 562 | 
 563 | .justify-content-center {
 564 |   justify-content: center;
 565 | }
 566 | 
 567 | .justify-content-between {
 568 |   justify-content: space-between;
 569 | }
 570 | 
 571 | .justify-content-around {
 572 |   justify-content: space-around;
 573 | }
 574 | 
 575 | .align-items-start {
 576 |   align-items: flex-start;
 577 | }
 578 | 
 579 | .align-items-end {
 580 |   align-items: flex-end;
 581 | }
 582 | 
 583 | .align-items-center {
 584 |   align-items: center;
 585 | }
 586 | 
 587 | .align-items-stretch {
 588 |   align-items: stretch;
 589 | }
 590 | 
 591 | .align-content-start {
 592 |   align-content: flex-start;
 593 | }
 594 | 
 595 | .align-content-end {
 596 |   align-content: flex-end;
 597 | }
 598 | 
 599 | .align-content-center {
 600 |   align-content: center;
 601 | }
 602 | 
 603 | .align-content-stretch {
 604 |   align-content: stretch;
 605 | }
 606 | 
 607 | .align-self-start {
 608 |   align-self: flex-start;
 609 | }
 610 | 
 611 | .align-self-end {
 612 |   align-items: flex-end;
 613 | }
 614 | 
 615 | .align-self-center {
 616 |   align-self: center;
 617 | }
 618 | 
 619 | .align-self-stretch {
 620 |   align-self: stretch;
 621 | }
 622 | 
 623 | .button {
 624 |   display: flex;
 625 |   align-items: center;
 626 |   border-radius: var(--border-radius-large);
 627 |   color: var(--white);
 628 |   flex-shrink: 0;
 629 |   font-family: var(--font-stack);
 630 |   font-size: var(--font-size-xsmall);
 631 |   font-weight: var(--font-weight-medium);
 632 |   letter-spacing: var(--font-letter-spacing-neg-small);
 633 |   line-height: var(--font-line-height);
 634 |   height: var(--size-medium);
 635 |   padding: 0 var(--size-xsmall) 0 var(--size-xsmall);
 636 |   text-decoration: none;
 637 |   outline: none;
 638 |   border: 2px solid transparent;
 639 |   -webkit-user-select: none;
 640 |      -moz-user-select: none;
 641 |       -ms-user-select: none;
 642 |           user-select: none;
 643 | }
 644 | 
 645 | .button--primary {
 646 |   background-color: var(--blue);
 647 | }
 648 | 
 649 | .button--primary:enabled:active, .button--primary:enabled:focus {
 650 |   border: 2px solid var(--black3);
 651 | }
 652 | 
 653 | .button--primary:disabled {
 654 |   background-color: var(--black3);
 655 | }
 656 | 
 657 | .button--primary-destructive {
 658 |   background-color: var(--red);
 659 | }
 660 | 
 661 | .button--primary-destructive:enabled:active, .button--primary-destructive:enabled:focus {
 662 |   border: 2px solid var(--black3);
 663 | }
 664 | 
 665 | .button--primary-destructive:disabled {
 666 |   opacity: 0.3;
 667 | }
 668 | 
 669 | .button--secondary, .button--secondary-destructive {
 670 |   background-color: var(--white);
 671 |   border: 1px solid var(--black8);
 672 |   color: var(--black8);
 673 |   padding: 0 calc(var(--size-xsmall) + 1px) 0 calc(var(--size-xsmall) + 1px);
 674 |   letter-spacing: var(--font-letter-spacing-pos-small);
 675 | }
 676 | 
 677 | .button--secondary:enabled:active, .button--secondary-destructive:enabled:active, .button--secondary:enabled:focus, .button--secondary-destructive:enabled:focus {
 678 |   border: 2px solid var(--blue);
 679 |   padding: 0 var(--size-xsmall) 0 var(--size-xsmall);
 680 | }
 681 | 
 682 | .button--secondary:disabled, .button--secondary-destructive:disabled {
 683 |   border: 1px solid var(--black3);
 684 |   color: var(--black3);
 685 | }
 686 | 
 687 | .button--secondary-destructive {
 688 |   border-color: var(--red);
 689 |   color: var(--red);
 690 | }
 691 | 
 692 | .button--secondary-destructive:disabled {
 693 |   background-color: var(--white);
 694 | }
 695 | 
 696 | .button--secondary-destructive:enabled:active, .button--secondary-destructive:enabled:focus {
 697 |   border: 2px solid var(--red);
 698 |   padding: 0 var(--size-xsmall) 0 var(--size-xsmall);
 699 | }
 700 | 
 701 | .button--secondary-destructive:disabled {
 702 |   border: 1px solid var(--red);
 703 |   background-color: var(--white);
 704 |   color: var(--red);
 705 |   opacity: 0.4;
 706 | }
 707 | 
 708 | .button--tertiary, .button--tertiary-destructive {
 709 |   border: 1px solid transparent;
 710 |   color: var(--blue);
 711 |   padding: 0;
 712 |   font-weight: var(--font-weight-normal);
 713 |   letter-spacing: var(--font-letter-spacing-pos-small);
 714 |   cursor: pointer;
 715 | }
 716 | 
 717 | .button--tertiary:enabled:focus, .button--tertiary-destructive:enabled:focus {
 718 |   text-decoration: underline;
 719 | }
 720 | 
 721 | .button--tertiary:disabled, .button--tertiary-destructive:disabled {
 722 |   cursor: default;
 723 |   color: var(--black3);
 724 | }
 725 | 
 726 | .button--tertiary-destructive {
 727 |   color: var(--red);
 728 | }
 729 | 
 730 | .button--tertiary-destructive:enabled:focus {
 731 |   text-decoration: underline;
 732 | }
 733 | 
 734 | .button--tertiary-destructive:disabled {
 735 |   opacity: 0.4;
 736 | }
 737 | 
 738 | .checkbox {
 739 |   align-items: center;
 740 |   cursor: default;
 741 |   display: flex;
 742 |   height: var(--size-medium);
 743 |   position: relative;
 744 |   /* unchecked */
 745 |   /*
 746 | 	&__box:focus + &__label:before {
 747 | 		border: 1px solid var(--white);
 748 | 	    box-shadow: 0 0 0 2px var(--blue);
 749 | 	}*/
 750 |   /* checked */
 751 |   /*
 752 | 	&__box:checked:focus + &__label:before {
 753 | 		border: 1px solid var(--white);
 754 | 	    box-shadow: 0 0 0 2px var(--blue);
 755 | 	}*/
 756 | }
 757 | 
 758 | .checkbox__box {
 759 |   opacity: 0;
 760 |   width: 10px;
 761 |   height: 10px;
 762 |   margin: 0;
 763 |   padding: 0;
 764 | }
 765 | 
 766 | .checkbox__label {
 767 |   align-items: center;
 768 |   color: var(--black8);
 769 |   display: flex;
 770 |   font-family: var(--font-stack);
 771 |   font-size: var(--font-size-xsmall);
 772 |   font-weight: var(--font-weight-normal);
 773 |   line-height: var(--font-line-height);
 774 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
 775 |   margin-left: -16px;
 776 |   padding: 0 var(--size-xsmall) 0 var(--size-small);
 777 |   height: 100%;
 778 |   -webkit-user-select: none;
 779 |      -moz-user-select: none;
 780 |       -ms-user-select: none;
 781 |           user-select: none;
 782 | }
 783 | 
 784 | .checkbox__label:before {
 785 |   border: 1px solid var(--black8);
 786 |   border-radius: var(--border-radius-small);
 787 |   content: '';
 788 |   display: block;
 789 |   width: 10px;
 790 |   height: 10px;
 791 |   margin: -1px 10px 0 -8px;
 792 |   box-shadow: none;
 793 | }
 794 | 
 795 | .checkbox__box:disabled + .checkbox__label {
 796 |   color: var(--black);
 797 |   opacity: 0.3;
 798 | }
 799 | 
 800 | .checkbox__box:checked + .checkbox__label:before {
 801 |   background-color: var(--blue);
 802 |   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");
 803 |   background-repeat: no-repeat;
 804 |   background-position: 1px 2px;
 805 |   border: 1px solid var(--blue);
 806 | }
 807 | 
 808 | .checkbox__box:checked:disabled + .checkbox__label:before {
 809 |   border: 1px solid transparent;
 810 |   background-color: var(--black8);
 811 | }
 812 | 
 813 | .disclosure {
 814 |   position: relative;
 815 |   width: 100%;
 816 |   margin: 0;
 817 |   padding: 0;
 818 |   list-style-type: none;
 819 | }
 820 | 
 821 | .disclosure__item {
 822 |   display: flex;
 823 |   flex-direction: column;
 824 |   position: relative;
 825 |   width: 100%;
 826 |   margin: 0;
 827 |   padding: 0;
 828 |   list-style-type: none;
 829 |   border-bottom: 1px solid var(--silver);
 830 | }
 831 | 
 832 | .disclosure__item:last-child {
 833 |   border-bottom: 1px solid transparent;
 834 | }
 835 | 
 836 | .disclosure__label {
 837 |   display: flex;
 838 |   align-items: center;
 839 |   height: var(--size-medium);
 840 |   font-size: var(--font-size-xsmall);
 841 |   font-weight: var(--font-weight-normal);
 842 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
 843 |   line-height: var(--line-height);
 844 |   color: var(--black8);
 845 |   padding: 0 8px 0 24px;
 846 |   cursor: default;
 847 |   -webkit-user-select: none;
 848 |      -moz-user-select: none;
 849 |       -ms-user-select: none;
 850 |           user-select: none;
 851 | }
 852 | 
 853 | .disclosure__label:before {
 854 |   content: '';
 855 |   position: absolute;
 856 |   top: 8px;
 857 |   left: 4px;
 858 |   display: block;
 859 |   width: 16px;
 860 |   height: 16px;
 861 |   opacity: 0.3;
 862 |   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");
 863 |   background-repeat: no-repeat;
 864 |   background-position: center center;
 865 | }
 866 | 
 867 | .disclosure__label:hover:before {
 868 |   opacity: 0.8;
 869 | }
 870 | 
 871 | .disclosure__content {
 872 |   font-size: var(--font-size-xsmall);
 873 |   font-weight: var(--font-weight-normal);
 874 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
 875 |   line-height: var(--line-height);
 876 |   color: var(--black8);
 877 |   padding: var(--size-xxsmall) var(--size-xxsmall) var(--size-xxsmall) var(--size-small);
 878 |   display: none;
 879 |   -webkit-user-select: none;
 880 |      -moz-user-select: none;
 881 |       -ms-user-select: none;
 882 |           user-select: none;
 883 |   pointer-events: none;
 884 | }
 885 | 
 886 | .disclosure--section {
 887 |   font-weight: var(--font-weight-bold);
 888 | }
 889 | 
 890 | .disclosure--expanded .disclosure__content {
 891 |   display: block;
 892 |   border-bottom: 1px solid transparent;
 893 | }
 894 | 
 895 | .disclosure--expanded .disclosure__label:before {
 896 |   opacity: 0.8;
 897 |   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");
 898 | }
 899 | 
 900 | .icon {
 901 |   display: flex;
 902 |   align-items: center;
 903 |   justify-content: center;
 904 |   cursor: default;
 905 |   width: var(--size-medium);
 906 |   height: var(--size-medium);
 907 |   font-family: var(--font-stack);
 908 |   font-size: var(--font-size-xsmall);
 909 |   -webkit-user-select: none;
 910 |      -moz-user-select: none;
 911 |       -ms-user-select: none;
 912 |           user-select: none;
 913 |   background-position: -2px -1px;
 914 | }
 915 | 
 916 | .icon--spin {
 917 |   -webkit-animation: rotating 1.0s linear infinite;
 918 |           animation: rotating 1.0s linear infinite;
 919 | }
 920 | 
 921 | @-webkit-keyframes rotating {
 922 |   from {
 923 |     transform: rotate(0deg);
 924 |   }
 925 |   to {
 926 |     transform: rotate(360deg);
 927 |   }
 928 | }
 929 | 
 930 | @keyframes rotating {
 931 |   from {
 932 |     transform: rotate(0deg);
 933 |   }
 934 |   to {
 935 |     transform: rotate(360deg);
 936 |   }
 937 | }
 938 | 
 939 | .icon--blue {
 940 |   -webkit-filter: invert(54%) sepia(16%) saturate(7499%) hue-rotate(179deg) brightness(98%) contrast(101%);
 941 |           filter: invert(54%) sepia(16%) saturate(7499%) hue-rotate(179deg) brightness(98%) contrast(101%);
 942 | }
 943 | 
 944 | .icon--purple {
 945 |   -webkit-filter: invert(40%) sepia(59%) saturate(4001%) hue-rotate(232deg) brightness(103%) contrast(102%);
 946 |           filter: invert(40%) sepia(59%) saturate(4001%) hue-rotate(232deg) brightness(103%) contrast(102%);
 947 | }
 948 | 
 949 | .icon--purple4 {
 950 |   -webkit-filter: invert(72%) sepia(40%) saturate(660%) hue-rotate(202deg) brightness(103%) contrast(103%);
 951 |           filter: invert(72%) sepia(40%) saturate(660%) hue-rotate(202deg) brightness(103%) contrast(103%);
 952 | }
 953 | 
 954 | .icon--hot-pink {
 955 |   -webkit-filter: invert(18%) sepia(90%) saturate(3347%) hue-rotate(293deg) brightness(116%) contrast(132%);
 956 |           filter: invert(18%) sepia(90%) saturate(3347%) hue-rotate(293deg) brightness(116%) contrast(132%);
 957 | }
 958 | 
 959 | .icon--green {
 960 |   -webkit-filter: invert(66%) sepia(39%) saturate(5382%) hue-rotate(114deg) brightness(102%) contrast(79%);
 961 |           filter: invert(66%) sepia(39%) saturate(5382%) hue-rotate(114deg) brightness(102%) contrast(79%);
 962 | }
 963 | 
 964 | .icon--red {
 965 |   -webkit-filter: invert(43%) sepia(56%) saturate(5632%) hue-rotate(349deg) brightness(97%) contrast(95%);
 966 |           filter: invert(43%) sepia(56%) saturate(5632%) hue-rotate(349deg) brightness(97%) contrast(95%);
 967 | }
 968 | 
 969 | .icon--yellow {
 970 |   -webkit-filter: invert(78%) sepia(86%) saturate(1608%) hue-rotate(1deg) brightness(107%) contrast(104%);
 971 |           filter: invert(78%) sepia(86%) saturate(1608%) hue-rotate(1deg) brightness(107%) contrast(104%);
 972 | }
 973 | 
 974 | .icon--black {
 975 |   -webkit-filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(117deg) brightness(109%) contrast(105%);
 976 |           filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(117deg) brightness(109%) contrast(105%);
 977 | }
 978 | 
 979 | .icon--black8 {
 980 |   -webkit-filter: invert(0%) sepia(56%) saturate(25%) hue-rotate(137deg) brightness(105%) contrast(60%);
 981 |           filter: invert(0%) sepia(56%) saturate(25%) hue-rotate(137deg) brightness(105%) contrast(60%);
 982 | }
 983 | 
 984 | .icon--black3 {
 985 |   -webkit-filter: invert(100%) sepia(0%) saturate(698%) hue-rotate(219deg) brightness(66%) contrast(127%);
 986 |           filter: invert(100%) sepia(0%) saturate(698%) hue-rotate(219deg) brightness(66%) contrast(127%);
 987 | }
 988 | 
 989 | .icon--white {
 990 |   -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(269deg) brightness(103%) contrast(104%);
 991 |           filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(269deg) brightness(103%) contrast(104%);
 992 | }
 993 | 
 994 | .icon--white8 {
 995 |   -webkit-filter: invert(99%) sepia(2%) saturate(5%) hue-rotate(55deg) brightness(104%) contrast(98%);
 996 |           filter: invert(99%) sepia(2%) saturate(5%) hue-rotate(55deg) brightness(104%) contrast(98%);
 997 | }
 998 | 
 999 | .icon--white4 {
1000 |   -webkit-filter: invert(99%) sepia(2%) saturate(897%) hue-rotate(245deg) brightness(117%) contrast(93%);
1001 |           filter: invert(99%) sepia(2%) saturate(897%) hue-rotate(245deg) brightness(117%) contrast(93%);
1002 | }
1003 | 
1004 | .icon--adjust {
1005 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12 16.05V9h1v7.05a2.5 2.5 0 010 4.9V23h-1v-2.05a2.5 2.5 0 010-4.9zm2 2.45a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM19 23h1v-7.05a2.5 2.5 0 000-4.9V9h-1v2.05a2.5 2.5 0 000 4.9zm2-9.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z'/%3E%3C/g%3E%3C/svg%3E");
1006 | }
1007 | 
1008 | .icon--alert {
1009 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath clip-rule='evenodd' d='M21.25 17.393a1.75 1.75 0 001.75 1.75V20H9v-.857a1.75 1.75 0 001.75-1.75V14c0-3.314 2.35-6 5.25-6s5.25 2.686 5.25 6zm-1-3.393v3.393c0 .6.192 1.155.518 1.607h-9.536a2.738 2.738 0 00.518-1.607V14c0-2.891 2.024-5 4.25-5s4.25 2.109 4.25 5z' fill-rule='evenodd'/%3E%3Cpath d='M16 23a2 2 0 01-2-2h-1a3 3 0 106 0h-1a2 2 0 01-2 2z'/%3E%3C/g%3E%3C/svg%3E");
1010 | }
1011 | 
1012 | .icon--angle {
1013 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M12 12v8h8v-1h-3a4 4 0 00-4-4v-3zm1 4v3h3a3 3 0 00-3-3z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1014 | }
1015 | 
1016 | .icon--arrow-left-right {
1017 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 16.5l1.647 1.646-.707.708L10.293 16l2.854-2.854.707.708-1.647 1.646h7.586l-1.646-1.646.707-.708L21.707 16l-2.853 2.854-.707-.708 1.646-1.646z' fill='%23000'/%3E%3C/svg%3E");
1018 | }
1019 | 
1020 | .icon--up-down {
1021 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10.292l2.854 2.854-.707.707-1.646-1.646v7.585l1.646-1.646.707.707-2.853 2.854-2.854-2.854.707-.707 1.647 1.646v-7.585l-1.647 1.646-.707-.707z' fill='%23000'/%3E%3C/svg%3E");
1022 | }
1023 | 
1024 | .icon--auto-layout-horizontal {
1025 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M10 10h5v12h-5zm1 1h3v10h-3zm6-1h5v12h-5zm1 1h3v10h-3z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1026 | }
1027 | 
1028 | .icon--auto-layout-vertical {
1029 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M10 10h12v5H10zm1 1h10v3H11zm-1 6h12v5H10zm1 1h10v3H11z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1030 | }
1031 | 
1032 | .icon--back {
1033 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M13.707 16l4.646-4.646-.707-.707L12.293 16l5.353 5.354.707-.707z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1034 | }
1035 | 
1036 | .icon--blend-empty {
1037 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16.695 11.72l-.693-.718L16 11l-.001.002-.694.718C13.102 14.012 12 15.294 12 16.852a4.199 4.199 0 001.172 2.936 3.906 3.906 0 005.656 0A4.199 4.199 0 0020 16.852c0-1.558-1.102-2.84-3.305-5.132zm-.695.72c-.977 1.017-1.693 1.79-2.195 2.471-.6.814-.805 1.38-.805 1.94v.003a3.2 3.2 0 00.89 2.239 2.906 2.906 0 004.22 0 3.2 3.2 0 00.89-2.239v-.002c0-.56-.205-1.127-.805-1.94-.502-.681-1.219-1.455-2.195-2.472z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1038 | }
1039 | 
1040 | .icon--blend {
1041 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16.002 11.002l.693.718C18.898 14.012 20 15.294 20 16.852a4.199 4.199 0 01-1.172 2.936 3.906 3.906 0 01-5.656 0A4.199 4.199 0 0112 16.852c0-1.558 1.102-2.84 3.305-5.132l.694-.719zm-2.197 3.91c.502-.681 1.219-1.455 2.195-2.472.976 1.017 1.693 1.79 2.195 2.471.6.814.805 1.38.805 1.94v.003c0 .049 0 .098-.003.146h-5.994a3.37 3.37 0 01-.003-.146v-.002c0-.56.205-1.127.805-1.94z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1042 | }
1043 | 
1044 | .icon--break {
1045 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' opacity='.9'%3E%3Cpath d='M13 9v3h1V9zM22.103 9.896a2.975 2.975 0 00-4.207 0l-2.75 2.75.707.707 2.75-2.75a1.975 1.975 0 012.793 2.793l-2.75 2.75.707.707 2.75-2.75a2.975 2.975 0 000-4.207zM9.896 22.104a2.975 2.975 0 010-4.208l2.75-2.75.707.707-2.75 2.75a1.975 1.975 0 002.793 2.793l2.75-2.75.707.707-2.75 2.75a2.975 2.975 0 01-4.207 0zM23 19h-3v-1h3zM19 20v3h-1v-3zM12 13H9v1h3z'/%3E%3C/g%3E%3C/svg%3E");
1046 | }
1047 | 
1048 | .icon--caret-down {
1049 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 18l3-4h-6z' fill='%23000'/%3E%3C/svg%3E");
1050 | }
1051 | 
1052 | .icon--caret-left {
1053 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 16l4-3v6z' fill='%23000'/%3E%3C/svg%3E");
1054 | }
1055 | 
1056 | .icon--caret-right {
1057 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 16l-4-3v6z' fill='%23000'/%3E%3C/svg%3E");
1058 | }
1059 | 
1060 | .icon--caret-up {
1061 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 14l3 4h-6z' fill='%23000'/%3E%3C/svg%3E");
1062 | }
1063 | 
1064 | .icon--check {
1065 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M21.207 13.707L15 19.914l-3.707-3.707 1.414-1.414L15 17.086l4.793-4.793z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1066 | }
1067 | 
1068 | .icon--close {
1069 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 15.293l4.646-4.646.708.707L16.707 16l4.647 4.647-.707.707L16 16.707l-4.646 4.647-.707-.707L15.293 16l-4.646-4.646.707-.707z' fill='%23000'/%3E%3C/svg%3E");
1070 | }
1071 | 
1072 | .icon--component {
1073 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M12.063 10.938L16 14.874l3.938-3.938L16 7zm6.46 0L16 13.46l-2.523-2.524L16 8.415zm-6.46 10.124L16 25l3.938-3.938L16 17.125zm6.46 0L16 23.587l-2.523-2.523L16 18.538zM7 16l3.937-3.938L14.875 16l-3.938 3.938zm3.937 2.523L13.461 16l-2.524-2.523L8.415 16zM17.125 16l3.938 3.938L25 16l-3.938-3.938zm6.46 0l-2.523 2.523L18.54 16l2.523-2.523z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1074 | }
1075 | 
1076 | .icon--corner-radius {
1077 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M21 13h-4a4 4 0 00-4 4v4h-1v-4a5 5 0 015-5h4z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1078 | }
1079 | 
1080 | .icon--corners {
1081 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M11 11h3v1h-2v2h-1zm7 0h3v3h-1v-2h-2zm-6 9v-2h-1v3h3v-1zm9-2v3h-3v-1h2v-2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1082 | }
1083 | 
1084 | .icon--distribute-horizontal-spacing {
1085 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M11 22.5v-13h-1v13zM22 9.5v13h-1v-13zM17 12.5v7h-2v-7z'/%3E%3C/g%3E%3C/svg%3E");
1086 | }
1087 | 
1088 | .icon--distribute-vertical-spacing {
1089 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9.5 10h13v1h-13zM12.5 15h7v2h-7zM22.5 21h-13v1h13z'/%3E%3C/g%3E%3C/svg%3E");
1090 | }
1091 | 
1092 | .icon--draft {
1093 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M10 8.5h7.707L22 12.793V23.5H10zm1 1v13h10v-9h-4v-4zm7 .707l2.293 2.293H18z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1094 | }
1095 | 
1096 | .icon--effects {
1097 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M16.5 8.5h-1v3h1zM11.05 10.343l-.707.707 2.121 2.122.708-.708zM21.657 11.05l-.707-.707-2.121 2.121.707.708zM8.5 15.5v1h3v-1zM20.5 15.5v1h3v-1zM13.172 19.535l-.708-.707-2.12 2.122.706.707zM19.535 18.828l-.707.707 2.122 2.122.707-.707zM16.5 20.5h-1v3h1z'/%3E%3Cpath clip-rule='evenodd' d='M18.498 15.998a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-1 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1098 | }
1099 | 
1100 | .icon--ellipses {
1101 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M11.5 16a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm6 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm4.5 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1102 | }
1103 | 
1104 | .icon--eyedropper {
1105 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.447 9.6c-.8-.8-2-.8-2.8 0l-2.8 2.8-.8-.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l.7.7-5.8 5.8c-.4.4-1 1.9 0 2.9s2.5.4 2.9 0l5.8-5.8.7.7c.4.4 1 .4 1.4 0s.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z' fill='%23000'/%3E%3C/svg%3E");
1106 | }
1107 | 
1108 | .icon--forward {
1109 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M17.94 16l-4.647-4.646.707-.707L19.354 16 14 21.354l-.707-.707z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1110 | }
1111 | 
1112 | .icon--frame {
1113 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M11 24v-3H8v-1h3v-8H8v-1h3V8h1v3h8V8h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1114 | }
1115 | 
1116 | .icon--group {
1117 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M17.4 9h-2.8v1h2.8zM20.9 22H22v-1.1h1V23h-2.1zM10 14.6v2.8H9v-2.8zM22 11.1V10h-1.1V9H23v2.1zM22 14.6v2.8h1v-2.8zM10 11.1V10h1.1V9H9v2.1zM9 20.9h1V22h1.1v1H9zM17.4 22h-2.8v1h2.8z'/%3E%3C/g%3E%3C/svg%3E");
1118 | }
1119 | 
1120 | .icon--hidden {
1121 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M21.509 15.801A8.033 8.033 0 0022.928 14h-1.184A6.992 6.992 0 0116 17a6.992 6.992 0 01-5.745-3H9.07a8.033 8.033 0 001.421 1.801l-1.595 1.595.708.707 1.657-1.657c.71.523 1.511.932 2.374 1.199l-.617 2.221.964.268.626-2.255a8.051 8.051 0 002.784 0l.626 2.255.964-.268-.617-2.221a7.971 7.971 0 002.374-1.2l1.658 1.658.707-.707z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1122 | }
1123 | 
1124 | .icon--horizontal-padding {
1125 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 9v14h1V9zm13 0v14h1V9z'/%3E%3Cpath clip-rule='evenodd' d='M13 19v-6h6v6zm-1-7h8v8h-8z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1126 | }
1127 | 
1128 | .icon--hyperlink {
1129 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.824 14.492l-1.657 1.657.828.829 1.658-1.657a3.517 3.517 0 00-4.973-4.973l-1.657 1.658.829.828 1.657-1.657a2.345 2.345 0 013.315 3.315zm-4.974 4.972l.829.829-1.658 1.657a3.516 3.516 0 11-4.972-4.972l1.659-1.658.828.829-1.656 1.657a2.343 2.343 0 103.315 3.315l1.657-1.657zm2.072-6.216l-4.972 4.973.828.829 4.973-4.973z' fill='%23000'/%3E%3C/svg%3E");
1130 | }
1131 | 
1132 | .icon--image {
1133 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M22 10H10v7.793l3.083-3.083 7.29 7.29H22zM10 22v-2.793l3.083-3.083L18.96 22zm0-13a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V10a1 1 0 00-1-1zm9.667 4.667a1.333 1.333 0 11-2.667 0 1.333 1.333 0 012.667 0zm1 0a2.333 2.333 0 11-4.667 0 2.333 2.333 0 014.667 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1134 | }
1135 | 
1136 | .icon--instance {
1137 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16 7l9 9-9 9-9-9zm-7.586 9L16 23.586 23.586 16 16 8.414z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1138 | }
1139 | 
1140 | .icon--key {
1141 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M15.14 20.14a3.014 3.014 0 00.331-3.868l2.047-2.047 1.767 1.767a.5.5 0 10.707-.707l-1.767-1.767 1.293-1.293 1.784 1.784a.5.5 0 10.707-.707l-1.784-1.784.762-.761a.5.5 0 00-.707-.708l-5.513 5.513a3.014 3.014 0 10.373 4.578zm-.712-.712a2.006 2.006 0 10-2.837-2.837 2.006 2.006 0 002.837 2.837z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1142 | }
1143 | 
1144 | .icon--layout-align-bottom {
1145 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M14.5 10v10h-2V10zm8 12v1h-13v-1zm-3-2v-6h-2v6z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1146 | }
1147 | 
1148 | .icon--align-horizontal-centers {
1149 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 9.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z' fill='%23000'/%3E%3C/svg%3E");
1150 | }
1151 | 
1152 | .icon--align-left {
1153 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 22.5H9v-13h1zM22 14.5H12v-2h10zM12 19.5h6v-2h-6z'/%3E%3C/g%3E%3C/svg%3E");
1154 | }
1155 | 
1156 | .icon--align-right {
1157 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M22 22.5h1v-13h-1zM10 14.5h10v-2H10zM20 19.5h-6v-2h6z'/%3E%3C/g%3E%3C/svg%3E");
1158 | }
1159 | 
1160 | .icon--align-top {
1161 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M14.5 22V12h-2v10zM22.5 10V9h-13v1zM19.5 12v6h-2v-6z'/%3E%3C/g%3E%3C/svg%3E");
1162 | }
1163 | 
1164 | .icon--align-vertical-centers {
1165 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5 15.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z' fill='%23000'/%3E%3C/svg%3E");
1166 | }
1167 | 
1168 | .icon--layout-grid-columns {
1169 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 9h3v14H9zM14.5 9h3v14h-3zM20 9h3v14h-3z'/%3E%3C/g%3E%3C/svg%3E");
1170 | }
1171 | 
1172 | .icon--layout-grid-rows {
1173 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 9h14v3H9zM9 14.5h14v3H9zM9 20h14v3H9z'/%3E%3C/g%3E%3C/svg%3E");
1174 | }
1175 | 
1176 | .icon--layout-grid-uniform {
1177 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 9h3v3H9zM20 9h3v3h-3zM14.5 9h3v3h-3zM9 14.5h3v3H9zM20 14.5h3v3h-3zM14.5 14.5h3v3h-3zM9 20h3v3H9zM20 20h3v3h-3zM14.5 20h3v3h-3z'/%3E%3C/g%3E%3C/svg%3E");
1178 | }
1179 | 
1180 | .icon--library {
1181 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M15.373 22h1.258c.28-.32.616-.597.995-.819 1.478-.862 4.005-.909 5.386.109H24.5v-9.2s-.797-2.25-4.42-2.25c-1.875 0-2.902.602-3.456 1.184a2.568 2.568 0 00-.6.976h-.048a2.569 2.569 0 00-.6-.976c-.554-.582-1.581-1.184-3.456-1.184-3.623 0-4.42 2.25-4.42 2.25v9.19h1.488c1.382-1.019 3.91-.97 5.388-.105.38.223.717.503.997.825zm1.127-9.711v8.457c.195-.157.403-.3.622-.428.927-.541 2.115-.796 3.241-.787 1.006.008 2.081.227 2.952.759h.185v-7.973a2.414 2.414 0 00-.505-.595c-.46-.397-1.33-.882-2.915-.882-1.586 0-2.34.483-2.695.835a1.749 1.749 0 00-.353.49 1.076 1.076 0 00-.052.131l-.005.017.001-.006.002-.008v-.005l.001-.002v-.002l-.005-.001zm-1 0h-.474l-.006.001v.002l.001.002.001.005.002.008.001.006-.005-.017a1.076 1.076 0 00-.053-.131 1.749 1.749 0 00-.353-.49c-.354-.351-1.108-.835-2.694-.835-1.585 0-2.455.485-2.916.882a2.411 2.411 0 00-.504.595v7.963h.185c.872-.532 1.948-.752 2.954-.759 1.128-.008 2.316.249 3.243.792.217.127.424.27.618.426z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1182 | }
1183 | 
1184 | .icon--link-broken {
1185 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M18 14v-2a2 2 0 10-4 0v2h-1v-2a3 3 0 116 0v2zM19 18h-1v2a2 2 0 11-4 0v-2h-1v2a3 3 0 106 0z'/%3E%3C/g%3E%3C/svg%3E");
1186 | }
1187 | 
1188 | .icon--link-connected {
1189 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M16 10a2 2 0 012 2v2h1v-2a3 3 0 10-6 0v2h1v-2a2 2 0 012-2zM18 18h1v2a3 3 0 11-6 0v-2h1v2a2 2 0 104 0z'/%3E%3Cpath d='M15.5 13v6h1v-6z'/%3E%3C/g%3E%3C/svg%3E");
1190 | }
1191 | 
1192 | .icon--list-detailed {
1193 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 10h-2v1h2zM12 20h-2v1h2zM10 15h2v1h-2zM22 10h-8v1h8zM14 20h8v1h-8zM22 15h-8v1h8z'/%3E%3C/g%3E%3C/svg%3E");
1194 | }
1195 | 
1196 | .icon--list-tile {
1197 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M14 11h-3v3h3zm-4-1v5h5v-5zm11 1h-3v3h3zm-4-1v5h5v-5zm-3 8h-3v3h3zm-4-1v5h5v-5zm11 1h-3v3h3zm-4-1v5h5v-5z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1198 | }
1199 | 
1200 | .icon--list {
1201 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='.8'%3E%3Cpath d='M23 10H9v1h14zM9 15.5h14v1H9zM9 21h14v1H9z'/%3E%3C/g%3E%3C/svg%3E");
1202 | }
1203 | 
1204 | .icon--lock-off {
1205 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15h.5a.5.5 0 01.5.5v5a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5H17v-2.5a2.5 2.5 0 015 0V14h-1v-1.5a1.5 1.5 0 00-3 0z' fill='%23000'/%3E%3C/svg%3E");
1206 | }
1207 | 
1208 | .icon--lock-on {
1209 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M13.5 15v-1.5a2.5 2.5 0 015 0V15h.5a.5.5 0 01.5.5v5a.5.5 0 01-.5.5h-6a.5.5 0 01-.5-.5v-5a.5.5 0 01.5-.5zm4-1.5V15h-3v-1.5a1.5 1.5 0 013 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1210 | }
1211 | 
1212 | .icon--minus {
1213 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.5 16.5h-11v-1h11z' fill='%23000'/%3E%3C/svg%3E");
1214 | }
1215 | 
1216 | .icon--play {
1217 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M13 10.098L22.443 16 13 21.902zm1 1.804v8.196L20.557 16z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1218 | }
1219 | 
1220 | .icon--plus {
1221 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 15.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z' fill='%23000'/%3E%3C/svg%3E");
1222 | }
1223 | 
1224 | .icon--random {
1225 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath clip-rule='evenodd' d='M15.118 11a2.5 2.5 0 00-1.335.386L11.228 13H18.5v1h-8.497a.512.512 0 00-.003.051V20.5c0 .278.223.5.497.5h7.628a.498.498 0 00.328-.123l3.206-2.805a1 1 0 00.341-.753V11.5a.5.5 0 00-.5-.5zm-1.869-.46a3.5 3.5 0 011.87-.54H21.5a1.5 1.5 0 011.5 1.5v5.82a2 2 0 01-.683 1.504l-3.205 2.805c-.274.24-.624.371-.987.371h-7.627C9.668 22 9 21.327 9 20.5v-6.449a1.5 1.5 0 01.699-1.268z' fill-rule='evenodd'/%3E%3Cpath d='M13 16a1 1 0 11-2 0 1 1 0 012 0zM17 16a1 1 0 11-2 0 1 1 0 012 0zM17 19a1 1 0 11-2 0 1 1 0 012 0zM13 19a1 1 0 11-2 0 1 1 0 012 0z'/%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cpath d='M22.407 10.71a.5.5 0 01-.116.697l-3.5 2.5a.5.5 0 01-.582-.814l3.5-2.5a.5.5 0 01.698.116z'/%3E%3Cpath d='M18 21v-8h1v8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
1226 | }
1227 | 
1228 | .icon--recent {
1229 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M15 12v5h5v-1h-4v-4z'/%3E%3Cpath clip-rule='evenodd' d='M24 16a8 8 0 11-16 0 8 8 0 0116 0zm-1 0a7 7 0 11-14 0 7 7 0 0114 0z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1230 | }
1231 | 
1232 | .icon--resize-to-fit {
1233 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M8.646 9.354L12.293 13H10v1h4v-4h-1v2.293L9.354 8.646zM19.707 13l3.647-3.646-.707-.708L19 12.293V10h-1v4h4v-1zM19.707 19l3.647 3.646-.707.708L19 19.707V22h-1v-4h4v1zM12.293 19l-3.647 3.646.708.708L13 19.707V22h1v-4h-4v1z'/%3E%3C/g%3E%3C/svg%3E");
1234 | }
1235 | 
1236 | .icon--resolve-filled {
1237 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16 24a8 8 0 100-16 8 8 0 000 16zm3.911-9.635l-.822-.73-3.613 4.064-2.587-2.588-.778.778 3.413 3.412z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1238 | }
1239 | 
1240 | .icon--resolve {
1241 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M19.911 14.365l-.822-.73-3.613 4.063-2.587-2.587-.778.778 3.413 3.412z'/%3E%3Cpath clip-rule='evenodd' d='M24 16a8 8 0 11-16 0 8 8 0 0116 0zm-1 0a7 7 0 11-14 0 7 7 0 0114 0z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1242 | }
1243 | 
1244 | .icon--reverse {
1245 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M15.854 8.646L18.207 11l-2.353 2.354-.708-.708 1.147-1.146H14c-.503 0-1.27.155-1.895.606-.6.432-1.105 1.157-1.105 2.394v7.25h-1V14.5c0-1.563.662-2.588 1.52-3.206.833-.6 1.817-.794 2.48-.794h2.293l-1.147-1.146zM22 10v7.25c0 1.563-.662 2.588-1.52 3.206-.833.6-1.817.794-2.48.794h-2.293l1.147 1.146-.708.708-2.353-2.354 2.353-2.354.708.708-1.147 1.146H18c.503 0 1.27-.155 1.895-.606.6-.432 1.105-1.157 1.105-2.394V10z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1246 | }
1247 | 
1248 | .icon--search-large {
1249 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M18.874 19.581a6 6 0 11.707-.707l4.273 4.272-.708.708zM20 15a5 5 0 11-10 0 5 5 0 0110 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1250 | }
1251 | 
1252 | .icon--search {
1253 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M18.397 18.605a4.552 4.552 0 11.707-.707l3.25 3.249-.708.707zm.706-3.553a3.552 3.552 0 11-7.103 0 3.552 3.552 0 017.103 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1254 | }
1255 | 
1256 | .icon--settings {
1257 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M16.954 9.928l-.139-.331C16.635 9.165 16.301 9 16 9s-.635.165-.815.597l-.139.331c-.56 1.343-1.992 2.13-3.425 1.72l-.5-.144c-.309-.088-.606.025-.815.327a1.05 1.05 0 00-.049 1.123c.743 1.323.402 3.068-.86 3.95-.318.222-.456.614-.375 1.024.081.409.342.668.673.723l.195.033c1.525.253 2.51 1.687 2.423 3.18-.03.503.22.861.52 1.028.288.161.623.155.921-.108l.373-.33a2.8 2.8 0 013.746 0l.373.33c.298.264.633.27.922.108.3-.167.549-.525.52-1.028-.088-1.493.897-2.927 2.423-3.18l.194-.033c.33-.055.592-.314.673-.723.081-.41-.057-.802-.375-1.024-1.262-.882-1.603-2.627-.86-3.95a1.05 1.05 0 00-.05-1.123c-.208-.302-.505-.415-.815-.327l-.499.143c-1.433.41-2.865-.376-3.425-1.719zm.784-.717c-.674-1.615-2.802-1.615-3.476 0l-.138.332c-.383.917-1.326 1.401-2.228 1.143l-.499-.143c-1.575-.45-2.855 1.398-2.012 2.9.505.9.257 2.07-.56 2.64-1.392.973-.933 3.282.706 3.555l.195.032c.96.16 1.65 1.09 1.588 2.135-.104 1.788 1.82 2.864 3.103 1.727l.373-.33a1.8 1.8 0 012.42 0l.373.33c1.284 1.137 3.207.061 3.103-1.727-.061-1.046.628-1.975 1.589-2.135l.194-.032c1.639-.273 2.098-2.582.707-3.554-.818-.572-1.066-1.742-.561-2.64.843-1.503-.437-3.352-2.012-2.901l-.5.143c-.9.258-1.844-.226-2.226-1.143z'/%3E%3Cpath d='M16 18.5a2 2 0 100-4 2 2 0 000 4zm0 1a3 3 0 100-6 3 3 0 000 6z'/%3E%3C/g%3E%3C/svg%3E");
1258 | }
1259 | 
1260 | .icon--share {
1261 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M20 9.5a3.5 3.5 0 00-1.383 6.716A4.513 4.513 0 0016 18.436a4.513 4.513 0 00-2.618-2.22 3.501 3.501 0 10-2.764 0A4.502 4.502 0 007.5 20.5V22h17v-1.5c0-2.003-1.309-3.7-3.118-4.284A3.501 3.501 0 0020 9.5zM17.5 13a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zm-1 8v-.5a3.5 3.5 0 117 0v.5zm-1-.5v.5h-7v-.5a3.5 3.5 0 117 0zm-6-7.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1262 | }
1263 | 
1264 | .icon--smiley {
1265 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M16 20a4.002 4.002 0 01-3.874-3h1.045a3.001 3.001 0 005.658 0h1.045A4.002 4.002 0 0116 20zM19.5 14.125a.875.875 0 11-1.75 0 .875.875 0 011.75 0zM13.125 15a.875.875 0 100-1.75.875.875 0 000 1.75z'/%3E%3Cpath clip-rule='evenodd' d='M24 16a8 8 0 11-16 0 8 8 0 0116 0zm-1 0a7 7 0 11-14 0 7 7 0 0114 0z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1266 | }
1267 | 
1268 | .icon--sort-alpha-asc {
1269 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M10.897 9L9 14h1.07l.379-1h2.133l.338 1h1.056l-1.69-5zm1.347 3l-.667-1.973L10.828 12zM12.553 19H9.5v-1H14v.979L10.932 22H14v1H9.5v-.993zM20.5 8.293l3.354 3.353-.708.708L21 10.207V23h-1V10.207l-2.146 2.147-.708-.708z'/%3E%3C/g%3E%3C/svg%3E");
1270 | }
1271 | 
1272 | .icon--sort-alpha-dsc {
1273 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M10.897 9L9 14h1.07l.379-1h2.133l.338 1h1.056l-1.69-5zm1.347 3l-.667-1.973L10.828 12zM12.553 19H9.5v-1H14v.979L10.932 22H14v1H9.5v-.993zM20 21.793V9h1v12.793l2.146-2.147.708.708-3.354 3.353-3.354-3.353.708-.708z'/%3E%3C/g%3E%3C/svg%3E");
1274 | }
1275 | 
1276 | .icon--sort-top-bottom {
1277 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M20.45 12H10v-1h10.45c.97 0 1.372 1.244.584 1.812L11.05 20h9.243l-1.647-1.646.708-.708 2.853 2.854-2.853 2.854-.708-.708L20.293 21H11.05c-.97 0-1.372-1.244-.584-1.812z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1278 | }
1279 | 
1280 | .icon--spacing {
1281 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11h-2v10h2v1h-3V10h3zm-10-1v12H9v-1h2V11H9v-1zm4 3h-1v6h1z' fill='%23000'/%3E%3C/svg%3E");
1282 | }
1283 | 
1284 | .icon--spinner {
1285 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M15.165 8.53a.5.5 0 01-.404.58A7 7 0 1023 16a.5.5 0 011 0 8 8 0 11-9.416-7.874.5.5 0 01.58.404z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1286 | }
1287 | 
1288 | .icon--star-off {
1289 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M18 14.004L16 8l-2 6.004H8L12.96 18l-1.904 6L16 20l4.944 4-1.904-6L24 14zm3.165.998l-3.886.002L16 11.164l-1.28 3.84h-3.885l3.285 2.646-1.103 3.477L16 18.714l2.983 2.413-1.103-3.476z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1290 | }
1291 | 
1292 | .icon--star-on {
1293 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8l2 6.004L24 14l-4.96 4 1.904 6L16 20l-4.944 4 1.904-6L8 14.004h6z' fill='%23000'/%3E%3C/svg%3E");
1294 | }
1295 | 
1296 | .icon--stroke-weight {
1297 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M10 10h12v1H10zm0 4h12v2H10zm12 5H10v3h12z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1298 | }
1299 | 
1300 | .icon--styles {
1301 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 13a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0zM17.5 13a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0zM19 20.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM11.5 19a1.5 1.5 0 103 0 1.5 1.5 0 00-3 0z'/%3E%3C/g%3E%3C/svg%3E");
1302 | }
1303 | 
1304 | .icon--swap {
1305 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M23 13.188l-1.175 1.468a5.5 5.5 0 00-10.003-2.219l.83.557a4.5 4.5 0 018.216 2.057l-2.2-1.467-.555.832 3.381 2.254 2.287-2.858zM9 17.188l.78.624 1.176-1.468.026.156a5.5 5.5 0 009.976 2.065v-.002l-.83-.557-.001.001a4.5 4.5 0 01-8.214-2.058l2.2 1.467.555-.832-3.382-2.254z'/%3E%3C/g%3E%3C/svg%3E");
1306 | }
1307 | 
1308 | .icon--theme {
1309 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath clip-rule='evenodd' d='M13 10h-3v12h3zm-3-1a1 1 0 00-1 1v12a1 1 0 001 1h3a1 1 0 001-1V10a1 1 0 00-1-1z' fill-rule='evenodd'/%3E%3Cpath d='M10.75 20.5a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM22 18a1 1 0 011 1v3a1 1 0 01-1 1h-7v-1h7v-3h-7v-1zM18.385 17l2.757-2.757a1 1 0 000-1.415l-2.121-2.12a1 1 0 00-1.414 0L15 13.313v1.414l3.314-3.314 2.121 2.122L16.971 17z'/%3E%3C/g%3E%3C/svg%3E");
1310 | }
1311 | 
1312 | .icon--tidy-up-grid {
1313 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 10h2v2h-2zM20 10h2v2h-2zM12 15h-2v2h2zM20 15h2v2h-2zM12 20h-2v2h2zM20 20h2v2h-2zM17 10h-2v2h2zM15 15h2v2h-2zM17 20h-2v2h2z'/%3E%3C/g%3E%3C/svg%3E");
1314 | }
1315 | 
1316 | .icon--tidy-up-list-horizontal {
1317 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M10 22.5v-13h2v13zM15 22.5v-13h2v13zM20 9.5v13h2v-13z'/%3E%3C/g%3E%3C/svg%3E");
1318 | }
1319 | 
1320 | .icon--tidy-up-list-vertical {
1321 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9.5 10h13v2h-13zM9.5 15h13v2h-13zM22.5 20h-13v2h13z'/%3E%3C/g%3E%3C/svg%3E");
1322 | }
1323 | 
1324 | .icon--timer {
1325 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M19 8h-6V7h6zM16.5 17v-5h-1v5a.5.5 0 001 0z'/%3E%3Cpath clip-rule='evenodd' d='M22.715 12.65l1.527-1.529L22.122 9l-1.483 1.482a8 8 0 102.075 2.167zM23 17a7 7 0 11-2.384-5.263l.647.647A6.974 6.974 0 0123 17zm-1.008-5.3l.13.128.706-.707-.707-.707-.701.701c.2.185.391.38.572.585z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1326 | }
1327 | 
1328 | .icon--trash {
1329 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M14 18.5v-4h1v4zM17 18.5v-4h1v4z'/%3E%3Cpath clip-rule='evenodd' d='M19 10.5a2 2 0 00-2-2h-2a2 2 0 00-2 2h-3v1h1v10a2 2 0 002 2h6a2 2 0 002-2v-10h1v-1zm-4-1a1 1 0 00-1 1h4a1 1 0 00-1-1zm5 2h-8v10a1 1 0 001 1h6a1 1 0 001-1z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1330 | }
1331 | 
1332 | .icon--vertical-padding {
1333 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M9 9h14v1H9zm0 13h14v1H9z'/%3E%3Cpath clip-rule='evenodd' d='M19 13h-6v6h6zm-7-1v8h8v-8z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1334 | }
1335 | 
1336 | .icon--visible {
1337 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='M16 18a2 2 0 100-4 2 2 0 000 4z'/%3E%3Cpath clip-rule='evenodd' d='M16 12a7.499 7.499 0 016.635 4A7.499 7.499 0 0116 20a7.499 7.499 0 01-6.635-4A7.499 7.499 0 0116 12zm0 7a6.495 6.495 0 01-5.478-3A6.495 6.495 0 0116 13c2.3 0 4.322 1.194 5.478 3A6.495 6.495 0 0116 19z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
1338 | }
1339 | 
1340 | .icon--warning-large {
1341 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16 6l10 18H6zm-1 11v-4h2v4zm0 2v2h2v-2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1342 | }
1343 | 
1344 | .icon--warning {
1345 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg fill='none' height='32' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M16 9l8 14H8zm-1 8.5V14h2v3.5zm0 1.5v2h2v-2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
1346 | }
1347 | 
1348 | .icon-button {
1349 |   display: flex;
1350 |   align-items: center;
1351 |   justify-content: center;
1352 |   cursor: pointer;
1353 |   width: var(--size-medium);
1354 |   height: var(--size-medium);
1355 |   border-radius: var(--border-radius-small);
1356 |   border: 2px solid transparent;
1357 | }
1358 | 
1359 | .icon-button * {
1360 |   -webkit-filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(117deg) brightness(109%) contrast(105%);
1361 |           filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(117deg) brightness(109%) contrast(105%);
1362 | }
1363 | 
1364 | .icon-button:hover {
1365 |   background: var(--hover-fill);
1366 | }
1367 | 
1368 | .icon-button:active, .icon-button:focus {
1369 |   border: 2px solid var(--blue);
1370 |   outline: none;
1371 | }
1372 | 
1373 | .icon-button--selected {
1374 |   background-color: var(--blue);
1375 | }
1376 | 
1377 | .icon-button--selected:hover {
1378 |   background-color: var(--blue);
1379 | }
1380 | 
1381 | .icon-button--selected:active, .icon-button--selected:focus {
1382 |   border: 2px solid var(--black3);
1383 | }
1384 | 
1385 | .icon-button--selected * {
1386 |   -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(269deg) brightness(103%) contrast(104%);
1387 |           filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(269deg) brightness(103%) contrast(104%);
1388 | }
1389 | 
1390 | .input {
1391 |   position: relative;
1392 | }
1393 | 
1394 | .input__field {
1395 |   font-size: var(--font-size-xsmall);
1396 |   font-weight: var(--font-weight-normal);
1397 |   letter-spacing: var(--font-letter-spacing-neg-xsmall);
1398 |   line-height: var(--line-height);
1399 |   position: relative;
1400 |   display: flex;
1401 |   overflow: visible;
1402 |   align-items: center;
1403 |   width: 100%;
1404 |   height: 30px;
1405 |   margin: 1px 0 1px 0;
1406 |   padding: var(--size-xxsmall) var(--size-xxxsmall) var(--size-xxsmall) var(--size-xxsmall);
1407 |   color: var(--black8);
1408 |   border: 1px solid transparent;
1409 |   border-radius: var(--border-radius-small);
1410 |   outline: none;
1411 |   background-color: var(--white);
1412 | }
1413 | 
1414 | .input__field:hover, .input__field:placeholder-shown:hover {
1415 |   color: var(--black8);
1416 |   border: 1px solid var(--black1);
1417 |   background-image: none;
1418 | }
1419 | 
1420 | .input__field::-moz-selection {
1421 |   color: var(--black);
1422 |   background-color: var(--blue3);
1423 | }
1424 | 
1425 | .input__field::selection {
1426 |   color: var(--black);
1427 |   background-color: var(--blue3);
1428 | }
1429 | 
1430 | .input__field::-webkit-input-placeholder {
1431 |   color: var(--black3);
1432 |   border: 1px solid transparent;
1433 | }
1434 | 
1435 | .input__field::-moz-placeholder {
1436 |   color: var(--black3);
1437 |   border: 1px solid transparent;
1438 | }
1439 | 
1440 | .input__field:-ms-input-placeholder {
1441 |   color: var(--black3);
1442 |   border: 1px solid transparent;
1443 | }
1444 | 
1445 | .input__field::-ms-input-placeholder {
1446 |   color: var(--black3);
1447 |   border: 1px solid transparent;
1448 | }
1449 | 
1450 | .input__field::placeholder {
1451 |   color: var(--black3);
1452 |   border: 1px solid transparent;
1453 | }
1454 | 
1455 | .input__field:placeholder-shown {
1456 |   border: 1px solid var(--black1);
1457 | }
1458 | 
1459 | .input__field:focus:placeholder-shown {
1460 |   border: 1px solid var(--blue);
1461 |   outline: 1px solid var(--blue);
1462 |   outline-offset: -2px;
1463 | }
1464 | 
1465 | .input__field:disabled:hover {
1466 |   border: 1px solid transparent;
1467 | }
1468 | 
1469 | .input__field:active, .input__field:focus {
1470 |   color: var(--black);
1471 |   border: 1px solid var(--blue);
1472 |   outline: 1px solid var(--blue);
1473 |   outline-offset: -2px;
1474 | }
1475 | 
1476 | .input__field:disabled {
1477 |   position: relative;
1478 |   color: var(--black3);
1479 |   -webkit-user-select: none;
1480 |      -moz-user-select: none;
1481 |       -ms-user-select: none;
1482 |           user-select: none;
1483 | }
1484 | 
1485 | .input__field:disabled:active {
1486 |   outline: none;
1487 | }
1488 | 
1489 | .input--with-icon .input__field {
1490 |   padding-left: 32px;
1491 | }
1492 | 
1493 | .input .icon {
1494 |   position: absolute;
1495 |   top: 0px;
1496 |   left: 0;
1497 |   width: var(--size-medium);
1498 |   height: var(--size-medium);
1499 |   z-index: 1;
1500 |   opacity: 0.3;
1501 | }
1502 | 
1503 | .label {
1504 |   font-size: var(--font-size-xsmall);
1505 |   font-weight: var(--font-weight-normal);
1506 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1507 |   line-height: var(--line-height);
1508 |   color: var(--black3);
1509 |   height: var(--size-medium);
1510 |   width: 100%;
1511 |   display: flex;
1512 |   align-items: center;
1513 |   cursor: default;
1514 |   -webkit-user-select: none;
1515 |      -moz-user-select: none;
1516 |       -ms-user-select: none;
1517 |           user-select: none;
1518 |   padding: 0 var(--size-xxxsmall) 0 var(--size-xxsmall);
1519 | }
1520 | 
1521 | .onboarding-tip {
1522 |   display: flex;
1523 |   align-items: top;
1524 |   padding: 0 var(--size-xsmall) 0 0;
1525 | }
1526 | 
1527 | .onboarding-tip .icon {
1528 |   margin-right: var(--size-xxsmall);
1529 | }
1530 | 
1531 | .onboarding-tip__msg {
1532 |   padding: var(--size-xxsmall) 0 var(--size-xxsmall) 0;
1533 |   font-size: var(--font-size-xsmall);
1534 |   font-weight: var(--font-weight-normal);
1535 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1536 |   line-height: var(--line-height);
1537 |   color: var(--black8);
1538 |   margin: 0;
1539 | }
1540 | 
1541 | .radio {
1542 |   align-items: center;
1543 |   cursor: default;
1544 |   display: flex;
1545 |   height: var(--size-medium);
1546 |   position: relative;
1547 | }
1548 | 
1549 | .radio__button {
1550 |   opacity: 0;
1551 |   width: 10px;
1552 |   height: 10px;
1553 |   margin: 0;
1554 |   padding: 0;
1555 | }
1556 | 
1557 | .radio__button:checked + .radio__label:before {
1558 |   background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="6" height="6" rx="3" fill="black" fill-opacity="0.8"/%3E%3C/svg%3E%0A');
1559 |   background-repeat: no-repeat;
1560 |   background-position: 2px 2px;
1561 | }
1562 | 
1563 | .radio__button:disabled + .radio__label {
1564 |   opacity: 0.3;
1565 | }
1566 | 
1567 | .radio__button:checked:disabled + .radio__label:before {
1568 |   border: 1px solid var(--black);
1569 | }
1570 | 
1571 | .radio__label {
1572 |   align-items: center;
1573 |   color: var(--black8);
1574 |   display: flex;
1575 |   font-family: var(--font-stack);
1576 |   font-size: var(--font-size-xsmall);
1577 |   font-weight: var(--font-weight-normal);
1578 |   line-height: var(--font-line-height);
1579 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1580 |   margin-left: -16px;
1581 |   padding: 0 var(--size-xsmall) 0 var(--size-small);
1582 |   height: 100%;
1583 |   -webkit-user-select: none;
1584 |      -moz-user-select: none;
1585 |       -ms-user-select: none;
1586 |           user-select: none;
1587 | }
1588 | 
1589 | .radio__label:before {
1590 |   border: 1px solid var(--black8);
1591 |   border-radius: var(--border-radius-small);
1592 |   content: '';
1593 |   display: block;
1594 |   width: 10px;
1595 |   height: 10px;
1596 |   margin: 2px 10px 0 -8px;
1597 |   border-radius: 50%;
1598 | }
1599 | 
1600 | .section-title {
1601 |   font-size: var(--font-size-xsmall);
1602 |   font-weight: var(--font-weight-bold);
1603 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1604 |   line-height: var(--line-height);
1605 |   color: var(--black8);
1606 |   height: var(--size-medium);
1607 |   width: 100%;
1608 |   display: flex;
1609 |   align-items: center;
1610 |   cursor: default;
1611 |   -webkit-user-select: none;
1612 |      -moz-user-select: none;
1613 |       -ms-user-select: none;
1614 |           user-select: none;
1615 |   padding: 0 calc(var(--size-xxsmall) / 2) 0 var(--size-xxsmall);
1616 | }
1617 | 
1618 | select.select-menu {
1619 |   display: none;
1620 | }
1621 | 
1622 | .select-menu {
1623 |   position: relative;
1624 | }
1625 | 
1626 | .select-menu__button {
1627 |   display: flex;
1628 |   align-items: center;
1629 |   border: 1px solid transparent;
1630 |   height: 30px;
1631 |   width: 100%;
1632 |   margin: 1px 0 1px 0;
1633 |   padding: 0px var(--size-xxsmall) 0px var(--size-xxsmall);
1634 |   overflow-y: hidden;
1635 |   border-radius: var(--border-radius-small);
1636 |   background-color: var(--white);
1637 | }
1638 | 
1639 | .select-menu__button:hover {
1640 |   border-color: var(--black1);
1641 | }
1642 | 
1643 | .select-menu__button:focus {
1644 |   border: 1px solid var(--blue);
1645 |   outline: 1px solid var(--blue);
1646 |   outline-offset: -2px;
1647 | }
1648 | 
1649 | .select-menu__button:disabled:hover {
1650 |   justify-content: flex-start;
1651 |   border-color: transparent;
1652 | }
1653 | 
1654 | .select-menu__button * {
1655 |   pointer-events: none;
1656 | }
1657 | 
1658 | .select-menu__button:hover .select-menu__label--placeholder {
1659 |   color: var(--black8);
1660 | }
1661 | 
1662 | .select-menu__button:focus .select-menu__label--placeholder {
1663 |   color: var(--black8);
1664 | }
1665 | 
1666 | .select-menu__button:disabled:hover .select-menu__label--placeholder {
1667 |   color: var(--black3);
1668 | }
1669 | 
1670 | .select-menu__button:hover .select-menu__caret, .select-menu__button:focus .select-menu__caret {
1671 |   opacity: 1.0;
1672 |   margin-left: auto;
1673 | }
1674 | 
1675 | .select-menu__button:disabled:hover .select-menu__caret {
1676 |   opacity: 0.3;
1677 |   margin-left: -12px;
1678 | }
1679 | 
1680 | .select-menu__button:disabled .select-menu__label {
1681 |   color: var(--black3);
1682 | }
1683 | 
1684 | .select-menu__label {
1685 |   font-size: var(--font-size-xsmall);
1686 |   font-weight: var(--font-weight-normal);
1687 |   letter-spacing: var(--font-letter-spacing-neg-xsmall);
1688 |   line-height: var(--line-height);
1689 |   color: var(--black8);
1690 |   margin-right: 6px;
1691 |   margin-top: -2px;
1692 |   white-space: nowrap;
1693 |   overflow-x: hidden;
1694 |   text-overflow: ellipsis;
1695 | }
1696 | 
1697 | .select-menu__label--placeholder {
1698 |   color: var(--black3);
1699 | }
1700 | 
1701 | .select-menu__caret {
1702 |   width: 30px;
1703 |   height: 30px;
1704 |   display: block;
1705 |   margin-top: -1px;
1706 |   margin-left: -12px;
1707 |   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");
1708 |   background-repeat: no-repeat;
1709 |   background-position: center center;
1710 |   opacity: 0.3;
1711 | }
1712 | 
1713 | .select-menu .icon {
1714 |   margin-left: -8px;
1715 |   margin-top: -2px;
1716 |   margin-right: 0;
1717 |   opacity: 0.3;
1718 | }
1719 | 
1720 | .select-menu__menu {
1721 |   display: none;
1722 |   position: absolute;
1723 |   top: 0;
1724 |   left: 0;
1725 |   width: 100%;
1726 |   background-color: var(--hud);
1727 |   box-shadow: var(--shadow-hud);
1728 |   padding: var(--size-xxsmall) 0 var(--size-xxsmall) 0;
1729 |   border-radius: var(--border-radius-small);
1730 |   margin: 0;
1731 |   z-index: 1000;
1732 |   overflow-x: overlay;
1733 |   overflow-y: auto;
1734 | }
1735 | 
1736 | .select-menu__menu--active {
1737 |   display: block;
1738 | }
1739 | 
1740 | .select-menu__menu::-webkit-scrollbar {
1741 |   width: 12px;
1742 |   background-color: transparent;
1743 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
1744 |   background-repeat: repeat;
1745 |   background-size: 100% auto;
1746 | }
1747 | 
1748 | .select-menu__menu::-webkit-scrollbar-track {
1749 |   border: solid 3px transparent;
1750 |   box-shadow: inset 0 0 10px 10px transparent;
1751 | }
1752 | 
1753 | .select-menu__menu::-webkit-scrollbar-thumb {
1754 |   border: solid 3px transparent;
1755 |   border-radius: 6px;
1756 |   box-shadow: inset 0 0 10px 10px rgba(255, 255, 255, 0.4);
1757 | }
1758 | 
1759 | .select-menu__item {
1760 |   align-items: center;
1761 |   color: var(--white);
1762 |   cursor: default;
1763 |   display: flex;
1764 |   font-family: var(--font-stack);
1765 |   font-size: var(--font-size-small);
1766 |   font-weight: var(--font-weight-normal);
1767 |   letter-spacing: var(--font-letter-spacing-neg-xsmall);
1768 |   line-height: var(--font-line-height);
1769 |   height: var(--size-small);
1770 |   padding: 0px var(--size-xsmall) 0px var(--size-xxsmall);
1771 |   -webkit-user-select: none;
1772 |      -moz-user-select: none;
1773 |       -ms-user-select: none;
1774 |           user-select: none;
1775 |   outline: none;
1776 | }
1777 | 
1778 | .select-menu__item--selected .select-menu__item-icon {
1779 |   opacity: 1.0;
1780 | }
1781 | 
1782 | .select-menu__item-label {
1783 |   overflow-x: hidden;
1784 |   white-space: nowrap;
1785 |   text-overflow: ellipsis;
1786 |   pointer-events: none;
1787 | }
1788 | 
1789 | .select-menu__item-icon {
1790 |   width: var(--size-xsmall);
1791 |   height: var(--size-xsmall);
1792 |   margin-right: var(--size-xxsmall);
1793 |   opacity: 0;
1794 |   pointer-events: none;
1795 |   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");
1796 |   background-repeat: no-repeat;
1797 |   background-position: center center;
1798 | }
1799 | 
1800 | .select-menu--highlight, .select-menu__item:hover, .select-menu__item:focus {
1801 |   background-color: var(--blue);
1802 | }
1803 | 
1804 | .select-menu__divider-label {
1805 |   font-size: var(--font-size-small);
1806 |   font-weight: var(--font-weight-normal);
1807 |   letter-spacing: var(--font-letter-spacing-neg-small);
1808 |   line-height: var(--line-height);
1809 |   display: flex;
1810 |   align-items: center;
1811 |   height: var(--size-small);
1812 |   padding: 0 var(--size-xxsmall) 0 var(--size-medium);
1813 |   color: var(--white4);
1814 |   margin-top: 0;
1815 | }
1816 | 
1817 | .select-menu__divider {
1818 |   background-color: var(--white2);
1819 |   display: block;
1820 |   height: 1px;
1821 |   margin: 8px 0 7px 0;
1822 | }
1823 | 
1824 | .switch {
1825 |   align-items: center;
1826 |   cursor: default;
1827 |   display: flex;
1828 |   height: var(--size-medium);
1829 |   position: relative;
1830 |   /*
1831 |     &__toggle:focus + &__label:before {
1832 |         box-shadow: 0 0 0 2px var(--blue);
1833 |     }
1834 |     */
1835 | }
1836 | 
1837 | .switch__toggle {
1838 |   opacity: 0;
1839 | }
1840 | 
1841 | .switch__toggle:checked + .switch__label:before {
1842 |   color: var(--black8);
1843 |   background-color: var(--black8-opaque);
1844 | }
1845 | 
1846 | .switch__toggle:checked + .switch__label:after {
1847 |   transform: translateX(12px);
1848 | }
1849 | 
1850 | .switch__toggle:checked:disabled + .switch__label:before {
1851 |   border: 1px solid var(--black);
1852 |   background-color: var(--black);
1853 | }
1854 | 
1855 | .switch__toggle:disabled + .switch__label {
1856 |   color: var(--black);
1857 |   opacity: 0.3;
1858 | }
1859 | 
1860 | .switch__label {
1861 |   align-items: center;
1862 |   color: var(--black8);
1863 |   display: flex;
1864 |   font-family: var(--font-stack);
1865 |   font-size: var(--font-size-xsmall);
1866 |   font-weight: var(--font-weight-normal);
1867 |   height: 100%;
1868 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1869 |   line-height: var(--font-line-height);
1870 |   margin-left: -16px;
1871 |   padding: 0 var(--size-xsmall) 0 calc(var(--size-xlarge) - 2px);
1872 |   -webkit-user-select: none;
1873 |      -moz-user-select: none;
1874 |       -ms-user-select: none;
1875 |           user-select: none;
1876 | }
1877 | 
1878 | .switch__label:before {
1879 |   background-color: var(--white);
1880 |   border: 1px solid var(--black8-opaque);
1881 |   border-radius: 6px;
1882 |   content: '';
1883 |   display: block;
1884 |   height: 10px;
1885 |   left: 8px;
1886 |   position: absolute;
1887 |   top: 10px;
1888 |   transition: background-color 0 0.2s;
1889 |   width: 22px;
1890 | }
1891 | 
1892 | .switch__label:after {
1893 |   background-color: var(--white);
1894 |   border: 1px solid var(--black8-opaque);
1895 |   border-radius: 50%;
1896 |   content: '';
1897 |   display: block;
1898 |   height: 10px;
1899 |   left: 8px;
1900 |   position: absolute;
1901 |   top: 10px;
1902 |   transition: transform 0.2s;
1903 |   width: 10px;
1904 | }
1905 | 
1906 | .textarea {
1907 |   font-size: var(--font-size-xsmall);
1908 |   font-weight: var(--font-weight-normal);
1909 |   letter-spacing: var(--font-letter-spacing-neg-xsmall);
1910 |   line-height: var(--line-height);
1911 |   position: relative;
1912 |   display: flex;
1913 |   overflow: visible;
1914 |   align-items: center;
1915 |   width: 100%;
1916 |   min-height: 62px;
1917 |   margin: 1px 0 1px 0;
1918 |   padding: var(--size-xxsmall) var(--size-xxxsmall) var(--size-xxsmall) var(--size-xxsmall);
1919 |   color: var(--black8);
1920 |   border: 1px solid var(--black1);
1921 |   border-radius: var(--border-radius-small);
1922 |   outline: none;
1923 |   background-color: var(--white);
1924 |   resize: none;
1925 |   overflow-y: auto;
1926 | }
1927 | 
1928 | .textarea:hover, .textarea:placeholder-shown:hover {
1929 |   color: var(--black8);
1930 |   border: 1px solid var(--black1);
1931 |   background-image: none;
1932 | }
1933 | 
1934 | .textarea::-moz-selection {
1935 |   color: var(--black);
1936 |   background-color: var(--blue3);
1937 | }
1938 | 
1939 | .textarea::selection {
1940 |   color: var(--black);
1941 |   background-color: var(--blue3);
1942 | }
1943 | 
1944 | .textarea::-webkit-input-placeholder {
1945 |   color: var(--black3);
1946 |   border: 1px solid transparent;
1947 | }
1948 | 
1949 | .textarea::-moz-placeholder {
1950 |   color: var(--black3);
1951 |   border: 1px solid transparent;
1952 | }
1953 | 
1954 | .textarea:-ms-input-placeholder {
1955 |   color: var(--black3);
1956 |   border: 1px solid transparent;
1957 | }
1958 | 
1959 | .textarea::-ms-input-placeholder {
1960 |   color: var(--black3);
1961 |   border: 1px solid transparent;
1962 | }
1963 | 
1964 | .textarea::placeholder {
1965 |   color: var(--black3);
1966 |   border: 1px solid transparent;
1967 | }
1968 | 
1969 | .textarea:focus:placeholder-shown {
1970 |   border: 1px solid var(--blue);
1971 |   outline: 1px solid var(--blue);
1972 |   outline-offset: -2px;
1973 | }
1974 | 
1975 | .textarea:active, .textarea:focus {
1976 |   color: var(--black);
1977 |   border: 1px solid var(--blue);
1978 |   outline: 1px solid var(--blue);
1979 |   outline-offset: -2px;
1980 | }
1981 | 
1982 | .textarea:disabled, .textarea:disabled:hover {
1983 |   position: relative;
1984 |   color: var(--black3);
1985 |   border: 1px solid transparent;
1986 | }
1987 | 
1988 | .textarea:disabled:active {
1989 |   outline: none;
1990 | }
1991 | 
1992 | .type {
1993 |   font-family: var(--font-stack);
1994 |   font-size: var(--font-size-xsmall);
1995 |   font-weight: var(--font-weight-normal);
1996 |   line-height: var(--font-line-height);
1997 |   letter-spacing: var(--font-letter-spacing-pos-xsmall);
1998 |   /* sizes */
1999 |   /* weights */
2000 |   /* letter spacing adjustments based pos/neg application */
2001 | }
2002 | 
2003 | .type--small {
2004 |   font-size: var(--font-size-small);
2005 |   letter-spacing: var(--font-letter-spacing-pos-small);
2006 | }
2007 | 
2008 | .type--large {
2009 |   font-size: var(--font-size-large);
2010 |   line-height: var(--font-line-height-large);
2011 |   letter-spacing: var(--font-letter-spacing-pos-large);
2012 | }
2013 | 
2014 | .type--xlarge {
2015 |   font-size: var(--font-size-xlarge);
2016 |   line-height: var(--font-line-height-large);
2017 |   letter-spacing: var(--font-letter-spacing-pos-xlarge);
2018 | }
2019 | 
2020 | .type--medium {
2021 |   font-weight: var(--font-weight-medium);
2022 | }
2023 | 
2024 | .type--bold {
2025 |   font-weight: var(--font-weight-bold);
2026 | }
2027 | 
2028 | .type--inverse {
2029 |   letter-spacing: var(--font-letter-spacing-neg-xsmall);
2030 | }
2031 | 
2032 | .type--inverse + .type--small {
2033 |   letter-spacing: var(--font-letter-spacing-neg-small);
2034 | }
2035 | 
2036 | .type--inverse + .type--large {
2037 |   letter-spacing: var(--font-letter-spacing-neg-large);
2038 | }
2039 | 
2040 | .type--inverse + .type--xlarge {
2041 |   letter-spacing: var(--font-letter-spacing-neg-xlarge);
2042 | }
2043 | 
2044 | .type--inline {
2045 |   display: inline-block;
2046 | }
2047 | 


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