From 5af72b00345377d3fda8d7f797d20f9b1e79685a Mon Sep 17 00:00:00 2001
From: Akshara Hegde <akshara@blowhorn.com>
Date: Thu, 27 Jul 2023 16:09:13 +0530
Subject: [PATCH] feat - mobile view

---
 components/AppForm/Links.vue       |  19 ++--
 components/AppForm/Preview.vue     |  13 ++-
 components/AppForm/SocialLinks.vue |  56 +++++------
 constants/demo.js                  |  43 +++++++++
 pages/index.vue                    | 147 ++++++++++++++---------------
 yarn.lock                          |  18 ++--
 6 files changed, 172 insertions(+), 124 deletions(-)
 create mode 100644 constants/demo.js

diff --git a/components/AppForm/Links.vue b/components/AppForm/Links.vue
index b8b36013..5a1287f2 100644
--- a/components/AppForm/Links.vue
+++ b/components/AppForm/Links.vue
@@ -19,17 +19,17 @@
           <button class="absolute top-2 -left-8">
             <icon
               name="radix-icons:drag-handle-dots-2"
-              class="h-6 w-6 text-slate-500 drag-handle"
+              class="w-6 h-6 text-slate-500 drag-handle"
             />
           </button>
           <button
             @click="removeLink(link)"
-            class="hidden group-hover:flex items-center justify-center h-6 w-6 rounded-full bg-slate-300 text-slate-600 absolute -right-3 -top-3"
+            class="hidden absolute -top-3 -right-3 justify-center items-center w-6 h-6 rounded-full group-hover:flex bg-slate-300 text-slate-600"
           >
-            <icon name="fluent:dismiss-24-regular" class="h-4 w-4" />
+            <icon name="fluent:dismiss-24-regular" class="w-4 h-4" />
           </button>
           <div class="shadow sm:overflow-hidden sm:rounded-md">
-            <div class="space-y-6 bg-white px-4 py-5 sm:p-6">
+            <div class="px-4 py-5 space-y-6 bg-white sm:p-6">
               <div class="grid grid-cols-2 gap-4">
                 <div>
                   <label
@@ -42,7 +42,7 @@
                     name="iconKey"
                     id="iconKey"
                     v-model="link.i"
-                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   />
                 </div>
                 <div>
@@ -56,7 +56,7 @@
                     name="label"
                     id="label"
                     v-model="link.l"
-                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   />
                 </div>
                 <div class="col-span-2">
@@ -70,7 +70,7 @@
                     name="url"
                     id="url"
                     v-model="link.u"
-                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                    class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   />
                 </div>
               </div>
@@ -88,9 +88,10 @@
 
     <button
       @click="appendLink"
-      class="mt-8 border-2 text-slate-500 border-slate-300 rounded-lg block w-full py-2"
+      class="block py-2 w-full rounded-lg border-2 text-slate-500 border-slate-300"
+      :class="{'mt-8': modelValue.length > 0}"
     >
-      <icon name="fluent:add-circle-24-regular" class="h-6 w-6" />
+      <icon name="fluent:add-circle-24-regular" class="w-6 h-6" />
     </button>
   </base-form-section>
 </template>
diff --git a/components/AppForm/Preview.vue b/components/AppForm/Preview.vue
index 9b4a04a5..ec8a0bf2 100644
--- a/components/AppForm/Preview.vue
+++ b/components/AppForm/Preview.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="h-screen grid place-items-center">
+  <div class="flex fixed inset-0 flex-col justify-center items-center px-4 space-y-6 h-screen bg-white md:flex-row md:relative lg:w-3/12">
+    <icon name="fluent:dismiss-24-regular" class="w-4 h-4 text-gray-600 opacity-100 md:opacity-0" @click="hidePreview" />
     <div
-      class="h-[729px] w-[340px] overflow-y-auto rounded-[3rem] ring-8 ring-slate-800 overflow-hidden"
+      class="h-[calc(100vh-120px)] lg:h-[729px]  lg:w-3/4 overflow-y-auto rounded-[3rem] ring-8 ring-slate-800 overflow-hidden"
     >
       <templates-simple :acc="data" />
     </div>
@@ -12,7 +13,13 @@ const props = defineProps({
   data: {
     type: Object,
     required: true,
-  },
+  }
 });
+
+const emit = defineEmits(['toggle'])
+
+const hidePreview = () => {
+  emit('toggle', false)
+}
 </script>
 <style scoped></style>
