@digital-ai/dot-illustrations 2.0.20 → 2.0.22

package/demo/script.js

@@ -1,3 +1,7 @@
+// Make currentTab and root globally accessible
+const root = document.documentElement;
+let currentTab = 'all';
+
 function myFunction() {
   var input, filter, divs, i, div, txtValue;
   input = document.getElementById('myInput');
@@ -15,113 +19,6 @@ function myFunction() {
   }
 }
 
-function doMagic() {
-  const list = document.getElementById("illustration-list");
-  const illustrations = [
-  // Global arrange from A-Z
-    "add-new",
-    "ai",
-    "add-new-grid",
-    "add-team",
-    "add-user",
-    "assets",
-    "analysis-circle",
-    "community",
-    "chart",
-    "custom-dashboards",
-    "dependency-down",
-    "dependency-up",
-    "disconnected",
-    "done",
-    "dora-metrics-circle",
-    "download",
-    "empty",
-    "error-fourhundredfour",
-    "error-fivehundred",
-    "error-fivehundredthree",
-    "error-fourhundredthree",
-    "favorite",
-    "features",
-    "folder-versioning",
-    "filter-empty",
-    "launch",
-    "no-files",
-    "no-filters",
-    "nothing-defined",
-    "password-token",
-    "protection-in-progress",
-    "reports",
-    "scan-document",
-    "survey",
-    "user",
-    "ui-ux-improvements",
-    "upload",
-    "work-item",
-    "workflows-main",
-    "research",
-    "commitrepo",
-
-
-  // Dashboards arrange from A-Z
-    "analysis",
-    "automation",
-    "burn-down",
-    "burn-up",
-    "change-credit-score",
-    "change-data-quality",
-    "change-executive",
-    "change-impact-detection",
-    "change-impact-hotspots",
-    "change-failure-factors",
-    "change-failure-prediction",
-    "CRP-failure-prediction-monitoring",
-    "custom",
-    "defect",
-    "dependency",
-    "dora",
-    "executive",
-    "change-impact",
-    "item",
-    "late-task",
-    "onboarding",
-    "data-extraction",
-    "workflow"
-  ];
-  illustrations.forEach(illustration => {
-      const div = document.createElement("div");
-      div.setAttribute("class", "copy-container");
-      div.innerHTML = `
-          <img class="${illustration} light"></img>
-            <!-- Inner div wrapping only the buttons -->
-            <!-- Button for copying ID -->
-            <div class="button-group">
-              <button id="CopyID" class="button" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)"
-                onclick="copyText(this)">Copy ID
-                <span class="tooltiptext">Copy ID</span>
-              </button>
-              <!-- Button for copying Code -->
-              <button class="button" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
-                Copy Code
-                <span class="tooltiptext">Copy Code</span>
-              </button>
-            </div>
-          <span  class="iconID">${illustration}</span>
-                    <!-- Code block to be copied -->
-              <pre class="codeBlock">
-                <code class="codeBlock">
-                  <span class="dot-illustration">
-                    <img class="${illustration} light"/>
-                  </span>
-                </code>
-              </pre>
-      `;
-      list.appendChild(div);
-  });
-}
-
-document.addEventListener("DOMContentLoaded", doMagic);
-
-
 function showTooltip(button) {
   var tooltip = button.querySelector('.tooltiptext');
   tooltip.style.visibility = 'visible';
@@ -132,59 +29,57 @@ function hideTooltip(button) {
   tooltip.style.visibility = 'hidden';
 }
 
-function copyCode(button) {
+// Toast logic
+function showToast(message) {
+  let toast = document.getElementById('toast-message');
+  if (!toast) {
+    toast = document.createElement('div');
+    toast.id = 'toast-message';
+    toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 text-base animate-fade-in';
+    document.body.appendChild(toast);
+  }
+  toast.textContent = message;
+  toast.style.display = 'flex';
+  clearTimeout(window._toastTimeout);
+  window._toastTimeout = setTimeout(() => {
+    toast.style.display = 'none';
+  }, 2000);
+}
+
+// Patch copyCode and copyText to show toast
+const origCopyCode = window.copyCode;
+window.copyCode = function(button) {
   // Find the closest div with class 'copy-container'
   var parentDiv = button.closest('.copy-container');
-
-  // Find the code block element within the same parent div
   var copyCode = parentDiv.querySelector('.codeBlock code');
-
-  // Get the HTML content inside the code block as a string
   var codeToCopy = copyCode.innerHTML;
-
-
-
-  // Use the Clipboard API to copy the text
   navigator.clipboard.writeText(codeToCopy).then(function() {
-    // Show the tooltip with the copied code message
     var tooltip = button.querySelector('.tooltiptext');
     tooltip.innerHTML = "Copied code block";
     tooltip.style.visibility = 'visible';
-
-    // Reset the tooltip back to "Copy Code" after 2 seconds
     setTimeout(function() {
-      tooltip.innerHTML = "Copy Code:";
+      tooltip.innerHTML = "Copy Code";
       tooltip.style.visibility = 'hidden';
     }, 2000);
-
+    showToast('Copied code: ' + codeToCopy);
   }, function(err) {
     console.error('Failed to copy code block: ', err);
   });
 }
-
-function copyText(button) {
-  // Find the closest div with class 'copy-container'
+const origCopyText = window.copyText;
+window.copyText = function(button) {
   var parentDiv = button.closest('.copy-container');
-
-  // Find the span with the class 'iconID'
   var copyText = parentDiv.querySelector('.iconID');
-
-  // Get the text content of the span
   var textToCopy = copyText.textContent;
-
-  // Use the Clipboard API to copy the text
   navigator.clipboard.writeText(textToCopy).then(function() {
-    // Show the tooltip with the copied ID message
     var tooltip = button.querySelector('.tooltiptext');
     tooltip.innerHTML = "Copied: " + textToCopy;
     tooltip.style.visibility = 'visible';
-
-    // Reset the tooltip back to "Copy ID" after 2 seconds
     setTimeout(function() {
       tooltip.innerHTML = "Copy ID";
       tooltip.style.visibility = 'hidden';
     }, 2000);
-
+    showToast('Copied ID: ' + textToCopy);
   }, function(err) {
     console.error('Failed to copy text: ', err);
   });
@@ -221,3 +116,260 @@ button.addEventListener('click', () => {
         button.textContent = 'Switch to dark mode';
     }
 });
+
+// --- THEME SWITCHER & TABS ---
+document.addEventListener('DOMContentLoaded', () => {
+  // Theme Switcher
+  const themeToggle = document.getElementById('theme-toggle');
+  const themeIcon = document.getElementById('theme-icon');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  function setTheme(dark) {
+    const imgs = document.querySelectorAll('img');
+    if (dark) {
+      root.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+      themeIcon.innerHTML = `<svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z' /></svg>`;
+      imgs.forEach(img => {
+        img.classList.remove('light');
+        img.classList.add('dark');
+      });
+    } else {
+      root.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+      themeIcon.innerHTML = `<svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v1m0 16v1m8.66-13.66l-.71.71M4.05 19.07l-.71.71M21 12h-1M4 12H3m16.66 6.66l-.71-.71M4.05 4.93l-.71-.71M16 12a4 4 0 11-8 0 4 4 0 018 0z' /></svg>`;
+      imgs.forEach(img => {
+        img.classList.remove('dark');
+        img.classList.add('light');
+      });
+    }
+  }
+
+  // Initial theme
+  const savedTheme = localStorage.getItem('theme');
+  setTheme(savedTheme === 'dark' || (!savedTheme && prefersDark));
+
+  themeToggle.addEventListener('click', () => {
+    setTheme(!root.classList.contains('dark'));
+  });
+
+  // --- TABS ---
+  const mainTabs = document.querySelectorAll('.tab-btn');
+  const floatingTabs = document.querySelectorAll('.floating-tab');
+
+  function setTab(tab) {
+    currentTab = tab;
+    // Update main tabs
+    mainTabs.forEach(t => {
+      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+      t.classList.add('text-gray-700', 'dark:text-gray-300');
+      t.setAttribute('aria-selected', 'false');
+      if (t.dataset.tab === tab) {
+        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+        t.classList.remove('text-gray-700', 'dark:text-gray-300');
+        t.setAttribute('aria-selected', 'true');
+      }
+    });
+    // Update floating tabs
+    floatingTabs.forEach(t => {
+      t.classList.remove('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+      t.classList.add('text-gray-700', 'dark:text-gray-300');
+      t.setAttribute('aria-selected', 'false');
+      if (t.dataset.tab === tab) {
+        t.classList.add('text-blue-600', 'dark:text-blue-400', 'bg-blue-100', 'dark:bg-blue-900');
+        t.classList.remove('text-gray-700', 'dark:text-gray-300');
+        t.setAttribute('aria-selected', 'true');
+      }
+    });
+    renderIllustrations();
+  }
+
+  mainTabs.forEach(tab => {
+    tab.addEventListener('click', function() {
+      setTab(this.dataset.tab);
+    });
+  });
+  floatingTabs.forEach(tab => {
+    tab.addEventListener('click', function() {
+      setTab(this.dataset.tab);
+    });
+  });
+
+  // --- ILLUSTRATION DATA ---
+  const globalList = [
+    "add-new","ai","add-new-grid","add-team","add-user","assets","analysis-circle","community","chart","custom-dashboards","dependency-down","dependency-up","disconnected","done","dora-metrics-circle","download","empty","error-fourhundredfour","error-fivehundred","error-fivehundredthree","error-fourhundredthree","favorite","features","folder-versioning","forbiden-access","filter-empty","launch","no-files","no-filters","nothing-defined","password-token","protection-in-progress","reports","scan-document","survey","user","ui-ux-improvements","upload","work-item","workflows-main","research","commitrepo"
+  ];
+  const dashboardsList = [
+    "analysis","automation","burn-down","burn-up","change-credit-score","change-data-quality","change-executive","change-impact-detection","change-impact-hotspots","change-failure-factors","change-failure-prediction","CRP-failure-prediction-monitoring","custom","defect","dependency","dora","executive","change-impact","item","late-task","onboarding","data-extraction","workflow"
+  ];
+  const illustrations = [...globalList, ...dashboardsList, "my-new-illustration"];
+
+  // --- FAVOURITES LOGIC ---
+  function getFavourites() {
+    try {
+      return JSON.parse(localStorage.getItem('dot-illustration-favourites') || '[]');
+    } catch {
+      return [];
+    }
+  }
+  function setFavourites(favs) {
+    localStorage.setItem('dot-illustration-favourites', JSON.stringify(favs));
+  }
+  window.toggleFavourite = function(id) {
+    let favs = getFavourites();
+    if (favs.includes(id)) {
+      favs = favs.filter(f => f !== id);
+    } else {
+      favs.push(id);
+    }
+    setFavourites(favs);
+    renderIllustrations();
+  };
+
+  function renderIllustrations() {
+    const list = document.getElementById("illustration-list");
+    list.innerHTML = "";
+    let toShow = [];
+    if (currentTab === 'all') {
+      toShow = illustrations;
+    } else if (currentTab === 'global') {
+      toShow = globalList;
+    } else if (currentTab === 'dashboards') {
+      toShow = dashboardsList;
+    } else if (currentTab === 'favourites') {
+      const favs = getFavourites();
+      toShow = illustrations.filter(id => favs.includes(id));
+    }
+    const filter = (document.getElementById('myInput')?.value || '').toUpperCase();
+    toShow = toShow.filter(id => id.toUpperCase().includes(filter));
+    if (toShow.length === 0) {
+      list.innerHTML = '<div class="col-span-full text-center text-gray-500 dark:text-gray-400">No illustrations found.</div>';
+      return;
+    }
+    const favs = getFavourites();
+    const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
+    toShow.forEach(illustration => {
+      let categoryClass = "";
+      if (globalList.includes(illustration)) categoryClass = "global-illustration";
+      else if (dashboardsList.includes(illustration)) categoryClass = "dashboards-illustration";
+      const isFav = favs.includes(illustration);
+      const div = document.createElement("div");
+      div.setAttribute("class", "copy-container relative group flex flex-col items-center justify-between bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-2 md:p-3 transition-transform duration-200 hover:scale-105 hover:shadow-2xl h-[302px] w-full justify-center");
+      div.innerHTML = `
+        <button class="absolute top-2 right-2 z-10 p-1 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-yellow-100 dark:hover:bg-yellow-300 transition" title="Toggle favourite" onclick="event.stopPropagation(); window.toggleFavourite && window.toggleFavourite('${illustration}')">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="${isFav ? 'gold' : 'none'}" viewBox="0 0 24 24" stroke="gold">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/>
+          </svg>
+        </button>
+        <div class="flex-1 flex flex-col justify-center items-center">
+          <span class="dot-illustration">
+            <img src="./svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/>
+          </span>
+          <span class="iconID block text-center text-base font-medium text-gray-800 dark:text-gray-200 my-2">${illustration}</span>
+        </div>
+        <div class="button-group flex flex-row items-center justify-center gap-2 mt-2">
+          <button id="CopyID" class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyText(this)">
+            Copy ID
+            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy ID</span>
+          </button>
+          <button class="button flex items-center justify-center min-w-[80px] px-1.5 py-0.5 text-[11px] text-gray-400 border border-gray-300 dark:border-gray-700 rounded bg-white dark:bg-gray-800 font-normal hover:bg-blue-100 dark:hover:bg-blue-900 transition relative text-center" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)" onclick="copyCode(this)">
+            Copy Code
+            <span class="tooltiptext left-1/2 -translate-x-1/2 bottom-10 shadow-md">Copy Code</span>
+          </button>
+        </div>
+        <pre class="codeBlock"><code class="codeBlock"><span class="dot-illustration"><img src="./svgs/${illustration}.svg" class="${illustration} ${themeClass} ${categoryClass}"/></span></code></pre>
+      `;
+      list.appendChild(div);
+    });
+  }
+
+  // Search input
+  document.getElementById('myInput').addEventListener('input', renderIllustrations);
+  document.getElementById('floatingInput').addEventListener('input', () => {
+    document.getElementById('myInput').value = document.getElementById('floatingInput').value;
+    renderIllustrations();
+  });
+
+  // Clear both search inputs on load
+  document.getElementById('myInput').value = '';
+  document.getElementById('floatingInput').value = '';
+
+  // Set initial tab state to 'all' and update UI (this will also render illustrations)
+  setTab('all');
+
+  // --- FLOATING BAR LOGIC ---
+  const floatingBar = document.getElementById('floating-bar');
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 80) {
+      floatingBar.classList.add('floating-bar-visible');
+    } else {
+      floatingBar.classList.remove('floating-bar-visible');
+    }
+  });
+});
+
+// --- FUZZY SEARCH SUGGESTIONS ---
+const searchInput = document.getElementById('myInput');
+const suggestionsBox = document.getElementById('search-suggestions');
+
+function fuzzyMatch(str, query) {
+  // Simple fuzzy: all query chars in order in str
+  query = query.toLowerCase();
+  str = str.toLowerCase();
+  let qIdx = 0;
+  for (let s = 0; s < str.length && qIdx < query.length; s++) {
+    if (str[s] === query[qIdx]) qIdx++;
+  }
+  return qIdx === query.length;
+}
+
+function getSuggestions(query) {
+  if (!query) return [];
+  // Use current tab's list
+  let pool = [];
+  if (currentTab === 'all') pool = illustrations;
+  else if (currentTab === 'global') pool = globalList;
+  else if (currentTab === 'dashboards') pool = dashboardsList;
+  else if (currentTab === 'favourites') pool = getFavourites();
+  // Fuzzy match, sort by closeness (shorter index of first match, then length)
+  let scored = pool
+    .map(id => {
+      let idx = id.toLowerCase().indexOf(query.toLowerCase());
+      let fuzzy = fuzzyMatch(id, query);
+      return fuzzy ? {id, idx: idx === -1 ? 999 : idx, len: id.length} : null;
+    })
+    .filter(Boolean)
+    .sort((a, b) => a.idx - b.idx || a.len - b.len)
+    .slice(0, 7);
+  return scored.map(s => s.id);
+}
+
+function showSuggestions() {
+  const val = searchInput.value.trim();
+  const suggestions = getSuggestions(val);
+  if (!val || suggestions.length === 0) {
+    suggestionsBox.classList.add('hidden');
+    suggestionsBox.innerHTML = '';
+    return;
+  }
+  suggestionsBox.innerHTML = suggestions.map(s => `<div class="px-4 py-2 cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900 transition" data-suggestion="${s}">${s}</div>`).join('');
+  suggestionsBox.classList.remove('hidden');
+}
+
+searchInput.addEventListener('input', () => {
+  renderIllustrations();
+  showSuggestions();
+});
+searchInput.addEventListener('focus', showSuggestions);
+searchInput.addEventListener('blur', () => setTimeout(() => suggestionsBox.classList.add('hidden'), 150));
+suggestionsBox.addEventListener('mousedown', e => {
+  if (e.target.dataset.suggestion) {
+    searchInput.value = e.target.dataset.suggestion;
+    renderIllustrations();
+    suggestionsBox.classList.add('hidden');
+  }
+});
+
+// Remove classic grid rendering to avoid conflicts with tabbed UI
+// document.addEventListener("DOMContentLoaded", doMagic);
+

package/illustrations/dark/global/forbiden-access.svg

@@ -0,0 +1,24 @@
+<svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
+<g clip-path="url(#clip0_4423_5023)">
+<g filter="url(#filter0_d_4423_5023)">
+<path d="M151.616 77.7472C143.487 75.3147 129.532 67.2694 123.571 63.5508L123.368 189.69C126.349 189.149 136.537 184.539 153.445 170.424C170.353 156.309 176.206 134.799 177.019 125.809L176.816 83.6268C171.803 82.6805 159.745 80.1796 151.616 77.7472Z" fill="#555F77"/>
+<path d="M96.1878 77.7472C104.242 75.3147 118.068 67.2694 123.974 63.5508L124.175 189.69C121.222 189.149 111.128 184.539 94.3755 170.424C77.6232 156.309 71.8244 134.799 71.019 125.809L71.2203 83.6268C76.1869 82.6805 88.1337 80.1796 96.1878 77.7472Z" fill="#3D465C"/>
+<path d="M124.019 94.9648C132.01 94.9649 138.488 101.443 138.488 109.434V120.395C142.927 124.368 145.722 130.142 145.722 136.569C145.722 148.555 136.005 158.272 124.019 158.272C112.033 158.272 102.316 148.555 102.316 136.569C102.316 130.142 105.111 124.368 109.55 120.395V109.434C109.55 101.443 116.028 94.9648 124.019 94.9648ZM124.019 125.715C120.595 125.715 117.818 128.492 117.818 131.916C117.818 134.21 119.066 136.212 120.918 137.284V144.319C120.919 146.031 122.307 147.42 124.019 147.42C125.731 147.42 127.118 146.031 127.119 144.319V137.284C128.971 136.212 130.219 134.211 130.219 131.916C130.219 128.492 127.443 125.715 124.019 125.715ZM124.019 100.391C119.025 100.391 114.976 104.439 114.976 109.434V116.836C117.729 115.572 120.792 114.867 124.019 114.867C127.246 114.867 130.309 115.572 133.062 116.836V109.434C133.062 104.439 129.013 100.391 124.019 100.391Z" fill="#AAB2C5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_4423_5023" x="7.01904" y="31.5508" width="234" height="254.141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4423_5023"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4423_5023" result="shape"/>
+</filter>
+<clipPath id="clip0_4423_5023">
+<rect x="31.019" y="31.5" width="186" height="186" rx="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/illustrations/light/global/forbiden-access.svg

@@ -0,0 +1,24 @@
+<svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
+<g clip-path="url(#clip0_4423_5036)">
+<g filter="url(#filter0_d_4423_5036)">
+<path d="M152.035 77.7472C143.906 75.3147 129.951 67.2694 123.99 63.5508L123.787 189.69C126.768 189.149 136.956 184.539 153.864 170.424C170.772 156.309 176.625 134.799 177.438 125.809L177.235 83.6268C172.222 82.6805 160.164 80.1796 152.035 77.7472Z" fill="#F8F9FC"/>
+<path d="M96.6067 77.7472C104.661 75.3147 118.487 67.2694 124.393 63.5508L124.594 189.69C121.641 189.149 111.547 184.539 94.7945 170.424C78.0422 156.309 72.2433 134.799 71.4379 125.809L71.6393 83.6268C76.6059 82.6805 88.5527 80.1796 96.6067 77.7472Z" fill="#D6DCE8"/>
+<path d="M124.438 94.9648C132.429 94.9649 138.907 101.443 138.907 109.434V120.395C143.346 124.368 146.141 130.142 146.141 136.569C146.141 148.555 136.424 158.272 124.438 158.272C112.452 158.272 102.735 148.555 102.735 136.569C102.735 130.142 105.53 124.368 109.969 120.395V109.434C109.969 101.443 116.447 94.9648 124.438 94.9648ZM124.438 125.715C121.014 125.715 118.237 128.492 118.237 131.916C118.237 134.21 119.485 136.212 121.337 137.284V144.319C121.338 146.031 122.726 147.42 124.438 147.42C126.15 147.42 127.537 146.031 127.538 144.319V137.284C129.39 136.212 130.638 134.211 130.638 131.916C130.638 128.492 127.862 125.715 124.438 125.715ZM124.438 100.391C119.444 100.391 115.395 104.439 115.395 109.434V116.836C118.148 115.572 121.211 114.867 124.438 114.867C127.665 114.867 130.728 115.572 133.481 116.836V109.434C133.481 104.439 129.432 100.391 124.438 100.391Z" fill="#8591AE"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_4423_5036" x="7.43799" y="31.5508" width="234" height="254.141" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="32"/>
+<feGaussianBlur stdDeviation="32"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.282353 0 0 0 0 0.360784 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4423_5036"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4423_5036" result="shape"/>
+</filter>
+<clipPath id="clip0_4423_5036">
+<rect x="31.438" y="31.5" width="186" height="186" rx="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>