toggle-components-library 1.28.5-beta.1 → 1.28.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.28.5-beta.1",
+  "version": "1.28.6-beta.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/img/champions.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="390.982" height="49.433" viewBox="0 0 390.982 49.433">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1018" data-name="Rectangle 1018" width="390.982" height="49.433" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_212" data-name="Group 212" transform="translate(0 0)">
+    <g id="Group_211" data-name="Group 211" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Path_21" data-name="Path 21" d="M.941,11.917h2.6V6.768a.941.941,0,0,1,.941-.941h6.422a.941.941,0,0,1,.941.941v5.149H15.89a.941.941,0,0,1,.941.941v5.093a.942.942,0,0,1-.941.942H11.848V29.246c0,2.214.61,3.156,2.658,3.156h.239c.52,0,.788.373.941.941l1.8,5.008a.93.93,0,0,1-.4,1.144.94.94,0,0,1-.433.105H13.564c-6.754,0-10.021-1.5-10.021-9.3v-11.4H.941A.942.942,0,0,1,0,17.951V12.858a.941.941,0,0,1,.941-.941" transform="translate(0 -1.628)" fill="#765401"/>
+      <path id="Path_22" data-name="Path 22" d="M146.871,1.193a.955.955,0,0,1,.941-.941L154.234,0a.941.941,0,0,1,.941.941V27.617c0,2.215.61,3.156,2.658,3.156h.239c.52,0,.788.373.941.941l1.808,5.036a.908.908,0,0,1-.437,1.13.942.942,0,0,1-.4.091h-3.089c-6.754,0-10.021-1.5-10.021-9.3Z" transform="translate(-41.034 0)" fill="#765401"/>
+      <path id="Path_23" data-name="Path 23" d="M52.47,29.455c0,7.751-3.654,12.844-12.18,12.844-8.415,0-12.181-5.093-12.181-12.844V26.244c0-8.471,4.43-12.734,12.181-12.734,7.862,0,12.18,4.263,12.18,12.734Zm-8.3-.388V26.632c0-4.1-.886-6.146-3.875-6.146s-3.875,2.049-3.875,6.146v2.436c0,3.654.443,6.256,3.875,6.256s3.875-2.6,3.875-6.256" transform="translate(-7.854 -3.774)" fill="#765401"/>
+      <path id="Path_24" data-name="Path 24" d="M84.052,14.444l6.422-.256a.941.941,0,0,1,.941.941V41.8c0,9.965-5.647,11.405-12.4,11.405-4.943,0-8.211-1.054-10.826-4.364a.942.942,0,0,1,.192-1.343l3.981-2.885a.947.947,0,0,1,1.217.105,5.883,5.883,0,0,0,4.329,1.621c3.875,0,5.2-.5,5.2-4.54V40.693a8.441,8.441,0,0,1-5.2,1.606c-7.087,0-10.852-5.094-10.852-12.513V25.911c0-8.139,4.43-12.4,10.852-12.4,4.835,0,6.059.9,6.145.935M83.111,29.9V26.022c0-3.71-1.052-5.536-3.875-5.536-2.99,0-3.875,2.049-3.875,6.145v2.436c0,3.654.443,6.256,3.875,6.256,3.156,0,3.875-2.214,3.875-5.425" transform="translate(-18.734 -3.774)" fill="#765401"/>
+      <path id="Path_25" data-name="Path 25" d="M189.859,37.021a.935.935,0,0,1,.241,1.3c-1.989,2.811-5.17,3.98-9.8,3.98-8.748,0-12.512-5.647-12.512-12.512V25.912c0-8.582,4.429-12.4,11.626-12.4,8.028,0,11.626,4.6,11.626,13.232v2.325a.941.941,0,0,1-.941.941H176.092c.111,3.156.886,5.315,4.263,5.315,2.114,0,2.876-.512,3.622-1.387a.949.949,0,0,1,1.263-.149ZM176.148,24.472h6.589c-.166-3.045-1.329-3.986-3.267-3.986-2.16,0-3.1,1.5-3.322,3.986" transform="translate(-46.878 -3.774)" fill="#765401"/>
+      <path id="Path_26" data-name="Path 26" d="M129.671,14.189l-6.422.256c-.053-.037-1.312-.935-6.145-.935-6.423,0-10.852,3.741-10.852,11.879v.45h8.307c0-3.574.95-5.353,3.874-5.353,2.823,0,3.875,1.827,3.875,5.536V29.9c0,3.211-.72,5.425-3.875,5.425-3.14,0-3.875-1.919-3.875-4.922h-8.305v.591c0,7.419,3.765,11.307,10.852,11.307a8.447,8.447,0,0,0,5.2-1.606V41.8c0,4.041-1.329,4.54-5.2,4.54a5.884,5.884,0,0,1-4.329-1.621.946.946,0,0,0-1.216-.105L107.576,47.5a.942.942,0,0,0-.192,1.343c2.615,3.31,5.882,4.364,10.826,4.364,6.754,0,12.4-1.44,12.4-11.405V15.13a.941.941,0,0,0-.941-.941" transform="translate(-29.685 -3.774)" fill="#765401"/>
+      <rect id="Rectangle_1017" data-name="Rectangle 1017" width="3.937" height="4.656" transform="translate(72.664 22.036)" fill="#fff"/>
+      <path id="Path_27" data-name="Path 27" d="M229.148,36.607a1.172,1.172,0,0,1,.27,1.676c-1.983,2.53-4.834,3.643-9.354,3.643-7.891,0-12.214-4.972-12.214-12.214V25.929c0-7.944,4.324-12.1,12.755-12.1,3.777,0,6.877,1.226,8.814,3.642a1.167,1.167,0,0,1-.266,1.676l-4.189,2.917a1.172,1.172,0,0,1-1.531-.17,3.846,3.846,0,0,0-3.044-1.256c-3.567,0-4.432,2-4.432,6V29.01c0,3.566.432,6.106,4.432,6.106a3.845,3.845,0,0,0,3.146-1.208,1.155,1.155,0,0,1,1.51-.148Z" transform="translate(-58.071 -3.862)" fill="#fff"/>
+      <path id="Path_28" data-name="Path 28" d="M243.674.324h5.758A1.175,1.175,0,0,1,250.606,1.5V12.43a7.336,7.336,0,0,1,5.513-2.378c5.3,0,9.944,2.378,9.944,10.592v15.8a1.174,1.174,0,0,1-1.175,1.174H259.13a1.174,1.174,0,0,1-1.174-1.174V22.212c0-3.621-.865-5.242-3.459-5.242-2.81,0-3.891,1.729-3.891,5.188V36.44a1.174,1.174,0,0,1-1.175,1.174h-5.758A1.174,1.174,0,0,1,242.5,36.44V1.5A1.174,1.174,0,0,1,243.674.324" transform="translate(-67.751 -0.09)" fill="#fff"/>
+      <path id="Path_29" data-name="Path 29" d="M289.477,41.926c-5.3,0-9.4-2.918-9.4-8.593s4.324-8.43,9.944-8.43h4.81v-.811c0-2.648-.486-3.675-4.27-3.675-1.859,0-2.923.277-3.772,1.108a1.168,1.168,0,0,1-1.482.121l-3.821-2.658a1.165,1.165,0,0,1-.263-1.679c2.095-2.581,5.142-3.485,10.257-3.485,7.026,0,11.241,2,11.241,10.322V40.211a1.174,1.174,0,0,1-1.174,1.175H296Zm5.351-11.3h-3.675c-2.053,0-3.188.7-3.188,2.486,0,1.567,1.242,2.432,3.3,2.432,2.7,0,3.566-1.621,3.566-4.107Z" transform="translate(-78.249 -3.862)" fill="#fff"/>
+      <path id="Path_30" data-name="Path 30" d="M331.814,13.824a8.842,8.842,0,0,1,7.4,3.4,10.053,10.053,0,0,1,7.621-3.4c5.944,0,9.349,3.566,9.349,10.592v15.8a1.174,1.174,0,0,1-1.174,1.174h-5.758a1.174,1.174,0,0,1-1.175-1.174V25.984c0-3.621-.918-5.242-3.459-5.242-1.945,0-3.35,1.188-3.35,4.7V40.212a1.174,1.174,0,0,1-1.174,1.174h-5.758a1.174,1.174,0,0,1-1.174-1.174V25.984c0-4-1.3-5.242-3.351-5.242-2,0-3.459,1.3-3.459,5.188V40.212a1.174,1.174,0,0,1-1.175,1.174h-5.758a1.174,1.174,0,0,1-1.174-1.174V15.538a1.174,1.174,0,0,1,1.174-1.174h5.542Z" transform="translate(-88.915 -3.862)" fill="#fff"/>
+      <path id="Path_31" data-name="Path 31" d="M391.1,13.824c6.106,0,10.322,4.377,10.322,12.106v3.783c0,7.025-3.567,12.214-10.376,12.214a10.354,10.354,0,0,1-5.3-1.081v9.634a1.174,1.174,0,0,1-1.174,1.175h-5.759a1.175,1.175,0,0,1-1.174-1.175V15.538a1.174,1.174,0,0,1,1.174-1.174ZM393.32,29.01V26.631c0-4-.865-6-3.783-6s-3.783,2-3.783,6V29.82c0,3.135.649,5.3,3.783,5.3,3.35,0,3.783-2.541,3.783-6.107" transform="translate(-105.51 -3.862)" fill="#fff"/>
+      <path id="Path_32" data-name="Path 32" d="M418.2.324h6.3A1.175,1.175,0,0,1,425.67,1.5V6.717A1.175,1.175,0,0,1,424.5,7.89h-6.3a1.174,1.174,0,0,1-1.174-1.174V1.5A1.174,1.174,0,0,1,418.2.324m.27,10.269h5.758a1.175,1.175,0,0,1,1.175,1.174V36.44a1.174,1.174,0,0,1-1.175,1.174h-5.758a1.174,1.174,0,0,1-1.174-1.174V11.767a1.174,1.174,0,0,1,1.174-1.174" transform="translate(-116.511 -0.09)" fill="#fff"/>
+      <path id="Path_33" data-name="Path 33" d="M459.176,29.388c0,7.566-3.566,12.539-11.89,12.539-8.214,0-11.889-4.972-11.889-12.539V26.254c0-8.269,4.323-12.43,11.889-12.43,7.675,0,11.89,4.161,11.89,12.43Zm-8.107-.378V26.631c0-4-.864-6-3.783-6s-3.782,2-3.782,6V29.01c0,3.566.433,6.107,3.782,6.107s3.783-2.541,3.783-6.107" transform="translate(-121.644 -3.862)" fill="#fff"/>
+      <path id="Path_34" data-name="Path 34" d="M487.641,13.824c5.3,0,9.944,2.378,9.944,10.592v15.8a1.174,1.174,0,0,1-1.175,1.174h-5.758a1.174,1.174,0,0,1-1.174-1.174V25.984c0-3.621-.865-5.242-3.46-5.242-2.81,0-3.891,1.729-3.891,5.188V40.212a1.174,1.174,0,0,1-1.175,1.174H475.2a1.174,1.174,0,0,1-1.174-1.174V15.538a1.174,1.174,0,0,1,1.174-1.174h5.542Z" transform="translate(-132.436 -3.862)" fill="#fff"/>
+      <path id="Path_35" data-name="Path 35" d="M528.586,22.024a1.186,1.186,0,0,1-1.477-.045,5.4,5.4,0,0,0-3.961-1.237c-1.134,0-2.539.216-2.539,1.4,0,.919.865,1.351,3.35,1.838,7.405,1.405,10.161,4.378,10.161,9.349,0,5.4-3.837,8.593-10.809,8.593-4.916,0-8.286-.946-10.682-3.49a1.166,1.166,0,0,1,.19-1.732l4.379-3.171a1.175,1.175,0,0,1,1.515.123c.842.824,2.028,1.354,4.437,1.354,1.784,0,2.864-.486,2.864-1.46,0-1.027-.919-1.4-3.458-1.945-6.107-1.351-10.052-3.837-10.052-9.134,0-5.4,3.89-8.647,10.808-8.647,3.974,0,7.515.826,9.723,3.491a1.166,1.166,0,0,1-.241,1.678Z" transform="translate(-143.137 -3.862)" fill="#fff"/>
+    </g>
+  </g>
+</svg>

