@salesforcedevs/dx-components 0.0.0

package/src/assets/svg/salesforce-logo-corporate.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 273 191" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Path</title>
+    <g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Salesforce_Corporate_Logo_RGB">
+            <path d="M113.3,21.2 C122.1,12.1 134.3,6.4 147.8,6.4 C165.8,6.4 181.4,16.4 189.8,31.3 C197.1,28.1 205.1,26.3 213.5,26.3 C245.9,26.3 272.2,52.8 272.2,85.5 C272.2,118.2 245.9,144.7 213.5,144.7 C209.5,144.7 205.7,144.3 201.9,143.5 C194.6,156.6 180.5,165.5 164.5,165.5 C157.8,165.5 151.4,163.9 145.7,161.2 C138.2,178.7 120.9,191 100.7,191 C79.6,191 61.7,177.7 54.8,159 C51.8,159.6 48.7,160 45.5,160 C20.4,160 0.1,139.4 0.1,114.1 C0.1,97.1 9.2,82.3 22.8,74.3 C20,67.9 18.5,60.8 18.5,53.3 C18.5,24.1 42.2,0.5 71.4,0.5 C88.4,0.5 103.6,8.6 113.3,21.2 Z" id="Path" fill="#0D9DDA" fill-rule="nonzero"></path>
+            <g id="Group" transform="translate(39.000000, 66.000000)" fill="#FFFFFF">
+                <path d="M0.4,33.3 C0.2,33.7 0.5,33.8 0.5,33.9 C1,34.3 1.5,34.5 2.1,34.8 C4.9,36.3 7.5,36.7 10.2,36.7 C15.8,36.7 19.3,33.7 19.3,29 L19.3,28.9 C19.3,24.5 15.4,22.9 11.7,21.7 L11.2,21.5 C8.4,20.6 6,19.8 6,18 L6,17.9 C6,16.3 7.4,15.2 9.6,15.2 C12,15.2 14.9,16 16.7,17 C16.7,17 17.2,17.3 17.4,16.8 C17.5,16.5 18.4,14 18.5,13.7 C18.6,13.4 18.4,13.2 18.2,13.1 C16.1,11.8 13.2,11 10.2,11 L9.6,11 C4.5,11 0.9,14.1 0.9,18.5 L0.9,18.6 C0.9,23.3 4.8,24.8 8.5,25.8 L9.1,26 C11.8,26.8 14.1,27.5 14.1,29.4 L14.1,29.5 C14.1,31.2 12.6,32.5 10.2,32.5 C9.3,32.5 6.3,32.5 3,30.4 C2.6,30.2 2.4,30 2.1,29.8 C1.9,29.7 1.5,29.5 1.4,30.1 L0.4,33.3 Z" id="Path" fill-rule="nonzero"></path>
+                <path d="M82.2,33.3 C82,33.7 82.3,33.8 82.3,33.9 C82.8,34.3 83.3,34.5 83.9,34.8 C86.7,36.3 89.3,36.7 92,36.7 C97.6,36.7 101.1,33.7 101.1,29 L101.1,28.9 C101.1,24.5 97.2,22.9 93.5,21.7 L93,21.5 C90.2,20.6 87.8,19.8 87.8,18 L87.8,17.9 C87.8,16.3 89.2,15.2 91.4,15.2 C93.8,15.2 96.7,16 98.5,17 C98.5,17 99,17.3 99.2,16.8 C99.3,16.5 100.2,14 100.3,13.7 C100.4,13.4 100.2,13.2 100,13.1 C97.9,11.8 95,11 92,11 L91.4,11 C86.3,11 82.7,14.1 82.7,18.5 L82.7,18.6 C82.7,23.3 86.6,24.8 90.3,25.8 L90.9,26 C93.6,26.8 95.9,27.5 95.9,29.4 L95.9,29.5 C95.9,31.2 94.4,32.5 92,32.5 C91.1,32.5 88.1,32.5 84.8,30.4 C84.4,30.2 84.2,30 83.9,29.8 C83.8,29.7 83.3,29.6 83.2,30.1 L82.2,33.3 Z" id="Path" fill-rule="nonzero"></path>
+                <path d="M142.6,18.9 C142.1,17.4 141.4,16 140.5,14.9 C139.5,13.8 138.3,12.8 136.9,12.2 C135.5,11.5 133.8,11.2 131.9,11.2 C130,11.2 128.3,11.5 126.9,12.2 C125.5,12.9 124.3,13.8 123.3,14.9 C122.4,16 121.6,17.4 121.2,18.9 C120.7,20.4 120.5,22.1 120.5,23.9 C120.5,25.7 120.7,27.4 121.2,28.9 C121.7,30.4 122.4,31.8 123.3,32.9 C124.3,34 125.5,35 126.9,35.6 C128.3,36.2 130,36.6 131.9,36.6 C133.8,36.6 135.5,36.3 136.9,35.6 C138.3,35 139.5,34 140.5,32.9 C141.4,31.8 142.2,30.4 142.6,28.9 C143.1,27.4 143.3,25.7 143.3,23.9 C143.3,22.1 143.1,20.4 142.6,18.9 M138,23.9 C138,26.6 137.5,28.7 136.5,30.2 C135.5,31.7 134,32.4 132,32.4 C129.9,32.4 128.5,31.7 127.5,30.2 C126.5,28.7 126,26.6 126,23.9 C126,21.2 126.5,19.1 127.5,17.6 C128.5,16.1 129.9,15.4 132,15.4 C134.1,15.4 135.6,16.1 136.5,17.6 C137.5,19.1 138,21.2 138,23.9" id="Shape" fill-rule="nonzero"></path>
+                <path d="M180.9,31.7 C180.7,31.2 180.3,31.4 180.3,31.4 C179.6,31.7 178.9,31.9 178.1,32 C177.3,32.1 176.5,32.2 175.5,32.2 C173.2,32.2 171.5,31.5 170.2,30.2 C168.9,28.9 168.2,26.7 168.2,23.8 C168.2,21.2 168.8,19.2 170,17.7 C171.1,16.2 172.9,15.4 175.2,15.4 C177.1,15.4 178.6,15.6 180.1,16.1 C180.1,16.1 180.5,16.3 180.6,15.8 C181,14.7 181.3,13.9 181.7,12.6 C181.8,12.2 181.5,12.1 181.4,12.1 C180.8,11.9 179.4,11.5 178.3,11.3 C177.3,11.1 176.1,11.1 174.8,11.1 C172.8,11.1 171.1,11.4 169.6,12.1 C168.1,12.8 166.8,13.7 165.8,14.8 C164.8,15.9 164,17.3 163.5,18.8 C163,20.3 162.7,22 162.7,23.8 C162.7,27.7 163.7,30.8 165.8,33.1 C167.9,35.4 171,36.6 175,36.6 C177.4,36.6 179.8,36.1 181.6,35.4 C181.6,35.4 181.9,35.2 181.8,34.8 L180.9,31.7 Z" id="Path"></path>
+                <path d="M204.7,18 C204.3,16.5 203.3,15 202.7,14.3 C201.7,13.2 200.7,12.4 199.7,12 C198.4,11.4 196.9,11.1 195.2,11.1 C193.2,11.1 191.4,11.4 190,12.1 C188.5,12.8 187.3,13.7 186.4,14.9 C185.4,16.1 184.7,17.4 184.3,19 C183.8,20.6 183.6,22.2 183.6,24 C183.6,25.8 183.8,27.5 184.3,29 C184.8,30.5 185.5,31.9 186.6,33 C187.6,34.1 189,35 190.6,35.6 C192.2,36.2 194.1,36.5 196.3,36.5 C200.9,36.5 203.3,35.5 204.2,34.9 C204.4,34.8 204.5,34.6 204.3,34.1 L203.3,31.2 C203.1,30.8 202.7,30.9 202.7,30.9 C201.6,31.3 200,32.1 196.2,32.1 C193.8,32.1 191.9,31.4 190.8,30.2 C189.6,29 189.1,27.3 189,25 L204.8,25 C204.8,25 205.2,25 205.3,24.6 C205.2,24.6 205.7,21.6 204.7,18 Z M189,21.3 C189.2,19.8 189.6,18.6 190.3,17.6 C191.3,16.1 192.7,15.3 194.8,15.3 C196.9,15.3 198.2,16.1 199.2,17.6 C199.9,18.6 200.1,19.9 200.2,21.3 L189,21.3 Z" id="Shape"></path>
+                <path d="M78.4,18 C78,16.5 77,15 76.4,14.3 C75.4,13.2 74.4,12.4 73.4,12 C72.1,11.4 70.6,11.1 68.9,11.1 C66.9,11.1 65.1,11.4 63.7,12.1 C62.2,12.8 61,13.7 60.1,14.9 C59.1,16.1 58.4,17.4 58,19 C57.5,20.6 57.3,22.2 57.3,24 C57.3,25.8 57.5,27.5 58,29 C58.5,30.5 59.2,31.9 60.3,33 C61.3,34.1 62.7,35 64.3,35.6 C65.9,36.2 67.8,36.5 70,36.5 C74.6,36.5 77,35.5 77.9,34.9 C78.1,34.8 78.2,34.6 78,34.1 L77,31.2 C76.8,30.8 76.4,30.9 76.4,30.9 C75.3,31.3 73.7,32.1 69.9,32.1 C67.5,32.1 65.6,31.4 64.5,30.2 C63.3,29 62.8,27.3 62.7,25 L78.5,25 C78.5,25 78.9,25 79,24.6 C78.9,24.6 79.4,21.6 78.4,18 Z M62.7,21.3 C62.9,19.8 63.3,18.6 64,17.6 C65,16.1 66.4,15.3 68.5,15.3 C70.6,15.3 71.9,16.1 72.9,17.6 C73.5,18.6 73.8,19.9 73.9,21.3 L62.7,21.3 Z" id="Shape"></path>
+                <path d="M34.9,20.5 C34.3,20.5 33.4,20.4 32.4,20.4 C31,20.4 29.7,20.6 28.5,20.9 C27.3,21.2 26.2,21.7 25.2,22.4 C24.2,23.1 23.5,24 22.9,25 C22.3,26 22.1,27.3 22.1,28.6 C22.1,30 22.3,31.2 22.8,32.2 C23.3,33.2 24,34 24.9,34.7 C25.8,35.3 26.9,35.8 28.1,36.1 C29.3,36.4 30.7,36.5 32.3,36.5 C33.9,36.5 35.5,36.4 37.1,36.1 C38.6,35.8 40.5,35.5 41.1,35.3 C41.6,35.2 42.2,35 42.2,35 C42.6,34.9 42.6,34.5 42.6,34.5 L42.6,20.1 C42.6,16.9 41.8,14.6 40.1,13.1 C38.4,11.7 36,10.9 32.9,10.9 C31.7,10.9 29.8,11.1 28.7,11.3 C28.7,11.3 25.3,12 23.8,13.1 C23.8,13.1 23.5,13.3 23.7,13.7 L24.8,16.7 C24.9,17.1 25.3,17 25.3,17 C25.3,17 25.4,17 25.6,16.9 C28.6,15.3 32.5,15.3 32.5,15.3 C34.2,15.3 35.5,15.6 36.4,16.3 C37.3,17 37.7,18 37.7,20.1 L37.7,20.8 C36.1,20.7 34.9,20.5 34.9,20.5 Z M28.6,31.6 C28,31.1 27.9,31 27.7,30.7 C27.4,30.2 27.2,29.5 27.2,28.6 C27.2,27.2 27.7,26.2 28.6,25.5 C28.6,25.5 30,24.3 33.2,24.4 C35.5,24.4 37.5,24.8 37.5,24.8 L37.5,32 L37.5,32 C37.5,32 35.5,32.4 33.2,32.6 C30,32.7 28.6,31.6 28.6,31.6 Z" id="Shape" fill-rule="nonzero"></path>
+                <path d="M162.1,12.4 C162.2,12 162,11.9 161.9,11.8 C161.6,11.7 160.3,11.4 159.3,11.4 C157.3,11.3 156.2,11.6 155.2,12.1 C154.2,12.5 153.1,13.3 152.5,14.1 L152.5,12.2 C152.5,11.9 152.3,11.7 152,11.7 L148,11.7 C147.7,11.7 147.5,11.9 147.5,12.2 L147.5,35.7 C147.5,36 147.7,36.2 148,36.2 L152.1,36.2 C152.4,36.2 152.6,36 152.6,35.7 L152.6,23.9 C152.6,22.3 152.8,20.7 153.1,19.8 C153.4,18.8 153.9,18 154.5,17.5 C155.1,16.9 155.7,16.5 156.4,16.3 C157.1,16.1 157.9,16 158.5,16 C159.3,16 160.2,16.2 160.2,16.2 C160.5,16.2 160.7,16 160.8,15.8 C161.2,15 162,12.8 162.1,12.4 Z" id="Path"></path>
+                <path d="M123.2,1.5 C122.7,1.3 122.2,1.2 121.6,1.1 C121,1 120.3,0.9 119.5,0.9 C116.6,0.9 114.4,1.7 112.8,3.3 C111.2,4.9 110.2,7.3 109.6,10.5 L109.4,11.6 L105.8,11.6 C105.8,11.6 105.4,11.6 105.3,12.1 L104.7,15.4 C104.7,15.7 104.8,15.9 105.2,15.9 L108.7,15.9 L105.2,35.6 C104.9,37.2 104.6,38.5 104.3,39.5 C104,40.5 103.6,41.2 103.2,41.7 C102.8,42.2 102.4,42.6 101.8,42.8 C101.3,43 100.6,43.1 99.9,43.1 C99.5,43.1 99,43 98.6,43 C98.2,42.9 98,42.8 97.7,42.7 C97.7,42.7 97.3,42.5 97.1,43 C97,43.3 96,45.9 95.9,46.2 C95.8,46.5 95.9,46.8 96.1,46.8 C96.6,47 96.9,47.1 97.5,47.2 C98.4,47.4 99.1,47.4 99.8,47.4 C101.3,47.4 102.6,47.2 103.7,46.8 C104.8,46.4 105.8,45.7 106.6,44.8 C107.5,43.8 108.1,42.7 108.6,41.3 C109.1,39.9 109.6,38.1 110,36 L113.6,15.9 L118.8,15.9 C118.8,15.9 119.2,15.9 119.3,15.4 L119.9,12.1 C119.9,11.8 119.8,11.6 119.4,11.6 L114.4,11.6 C114.4,11.5 114.7,9.7 115.2,8 C115.4,7.3 115.9,6.7 116.3,6.3 C116.7,5.9 117.1,5.6 117.6,5.5 C118.1,5.3 118.7,5.3 119.3,5.3 C119.8,5.3 120.2,5.4 120.6,5.4 C121.1,5.5 121.3,5.6 121.4,5.6 C121.9,5.8 122,5.6 122.1,5.4 L123.3,2.1 C123.6,1.7 123.3,1.6 123.2,1.5 Z" id="Path"></path>
+                <path d="M52.7,35.6 C52.7,35.9 52.5,36.1 52.2,36.1 L48,36.1 C47.7,36.1 47.5,35.9 47.5,35.6 L47.5,2 C47.5,1.7 47.7,1.5 48,1.5 L52.2,1.5 C52.5,1.5 52.7,1.7 52.7,2 L52.7,35.6 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/salesforce-logo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="108px" height="22px" viewBox="0 0 108 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Header" transform="translate(-64.000000, -13.000000)">
+            <g id="Header-Menu" transform="translate(64.000000, 13.000000)">
+                <g id="Group" transform="translate(0.168000, 0.430000)">
+                    <path d="M40.374,16.78 C42.306,16.78 43.734,15.436 43.734,13.476 C43.734,11.656 42.586,10.802 41.018,10.284 C40.248,10.032 39.296,9.836 39.296,8.842 C39.296,8.226 39.758,7.792 40.36,7.792 C41.088,7.792 41.466,8.254 41.522,8.954 L43.482,8.954 C43.398,7.274 42.096,6 40.416,6 C38.722,6 37.378,7.246 37.378,8.954 C37.378,10.144 37.854,10.998 38.904,11.544 C39.212,11.698 39.52,11.81 39.842,11.936 C40.752,12.286 41.816,12.51 41.816,13.686 C41.816,14.47 41.13,14.988 40.388,14.988 C39.562,14.988 39.086,14.386 39.016,13.602 L37,13.602 C37.084,15.436 38.54,16.78 40.374,16.78 Z M48.27,16.822 C49.222,16.822 50.37,16.332 50.986,15.604 L50.986,16.57 L52.694,16.57 L52.694,8.8 L50.986,8.8 L50.986,9.78 L50.958,9.78 C50.888,9.668 50.762,9.542 50.678,9.458 C50.048,8.884 49.236,8.534 48.382,8.534 C46.086,8.534 44.49,10.41 44.49,12.636 C44.49,14.848 45.932,16.822 48.27,16.822 Z M48.662,15.114 C47.332,15.114 46.352,14.022 46.352,12.72 C46.352,11.39 47.276,10.242 48.662,10.242 C50.034,10.242 50.93,11.334 50.93,12.664 C50.93,13.994 50.048,15.114 48.662,15.114 Z M55.97,16.57 L55.97,6.21 L54.108,6.21 L54.108,16.57 L55.97,16.57 Z M61.248,16.822 C62.9,16.822 64.496,15.702 65,14.12 L63.04,14.12 C62.662,14.806 62.004,15.114 61.248,15.114 C60.478,15.114 59.778,14.722 59.358,14.078 C59.246,13.91 59.148,13.728 59.106,13.518 L65.14,13.518 C65.21,13.21 65.252,12.888 65.252,12.58 C65.252,10.326 63.502,8.534 61.234,8.534 C58.882,8.534 57.146,10.382 57.146,12.706 C57.146,15.016 58.924,16.822 61.248,16.822 Z M63.348,12.02 L59.05,12.02 C59.316,10.914 60.114,10.242 61.248,10.242 C62.382,10.242 63.166,10.9 63.348,12.02 Z M68.85,16.822 C70.39,16.822 71.566,15.646 71.566,14.106 C71.566,12.664 70.6,12.16 69.396,11.782 C69.172,11.712 68.948,11.642 68.724,11.558 C68.402,11.432 68.08,11.32 68.08,10.914 C68.08,10.522 68.402,10.242 68.794,10.242 C69.214,10.242 69.452,10.508 69.536,10.914 L71.356,10.914 C71.3,9.556 70.18,8.534 68.822,8.534 C67.464,8.534 66.218,9.528 66.218,10.942 C66.218,12.09 66.918,12.804 67.954,13.168 C68.346,13.308 69.34,13.574 69.592,13.924 C69.676,14.05 69.704,14.19 69.704,14.33 C69.704,14.806 69.312,15.114 68.864,15.114 C68.22,15.114 67.968,14.68 67.842,14.12 L65.938,14.12 C65.994,14.764 66.12,15.282 66.526,15.8 C67.072,16.486 67.982,16.822 68.85,16.822 Z M74.562,16.57 L74.562,10.452 L75.654,10.452 L75.654,8.8 L74.562,8.8 C74.618,7.918 74.968,7.848 75.752,7.834 L75.752,6 L75.234,6 C74.646,6 74.044,6.238 73.61,6.63 C72.966,7.232 72.77,7.96 72.7,8.8 L72.042,8.8 L72.042,10.452 L72.7,10.452 L72.7,16.57 L74.562,16.57 Z M80.246,16.822 C82.598,16.822 84.362,15.016 84.362,12.664 C84.362,10.382 82.542,8.534 80.246,8.534 C77.95,8.534 76.102,10.41 76.102,12.692 C76.102,14.96 77.978,16.822 80.246,16.822 Z M80.246,15.114 C78.902,15.114 77.964,13.994 77.964,12.692 C77.964,11.432 78.93,10.242 80.246,10.242 C81.562,10.242 82.5,11.46 82.5,12.706 C82.5,13.98 81.562,15.114 80.246,15.114 Z M87.456,16.57 L87.456,12.202 C87.456,11.068 87.932,10.382 89.15,10.34 L89.15,8.534 C88.226,8.534 87.848,8.73 87.33,9.486 L87.302,9.486 L87.302,8.8 L85.594,8.8 L85.594,16.57 L87.456,16.57 Z M93.84,16.822 C95.674,16.822 97.116,15.744 97.732,14.036 L95.632,14.036 C95.24,14.666 94.666,15.114 93.91,15.114 C92.524,15.114 91.572,14.022 91.572,12.678 C91.572,11.348 92.44,10.242 93.826,10.242 C94.694,10.242 95.226,10.648 95.632,11.376 L97.732,11.376 C97.158,9.654 95.646,8.534 93.826,8.534 C91.558,8.534 89.71,10.382 89.71,12.65 C89.71,14.932 91.544,16.822 93.84,16.822 Z M102.688,16.822 C104.34,16.822 105.936,15.702 106.44,14.12 L104.48,14.12 C104.102,14.806 103.444,15.114 102.688,15.114 C101.918,15.114 101.218,14.722 100.798,14.078 C100.686,13.91 100.588,13.728 100.546,13.518 L106.58,13.518 C106.65,13.21 106.692,12.888 106.692,12.58 C106.692,10.326 104.942,8.534 102.674,8.534 C100.322,8.534 98.586,10.382 98.586,12.706 C98.586,15.016 100.364,16.822 102.688,16.822 Z M104.788,12.02 L100.49,12.02 C100.756,10.914 101.554,10.242 102.688,10.242 C103.822,10.242 104.606,10.9 104.788,12.02 Z" id="Salesforce" fill="#032D60" fill-rule="nonzero"></path>
+                    <path d="M12.8244528,3.21864865 C13.722566,2.29972973 14.9376604,1.70513514 16.3112453,1.70513514 C18.1074717,1.70513514 19.6923774,2.73216216 20.5376604,4.24567568 C21.277283,3.92135135 22.0697358,3.70513514 22.9150189,3.70513514 C26.1904906,3.70513514 28.832,6.40783784 28.832,9.75918919 C28.832,13.1105405 26.1904906,15.8132432 22.9150189,15.8132432 C22.4923774,15.8132432 22.122566,15.7591892 21.7527547,15.7051351 C21.0131321,17.0564865 19.586717,17.9754054 17.9489811,17.9754054 C17.2621887,17.9754054 16.6282264,17.8132432 16.0470943,17.542973 C15.3074717,19.3267568 13.5640755,20.57 11.5036981,20.57 C9.39049057,20.57 7.54143396,19.2186486 6.85464151,17.2727027 C6.53766038,17.3267568 6.22067925,17.3808108 5.90369811,17.3808108 C3.36784906,17.3808108 1.3074717,15.2727027 1.3074717,12.6781081 C1.3074717,10.9483784 2.20558491,9.43486486 3.57916981,8.62405405 C3.31501887,7.97540541 3.1565283,7.21864865 3.1565283,6.46189189 C3.1565283,3.48891892 5.53388679,1.05648649 8.49237736,1.05648649 C10.341434,1.11054054 11.8735094,1.92135135 12.8244528,3.21864865" id="Salesforce-Logo" fill="#00A1E0"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/sidebar-item-loading.svg

