From c3327a9a23810255a2265cdeeee1c892e6e22dd0 Mon Sep 17 00:00:00 2001
From: "Andrea N. Cardona" <andreancardona@gmail.com>
Date: Mon, 2 May 2022 12:10:20 -0500
Subject: [PATCH] feat: added thumbnaails missing 2

---
 carbon.yml                          |  59 ++++-------
 thumbnails/breakpoint.svg           | 149 ++++++++++++++++++++++++++++
 thumbnails/button-set.svg           |  15 +++
 thumbnails/clickable-tile.svg       |  33 ++++++
 thumbnails/composed-modal.svg       |  33 ++++++
 thumbnails/expandable-tile.svg      |  46 +++++++++
 thumbnails/fluid-form.svg           |  77 ++++++++++++++
 thumbnails/inline-notification.svg  |  23 +++++
 thumbnails/local-storage.svg        |  22 ++++
 thumbnails/ordered-list.svg         |  12 +++
 thumbnails/password-input.svg       |  27 +++++
 thumbnails/recursive-list.svg       |  14 +++
 thumbnails/selectable-tile.svg      |  25 +++++
 thumbnails/skeleton-placeholder.svg |  15 +++
 thumbnails/skeleton-text.svg        |  15 +++
 thumbnails/skeleton.svg             |  15 +++
 thumbnails/toast-notification.svg   |  34 +++++++
 thumbnails/tooltip-icon.svg         |  27 +++++
 thumbnails/truncate.svg             |   9 ++
 thumbnails/unordered-list.svg       |  12 +++
 20 files changed, 623 insertions(+), 39 deletions(-)
 create mode 100644 thumbnails/breakpoint.svg
 create mode 100644 thumbnails/button-set.svg
 create mode 100644 thumbnails/clickable-tile.svg
 create mode 100644 thumbnails/composed-modal.svg
 create mode 100644 thumbnails/expandable-tile.svg
 create mode 100644 thumbnails/fluid-form.svg
 create mode 100644 thumbnails/inline-notification.svg
 create mode 100644 thumbnails/local-storage.svg
 create mode 100644 thumbnails/ordered-list.svg
 create mode 100644 thumbnails/password-input.svg
 create mode 100644 thumbnails/recursive-list.svg
 create mode 100644 thumbnails/selectable-tile.svg
 create mode 100644 thumbnails/skeleton-placeholder.svg
 create mode 100644 thumbnails/skeleton-text.svg
 create mode 100644 thumbnails/skeleton.svg
 create mode 100644 thumbnails/toast-notification.svg
 create mode 100644 thumbnails/tooltip-icon.svg
 create mode 100644 thumbnails/truncate.svg
 create mode 100644 thumbnails/unordered-list.svg

diff --git a/carbon.yml b/carbon.yml
index e8347830..d78b9ba0 100644
--- a/carbon.yml
+++ b/carbon.yml
@@ -38,8 +38,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/breakpoint.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -64,8 +63,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/button-set.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -89,8 +87,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/clickable-tile.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -122,8 +119,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/composed-modal.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -146,8 +142,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/context-menu.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -198,8 +193,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/expandable-tile.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -223,8 +217,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/fluid-form.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -280,8 +273,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/inline-loading.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -308,13 +300,12 @@ assets:
         action: link
         url: https://carbon-components-svelte.onrender.com/components/Loading
   local-storage:
-    name: local-storage
+    name: Local storage
     status: stable
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/local-storage.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -356,8 +347,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/ordered-list.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -402,8 +392,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/password-input.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -469,8 +458,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/recursive-list.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -503,8 +491,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/selectable-tile.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -518,8 +505,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/skeleton-placeholder.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -534,8 +520,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/skeleton-text.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -628,8 +613,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/toast-notification.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -669,8 +653,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/tooltip-icon.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -692,8 +675,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/truncate.svg'
     demoLinks:
       - type: storybook
         name: Storybook
@@ -717,8 +699,7 @@ assets:
     type: component
     platform: web
     framework: svelte
-    #TODO: add thumbnail
-    thumbnailPath: ''
+    thumbnailPath: './thumbnails/unordered-list.svg'
     demoLinks:
       - type: storybook
         name: Storybook