package/src/assets/img/fulfilment.svg

@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="393" height="54.012" viewBox="0 0 393 54.012">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1033" data-name="Rectangle 1033" width="226" height="37.13" fill="none"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <rect id="Rectangle_1035" data-name="Rectangle 1035" width="157.518" height="54.012" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_222" data-name="Group 222" transform="translate(-1483.5 -771.666)">
+    <g id="Group_219" data-name="Group 219" transform="translate(1650.5 775.101)">
+      <g id="Group_218" data-name="Group 218" transform="translate(0 0)" clip-path="url(#clip-path)">
+        <path id="Path_49" data-name="Path 49" d="M23.076.742V6.563a.742.742,0,0,1-.742.742H9.527a.742.742,0,0,0-.742.742v6.031a.742.742,0,0,0,.742.742h9.995a.74.74,0,0,1,.742.74v5.821a.742.742,0,0,1-.742.742H9.527a.742.742,0,0,0-.742.742V35.777a.742.742,0,0,1-.742.742H.742A.742.742,0,0,1,0,35.777V1.742A1.742,1.742,0,0,1,1.742,0H22.334a.742.742,0,0,1,.742.742" transform="translate(0 -0.001)" fill="#efefef"/>
+        <path id="Path_50" data-name="Path 50" d="M20.946,31.533c-5.187,0-9.738-2.541-9.738-10.48V5.281a.742.742,0,0,1,.742-.742H18.4a.742.742,0,0,1,.742.742V19.57c0,3.6.846,5.187,3.492,5.187,2.7,0,3.7-1.482,3.7-5.134V5.281a.742.742,0,0,1,.742-.742H33.54a.742.742,0,0,1,.742.742V30.872a.742.742,0,0,1-.742.742L26.5,31Z" transform="translate(13.625 5.517)" fill="#efefef"/>
+        <path id="Path_51" data-name="Path 51" d="M24.583,0h6.454a.742.742,0,0,1,.742.742v25.4c0,2.557.973,3.419,2.692,3.574a.727.727,0,0,1,.643.733v5.313a.759.759,0,0,1-.767.749c-6.862-.106-10.507-1.73-10.507-8.621V.742A.742.742,0,0,1,24.583,0" transform="translate(28.983 -0.001)" fill="#efefef"/>
+        <path id="Path_52" data-name="Path 52" d="M33.342,10.055V8.889C33.342,1.429,36.466,0,42.922,0h1.511a.815.815,0,0,1,.818.815V6.064a.817.817,0,0,1-.818.815h-.612c-1.959,0-2.541.9-2.541,3.018v.157h11.3a2.464,2.464,0,0,1,2.464,2.464V35.777a.742.742,0,0,1-.742.742H47.846a.742.742,0,0,1-.742-.742V17.466a.742.742,0,0,0-.742-.74H42.023a.742.742,0,0,0-.742.74v18.31a.742.742,0,0,1-.742.742H34.084a.742.742,0,0,1-.742-.742V17.466a.742.742,0,0,0-.742-.74H30.7a.742.742,0,0,1-.742-.742V10.8a.742.742,0,0,1,.742-.742Z" transform="translate(36.415 -0.001)" fill="#efefef"/>
+        <path id="Path_53" data-name="Path 53" d="M43.736,0h6.454a.742.742,0,0,1,.742.742v25.4c0,2.557.973,3.419,2.692,3.574a.727.727,0,0,1,.643.733v5.313a.759.759,0,0,1-.767.749c-6.862-.106-10.507-1.73-10.507-8.621V.742A.742.742,0,0,1,43.736,0" transform="translate(52.267 -0.001)" fill="#efefef"/>
+        <path id="Path_54" data-name="Path 54" d="M92.146,26.858a.756.756,0,0,1,.2,1.028c-1.894,2.781-4.961,3.937-9.459,3.937-8.364,0-11.962-5.4-11.962-11.962V16.154c0-8.2,4.234-11.854,11.114-11.854,7.675,0,11.116,4.394,11.116,12.649v2.38a.742.742,0,0,1-.742.742H79.657a.74.74,0,0,0-.742.791c.213,2.581,1.09,4.29,4.028,4.29,2.1,0,2.805-.527,3.545-1.422a.741.741,0,0,1,.995-.135ZM78.921,14.78h6.3c-.16-2.911-1.272-3.811-3.124-3.811-2.063,0-2.962,1.429-3.175,3.811" transform="translate(86.227 5.227)" fill="#efefef"/>
+        <path id="Path_55" data-name="Path 55" d="M96.277,4.346c5.187,0,9.738,2.329,9.738,10.374V30.6a.742.742,0,0,1-.742.742H98.819a.742.742,0,0,1-.742-.742V16.256c0-3.547-.846-5.134-3.388-5.134-2.752,0-3.809,1.691-3.809,5.078V30.6a.742.742,0,0,1-.742.742H83.683a.742.742,0,0,1-.742-.742V5a.742.742,0,0,1,.742-.742l6.984.612Z" transform="translate(100.83 5.181)" fill="#efefef"/>
+        <path id="Path_56" data-name="Path 56" d="M95.48,7.732h1.9a.742.742,0,0,0,.742-.742V2.653a.742.742,0,0,1,.742-.742h6.454a.742.742,0,0,1,.742.742V6.989a.742.742,0,0,0,.742.742h2.679a.742.742,0,0,1,.742.742v5.187a.742.742,0,0,1-.742.742h-2.679a.742.742,0,0,0-.742.74V24.3c0,2.116.583,3.016,2.541,3.016h2.222v6.14a.742.742,0,0,1-.742.742H107.7c-6.456,0-9.578-1.429-9.578-8.892V15.143a.742.742,0,0,0-.742-.74h-1.9a.742.742,0,0,1-.742-.742V8.474a.742.742,0,0,1,.742-.742" transform="translate(115.172 2.323)" fill="#efefef"/>
+        <rect id="Rectangle_1032" data-name="Rectangle 1032" width="36.353" height="23.515" transform="translate(113.707 9.937)" fill="#f9665a"/>
+        <path id="Path_57" data-name="Path 57" d="M88.485,31.356a2.928,2.928,0,0,1-2.928-2.928V10.877c-.972.727-2.038,1.509-3.143,2.3-7.945,5.653-10.72,6.415-12.386,6.415-1.437,0-3.2-.667-5.9-2.229-1.76-1.018-3.912-2.425-6.4-4.181-1.136-.8-2.234-1.6-3.233-2.343V28.429a2.928,2.928,0,1,1-5.855,0V4.914a2.928,2.928,0,0,1,4.749-2.292c.034.027,3.5,2.776,7.407,5.554,6.645,4.722,8.792,5.438,9.246,5.545.455-.1,2.621-.773,9.253-5.516,3.9-2.786,7.316-5.541,7.35-5.569a2.928,2.928,0,0,1,4.766,2.279V28.429A2.928,2.928,0,0,1,88.485,31.356Z" transform="translate(61.745 5.025)" fill="#efefef"/>
+      </g>
+    </g>
+    <g id="Group_221" data-name="Group 221" transform="translate(1483.5 771.666)">
+      <g id="Group_220" data-name="Group 220" transform="translate(0 0)" clip-path="url(#clip-path-2)">
+        <path id="Path_57-2" data-name="Path 57" d="M1.028,12.481H3.871V6.855A1.029,1.029,0,0,1,4.9,5.827h7.017a1.028,1.028,0,0,1,1.028,1.028v5.626h4.416a1.029,1.029,0,0,1,1.028,1.028v5.565A1.029,1.029,0,0,1,17.361,20.1H12.945V31.416c0,2.42.666,3.448,2.9,3.448h.261c.568,0,.861.408,1.028,1.028L19.1,41.363a1.016,1.016,0,0,1-.435,1.25,1.027,1.027,0,0,1-.473.115H14.821c-7.38,0-10.949-1.634-10.949-10.163V20.1H1.028A1.029,1.029,0,0,1,0,19.074V13.509a1.029,1.029,0,0,1,1.028-1.028" transform="translate(0 -1.239)" fill="#2560b7"/>
+        <path id="Path_58" data-name="Path 58" d="M146.871,1.3A1.043,1.043,0,0,1,147.9.275L154.916,0a1.028,1.028,0,0,1,1.028,1.028V30.176c0,2.42.666,3.449,2.9,3.449h.261c.568,0,.861.408,1.028,1.028l1.976,5.5a.992.992,0,0,1-.478,1.235,1.029,1.029,0,0,1-.441.1H157.82c-7.38,0-10.949-1.634-10.949-10.163Z" transform="translate(-31.229 0)" fill="#2560b7"/>
+        <path id="Path_59" data-name="Path 59" d="M54.727,30.932c0,8.469-3.992,14.034-13.308,14.034-9.195,0-13.309-5.565-13.309-14.034V27.424c0-9.256,4.84-13.914,13.309-13.914,8.59,0,13.308,4.658,13.308,13.914Zm-9.074-.424V27.847c0-4.477-.968-6.715-4.234-6.715s-4.234,2.238-4.234,6.715v2.661c0,3.993.484,6.836,4.234,6.836s4.234-2.843,4.234-6.836" transform="translate(-5.977 -2.873)" fill="#2560b7"/>
+        <path id="Path_60" data-name="Path 60" d="M85.627,14.531l7.017-.28a1.028,1.028,0,0,1,1.028,1.028V44.423c0,10.889-6.17,12.462-13.55,12.462-5.4,0-8.971-1.151-11.829-4.768a1.03,1.03,0,0,1,.209-1.468l4.35-3.152a1.035,1.035,0,0,1,1.33.115,6.428,6.428,0,0,0,4.73,1.772c4.234,0,5.686-.544,5.686-4.96V43.212a9.223,9.223,0,0,1-5.686,1.754c-7.743,0-11.857-5.566-11.857-13.672V27.06c0-8.893,4.84-13.551,11.857-13.551,5.282,0,6.62.982,6.715,1.022M84.6,31.415V27.181c0-4.053-1.15-6.049-4.234-6.049-3.267,0-4.234,2.238-4.234,6.715v2.662c0,3.992.484,6.835,4.234,6.835,3.448,0,4.234-2.42,4.234-5.928" transform="translate(-14.258 -2.872)" fill="#2560b7"/>
+        <path id="Path_61" data-name="Path 61" d="M191.9,39.2a1.022,1.022,0,0,1,.264,1.419c-2.173,3.072-5.649,4.349-10.708,4.349-9.558,0-13.671-6.171-13.671-13.671V27.061c0-9.377,4.839-13.551,12.7-13.551,8.771,0,12.7,5.021,12.7,14.458v2.541a1.029,1.029,0,0,1-1.028,1.028h-15.3c.121,3.448.968,5.808,4.658,5.808,2.31,0,3.142-.559,3.957-1.516a1.037,1.037,0,0,1,1.38-.163ZM176.922,25.487h7.2c-.182-3.327-1.452-4.356-3.569-4.356-2.36,0-3.388,1.634-3.63,4.356" transform="translate(-35.677 -2.873)" fill="#2560b7"/>
+        <path id="Path_62" data-name="Path 62" d="M131.841,14.251l-7.017.28c-.057-.04-1.433-1.022-6.715-1.022-7.018,0-11.857,4.087-11.857,12.98v.492h9.076c0-3.905,1.039-5.849,4.233-5.849,3.085,0,4.234,2,4.234,6.049v4.234c0,3.509-.787,5.928-4.234,5.928-3.431,0-4.234-2.1-4.234-5.378h-9.074v.646c0,8.106,4.114,12.355,11.857,12.355a9.229,9.229,0,0,0,5.686-1.754v1.211c0,4.416-1.452,4.96-5.686,4.96a6.429,6.429,0,0,1-4.73-1.772,1.033,1.033,0,0,0-1.329-.115l-4.35,3.152a1.029,1.029,0,0,0-.209,1.468c2.857,3.616,6.427,4.768,11.829,4.768,7.38,0,13.551-1.573,13.551-12.462V15.28a1.029,1.029,0,0,0-1.028-1.028" transform="translate(-22.593 -2.872)" fill="#2560b7"/>
+        <rect id="Rectangle_1034" data-name="Rectangle 1034" width="4.302" height="5.087" transform="translate(79.396 24.078)" fill="#f9665a"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/img/tickets.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372.037" height="61.281" viewBox="0 0 372.037 61.281">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_1026" data-name="Rectangle 1026" width="372.037" height="61.281" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_215" data-name="Group 215" transform="translate(0 0)">
+    <g id="Group_214" data-name="Group 214" transform="translate(0 0)" clip-path="url(#clip-path)">
+      <path id="Path_36" data-name="Path 36" d="M313.6,15.126l-8.255,10.758a1.287,1.287,0,0,0-.076,1.458l10.592,17.249a1.288,1.288,0,0,1-1.1,1.962h-8.512a1.287,1.287,0,0,1-1.088-.6l-6.107-9.77a1.751,1.751,0,0,0-2.732-.3l-.028.029a1.287,1.287,0,0,0-.27.787v8.568a1.288,1.288,0,0,1-1.286,1.288h-7.474a1.289,1.289,0,0,1-1.289-1.288V1.611A1.288,1.288,0,0,1,287.264.324h7.474a1.287,1.287,0,0,1,1.286,1.287V20.89c0,1.7,1.3,2.377,2.26.979l4.871-7.169a3.8,3.8,0,0,1,3.13-1.646h6.288a1.288,1.288,0,0,1,1.023,2.072" transform="translate(-30.502 -0.034)" fill="#fff"/>
+      <path id="Path_37" data-name="Path 37" d="M406.052,23.6a1.516,1.516,0,0,1-1.889-.058c-1.128-1.008-2.522-1.583-5.065-1.583-1.452,0-3.248.277-3.248,1.8,0,1.176,1.105,1.728,4.284,2.35,9.469,1.8,12.995,5.6,12.995,11.956,0,6.913-4.907,10.99-13.824,10.99-6.29,0-10.6-1.21-13.665-4.467a1.486,1.486,0,0,1,.241-2.209l5.607-4.06a1.5,1.5,0,0,1,1.932.155c1.076,1.057,2.593,1.734,5.677,1.734,2.281,0,3.663-.622,3.663-1.866,0-1.313-1.175-1.8-4.423-2.488-7.81-1.728-12.855-4.907-12.855-11.68,0-6.912,4.976-11.059,13.823-11.059,5.084,0,9.612,1.057,12.436,4.468a1.488,1.488,0,0,1-.306,2.14Z" transform="translate(-41.092 -1.398)" fill="#fff"/>
+      <path id="Path_38" data-name="Path 38" d="M348.563,42.362a1.16,1.16,0,0,1,.3,1.61c-2.466,3.485-6.409,4.934-12.149,4.934-10.844,0-15.511-7-15.511-15.511v-4.8c0-10.639,5.49-15.374,14.413-15.374,9.952,0,14.413,5.7,14.413,16.4V32.5a1.167,1.167,0,0,1-1.167,1.167H331.5c.138,3.912,1.1,6.589,5.285,6.589,2.621,0,3.565-.634,4.49-1.72a1.177,1.177,0,0,1,1.566-.185Zm-17-15.557h8.168c-.206-3.775-1.647-4.942-4.05-4.942-2.677,0-3.844,1.854-4.118,4.942" transform="translate(-34.26 -1.409)" fill="#fff"/>
+      <path id="Path_39" data-name="Path 39" d="M358.713,13.085h2.712V7.231a1.66,1.66,0,0,1,1.66-1.66h6.927a1.66,1.66,0,0,1,1.661,1.66v5.854h4.488a1.66,1.66,0,0,1,1.66,1.66v5.288a1.66,1.66,0,0,1-1.66,1.66h-4.488V34.468c0,2.731.751,3.893,3.279,3.893h1.21a1.66,1.66,0,0,1,1.66,1.66v5.561a1.66,1.66,0,0,1-1.66,1.66H373.79c-8.334,0-12.365-1.845-12.365-11.477V21.692h-2.712a1.66,1.66,0,0,1-1.66-1.66V14.745a1.66,1.66,0,0,1,1.66-1.66" transform="translate(-38.084 -0.594)" fill="#fff"/>
+      <path id="Path_40" data-name="Path 40" d="M233.412.609h8.495a1.112,1.112,0,0,1,1.112,1.113V8.877a1.112,1.112,0,0,1-1.112,1.113h-8.495A1.113,1.113,0,0,1,232.3,8.877V1.722A1.113,1.113,0,0,1,233.412.609m.335,12.731h7.825a1.113,1.113,0,0,1,1.112,1.113V45.727a1.113,1.113,0,0,1-1.112,1.113h-7.825a1.113,1.113,0,0,1-1.113-1.113V14.453a1.113,1.113,0,0,1,1.113-1.113" transform="translate(-24.777 -0.065)" fill="#fff"/>
+      <path id="Path_41" data-name="Path 41" d="M221.749,21.692a1.66,1.66,0,0,0,1.66-1.66V14.746a1.66,1.66,0,0,0-1.66-1.661h-4.488V7.232a1.66,1.66,0,0,0-1.66-1.661h-5.314c-.021.026-.031.057-.054.081L207.8,8.083a.779.779,0,0,0,0,1.1l2.431,2.431a.775.775,0,0,1,0,1.1L207.8,15.14a.778.778,0,0,0,0,1.1l2.431,2.431a.775.775,0,0,1,0,1.1L207.8,22.2a.779.779,0,0,0,0,1.1l2.431,2.431a.775.775,0,0,1,0,1.1L207.8,29.253a.778.778,0,0,0,0,1.1l2.431,2.431a.776.776,0,0,1,0,1.1L207.8,36.31a.778.778,0,0,0,0,1.1l2.431,2.431a.776.776,0,0,1,0,1.1L208.3,42.868c1.784,3.522,5.444,4.374,11.077,4.374h2.371a1.659,1.659,0,0,0,1.66-1.66V40.021a1.66,1.66,0,0,0-1.66-1.66h-1.208c-2.529,0-3.28-1.162-3.28-3.893V21.692Z" transform="translate(-22.14 -0.594)" fill="#fff"/>
+      <path id="Path_42" data-name="Path 42" d="M277.5,42.24a1.141,1.141,0,0,1,.269,1.611c-2.513,3.408-6.159,4.9-12.046,4.9-9.968,0-15.431-6.281-15.431-15.431V28.542c0-10.037,5.463-15.294,16.114-15.294,4.925,0,8.94,1.651,11.367,4.9a1.138,1.138,0,0,1-.267,1.61l-5.827,4.058a1.139,1.139,0,0,1-1.511-.165,4.875,4.875,0,0,0-4.035-1.8c-4.507,0-5.6,2.525-5.6,7.578v3.005c0,4.506.546,7.715,5.6,7.715a4.818,4.818,0,0,0,4.136-1.713,1.115,1.115,0,0,1,1.492-.178Z" transform="translate(-26.696 -1.413)" fill="#fff"/>
+      <path id="Path_43" data-name="Path 43" d="M1.167,13.377H4.393V6.994A1.167,1.167,0,0,1,5.559,5.827h7.961a1.166,1.166,0,0,1,1.167,1.167v6.383H19.7a1.167,1.167,0,0,1,1.167,1.167v6.314A1.167,1.167,0,0,1,19.7,22.025H14.687V34.86c0,2.745.756,3.912,3.295,3.912h.3c.644,0,.976.463,1.167,1.167l2.229,6.208a1.153,1.153,0,0,1-.493,1.418,1.166,1.166,0,0,1-.537.13H16.815c-8.373,0-12.423-1.854-12.423-11.531V22.025H1.167A1.167,1.167,0,0,1,0,20.857V14.543a1.167,1.167,0,0,1,1.167-1.167" transform="translate(0 -0.621)" fill="#2560b7"/>
+      <path id="Path_44" data-name="Path 44" d="M146.871,1.478A1.183,1.183,0,0,1,148.038.312L156,0a1.166,1.166,0,0,1,1.167,1.167V34.237c0,2.746.756,3.913,3.295,3.913h.3c.644,0,.976.463,1.167,1.167l2.241,6.243a1.125,1.125,0,0,1-.542,1.4,1.167,1.167,0,0,1-.5.113h-3.829c-8.373,0-12.423-1.854-12.423-11.531Z" transform="translate(-15.665 0)" fill="#2560b7"/>
+      <path id="Path_45" data-name="Path 45" d="M58.309,33.277c0,9.609-4.529,15.923-15.1,15.923-10.432,0-15.1-6.314-15.1-15.923V29.3c0-10.5,5.491-15.786,15.1-15.786,9.746,0,15.1,5.285,15.1,15.786ZM48.014,32.8V29.777c0-5.08-1.1-7.619-4.8-7.619s-4.8,2.54-4.8,7.619V32.8c0,4.53.549,7.756,4.8,7.756s4.8-3.226,4.8-7.756" transform="translate(-2.998 -1.441)" fill="#2560b7"/>
+      <path id="Path_46" data-name="Path 46" d="M88.126,14.669l7.961-.317a1.166,1.166,0,0,1,1.167,1.167V48.583c0,12.354-7,14.139-15.373,14.139-6.128,0-10.179-1.306-13.422-5.41a1.168,1.168,0,0,1,.238-1.665l4.936-3.576a1.175,1.175,0,0,1,1.509.13,7.293,7.293,0,0,0,5.366,2.01c4.8,0,6.452-.617,6.452-5.628V47.209a10.464,10.464,0,0,1-6.452,1.99c-8.785,0-13.453-6.315-13.453-15.512v-4.8c0-10.089,5.491-15.374,13.453-15.374,5.993,0,7.511,1.114,7.618,1.16M86.959,33.825v-4.8c0-4.6-1.3-6.864-4.8-6.864-3.706,0-4.8,2.54-4.8,7.618V32.8c0,4.529.549,7.755,4.8,7.755,3.912,0,4.8-2.745,4.8-6.726" transform="translate(-7.152 -1.441)" fill="#2560b7"/>
+      <path id="Path_47" data-name="Path 47" d="M195.149,42.656a1.16,1.16,0,0,1,.3,1.61C192.983,47.751,189.04,49.2,183.3,49.2c-10.844,0-15.511-7-15.511-15.511v-4.8c0-10.639,5.49-15.374,14.413-15.374,9.952,0,14.413,5.7,14.413,16.4V32.8a1.167,1.167,0,0,1-1.167,1.167H178.083c.138,3.912,1.1,6.589,5.285,6.589,2.621,0,3.565-.634,4.49-1.72a1.177,1.177,0,0,1,1.566-.185Zm-17-15.557h8.168c-.206-3.775-1.647-4.942-4.05-4.942-2.677,0-3.844,1.854-4.118,4.942" transform="translate(-17.896 -1.441)" fill="#2560b7"/>
+      <path id="Path_48" data-name="Path 48" d="M135.285,14.351l-7.961.317c-.065-.046-1.626-1.16-7.618-1.16-7.962,0-13.453,4.637-13.453,14.727v.558h10.3c0-4.431,1.178-6.637,4.8-6.637,3.5,0,4.8,2.265,4.8,6.864v4.8c0,3.981-.892,6.726-4.8,6.726-3.892,0-4.8-2.379-4.8-6.1h-10.3v.733c0,9.2,4.668,14.017,13.453,14.017a10.472,10.472,0,0,0,6.452-1.99v1.374c0,5.01-1.647,5.628-6.452,5.628a7.294,7.294,0,0,1-5.367-2.01,1.172,1.172,0,0,0-1.508-.13l-4.936,3.576a1.168,1.168,0,0,0-.238,1.665c3.242,4.1,7.292,5.41,13.421,5.41,8.373,0,15.374-1.785,15.374-14.139V15.518a1.167,1.167,0,0,0-1.167-1.167" transform="translate(-11.333 -1.441)" fill="#2560b7"/>
+      <rect id="Rectangle_1025" data-name="Rectangle 1025" width="4.881" height="5.772" transform="translate(90.082 27.318)" fill="#f9665a"/>
+    </g>
+  </g>
+</svg>