@@ -0,0 +1,3 @@
+<svg width="100%" height="112" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58171 16 7.99999 16H212.24C216.658 16 220.24 12.4183 220.24 8C220.24 3.58172 216.658 0 212.24 0H8ZM8 32C3.58172 32 0 35.5817 0 40C0 44.4183 3.58172 48 8 48H177.037C181.456 48 185.037 44.4183 185.037 40C185.037 35.5817 181.456 32 177.037 32H8ZM0 72C0 67.5817 3.58172 64 8 64H233C237.418 64 241 67.5817 241 72C241 76.4183 237.418 80 233 80H8C3.58172 80 0 76.4183 0 72ZM8 96C3.58172 96 0 99.5817 0 104C0 108.418 3.58172 112 8 112H142.738C147.156 112 150.738 108.418 150.738 104C150.738 99.5817 147.156 96 142.738 96H8Z" fill="#E5E5E5" />
+</svg>

package/src/assets/svg/sidebar-loading.svg

@@ -0,0 +1,34 @@
+
+<svg width="100%" height="374px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Scoped-Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Docs-–-Search-Results-Loading" transform="translate(-52.000000, -240.000000)" fill="#DAD8D7">
+            <g id="Group-12" transform="translate(52.000000, 240.000000)">
+                <g id="Group-5">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.8" transform="translate(0.000000, 78.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.6" transform="translate(0.000000, 156.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.4" transform="translate(0.000000, 234.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.197206577" transform="translate(0.000000, 312.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/slack-cta-podcast-background-left.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="114px" height="122px" viewBox="0 0 114 122" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>podcast-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Podcast" transform="translate(-363.000000, -3482.000000)">
+            <g id="CTA-signup" transform="translate(52.000000, 3441.500000)">
+                <g id="podcast-cta-graphic-left" transform="translate(312.000000, 41.500000)">
+                    <path d="M19.3477,79.53155 C16.3647,73.75655 14.6787,67.20155 14.6787,60.25255 C14.6787,54.58155 15.8017,49.17255 17.8357,44.23455" id="Stroke-1" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M98.3809,54.21995 C98.6629,56.18995 98.8099,58.20395 98.8099,60.25195 C98.8099,83.48495 79.9769,102.31795 56.7439,102.31795 C42.5819,102.31795 30.0549,95.31995 22.4319,84.59195" id="Stroke-3" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M20.6133,38.69755 C27.9583,26.41255 41.3903,18.18655 56.7443,18.18655 C75.7943,18.18655 91.8853,30.84855 97.0623,48.21555" id="Stroke-5" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M92.209,0.79125 L90.492,5.43125 C90.37,5.76325 90.108,6.02425 89.776,6.14625 L85.137,7.86425 C84.082,8.25425 84.082,9.74625 85.137,10.13725 L89.776,11.85425 C90.108,11.97625 90.37,12.23725 90.492,12.56925 L92.209,17.20925 C92.6,18.26425 94.092,18.26425 94.482,17.20925 L96.199,12.56925 C96.321,12.23725 96.583,11.97625 96.915,11.85425 L101.555,10.13725 C102.609,9.74625 102.609,8.25425 101.555,7.86425 L96.915,6.14625 C96.583,6.02425 96.321,5.76325 96.199,5.43125 L94.482,0.79125 C94.092,-0.26375 92.6,-0.26375 92.209,0.79125 Z" id="Stroke-7" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M24.4414,114.48275 C24.4414,117.31375 22.1464,119.60875 19.3154,119.60875 C16.4854,119.60875 14.1904,117.31375 14.1904,114.48275 C14.1904,111.65275 16.4854,109.35775 19.3154,109.35775 C22.1464,109.35775 24.4414,111.65275 24.4414,114.48275 Z" id="Stroke-9" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M56.7012,38.94555 C56.7012,40.32655 55.5822,41.44555 54.2012,41.44555 C52.8212,41.44555 51.7012,40.32655 51.7012,38.94555 C51.7012,37.56455 52.8212,36.44555 54.2012,36.44555 C55.5822,36.44555 56.7012,37.56455 56.7012,38.94555" id="Fill-11" fill="#8FD0FE"></path>
+                    <line x1="87.835" y1="53.99925" x2="102.642" y2="53.99925" id="Stroke-13" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="108.332" y1="53.99925" x2="111.857" y2="53.99925" id="Stroke-15" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="16" y1="39.35765" x2="27.56" y2="39.35765" id="Stroke-17" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="0" y1="39.35765" x2="5" y2="39.35765" id="Stroke-19" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <path d="M11.4131,39.35765 C11.4131,39.90965 10.9651,40.35765 10.4131,40.35765 C9.8601,40.35765 9.4131,39.90965 9.4131,39.35765 C9.4131,38.80465 9.8601,38.35765 10.4131,38.35765 C10.9651,38.35765 11.4131,38.80465 11.4131,39.35765" id="Fill-21" fill="#3A49DA"></path>
+                    <path d="M11.4131,39.35765 C11.4131,39.90965 10.9651,40.35765 10.4131,40.35765 C9.8601,40.35765 9.4131,39.90965 9.4131,39.35765 C9.4131,38.80465 9.8601,38.35765 10.4131,38.35765 C10.9651,38.35765 11.4131,38.80465 11.4131,39.35765 Z" id="Stroke-23" stroke="#8FD0FE"></path>
+                    <line x1="11.5957" y1="84.26595" x2="27.2177" y2="84.26595" id="Stroke-25" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <path d="M33.2178,84.26595 C33.2178,84.81795 32.7698,85.26595 32.2178,85.26595 C31.6648,85.26595 31.2178,84.81795 31.2178,84.26595 C31.2178,83.71295 31.6648,83.26595 32.2178,83.26595 C32.7698,83.26595 33.2178,83.71295 33.2178,84.26595" id="Fill-27" fill="#8FD0FE"></path>
+                    <line x1="71.3252" y1="72.71315" x2="71.3252" y2="64.73715" id="Stroke-29" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                    <line x1="75.3125" y1="68.72685" x2="67.3295" y2="68.72785" id="Stroke-31" stroke="#8FD0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/slack-cta-podcast-background-right.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="156px" height="83px" viewBox="0 0 156 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>podcast-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Podcast" transform="translate(-888.000000, -3624.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 3441.500000)">
+                <g id="podcast-cta-graphic-right" transform="translate(837.000000, 183.500000)">
+                    <g id="tree-3" transform="translate(100.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                        <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                        <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                        <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                        <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                    </g>
+                    <g id="tree-2" transform="translate(50.000247, 42.000000)">
+                        <path d="M27.3664984,9.39600248 C27.2895938,9.39600248 27.2184571,9.41646246 27.1415525,9.41841103 C27.1578947,9.19432553 27.208844,8.97998288 27.208844,8.75102595 C27.208844,3.91759913 23.3424658,0 18.5743812,0 C13.8053353,0 9.93991829,3.91759913 9.93991829,8.75102595 C9.93991829,9.01992855 9.99471281,9.27421688 10.0177842,9.53727377 C9.5640471,9.46225385 9.10934871,9.39600248 8.63542418,9.39600248 C3.86637827,9.39600248 0,13.3136016 0,18.1460541 C0,22.979481 3.86637827,26.8970801 8.63542418,26.8970801 C9.21605383,26.8970801 9.78322519,26.8347259 10.333093,26.7236574 C11.3914924,30.3431254 14.6599375,33 18.5743812,33 C22.4474886,33 25.6861331,30.3976853 26.7810622,26.8376487 C26.9781303,26.8512887 27.1655852,26.8970801 27.3664984,26.8970801 C32.134583,26.8970801 36,22.979481 36,18.1460541 C36,13.3136016 32.134583,9.39600248 27.3664984,9.39600248 Z" id="Stroke-1"></path>
+                        <polyline id="Stroke-3" points="25 18 18.000488 25 11 18"></polyline>
+                        <line x1="18.5" y1="11" x2="18.5" y2="39" id="Stroke-5"></line>
+                    </g>
+                    <g id="tree-1" transform="translate(0.000000, 33.000600)">
+                        <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                        <g id="Group-12">
+                            <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                            <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                            <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                            <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                            <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                        </g>
+                    </g>
+                    <path d="M148.368697,17.4393933 L147.41455,20.0170007 C147.347052,20.201175 147.202055,20.3470145 147.017892,20.4145173 L144.439612,21.3687237 C143.853791,21.5853994 143.853791,22.4146006 144.439612,22.6312763 L147.017892,23.5854827 C147.202055,23.6538189 147.347052,23.798825 147.41455,23.9829993 L148.368697,26.5606067 C148.586193,27.1464644 149.414509,27.1464644 149.632004,26.5606067 L150.585318,23.9829993 C150.65365,23.798825 150.798647,23.6538189 150.983643,23.5854827 L153.560256,22.6312763 C154.14691,22.4146006 154.14691,21.5853994 153.560256,21.3687237 L150.983643,20.4145173 C150.798647,20.3470145 150.65365,20.201175 150.585318,20.0170007 L149.632004,17.4393933 C149.414509,16.8535356 148.586193,16.8535356 148.368697,17.4393933 Z" id="Stroke-150"></path>
+                    <path d="M66.3695305,0.439393308 L65.4145504,3.01700071 C65.3470518,3.20117505 65.2020548,3.34701446 65.017892,3.41451727 L62.4396124,4.3687237 C61.8537913,4.58539939 61.8537913,5.41460061 62.4396124,5.6312763 L65.017892,6.58548273 C65.2020548,6.65381891 65.3470518,6.79882495 65.4145504,6.98299929 L66.3695305,9.56060669 C66.5861927,10.1464644 67.4153421,10.1464644 67.6320042,9.56060669 L68.5853177,6.98299929 C68.6536496,6.79882495 68.7986466,6.65381891 68.9836427,6.58548273 L71.5602557,5.6312763 C72.1469102,5.41460061 72.1469102,4.58539939 71.5602557,4.3687237 L68.9836427,3.41451727 C68.7986466,3.34701446 68.6536496,3.20117505 68.5853177,3.01700071 L67.6320042,0.439393308 C67.4153421,-0.146464436 66.5861927,-0.146464436 66.3695305,0.439393308 Z" id="Stroke-152"></path>
+                    <path d="M50.0002465,20 C50.0002465,18.3436725 48.6572963,17 46.9997812,17 C45.3431968,17 44.0002465,18.3436725 44.0002465,20 C44.0002465,21.6572581 45.3431968,23 46.9997812,23 C48.6572963,23 50.0002465,21.6572581 50.0002465,20 Z" id="Stroke-158"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/subscribe-background-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
+                    <circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
+                    <path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/subscribe-background-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/trees.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="156px" height="83px" viewBox="0 0 156 83" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>trees</title>
+    <g id="Salesforce-Developers" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Podcast" transform="translate(-901.000000, -593.000000)" stroke="#1A96FF" stroke-width="2">
+            <g id="header-bg" transform="translate(0.000000, 116.000000)">
+                <g id="Graphics" transform="translate(676.000000, 0.000000)">
+                    <g id="trees" transform="translate(225.999753, 478.000000)">
+                        <g id="tree-3" transform="translate(100.000247, 32.000000)">
+                            <line x1="8.6633" y1="15.01" x2="18.2223" y2="19.789" id="Stroke-1"></line>
+                            <g id="Group-12" transform="translate(0.000000, 0.975600)">
+                                <path d="M36.6261,26.008 C36.6261,22.983 35.0751,20.318 32.7301,18.753 C33.8541,17.584 34.5541,16.005 34.5541,14.26 C34.5541,10.679 31.6411,7.765 28.0571,7.765 C27.3921,7.765 26.7621,7.895 26.1561,8.081 C26.0431,3.622 22.3981,0.025 17.9111,0.025 C13.5011,0.025 9.8861,3.499 9.6581,7.855 C9.3021,7.795 8.9381,7.765 8.5701,7.765 C4.9891,7.765 2.0751,10.679 2.0751,14.26 C2.0751,16.005 2.7751,17.585 3.8991,18.753 C3.4241,19.071 2.9691,19.427 2.5541,19.842 C0.5701,21.828 -0.3239,24.574 0.1051,27.375 C0.6071,30.658 3.0141,33.365 6.1321,34.332 L18.0261,39.332 L31.0961,34.127 L31.0891,34.107 C34.3241,32.83 36.6261,29.691 36.6261,26.008 Z" id="Stroke-2"></path>
+                                <line x1="27.4875" y1="14.0344" x2="17.9285" y2="18.8134" id="Stroke-4"></line>
+                                <line x1="8.6633" y1="25.6652" x2="18.2223" y2="30.4442" id="Stroke-6"></line>
+                                <line x1="27.4875" y1="25.6652" x2="17.9285" y2="30.4442" id="Stroke-8"></line>
+                                <line x1="18.3195" y1="9.6457" x2="18.3195" y2="47.9997" id="Stroke-10"></line>
+                            </g>
+                        </g>
+                        <g id="tree-2" transform="translate(50.000247, 39.000000)">
+                            <path d="M27.3664984,9.39600248 C27.2895938,9.39600248 27.2184571,9.41646246 27.1415525,9.41841103 C27.1578947,9.19432553 27.208844,8.97998288 27.208844,8.75102595 C27.208844,3.91759913 23.3424658,0 18.5743812,0 C13.8053353,0 9.93991829,3.91759913 9.93991829,8.75102595 C9.93991829,9.01992855 9.99471281,9.27421688 10.0177842,9.53727377 C9.5640471,9.46225385 9.10934871,9.39600248 8.63542418,9.39600248 C3.86637827,9.39600248 0,13.3136016 0,18.1460541 C0,22.979481 3.86637827,26.8970801 8.63542418,26.8970801 C9.21605383,26.8970801 9.78322519,26.8347259 10.333093,26.7236574 C11.3914924,30.3431254 14.6599375,33 18.5743812,33 C22.4474886,33 25.6861331,30.3976853 26.7810622,26.8376487 C26.9781303,26.8512887 27.1655852,26.8970801 27.3664984,26.8970801 C32.134583,26.8970801 36,22.979481 36,18.1460541 C36,13.3136016 32.134583,9.39600248 27.3664984,9.39600248 Z" id="Stroke-1"></path>
+                            <polyline id="Stroke-3" points="25 18 18.000488 25 11 18"></polyline>
+                            <line x1="18.5" y1="11" x2="18.5" y2="39" id="Stroke-5"></line>
+                        </g>
+                        <g id="tree-1" transform="translate(0.000000, 33.000600)">
+                            <line x1="8.66354655" y1="14.0094" x2="18.2225465" y2="18.7884" id="Stroke-1"></line>
+                            <g id="Group-12">
+                                <path d="M36.6263465,25.983 C36.6263465,22.958 35.0753465,20.293 32.7303465,18.728 C33.8543465,17.559 34.5543465,15.98 34.5543465,14.235 C34.5543465,10.654 31.6413465,7.74 28.0573465,7.74 C27.3923465,7.74 26.7623465,7.87 26.1563465,8.056 C26.0433465,3.597 22.3983465,0 17.9113465,0 C13.5013465,0 9.88634655,3.474 9.65834655,7.83 C9.30234655,7.77 8.93834655,7.74 8.57034655,7.74 C4.98934655,7.74 2.07534655,10.654 2.07534655,14.235 C2.07534655,15.98 2.77534655,17.56 3.89934655,18.728 C3.42434655,19.046 2.96934655,19.402 2.55434655,19.817 C0.570346547,21.803 -0.323653453,24.549 0.105346547,27.35 C0.607346547,30.633 3.01434655,33.34 6.13234655,34.307 L18.0263465,39.307 L31.0963465,34.102 L31.0893465,34.082 C34.3243465,32.805 36.6263465,29.666 36.6263465,25.983 Z" id="Stroke-2"></path>
+                                <line x1="27.4877465" y1="14.0094" x2="17.9287465" y2="18.7884" id="Stroke-4"></line>
+                                <line x1="8.66354655" y1="25.6402" x2="18.2225465" y2="30.4192" id="Stroke-6"></line>
+                                <line x1="27.4877465" y1="25.6402" x2="17.9287465" y2="30.4192" id="Stroke-8"></line>
+                                <line x1="18.3197465" y1="9.6207" x2="18.3197465" y2="47.9747" id="Stroke-10"></line>
+                            </g>
+                        </g>
+                        <path d="M148.368697,17.4393933 L147.41455,20.0170007 C147.347052,20.201175 147.202055,20.3470145 147.017892,20.4145173 L144.439612,21.3687237 C143.853791,21.5853994 143.853791,22.4146006 144.439612,22.6312763 L147.017892,23.5854827 C147.202055,23.6538189 147.347052,23.798825 147.41455,23.9829993 L148.368697,26.5606067 C148.586193,27.1464644 149.414509,27.1464644 149.632004,26.5606067 L150.585318,23.9829993 C150.65365,23.798825 150.798647,23.6538189 150.983643,23.5854827 L153.560256,22.6312763 C154.14691,22.4146006 154.14691,21.5853994 153.560256,21.3687237 L150.983643,20.4145173 C150.798647,20.3470145 150.65365,20.201175 150.585318,20.0170007 L149.632004,17.4393933 C149.414509,16.8535356 148.586193,16.8535356 148.368697,17.4393933 Z" id="Stroke-150"></path>
+                        <path d="M66.3695305,0.439393308 L65.4145504,3.01700071 C65.3470518,3.20117505 65.2020548,3.34701446 65.017892,3.41451727 L62.4396124,4.3687237 C61.8537913,4.58539939 61.8537913,5.41460061 62.4396124,5.6312763 L65.017892,6.58548273 C65.2020548,6.65381891 65.3470518,6.79882495 65.4145504,6.98299929 L66.3695305,9.56060669 C66.5861927,10.1464644 67.4153421,10.1464644 67.6320042,9.56060669 L68.5853177,6.98299929 C68.6536496,6.79882495 68.7986466,6.65381891 68.9836427,6.58548273 L71.5602557,5.6312763 C72.1469102,5.41460061 72.1469102,4.58539939 71.5602557,4.3687237 L68.9836427,3.41451727 C68.7986466,3.34701446 68.6536496,3.20117505 68.5853177,3.01700071 L67.6320042,0.439393308 C67.4153421,-0.146464436 66.5861927,-0.146464436 66.3695305,0.439393308 Z" id="Stroke-152"></path>
+                        <path d="M50.0002465,20 C50.0002465,18.3436725 48.6572963,17 46.9997812,17 C45.3431968,17 44.0002465,18.3436725 44.0002465,20 C44.0002465,21.6572581 45.3431968,23 46.9997812,23 C48.6572963,23 50.0002465,21.6572581 50.0002465,20 Z" id="Stroke-158"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/modules/dx/banner/banner.css

@@ -0,0 +1,46 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    background: repeating-linear-gradient(
+        45deg,
+        var(--primary-color),
+        var(--primary-color) 20px,
+        var(--secondary-color) 20px,
+        var(--secondary-color) 40px
+    );
+}
+
+.container_inner {
+    height: 100%;
+    display: flex;
+    background: var(--primary-color);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
+    color: white;
+    font-weight: bold;
+}
+
+.container a {
+    text-decoration: underline;
+    transition: var(--dx-g-transition-hue-1x);
+    margin-right: 4px;
+}
+
+.container a:hover {
+    opacity: 0.8;
+}
+
+.container dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+    margin-top: var(--dx-g-spacing-2xs);
+}

package/src/modules/dx/banner/banner.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/banner/banner.ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    renderedCallback() {
+        const container = this.template.querySelector(".info-container");
+        setContainerInnerHtml(container, this.bannerMarkup);
+    }
+}

package/src/modules/dx/brandThemeProvider/brandCssVars.ts

@@ -0,0 +1,10 @@
+export default [
+    "--dx-g-brand-current-color",
+    "--dx-g-brand-current-color-background",
+    "--dx-g-brand-current-color-background-2",
+    "--dx-g-brand-current-button-color-background-inactive",
+    "--dx-g-brand-current-button-color-background-inactive-hover",
+    "--dx-g-brand-current-button-color-background-active",
+    "--dx-g-brand-current-color-border",
+    "--dx-g-brand-current-color-border-2"
+];

package/src/modules/dx/brandThemeProvider/brandThemeProvider.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -0,0 +1,46 @@
+import { LightningElement, api } from "lwc";
+import brandCssVars from "./brandCssVars";
+import { Brand } from "typings/custom";
+
+export const toCss = (brand: Brand | null) => `
+  :host {
+    ${brandCssVars.reduce(
+        (acc, v) => `
+          ${acc}
+          ${v}: var(${v.replace("current", brand || "default")});
+        `,
+        ""
+    )}
+  }
+`;
+
+export default class BrandThemeProvider extends LightningElement {
+    @api brand: Brand | null = null;
+
+    private get css() {
+        return toCss(this.brand);
+    }
+
+    connectedCallback() {
+        this.setBrandVars();
+    }
+
+    renderedCallback() {
+        this.setBrandVars();
+    }
+
+    setBrandVars() {
+        let style = this.template.querySelector("style");
+        if (!style) {
+            style = document.createElement("style");
+            this.template.appendChild(style);
+        }
+
+        if (style.firstChild) {
+            style.removeChild(style.firstChild);
+        }
+
+        const css = document.createTextNode(this.css);
+        style.appendChild(css);
+    }
+}

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,111 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+nav > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+a,
+span {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+dx-logo {
+    --dx-c-logo-label-color: var(--dx-c-breadcrumbs-title-color);
+}
+
+.breadcrumb {
+    white-space: nowrap;
+}
+
+.breadcrumb,
+span {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-bold);
+    color: var(--dx-c-breadcrumbs-breadcrumb-color);
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+span.breadcrumb {
+    font-weight: var(--dx-g-font-normal);
+    overflow: hidden;
+    position: relative;
+    display: inline-block;
+    text-decoration: none;
+    text-overflow: ellipsis;
+}
+
+dx-dropdown {
+    display: none;
+}
+
+.breadcrumb-overflow {
+    flex-grow: 1;
+    display: block;
+}
+
+.breadcrumbs_options-slash {
+    display: none;
+}
+
+@media (max-width: 1024px) {
+    nav.state-long dx-dropdown {
+        display: initial;
+    }
+
+    nav.state-long .breadcrumb:not(span) {
+        display: none;
+    }
+
+    nav.state-long.hide-current-location .breadcrumb:not(span):last-of-type {
+        display: initial;
+    }
+
+    nav.state-long
+        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+        display: none;
+    }
+
+    nav.state-long .breadcrumbs_options-slash {
+        display: flex;
+    }
+}
+
+@media (max-width: 768px) {
+    dx-dropdown {
+        display: initial;
+    }
+
+    .breadcrumb:not(span) {
+        display: none;
+    }
+
+    nav.hide-current-location .breadcrumb:not(span):last-of-type {
+        display: initial;
+    }
+
+    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+        display: none;
+    }
+
+    .breadcrumbs_options-slash {
+        display: flex;
+    }
+}

