toggle-components-library 1.10.1

package/src/assets/icons/grey_cross.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.028 9.028">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #6e7e8f;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <g id="Group_182" data-name="Group 182" transform="translate(-828.793 -181.793)">
+    <line id="Line_20" data-name="Line 20" class="cls-1" x1="7.614" y2="7.614" transform="translate(829.5 182.5)"/>
+    <line id="Line_21" data-name="Line 21" class="cls-1" x2="7.614" y2="7.614" transform="translate(829.5 182.5)"/>
+  </g>
+</svg>

package/src/assets/icons/info.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e2f8ff;
+        stroke: #189ed1;
+      }
+
+      .cls-2 {
+        fill: #189ed1;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+
+      .cls-4 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_55_8" data-name="Symbol 55 – 8" transform="translate(-143 -494)">
+    <g id="Ellipse_13" data-name="Ellipse 13" class="cls-1" transform="translate(158 509) rotate(180)">
+      <circle class="cls-3" cx="7.5" cy="7.5" r="7.5"/>
+      <circle class="cls-4" cx="7.5" cy="7.5" r="7"/>
+    </g>
+    <path id="Path_285" data-name="Path 285" class="cls-2" d="M2-4.932h.439L1.8-1.553Q1.772-1.4,1.76-1.3a1.347,1.347,0,0,0-.012.161.586.586,0,0,0,.127.408.471.471,0,0,0,.366.139,1.559,1.559,0,0,0,.283-.034A3.646,3.646,0,0,0,2.93-.732v.41a5.985,5.985,0,0,1-.923.3,3.609,3.609,0,0,1-.786.093.729.729,0,0,1-.554-.2A.809.809,0,0,1,.479-.708,1.853,1.853,0,0,1,.5-.95q.02-.144.073-.432l.537-2.69L.288-4.2v-.352Zm.2-2.319a.676.676,0,0,1,.488.173.616.616,0,0,1,.181.466.723.723,0,0,1-.22.535.741.741,0,0,1-.542.217.69.69,0,0,1-.491-.176.594.594,0,0,1-.188-.454.734.734,0,0,1,.22-.544A.753.753,0,0,1,2.2-7.251Z" transform="translate(149 505)"/>
+  </g>
+</svg>

package/src/assets/icons/megaphone.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.438" height="16.365" viewBox="0 0 18.438 16.365">
+  <g id="Group_223" data-name="Group 223" transform="translate(-38.573 -278.939)">
+    <line id="Line_282" data-name="Line 282" x2="1.852" transform="matrix(0.966, -0.259, 0.259, 0.966, 54.532, 283.517)" fill="none" stroke="#881212" stroke-linecap="round" stroke-width="1"/>
+    <line id="Line_283" data-name="Line 283" y1="0.926" x2="0.926" transform="matrix(0.966, -0.259, 0.259, 0.966, 53.813, 280.834)" fill="none" stroke="#881212" stroke-linecap="round" stroke-width="1"/>
+    <line id="Line_284" data-name="Line 284" x2="0.926" y2="0.926" transform="matrix(0.966, -0.259, 0.259, 0.966, 55.011, 285.305)" fill="none" stroke="#881212" stroke-linecap="round" stroke-width="1"/>
+    <path id="Path_296" data-name="Path 296" d="M8858.953,7079.066l1.455,5.007,5.97-1.583,4.094-.281-2.241-7.231-4.867,2.457Z" transform="translate(-8819 -6794)" fill="#e57936"/>
+    <g id="Group_222" data-name="Group 222" transform="translate(-1308.693 -153.046) rotate(-8)">
+      <line id="Line_278" data-name="Line 278" y1="0.441" x2="3.209" transform="translate(1274.489 620.772)" fill="none" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_292" data-name="Path 292" stroke="#881212" d="M1296.941,622.933a27.071,27.071,0,0,1-7.1,1.99" fill="none" transform="translate(-12.652 -4.082)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" fill-rule="evenodd"/>
+      <line id="Line_279" data-name="Line 279" y1="0.441" x2="3.209" transform="translate(1275.234 626.193)" fill="none" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_293" data-name="Path 293" stroke="#881212" d="M1300.348,653.308a27.066,27.066,0,0,0-7.372,0" fill="none" transform="translate(-15.04 -27.044)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" fill-rule="evenodd"/>
+      <rect id="Rectangle_755" data-name="Rectangle 755" width="1.711" height="9.546" rx="0.855" transform="translate(1284.219 617.811) rotate(-7.824)" stroke-width="1" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" fill="#e57936"/>
+      <line id="Line_280" data-name="Line 280" x2="0.742" y2="5.404" transform="translate(1274.489 621.213)" fill="none" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_294" data-name="Path 294" d="M1274.673,637.623a1.96,1.96,0,0,0,.528,3.846" transform="translate(-0.16 -15.595)" fill="#881212"/>
+      <line id="Line_281" data-name="Line 281" x2="0.742" y2="5.404" transform="translate(1277.867 620.749)" fill="none" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      <path id="Path_295" data-name="Path 295" d="M1289.865,659.08h0a1,1,0,0,1-1.09-.678l-1.492-4.473,2.026-.278,1.373,4.116A1,1,0,0,1,1289.865,659.08Z" transform="translate(-10.7 -27.498)" fill="#e57936" stroke="#881212" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+    </g>
+  </g>
+</svg>

package/src/assets/icons/orders.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.546 16.352">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #86cffc;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke: #0b34e0;
+        stroke-linecap: round;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-linejoin: round;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-2, .cls-3 {
+        fill: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_46_2" data-name="Symbol 46 – 2" transform="translate(-38.746 -143.819)">
+    <path id="Path_67" data-name="Path 67" class="cls-1" d="M39.1,31.822l-9.144-.646a1.252,1.252,0,0,1-1.171-1.352l.868-12.172A1.252,1.252,0,0,1,31,16.481l9.144.646a1.252,1.252,0,0,1,1.171,1.352l-.868,12.172A1.24,1.24,0,0,1,39.1,31.822Z" transform="translate(10.47 127.843)"/>
+    <line id="Line_230" data-name="Line 230" class="cls-2" x2="1.413" y2="0.101" transform="translate(42.557 146.857)"/>
+    <line id="Line_251" data-name="Line 251" class="cls-3" x2="1.575" y2="1.575" transform="matrix(0.996, 0.087, -0.087, 0.996, 43.509, 152.719)"/>
+    <line id="Line_252" data-name="Line 252" class="cls-3" x1="3.149" y2="3.149" transform="matrix(0.996, 0.087, -0.087, 0.996, 45.215, 151.288)"/>
+  </g>
+</svg>

package/src/assets/icons/search.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="5560.293 5180 10.901 10.901">
+  <defs>
+    <style>
+      .cls-1, .cls-3 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #707070;
+        stroke-width: 2px;
+      }
+
+      .cls-2 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_32_1" data-name="Symbol 32 – 1" transform="translate(4404.5 5164.694)">
+    <g id="Ellipse_34" data-name="Ellipse 34" class="cls-1" transform="translate(1157.418 15.306)">
+      <ellipse class="cls-2" cx="4.638" cy="4.638" rx="4.638" ry="4.638"/>
+      <ellipse class="cls-3" cx="4.638" cy="4.638" rx="3.638" ry="3.638"/>
+    </g>
+    <line id="Line_130" data-name="Line 130" class="cls-1" x1="2.657" y2="2.657" transform="translate(1156.5 22.843)"/>
+  </g>
+</svg>

package/src/assets/icons/tick-grey.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="7766.972 5063.419 11.699 11.699">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #D7DBE0;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <path id="Path_2" data-name="Path 2" class="cls-1" d="M3416.588,131.119l5.188-.085-.124-9.23" transform="translate(5444.513 2561.418) rotate(45)"/>
+</svg>

package/src/assets/icons/tick.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="7766.972 5063.419 11.699 11.699">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #71be37;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <path id="Path_2" data-name="Path 2" class="cls-1" d="M3416.588,131.119l5.188-.085-.124-9.23" transform="translate(5444.513 2561.418) rotate(45)"/>
+</svg>

package/src/assets/icons/tick_circle.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="7513 5512 14 14">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #edffdd;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #71be37;
+      }
+
+      .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_3_63" data-name="Symbol 3 – 63" transform="translate(7240 4828)">
+    <g id="Ellipse_7" data-name="Ellipse 7" class="cls-1" transform="translate(273 684)">
+      <circle class="cls-3" cx="7" cy="7" r="7"/>
+      <circle class="cls-4" cx="7" cy="7" r="6.5"/>
+    </g>
+    <path id="Path_2" data-name="Path 2" class="cls-2" d="M3416.588,126.523l2.628-.043-.063-4.676" transform="translate(-2048.927 -1814.521) rotate(45)"/>
+  </g>
+</svg>