diff --git a/thumbnails/breakpoint.svg b/thumbnails/breakpoint.svg
new file mode 100644
index 00000000..bd241c25
--- /dev/null
+++ b/thumbnails/breakpoint.svg
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>breakpoint</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="6" height="59"></rect>
+        <rect id="path-2" x="7" y="0" width="6" height="59"></rect>
+        <rect id="path-3" x="14" y="0" width="6" height="59"></rect>
+        <rect id="path-4" x="21" y="0" width="6" height="59"></rect>
+        <rect id="path-5" x="83" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-6" x="75" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-7" x="91" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-8" x="99" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-9" x="107" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-10" x="115" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-11" x="123" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-12" x="131" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-13" x="139" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-14" x="147" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-15" x="155" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-16" x="163" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-17" x="171" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-18" x="179" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-19" x="187" y="47" width="7.01886792" height="79"></rect>
+        <rect id="path-20" x="195" y="47" width="7.01886792" height="79"></rect>
+    </defs>
+    <g id="breakpoint" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2" transform="translate(235.000000, 71.000000)">
+            <g id="Rectangle">
+                <rect stroke="#A6C8FF" stroke-width="1" x="-0.5" y="-0.5" width="7" height="60"></rect>
+                <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="1" y="1" width="4" height="57"></rect>
+            </g>
+            <g id="Rectangle-Copy-16">
+                <rect stroke="#A6C8FF" stroke-width="1" x="6.5" y="-0.5" width="7" height="60"></rect>
+                <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="8" y="1" width="4" height="57"></rect>
+            </g>
+            <g id="Rectangle-Copy-17">
+                <rect stroke="#A6C8FF" stroke-width="1" x="13.5" y="-0.5" width="7" height="60"></rect>
+                <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="15" y="1" width="4" height="57"></rect>
+            </g>
+            <g id="Rectangle-Copy-18">
+                <rect stroke="#A6C8FF" stroke-width="1" x="20.5" y="-0.5" width="7" height="60"></rect>
+                <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="22" y="1" width="4" height="57"></rect>
+            </g>
+        </g>
+        <path d="M70.67648,133.51296 C62.8118292,133.51296 57.9196692,132.82344 56,131.4444 L56,131.4444 L56,129.31968 L220.13696,129.31968 L220.13696,131.4444 C218.217291,132.82344 213.325131,133.51296 205.46048,133.51296 Z" id="Combined-Shape" fill="#8D8D8D"></path>
+        <path d="M203.78324,44.8001358 L203.980938,127.76058 L72.68192,127.76058 L72.68192,44.9956895 L203.78324,44.8001358 Z" id="Rectangle-Copy-41" stroke="#8D8D8D" stroke-width="2.39616" fill="#FFFFFF"></path>
+        <g id="Group" transform="translate(233.000877, 69.000871)">
+            <path d="M26.3291381,1.33831983e-05 L26.4292831,0.00113663153 L26.5744704,0.00365980868 L26.6679972,0.00589910524 L26.7589831,0.00858279155 L26.8474891,0.0117097078 L26.9335758,0.0152786944 L27.0583029,0.021458519 L27.1779288,0.028626478 L27.2549468,0.0339521481 L27.3298496,0.0397140896 L27.4383711,0.0491724741 L27.5082521,0.0560200205 L27.5762309,0.0632997794 L27.6423682,0.0710105909 L27.7067248,0.0791512953 L27.7693616,0.0877207328 L27.8303393,0.0967177438 L27.8897188,0.106141168 C27.8994856,0.107747209 27.9091883,0.109370969 27.9188283,0.111012423 L27.9759245,0.121073294 L28.0315745,0.131557679 L28.0858391,0.142464418 L28.1387792,0.153792353 L28.1904556,0.165540322 L28.240929,0.177707167 L28.2902603,0.190291727 L28.3385103,0.203292843 L28.3622489,0.209949247 L28.4320097,0.230540103 L28.4773807,0.244783928 L28.5656694,0.274506169 L28.6087087,0.289982265 L28.6510924,0.305866799 L28.6928813,0.32215861 L28.7545825,0.347357437 L28.7951506,0.364662369 L28.8553055,0.39137544 L28.9148063,0.41899184 L28.9542114,0.437902688 L28.9934779,0.457212117 L29.0522506,0.48692106 C29.6724271,0.805221047 30.1591452,1.27231334 30.4908191,1.86748257 L30.5217764,1.92388543 L30.5712991,2.01836109 L30.5903793,2.05648639 L30.6182148,2.11421569 L30.6362468,2.1531479 L30.6538575,2.19250501 L30.6794808,2.25246502 L30.6960327,2.2931397 L30.7121591,2.33444355 L30.7278586,2.37643492 L30.7431301,2.41917218 L30.7579724,2.4627137 L30.7723843,2.50711782 C30.7747504,2.51459364 30.7770984,2.52210783 30.7794285,2.52966161 L30.7931924,2.57546908 L30.8065229,2.62228507 L30.8194188,2.67016795 L30.8318787,2.71917606 C30.833919,2.72744109 30.8359411,2.73575544 30.8379449,2.74412032 L30.8497488,2.79492573 L30.8611138,2.84700229 L30.8720387,2.90040835 L30.8825223,2.95520229 L30.8925634,3.01144246 L30.9021607,3.06918723 L30.9113132,3.12849495 L30.9200194,3.189424 L30.9282784,3.25203272 L30.9398253,3.34922289 L30.9469606,3.41628615 L30.9536443,3.48523337 L30.9628204,3.59231427 L30.9683699,3.66622669 L30.9734635,3.74222733 L30.9781001,3.82037455 L30.9822785,3.90072671 L30.9859974,3.98334218 L30.9892557,4.06827931 L30.9932768,4.20016579 L30.9953782,4.29116242 L30.9970148,4.38468498 L30.9981852,4.48079183 L30.999123,4.57954134 L30.999123,58.3683171 L30.9981852,58.5174506 L30.9970148,58.6135574 L30.9943856,58.7528904 L30.9920522,58.8426459 L30.9892557,58.9299631 L30.9859974,59.0149002 L30.9822785,59.0975157 L30.975839,59.2172134 L30.9683699,59.3320157 L30.9628204,59.4059281 L30.9568164,59.4778107 L30.9469606,59.5819562 L30.9398253,59.6490195 L30.9322397,59.7142572 L30.9242049,59.7777276 L30.9157221,59.8394892 L30.9067926,59.8996003 L30.8974176,59.9581193 L30.8875982,60.0151044 C30.8859247,60.0244774 30.8842327,60.0337889 30.8825223,60.0430401 L30.8720387,60.097834 L30.8611138,60.1512401 L30.8497488,60.2033167 L30.8379449,60.2541221 L30.8130253,60.3521529 L30.7999119,60.399495 L30.7863646,60.4457995 C30.7840706,60.4534336 30.7817585,60.461027 30.7794285,60.4685808 L30.7579724,60.5355287 L30.7431301,60.5790702 L30.7278586,60.6218075 L30.7121591,60.6637988 L30.6960327,60.7051027 L30.6625044,60.7858813 L30.6362468,60.8450945 L30.6182148,60.8840267 L30.5903793,60.941756 L30.5616025,60.9988576 L30.5217764,61.074357 L30.4908191,61.1307598 C30.1591452,61.7259291 29.6724271,62.1930213 29.0522506,62.5113213 L28.9934779,62.5410303 L28.9542114,62.5603397 L28.8950327,62.5885561 L28.7951506,62.63358 L28.7135718,62.6677855 L28.6510924,62.6923756 L28.6087087,62.7082601 L28.5656694,62.7237362 L28.4773807,62.7534585 L28.4320097,62.7677023 L28.3857399,62.781533 C28.3779499,62.7838037 28.37012,62.7860571 28.3622489,62.7882931 L28.3145167,62.8015021 L28.2657336,62.8142951 L28.2158389,62.8266709 L28.1647716,62.8386285 L28.1387792,62.84445 L28.0858391,62.855778 L28.0315745,62.8666847 L27.9759245,62.8771691 L27.9188283,62.88723 L27.860225,62.8968662 L27.800054,62.9060765 L27.7382544,62.9148599 L27.6747653,62.9232151 L27.6095259,62.931141 L27.5082521,62.9422224 L27.4383711,62.9490699 L27.3665269,62.9554841 L27.2549468,62.9642902 L27.1779288,62.9696159 L27.0987348,62.9745042 L27.0173041,62.9789538 L26.9335758,62.9829637 L26.8474891,62.9865327 L26.7589831,62.9896596 L26.6215552,62.9935186 L26.5267352,62.9955352 L26.4292831,62.9971058 L26.3291381,62.998229 L26.2262394,62.999129 L4.82449557,62.999129 L4.66909593,62.998229 L4.56895096,62.9971058 L4.42376365,62.9945826 L4.33023684,62.9923433 L4.23925089,62.9896596 L4.15074496,62.9865327 L4.06465824,62.9829637 L3.93993117,62.9767839 L3.82030524,62.9696159 L3.74328725,62.9642902 L3.66838439,62.9585283 L3.55986297,62.9490699 L3.48998191,62.9422224 L3.42200314,62.9349426 L3.35586585,62.9272318 L3.29150923,62.9190911 L3.22887245,62.9105217 L3.16789471,62.9015246 L3.1085152,62.8921012 C3.09874842,62.8904952 3.0890457,62.8888714 3.07940577,62.88723 L3.02230956,62.8771691 L2.96665953,62.8666847 L2.91239488,62.855778 L2.85945478,62.84445 L2.80777843,62.8327021 L2.757305,62.8205352 L2.70797369,62.8079507 L2.65972368,62.7949496 L2.63598516,62.7882931 L2.52085331,62.7534585 L2.43256463,62.7237362 L2.38952532,62.7082601 L2.30535269,62.6760838 L2.2436515,62.650885 L2.20308348,62.63358 L2.14292857,62.606867 L2.08342777,62.5792506 L2.0440226,62.5603397 L2.00475612,62.5410303 L1.94598338,62.5113213 C1.32580695,62.1930213 0.839088866,61.7259291 0.507414884,61.1307598 L0.476457662,61.074357 L0.426934898,60.9798813 L0.407854729,60.941756 L0.380019256,60.8840267 L0.361987223,60.8450945 L0.34437656,60.8057374 L0.318753275,60.7457774 L0.302201322,60.7051027 L0.27037542,60.6218075 L0.255103888,60.5790702 L0.225849707,60.4911246 C0.223483665,60.4836488 0.221135607,60.4761346 0.21880556,60.4685808 L0.205041601,60.4227733 L0.191711096,60.3759573 L0.178815253,60.3280744 L0.166355281,60.2790663 C0.164315009,60.2708013 0.162292948,60.2624869 0.160289124,60.2541221 L0.148485225,60.2033167 L0.137120218,60.1512401 L0.115711713,60.0430401 L0.105670633,59.9867999 L0.0960732788,59.9290552 L0.0869208592,59.8697474 L0.0782145825,59.8088184 L0.0699556573,59.7462097 L0.0584086971,59.6490195 L0.0445897592,59.513009 L0.0354135999,59.4059281 L0.0298641614,59.3320157 L0.0247705337,59.2560151 L0.0201339253,59.1778678 L0.0159555446,59.0975157 L0.0122366001,59.0149002 L0.00897830034,58.9299631 L0.00495720299,58.7980766 L0.00285580201,58.70708 L0.00121927538,58.6135574 L4.88315755e-05,58.5174506 L4.88315755e-05,4.48079183 L0.00121927538,4.38468498 L0.00384846873,4.24535201 L0.00618185372,4.15559647 L0.00897830034,4.06827931 L0.0122366001,3.98334218 L0.0159555446,3.90072671 L0.0223950266,3.78102897 L0.0298641614,3.66622669 L0.0354135999,3.59231427 L0.0414176406,3.5204317 L0.0512734376,3.41628615 L0.0584086971,3.34922289 L0.0659943292,3.28398521 L0.0740291255,3.22051475 L0.0825118774,3.15875316 L0.0914413766,3.09864207 L0.100816415,3.04012312 L0.110635783,2.98313795 C0.112309305,2.97376499 0.11400129,2.96445351 0.115711713,2.95520229 L0.126195311,2.90040835 L0.148485225,2.79492573 L0.172530708,2.6945277 L0.198322091,2.59874737 L0.211869474,2.55244293 C0.214163476,2.54480875 0.216475513,2.53721538 0.21880556,2.52966161 L0.240261581,2.4627137 L0.27037542,2.37643492 L0.286074967,2.33444355 L0.318753275,2.25246502 L0.335729619,2.21236113 L0.361987223,2.1531479 L0.380019256,2.11421569 L0.407854729,2.05648639 L0.436631485,1.99938483 L0.476457662,1.92388543 L0.507414884,1.86748257 C0.839088866,1.27231334 1.32580695,0.805221047 1.94598338,0.48692106 L2.00475612,0.457212117 L2.0440226,0.437902688 L2.10320136,0.409686245 L2.14292857,0.39137544 L2.20308348,0.364662369 L2.2436515,0.347357437 L2.28466227,0.330456883 L2.34714161,0.305866799 L2.38952532,0.289982265 L2.43256463,0.274506169 L2.52085331,0.244783928 L2.61249416,0.216709355 C2.62028408,0.214438717 2.62811399,0.21218534 2.63598516,0.209949247 L2.68371733,0.196740288 L2.73250038,0.183947305 L2.78239515,0.171571457 L2.83346244,0.159613905 L2.85945478,0.153792353 L2.91239488,0.142464418 L2.96665953,0.131557679 L3.02230956,0.121073294 L3.07940577,0.111012423 L3.13800898,0.101376227 L3.19818,0.0921658641 L3.25997966,0.0833824949 L3.32346876,0.075027279 L3.38870811,0.067101376 L3.48998191,0.0560200205 L3.55986297,0.0491724741 L3.63170714,0.0427582998 L3.74328725,0.0339521481 L3.82030524,0.028626478 L3.8994992,0.0237382392 L3.98092993,0.0192885914 L4.06465824,0.0152786944 L4.15074496,0.0117097078 L4.23925089,0.00858279155 L4.37667884,0.00472383576 L4.47149887,0.00270716897 L4.56895096,0.00113663153 L4.66909593,1.33831983e-05 L26.3291381,1.33831983e-05 Z M23.5680217,0.8983187 L23.5606616,0.972554286 L23.5594077,0.972434286 L23.5589446,1.09655315 C23.5475195,1.63631657 23.4792882,1.85654968 23.3606326,2.07841635 C23.2301115,2.32246968 23.038577,2.51400417 22.7945236,2.64452532 C22.5504703,2.77504647 22.3083936,2.84455429 21.6408243,2.84455429 L9.4366449,2.84455429 C8.76907567,2.84455429 8.52699893,2.77504647 8.2829456,2.64452532 C8.03889227,2.51400417 7.84735778,2.32246968 7.71683663,2.07841635 C7.5896268,1.84055464 7.52037376,1.60457052 7.51694174,0.974711094 L7.51680766,0.972554286 C7.51680766,0.791625802 7.38847009,0.640672165 7.21786232,0.605760764 L7.15217462,0.598154286 L4.8006114,0.598154286 L4.64364444,0.599021128 L4.54282086,0.600092786 L4.44496288,0.601596816 L4.34999225,0.603540174 L4.25783076,0.605929815 L4.16840017,0.608772694 L4.08162226,0.612075768 L3.9974188,0.61584599 L3.91571155,0.620090317 L3.8364223,0.624815704 L3.75947281,0.630029106 L3.68478485,0.635737479 L3.61228021,0.641947778 L3.54188064,0.648666958 L3.47350792,0.655901975 L3.40708382,0.663659784 L3.34253011,0.67194734 L3.27976857,0.680771599 L3.21872097,0.690139517 L3.15930908,0.700058047 C3.14953906,0.701757407 3.13983393,0.703479998 3.13019207,0.705225966 L3.07308706,0.715983458 L3.01742219,0.727308952 L2.96311923,0.739209404 L2.91009995,0.751691768 C2.90136604,0.753821041 2.89268234,0.75597485 2.88404725,0.75815334 L2.83280682,0.771521615 L2.78265449,0.78548919 L2.73351205,0.800063021 L2.70929509,0.807579456 L2.63794391,0.831057274 L2.59136175,0.847491607 L2.54547655,0.864560017 L2.45548417,0.900626893 C2.44065692,0.906854808 2.42590671,0.91319188 2.41122052,0.919639269 L2.32376716,0.959656673 L2.30207051,0.970081232 L2.26535712,0.988090612 L2.2136965,1.01415213 C1.70284579,1.27580355 1.30572855,1.65612576 1.0325226,2.14537137 L1.01457978,2.17780554 L0.987891004,2.22740299 L0.966768058,2.26808546 L0.926518572,2.35023666 L0.907378761,2.39184354 L0.888886725,2.43389669 C0.882829937,2.44799646 0.876880007,2.46218212 0.871035826,2.47646518 L0.853819431,2.51961808 L0.829170017,2.58559428 L0.81351085,2.63051037 L0.798462962,2.67625261 L0.784019718,2.72289006 L0.770174482,2.77049179 L0.756920618,2.81912687 L0.744251492,2.86886436 L0.738134132,2.8941681 L0.726329671,2.94568872 L0.715093358,2.99848442 C0.713267616,3.0073938 0.711465271,3.01635919 0.709686184,3.02538201 L0.699289653,3.08021985 L0.689444682,3.13650543 L0.680144635,3.19430784 L0.671382878,3.25369614 L0.663152775,3.31473939 L0.655447689,3.37750666 L0.648260987,3.44206703 L0.641586032,3.50848956 L0.635416189,3.57684331 L0.629744822,3.64719736 L0.624565297,3.71962077 L0.619870977,3.79418261 L0.617703696,3.83228702 L0.613724742,3.91018601 L0.610214406,3.99039609 L0.607166052,4.07298634 L0.604573043,4.15802582 L0.602428746,4.24558361 L0.600039116,4.38179318 L0.598621761,4.52405744 L0.598154286,58.3753646 L0.599059408,58.525693 L0.60017839,58.6222526 L0.601748838,58.7159719 L0.603778015,58.806926 L0.606273182,58.8951897 L0.609241603,58.9808381 L0.61269054,59.063946 L0.616627256,59.1445883 L0.621059012,59.2228399 L0.625993073,59.2987758 L0.631436699,59.372471 L0.637397153,59.4440002 L0.643881699,59.5134384 L0.650897598,59.5808606 L0.658452114,59.6463417 L0.666552507,59.7099566 L0.675206042,59.7717802 L0.684419981,59.8318874 L0.694201585,59.8903531 L0.704558118,59.9472523 C0.706332521,59.9566092 0.708131182,59.9659038 0.709954253,59.9751379 L0.733012424,60.0831385 L0.745438399,60.1351448 L0.758471985,60.1859218 C0.760695286,60.1942864 0.762944208,60.2026028 0.7652189,60.2108727 L0.779177518,60.259946 L0.793761901,60.3079773 L0.808979313,60.3550414 L0.824837016,60.4012132 L0.841342273,60.4465677 C0.846952758,60.461558 0.852672378,60.4764245 0.858502346,60.4911798 L0.876324497,60.5351244 L0.89481599,60.5784764 L0.913984086,60.6213108 L0.933836049,60.6637025 L0.975620623,60.7474572 L0.98650553,60.7682362 L1.0053102,60.8033969 L1.0325226,60.8528727 C1.30572855,61.3421183 1.70284579,61.7224405 2.2136965,61.984092 L2.24756295,62.0012759 L2.29935063,62.026836 L2.34182963,62.0470656 L2.42760864,62.0856128 L2.47105287,62.1039432 L2.51496309,62.1216531 C2.52968551,62.1274538 2.54449761,62.1331521 2.55941141,62.1387491 L2.60446994,62.1552373 C2.61203456,62.1579351 2.6196276,62.1606078 2.62725058,62.1632556 L2.67335966,62.1788443 L2.72025925,62.1938412 L2.76802147,62.2082527 L2.81671843,62.2220851 L2.86642226,62.2353447 L2.91720507,62.2480381 L2.99556013,62.26603 L3.04935591,62.2773353 L3.10448308,62.2880964 C3.1137859,62.2898449 3.1231472,62.291571 3.13256848,62.2932749 L3.18982796,62.3032317 L3.24859913,62.3126603 L3.3089541,62.321567 L3.370965,62.3299582 L3.43470394,62.3378403 L3.50024303,62.3452195 L3.56765441,62.3521022 L3.63701017,62.3584949 L3.70838245,62.3644038 L3.78184336,62.3698353 L3.85746501,62.3747958 L3.93531953,62.3792916 L3.97510665,62.3813672 L4.05644568,62.3851779 L4.14019788,62.3885397 L4.22643535,62.3914592 L4.31523021,62.3939425 L4.40665459,62.3959961 L4.54887924,62.3982847 L4.69742596,62.4000403 L26.3008112,62.4000403 L26.4493569,62.3982853 L26.5915787,62.3959981 L26.6829997,62.3939461 L26.8152207,62.3900617 L26.9001991,62.3869255 L27.0230928,62.3813856 L27.1020775,62.3771263 L27.1787906,62.3724068 L27.2533038,62.3672209 L27.325689,62.3615624 L27.396018,62.3554251 L27.4643628,62.3488027 L27.5307951,62.341689 L27.5953868,62.3340779 L27.6582098,62.325963 L27.7193359,62.3173381 L27.778837,62.3081971 C27.7886224,62.3066302 27.7983431,62.3050416 27.8080006,62.3034311 L27.8651989,62.2935041 L27.9209518,62.2830454 L27.9753311,62.2720487 L28.0284087,62.2605078 L28.0802565,62.2484165 C28.0887994,62.246355 28.0972939,62.2442704 28.1057417,62.2421625 L28.1558795,62.2292338 L28.2530763,62.2016724 L28.300279,62.1870272 L28.3922524,62.1559764 L28.4371667,62.1395585 L28.4593872,62.1311237 L28.5033999,62.1137984 L28.5899631,62.0773036 L28.6113517,62.0677911 L28.6538892,62.0482942 L28.6961668,62.0281629 L28.7845408,61.984092 C29.2953915,61.7224405 29.6925087,61.3421183 29.9657147,60.8528727 L29.9836575,60.8204386 L30.0103463,60.7708411 L30.0314692,60.7301586 L30.0717187,60.6480074 L30.1093506,60.5643474 C30.1154073,60.5502476 30.1213573,60.536062 30.1272015,60.5217789 L30.1444179,60.478626 L30.1527902,60.4568088 L30.1690673,60.4126498 L30.1847264,60.3677337 L30.2142176,60.275354 L30.2280628,60.2277523 L30.2413167,60.1791172 L30.2539858,60.1293797 C30.256049,60.1209944 30.258088,60.1125603 30.2601032,60.104076 L30.2719076,60.0525553 L30.2831439,59.9997596 C30.2849697,59.9908502 30.286772,59.9818848 30.2885511,59.972862 L30.2989476,59.9180242 L30.3087926,59.8617386 L30.3180927,59.8039362 L30.3268544,59.7445478 L30.3350845,59.6835046 L30.3427896,59.6207373 L30.3499763,59.5561769 L30.3566513,59.4897544 L30.3628211,59.4214006 L30.3684925,59.3510465 L30.373672,59.2786231 L30.3783663,59.2040612 C30.3791086,59.1914522 30.379831,59.1787512 30.3805336,59.1659568 L30.3845125,59.0880578 L30.3880229,59.0078477 L30.3910712,58.9252574 L30.3936642,58.8402179 L30.3958085,58.75266 L30.3981982,58.6164504 L30.3996155,58.4741861 L30.400083,58.325634 L30.400083,4.62237973 L30.3996156,4.52405815 L30.3981988,4.38179483 L30.3958106,4.2455879 L30.393668,4.15803326 L30.3896121,4.03140423 L30.3863374,3.95001981 L30.3805529,3.83232354 L30.3761054,3.75667925 L30.3711775,3.68321059 L30.3657626,3.61184874 L30.3598542,3.54252489 L30.3534459,3.47517022 L30.346531,3.40971593 L30.3391033,3.3460932 L30.331156,3.28423321 L30.3226827,3.22406714 L30.313677,3.1655262 L30.3041323,3.10854155 C30.3024963,3.09916998 30.3008375,3.08986039 30.2991558,3.08061134 L30.2887905,3.02583212 L30.2778699,2.97243717 L30.2663876,2.92035766 L30.2543371,2.8695248 L30.2417118,2.81986976 L30.2351816,2.79546242 L30.221682,2.74744509 L30.2075915,2.70043355 L30.1929035,2.65435899 L30.1776115,2.60915258 L30.161709,2.56474552 L30.1451896,2.52106899 L30.1280466,2.47805419 C30.1251371,2.47093637 30.1222014,2.46384326 30.1192393,2.45677342 L30.101149,2.41462217 L30.0824189,2.37296059 L30.0630425,2.33171989 L30.05311,2.31123586 L30.0327521,2.27049743 L30.0117318,2.23000784 L29.9929271,2.19484715 L29.9657147,2.14537137 C29.6925087,1.65612576 29.2953915,1.27580355 28.7845408,1.01415213 L28.7506743,0.996968153 L28.6988867,0.971408111 L28.6564077,0.951178505 L28.613679,0.931588341 L28.5706287,0.912631266 L28.5271844,0.894300923 L28.4832742,0.876590958 C28.4685518,0.870790327 28.4537397,0.865092033 28.4388259,0.859495017 L28.3937674,0.843006744 C28.3862027,0.840308985 28.3786097,0.83763628 28.3709867,0.834988498 L28.3248776,0.819399812 L28.2302159,0.789991432 L28.1815189,0.776159027 L28.1318151,0.762899338 L28.0810323,0.750206013 L28.0290984,0.738072694 C28.0203428,0.736096789 28.0115363,0.734143952 28.0026773,0.732214052 L27.9488815,0.720908829 L27.8937543,0.710147727 L27.865669,0.704969235 L27.8084095,0.695012398 L27.7496384,0.685583794 L27.6892834,0.676677068 L27.6272726,0.668285867 L27.5635337,0.660403834 L27.4979946,0.653024615 L27.4305833,0.646141855 L27.3612276,0.6397492 L27.2898554,0.633840294 L27.2163945,0.628408783 L27.1407729,0.623448312 L27.0629185,0.618952526 C27.0497527,0.618241599 27.0364908,0.61754977 27.0231314,0.616876904 L26.9417924,0.613066231 L26.8580403,0.609704355 L26.771803,0.606784923 L26.6830082,0.604301579 L26.5915839,0.602247969 L26.4493594,0.599959402 L26.3008129,0.598154286 L23.9252946,0.598154286 C23.7480639,0.603052853 23.6018148,0.730355045 23.5680217,0.8983187 Z" id="Frame" fill="#8D8D8D"></path>
+            <g id="system/status-bars/device-with-notch/02-dark" transform="translate(0.598163, 0.598169)">
+                <rect id="background" x="0" y="0" width="29.8019203" height="3.59424"></rect>
+                <g id="status-bar" transform="translate(0.000000, 0.748800)">
+                    <g id="status-icons" transform="translate(14.376960, 0.000000)">
+                        <rect id="container" transform="translate(7.712480, 0.898560) scale(-1, 1) translate(-7.712480, -0.898560) " x="0" y="0" width="15.4249603" height="1.79712"></rect>
+                        <g id="icons" transform="translate(9.169524, 0.299520)">
+                            <g id="battery" transform="translate(3.744000, 0.299520)" fill="#C6C6C6">
+                                <path d="M0.7488,0.59904 L0.07488,0.59904 C0.0335249179,0.59904 0,0.565515082 0,0.52416 L0,0.07488 C0,0.0335249179 0.0335249179,0 0.07488,0 L0.7488,0 C0.790155082,0 0.82368,0.0335249179 0.82368,0.07488 L0.82368,0.11232 L0.86112,0.11232 C0.902475082,0.11232 0.936,0.145844918 0.936,0.1872 L0.936,0.41184 C0.936,0.453195082 0.902475082,0.48672 0.86112,0.48672 L0.82368,0.48672 L0.82368,0.52416 C0.82368,0.565515082 0.790155082,0.59904 0.7488,0.59904 Z M0.07488,0.07488 L0.07488,0.52416 L0.7488,0.52416 L0.7488,0.41184 L0.86112,0.41184 L0.86112,0.1872 L0.7488,0.1872 L0.7488,0.07488 L0.07488,0.07488 Z M0.67392,0.14976 L0.67392,0.44928 L0.14976,0.44928 L0.14976,0.14976 L0.67392,0.14976 Z" id="Fill"></path>
+                            </g>
+                            <g id="wifi" transform="translate(1.797120, 0.000000)">
+                                <polygon id="background" points="0 1.19808 1.19808 1.19808 1.19808 0 0 0"></polygon>
+                                <path d="M0.59904,0.86112 C0.64037376,0.86112 0.67392,0.89466624 0.67392,0.936 C0.67392,0.97733376 0.64037376,1.01088 0.59904,1.01088 C0.55770624,1.01088 0.52416,0.97733376 0.52416,0.936 C0.52416,0.89466624 0.55770624,0.86112 0.59904,0.86112" id="fill-1" fill="#C6C6C6"></path>
+                                <path d="M0.392004288,0.720098496 L0.444944448,0.773001216 C0.531093888,0.690970176 0.666439488,0.690782976 0.752776128,0.772626816 L0.805678848,0.719724096 C0.690139008,0.608564736 0.507356928,0.608751936 0.392004288,0.720098496" id="fill-3" fill="#C6C6C6"></path>
+                                <path d="M0.23321376,0.561326688 L0.28615392,0.614266848 C0.4599504,0.444326688 0.73753056,0.444176928 0.91155168,0.613892448 L0.9644544,0.560952288 C0.76123008,0.361996128 0.43621344,0.362145888 0.23321376,0.561326688 Z" id="fill-5" fill="#C6C6C6"></path>
+                                <path d="M1.1232,0.402150528 C0.83251584,0.115547328 0.36556416,0.115547328 0.07488,0.402150528 L0.07488,0.402974208 L0.12744576,0.455577408 C0.38877696,0.197728128 0.80874144,0.197578368 1.0702224,0.455203008 L1.1232,0.402225408 L1.1232,0.402150528 Z" id="fill-7" fill="#C6C6C6"></path>
+                            </g>
+                            <g id="signal">
+                                <polygon id="background" points="0 1.19808 1.19808 1.19808 1.19808 0 0 0"></polygon>
+                                <polygon id="fill-2" fill="#C6C6C6" points="0.14976 0.97344 0.24976 0.97344 0.24976 0.7488 0.14976 0.7488"></polygon>
+                                <polygon id="fill-3" fill="#C6C6C6" points="0.67392 0.97344 0.77392 0.97344 0.77392 0.41184 0.67392 0.41184"></polygon>
+                                <polygon id="fill-4" fill="#C6C6C6" points="0.97344 0.97344 1.07344 0.97344 1.07344 0.22464 0.97344 0.22464"></polygon>
+                                <polygon id="fill-5" fill="#C6C6C6" points="0.41184 0.97344 0.51184 0.97344 0.51184 0.59904 0.41184 0.59904"></polygon>
+                            </g>
+                        </g>
+                    </g>
+                    <g id="time">
+                        <rect id="container" x="0" y="0" width="14.9009602" height="1.79712"></rect>
+                        <text font-family="IBMPlexSans, IBM Plex Sans" font-size="1.04832" font-weight="normal" line-spacing="1.34784" letter-spacing="0.0119807997" fill="#FFFFFF">
+                            <tspan x="2.41524936" y="1.22464">19:11</tspan>
+                        </text>
+                    </g>
+                </g>
+            </g>
+        </g>
+        <g id="Rectangle-Copy">
+            <rect stroke="#A6C8FF" stroke-width="1" x="82.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="84" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-19">
+            <rect stroke="#A6C8FF" stroke-width="1" x="74.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="76" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-2">
+            <rect stroke="#A6C8FF" stroke-width="1" x="90.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="92" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-3">
+            <rect stroke="#A6C8FF" stroke-width="1" x="98.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="100" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-4">
+            <rect stroke="#A6C8FF" stroke-width="1" x="106.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="108" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-5">
+            <rect stroke="#A6C8FF" stroke-width="1" x="114.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="116" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-6">
+            <rect stroke="#A6C8FF" stroke-width="1" x="122.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="124" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-7">
+            <rect stroke="#A6C8FF" stroke-width="1" x="130.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="132" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-8">
+            <rect stroke="#A6C8FF" stroke-width="1" x="138.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="140" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-9">
+            <rect stroke="#A6C8FF" stroke-width="1" x="146.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="148" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-10">
+            <rect stroke="#A6C8FF" stroke-width="1" x="154.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="156" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-11">
+            <rect stroke="#A6C8FF" stroke-width="1" x="162.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="164" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-12">
+            <rect stroke="#A6C8FF" stroke-width="1" x="170.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="172" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-13">
+            <rect stroke="#A6C8FF" stroke-width="1" x="178.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="180" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-14">
+            <rect stroke="#A6C8FF" stroke-width="1" x="186.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="188" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <g id="Rectangle-Copy-15">
+            <rect stroke="#A6C8FF" stroke-width="1" x="194.5" y="46.5" width="8.01886792" height="80"></rect>
+            <rect stroke="#EDF5FF" stroke-width="2" stroke-linejoin="square" x="196" y="48" width="5.01886792" height="77"></rect>
+        </g>
+        <rect id="Rectangle" stroke="#979797" x="232.5" y="68.5" width="32" height="64" rx="4"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/button-set.svg b/thumbnails/button-set.svg
new file mode 100644
index 00000000..83df5531
--- /dev/null
+++ b/thumbnails/button-set.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>button-set</title>
+    <g id="button-set" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-Copy-2" fill="#393939" x="56" y="74" width="104" height="32"></rect>
+        <rect id="Rectangle-Copy-4" fill="#FFFFFF" x="159" y="74" width="1" height="32"></rect>
+        <rect id="Rectangle-Copy-3" fill="#0E62FE" x="160" y="74" width="104" height="32"></rect>
+        <text id="Cancel" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#F4F4F4">
+            <tspan x="68" y="95">Cancel</tspan>
+        </text>
+        <text id="Submit" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#FFFFFF">
+            <tspan x="172" y="95">Submit</tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/clickable-tile.svg b/thumbnails/clickable-tile.svg
new file mode 100644
index 00000000..c1431493
--- /dev/null
+++ b/thumbnails/clickable-tile.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>clickable-tile</title>
+    <defs>
+        <polygon id="path-1" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
+        <filter x="-25.6%" y="-15.2%" width="156.3%" height="137.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-3" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
+        <filter x="-13.7%" y="-5.3%" width="127.4%" height="117.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="clickable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="72" y="41" width="176" height="98"></rect>
+        <rect id="Rectangle-Copy-4" fill="#A8A8A8" x="85" y="54" width="90" height="8"></rect>
+        <g id="Group" transform="translate(212.000000, 97.000000)">
+            <g id="Soft-Shadow" fill="black" fill-opacity="1">
+                <use filter="url(#filter-2)" xlink:href="#path-1"></use>
+            </g>
+            <g id="Hard-Shadow" fill="black" fill-opacity="1">
+                <use filter="url(#filter-4)" xlink:href="#path-3"></use>
+            </g>
+            <polygon id="Ouline" fill="#FFFFFF" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
+            <polygon id="Arrow" fill="#000000" points="13.7560605 14.4 18 14.4 8.4 4.8 8.4 18 11.4024434 14.9975566 14.1576509 21.4884188 16.3668625 20.5506641"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/composed-modal.svg b/thumbnails/composed-modal.svg
new file mode 100644
index 00000000..e452facc
--- /dev/null
+++ b/thumbnails/composed-modal.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>composed-modal</title>
+    <defs>
+        <rect id="path-1" x="60" y="44" width="200" height="90"></rect>
+        <filter x="-5.0%" y="-8.9%" width="110.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.862745106   0 0 0 0 0.862745106   0 0 0 0 0.862745106  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-3" points="6.53025 6 9 3.53025 8.46975 3 6 5.46975 3.53025 3 3 3.53025 5.46975 6 3 8.46975 3.53025 9 6 6.53025 8.46975 9 9 8.46975"></polygon>
+    </defs>
+    <g id="composed-modal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rectangle-Copy" fill="black" fill-opacity="1">
+            <use filter="url(#filter-2)" xlink:href="#path-1"></use>
+        </g>
+        <g id="color/gray/10-copy-11" transform="translate(60.000000, 44.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="200" height="90"></rect>
+        </g>
+        <g id="checkbox" transform="translate(69.000000, 76.000000)" fill="#161616">
+            <path d="M9.75,1.5 L2.25,1.5 C1.83578644,1.5 1.5,1.83578644 1.5,2.25 L1.5,9.75 C1.5,10.1642136 1.83578644,10.5 2.25,10.5 L9.75,10.5 C10.1642136,10.5 10.5,10.1642136 10.5,9.75 L10.5,2.25 C10.5,1.83578644 10.1642136,1.5 9.75,1.5 Z M2.25,9.75 L2.25,2.25 L9.75,2.25 L9.75,9.75 L2.25,9.75 Z" id="Fill"></path>
+        </g>
+        <g id="icon/navigation/close/16-copy-3" transform="translate(239.000000, 53.000000)">
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#000000" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Rectangle-Copy-5" fill="#8D8D8D" x="70" y="57" width="58" height="7"></rect>
+        <rect id="Rectangle-Copy-20" fill="#C6C6C6" x="160" y="108" width="101" height="26"></rect>
+        <rect id="Rectangle-Copy-21" fill="#A8A8A8" x="88" y="79" width="96" height="5"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/expandable-tile.svg b/thumbnails/expandable-tile.svg
new file mode 100644
index 00000000..81e97609
--- /dev/null
+++ b/thumbnails/expandable-tile.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>expandable-tile</title>
+    <defs>
+        <filter x="-54.7%" y="-48.6%" width="209.4%" height="197.2%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <polygon id="path-2" points="5 0 10 5 9.293 5.707 5 1.414 0.707 5.707 0 5"></polygon>
+    </defs>
+    <g id="expandable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(72.000000, 33.000000)">
+            <rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="0" y="8" width="176" height="98"></rect>
+            <rect id="Rectangle-Copy-4" fill="#A8A8A8" x="13" y="21" width="90" height="8"></rect>
+            <rect id="Rectangle-Copy-5" x="13" y="0" width="90" height="8"></rect>
+            <g transform="translate(153.000000, 90.000000)" fill="#FFFFFF" id="hand-cursor">
+                <g filter="url(#filter-1)" transform="translate(4.000000, 2.000000)">
+                    <polygon id="Rectangle" points="7 4 10 4 10 8 7 8"></polygon>
+                    <polygon id="Rectangle-Copy" points="10 7 13 7 13 11 10 11"></polygon>
+                    <path d="M13.2815687,10.7869723 C13.2793405,10.8536671 13.2719207,10.9325894 13.2592869,11.023739 C13.2280924,11.2519911 13.1705384,11.4609684 13.0866028,11.6506708 C12.819221,12.2583277 12.3420114,12.5621673 11.6549961,12.5621673 C11.2561516,12.5621673 10.9546118,12.5695705 10.7503544,12.5843989 L10.5631872,12.5843989 L10.5631872,11.6506708 L10.5631872,9.9832991 M10.5631872,11.6506708 C10.560959,11.7173657 10.5535391,11.7962879 10.5409053,11.8874376 C10.5097108,12.1156896 10.4521569,12.3246669 10.3682213,12.5143693 C10.1008395,13.1220485 9.62362982,13.4258659 8.93661459,13.4258659 C8.53777008,13.4258659 8.23623026,13.4332912 8.03197286,13.4480975 L7.8448056,13.4480975 L7.8448056,10.8469976 M7.8448056,13.4480975 L7.8448056,16.2292735 C7.84331272,16.2959684 7.83662817,16.3748906 7.82475197,16.466018 C7.79578561,16.6942701 7.74266576,16.9032474 7.66543698,17.0929498 C7.43444139,17.6605898 7.0337475,17.9629621 6.463333,18 C5.89365381,17.9629621 5.49333871,17.6605898 5.26234312,17.0929498 C5.18509206,16.9032474 5.1319945,16.6942479 5.10302813,16.466018 C5.09112964,16.3748684 5.08408859,16.2959684 5.08186041,16.2292735 L5.08186041,7.93576665 C3.06312787,10.4279316 0.851739859,10.1112215 4.4408921e-15,8.1137102 C2.40124447,5.97131542 4.45574138,3.84533708 5.26234312,0 L14.1505595,0.0222316227 C14.4558204,0.863320603 14.8049096,1.37327819 15.1978049,2.81166418 C15.5914577,4.25005017 15.8569679,5.81524778 15.9943798,8.51490042 L15.9999503,9.64871318 C16.0006856,9.72430069 15.9932657,9.81916303 15.9776685,9.93327795 C15.9464739,10.16153 15.88892,10.3705073 15.8049844,10.5602097 C15.5376026,11.1678666 15.0603929,11.4717062 14.3733777,11.4717062 C13.9745332,11.4717062 13.6729934,11.4791094 13.468736,11.4939379 L13.2815687,11.5161695 L13.2815687,10.7869723 C13.2815687,10.7780796 13.2782264,9.23853974 13.2782264,9.23853974 L13.2815687,8.89283801 M13.2715419,8.69386498 L13.3043009,9.23853974" id="Shape" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 9.000000) scale(1, -1) translate(-8.000000, -9.000000) "></path>
+                </g>
+            </g>
+            <g transform="translate(144.000000, 79.000000)" id="icon/navigation/chevron/up/16-copy-46">
+                <g transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) " id="Group">
+                    <g id="chevron--up" transform="translate(3.000000, 5.000000)">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-2"></use>
+                        <g id="Group" mask="url(#mask-3)">
+                            <g transform="translate(-3.000000, -5.000000)" id="icon-color">
+                                <rect id="Rectangle" fill="#000000" x="0" y="0" width="40" height="40"></rect>
+                            </g>
+                        </g>
+                    </g>
+                    <polygon id="transparent-rectangle" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " points="1.77635684e-15 -7.90206676e-15 16 -7.90206676e-15 16 16 1.77635684e-15 16"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/fluid-form.svg b/thumbnails/fluid-form.svg
new file mode 100644
index 00000000..5946428e
--- /dev/null
+++ b/thumbnails/fluid-form.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>form</title>
+    <defs>
+        <polygon id="path-1" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
+        <polygon id="path-3" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
+        <polygon id="path-5" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
+    </defs>
+    <g id="form" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="color/gray/10-copy-12" transform="translate(90.000000, 32.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="152" height="116"></rect>
+        </g>
+        <rect id="Rectangle-Copy-6" fill="#A8A8A8" x="99" y="41" width="48.59854" height="5"></rect>
+        <rect id="Rectangle-Copy-14" fill="#C6C6C6" x="99" y="52" width="89" height="3"></rect>
+        <rect id="Rectangle-Copy-26" fill="#C6C6C6" x="99" y="58" width="72.7591241" height="3"></rect>
+        <rect id="Rectangle-25-Copy-22" stroke="#006AFF" stroke-width="1.14" fill="#FFFFFF" x="90.57" y="72.57" width="150.86" height="14.86"></rect>
+        <rect id="Rectangle-Copy-27" fill="#C6C6C6" x="99" y="78" width="62.9489051" height="3"></rect>
+        <rect id="Rectangle-Copy-28" fill="#C6C6C6" x="99" y="95" width="33.948905" height="3"></rect>
+        <rect id="Rectangle-Copy-30" fill="#C6C6C6" x="111" y="112" width="38.948905" height="3"></rect>
+        <rect id="Rectangle-Copy-29" fill="#C6C6C6" x="172" y="95" width="33.948905" height="3"></rect>
+        <rect id="Rectangle-Copy-56" fill="#C6C6C6" x="91" y="104" width="151" height="1"></rect>
+        <rect id="Rectangle-Copy-57" fill="#C6C6C6" x="163" y="88" width="1" height="16"></rect>
+        <g id="Group" transform="translate(228.000000, 76.000000)">
+            <g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
+                <g id="chevron--up" transform="translate(1.500000, 2.500000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <g id="Group" mask="url(#mask-2)">
+                        <g transform="translate(-1.500000, -2.500000)" id="icon-color">
+                            <rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
+                        </g>
+                    </g>
+                </g>
+                <polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
+            </g>
+        </g>
+        <g id="Group" transform="translate(228.000000, 92.000000)">
+            <g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
+                <g id="chevron--up" transform="translate(1.500000, 2.500000)">
+                    <mask id="mask-4" fill="white">
+                        <use xlink:href="#path-3"></use>
+                    </mask>
+                    <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
+                    <g id="Group" mask="url(#mask-4)">
+                        <g transform="translate(-1.500000, -2.500000)" id="icon-color">
+                            <rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
+                        </g>
+                    </g>
+                </g>
+                <polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
+            </g>
+        </g>
+        <g id="Group" transform="translate(149.000000, 92.000000)">
+            <g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
+                <g id="chevron--up" transform="translate(1.500000, 2.500000)">
+                    <mask id="mask-6" fill="white">
+                        <use xlink:href="#path-5"></use>
+                    </mask>
+                    <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-5"></use>
+                    <g id="Group" mask="url(#mask-6)">
+                        <g transform="translate(-1.500000, -2.500000)" id="icon-color">
+                            <rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
+                        </g>
+                    </g>
+                </g>
+                <polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
+            </g>
+        </g>
+        <rect id="Rectangle-Copy-24" fill="#0F6DFF" x="166" y="130" width="76" height="18"></rect>
+        <rect id="Rectangle-Copy-25" fill="#3D3D3D" x="90" y="130" width="75" height="18"></rect>
+        <g id="checkbox" transform="translate(97.000000, 109.000000)" fill="#161616">
+            <path d="M7.3125,1.125 L1.6875,1.125 C1.37683983,1.125 1.125,1.37683983 1.125,1.6875 L1.125,7.3125 C1.125,7.62316017 1.37683983,7.875 1.6875,7.875 L7.3125,7.875 C7.62316017,7.875 7.875,7.62316017 7.875,7.3125 L7.875,1.6875 C7.875,1.37683983 7.62316017,1.125 7.3125,1.125 Z M1.6875,7.3125 L1.6875,1.6875 L7.3125,1.6875 L7.3125,7.3125 L1.6875,7.3125 Z" id="Fill"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/inline-notification.svg b/thumbnails/inline-notification.svg
new file mode 100644
index 00000000..12759c86
--- /dev/null
+++ b/thumbnails/inline-notification.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>inline-notification</title>
+    <defs>
+        <circle id="path-1" cx="5" cy="5" r="4.375"></circle>
+        <polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
+    </defs>
+    <g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/local-storage.svg b/thumbnails/local-storage.svg
new file mode 100644
index 00000000..6e606b2a
--- /dev/null
+++ b/thumbnails/local-storage.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>local-storage</title>
+    <g id="local-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Button" transform="translate(86.000000, 106.000000)">
+            <rect id="Background" fill="#0F62FE" x="0" y="0" width="148" height="32"></rect>
+            <text id="Label" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="16" letter-spacing="0.137142854" fill="#FFFFFF">
+                <tspan x="16" y="20">Clear storage</tspan>
+            </text>
+        </g>
+        <g id="Group" transform="translate(86.000000, 60.000000)">
+            <g>
+                <rect id="pill" fill="#8D8D8D" x="0" y="0" width="32" height="16" rx="8"></rect>
+                <circle id="handle" fill="#FFFFFF" cx="8" cy="8" r="5"></circle>
+            </g>
+            <text id="Text" font-family="IBMPlexSans, IBM Plex Sans" font-size="14" font-weight="normal" line-spacing="18" letter-spacing="0.159999996" fill="#161616">
+                <tspan x="40" y="13">Off</tspan>
+            </text>
+        </g>
+        <rect id="Rectangle-3-Copy-6" fill="#A8A8A8" opacity="0.754768008" x="86" y="42" width="70" height="5"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/ordered-list.svg b/thumbnails/ordered-list.svg
new file mode 100644
index 00000000..3ccbbf35
--- /dev/null
+++ b/thumbnails/ordered-list.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ordered-list</title>
+    <g id="ordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
+        <text id="1.-Ordered-List-2.-O" fill="#161616">
+            <tspan x="113" y="70">1.    Ordered List</tspan>
+            <tspan x="113" y="86">2.    Ordered List </tspan>
+            <tspan x="113" y="102">3.    Ordered List</tspan>
+            <tspan x="113" y="118">4.    Ordered List </tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/password-input.svg b/thumbnails/password-input.svg
new file mode 100644
index 00000000..d1351839
--- /dev/null
+++ b/thumbnails/password-input.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>password-input</title>
+    <defs>
+        <path d="M15.47,7.83 C14.266932,4.72169147 11.330606,2.626562 8,2.5 C4.66939395,2.626562 1.73306803,4.72169147 0.53,7.83 C0.490283624,7.9398538 0.490283624,8.0601462 0.53,8.17 C1.73306803,11.2783085 4.66939395,13.373438 8,13.5 C11.330606,13.373438 14.266932,11.2783085 15.47,8.17 C15.5097164,8.0601462 15.5097164,7.9398538 15.47,7.83 Z M8,12.5 C5.35,12.5 2.55,10.535 1.535,8 C2.55,5.465 5.35,3.5 8,3.5 C10.65,3.5 13.45,5.465 14.465,8 C13.45,10.535 10.65,12.5 8,12.5 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,8.53043298 9.78928632,9.03914081 9.41421356,9.41421356 C9.03914081,9.78928632 8.53043298,10 8,10 Z" id="path-1"></path>
+    </defs>
+    <g id="password-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-21" transform="translate(56.000000, 75.000000)">
+            <rect id="Rectangle-11-Copy" fill="#F3F3F3" x="0" y="0" width="208" height="32"></rect>
+            <line x1="0" y1="31.5" x2="208" y2="31.5" id="Path-3-Copy-8" stroke="#8C8C8C"></line>
+        </g>
+        <g id="Group" transform="translate(234.000000, 83.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
+        </g>
+        <circle id="Oval" fill="#161616" cx="71.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy" fill="#161616" cx="80.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-2" fill="#161616" cx="89.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-3" fill="#161616" cx="98.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-4" fill="#161616" cx="107.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-5" fill="#161616" cx="116.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-6" fill="#161616" cx="125.5" cy="91.5" r="2.5"></circle>
+        <circle id="Oval-Copy-7" fill="#161616" cx="134.5" cy="91.5" r="2.5"></circle>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/recursive-list.svg b/thumbnails/recursive-list.svg
new file mode 100644
index 00000000..8de90a74
--- /dev/null
+++ b/thumbnails/recursive-list.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>recursive-list</title>
+    <g id="recursive-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
+        <text id="–-Item-1-•-Item-1a-•" fill="#161616">
+            <tspan x="120" y="54">–  Item 1</tspan>
+            <tspan x="120" y="70"> 	• Item 1a</tspan>
+            <tspan x="120" y="86">	• Item 1b</tspan>
+            <tspan x="120" y="102">–  Item 2</tspan>
+            <tspan x="120" y="118"> 	• Item 2a</tspan>
+            <tspan x="120" y="134">	• Item 2b</tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/selectable-tile.svg b/thumbnails/selectable-tile.svg
new file mode 100644
index 00000000..88235aa3
--- /dev/null
+++ b/thumbnails/selectable-tile.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>selectable-tile</title>
+    <defs>
+        <circle id="path-1" cx="8" cy="8" r="7"></circle>
+        <polygon id="path-3" points="7 10.75 4.5 8.25 5.295 7.5 7 9.175 10.705 5.5 11.5 6.29"></polygon>
+    </defs>
+    <g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(72.000000, 41.000000)" fill="#F3F3F3">
+            <rect id="Rectangle" x="0" y="0" width="176" height="98"></rect>
+            <rect id="Rectangle" stroke="#161616" x="0" y="0" width="176" height="98"></rect>
+        </g>
+        <rect id="Rectangle-Copy-4" fill="#C6C6C6" x="86" y="55" width="90" height="8"></rect>
+        <g id="Group" transform="translate(222.000000, 51.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/skeleton-placeholder.svg b/thumbnails/skeleton-placeholder.svg
new file mode 100644
index 00000000..3a5d34a1
--- /dev/null
+++ b/thumbnails/skeleton-placeholder.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton-placeholder</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/skeleton-text.svg b/thumbnails/skeleton-text.svg
new file mode 100644
index 00000000..f0a5ff7f
--- /dev/null
+++ b/thumbnails/skeleton-text.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton-text</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/skeleton.svg b/thumbnails/skeleton.svg
new file mode 100644
index 00000000..d5fb6b5f
--- /dev/null
+++ b/thumbnails/skeleton.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/toast-notification.svg b/thumbnails/toast-notification.svg
new file mode 100644
index 00000000..4c481f9a
--- /dev/null
+++ b/thumbnails/toast-notification.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>toast-notification</title>
+    <defs>
+        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
+        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
+    </defs>
+    <g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
+        <rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
+        <g id="Group" transform="translate(73.000000, 68.000000)">
+            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
+                <g id="error--filled" transform="translate(0.875000, 0.875000)">
+                    <g id="icon-2">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
+                    </g>
+                </g>
+                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
+            </g>
+        </g>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
+        <rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
+        <rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/tooltip-icon.svg b/thumbnails/tooltip-icon.svg
new file mode 100644
index 00000000..e4fa00c3
--- /dev/null
+++ b/thumbnails/tooltip-icon.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tooltip-icon</title>
+    <defs>
+        <path d="M7.03125,8.90625 L7.03125,4.6875 L5.15625,4.6875 L5.15625,5.625 L6.09375,5.625 L6.09375,8.90625 L4.6875,8.90625 L4.6875,9.84375 L8.4375,9.84375 L8.4375,8.90625 L7.03125,8.90625 L7.03125,8.90625 Z M6.5625,2.34375 C6.17417479,2.34375 5.859375,2.65854979 5.859375,3.046875 C5.859375,3.43520021 6.17417479,3.75 6.5625,3.75 C6.95082521,3.75 7.265625,3.43520021 7.265625,3.046875 C7.265625,2.65854979 6.95082521,2.34375 6.5625,2.34375 L6.5625,2.34375 Z M6.5625,13.125 C2.93813133,13.125 0,10.1868687 0,6.5625 C0,2.93813133 2.93813133,0 6.5625,0 C10.1868687,0 13.125,2.93813133 13.125,6.5625 C13.1209442,10.1851874 10.1851874,13.1209442 6.5625,13.125 Z M6.5625,0.9375 C3.45589828,0.9375 0.9375,3.45589828 0.9375,6.5625 C0.9375,9.66910172 3.45589828,12.1875 6.5625,12.1875 C9.66910172,12.1875 12.1875,9.66910172 12.1875,6.5625 C12.1840384,3.45733327 9.66766673,0.940961641 6.5625,0.9375 Z" id="path-1"></path>
+    </defs>
+    <g id="tooltip-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-56-Copy" transform="translate(100.000000, 78.700000)">
+            <path d="M80.3,-38.1 C81.1284271,-38.1 81.8,-37.4284271 81.8,-36.6 L81.8,54.4 C81.8,55.2284271 81.1284271,55.9 80.3,55.9 L75.161,55.9 L70.4045455,61.1 L65.647,55.9 L60.3,55.9 C59.4715729,55.9 58.8,55.2284271 58.8,54.4 L58.8,-36.6 C58.8,-37.4284271 59.4715729,-38.1 60.3,-38.1 L80.3,-38.1 Z" id="Rectangle-24" fill="#3D3D3D" transform="translate(70.300000, 11.500000) rotate(90.000000) translate(-70.300000, -11.500000) "></path>
+            <g id="Group" transform="translate(0.000000, 4.300000)">
+                <g id="information" transform="translate(0.937500, 0.937500)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <g id="Group" mask="url(#mask-2)">
+                        <g transform="translate(-0.937500, -0.937500)" id="icon-color">
+                            <rect id="Rectangle-3-Copy" fill="#161616" x="0" y="0" width="37.5" height="37.5"></rect>
+                        </g>
+                    </g>
+                </g>
+                <rect id="transparent-rectangle" x="0" y="0" width="15" height="15"></rect>
+            </g>
+            <rect id="Rectangle-Copy" fill="#BEBEBE" x="35" y="9.3" width="59" height="5"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/truncate.svg b/thumbnails/truncate.svg
new file mode 100644
index 00000000..6abc4af3
--- /dev/null
+++ b/thumbnails/truncate.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>truncate</title>
+    <g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="22">
+        <text id="Truncate…" fill="#161616">
+            <tspan x="131" y="92">Truncate…</tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/thumbnails/unordered-list.svg b/thumbnails/unordered-list.svg
new file mode 100644
index 00000000..5690b6e6
--- /dev/null
+++ b/thumbnails/unordered-list.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>unordered-list</title>
+    <g id="unordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
+        <text id="–-Unordered-List-–-U" fill="#161616">
+            <tspan x="113" y="70">–  Unordered List</tspan>
+            <tspan x="113" y="86">–  Unordered List</tspan>
+            <tspan x="113" y="102">–  Unordered List</tspan>
+            <tspan x="113" y="118">–  Unordered List </tspan>
+        </text>
+    </g>
+</svg>
\ No newline at end of file