package/src/components/buttons/ToggleButton.vue

@@ -3,14 +3,14 @@
         <button
             v-if="!$slots.default"
             :type="type"
-            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading}]"
+            :class="[ 'toggle-button', buttonStyle, {'toggle-button-loading':loading, 'toggle-button-subscribed': !subscribed}]"
             :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 v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
             <div class="toggle-button-loader" v-if="loading" ></div>
             <div class="toggle-button-a-border" />
             <!-- 
@@ -66,6 +66,11 @@ export default {
         buttonStyle:{
             type:String,
             default:'confirm'
+        },
+        /* Grey out button if booster not enabled*/
+        subscribed: {
+          type: Boolean,
+          default: true
         }
     },
     computed: {

package/src/components/buttons/ToggleLoginButton.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="toggle-button-container toggle-button-container--login" :class="{'toggle-button-container--fluid': btnFluid}">
         
-        <button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }]" @click="click">
+        <button :type="type" :class="['toggle-login-button', { 'toggle-login-button--airship': platform == 'airship' }, { 'toggle-login-button--loading': platform == 'toggle' && loading }, { 'toggle-login-button--airship-loading': platform == 'airship' && loading }]" @click="click" 
+            :disabled="(loading || disabled)">
 
             <div :class="['toggle-login-button-loader', { 'toggle-login-button-loader--airship': platform == 'airship' }]" v-if="loading"></div>
 