package/src/assets/icons/tick_circle_grey.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="7513 5512 14 14">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #D7DBE0;
+      }
+
+      .cls-1 {
+        stroke: #e1e6ed;
+      }
+
+      .cls-2{
+        stroke: white;
+      }
+
+      .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_3_63" data-name="Symbol 3 – 63" transform="translate(7240 4828)">
+    <g id="Ellipse_7" data-name="Ellipse 7" class="cls-1" transform="translate(273 684)">
+      <circle class="cls-3" cx="7" cy="7" r="7"/>
+      <circle class="cls-4" cx="7" cy="7" r="6.5"/>
+    </g>
+    <path id="Path_2" data-name="Path 2" class="cls-2" d="M3416.588,126.523l2.628-.043-.063-4.676" transform="translate(-2048.927 -1814.521) rotate(45)"/>
+  </g>
+</svg>

package/src/assets/icons/upload.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="7516 5379 14 14">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e2f8ff;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #189ed1;
+      }
+
+      .cls-2, .cls-4 {
+        fill: none;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Symbol_2_53" data-name="Symbol 2 – 53" transform="translate(6635 4814)">
+    <g id="Ellipse_13" data-name="Ellipse 13" class="cls-1" transform="translate(881 565)">
+      <circle class="cls-3" cx="7" cy="7" r="7"/>
+      <circle class="cls-4" cx="7" cy="7" r="6.5"/>
+    </g>
+    <path id="Path_3" data-name="Path 3" class="cls-2" d="M3499.352,466v2.1h5.181V466" transform="translate(-2613.853 106.124)"/>
+    <path id="Path_4" data-name="Path 4" class="cls-2" d="M3503.417,465.579v-3.173" transform="translate(-2615.342 106.986)"/>
+    <path id="Path_5" data-name="Path 5" class="cls-2" d="M3501.846,463.634l1.344-1.344,1.344,1.344" transform="translate(-2615.158 107)"/>
+  </g>
+</svg>

package/src/assets/img/airship.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 139.9 72.8" enable-background="new 0 0 139.9 72.8" xml:space="preserve">
+<g>
+	<path fill="#EE7076" d="M70,2.7c7.4,0,14.8,0.6,22.1,1.7c14.9,2.3,29.2,7,42.6,13.8c1.5,0.8,2.5,2.3,2.5,4v28.3
+		c0,1.7-0.9,3.2-2.5,4c-13.4,6.8-27.8,11.5-42.6,13.8c-7.3,1.1-14.8,1.7-22.1,1.7c-7.4,0-14.8-0.6-22.1-1.7
+		c-14.9-2.3-29.2-7-42.6-13.8c-1.5-0.8-2.5-2.3-2.5-4V22.3c0-1.7,0.9-3.2,2.5-4C18.6,11.4,32.9,6.8,47.8,4.4
+		C55.1,3.3,62.6,2.7,70,2.7 M70,0c-7.5,0-15.1,0.6-22.6,1.8C32.2,4.1,17.6,8.9,3.9,15.8l0,0C1.5,17.1,0,19.6,0,22.3v28.3
+		c0,2.7,1.5,5.2,3.9,6.4l0,0c13.7,7,28.3,11.7,43.4,14.1c7.4,1.2,15,1.8,22.6,1.8s15.1-0.6,22.6-1.8C107.7,68.7,122.3,64,136,57h0
+		c2.4-1.2,3.9-3.7,3.9-6.4V22.3c0-2.7-1.5-5.2-3.9-6.4l0,0c-13.7-7-28.3-11.7-43.4-14.1C85.1,0.6,77.5,0,70,0L70,0z"/>
+	<g>
+		<path fill="#EE7076" d="M135.9,3.7v2.4h-0.5V3.7h-0.8V3.3h2.1v0.4H135.9z M139.4,6.1V3.8L138.7,6h-0.4l-0.8-2.2v2.3h-0.5V3.3h0.8
+			l0.7,2l0.7-2h0.7v2.8H139.4z"/>
+	</g>
+	<g>
+		<path fill="#EE7076" d="M70.1,26.7c-2,0-3.6,1.6-3.6,3.6v1.4c0,0.9,0,1,0.6,2l4,7.1c0,0,0,0,0,0c0,0,0,0.1,0,0.2v1.4
+			c0,0.6-0.5,1.1-1,1.1c-0.6,0-1-0.5-1-1.1v-1c0-0.5-0.4-0.8-0.8-0.8h-0.9c-0.5,0-0.8,0.4-0.8,0.8v1c0,2,1.6,3.6,3.6,3.6
+			c2,0,3.6-1.6,3.6-3.6v-1.4c0-0.9,0-1-0.6-2l-4-7.1c0,0,0,0,0,0c0,0,0-0.1,0-0.2v-1.4c0-0.6,0.5-1,1-1c0.6,0,1,0.5,1,1v1
+			c0,0.5,0.4,0.8,0.8,0.8h0.9c0.5,0,0.8-0.4,0.8-0.8v-1C73.7,28.3,72.1,26.7,70.1,26.7z"/>
+		<path fill="#EE7076" d="M22.2,20.6c-0.2,0-0.4,0-0.6,0c-2.4,0-4.1,2.2-4.1,5.2l0,25.6c0,0.2,0.1,0.5,0.2,0.6
+			c0.1,0.2,0.3,0.3,0.5,0.3c0,0,0.1,0,0.1,0l1.2-0.2c0.5-0.1,0.8-0.5,0.8-1.1l0-13.2l3.5-0.1l0,12.6c0,0.2,0.1,0.4,0.2,0.6
+			c0.2,0.2,0.4,0.3,0.7,0.2l1.2-0.2c0.5-0.1,0.8-0.5,0.8-1l0-23.4C26.8,23.7,24.7,21,22.2,20.6z M23.9,26.4v8.1l-3.5-0.1V26
+			c0-1.2,0.8-2.1,1.8-2C23.1,24.1,23.9,25.2,23.9,26.4z"/>
+		<path fill="#EE7076" d="M38.6,23.5l-1.2-0.2c-0.5-0.1-0.9,0.3-0.9,0.8v24.6c0,0.4,0.3,0.8,0.7,0.8c0,0,0.1,0,0.1,0l1.2-0.2
+			c0.5-0.1,0.8-0.5,0.8-0.9V24.5C39.4,24,39,23.6,38.6,23.5z"/>
+		<path fill="#EE7076" d="M53.6,25.9l-3.2-0.5c-0.4-0.1-0.8,0-1.1,0.3c-0.2,0.2-0.4,0.5-0.4,0.8l0,20.3c0,0.2,0.1,0.4,0.2,0.5
+			c0.1,0.1,0.3,0.2,0.5,0.2c0,0,0.1,0,0.1,0l1.2-0.2c0.4-0.1,0.8-0.4,0.8-0.8v-8.8l1.7,0l0-0.2l0.1,0.2c0.5,0,0.9,0.1,1.2,0.4
+			c0.3,0.2,0.5,0.6,0.5,0.9v7c0,0.4,0.4,0.7,0.9,0.6l1.2-0.2c0.5-0.1,0.8-0.4,0.8-0.8v-6.7c0-0.9-0.4-1.8-1.2-2.4
+			c0.8-0.7,1.2-1.5,1.2-2.4l0-3.8C58.2,28.2,56.1,26.3,53.6,25.9z M55.3,29.9v4c0,0.3-0.2,0.6-0.5,0.9c-0.3,0.3-0.8,0.4-1.3,0.4
+			c0,0,0,0,0,0l-1.7,0v-7l1.7,0.2C54.5,28.4,55.3,29.1,55.3,29.9z"/>
+		<path fill="#EE7076" d="M90,25l-1.2,0.1c-0.4,0.1-0.8,0.4-0.8,0.8v9.2l-3.5,0v-8.8c0-0.4-0.4-0.7-0.9-0.6l-1.2,0.1
+			c-0.4,0.1-0.8,0.4-0.8,0.8v19.4c0,0.4,0.3,0.7,0.8,0.8l1.2,0.1c0.5,0.1,0.9-0.2,0.9-0.6v-8.8l3.5,0v9.2c0,0.4,0.3,0.8,0.8,0.8
+			l1.2,0.1c0,0,0.1,0,0.1,0c0.4,0,0.7-0.3,0.7-0.7V25.7C90.8,25.2,90.4,24.9,90,25z"/>
+		<path fill="#EE7076" d="M102.6,23.3l-1.2,0.1c-0.4,0.1-0.8,0.5-0.8,0.9l0,24c0,0.4,0.4,0.8,0.8,0.9l1.2,0.2c0,0,0.1,0,0.1,0
+			c0.4,0,0.8-0.3,0.8-0.8l0-24.6C103.5,23.7,103.1,23.3,102.6,23.3z"/>
+		<path fill="#EE7076" d="M122.8,26.6c0-3-2.1-5.3-4.7-5l-3.8,0.5c-0.5,0.1-0.8,0.6-0.8,1v27.1c0,0.5,0.4,0.9,0.8,1l1.2,0.1
+			c0,0,0.1,0,0.1,0c0.4,0,0.7-0.4,0.7-0.9V38.2l1.8,0c2.5,0,4.6-2.5,4.6-5.5L122.8,26.6z M119.9,32.8c0,1.2-0.8,2.1-1.7,2.1l-1.8,0
+			V25l1.8-0.2c1-0.1,1.7,0.8,1.7,1.9L119.9,32.8z"/>
+	</g>
+</g>
+</svg>

package/src/assets/img/toggle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.74 27"><defs><style>.cls-1{fill:#f9665a;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M.51,5.62H1.94V2.81a.51.51,0,0,1,.51-.52H6a.51.51,0,0,1,.51.52V5.62H8.68a.51.51,0,0,1,.51.51V8.92a.51.51,0,0,1-.51.51H6.47v5.65c0,1.21.33,1.73,1.45,1.73h.13c.29,0,.43.2.52.51l1,2.74a.51.51,0,0,1-.22.62.46.46,0,0,1-.23.06H7.41c-3.69,0-5.47-.82-5.47-5.08V9.43H.51A.51.51,0,0,1,0,8.92V6.13A.51.51,0,0,1,.51,5.62Z"/><path class="cls-1" d="M57.81.65a.52.52,0,0,1,.51-.51L61.83,0a.51.51,0,0,1,.51.51V15.08c0,1.21.34,1.73,1.46,1.73h.13c.28,0,.43.2.51.51l1,2.75a.5.5,0,0,1-.24.62.54.54,0,0,1-.22,0H63.28c-3.69,0-5.47-.82-5.47-5.08Z"/><path class="cls-1" d="M24.37,14c0,4.23-2,7-6.65,7s-6.66-2.78-6.66-7V12.27c0-4.62,2.42-6.95,6.66-6.95s6.65,2.33,6.65,7Zm-4.54-.22V12.48c0-2.23-.48-3.35-2.11-3.35s-2.12,1.12-2.12,3.35v1.33c0,2,.24,3.42,2.12,3.42S19.83,15.81,19.83,13.81Z"/><path class="cls-1" d="M35.68,5.83l3.5-.14a.51.51,0,0,1,.52.51V20.77c0,5.44-3.09,6.23-6.78,6.23-2.7,0-4.48-.58-5.91-2.38a.52.52,0,0,1,.11-.74l2.17-1.57a.53.53,0,0,1,.67.05,3.19,3.19,0,0,0,2.36.89c2.12,0,2.84-.27,2.84-2.48v-.6a4.61,4.61,0,0,1-2.84.87c-3.87,0-5.93-2.78-5.93-6.83V12.09c0-4.44,2.42-6.77,5.93-6.77C35,5.32,35.63,5.81,35.68,5.83Zm-.52,8.44V12.15c0-2-.57-3-2.11-3s-2.12,1.12-2.12,3.35v1.33c0,2,.24,3.42,2.12,3.42C34.77,17.23,35.16,16,35.16,14.27Z"/><path class="cls-1" d="M78.1,18.16a.51.51,0,0,1,.13.71C77.14,20.4,75.4,21,72.88,21,68.1,21,66,18,66,14.21V12.09c0-4.69,2.42-6.77,6.35-6.77,4.39,0,6.35,2.51,6.35,7.22v1.27a.51.51,0,0,1-.51.52H70.58c.06,1.72.48,2.9,2.33,2.9a2.14,2.14,0,0,0,2-.76.52.52,0,0,1,.69-.08ZM70.61,11.3h3.6c-.09-1.66-.73-2.17-1.79-2.17S70.73,9.94,70.61,11.3Z"/><path class="cls-1" d="M54.61,5.69l-3.51.14s-.71-.51-3.35-.51c-3.51,0-5.93,2-5.93,6.49v.24h4.54c0-2,.52-2.92,2.11-2.92s2.12,1,2.12,3v2.12c0,1.75-.39,3-2.12,3s-2.11-1.05-2.11-2.69H41.82v.33c0,4.05,2.06,6.17,5.93,6.17a4.63,4.63,0,0,0,2.84-.87v.6c0,2.21-.73,2.48-2.84,2.48a3.21,3.21,0,0,1-2.37-.89.52.52,0,0,0-.66-.05l-2.18,1.57a.53.53,0,0,0-.1.74c1.43,1.8,3.21,2.38,5.91,2.38,3.69,0,6.78-.79,6.78-6.23V6.2A.51.51,0,0,0,54.61,5.69Z"/><rect class="cls-1" x="39.69" y="12.04" width="2.15" height="2.54" transform="translate(81.53 26.62) rotate(180)"/></g></g></svg>

package/src/components/badges/ToggleBadge.vue

@@ -0,0 +1,23 @@
+<template>
+    <span :class="[ 'toggle-badge', badgeStyle]"><slot></slot></span>
+</template>
+
+<script>
+
+export default {
+    name: 'ButtonPrimary',
+    props: {
+        size: {
+            type: String,
+            default: "small"
+        },
+        badgeStyle:{
+            type:String,
+            default:'neutral'
+        }
+    },
+    computed: {
+        
+    }
+}
+</script>

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="toggle-breadcrumb" v-if="breadcrumb_computed">
+    <div v-for="(crumb, index) in breadcrumb_computed" :key="index">
+      <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
+      <NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
+      <i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
+      <h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+
+  mixins: [],
+  props: {
+    isNuxt: {
+      type: Boolean,
+      default: false
+    },
+    breadcrumb: {
+      type: Array,
+      required: false
+    }
+  },
+
+  data: function () {
+
+
+    return {};
+  },
+
+  computed: {
+
+    breadcrumb_computed() {
+      return this.isNuxt ?  this.breadcrumb : this.$route.meta.breadcrumb
+    },
+  }
+
+}
+</script>