diff --git a/components/AppForm/SocialLinks.vue b/components/AppForm/SocialLinks.vue
index a9398ebf..b9b5d812 100644
--- a/components/AppForm/SocialLinks.vue
+++ b/components/AppForm/SocialLinks.vue
@@ -4,14 +4,14 @@
     description="Add some social media links"
   >
     <div class="shadow sm:overflow-hidden sm:rounded-md">
-      <div class="grid grid-cols-2 gap-8 bg-white px-4 py-5 sm:p-6">
+      <div class="grid gap-2 px-4 py-5 bg-white md:gap-8 md:grid-cols-2 md:p-6">
         <div>
           <label for="facebook" class="block text-sm font-medium text-gray-700"
             >Facebook</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:facebook-logo-duotone" class="w-5 h-5" />
             </span>
@@ -21,7 +21,7 @@
               id="facebook"
               :value="facebook"
               @input="$emit('update:facebook', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://fb.com/elonmusk"
             />
           </div>
@@ -30,9 +30,9 @@
           <label for="twitter" class="block text-sm font-medium text-gray-700"
             >Twitter</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:twitter-logo-duotone" class="w-5 h-5" />
             </span>
@@ -42,7 +42,7 @@
               id="twitter"
               :value="twitter"
               @input="$emit('update:twitter', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://twitter.com/elonmusk"
             />
           </div>
@@ -51,9 +51,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Instagram</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:instagram-logo-duotone" class="w-5 h-5" />
             </span>
@@ -63,7 +63,7 @@
               id="instagram"
               :value="instagram"
               @input="$emit('update:instagram', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://instagram.com/elonmusk"
             />
           </div>
@@ -72,9 +72,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Github</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:github-logo-duotone" class="w-5 h-5" />
             </span>
@@ -84,7 +84,7 @@
               id="github"
               :value="github"
               @input="$emit('update:github', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://github.com/elonmusk"
             />
           </div>
@@ -93,9 +93,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Telegram</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:telegram-logo-duotone" class="w-5 h-5" />
             </span>
@@ -105,7 +105,7 @@
               id="telegram"
               :value="telegram"
               @input="$emit('update:telegram', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://t.me/elonmusk"
             />
           </div>
@@ -114,9 +114,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Linkedin</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:linkedin-logo-duotone" class="w-5 h-5" />
             </span>
@@ -126,7 +126,7 @@
               id="linkedin"
               :value="linkedin"
               @input="$emit('update:linkedin', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://linkedin.com/elonmusk"
             />
           </div>
@@ -135,9 +135,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Email</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:envelope-duotone" class="w-5 h-5" />
             </span>
@@ -147,7 +147,7 @@
               id="email"
               :value="email"
               @input="$emit('update:email', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="elonmusk@geemail.com"
             />
           </div>
@@ -156,9 +156,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Youtube</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:youtube-logo-duotone" class="w-5 h-5" />
             </span>
@@ -168,7 +168,7 @@
               id="youtube"
               :value="youtube"
               @input="$emit('update:youtube', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="https://youtube.com/elonmusk"
             />
           </div>
@@ -177,9 +177,9 @@
           <label for="instagram" class="block text-sm font-medium text-gray-700"
             >Whatsapp</label
           >
-          <div class="mt-1 flex rounded-md shadow-sm">
+          <div class="flex mt-1 rounded-md shadow-sm">
             <span
-              class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+              class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-50 rounded-l-md border border-r-0 border-gray-300"
             >
               <icon name="ph:whatsapp-logo-duotone" class="w-5 h-5" />
             </span>
@@ -189,7 +189,7 @@
               id="whatsapp"
               :value="whatsapp"
               @input="$emit('update:whatsapp', $event.target.value)"
-              class="block w-full flex-1 rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+              class="block flex-1 w-full rounded-none rounded-r-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
               placeholder="+9190000000000"
             />
           </div>