@@ -59,6 +60,12 @@ export default {
             validator: function (value) {
                 return [true, false].indexOf(value) !== -1;
             },
+        },
+        /**
+         * Should the button be disabled?
+         */
+        disabled: {
+            default: false
         }
     },
     methods: {

package/src/components/forms/ToggleContactSearch.vue

@@ -5,25 +5,35 @@
             {{isInvalid ? errorMessage : ''}}
         </div>
 
-        <div class="toggle-contact-search-input-container" :class="{'toggle-input-is-invalid': isInvalid, 'toggle-contact-search-input-container-active': showDropdown}">
+        <div class="toggle-contact-search-input-container" 
+        :class="{'toggle-input-is-invalid': isInvalid, 'toggle-contact-search-input-container-active': showDropdown}">
             <div class="toggle-contact-search-icon-input-container">
-                <div class="toggle-contact-search-icon-arrow-container" @click="showDropdown = !showDropdown">
-                    <img class="toggle-contact-search-icon" :src="iconSrc" :alt="inputType" />
-                    <img class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}" :src="arrowIconSrc" alt="Down arrow" />
+                <div :class="{'toggle-contact-search-icon-arrow-container': true, 'toggle-contact-search-icon-arrow-container-disabled': disabled}" 
+                @click="showDropdown = !disabled && !loading ? !showDropdown : false">
+                    <div class="toggle-contact-search-icon" 
+                    :class="{
+                        'toggle-contact-search-icon-email': inputType == 'email',
+                        'toggle-contact-search-icon-mobile': inputType == 'mobile'
+                    }" 
+                    ></div>
+                    <div class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}"></div>
                 </div>
     
                 <div class="toggle-contact-search-divider"></div>
     
