@vcita/design-system 0.2.3 → 0.2.6

package/init/DesignSystem.js

@@ -36,6 +36,7 @@ import {
     VTooltip,
 } from "vuetify/lib/components";
 // import initI18n from "./initI18n";
+import svgImages from "./svgImages";
 // todo: change all above import to the next line import so we won't import all vuetify component
 // import VAlert from 'vuetify/lib/components/VAlert'\
 
@@ -80,6 +81,7 @@ const DesignSystem = ({theme = {}, options = {}} = {}, locale ='en') => {
     // Make the options available to all the components
     Vue.prototype.$ds = ds;
     Vue.prototype.$log = Vue.prototype.$log || console.log;
+    Vue.prototype.$svgImages = Vue.prototype.$svgImages || svgImages;
 
     const vuetifyConfigOverride = Object.assign({}, vuetifyConfig, theme);
     // initI18n(locale);

package/init/SvgIcons.js

@@ -20,6 +20,4 @@ export default {
     attention_fill: `<svg class="vc-attention-fill" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.00249 11.815C9.21241 11.815 11.815 9.21335 11.815 6.00249C11.815 2.7935 9.21241 0.190002 6.00249 0.190002C2.79257 0.190002 0.190002 2.7935 0.190002 6.00249C0.190002 9.21335 2.79257 11.815 6.00249 11.815ZM5.43358 6.75249C5.28421 6.75249 5.16089 6.63571 5.15277 6.48657L4.97891 3.29908C4.97012 3.13797 5.09836 3.0025 5.2597 3.0025H6.74525C6.90659 3.0025 7.03486 3.13797 7.02607 3.29908L6.85221 6.48657C6.84409 6.63571 6.72076 6.75249 6.5714 6.75249H5.43358ZM4.92437 8.25248C4.92437 8.84792 5.40705 9.33061 6.00249 9.33061C6.59792 9.33061 7.08061 8.84792 7.08061 8.25248C7.08061 7.65705 6.59792 7.17436 6.00249 7.17436C5.40705 7.17436 4.92437 7.65705 4.92437 8.25248Z"/></svg>`,
     three_dots: `<svg class="vc-three-dots" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.52637 2.47368C6.52637 3.30263 7.1711 3.94737 8.00005 3.94737C8.78295 3.94737 9.47374 3.30263 9.47374 2.47368C9.47374 1.69079 8.78295 1 8.00005 1C7.1711 1 6.52637 1.69079 6.52637 2.47368ZM8.00005 6.52632C7.1711 6.52632 6.52637 7.21711 6.52637 8.00001C6.52637 8.82895 7.1711 9.47369 8.00005 9.47369C8.78295 9.47369 9.47374 8.82895 9.47374 8.00001C9.47374 7.21711 8.78295 6.52632 8.00005 6.52632ZM8.00005 15C7.1711 15 6.52637 14.3553 6.52637 13.5263C6.52637 12.7435 7.1711 12.0526 8.00005 12.0526C8.78295 12.0526 9.47374 12.7435 9.47374 13.5263C9.47374 14.3553 8.78295 15 8.00005 15Z"/></svg>`,
     indeterminate: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.5" y="11" width="7" height="2" rx="0.25" fill="white"/></svg>',
-    mastercard: `<svg width="48" height="30" viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4888 3.20898H17.5103V26.7923H30.4888V3.20898Z" fill="#FF5F00"/><path d="M18.3348 15C18.3348 10.2083 20.5597 5.95834 23.9794 3.20834C21.4661 1.20834 18.2936 0 14.8326 0C6.63348 0 0 6.70833 0 15C0 23.2917 6.63348 30 14.8326 30C18.2936 30 21.4661 28.7917 23.9794 26.7917C20.5597 24.0833 18.3348 19.7917 18.3348 15Z" fill="#EB001B"/><path d="M47.9997 15C47.9997 23.2917 41.3663 30 33.1672 30C29.7062 30 26.5337 28.7917 24.0204 26.7917C27.4813 24.0417 29.665 19.7917 29.665 15C29.665 10.2083 27.4401 5.95834 24.0204 3.20834C26.5337 1.20834 29.7062 0 33.1672 0C41.3663 0 47.9997 6.75 47.9997 15Z" fill="#F79E1B"/></svg>`,
-    visa: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7996 31.3605H16.9113L19.3433 16.2734H23.2314L20.7996 31.3605Z" fill="#00579F"/><path d="M34.8956 16.6423C34.1287 16.3371 32.9122 16 31.4081 16C27.5682 16 24.8642 18.0543 24.8477 20.9913C24.8158 23.1583 26.7836 24.3618 28.2555 25.0844C29.7598 25.8227 30.2712 26.3046 30.2712 26.9627C30.2559 27.9734 29.0556 28.4393 27.9361 28.4393C26.3837 28.4393 25.5519 28.1991 24.2878 27.6368L23.7758 27.3957L23.2317 30.7824C24.1437 31.1993 25.8238 31.5692 27.5682 31.5854C31.6482 31.5854 34.3043 29.5629 34.3358 26.433C34.3513 24.7155 33.3122 23.3995 31.0719 22.3242C29.712 21.6339 28.8791 21.1684 28.8791 20.4621C28.895 19.82 29.5835 19.1623 31.1187 19.1623C32.3828 19.1301 33.3116 19.4349 34.0151 19.74L34.3668 19.9002L34.8956 16.6423Z" fill="#00579F"/><path d="M40.0634 26.0157C40.3836 25.1489 41.6158 21.7944 41.6158 21.7944C41.5996 21.8267 41.9354 20.9117 42.1274 20.35L42.3991 21.65C42.3991 21.65 43.1354 25.2614 43.2953 26.0157C42.6876 26.0157 40.8314 26.0157 40.0634 26.0157ZM44.863 16.2734H41.8554C40.9279 16.2734 40.2233 16.5461 39.8231 17.5252L34.0475 31.3603H38.1274C38.1274 31.3603 38.7991 29.4982 38.9435 29.0971C39.3911 29.0971 43.36 29.0971 43.9358 29.0971C44.0474 29.6268 44.3997 31.3603 44.3997 31.3603H48L44.863 16.2734Z" fill="#00579F"/><path d="M13.6636 16.2734L9.8556 26.5614L9.43948 24.4748C8.73547 22.0673 6.52754 19.4515 4.0636 18.1509L7.55156 31.3445H11.6634L17.7752 16.2734H13.6636Z" fill="#00579F"/><path d="M6.31995 16.2734H0.0640009L0 16.5783C4.88004 17.8303 8.11199 20.8481 9.43985 24.4755L8.07988 17.5416C7.85598 16.5781 7.16792 16.3052 6.31995 16.2734Z" fill="#FAA61A"/></svg>`
 }

package/init/svgImages.js

@@ -0,0 +1,11 @@
+export default {
+  mastercard: `<svg viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4888 3.20898H17.5103V26.7923H30.4888V3.20898Z" fill="#FF5F00"/><path d="M18.3348 15C18.3348 10.2083 20.5597 5.95834 23.9794 3.20834C21.4661 1.20834 18.2936 0 14.8326 0C6.63348 0 0 6.70833 0 15C0 23.2917 6.63348 30 14.8326 30C18.2936 30 21.4661 28.7917 23.9794 26.7917C20.5597 24.0833 18.3348 19.7917 18.3348 15Z" fill="#EB001B"/><path d="M47.9997 15C47.9997 23.2917 41.3663 30 33.1672 30C29.7062 30 26.5337 28.7917 24.0204 26.7917C27.4813 24.0417 29.665 19.7917 29.665 15C29.665 10.2083 27.4401 5.95834 24.0204 3.20834C26.5337 1.20834 29.7062 0 33.1672 0C41.3663 0 47.9997 6.75 47.9997 15Z" fill="#F79E1B"/></svg>`,
+  visa: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.0004 31.1989H7.84636L4.73131 19.3148C4.58346 18.7681 4.26952 18.2848 3.80773 18.0571C2.65529 17.4846 1.38537 17.0291 0 16.7993V16.3418H6.69189C7.61546 16.3418 8.30815 17.0291 8.42359 17.8273L10.0399 26.3997L14.1919 16.3418H18.2305L12.0004 31.1989ZM20.5394 31.1989H16.6162L19.8467 16.3418H23.7699L20.5394 31.1989ZM28.8464 20.4585C28.9619 19.6583 29.6546 19.2008 30.4627 19.2008C31.7326 19.0859 33.116 19.3157 34.2704 19.8861L34.9631 16.6873C33.8086 16.2298 32.5387 16 31.3863 16C27.5785 16 24.8078 18.0579 24.8078 20.9141C24.8078 23.0869 26.7704 24.2277 28.1558 24.915C29.6546 25.6004 30.2318 26.0579 30.1164 26.7432C30.1164 27.7712 28.9619 28.2287 27.8094 28.2287C26.4241 28.2287 25.0387 27.8861 23.7708 27.3136L23.0781 30.5144C24.4635 31.0849 25.9623 31.3146 27.3476 31.3146C31.6172 31.4275 34.2704 29.3716 34.2704 26.2857C34.2704 22.3996 28.8464 22.1718 28.8464 20.4585V20.4585ZM47.9999 31.1989L44.8848 16.3418H41.5389C40.8462 16.3418 40.1535 16.7993 39.9226 17.4846L34.1543 31.1989H38.1929L38.999 29.0281H43.9612L44.423 31.1989H47.9999ZM42.1161 20.3438L43.2686 25.9431H40.0381L42.1161 20.3438Z" fill="#172B85"/></svg>`,
+  dinersclub: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5663 41.2184C36.5632 41.2619 44.7751 33.8136 44.7751 24.753C44.7751 14.8454 36.5632 7.9963 27.5663 8H19.8232C10.7191 7.9963 3.22461 14.8473 3.22461 24.753C3.22461 33.8155 10.7191 41.2619 19.8232 41.2184H27.5663Z" fill="#0079BE"/><path d="M19.8597 9.37305C11.5396 9.37582 4.79867 16.1806 4.7959 24.5792C4.79867 32.977 11.5396 39.7817 19.8597 39.7845C28.1807 39.7817 34.9244 32.977 34.9254 24.5792C34.9244 16.1806 28.1816 9.37582 19.8597 9.37305ZM10.3118 24.5792C10.3101 22.6374 10.8942 20.7402 11.9878 19.1356C13.0814 17.531 14.6336 16.2936 16.4416 15.5851V33.5724C14.6335 32.8645 13.081 31.6273 11.9874 30.0228C10.8937 28.4183 10.3097 26.521 10.3118 24.5792V24.5792ZM23.2769 33.5761V15.5842C25.0862 16.2916 26.6398 17.5289 27.7342 19.1341C28.8286 20.7392 29.4128 22.6374 29.4104 24.5802C29.4125 26.5228 28.8281 28.4208 27.7337 30.0259C26.6394 31.631 25.086 32.8684 23.2769 33.5761V33.5761Z" fill="white"/><path d="M27.5663 41.2184C36.5632 41.2619 44.7751 33.8136 44.7751 24.753C44.7751 14.8454 36.5632 7.9963 27.5663 8H19.8232C10.7191 7.9963 3.22461 14.8473 3.22461 24.753C3.22461 33.8155 10.7191 41.2619 19.8232 41.2184H27.5663Z" fill="#0079BE"/><path d="M19.8597 9.37305C11.5396 9.37582 4.79867 16.1806 4.7959 24.5792C4.79867 32.977 11.5396 39.7817 19.8597 39.7845C28.1807 39.7817 34.9244 32.977 34.9254 24.5792C34.9244 16.1806 28.1816 9.37582 19.8597 9.37305ZM10.3118 24.5792C10.3101 22.6374 10.8942 20.7402 11.9878 19.1356C13.0814 17.531 14.6336 16.2936 16.4416 15.5851V33.5724C14.6335 32.8645 13.081 31.6273 11.9874 30.0228C10.8937 28.4183 10.3097 26.521 10.3118 24.5792V24.5792ZM23.2769 33.5761V15.5842C25.0862 16.2916 26.6398 17.5289 27.7342 19.1341C28.8286 20.7392 29.4128 22.6374 29.4104 24.5802C29.4125 26.5228 28.8281 28.4208 27.7337 30.0259C26.6394 31.631 25.086 32.8684 23.2769 33.5761V33.5761Z" fill="white"/></svg>`,
+  jcb: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M35.3882 24.2779C36.6074 24.3044 37.8334 24.2241 39.0477 24.3196C40.2774 24.549 40.5738 26.4107 39.4813 27.0204C38.7359 27.422 37.8503 27.17 37.0422 27.2408H35.3882V24.2779V24.2779ZM39.7526 20.9243C40.0235 21.8803 39.1018 22.7387 38.1811 22.6071H35.3882C35.4078 21.7055 35.3499 20.7269 35.4166 19.8728C36.5354 19.9043 37.6645 19.8085 38.7769 19.9228C39.2548 20.0429 39.6548 20.4358 39.7526 20.9243V20.9243ZM46.4739 6.74616C46.5259 8.572 46.4814 10.4943 46.4963 12.3572C46.4929 19.931 46.5036 27.5045 46.4904 35.0787C46.4414 37.9172 43.9258 40.3836 41.107 40.4402C38.2855 40.4517 35.4635 40.442 32.6416 40.4451V28.9952C35.7162 28.9793 38.7924 29.0274 41.8658 28.9712C43.2915 28.8817 44.8532 27.9409 44.9195 26.372C45.0874 24.7962 43.6018 23.7063 42.1913 23.5341C41.6491 23.5201 41.665 23.3761 42.1913 23.3133C43.5366 23.0225 44.593 21.6302 44.1972 20.2357C43.8599 18.7691 42.2389 18.2014 40.8905 18.2043C38.1413 18.1856 35.3915 18.2016 32.6422 18.1962C32.66 16.0587 32.6052 13.9188 32.6717 11.7828C32.8896 8.99557 35.4684 6.69702 38.2476 6.74689C40.9901 6.74647 43.7321 6.74647 46.4739 6.74637V6.74616Z" fill="url(#paint0_linear_401_9937)"/><path d="M1.57313 12.072C1.64334 9.23802 4.16963 6.79185 6.98481 6.75044C9.79592 6.74178 12.6074 6.74918 15.4185 6.74668C15.4108 16.2285 15.4338 25.7114 15.407 35.1927C15.2987 37.9922 12.7999 40.3917 10.0154 40.4413C7.19899 40.4515 4.38225 40.4427 1.56572 40.4455V28.6096C4.3015 29.2559 7.17041 29.531 9.96138 29.1023C11.6297 28.8339 13.455 28.0146 14.0198 26.2838C14.4355 24.8033 14.2015 23.2452 14.2633 21.7256V18.1967H9.43327C9.41157 20.5307 9.47772 22.8686 9.39832 25.1997C9.26812 26.6326 7.84916 27.5429 6.49781 27.4943C4.82189 27.512 1.50083 26.2797 1.50083 26.2797C1.49248 21.9069 1.54945 16.4307 1.57313 12.0724V12.072Z" fill="url(#paint1_linear_401_9937)"/><path d="M17.22 19.6206C16.9657 19.6746 17.1688 18.7546 17.1039 18.4057C17.1212 16.1991 17.0677 13.9902 17.1334 11.7852C17.3506 8.98622 19.9493 6.68194 22.7397 6.74746H30.9573C30.9496 16.2293 30.9724 25.7121 30.9457 35.1934C30.8373 37.993 28.3384 40.3924 25.5538 40.442C22.7373 40.4527 19.9205 40.4437 17.1037 40.4464V27.4785C19.0274 29.0569 21.642 29.3026 24.0386 29.3068C25.8453 29.3062 27.6415 29.0277 29.3961 28.611V26.2352C27.4188 27.2207 25.0944 27.8467 22.9024 27.2805C21.3734 26.8999 20.2635 25.4222 20.2882 23.8442C20.1111 22.2033 21.073 20.4708 22.6856 19.983C24.6877 19.3562 26.8698 19.8356 28.7465 20.6505C29.1486 20.861 29.5567 21.1221 29.396 20.4501V18.5827C26.2572 17.8359 22.9168 17.5611 19.7635 18.3735C18.8507 18.631 17.9614 19.0215 17.22 19.6209V19.6206Z" fill="url(#paint2_linear_401_9937)"/><defs><linearGradient id="paint0_linear_401_9937" x1="32.547" y1="22.8751" x2="46.409" y2="22.8751" gradientUnits="userSpaceOnUse"><stop stop-color="#58B03A"/><stop offset="1" stop-color="#55B330"/></linearGradient><linearGradient id="paint1_linear_401_9937" x1="1.27098" y1="23.9188" x2="15.1914" y2="23.9188" gradientUnits="userSpaceOnUse"><stop stop-color="#0F6EB6"/><stop offset="1" stop-color="#006DBA"/></linearGradient><linearGradient id="paint2_linear_401_9937" x1="17.0834" y1="23.2029" x2="30.9547" y2="23.2029" gradientUnits="userSpaceOnUse"><stop stop-color="#DE0D3D"/><stop offset="1" stop-color="#E30138"/></linearGradient></defs></svg>`,
+  amex: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="8" width="48" height="32" rx="6" fill="#1F72CD"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.60524 19.334L4.11426 28.9963H9.49059L10.1571 27.4557H11.6806L12.3471 28.9963H18.2649V27.8205L18.7922 28.9963H21.8534L22.3807 27.7956V28.9963H34.6882L36.1847 27.4957L37.586 28.9963L43.9074 29.0087L39.4023 24.1921L43.9074 19.334H37.6841L36.2273 20.8068L34.8701 19.334H21.4812L20.3315 21.8279L19.1548 19.334H13.7897V20.4698L13.1929 19.334H8.60524ZM26.9844 20.707H34.0519L36.2135 22.9771L38.4449 20.707H40.6065L37.3221 24.1917L40.6065 27.6363H38.3468L36.1852 25.3398L33.9425 27.6363H26.9844V20.707ZM28.7285 23.4075V22.1418V22.1406H33.1384L35.0627 24.1648L33.0532 26.2H28.7285V24.8182H32.5842V23.4075H28.7285ZM9.64548 20.707H12.2662L15.245 27.2591V20.707H18.1159L20.4167 25.4048L22.5372 20.707H25.3937V27.6404H23.6556L23.6414 22.2074L21.1074 27.6404H19.5525L17.0044 22.2074V27.6404H13.4287L12.7508 26.086H9.0884L8.41192 27.639H6.49609L9.64548 20.707ZM9.71387 24.6479L10.9205 21.8789L12.1257 24.6479H9.71387Z" fill="white"/></svg>`,
+  paypal: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.80001 30.4824H5.68878C5.47588 30.4824 5.2948 30.6372 5.2616 30.8473L4.00326 38.8254C3.97825 38.9829 4.10017 39.1248 4.25985 39.1248H5.74519C5.95809 39.1248 6.13916 38.97 6.17236 38.7595L6.51175 36.6077C6.54449 36.397 6.72601 36.2424 6.93847 36.2424H7.92338C9.97286 36.2424 11.1556 35.2506 11.4647 33.2854C11.6038 32.4256 11.4705 31.75 11.0678 31.2767C10.6257 30.7574 9.84128 30.4824 8.80001 30.4824ZM9.15896 33.3963C8.98885 34.5127 8.13584 34.5127 7.31106 34.5127H6.84157L7.17094 32.4277C7.19049 32.3018 7.29967 32.209 7.42706 32.209H7.64224C8.20407 32.209 8.73412 32.209 9.00801 32.5292C9.17117 32.7203 9.22128 33.0041 9.15896 33.3963ZM18.1002 33.3605H16.6103C16.4834 33.3605 16.3737 33.4534 16.3541 33.5795L16.2882 33.9961L16.184 33.8452C15.8615 33.377 15.1423 33.2205 14.4244 33.2205C12.7779 33.2205 11.3718 34.4675 11.0979 36.2168C10.9556 37.0892 11.1579 37.9235 11.6529 38.5054C12.107 39.0403 12.7567 39.2633 13.5295 39.2633C14.856 39.2633 15.5918 38.4102 15.5918 38.4102L15.5253 38.8243C15.5002 38.9827 15.6221 39.1245 15.7809 39.1245H17.123C17.3365 39.1245 17.5165 38.9698 17.5501 38.7593L18.3554 33.6599C18.3809 33.5031 18.2594 33.3605 18.1002 33.3605ZM16.0234 36.2603C15.8796 37.1115 15.204 37.6829 14.3426 37.6829C13.9099 37.6829 13.564 37.5441 13.3421 37.2812C13.1219 37.0201 13.0381 36.6483 13.1082 36.2344C13.2425 35.3904 13.9295 34.8005 14.7779 34.8005C15.2009 34.8005 15.5449 34.941 15.7714 35.2062C15.9983 35.4742 16.0885 35.8481 16.0234 36.2603ZM24.5379 33.3603H26.0352C26.2449 33.3603 26.3672 33.5955 26.2481 33.7675L21.2685 40.9553C21.1878 41.0717 21.055 41.141 20.9131 41.141H19.4177C19.2072 41.141 19.0842 40.9039 19.2061 40.7315L20.7567 38.5429L19.1076 33.7033C19.0506 33.5351 19.1748 33.3603 19.3537 33.3603H20.8249C21.016 33.3603 21.1847 33.4858 21.2398 33.6687L22.115 36.5917L24.1801 33.55C24.2609 33.4313 24.3952 33.3603 24.5379 33.3603Z" fill="#253B80"/><path fill-rule="evenodd" clip-rule="evenodd" d="M40.7713 38.8258L42.0481 30.7018C42.0677 30.5757 42.177 30.4828 42.3039 30.4824H43.7414C43.9001 30.4824 44.022 30.6247 43.997 30.7822L42.7378 38.7599C42.705 38.9704 42.5239 39.1252 42.3106 39.1252H41.0269C40.8681 39.1252 40.7462 38.9833 40.7713 38.8258ZM30.9925 30.4828H27.8807C27.6683 30.4828 27.4872 30.6376 27.454 30.8477L26.1957 38.8258C26.1706 38.9833 26.2925 39.1252 26.4514 39.1252H28.0481C28.1965 39.1252 28.3235 39.017 28.3466 38.8696L28.7037 36.6081C28.7365 36.3974 28.918 36.2429 29.1304 36.2429H30.1148C32.1647 36.2429 33.3473 35.2511 33.6565 33.2858C33.7961 32.426 33.662 31.7504 33.2595 31.2772C32.8176 30.7578 32.0338 30.4828 30.9925 30.4828ZM31.3515 33.3967C31.1818 34.5132 30.3287 34.5132 29.5035 34.5132H29.0344L29.3643 32.4281C29.3839 32.3022 29.4921 32.2094 29.6199 32.2094H29.835C30.3965 32.2094 30.927 32.2094 31.2007 32.5296C31.3641 32.7207 31.4138 33.0045 31.3515 33.3967ZM40.2919 33.361H38.8031C38.6751 33.361 38.5664 33.4538 38.5473 33.5799L38.4814 33.9965L38.3767 33.8456C38.0542 33.3774 37.3355 33.221 36.6176 33.221C34.971 33.221 33.5654 34.4679 33.2915 36.2172C33.1496 37.0896 33.351 37.9239 33.846 38.5058C34.3009 39.0408 34.9498 39.2637 35.7226 39.2637C37.0492 39.2637 37.7847 38.4107 37.7847 38.4107L37.7184 38.8248C37.6934 38.9831 37.8153 39.125 37.9751 39.125H39.3165C39.529 39.125 39.71 38.9702 39.7433 38.7597L40.549 33.6603C40.5736 33.5035 40.4517 33.361 40.2919 33.361ZM38.2153 36.2608C38.0723 37.1119 37.3959 37.6833 36.5342 37.6833C36.1024 37.6833 35.7559 37.5445 35.5338 37.2816C35.3136 37.0205 35.2308 36.6488 35.3001 36.2349C35.435 35.3909 36.1212 34.801 36.9696 34.801C37.3927 34.801 37.7365 34.9414 37.9633 35.2066C38.1911 35.4746 38.2812 35.8485 38.2153 36.2608Z" fill="#179BD7"/><path d="M20.3143 27.6276L20.6968 25.1981L19.8448 25.1783H15.7764L18.6037 7.25069C18.6124 7.19656 18.641 7.1461 18.6827 7.11027C18.7244 7.07444 18.7778 7.05469 18.8334 7.05469H25.6934C27.9709 7.05469 29.5425 7.5286 30.3631 8.464C30.7478 8.90282 30.9928 9.36137 31.1114 9.866C31.2356 10.3955 31.2379 11.0281 31.1164 11.7997L31.1076 11.856V12.3504L31.4924 12.5684C31.8164 12.7402 32.0737 12.937 32.2711 13.1622C32.6004 13.5374 32.8133 14.0142 32.9031 14.5796C32.996 15.161 32.9653 15.8529 32.8133 16.6361C32.6377 17.5372 32.3539 18.3219 31.9707 18.964C31.6181 19.5557 31.169 20.0463 30.636 20.4268C30.1269 20.788 29.5221 21.0623 28.8383 21.2379C28.1756 21.4103 27.4202 21.4975 26.5915 21.4975H26.0577C25.676 21.4975 25.305 21.635 25.0141 21.8815C24.7223 22.1331 24.529 22.4767 24.4699 22.8527L24.4297 23.0714L23.7539 27.3533L23.7231 27.5106C23.7151 27.5605 23.7012 27.5853 23.6808 27.6021C23.6625 27.6173 23.6362 27.6276 23.6105 27.6276H20.3143Z" fill="#253B80"/><path d="M31.8567 11.9141C31.8363 12.045 31.813 12.1788 31.7866 12.3163C30.8818 16.9611 27.7868 18.5657 23.8338 18.5657H21.8211C21.3378 18.5657 20.9304 18.9168 20.855 19.3936L19.8245 25.929L19.5327 27.7815C19.4837 28.0945 19.7251 28.3768 20.0409 28.3768H23.6108C24.0336 28.3768 24.3925 28.0697 24.459 27.6528L24.4942 27.4714L25.1664 23.2061L25.2096 22.9722C25.2753 22.5539 25.635 22.2467 26.0578 22.2467H26.5917C30.0502 22.2467 32.7578 20.8425 33.5492 16.779C33.8797 15.0815 33.7085 13.6642 32.8338 12.6673C32.5692 12.3668 32.2407 12.1174 31.8567 11.9141Z" fill="#179BD7"/><path d="M30.9099 11.5376C30.7718 11.4974 30.629 11.4608 30.4827 11.4279C30.3358 11.3957 30.185 11.3672 30.0301 11.3423C29.4874 11.2546 28.8928 11.2129 28.2558 11.2129H22.8789C22.7465 11.2129 22.6208 11.2429 22.5082 11.297C22.2602 11.4162 22.076 11.651 22.0313 11.9384L20.8873 19.1832L20.8545 19.3945C20.9299 18.9177 21.3372 18.5666 21.8206 18.5666H23.8332C27.7863 18.5666 30.8815 16.9613 31.7861 12.3172C31.813 12.1797 31.8358 12.0459 31.8562 11.915C31.6274 11.7936 31.3794 11.6897 31.1124 11.6012C31.0467 11.5793 30.9787 11.5581 30.9099 11.5376Z" fill="#222D65"/><path d="M22.0311 11.9373C22.0758 11.6499 22.2602 11.4151 22.508 11.2967C22.6215 11.2425 22.7465 11.2125 22.8787 11.2125H28.2558C28.8928 11.2125 29.4874 11.2542 30.0299 11.342C30.185 11.3669 30.3358 11.3954 30.4827 11.4276C30.629 11.4605 30.7716 11.4971 30.9099 11.5373C30.9785 11.5577 31.0465 11.5789 31.1131 11.6002C31.38 11.6887 31.628 11.7932 31.8568 11.9139C32.1261 10.1974 31.8547 9.02873 30.9267 7.97046C29.9036 6.80542 28.0568 6.30664 25.6939 6.30664H18.8337C18.3509 6.30664 17.9393 6.65767 17.8646 7.13525L15.0073 25.2472C14.9509 25.6055 15.2273 25.9289 15.5886 25.9289H19.824L20.8873 19.1821L22.0311 11.9373Z" fill="#253B80"/></svg>`,
+  unknown_credit_card: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.25 31.5H10.25C9.54688 31.5 9 32.125 9 32.75C9 33.4531 9.54688 34 10.25 34H15.25C15.875 34 16.5 33.4531 16.5 32.75C16.5 32.125 15.875 31.5 15.25 31.5ZM15.25 26.5H10.25C9.54688 26.5 9 27.125 9 27.75C9 28.4531 9.54688 29 10.25 29H15.1719C15.7969 29 16.4219 28.4531 16.4219 27.75C16.4219 27.125 15.875 26.5 15.25 26.5ZM30.25 31.5H20.25C19.5469 31.5 19 32.125 19 32.75C19 33.4531 19.5469 34 20.25 34H30.25C30.875 34 31.5 33.4531 31.5 32.75C31.5 32.125 30.875 31.5 30.25 31.5ZM41.5 6.5H6.5C3.6875 6.5 1.5 8.76562 1.5 11.5V36.5C1.5 39.3125 3.6875 41.5 6.5 41.5H41.5C44.2344 41.5 46.5 39.3125 46.5 36.5V11.5C46.5 8.76562 44.2344 6.5 41.5 6.5ZM44 36.5C44 37.9062 42.8281 39 41.5 39H6.5C5.09375 39 4 37.9062 4 36.5V11.5C4 10.1719 5.09375 9 6.5 9H41.5C42.8281 9 44 10.1719 44 11.5V36.5ZM40.25 11.5H30.25C29.5469 11.5 29 12.125 29 12.75V20.25C29 20.9531 29.5469 21.5 30.25 21.5H40.25C40.875 21.5 41.5 20.9531 41.5 20.25V12.75C41.5 12.125 40.875 11.5 40.25 11.5ZM39 19H31.5V14H39V19ZM37.75 26.5H35.25C34.5469 26.5 34 27.125 34 27.75C34 28.4531 34.5469 29 35.25 29H37.75C38.375 29 39 28.4531 39 27.75C39 27.125 38.375 26.5 37.75 26.5ZM30.25 26.5H20.25C19.5469 26.5 18.9219 27.125 18.9219 27.75C18.9219 28.4531 19.5469 29 20.25 29H30.25C30.875 29 31.5 28.4531 31.5 27.75C31.5 27.125 30.875 26.5 30.25 26.5Z" fill="#666666"/></svg>`,
+  maestro: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.1896 24.2532C29.1896 31.8781 23.0794 38.0592 15.5421 38.0592C8.00474 38.0592 1.89453 31.8781 1.89453 24.2532C1.89453 16.6284 8.00474 10.4473 15.5421 10.4473C23.0794 10.4473 29.1896 16.6284 29.1896 24.2532Z" fill="#ED0006"/><path d="M46.8947 24.2532C46.8947 31.8781 40.7845 38.0592 33.2472 38.0592C25.7098 38.0592 19.5996 31.8781 19.5996 24.2532C19.5996 16.6284 25.7098 10.4473 33.2472 10.4473C40.7845 10.4473 46.8947 16.6284 46.8947 24.2532Z" fill="#0099DF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M24.3946 34.7618C27.329 32.2295 29.1896 28.4615 29.1896 24.2539C29.1896 20.0463 27.329 16.2784 24.3946 13.7461C21.4603 16.2784 19.5996 20.0463 19.5996 24.2539C19.5996 28.4615 21.4603 32.2295 24.3946 34.7618Z" fill="#6C6BBD"/></svg>`,
+  empty_state: `<svg viewBox="0 0 112 114" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M75.8296 26.468C76.9451 30.9932 79.2271 35.147 82.4481 38.5155L38.7823 50.2275C38.5688 50.2885 38.3553 50.3393 38.1316 50.38C32.2248 51.539 26.1349 47.1572 24.2846 40.2947C22.3733 33.178 25.7893 26.0613 31.8893 24.4448L75.5246 12.7227C74.4316 17.2533 74.5367 21.9903 75.8296 26.468Z" fill="#E8E9EA"/><path opacity="0.5" d="M74.793 19.4834L24.1732 32.9847C23.6979 34.9463 23.6321 36.9848 23.98 38.9729L75.5149 25.2276C75.0864 23.3412 74.8446 21.4172 74.793 19.4834Z" fill="white"/><path opacity="0.2" d="M38.1116 50.3401C38.3353 50.3401 38.5488 50.2486 38.7623 50.1876L82.4789 38.4756C81.0304 37.0616 79.785 35.4535 78.7783 33.6973L28.3008 47.1681C29.5616 48.4452 31.1112 49.4001 32.8188 49.9522C34.5264 50.5043 36.3418 50.6374 38.1116 50.3401Z" fill="#2C4B75"/><path d="M31.8893 24.4453C25.7893 26.072 22.3733 33.1785 24.2847 40.2951C26.135 47.1576 32.2248 51.5395 38.1113 50.3398L31.4115 52.1495C25.3115 53.7863 18.815 49.3435 16.9037 42.237C14.9923 35.1305 18.388 28.0036 24.488 26.3668L31.8893 24.4453Z" fill="#D5D7DB"/><path d="M75.5247 12.7231C76.6125 8.77848 78.839 5.90131 81.95 5.07781L93.0114 2.13965C86.9114 3.78665 84.1765 13.323 86.9114 23.4896C89.6462 33.6563 96.7934 40.5798 102.893 38.9531L91.8015 41.932C88.7515 42.7656 85.3559 41.3931 82.4482 38.516C79.2271 35.1475 76.9452 30.9937 75.8297 26.4685C74.5368 21.9908 74.4317 17.2537 75.5247 12.7231Z" fill="#D5D7DB"/><path opacity="0.2" d="M91.8019 41.9321L102.853 38.9736C99.803 39.7767 96.5904 38.4957 93.703 35.7812L82.6519 38.7296C85.5392 41.4543 88.7925 42.7454 91.8019 41.9321Z" fill="#898989"/><path opacity="0.5" d="M86.1694 11.6455L75.1284 14.5938C74.6076 17.8472 74.6834 21.1683 75.3521 24.3945L86.3931 21.4563C85.7195 18.2272 85.6437 14.902 86.1694 11.6455Z" fill="white"/><path opacity="0.5" d="M24.1732 32.8936L16.8126 34.8557C16.3369 36.8172 16.2712 38.8558 16.6194 40.8439L23.9801 38.8817C23.6318 36.8936 23.6976 34.8551 24.1732 32.8936Z" fill="white"/><path opacity="0.2" d="M31.4318 52.1903L38.1113 50.34C36.3869 50.6322 34.6178 50.5129 32.9482 49.9917C31.2786 49.4705 29.7558 48.5622 28.5038 47.3408L21.1533 49.3233C22.4831 50.6333 24.1241 51.5837 25.922 52.0852C27.72 52.5867 29.616 52.6229 31.4318 52.1903Z" fill="#9B9B9B"/><path d="M53.6767 113.881C53.1715 113.882 52.6869 113.682 52.3287 113.325C51.9706 112.969 51.768 112.485 51.7653 111.98V50.9803C51.7462 50.7183 51.7813 50.4551 51.8684 50.2072C51.9555 49.9594 52.0928 49.7321 52.2717 49.5397C52.4506 49.3473 52.6672 49.1938 52.9081 49.0888C53.1489 48.9839 53.4089 48.9297 53.6716 48.9297C53.9343 48.9297 54.1942 48.9839 54.4351 49.0888C54.676 49.1938 54.8926 49.3473 55.0715 49.5397C55.2504 49.7321 55.3877 49.9594 55.4748 50.2072C55.5619 50.4551 55.597 50.7183 55.5778 50.9803V111.98C55.5778 112.485 55.3779 112.97 55.0216 113.328C54.6654 113.686 54.1818 113.889 53.6767 113.892V113.881Z" fill="#97A5B0"/><path d="M53.6767 94.8186C53.3185 94.8263 52.9657 94.731 52.6601 94.5441L41.7106 87.9561C41.3064 87.6819 41.0224 87.2634 40.9171 86.7865C40.8117 86.3097 40.8929 85.8105 41.144 85.3916C41.3951 84.9727 41.797 84.6658 42.2673 84.5339C42.7375 84.402 43.2404 84.4551 43.6727 84.6824L54.6527 91.2806C55.0156 91.4946 55.2971 91.8232 55.453 92.2146C55.6089 92.606 55.6304 93.0382 55.514 93.4431C55.3977 93.8481 55.1501 94.2029 54.8102 94.4519C54.4702 94.7008 54.0572 94.8298 53.6361 94.8186H53.6767Z" fill="#97A5B0"/><path d="M53.6765 94.8189C53.2553 94.8301 52.8423 94.7011 52.5024 94.4522C52.1625 94.2032 51.9149 93.8484 51.7986 93.4435C51.6822 93.0385 51.7036 92.6064 51.8595 92.2149C52.0154 91.8235 52.297 91.4949 52.6599 91.2809L63.6399 84.6827C63.8548 84.5519 64.0934 84.4646 64.3421 84.426C64.5908 84.3874 64.8446 84.3981 65.0891 84.4576C65.3336 84.5171 65.564 84.6241 65.7671 84.7727C65.9703 84.9212 66.1422 85.1083 66.273 85.3232C66.4039 85.5382 66.4911 85.7768 66.5297 86.0254C66.5683 86.2741 66.5576 86.5279 66.4981 86.7724C66.4387 87.017 66.3316 87.2474 66.1831 87.4505C66.0346 87.6536 65.8475 87.8255 65.6325 87.9564L54.6525 94.5444C54.3593 94.7255 54.0211 94.8206 53.6765 94.8189Z" fill="#97A5B0"/><path d="M108.953 17.5824C111.677 27.7491 108.953 37.3363 102.853 38.9324C96.7527 40.5286 89.5954 33.6763 86.9114 23.5096C84.2274 13.3429 86.9114 3.78627 93.0114 2.1596C99.1114 0.532932 106.228 7.42593 108.953 17.5824Z" fill="#AEC0CC"/><g opacity="0.5"><path opacity="0.5" d="M96.3359 31.9073C94.0622 29.2643 92.582 26.0325 92.0659 22.5845C90.6832 15.6203 92.0659 9.06281 95.1159 7.94448C97.5966 7.03965 100.433 9.97781 102.151 14.746C102.599 15.8948 97.566 33.1171 96.3359 31.9073Z" fill="white"/></g><path opacity="0.2" d="M89.0264 28.7254C86.3017 18.5587 89.0264 9.00205 95.1264 7.37539C99.8132 6.11472 105.13 9.93739 108.567 16.3831C105.629 6.89755 98.8169 0.594219 92.9609 2.14972C86.8609 3.79672 84.126 13.3331 86.8609 23.4997C87.4508 25.7235 88.2934 27.8725 89.372 29.9047C89.2602 29.5184 89.1382 29.132 89.0264 28.7254Z" fill="#798A93"/><path d="M30.9949 113.689C30.7444 113.689 30.4964 113.639 30.265 113.543C30.0337 113.447 29.8237 113.306 29.647 113.128C29.4703 112.951 29.3305 112.74 29.2356 112.508C29.1406 112.276 29.0924 112.028 29.0938 111.777C29.0952 111.504 29.1541 111.234 29.2666 110.984L51.9383 61.6048C52.1763 61.191 52.5606 60.8813 53.0155 60.7365C53.4703 60.5917 53.963 60.6224 54.3964 60.8226C54.8298 61.0227 55.1726 61.3777 55.3574 61.8179C55.5422 62.2581 55.5556 62.7514 55.3949 63.201L32.7233 112.58C32.5705 112.91 32.3267 113.19 32.0205 113.386C31.7144 113.583 31.3586 113.687 30.9949 113.689Z" fill="#97A5B0"/><path d="M76.3485 113.688C75.9846 113.688 75.6283 113.584 75.3219 113.387C75.0156 113.191 74.772 112.911 74.6202 112.58L51.9384 63.2004C51.7281 62.7421 51.7085 62.2189 51.8839 61.7461C52.0593 61.2732 52.4153 60.8894 52.8737 60.6791C53.3321 60.4688 53.8553 60.4492 54.3281 60.6246C54.8009 60.8 55.1847 61.156 55.395 61.6144L78.0769 110.984C78.2096 111.275 78.2672 111.595 78.2442 111.914C78.2213 112.233 78.1186 112.541 77.9456 112.81C77.7726 113.079 77.5348 113.301 77.254 113.454C76.9731 113.608 76.6583 113.688 76.3384 113.688H76.3485Z" fill="#97A5B0"/><path d="M16.5176 36.4521L6.23905 39.2073C5.51184 39.3998 4.82971 39.7338 4.23167 40.1901C3.63362 40.6464 3.1314 41.2162 2.7537 41.8668C2.37601 42.5173 2.13027 43.236 2.03052 43.9816C1.93077 44.7272 1.97898 45.4852 2.17239 46.2121C2.36489 46.9394 2.69886 47.6215 3.15519 48.2195C3.61152 48.8176 4.18126 49.3198 4.83183 49.6975C5.48241 50.0752 6.20105 50.3209 6.94666 50.4207C7.69228 50.5204 8.45025 50.4722 9.17722 50.2788L19.4557 47.5236L16.5176 36.4521Z" fill="#E8E9EA"/><path opacity="0.2" d="M2.1927 46.212C2.3852 46.9392 2.71917 47.6214 3.1755 48.2194C3.63183 48.8175 4.20157 49.3197 4.85214 49.6974C5.50272 50.0751 6.22136 50.3208 6.96697 50.4206C7.71259 50.5203 8.47056 50.4721 9.19753 50.2787L19.476 47.5235L17.9714 41.9014L2.17236 46.09C2.17236 46.09 2.18253 46.1714 2.1927 46.212Z" fill="#2C4B75"/><path d="M101.023 41.1185C94.4549 41.1185 87.7449 34.1442 85.0304 24.008C81.9804 12.662 85.2643 2.24121 92.4928 0.299382C93.8142 -0.0285937 95.188 -0.0878062 96.5328 0.125257C97.8775 0.338321 99.1658 0.81932 100.321 1.53971C105.018 4.25421 108.932 10.0594 110.793 17.054C113.843 28.4102 110.569 38.831 103.351 40.7729C102.593 40.9891 101.81 41.1053 101.023 41.1185ZM93.4789 3.97971C88.4871 5.32171 86.3013 14.0447 88.7108 23.0219C91.1203 31.999 97.3728 38.465 102.365 37.123C107.356 35.781 109.481 27.058 107.112 18.0707C105.526 12.113 102.192 7.06021 98.4098 4.85405C96.9484 3.91755 95.1776 3.5926 93.4789 3.94921V3.97971Z" fill="#97A5B0"/><path d="M89.9616 44.0872C86.5801 43.9028 83.4084 42.39 81.1369 39.8782C77.6813 36.2672 75.2282 31.8165 74.0203 26.9666C72.6376 22.1706 72.5255 17.0976 73.6949 12.2452C75.0268 7.41606 77.7616 4.22373 81.4724 3.25789L92.4931 0.299394C92.9811 0.164576 93.5028 0.229153 93.9432 0.478921C94.3836 0.728688 94.7068 1.14319 94.8416 1.63123C94.9764 2.11927 94.9118 2.64088 94.6621 3.08131C94.4123 3.52174 93.9978 3.84491 93.5098 3.97973L82.4383 6.93823C80.1203 7.55839 78.3716 9.79506 77.3549 13.2517C76.3603 17.4371 76.4689 21.8089 77.6701 25.9397C78.6926 30.136 80.7957 33.9915 83.7701 37.1231C86.3219 39.6444 88.9958 40.6916 91.2934 40.0612L102.365 37.1231C102.853 36.9882 103.375 37.0528 103.815 37.3026C104.255 37.5524 104.579 37.9669 104.713 38.4549C104.848 38.9429 104.784 39.4645 104.534 39.905C104.284 40.3454 103.87 40.6686 103.382 40.8034L92.2898 43.7721C91.5314 43.9814 90.7483 44.0874 89.9616 44.0872Z" fill="#97A5B0"/><path d="M38.7826 52.1287C38.3192 52.1312 37.8709 51.9644 37.5218 51.6596C37.1727 51.3548 36.947 50.933 36.8871 50.4735C36.8271 50.0139 36.9371 49.5483 37.1963 49.1642C37.4555 48.78 37.8461 48.5038 38.2946 48.3874L81.9503 36.6754C82.192 36.6086 82.4444 36.5901 82.6932 36.6209C82.942 36.6517 83.1823 36.7312 83.4004 36.8549C83.6185 36.9786 83.8101 37.144 83.9642 37.3417C84.1184 37.5394 84.2321 37.7655 84.2988 38.0072C84.3656 38.2489 84.3841 38.5013 84.3533 38.7501C84.3225 38.9989 84.243 39.2392 84.1193 39.4573C83.9956 39.6754 83.8302 39.8669 83.6325 40.0211C83.4348 40.1752 83.2086 40.2889 82.967 40.3557L39.2808 52.0677C39.1179 52.1085 38.9506 52.129 38.7826 52.1287Z" fill="#97A5B0"/><path d="M28.8292 54.4066C26.2148 54.3778 23.6702 53.5592 21.5295 52.0581C18.3328 49.8237 16.0453 46.5151 15.0838 42.7353C12.9183 34.6019 16.924 26.4686 24.0203 24.5369L75.0367 10.9034C75.5367 10.7835 76.0638 10.8658 76.5035 11.1323C76.9433 11.3988 77.2601 11.828 77.3852 12.3268C77.4154 12.4641 77.4358 12.6034 77.4462 12.7436C77.4469 13.1866 77.2929 13.616 77.0107 13.9575C76.7286 14.299 76.336 14.5313 75.9008 14.6143L24.9963 28.2579C19.913 29.6203 17.1375 35.6898 18.7642 41.7796C19.5053 44.6617 21.2501 47.1851 23.6848 48.8963C24.7137 49.6529 25.8962 50.1743 27.1488 50.4238C28.4014 50.6732 29.6934 50.6446 30.9337 50.3399C32.6925 49.8722 34.2683 49.4453 35.6917 49.0487L37.6437 48.5303C37.8853 48.4635 38.1378 48.445 38.3866 48.4758C38.6354 48.5066 38.8757 48.5861 39.0938 48.7098C39.3118 48.8335 39.5034 48.9989 39.6576 49.1966C39.8117 49.3943 39.9254 49.6204 39.9922 49.8621C40.0589 50.1037 40.0774 50.3562 40.0466 50.605C40.0158 50.8538 39.9363 51.0941 39.8127 51.3122C39.689 51.5302 39.5236 51.7218 39.3259 51.876C39.1281 52.0301 38.902 52.1438 38.6603 52.2106L36.7287 52.7291L31.9503 54.0202C30.932 54.2886 29.8822 54.4186 28.8292 54.4066Z" fill="#97A5B0"/><path d="M36.2105 52.4745C30.1105 52.4745 24.3053 47.7267 22.4448 40.7829C21.2903 36.6631 21.8053 32.2544 23.8783 28.5117C24.6773 27.0789 25.7529 25.8189 27.0426 24.8049C28.3323 23.791 29.8105 23.0431 31.3915 22.6049C31.6338 22.5381 31.8869 22.5197 32.1363 22.5508C32.3857 22.5819 32.6266 22.6617 32.8451 22.7859C33.0637 22.91 33.2556 23.076 33.4101 23.2743C33.5645 23.4727 33.6783 23.6995 33.745 23.9418C33.8118 24.1841 33.8302 24.4372 33.7991 24.6866C33.7681 24.9361 33.6882 25.1769 33.564 25.3955C33.4399 25.614 33.2739 25.806 33.0756 25.9604C32.8772 26.1148 32.6505 26.2286 32.4081 26.2954C31.3106 26.602 30.2855 27.1251 29.3933 27.834C28.501 28.5429 27.7597 29.4232 27.213 30.423C25.6523 33.2916 25.287 36.6602 26.1963 39.7967C27.7721 45.6527 32.8961 49.4855 37.8371 48.5095L38.315 48.3977L39.3316 52.078C39.0784 52.1534 38.8202 52.2111 38.559 52.2509C37.7862 52.408 36.999 52.483 36.2105 52.4745Z" fill="#97A5B0"/><path d="M83.1905 26.4072C82.7311 26.4005 82.2896 26.2286 81.9467 25.9229C81.6037 25.6172 81.3824 25.1982 81.3231 24.7426C81.2638 24.2871 81.3706 23.8254 81.624 23.4422C81.8773 23.0589 82.2602 22.7797 82.7025 22.6557L86.3828 21.6391C86.8722 21.5042 87.3951 21.5693 87.8365 21.8201C88.2779 22.0708 88.6016 22.4866 88.7364 22.976C88.8712 23.4654 88.8061 23.9883 88.5554 24.4296C88.3047 24.871 87.8889 25.1947 87.3995 25.3296L83.7192 26.3462C83.5464 26.3896 83.3686 26.4101 83.1905 26.4072Z" fill="#97A5B0"/><path d="M82.3974 16.0882C81.934 16.0907 81.4856 15.9239 81.1365 15.6191C80.7875 15.3143 80.5618 14.8925 80.5018 14.4329C80.4419 13.9734 80.5518 13.5078 80.811 13.1237C81.0702 12.7395 81.4608 12.4633 81.9094 12.3469L85.4576 11.3912C85.9456 11.2564 86.4672 11.321 86.9076 11.5707C87.3481 11.8205 87.6712 12.235 87.8061 12.723C87.9409 13.2111 87.8763 13.7327 87.6265 14.1731C87.3768 14.6135 86.9623 14.9367 86.4742 15.0715L82.9261 16.0272C82.7533 16.0706 82.5755 16.0911 82.3974 16.0882Z" fill="#97A5B0"/><path d="M87.6636 35.7399C87.2292 35.7042 86.8201 35.5212 86.504 35.2211C86.1879 34.921 85.9839 34.5219 85.9258 34.09C85.8676 33.658 85.9589 33.2192 86.1843 32.8462C86.4098 32.4732 86.756 32.1885 87.1654 32.0392L90.7238 31.0836C91.2118 30.9488 91.7334 31.0133 92.1738 31.2631C92.6143 31.5129 92.9374 31.9274 93.0723 32.4154C93.2071 32.9034 93.1425 33.4251 92.8927 33.8655C92.643 34.3059 92.2285 34.6291 91.7404 34.7639L88.1923 35.7196C88.0176 35.7486 87.84 35.7554 87.6636 35.7399Z" fill="#97A5B0"/><path d="M53.6766 50.9596C56.8321 50.9596 59.3902 48.4015 59.3902 45.2459C59.3902 42.0903 56.8321 39.5322 53.6766 39.5322C50.521 39.5322 47.9629 42.0903 47.9629 45.2459C47.9629 48.4015 50.521 50.9596 53.6766 50.9596Z" fill="#E8E9EA"/><path d="M53.6768 52.8711C52.1687 52.8711 50.6945 52.4239 49.4405 51.5861C48.1866 50.7482 47.2093 49.5573 46.6322 48.1641C46.0551 46.7708 45.9041 45.2376 46.1983 43.7585C46.4925 42.2794 47.2187 40.9208 48.2851 39.8544C49.3514 38.788 50.7101 38.0618 52.1892 37.7676C53.6683 37.4734 55.2014 37.6244 56.5947 38.2015C57.988 38.7786 59.1789 39.756 60.0167 41.0099C60.8546 42.2638 61.3018 43.738 61.3018 45.2461C61.3018 47.2684 60.4984 49.2078 59.0684 50.6378C57.6385 52.0678 55.699 52.8711 53.6768 52.8711ZM53.6768 41.4336C52.9232 41.4336 52.1864 41.6569 51.5597 42.0754C50.933 42.4939 50.4443 43.0887 50.1555 43.7848C49.8666 44.4808 49.7905 45.2469 49.9368 45.9861C50.0831 46.7254 50.4452 47.4048 50.9773 47.9384C51.5095 48.4719 52.1879 48.8358 52.9268 48.9841C53.6656 49.1324 54.4319 49.0583 55.1287 48.7713C55.8255 48.4843 56.4217 47.9972 56.8418 47.3716C57.2619 46.746 57.4873 46.0099 57.4893 45.2563C57.4906 44.7547 57.393 44.2579 57.202 43.7942C57.011 43.3304 56.7304 42.9089 56.3762 42.5538C56.022 42.1987 55.6013 41.917 55.1381 41.7248C54.6749 41.5325 54.1783 41.4336 53.6768 41.4336Z" fill="#97A5B0"/><path d="M53.6664 47.1572C53.2928 47.1496 52.9297 47.0327 52.6219 46.8209C52.3141 46.6092 52.0751 46.3118 51.9345 45.9657C51.7939 45.6195 51.7578 45.2398 51.8307 44.8733C51.9036 44.5069 52.0823 44.1699 52.3447 43.9039C52.7095 43.5652 53.1889 43.377 53.6867 43.377C54.1845 43.377 54.6639 43.5652 55.0287 43.9039C55.203 44.0883 55.3441 44.3016 55.4455 44.5342C55.5425 44.7624 55.5909 45.0082 55.5879 45.2561C55.5906 45.5044 55.5443 45.7508 55.4517 45.9813C55.3592 46.2117 55.2221 46.4217 55.0484 46.5992C54.8747 46.7767 54.6677 46.9182 54.4393 47.0157C54.2109 47.1132 53.9655 47.1647 53.7172 47.1674L53.6664 47.1572Z" fill="#97A5B0"/><path d="M7.72333 52.3727C5.86892 52.3801 4.07538 51.7114 2.67839 50.4919C1.28139 49.2723 0.376708 47.5855 0.133663 45.7471C-0.109383 43.9087 0.325869 42.0447 1.35795 40.504C2.39004 38.9633 3.94821 37.8516 5.74083 37.3768L16.0295 34.6217C16.5175 34.4868 17.0391 34.5514 17.4796 34.8012C17.92 35.051 18.2432 35.4654 18.378 35.9535C18.5128 36.4415 18.4482 36.9631 18.1985 37.4036C17.9487 37.844 17.5342 38.1672 17.0462 38.302L6.73716 41.047C5.75973 41.3085 4.92623 41.9477 4.42002 42.8238C3.91381 43.6998 3.77636 44.7411 4.03791 45.7186C4.29946 46.696 4.93858 47.5295 5.81467 48.0357C6.69076 48.5419 7.73206 48.6794 8.70949 48.4178L18.988 45.6627C19.476 45.5278 19.9976 45.5924 20.4381 45.8422C20.8785 46.092 21.2017 46.5064 21.3365 46.9945C21.4713 47.4825 21.4067 48.0041 21.157 48.4446C20.9072 48.885 20.4927 49.2082 20.0047 49.343L9.69566 52.0982C9.05293 52.2749 8.3899 52.3672 7.72333 52.3727Z" fill="#97A5B0"/></svg>`
+}

package/init/vuetify.config.js

@@ -1,4 +1,4 @@
-import VcSvg from "./VcSvg/VcSvg.vue";
+import VcSvg from "../src/components/VcSvg/VcSvg.vue";
 import icons from "./SvgIcons";
 
 const reducer = (acc, key) => {
@@ -25,12 +25,12 @@ export default {
             light: {
                 primary: '#0C315E', // represents the secondary color on DB
                 secondary: { // represents the primary color on DB
-                    base: '#00dcf7',
-                    lighten1: '#99f1fc',
-                    lighten2: '#c2f7fd',
-                    lighten3: '#e0fbfe'
+                    base: '#0093B8',
+                    lighten1: '#99D4E3',
+                    lighten2: '#C2E5EE',
+                    lighten3: '#EDF7FA'
                 },
             }
         }
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcBanner/VcBanner.spec.js

@@ -0,0 +1,80 @@
+import '@testing-library/jest-dom'
+import VcBanner from './VcBanner.vue';
+import Vuetify from 'vuetify'
+import {render} from '@testing-library/vue';
+import init from '../../../testing-library.config';
+import {fireEvent,within} from "@testing-library/dom";
+
+init();
+
+describe('VcBanner.vue', () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {},
+            },
+            callback,
+        )
+    }
+
+    it('mounts', () => {
+        const {container} = renderWithVuetify(VcBanner, {
+            props: {}
+        })
+
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it('emit click', async () => {
+        const {getByTestId, emitted} = renderWithVuetify(VcBanner, {
+            props: {buttonLabel: "upgrade"}
+        })
+
+        const banner = getByTestId('VcBanner')
+        const VcButton = within(banner).getByTestId('vc-btn')
+        await fireEvent.click(VcButton)
+        expect(emitted().onAction.length).toBe(1)
+    });
+
+    it('render title', () => {
+        const {getByTestId} = renderWithVuetify(VcBanner, {
+            props: {title: 'upgrade now'}
+        })
+
+        const banner = getByTestId('VcBanner')
+        const title = within(banner).getByText('upgrade now')
+        expect(title).toBeInTheDocument()
+    });
+
+    it('render subtitle', () => {
+        const subtitleText = "All the insights you need to understand your business"
+        const {getByTestId} = renderWithVuetify(VcBanner, {
+            props: {subtitle: subtitleText}
+        })
+
+        const banner = getByTestId('VcBanner')
+        const subtitle = within(banner).getByText(subtitleText)
+        expect(subtitle).toBeInTheDocument()
+    });
+
+    it('hidden button', () => {
+        const {getByTestId} = renderWithVuetify(VcBanner, {
+            props: {
+                buttonLabel: ""
+            }
+        })
+
+        const banner = getByTestId('VcBanner')
+        const VcButton = within(banner).queryByTestId('vc-btn')
+        expect(VcButton).not.toBeInTheDocument()
+    });
+});

package/src/components/VcBanner/VcBanner.stories.js

@@ -0,0 +1,43 @@
+import VcBanner from './VcBanner';
+
+const Template = (args, {argTypes}) => ({
+        components: {VcBanner: VcBanner},
+        props: Object.keys(argTypes),
+        template: `<VcBanner :title="title" :subtitle="subtitle" :backgroundColor="backgroundColor" 
+                             :image="image" :buttonLabel="buttonLabel" @onAction="onAction"></VcBanner>`,
+    })
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    buttonLabel: "Upgrade Now",
+    image: require('@/stories/assets/upgrade.svg'),
+    title: "Upgrade to get Reports!",
+    subtitle: "All the insights you need to understand your business and increase your bottom line.",
+    backgroundColor: "#f5fafd"
+}
+
+export const Slim = Template.bind({});
+
+// Set default values
+Slim.args = {
+    image: require('@/stories/assets/upgrade.svg'),
+    title: "Upgrade to get Reports!",
+    buttonLabel: ''
+}
+
+export default {
+    title: 'Content display / VcBanner', // This will control the story sidebar position
+    id: 'VcBanner', // This will be the link to this component
+    component: VcBanner,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=3846%3A35690',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/src/components/VcBanner/VcBanner.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="VcBanner pa-6 py-md-3 px-md-10 d-flex flex-column flex-md-row align-start align-md-center" :data-qa="dataQa" :style="{backgroundColor: backgroundColor}">
+    <img class="d-none d-md-block" v-if="image" :src="image">
+    <div class="text-container px-md-8 flex-grow-1">
+      <div class="banner-title pb-2 pb-md-0">{{title}}</div>
+      <div class="banner-subtitle pb-4 pb-md-0" v-if="subtitle">{{subtitle}}</div>
+    </div>
+    <VcButton :large="$vuetify.breakpoint.smAndUp" v-if="buttonLabel" @click="$emit('onAction')">{{buttonLabel}}</VcButton>
+  </div>
+</template>
+
+<script>
+import VcButton from "@/components/VcButton/VcButton.vue";
+
+export default {
+  name: "VcBanner",
+  components: {VcButton},
+
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcBanner'
+    },
+    image:{
+      type: String,
+    },
+    backgroundColor: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    title:{
+      type: String
+    },
+    subtitle:{
+      type: String
+    },
+    buttonLabel: {
+      type: String
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/mixins.scss";
+
+.VcBanner{
+  //font-family: var(--primary-font-family);
+  min-height: 128px;
+  box-sizing: border-box;
+  box-shadow: var(--shadow-10);
+  @include md-and-up {
+    box-shadow: unset;
+    border-radius: var(--size-value3);
+    border: 1px solid var(--neutral-lighten-2);
+  }
+  img{max-width: 104px}
+  .text-container{
+    color: var(--gray-darken-5);
+    .banner-title{
+      font-weight: var(--font-weight-large2);
+      font-size: var(--font-size-small3);
+      line-height: 22px;
+      @include md-and-up {
+        font-size: var(--font-size-medium2);
+        line-height: var(--size-value8);
+      }
+    }
+    .banner-subtitle{
+      font-size: var(--font-size-small2);
+      line-height: var(--size-value5);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+}
+
+
+</style>

package/src/components/VcEmptyState/VcEmptyState.vue

@@ -1,7 +1,8 @@
 <template>
   <VcLayout column :class="`VcEmptyState ${size}`" :data-qa="dataQa">
     <VcLayout column align-content-center>
-      <img :src="icon" class="VcEmptyStateImage">
+      <img v-if="icon" :src="icon" class="VcEmptyStateImage">
+      <VcSvg v-if="svg" :svg="svg" class="VcEmptyStateImage"/>
       <div class="VcEmptyStateTitle">{{ title }}</div>
     </VcLayout>
     <VcLayout class="VcEmptyStateSubtitle" column>{{ subtitle }}</VcLayout>
@@ -18,10 +19,11 @@
 import VcLayout from "@/components/VcLayout/VcLayout.vue";
 import VcButton from "@/components/VcButton/VcButton.vue";
 import VcLink from "@/components/VcLink/VcLink.vue";
+import VcSvg from "@/components/VcSvg/VcSvg.vue";
 
 export default {
-  name: "VcEmptyState",
-  components: {VcButton, VcLayout, VcLink},
+  name: 'VcEmptyState',
+  components: {VcSvg, VcButton, VcLayout, VcLink},
   props: {
     size: {
       type: String,
@@ -30,7 +32,11 @@ export default {
     },
     icon: {
       type: String,
-      required: true,
+      comment: 'url to some image'
+    },
+    svg: {
+      type: String,
+      comment: 'using the svgImage design system object'
     },
     title: {
       type: String,
@@ -74,6 +80,10 @@ export default {
   .VcEmptyStateImage {
     margin-bottom: var(--size-value4);
     max-height: 160px;
+
+    ::v-deep svg {
+      width: 160px;
+    }
   }
 
   .VcEmptyStateTitle {
@@ -96,6 +106,10 @@ export default {
   .VcEmptyStateImage {
     max-height: 48px;
     margin-bottom: var(--size-value8);
+
+    ::v-deep svg {
+      width: 48px;
+    }
   }
 }
 
@@ -103,6 +117,10 @@ export default {
   .VcEmptyStateImage {
     max-height: 280px;
     margin-bottom: var(--size-value8);
+
+    ::v-deep svg {
+      width: 280px;
+    }
   }
 
   .VcEmptyStateTitle {

package/{init → src/components}/VcSvg/VcSvg.stories.js

@@ -3,7 +3,11 @@ import VcSvgCmp from './VcSvg';
 const Template = (args, {argTypes}) => ({
     components: {VcSvg: VcSvgCmp},
     props: Object.keys(argTypes),
-    template: '<div>Used to display svg icons, for example, have a look at preview.js <VcSvg/></div>',
+    template: `<div>Use as helper for vuetify to display svg icons.<br/>
+    you can also use it to call svgImages.js object and pass the needed key for the component or<br/>
+    any other resource of full svg html tag<br/><br/>
+    <p>Please look at the source code to see how to implement</p>
+    <VcSvg :svg="$svgImages.empty_state"/></div>`,
 })
 
 export const Playground = Template.bind({});

package/src/components/index.js

@@ -10,8 +10,8 @@ export {default as VcIconWithTooltip} from './VcIconWithTooltip/VcIconWithToolti
 export {default as VcBottomActions} from './VcBottomActions/VcBottomActions.vue';
 export {default as VcActionList} from './VcActionList/VcActionList.vue';
 export {default as VcActions} from './VcActions/VcActions.vue';
-export {default as VcStepsBar} from './Wizard/VcStepsBar/VcStepsBar.vue';
-export {default as VcMobileWizardProgress} from './Wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue';
+export {default as VcStepsBar} from './wizard/VcStepsBar/VcStepsBar.vue';
+export {default as VcMobileWizardProgress} from './wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue';
 export {default as VcProgressCircular} from './VcProgressCircular/VcProgressCircular.vue';
 // export {default as VcAutoComplete} from './VcAutoComplete/VcAutoComplete.vue';
 export {default as VcButton} from './VcButton/VcButton.vue';
@@ -24,7 +24,6 @@ export {default as VcSwitch} from './VcSwitch/VcSwitch.vue';
 export {default as VcTextField} from './VcTextField/VcTextField.vue';
 export {default as VcAvatar} from './VcAvatar/VcAvatar.vue';
 export {default as VcTextArea} from './VcTextArea/VcTextArea.vue';
-export {default as VcSvg} from '../../init/VcSvg/VcSvg.vue';
 export {default as VcToast} from './VcToast/VcToast.vue';
 export {default as VcCard} from './VcCard/VcCard.vue';
 export {default as VcCheckbox} from './VcCheckbox/VcCheckbox.vue';
@@ -33,3 +32,7 @@ export {default as VcFocusArea} from './VcFocusArea/VcFocusArea.vue';
 export {default as VcLink} from './VcLink/VcLink.vue';
 export {default as VcListItem} from './list/VcListItem/VcListItem.vue';
 export {default as VcGroupHeader} from './list/VcGroupHeader/VcGroupHeader.vue';
+export {default as VcEmptyState} from './VcEmptyState/VcEmptyState.vue';
+export {default as VcSvg} from './VcSvg/VcSvg.vue';
+export {default as VcBanner} from './VcBanner/VcBanner.vue'
+export {default as VcWizardCtaContainer} from './wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue';

package/src/components/list/VcListItem/VcListItem.vue

@@ -55,7 +55,11 @@ export default {
 
 .VcListItem {
   flex-grow: 0;
-  padding: var(--size-value6) var(--size-value5);
+  padding: var(--size-value6) 0;
+
+  @include md-and-up {
+    padding: var(--size-value6) var(--size-value5);
+  }
 
   .selected-checkbox {
     padding-right: var(--size-value1);
@@ -63,11 +67,12 @@ export default {
 
   .right-area {
     justify-content: flex-end;
-    opacity: 0;
     transition: opacity 300ms;
     flex-grow: 0;
+    align-items: center;
+
     @include md-and-up {
-      min-width: 150px;
+      opacity: 0;
     }
 
     .three-dots {

package/src/components/{Wizard → wizard}/VcMobileWizardProgress/VcMobileWizardProgress.vue

@@ -68,6 +68,10 @@ export default {
 @import '@/../styles/variables.scss';
 
 .vc-mobile-wizard-progress {
+  padding: var(--size-value4);
+  background-color: var(--neutral-lighten-3);
+  width: 100%;
+  max-height: 84px;
   .titles-container {
     margin: var(--size-value0) var(--size-value4);