diff --git a/constants/demo.js b/constants/demo.js
new file mode 100644
index 00000000..09757826
--- /dev/null
+++ b/constants/demo.js
@@ -0,0 +1,43 @@
+const data = {
+  n: "John Snow",
+  d: "I'm John Snow, the king in the north. I know Nothing.",
+  i: "https://i.insider.com/56743fad72f2c12a008b6cc0",
+  f: "https://www.facebook.com/john_snow",
+  t: "https://twitter.com/john_snow",
+  ig: "https://www.instagram.com/john_snow",
+  e: "mail@john_snow.cc",
+  gh: "https://github.com/john_snow",
+  tg: "https://t.me/john_snow",
+  w: "+918888888888",
+  y: "https://youtube.com/@john_snow",
+  l: "https://linkedin.com/john_snow",
+  ls: [
+    {
+      l: "My Website",
+      i: "ph:globe-duotone",
+      u: "https://example.com",
+    },
+    {
+      l: "Amazon wishlist",
+      i: "ant-design:amazon-outlined",
+      u: "https://amazon.in",
+    },
+    {
+      l: "React JS course",
+      i: "grommet-icons:reactjs",
+      u: "https://reactjs.org/",
+    },
+    {
+      l: "Donate for our cause",
+      i: "iconoir:donate",
+      u: "https://who.int",
+    },
+    {
+      l: "Download my resume",
+      i: "ph:file-pdf",
+      u: "https://google.com",
+    },
+  ],
+};
+
+export { data }
diff --git a/pages/index.vue b/pages/index.vue
index 6039a2a0..ccd26e11 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="h-screen grid grid-cols-3 divide-x">
-    <div class="col-span-2 h-screen flex flex-col bg-slate-100">
-      <div class="flex-1 overflow-y-auto p-8">
+  <div class="flex h-screen divide-x">
+    <div
+      class="flex flex-col h-screen bg-slate-100"
+      :class="isPreviewOpen ? 'lg:w-9/12' : 'w-full'"
+    >
+      <div class="overflow-y-auto flex-1 p-4 space-y-4 lg:space-y-0 lg:p-8">
         <app-form-profile
           v-model:name="data.n"
           v-model:desc="data.d"
@@ -22,44 +25,69 @@
         <app-form-hr />
         <app-form-links v-model="data.ls" />
       </div>
-      <div class="border-t bg-white flex items-center">
-        <button
-          @click="prefillDemoData"
-          class="h-12 flex items-center space-x-2 px-4 border-r text-xs font-medium bg-white text-slate-700"
-        >
-          <span> Add demo data </span>
-          <icon name="mdi:code-json" class="h-4 w-4" />
-        </button>
-        <button
-          @click="publish"
-          class="h-12 flex items-center space-x-2 px-4 border-r text-xs font-medium bg-white text-slate-700"
-        >
-          <span> Publish </span>
-          <icon name="ph:paper-plane-tilt-bold" class="h-4 w-4" />
-        </button>
-        <a
-          href="https://github.com/fayazara/onelink"
-          target="_blank"
-          class="h-12 flex items-center space-x-2 px-4 border-r text-xs font-medium bg-white text-slate-700"
-        >
-          <span> Github </span>
-          <icon name="mdi:github" class="h-4 w-4" />
-        </a>
+      <div
+        class="flex flex-col justify-between items-center bg-white border-t md:px-4 md:flex-row"
+      >
+        <div class="flex items-center border-b">
+          <button
+            @click="prefillDemoData"
+            class="flex items-center px-4 space-x-2 h-12 text-xs font-medium bg-white border-r text-slate-700"
+          >
+            <span class="capitalize"
+              ><span class="hidden md:inline">Add</span> demo data
+            </span>
+            <icon name="mdi:code-json" class="w-4 h-4" />
+          </button>
+          <button
+            @click="togglePreview(true)"
+            class="flex items-center px-4 space-x-2 h-12 text-xs font-medium bg-white border-r md:hidden text-slate-700"
+          >
+            <span class="capitalize"
+              >Preview
+            </span>
+            <icon name="mdi:eye-outline" class="w-4 h-4" />
+          </button>
+          <button
+            @click="publish"
+            class="flex items-center px-4 space-x-2 h-12 text-xs font-medium bg-white border-r text-slate-700"
+          >
+            <span> Publish </span>
+            <icon name="ph:paper-plane-tilt-bold" class="w-4 h-4" />
+          </button>
+        </div>
+        <div class="flex items-center">
+          <a
+            href="https://github.com/fayazara/onelink"
+            target="_blank"
+            class="flex items-center px-4 space-x-2 h-12 text-xs font-medium bg-white border-r text-slate-700"
+          >
+            <span> Github </span>
+            <icon name="mdi:github" class="w-4 h-4" />
+          </a>
+          <a
+            href="https://twitter.com/fayazara"
+            target="_blank"
+            class="flex items-center px-4 space-x-2 h-12 text-xs font-medium bg-white text-slate-70"
+          >
+            Made by Fayaz
+          </a>
+        </div>
       </div>
     </div>