package/src/modules/dx/breadcrumbs/breadcrumbs.html

@@ -0,0 +1,44 @@
+<template>
+    <nav class={className} role="navigation" aria-label={ariaLabel}>
+        <template if:true={logo}>
+            <dx-logo href={baseHref} label={title}></dx-logo>
+            <span if:false={breadcrumbsEmpty}>/</span>
+        </template>
+        <dx-dropdown
+            if:true={breadcrumbDropdownOptions}
+            options={breadcrumbDropdownOptions}
+            value-path="link.href"
+        >
+            <dx-button
+                aria-label="Open Breadcrumbs Dropdown"
+                icon-symbol="threedots"
+                icon-size="large"
+                variant="tertiary"
+            ></dx-button>
+        </dx-dropdown>
+        <template for:each={breadcrumbs} for:item="breadcrumb">
+            <a
+                if:true={breadcrumb.asLink}
+                class="breadcrumb"
+                key={breadcrumb.href}
+                href={breadcrumb.href}
+            >
+                {breadcrumb.label}
+            </a>
+            <span
+                class="breadcrumb"
+                if:false={breadcrumb.asLink}
+                key={breadcrumb.label}
+            >
+                {breadcrumb.label}
+            </span>
+            <span
+                if:false={breadcrumb.last}
+                class="breadcrumb-slash"
+                key={breadcrumb.href}
+            >
+                /
+            </span>
+        </template>
+    </nav>
+</template>