-                <input class="toggle-contact-search-input" v-model="inputVal" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
+                <input :class="{'toggle-contact-search-input': true, 'toggle-contact-search-disabled': disabled}" v-model="inputVal" :disabled="disabled || loading" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
     
-                <img class="toggle-contact-search-magnifying-glass-icon" :src="searchIconSrc" alt="Search" @click="onSearch" />
+                <div v-if="isLoading" class="toggle-inline-loader-container">
+                    <div class="toggle-inline-loader"></div>
+                </div>
+                <div v-else :class="{'toggle-contact-search-magnifying-glass-icon': true, 'toggle-contact-search-magnifying-glass-icon-disabled': disabled}" @click="onSearch"></div>
             </div>
     
             <Transition name="drop-down">
                 <div v-if="showDropdown" class="toggle-contact-search-dropdown-container">
-                    <div v-for="type, i in types" @click="inputType = type; showDropdown = false" :key="i">
+                    <div v-for="type, i in types" @click="inputType = type; showDropdown = false; isLoading = false" :key="i">
                         <div class="toggle-contact-search-dropdown-item">
-                            <img class="toggle-contact-search-icon-dropdown" :src="iconForType(type)" :alt="type" />
+                            <div class="toggle-contact-search-icon-dropdown" :class="iconForType(type)"></div>
                             <label class="toggle-contact-search-dropdown-item-label" :class="{'toggle-contact-search-dropwdown-item-highlighted': type == inputType}">
                                 {{textForType(type)}}
                             </label>
