toggle-components-library 1.22.7 → 1.22.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.22.7",
+  "version": "1.22.9",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,7 +12,7 @@
   },
   "main": "dist/toggle-components-library.common.js",
   "module": "dist/toggle-components-library.esm.js",
-  "unpkg": "dist/toggle-components-library.min.js",
+  "unpkg": "dist/toggle-components-library.umd.min.js",
   "browser": {
     "./sfc": "src/toggle-components-library.vue"
   },
@@ -24,25 +24,27 @@
     "*.js"
   ],
   "dependencies": {
-    "core-js": "^3.6.4",
+    "apexcharts": "^3.35.5",
+    "core-js": "^3.25.0",
     "countries-list": "^2.6.1",
     "date-fns": "^1.30.1",
     "storybook-vue-router": "^1.0.7",
-    "vue": "^2.6.11",
+    "vue": "^2.7.10",
     "vue-airbnb-style-datepicker": "^2.7.1",
+    "vue-apexcharts": "^1.6.2",
     "vue-color": "^2.7.1",
     "vue-moment": "^4.1.0",
     "vue-multiselect": "^2.0.8",
-    "vue-router": "^3.4.3",
+    "vue-router": "^3.6.4",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.24.3",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@storybook/addon-actions": "^6.0.6",
-    "@storybook/addon-docs": "^6.0.6",
-    "@storybook/vue": "^6.0.6",
+    "@babel/core": "^7.18.13",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
     "@vue/cli-plugin-babel": "^4.5.3",
     "@vue/cli-plugin-eslint": "^4.5.3",
     "@vue/cli-service": "^4.5.3",
@@ -53,9 +55,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "react": "^16.13.1",
     "react-is": "^16.13.1",
-    "sass": "^1.26.8",
+    "sass": "^1.54.5",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.10"
   },
   "eslintConfig": {
     "root": true,

package/src/assets/icons/airship-clipboard-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_302" data-name="Group 302" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.291" height="96" viewBox="0 0 77.291 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_722" data-name="Rectangle 722" width="77.291" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_288" data-name="Group 288" clip-path="url(#clip-path)">
+    <path id="Path_180" data-name="Path 180" d="M69.583,14.842,59.83,13.67A17.4,17.4,0,0,0,27.207,9.751L17.451,8.579a8.751,8.751,0,0,0-9.733,7.645L.063,79.941a8.753,8.753,0,0,0,7.645,9.733L59.84,95.937a8.751,8.751,0,0,0,9.733-7.645l7.655-63.717a8.751,8.751,0,0,0-7.645-9.733M37.028,16.807a5.834,5.834,0,1,1,5.1,6.488,5.831,5.831,0,0,1-5.1-6.488m-20.8,22.55A4.066,4.066,0,0,1,20.745,35.8l12.743,1.531a4.066,4.066,0,0,1-.97,8.073L19.775,43.878a4.066,4.066,0,0,1-3.552-4.522M14.436,54.236a4.066,4.066,0,0,1,4.522-3.552l22.989,2.762a4.066,4.066,0,1,1-.97,8.073L17.988,58.758a4.066,4.066,0,0,1-3.552-4.522M60,73.886h0a4.066,4.066,0,0,1-4.522,3.552L16.309,72.732a4.066,4.066,0,1,1,.97-8.073L56.45,69.364A4.066,4.066,0,0,1,60,73.886" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-clipboard.svg

@@ -0,0 +1,10 @@
+<svg id="Group_289" data-name="Group 289" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77.291" height="96" viewBox="0 0 77.291 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_722" data-name="Rectangle 722" width="77.291" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_288" data-name="Group 288" clip-path="url(#clip-path)">
+    <path id="Path_180" data-name="Path 180" d="M69.583,14.842,59.83,13.67A17.4,17.4,0,0,0,27.207,9.751L17.451,8.579a8.751,8.751,0,0,0-9.733,7.645L.063,79.941a8.753,8.753,0,0,0,7.645,9.733L59.84,95.937a8.751,8.751,0,0,0,9.733-7.645l7.655-63.717a8.751,8.751,0,0,0-7.645-9.733M37.028,16.807a5.834,5.834,0,1,1,5.1,6.488,5.831,5.831,0,0,1-5.1-6.488m-20.8,22.55A4.066,4.066,0,0,1,20.745,35.8l12.743,1.531a4.066,4.066,0,0,1-.97,8.073L19.775,43.878a4.066,4.066,0,0,1-3.552-4.522M14.436,54.236a4.066,4.066,0,0,1,4.522-3.552l22.989,2.762a4.066,4.066,0,1,1-.97,8.073L17.988,58.758a4.066,4.066,0,0,1-3.552-4.522M60,73.886h0a4.066,4.066,0,0,1-4.522,3.552L16.309,72.732a4.066,4.066,0,1,1,.97-8.073L56.45,69.364A4.066,4.066,0,0,1,60,73.886" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-cog-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_305" data-name="Group 305" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.626" height="96" viewBox="0 0 95.626 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_725" data-name="Rectangle 725" width="95.626" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_294" data-name="Group 294" clip-path="url(#clip-path)">
+    <path id="Path_184" data-name="Path 184" d="M95.593,42.307a4.266,4.266,0,0,1-2.24,4.214L86.2,50.433a5.744,5.744,0,0,0-2.882,4.035q-.185,1.024-.432,2.047t-.553,2.018a5.745,5.745,0,0,0,.714,4.907l4.568,6.754a4.266,4.266,0,0,1,.061,4.772,47.7,47.7,0,0,1-4.387,5.57l-1.217,1.271a49.539,49.539,0,0,1-5.423,4.739,4.3,4.3,0,0,1-4.776.157L64.9,82.456a5.682,5.682,0,0,0-4.838-.514,41.751,41.751,0,0,1-4.126,1.2A5.736,5.736,0,0,0,52.1,86.2l-3.59,7.368A4.341,4.341,0,0,1,45.435,95.9a5.176,5.176,0,0,1-1.5.08,49.266,49.266,0,0,1-7.618-1.246,47.972,47.972,0,0,1-7.01-2.3A5.193,5.193,0,0,1,28,91.671a4.34,4.34,0,0,1-1.665-3.477l.182-8.152a5.736,5.736,0,0,0-2.033-4.49,36.983,36.983,0,0,1-3.047-2.912,5.742,5.742,0,0,0-4.606-1.831l-8.113.582a4.291,4.291,0,0,1-4.176-2.327,49.337,49.337,0,0,1-2.653-6.7l-.5-1.687A46.889,46.889,0,0,1,.029,53.718a4.27,4.27,0,0,1,2.249-4.212L9.431,45.59a5.743,5.743,0,0,0,2.878-4.024q.187-1.028.436-2.055t.553-2.026a5.743,5.743,0,0,0-.716-4.895L8.018,25.833a4.262,4.262,0,0,1-.07-4.775,47.088,47.088,0,0,1,4.4-5.566l1.212-1.273a48.671,48.671,0,0,1,5.424-4.729,4.268,4.268,0,0,1,4.778-.158l6.945,4.226a5.743,5.743,0,0,0,4.935.478,36.14,36.14,0,0,1,4.036-1.19,5.739,5.739,0,0,0,3.874-3.064L47.12,2.461A4.264,4.264,0,0,1,51.233.012,48.686,48.686,0,0,1,66.759,3.776a4.264,4.264,0,0,1,2.535,4.061l-.183,8.185A5.74,5.74,0,0,0,71.133,20.5a40.726,40.726,0,0,1,3.113,2.955,5.681,5.681,0,0,0,4.535,1.762l8.137-.577a4.276,4.276,0,0,1,4.173,2.329,48.632,48.632,0,0,1,2.653,6.687l.5,1.688a47.7,47.7,0,0,1,1.349,6.96M44.272,62.626a15.121,15.121,0,1,0-11.03-18.32,15.069,15.069,0,0,0,11.03,18.32" transform="translate(0 -0.001)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-cog.svg

@@ -0,0 +1,10 @@
+<svg id="Group_295" data-name="Group 295" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.626" height="96" viewBox="0 0 95.626 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_725" data-name="Rectangle 725" width="95.626" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_294" data-name="Group 294" clip-path="url(#clip-path)">
+    <path id="Path_184" data-name="Path 184" d="M95.593,42.307a4.266,4.266,0,0,1-2.24,4.214L86.2,50.433a5.744,5.744,0,0,0-2.882,4.035q-.185,1.024-.432,2.047t-.553,2.018a5.745,5.745,0,0,0,.714,4.907l4.568,6.754a4.266,4.266,0,0,1,.061,4.772,47.7,47.7,0,0,1-4.387,5.57l-1.217,1.271a49.539,49.539,0,0,1-5.423,4.739,4.3,4.3,0,0,1-4.776.157L64.9,82.456a5.682,5.682,0,0,0-4.838-.514,41.751,41.751,0,0,1-4.126,1.2A5.736,5.736,0,0,0,52.1,86.2l-3.59,7.368A4.341,4.341,0,0,1,45.435,95.9a5.176,5.176,0,0,1-1.5.08,49.266,49.266,0,0,1-7.618-1.246,47.972,47.972,0,0,1-7.01-2.3A5.193,5.193,0,0,1,28,91.671a4.34,4.34,0,0,1-1.665-3.477l.182-8.152a5.736,5.736,0,0,0-2.033-4.49,36.983,36.983,0,0,1-3.047-2.912,5.742,5.742,0,0,0-4.606-1.831l-8.113.582a4.291,4.291,0,0,1-4.176-2.327,49.337,49.337,0,0,1-2.653-6.7l-.5-1.687A46.889,46.889,0,0,1,.029,53.718a4.27,4.27,0,0,1,2.249-4.212L9.431,45.59a5.743,5.743,0,0,0,2.878-4.024q.187-1.028.436-2.055t.553-2.026a5.743,5.743,0,0,0-.716-4.895L8.018,25.833a4.262,4.262,0,0,1-.07-4.775,47.088,47.088,0,0,1,4.4-5.566l1.212-1.273a48.671,48.671,0,0,1,5.424-4.729,4.268,4.268,0,0,1,4.778-.158l6.945,4.226a5.743,5.743,0,0,0,4.935.478,36.14,36.14,0,0,1,4.036-1.19,5.739,5.739,0,0,0,3.874-3.064L47.12,2.461A4.264,4.264,0,0,1,51.233.012,48.686,48.686,0,0,1,66.759,3.776a4.264,4.264,0,0,1,2.535,4.061l-.183,8.185A5.74,5.74,0,0,0,71.133,20.5a40.726,40.726,0,0,1,3.113,2.955,5.681,5.681,0,0,0,4.535,1.762l8.137-.577a4.276,4.276,0,0,1,4.173,2.329,48.632,48.632,0,0,1,2.653,6.687l.5,1.688a47.7,47.7,0,0,1,1.349,6.96M44.272,62.626a15.121,15.121,0,1,0-11.03-18.32,15.069,15.069,0,0,0,11.03,18.32" transform="translate(0 -0.001)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-down-arrow-active.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65">
+  <path id="Polygon_38" data-name="Polygon 38" d="M56.515,8.485a12,12,0,0,1,16.971,0l36.029,36.029A12,12,0,0,1,101.029,65H28.971a12,12,0,0,1-8.485-20.485Z" transform="translate(130 65) rotate(180)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-down-arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="65" viewBox="0 0 130 65">
+  <path id="Polygon_39" data-name="Polygon 39" d="M56.515,8.485a12,12,0,0,1,16.971,0l36.029,36.029A12,12,0,0,1,101.029,65H28.971a12,12,0,0,1-8.485-20.485Z" transform="translate(130 65) rotate(180)" fill="#c3ced9"/>
+</svg>

package/src/assets/icons/airship-hat-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_306" data-name="Group 306" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.661" height="69.125" viewBox="0 0 95.661 69.125">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_726" data-name="Rectangle 726" width="95.661" height="69.125" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_296" data-name="Group 296" clip-path="url(#clip-path)">
+    <path id="Path_185" data-name="Path 185" d="M92.737,8.968,49.044.259A9.461,9.461,0,0,0,42.7.953L2.043,18.885a3.7,3.7,0,0,0,.755,6.9l5.3,1.463C6.583,29.8,6.9,66.418,6.9,66.418c0,1.353.9,2.705,1.836,2.707l1.921-.3c1.477-.162,3.463-.94,3.607-2.705,0,0-.835-35.1.751-37.272L46.7,36.289a9.461,9.461,0,0,0,6.339-.693L93.619,15.858a3.679,3.679,0,0,0,2.02-3.715,3.624,3.624,0,0,0-2.9-3.175M55.278,42.47a12.909,12.909,0,0,1-4.555,1.345,14.244,14.244,0,0,1-4.872-.307L26.261,38.824a2.381,2.381,0,0,0-2.934,2.329l.1,18.542c.675,6.17,13.934,9.77,29.906,8.023C69.039,66,81.476,59.592,80.8,53.426L76.9,35.28a2.38,2.38,0,0,0-3.364-1.642Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-hat.svg

@@ -0,0 +1,10 @@
+<svg id="Group_297" data-name="Group 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.661" height="69.125" viewBox="0 0 95.661 69.125">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_726" data-name="Rectangle 726" width="95.661" height="69.125" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_296" data-name="Group 296" clip-path="url(#clip-path)">
+    <path id="Path_185" data-name="Path 185" d="M92.737,8.968,49.044.259A9.461,9.461,0,0,0,42.7.953L2.043,18.885a3.7,3.7,0,0,0,.755,6.9l5.3,1.463C6.583,29.8,6.9,66.418,6.9,66.418c0,1.353.9,2.705,1.836,2.707l1.921-.3c1.477-.162,3.463-.94,3.607-2.705,0,0-.835-35.1.751-37.272L46.7,36.289a9.461,9.461,0,0,0,6.339-.693L93.619,15.858a3.679,3.679,0,0,0,2.02-3.715,3.624,3.624,0,0,0-2.9-3.175M55.278,42.47a12.909,12.909,0,0,1-4.555,1.345,14.244,14.244,0,0,1-4.872-.307L26.261,38.824a2.381,2.381,0,0,0-2.934,2.329l.1,18.542c.675,6.17,13.934,9.77,29.906,8.023C69.039,66,81.476,59.592,80.8,53.426L76.9,35.28a2.38,2.38,0,0,0-3.364-1.642Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-megaphone-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_300" data-name="Group 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.481" height="96" viewBox="0 0 87.481 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_720" data-name="Rectangle 720" width="87.481" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_284" data-name="Group 284" clip-path="url(#clip-path)">
+    <path id="Path_178" data-name="Path 178" d="M77.7,28.12,72.393,4.168A5.318,5.318,0,0,0,62.719,2.46L57.2,11.115A42.561,42.561,0,0,1,30.521,29.793L8.338,34.709A10.642,10.642,0,0,0,.254,47.4L3.706,62.976A10.642,10.642,0,0,0,16.394,71.06L21,91.832a5.316,5.316,0,0,0,6.344,4.042l10.386-2.3a5.313,5.313,0,0,0,4.042-6.344l-4.6-20.772,1.412-.313a42.407,42.407,0,0,1,32.038,5.515l8.692,5.65a5.312,5.312,0,0,0,8.048-5.631L82.047,47.724c2.7-2.1,5.354-6.758,4.35-11.285s-5.36-7.559-8.7-8.318M74.211,61.531a53.166,53.166,0,0,0-37.935-5.774l-1.412.313L31.411,40.491l1.412-.313A53.166,53.166,0,0,0,64.766,18.917Z" transform="translate(0 -0.001)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-megaphone.svg

@@ -0,0 +1,10 @@
+<svg id="Group_285" data-name="Group 285" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="87.481" height="96" viewBox="0 0 87.481 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_720" data-name="Rectangle 720" width="87.481" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_284" data-name="Group 284" clip-path="url(#clip-path)">
+    <path id="Path_178" data-name="Path 178" d="M77.7,28.12,72.393,4.168A5.318,5.318,0,0,0,62.719,2.46L57.2,11.115A42.561,42.561,0,0,1,30.521,29.793L8.338,34.709A10.642,10.642,0,0,0,.254,47.4L3.706,62.976A10.642,10.642,0,0,0,16.394,71.06L21,91.832a5.316,5.316,0,0,0,6.344,4.042l10.386-2.3a5.313,5.313,0,0,0,4.042-6.344l-4.6-20.772,1.412-.313a42.407,42.407,0,0,1,32.038,5.515l8.692,5.65a5.312,5.312,0,0,0,8.048-5.631L82.047,47.724c2.7-2.1,5.354-6.758,4.35-11.285s-5.36-7.559-8.7-8.318M74.211,61.531a53.166,53.166,0,0,0-37.935-5.774l-1.412.313L31.411,40.491l1.412-.313A53.166,53.166,0,0,0,64.766,18.917Z" transform="translate(0 -0.001)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pencil-hover.svg

@@ -0,0 +1,11 @@
+<svg id="Group_299" data-name="Group 299" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.611" height="95.999" viewBox="0 0 68.611 95.999">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_719" data-name="Rectangle 719" width="68.611" height="95.999" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_282" data-name="Group 282" clip-path="url(#clip-path)">
+    <path id="Path_176" data-name="Path 176" d="M3.234,165.214a14.3,14.3,0,0,0-2.114,6.727l-1.115,20.3a3.567,3.567,0,0,0,1.806,3.389,3.657,3.657,0,0,0,4,.207L23.49,185.779a14.218,14.218,0,0,0,5.077-4.894l28.14-45.454L31.361,119.753Zm16.415,13.807-8.533,4.857a1.85,1.85,0,0,1-2.763-1.709l.536-9.809A6.58,6.58,0,0,1,9.85,169.3a.8.8,0,0,1,1.1-.26l10.747,6.65a.8.8,0,0,1,.259,1.1v0a7.718,7.718,0,0,1-2.307,2.226" transform="translate(0 -100.337)" fill="#477ef6"/>
+    <path id="Path_177" data-name="Path 177" d="M249.06,6.313l-7.683-4.758a10.393,10.393,0,0,0-14.3,3.367l-5.84,9.437L246.586,30.04l5.84-9.437a10.383,10.383,0,0,0-3.365-14.29" transform="translate(-185.369 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pencil.svg

@@ -0,0 +1,11 @@
+<svg id="Group_283" data-name="Group 283" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.611" height="95.999" viewBox="0 0 68.611 95.999">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_719" data-name="Rectangle 719" width="68.611" height="95.999" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_282" data-name="Group 282" clip-path="url(#clip-path)">
+    <path id="Path_176" data-name="Path 176" d="M3.234,165.214a14.3,14.3,0,0,0-2.114,6.727l-1.115,20.3a3.567,3.567,0,0,0,1.806,3.389,3.657,3.657,0,0,0,4,.207L23.49,185.779a14.218,14.218,0,0,0,5.077-4.894l28.14-45.454L31.361,119.753Zm16.415,13.807-8.533,4.857a1.85,1.85,0,0,1-2.763-1.709l.536-9.809A6.58,6.58,0,0,1,9.85,169.3a.8.8,0,0,1,1.1-.26l10.747,6.65a.8.8,0,0,1,.259,1.1v0a7.718,7.718,0,0,1-2.307,2.226" transform="translate(0 -100.337)" fill="#354b64"/>
+    <path id="Path_177" data-name="Path 177" d="M249.06,6.313l-7.683-4.758a10.393,10.393,0,0,0-14.3,3.367l-5.84,9.437L246.586,30.04l5.84-9.437a10.383,10.383,0,0,0-3.365-14.29" transform="translate(-185.369 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pie-chart-hover.svg

@@ -0,0 +1,11 @@
+<svg id="Group_303" data-name="Group 303" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.636" height="95.734" viewBox="0 0 93.636 95.734">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_723" data-name="Rectangle 723" width="93.636" height="95.734" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_290" data-name="Group 290" clip-path="url(#clip-path)">
+    <path id="Path_181" data-name="Path 181" d="M287.337,38.332A42.227,42.227,0,0,0,241.445.178a2.964,2.964,0,0,0-2.719,3.387l3.559,38.894a3.058,3.058,0,0,0,3.324,2.767l38.933-3.563a3.077,3.077,0,0,0,2.794-3.331" transform="translate(-193.714 0)" fill="#477ef6"/>
+    <path id="Path_182" data-name="Path 182" d="M71.505,143.953l-29.786,2.721a3.868,3.868,0,0,1-4.2-3.5L34.79,113.389a3.865,3.865,0,0,0-4.629-3.437,37.868,37.868,0,0,0,11.158,74.785,38.083,38.083,0,0,0,34.406-36.855,3.865,3.865,0,0,0-4.22-3.929" transform="translate(-0.001 -89.159)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-pie-chart.svg

@@ -0,0 +1,11 @@
+<svg id="Group_291" data-name="Group 291" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="93.636" height="95.734" viewBox="0 0 93.636 95.734">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_723" data-name="Rectangle 723" width="93.636" height="95.734" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_290" data-name="Group 290" clip-path="url(#clip-path)">
+    <path id="Path_181" data-name="Path 181" d="M287.337,38.332A42.227,42.227,0,0,0,241.445.178a2.964,2.964,0,0,0-2.719,3.387l3.559,38.894a3.058,3.058,0,0,0,3.324,2.767l38.933-3.563a3.077,3.077,0,0,0,2.794-3.331" transform="translate(-193.714 0)" fill="#354b64"/>
+    <path id="Path_182" data-name="Path 182" d="M71.505,143.953l-29.786,2.721a3.868,3.868,0,0,1-4.2-3.5L34.79,113.389a3.865,3.865,0,0,0-4.629-3.437,37.868,37.868,0,0,0,11.158,74.785,38.083,38.083,0,0,0,34.406-36.855,3.865,3.865,0,0,0-4.22-3.929" transform="translate(-0.001 -89.159)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-plane-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_298" data-name="Group 298" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.946" height="81.045" viewBox="0 0 95.946 81.045">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_718" data-name="Rectangle 718" width="95.946" height="81.045" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_280" data-name="Group 280" clip-path="url(#clip-path)">
+    <path id="Path_175" data-name="Path 175" d="M75.147,5.139c4.958-3.3,16.381-4.836,19.758.237C98.379,10.6,92.455,20.395,87.5,23.695l-11.5,7.656a11.176,11.176,0,0,0-4.958,10.064L73,70.14a5.6,5.6,0,0,1-2.477,5.016l-8.147,5.422a2.794,2.794,0,0,1-4.2-1.471l-7.76-24.346a4.168,4.168,0,0,0-6.281-2.2L33.816,59.422,33.111,71.94A2.8,2.8,0,0,1,31.873,74.1l-6.084,4.049a2.482,2.482,0,0,1-3.471-.806,2.643,2.643,0,0,1-.211-.487L18.867,66.708A32.494,32.494,0,0,0,8.974,51.844L.861,44.937a2.55,2.55,0,0,1-.454-.513,2.444,2.444,0,0,1,.683-3.383l6.084-4.049a2.8,2.8,0,0,1,2.473-.307l11.82,4.182L31.781,34a4.168,4.168,0,0,0,.391-6.645L12.709,10.8a2.792,2.792,0,0,1,.264-4.443L21.121.934A5.575,5.575,0,0,1,26.706.589l25.74,12.9a11.175,11.175,0,0,0,11.2-.688Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-plane.svg

@@ -0,0 +1,10 @@
+<svg id="Group_281" data-name="Group 281" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.946" height="81.045" viewBox="0 0 95.946 81.045">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_718" data-name="Rectangle 718" width="95.946" height="81.045" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_280" data-name="Group 280" clip-path="url(#clip-path)">
+    <path id="Path_175" data-name="Path 175" d="M75.147,5.139c4.958-3.3,16.381-4.836,19.758.237C98.379,10.6,92.455,20.395,87.5,23.695l-11.5,7.656a11.176,11.176,0,0,0-4.958,10.064L73,70.14a5.6,5.6,0,0,1-2.477,5.016l-8.147,5.422a2.794,2.794,0,0,1-4.2-1.471l-7.76-24.346a4.168,4.168,0,0,0-6.281-2.2L33.816,59.422,33.111,71.94A2.8,2.8,0,0,1,31.873,74.1l-6.084,4.049a2.482,2.482,0,0,1-3.471-.806,2.643,2.643,0,0,1-.211-.487L18.867,66.708A32.494,32.494,0,0,0,8.974,51.844L.861,44.937a2.55,2.55,0,0,1-.454-.513,2.444,2.444,0,0,1,.683-3.383l6.084-4.049a2.8,2.8,0,0,1,2.473-.307l11.82,4.182L31.781,34a4.168,4.168,0,0,0,.391-6.645L12.709,10.8a2.792,2.792,0,0,1,.264-4.443L21.121.934A5.575,5.575,0,0,1,26.706.589l25.74,12.9a11.175,11.175,0,0,0,11.2-.688Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-sms-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_301" data-name="Group 301" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.709" height="92.311" viewBox="0 0 95.709 92.311">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_721" data-name="Rectangle 721" width="95.709" height="92.311" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_286" data-name="Group 286" clip-path="url(#clip-path)">
+    <path id="Path_179" data-name="Path 179" d="M75.434.132,9.317,10.191A10.964,10.964,0,0,0,.127,22.679L7.629,72a11.11,11.11,0,0,0,12.643,9.167l12.29-1.87a4.231,4.231,0,0,1,4.822,3.565l.953,6.453c.732,4.81,6.244,2.917,8.361.661L57.963,78.5A15.152,15.152,0,0,1,66.5,74.131l19.9-3.027a10.964,10.964,0,0,0,9.19-12.488L88.08,9.3A11.016,11.016,0,0,0,75.434.132M57.483,48.8a5.545,5.545,0,0,1-4.648,6.315L25.664,59.252A5.544,5.544,0,1,1,24,48.289l27.172-4.134A5.544,5.544,0,0,1,57.483,48.8ZM76.2,26.24a5.544,5.544,0,0,1-4.648,6.315L22.732,39.982a5.544,5.544,0,1,1-1.668-10.963L69.88,21.593A5.545,5.545,0,0,1,76.2,26.24Z" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-sms.svg

@@ -0,0 +1,10 @@
+<svg id="Group_287" data-name="Group 287" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.709" height="92.311" viewBox="0 0 95.709 92.311">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_721" data-name="Rectangle 721" width="95.709" height="92.311" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_286" data-name="Group 286" clip-path="url(#clip-path)">
+    <path id="Path_179" data-name="Path 179" d="M75.434.132,9.317,10.191A10.964,10.964,0,0,0,.127,22.679L7.629,72a11.11,11.11,0,0,0,12.643,9.167l12.29-1.87a4.231,4.231,0,0,1,4.822,3.565l.953,6.453c.732,4.81,6.244,2.917,8.361.661L57.963,78.5A15.152,15.152,0,0,1,66.5,74.131l19.9-3.027a10.964,10.964,0,0,0,9.19-12.488L88.08,9.3A11.016,11.016,0,0,0,75.434.132M57.483,48.8a5.545,5.545,0,0,1-4.648,6.315L25.664,59.252A5.544,5.544,0,1,1,24,48.289l27.172-4.134A5.544,5.544,0,0,1,57.483,48.8ZM76.2,26.24a5.544,5.544,0,0,1-4.648,6.315L22.732,39.982a5.544,5.544,0,1,1-1.668-10.963L69.88,21.593A5.545,5.545,0,0,1,76.2,26.24Z" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/icons/airship-user-icon-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_3" data-name="Exclusion 3" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-user-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_1" data-name="Exclusion 1" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
+</svg>

package/src/assets/icons/airship-wrench-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_304" data-name="Group 304" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.43" height="96" viewBox="0 0 69.43 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_724" data-name="Rectangle 724" width="69.43" height="96" fill="#477ef6"/>
+    </clipPath>
+  </defs>
+  <g id="Group_292" data-name="Group 292" clip-path="url(#clip-path)">
+    <path id="Path_183" data-name="Path 183" d="M66.018,12.913a2.661,2.661,0,0,0-4.62.139L54.272,26.4a6.586,6.586,0,0,1-3.895,3.2,10.982,10.982,0,0,1-13.7-7.314h0a6.585,6.585,0,0,1,.491-5.016L44.294,3.921A2.661,2.661,0,0,0,41.838,0,26.672,26.672,0,0,0,29.866,3.686,26.366,26.366,0,0,0,17.253,29.815a24.188,24.188,0,0,0,4.414,11.631L2.1,78.1c-4.659,8.8-.9,12.981,4.884,16.069,2.754,1.594,6.991,2.312,9.76,1.47s4.524-3.23,6.07-6.125L42.381,52.861a26.677,26.677,0,0,0,12.312-2.707A26.385,26.385,0,0,0,69.385,25.135a24.064,24.064,0,0,0-3.366-12.222M14.308,88.535A5.549,5.549,0,1,1,18,81.612a5.551,5.551,0,0,1-3.7,6.923" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-wrench.svg

@@ -0,0 +1,10 @@
+<svg id="Group_293" data-name="Group 293" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="69.43" height="96" viewBox="0 0 69.43 96">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_724" data-name="Rectangle 724" width="69.43" height="96" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_292" data-name="Group 292" clip-path="url(#clip-path)">
+    <path id="Path_183" data-name="Path 183" d="M66.018,12.913a2.661,2.661,0,0,0-4.62.139L54.272,26.4a6.586,6.586,0,0,1-3.895,3.2,10.982,10.982,0,0,1-13.7-7.314h0a6.585,6.585,0,0,1,.491-5.016L44.294,3.921A2.661,2.661,0,0,0,41.838,0,26.672,26.672,0,0,0,29.866,3.686,26.366,26.366,0,0,0,17.253,29.815a24.188,24.188,0,0,0,4.414,11.631L2.1,78.1c-4.659,8.8-.9,12.981,4.884,16.069,2.754,1.594,6.991,2.312,9.76,1.47s4.524-3.23,6.07-6.125L42.381,52.861a26.677,26.677,0,0,0,12.312-2.707A26.385,26.385,0,0,0,69.385,25.135a24.064,24.064,0,0,0-3.366-12.222M14.308,88.535A5.549,5.549,0,1,1,18,81.612a5.551,5.551,0,0,1-3.7,6.923" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/assets/img/funnel.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1070.503" height="166.653" viewBox="0 0 1070.503 166.653">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.993" y1="0.5" x2="0" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f7f7f7"/>
+      <stop offset="1" stop-color="#dce9f7"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_222" data-name="Group 222" transform="translate(-182.585 -931.326)">
+    <path id="Union_1" data-name="Union 1" d="M0,166.653V0H84.287C169.914,0,342.83,37.691,448.053,37.691H625.967c132,0,148.131,20.785,269.689,20.785s174.859-.288,174.846,0c-.027.233-.012,16.421,0,22.1h0s0,.359,0,.993c0,.607,0,.952,0,.952h0c-.01,5.848-.025,22.889,0,23.137.014.3-53.289,0-174.846,0S757.971,127.34,625.967,127.34H448.053c-105.223,0-278.139,39.313-363.766,39.313Zm0,0ZM0,0Z" transform="translate(182.586 931.326)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/components/loaders/ToggleFillLoader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="toggle-fill-loader-container">
+    <div class="toggle-fill-loader-container" :class="{'toggle-fill-loader-container-transparent':transparent}">
         <div class="toggle-fill-loader-container-background">
             <div class="toggle-fill-loader" ></div>
         </div>
@@ -10,6 +10,10 @@
 export default {
     name: 'ButtonPrimary',
     props: {
+        transparent:{
+            typer:Boolean,
+            default:true
+        },
         buttonText: {
             type: String,
             default: "button"

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <h3 class="toggle-metric metric-label">{{label}}</h3>
+    {{checkWindowSize}}
+    <apexchart type="bar" :height="height" :options="chartOptions" :series="values"></apexchart>
+  </div>
+
+</template>
+
+<script>
+import {charts} from "../mixins/mixins";
+
+export default {
+  
+  mixins:[charts],
+  
+  props: {
+    /**
+    * Used to overwrite the default colors
+    */
+    colors: {
+      type: [Array]
+    },
+    /*
+    * Component's height
+    */
+    height: {
+      type: String,
+      default: "100%"
+    },
+    /*
+    *  Component's values
+    */
+    values: {
+      type: [Array],
+      required: true
+    },
+    /*
+    *  Component's labels
+    */
+    label: {
+      type: String,
+      required: true  
+    },
+    /*
+    *  Component's categories
+    */
+    categories: {
+      type: [Array],
+      required: true
+    }
+  },
+  
+  computed: {
+    /**
+    * define the pie chart options
+    * @return Object
+    */
+    chartOptions() {
+      return {
+         tooltip: {
+            y: {
+              formatter: function(value, opts) {
+                let percent = opts.w.globals.seriesPercent[opts.seriesIndex][opts.dataPointIndex];
+                return percent.toFixed(0) + '%'
+              }
+            }
+          },
+        plotOptions: {
+          bar: {
+            borderRadius: 5,
+            columnWidth: '60%',
+          }
+          
+        },
+        chart: {
+          toolbar: {
+            show: false
+          },
+        },
+        grid: {
+          show: false
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        xaxis: {
+          categories: this.categories,
+          labels: {
+            style: {
+              padding: '20px',
+              fontSize: '1rem',
+            }
+          },
+          
+        },
+        yaxis: {  
+        
+          show: true,
+          labels: {
+            show: false
+          },
+          axisBorder: {
+            show: true,
+            color: this.getColor('gray'),
+            width: 3
+          },
+          axisTicks: {
+            show: false
+          }
+        },
+       
+        colors: this.colors ? this.colors : this.getDefaultColors(),
+        legend: {
+          horizontalAlign: 'left',
+          offsetX: -12,
+          showForSingleSeries: true,
+          markers: {
+            width: 50,
+            radius: 5,
+            offsetY: 3
+          },
+        
+        itemMargin: {
+            horizontal: 5,
+            vertical: 0
+        },
+          
+        }
+      }
+    }
+  }
+  
+};
+</script>

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="toggle-metric-funnel-container">
+        
+        <div class="funnel-grid-svg"></div>
+
+         <div class="funnel-spark-line funnel-grid-1">
+            <slot name="sparkLine1"></slot>
+        </div>
+         <div class="funnel-spark-line funnel-grid-2">
+            <slot name="sparkLine2"></slot>
+        </div>
+         <div class="funnel-spark-line funnel-grid-3">
+            <slot name="sparkLine3"></slot>
+        </div>
+        <div class="funnel-spark-line funnel-grid-4">
+            <slot name="sparkLine4"></slot>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-5">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel1" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-6">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel2" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-7">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel3" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+        <div class="funnel-single-metric funnel-grid-8">
+            <div class="funnel-single-metric-container">
+                <slot name="funnel4" class="funnel-single-metric"></slot>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        /*
+        *  Component's name
+        */
+        name: {
+            type: String,
+            default: "ToggleMetricFunnelChart"
+        }
+    }
+}
+
+</script>