-    <app-form-preview :data="data" />
-    <a
-      href="https://twitter.com/fayazara"
-      target="_blank"
-      class="absolute bottom-0 right-0 bg-white rounded-tl-lg shadow px-4 py-1 font-medium text-sm text-gray-500"
-    >
-      Made by Fayaz
-    </a>
+    <app-form-preview
+      v-if="isPreviewOpen"
+      :data="data"
+      @toggle="togglePreview"
+    />
   </div>
 </template>
 
 <script setup>
 import { encodeData } from "../utils/transformer";
+import { data as demoData } from "~/constants/demo";
+import { ref } from "vue";
+import { useWindowSize } from "@vueuse/core";
+
 const data = ref({
   n: "",
   d: "",
@@ -76,48 +104,13 @@ const data = ref({
   ls: [],
 });
 
+const { width } = useWindowSize();
+console.log('width.value > 767', width.value > 767)
+let isPreviewOpen = width.value > 767;
+
 const prefillDemoData = () => {
-  data.value = {
-    n: "John Snow",
-    d: "I’m John Snow, the king in the north. I know Nothing.",
-    i: "https://i.insider.com/56743fad72f2c12a008b6cc0",
-    f: "https://www.facebook.com/john_snow",
-    t: "https://twitter.com/john_snow",
-    ig: "https://www.instagram.com/john_snow",
-    e: "mail@john_snow.cc",
-    gh: "https://github.com/john_snow",
-    tg: "https://t.me/john_snow",
-    w: "+918888888888",
-    y: "https://youtube.com/@john_snow",
-    l: "https://linkedin.com/john_snow",
-    ls: [
-      {
-        l: "My Website",
-        i: "ph:globe-duotone",
-        u: "https://example.com",
-      },
-      {
-        l: "Amazon wishlist",
-        i: "ant-design:amazon-outlined",
-        u: "https://amazon.in",
-      },
-      {
-        l: "React JS course",
-        i: "grommet-icons:reactjs",
-        u: "https://reactjs.org/",
-      },
-      {
-        l: "Donate for our cause",
-        i: "iconoir:donate",
-        u: "https://who.int",
-      },
-      {
-        l: "Download my resume",
-        i: "ph:file-pdf",
-        u: "https://google.com",
-      },
-    ],
-  };
+  isPreviewOpen = true;
+  data.value = demoData;
 };
 
 const publish = () => {
@@ -126,4 +119,8 @@ const publish = () => {
     alert("Link copied to clipboard");
   });
 };
+
+const togglePreview = (val) => {
+  setTimeout(() => (isPreviewOpen = val), 100);
+};
 </script>
diff --git a/yarn.lock b/yarn.lock
index 7160efae..08bfe052 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -590,9 +590,9 @@
     "@floating-ui/core" "^0.3.0"
 
 "@headlessui/vue@^1.7.8":
-  version "1.7.8"
-  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.8.tgz#57dd6bb388b8d54ca13e2f4795e716dde3257fa0"
-  integrity sha512-J83kAz3drFjndXz/AOoxmgzVo/MtSNFFn/K9qhSSJ8EGhmRfwdJLhZ0W4NSrw6A10JxhXDlkjoV0UxOiBLr5iQ==
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.14.tgz#cc10712044944bc728f5ef8b2df2174c1194a55e"
+  integrity sha512-aL9U9Sa7wdOzlrfjx6EjMIYNRCma5mngWcWzQBcHFwznpRZ8g/QZ/AYFtRDrZZUw22Ttttja4D7ZRXFwhONewA==
 
 "@iconify/types@^2.0.0":
   version "2.0.0"
@@ -1588,9 +1588,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
-  version "1.0.30001430"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001430.tgz#638a8ae00b5a8a97e66ff43733b2701f81b101fa"
-  integrity sha512-IB1BXTZKPDVPM7cnV4iaKaHxckvdr/3xtctB3f7Hmenx3qYBhGtTZ//7EllK66aKXW98Lx0+7Yr0kxBtIt3tzg==
+  version "1.0.30001517"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz"
+  integrity sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -3062,9 +3062,9 @@ jiti@^1.16.2:
   integrity sha512-OKBOVWmU3FxDt/UH4zSwiKPuc1nihFZiOD722FuJlngvLz2glX1v2/TJIgoA4+mrpnXxHV6dSAoCvPcYQtoG5A==
 
 js-base64@^3.7.4:
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.4.tgz#af95b20f23efc8034afd2d1cc5b9d0adf7419037"
-  integrity sha512-wpM/wi20Tl+3ifTyi0RdDckS4YTD4Lf953mBRrpG8547T7hInHNPEj8+ck4gB8VDcGyeAWFK++Wb/fU1BeavKQ==
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
 
 js-tokens@^4.0.0:
   version "4.0.0"