@@ -38,7 +48,7 @@
 
 <script>
 
-import { mixins } from '../mixins/mixins'
+import { mixins } from '../mixins/mixins';
 
 export default {
     mixins: [mixins],
@@ -59,12 +69,21 @@ export default {
         errorMessage: {
             type: String,
             default: 'No contact found with these details'
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
             inputType: 'email',
             showDropdown: false,
+            isLoading: false
         }
     },
     watch: {
@@ -74,7 +93,14 @@ export default {
             }
         }
     },
-     computed: {
+    created() {
+        window.addEventListener('click', this.windowClick, true);
+        this.isLoading = this.loading;
+    },
+    beforeDestroy() {
+        window.removeEventListener('click', this.windowClick, true);
+    },
+    computed: {
         inputVal: {
             get: function () {
                 return this.value;
@@ -86,29 +112,6 @@ export default {
         },
         placeholder: function () {
             return this.inputType == 'email' ? 'Enter contact email address' : 'Enter contact mobile number';
-        },
-        iconSrc() {
-            return this.inputType == 'email' ? this.emailIconSrc :  this.mobileIconSrc;
-        },
-        emailIconSrc() {
-            const emailIcon = new Image();
-            emailIcon.src = require('../../assets/icons/email-icon.svg');
-            return emailIcon.src;
-        },
-        mobileIconSrc() {
-            const mobileIcon = new Image();
-            mobileIcon.src = require('../../assets/icons/mobile-icon.svg');
-            return mobileIcon.src;
-        },
-        arrowIconSrc() {
-            const arrowIcon = new Image();
-            arrowIcon.src = require('../../assets/icons/arrow-icon.svg');
-            return arrowIcon.src;
-        },
-        searchIconSrc() {
-            const searchIcon = new Image();
-            searchIcon.src = require('../../assets/icons/magnifying-glass-icon.svg');
-            return searchIcon.src;
         }
     },
     methods: {
@@ -125,11 +128,11 @@ export default {
         iconForType(type) {
             switch (type) {
                 case 'email':
-                    return this.emailIconSrc;
+                    return 'toggle-contact-search-icon-email'
                 case 'mobile':
-                    return this.mobileIconSrc;
+                    return 'toggle-contact-search-icon-mobile'
                 default:
-                    return this.emailIconSrc;
+                    return 'toggle-contact-search-icon-email'
             }
         },
         onEnter(e) {
@@ -143,6 +146,11 @@ export default {
                 type: this.inputType,
                 value: this.inputVal
             });
+        },
+        windowClick(e) {
+            if (!e.target.matches('.toggle-contact-search-container *')) {
+                this.showDropdown = false;
+            }
         }
     }
 }

package/src/sass/includes/_as_boosters.scss

@@ -13,6 +13,18 @@
         background-color: $booster-loyalty-colour-light;
     }
 
+    &.champions{
+        background-color: $booster-champions-colour-med;
+    }
+
+    &.fulfilment{
+        background-color: $booster-fulfilment-colour-med;
+    }
+
+    &.tickets{
+        background-color: $booster-tickets-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -48,6 +60,18 @@
         }
     }
 