package/src/components/buttons/ToggleButton.vue

@@ -0,0 +1,88 @@
+<template>
+    <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini}]">
+        <button
+            v-if="!$slots.default"
+            :type="type"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading}]"
+            :disabled="(loading || disabled)"
+            @click="click"
+            >
+            <div class="toggle-button-loader" v-if="loading" ></div>
+            <span v-html="buttonText" v-if="!isMini"/>
+        </button>
+        <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled}]">
+            <div class="toggle-button-loader" v-if="loading" ></div>
+            <div class="toggle-button-a-border" />
+            <!-- 
+                @slot String of button text
+            -->
+            <slot>{{buttonText}}</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ButtonPrimary',
+    props: {
+        /**
+         * The test to display in side the button
+         */
+        buttonText: {
+            type: String,
+            default: "button"
+        },
+        /**
+         * The HTML button type i.e. `submit` or `button`
+         */
+        type: {
+            type: String,
+            default: "text"
+        },
+        /**
+         * If it's a link, then the URL of the link
+         */
+        href:{
+            type: String,
+            default:""
+        },
+        /**
+         * Should the button be disabled?
+         */
+        disabled: {
+            default: false
+        },
+        /**
+         * Is the button in a loading state?
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The button visual style out of: `neutral`, `confirm`, `abort`
+         */
+        buttonStyle:{
+            type:String,
+            default:'confirm'
+        }
+    },
+    computed: {
+        isMini()
+        {
+            return this.buttonStyle.includes('mini');
+        }
+    },
+    methods: {
+        click(){
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/components/buttons/ToggleFeatureButton.vue

@@ -0,0 +1,68 @@
+<template>
+  <button class="toggle-feature-button" @click="click">
+    <div class="toggle-feature-button-image">
+      <img :src="logoUrl" :alt="logoAlt">
+    </div>
+    <div
+      class="toggle-feature-button-label">{{ label }}
+    </div>
+    <div class="toggle-feature-button-icon">
+      <ToggleButton :buttonStyle="iconStyle"/>
+    </div>
+  </button>
+</template>
+
+<script>
+import ToggleButton from './ToggleButton';
+
+export default {
+  name: 'ToggleFeatureButton',
+  components: {
+    ToggleButton,
+  },
+  props: {
+    /**
+     * The url of the logo
+     */
+    logoUrl: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Logo alt
+     */
+    logoAlt: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The label for the button
+     */
+    label: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Icon style (mini_delete etc)
+     */
+    iconStyle: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    click() {
+      /**
+       * Emitted when the button is clicked.
+       * @event click
+       * @type {Event}
+       */
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/elements/ToggleLineBreak.vue

@@ -0,0 +1,9 @@
+<template>
+  <hr class="toggle-line-break"/>
+</template>
+
+<script>
+export default {
+name: "LineBreak"
+}
+</script>