+    &.champions{
+        background-color: rgba($booster-champions-colour-light, 0.8);
+    }
+
+    &.fulfilment{
+        background-color: rgba($booster-fulfilment-colour-light, 0.8);
+    }
+
+    &.tickets{
+        background-color: rgba($booster-tickets-colour-light, 0.8);
+    }
+
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -79,10 +103,22 @@
         opacity: 1;
     }
 
+    &.champions{
+        color: $booster-champions-colour-med;
+    }
+
     &.loyalty{
         color: $booster-loyalty-colour-light;
     }
 
+    &.fulfilment{
+        color: $booster-fulfilment-colour-med;
+    }
+
+    &.tickets{
+        color: $booster-tickets-colour-med;
+    }
+
     &.test{
         color: $booster-test-colour-light;
     }
@@ -117,6 +153,18 @@ margin:1rem
         background-color: $booster-loyalty-colour-light;
     }
 
+    &.champions{
+        background-color: $booster-champions-colour-med;
+    }
+
+    &.fulfilment{
+        background-color: $booster-fulfilment-colour-med;
+    }
+
+    &.tickets{
+        background-color: $booster-tickets-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     } 

package/src/sass/includes/_as_buttons.scss

@@ -30,6 +30,11 @@
     }
 }
 
+.toggle-button-subscribed{
+    opacity: 0.4 !important;
+    width: 100% !important;
+}
+
 
 .toggle-button-a{
     position:relative;
@@ -250,6 +255,17 @@
 // 
 // Toggle and Airship Login Buttons
 // 
+.toggle-button-container{
+    background:transparent;
+    display: inline-block;
+    border-radius: 0.3rem;
+    &--fluid{
+        width: 100%;
+        button{
+            width: 100%;
+        }
+    }
+}
 
 .toggle-login-button {
     background-color: #3180FF;
@@ -262,25 +278,41 @@
     font: normal normal 600 15px/18px Lato;
     position: relative;
     transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
+    &:disabled, &[disabled]{
+        background-color: #d4e4ff;
+        cursor: default;
+        -webkit-transform: translate(0, 0);
+        -ms-transform: translate(0, 0);
+        transform: translate(0, 0);
+        
+    }
+    &:hover:not(:disabled) {
+        background-color: #1571dd;
+        box-shadow: 0 10px 30px -10px #2cc1ff;
+        -webkit-transform: translate(0, -3px);
+        -ms-transform: translate(0, -3px);
+        transform: translate(0, -3px);
+        color: #fff;
+    }
+    &--airship{
+        background-color: #FF7175;
+        &:hover:not(:disabled) {
+            background-color: #ff463f;
+            box-shadow: 0 10px 30px -10px rgba(254, 108, 102, 0.5);
+        }
+        &:disabled, &[disabled]{
+            background-color: #ed9598;
+        }
+    }
+    &--loading{
+        background-color: #3180FF !important;
+    }
+    &--airship-loading{
+        background-color: #FF7175 !important;
+    }
 }
 
-.toggle-login-button--airship {
-    background-color: #FF7175 !important;
-}
-
-.toggle-login-button:hover {
-    background-color: #1571dd;
-    box-shadow: 0 10px 30px -10px #2cc1ff;
-    -webkit-transform: translate(0, -3px);
-    -ms-transform: translate(0, -3px);
-    transform: translate(0, -3px);
-    color: #fff;
-}
 
-.toggle-login-button--airship:hover {
-    background-color: #ff463f !important;
-    box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
-}
 
 .toggle-login-button-loader {
     border-radius: 50%;
@@ -296,27 +328,4 @@
     top: 50%;
     margin-top: -0.5rem;
     box-sizing: content-box;
-}
-
-.toggle-login-button-loader--airship {
-    border-top-color: #FF7175;
-}
-
-.toggle-button-container{
-    &:disabled, &[disabled]{
-        .toggle-login-button{
-            background-color: #d4e4ff;
-            cursor: not-allowed;
-            -webkit-transform: translate(0, 0);
-            -ms-transform: translate(0, 0);
-            transform: translate(0, 0);
-        }
-        .toggle-login-button--airship{
-            background-color: #ed9598 !important;
-            cursor: not-allowed;
-            -webkit-transform: translate(0, 0);
-            -ms-transform: translate(0, 0);
-            transform: translate(0, 0);
-        }
-    }
 }

package/src/sass/includes/_as_inputs.scss

@@ -418,7 +418,7 @@
     .toggle-input-radio-label, .toggle-input-checkbox-label{
         opacity: 0.5;
     }
-    .toggle-input-label, .toggle-input{
+    .toggle-input-label, .toggle-input, .toggle-contact-search-container{
         opacity: 0.5;
     }
     .toggle-input-select-container{
@@ -979,6 +979,7 @@ $iconWidth:20px;
     color: #3A4A62;
     font-weight: 700;
     font-size: 16px;
+    background-color: #FFFFFF;
 }
 
 .toggle-contact-search-input::placeholder,
@@ -991,8 +992,20 @@ $iconWidth:20px;
 .toggle-contact-search-icon {
     max-width: 20px;
     max-height: 20px;
-    margin: 10px 0 0 21px;
+    margin: 10px 16px 0 0;
     transition: transform .2s ease-in-out;
+    width: 25px;
+    height: 25px;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.toggle-contact-search-icon-email {
+    background-image: url('../assets/icons/email-icon.svg');
+}
+
+.toggle-contact-search-icon-mobile {
+    background-image: url('../assets/icons/mobile-icon.svg');
 }
 
 .toggle-contact-search-icon-arrow-container:hover {
@@ -1010,10 +1023,19 @@ $iconWidth:20px;
     cursor: pointer;
 }
 
+.toggle-contact-search-icon-arrow-container-disabled {
+    cursor: default !important;
+    opacity: 0.5;
+}
+
 .toggle-contact-search-magnifying-glass-icon {
     cursor: pointer;
-    margin: 0 15px 0 0;
-    max-width: 20px;
+    margin: 10px 15px 0 3px;
+    width: 25px;
+    height: 25px;
+    background-image: url('../assets/icons/magnifying-glass-icon.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
     transition: transform .2s ease-in-out;
 }
 
@@ -1021,15 +1043,23 @@ $iconWidth:20px;
     transform: scale(1.1);
 }
 
+.toggle-contact-search-magnifying-glass-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .toggle-contact-search-arrow {
-    max-width: 10px;
-    margin: 6px 21px 0 15px;
+    margin: 17px 0px  0px;
+    width: 10px;
+    height: 10px;
+    background-image: url('../assets/icons/arrow-icon.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .toggle-contact-search-arrow-active {
-    transition: rotate .2s ease-in-out;
-    rotate: -3.1416rad;
-    transform-origin: center center;
+    transition: all .2s ease;
+    transform: rotate(-3.1416rad) translateY(5px);
 }
 
 .toggle-contact-search-divider {
@@ -1074,6 +1104,10 @@ $iconWidth:20px;
 }
 
 .toggle-contact-search-icon-dropdown {
+    width: 25px;
+    height: 25px;
+    background-repeat: no-repeat;
+    background-size: contain;
     max-width: 20px;
     max-height: 20px;
     margin: 2px 14px 0 0;
@@ -1088,6 +1122,22 @@ $iconWidth:20px;
     margin: 0 0 10px 0;
 }
 
+.toggle-contact-search-input-disabled {
+    color: #D3D9DF !important;
+}
+
+.toggle-contact-search-input-disabled::placeholder,
+.toggle-contact-search-input-disabled:-ms-input-placeholder,
+.toggle-contact-search-input-disabled::-ms-input-placeholder {
+    color: #D3D9DF !important;
+    opacity: 1;
+}
+
+.toggle-contact-search-spinner-container {
+    margin: 2px 25px 0 0;
+    max-width: 18px;
+    max-height: 20px;
+}
 //
 //  Contact Search Transition Styles
 //