diff --git a/src/components/flags/ad.vue b/src/components/flags/ad.vue
index d92a91a..86a818c 100644
--- a/src/components/flags/ad.vue
+++ b/src/components/flags/ad.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ff2b99cc-61ef-4581-9efb-9f800136342d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ff2b99cc-61ef-4581-9efb-9f800136342d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h144.7l36 254.6-36 257.4H0z" />
       <path fill="#d80027" d="M367.3 0H512v512H367.3l-29.7-257.3z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ae.vue b/src/components/flags/ae.vue
index bcb8838..dbbf469 100644
--- a/src/components/flags/ae.vue
+++ b/src/components/flags/ae.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="34cad71d-3fc5-4671-af56-5a6a2b82a374">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#34cad71d-3fc5-4671-af56-5a6a2b82a374)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#a2001d" d="M0 0h167l52.3 252L167 512H0z" />
       <path
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/af-emirate.vue b/src/components/flags/af-emirate.vue
index 5a2b664..9b26cb9 100644
--- a/src/components/flags/af-emirate.vue
+++ b/src/components/flags/af-emirate.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="84fcdfe2-458d-4d52-a5d5-8dd487b2c743">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#84fcdfe2-458d-4d52-a5d5-8dd487b2c743)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/af.vue b/src/components/flags/af.vue
index 0f7bccf..89e4e43 100644
--- a/src/components/flags/af.vue
+++ b/src/components/flags/af.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="251f588c-6328-40d3-8cae-6df5ca6ecb6e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#251f588c-6328-40d3-8cae-6df5ca6ecb6e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/afar.vue b/src/components/flags/afar.vue
index 77713d7..845452d 100644
--- a/src/components/flags/afar.vue
+++ b/src/components/flags/afar.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ce07b1e4-1e66-4673-beb5-659865b3c7c6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ce07b1e4-1e66-4673-beb5-659865b3c7c6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#0052b4" d="M0 0h512v160H0Z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ag.vue b/src/components/flags/ag.vue
index 56a8a0b..197fd10 100644
--- a/src/components/flags/ag.vue
+++ b/src/components/flags/ag.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a6425f5a-842f-4541-96ce-12b73471cf77">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a6425f5a-842f-4541-96ce-12b73471cf77)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 .4h512l-34 229H36z" />
       <path
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ai.vue b/src/components/flags/ai.vue
index 438a4fb..623171c 100644
--- a/src/components/flags/ai.vue
+++ b/src/components/flags/ai.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="314f0589-f5ab-41f9-a060-fac4844984a2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#314f0589-f5ab-41f9-a060-fac4844984a2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -44,7 +44,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -58,11 +58,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/al.vue b/src/components/flags/al.vue
index cdb6061..8fb705b 100644
--- a/src/components/flags/al.vue
+++ b/src/components/flags/al.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="516e94b6-e0b3-423f-bd38-192869e48435">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#516e94b6-e0b3-423f-bd38-192869e48435)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/am.vue b/src/components/flags/am.vue
index aa1630e..70fe921 100644
--- a/src/components/flags/am.vue
+++ b/src/components/flags/am.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="997251ad-e9d8-4af7-b2fb-b1f7b255ae68">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#997251ad-e9d8-4af7-b2fb-b1f7b255ae68)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/an.vue b/src/components/flags/an.vue
index eab193e..5ecd422 100644
--- a/src/components/flags/an.vue
+++ b/src/components/flags/an.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f7c322d8-56af-4b07-a988-a86c99255022">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f7c322d8-56af-4b07-a988-a86c99255022)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ao.vue b/src/components/flags/ao.vue
index aa6b11c..7870fd2 100644
--- a/src/components/flags/ao.vue
+++ b/src/components/flags/ao.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="eeda43b7-88eb-41c3-90e8-cfa6371e4ee6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#eeda43b7-88eb-41c3-90e8-cfa6371e4ee6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v256l-253 36.6L0 256z" />
       <path fill="#333" d="M0 256h512v256H0z" />
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/aq-true_south.vue b/src/components/flags/aq-true_south.vue
index 84ceb2f..d94a5cb 100644
--- a/src/components/flags/aq-true_south.vue
+++ b/src/components/flags/aq-true_south.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="969960cf-4714-4258-b369-cf2b92b85483">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#969960cf-4714-4258-b369-cf2b92b85483)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 256 256 28l256 228v256H0Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/aq.vue b/src/components/flags/aq.vue
index d8f3558..8ed5853 100644
--- a/src/components/flags/aq.vue
+++ b/src/components/flags/aq.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="159c84de-c852-4d6c-8cf5-6e7bb53c23da">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#159c84de-c852-4d6c-8cf5-6e7bb53c23da)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ar.vue b/src/components/flags/ar.vue
index 8f2f2d2..901c4cd 100644
--- a/src/components/flags/ar.vue
+++ b/src/components/flags/ar.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6eeeaa0c-d7ac-42a9-a1bc-0ca2c88caab3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6eeeaa0c-d7ac-42a9-a1bc-0ca2c88caab3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/as.vue b/src/components/flags/as.vue
index 1f2a310..0e796d4 100644
--- a/src/components/flags/as.vue
+++ b/src/components/flags/as.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8d661d08-f298-4c0d-a8bf-4982148c14fb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8d661d08-f298-4c0d-a8bf-4982148c14fb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M512 20.4V490L23.8 255.8z" />
       <path
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/at.vue b/src/components/flags/at.vue
index e5ae6a6..8056b04 100644
--- a/src/components/flags/at.vue
+++ b/src/components/flags/at.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="60c97d0e-197f-45b7-aec7-ef88e51dd5f8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#60c97d0e-197f-45b7-aec7-ef88e51dd5f8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-aboriginal.vue b/src/components/flags/au-aboriginal.vue
index c58f7a4..6252bbe 100644
--- a/src/components/flags/au-aboriginal.vue
+++ b/src/components/flags/au-aboriginal.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="7d8f0fc1-847b-4909-99fd-00b57743f198">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#7d8f0fc1-847b-4909-99fd-00b57743f198)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 0h512v256l-256 32L0 256Z" />
       <path fill="#d80027" d="M0 256h512v256H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-act.vue b/src/components/flags/au-act.vue
index 067cd91..0aa50e5 100644
--- a/src/components/flags/au-act.vue
+++ b/src/components/flags/au-act.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f5aa8007-3424-4830-8a56-72c3b5fc9020">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f5aa8007-3424-4830-8a56-72c3b5fc9020)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h170l64 256-64 256H0Z" />
       <path fill="#ffda44" d="M170 0h342v512H170z" />
@@ -47,7 +47,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -61,11 +61,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-nsw.vue b/src/components/flags/au-nsw.vue
index 961550e..2393998 100644
--- a/src/components/flags/au-nsw.vue
+++ b/src/components/flags/au-nsw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b5933ec8-e31d-472f-852a-2aff9b19d225">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b5933ec8-e31d-472f-852a-2aff9b19d225)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-nt.vue b/src/components/flags/au-nt.vue
index 6936d08..2c925fe 100644
--- a/src/components/flags/au-nt.vue
+++ b/src/components/flags/au-nt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="96442505-eeb4-469e-917b-9b53328642ef">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#96442505-eeb4-469e-917b-9b53328642ef)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 0h171l64 256-64 256H0Z" />
       <path fill="#ff9811" d="M171 0h341v512H171z" />
@@ -42,7 +42,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -56,11 +56,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-qld.vue b/src/components/flags/au-qld.vue
index da98e36..02bfd10 100644
--- a/src/components/flags/au-qld.vue
+++ b/src/components/flags/au-qld.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="321f1d7b-2b64-41a8-83f4-eada5ed6ee9a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#321f1d7b-2b64-41a8-83f4-eada5ed6ee9a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -40,7 +40,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -54,11 +54,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-sa.vue b/src/components/flags/au-sa.vue
index 43083ff..1d11366 100644
--- a/src/components/flags/au-sa.vue
+++ b/src/components/flags/au-sa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0de2f487-ff00-41c1-960a-b6a532622199">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0de2f487-ff00-41c1-960a-b6a532622199)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-tas.vue b/src/components/flags/au-tas.vue
index 176e93d..4b8ad3c 100644
--- a/src/components/flags/au-tas.vue
+++ b/src/components/flags/au-tas.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5efdb210-0dae-4680-a544-b15dbdeddb9a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5efdb210-0dae-4680-a544-b15dbdeddb9a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-vic.vue b/src/components/flags/au-vic.vue
index 2fc5455..559621c 100644
--- a/src/components/flags/au-vic.vue
+++ b/src/components/flags/au-vic.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bd178c8c-cb15-4a3c-86bf-c915b22b5e75">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bd178c8c-cb15-4a3c-86bf-c915b22b5e75)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au-wa.vue b/src/components/flags/au-wa.vue
index cb1e7ea..19a4cfd 100644
--- a/src/components/flags/au-wa.vue
+++ b/src/components/flags/au-wa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="91106c17-1058-4c31-b929-63edd65ad3fe">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#91106c17-1058-4c31-b929-63edd65ad3fe)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/au.vue b/src/components/flags/au.vue
index 70842d2..e336191 100644
--- a/src/components/flags/au.vue
+++ b/src/components/flags/au.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4bede729-23dc-4fef-bda1-9f8d7b9c9895">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4bede729-23dc-4fef-bda1-9f8d7b9c9895)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/aw.vue b/src/components/flags/aw.vue
index e090d6f..d70707e 100644
--- a/src/components/flags/aw.vue
+++ b/src/components/flags/aw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4492dad5-7da5-450b-b5cc-5a44e812aaf1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4492dad5-7da5-450b-b5cc-5a44e812aaf1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ax.vue b/src/components/flags/ax.vue
index 4543407..c8254d9 100644
--- a/src/components/flags/ax.vue
+++ b/src/components/flags/ax.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ffb8a2e0-d65a-431e-80b5-27d87a883473">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ffb8a2e0-d65a-431e-80b5-27d87a883473)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/az.vue b/src/components/flags/az.vue
index 8a2728e..2ca2fd5 100644
--- a/src/components/flags/az.vue
+++ b/src/components/flags/az.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a8fb628f-7bfa-45bf-8259-dcee81d915bb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a8fb628f-7bfa-45bf-8259-dcee81d915bb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ba.vue b/src/components/flags/ba.vue
index 3e590fa..b347f68 100644
--- a/src/components/flags/ba.vue
+++ b/src/components/flags/ba.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e97994a5-1053-4c52-a2c3-5ca85f6d18f7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e97994a5-1053-4c52-a2c3-5ca85f6d18f7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bb.vue b/src/components/flags/bb.vue
index 113e684..e7e419a 100644
--- a/src/components/flags/bb.vue
+++ b/src/components/flags/bb.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="52012fb1-2322-402d-bb58-af8e2ab9be9b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#52012fb1-2322-402d-bb58-af8e2ab9be9b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bd.vue b/src/components/flags/bd.vue
index 4de5f94..8b59c8b 100644
--- a/src/components/flags/bd.vue
+++ b/src/components/flags/bd.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="33b58b96-393c-4b29-9a97-5549e833de8d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#33b58b96-393c-4b29-9a97-5549e833de8d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0z" />
       <circle cx="200.3" cy="256" r="111.3" fill="#d80027" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/be.vue b/src/components/flags/be.vue
index aff458c..e1639a3 100644
--- a/src/components/flags/be.vue
+++ b/src/components/flags/be.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ea3f5555-88b5-4ae8-a549-4ecc892ced7c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ea3f5555-88b5-4ae8-a549-4ecc892ced7c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 0h167l38.2 252.6L167 512H0z" />
       <path fill="#d80027" d="M345 0h167v512H345l-36.7-256z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bf.vue b/src/components/flags/bf.vue
index 52fda97..7f5ba10 100644
--- a/src/components/flags/bf.vue
+++ b/src/components/flags/bf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="406b0667-dc82-4ba9-9d01-17865cf7b08a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#406b0667-dc82-4ba9-9d01-17865cf7b08a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v256l-255.2 48L0 256z" />
       <path fill="#6da544" d="M0 256h512v256H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bg.vue b/src/components/flags/bg.vue
index 63be08b..eb83d8a 100644
--- a/src/components/flags/bg.vue
+++ b/src/components/flags/bg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="cb3ce7b1-8ee1-4990-87b4-c07d21932b84">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#cb3ce7b1-8ee1-4990-87b4-c07d21932b84)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#496e2d"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bh.vue b/src/components/flags/bh.vue
index c562b64..6f852ce 100644
--- a/src/components/flags/bh.vue
+++ b/src/components/flags/bh.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="15a0cc0f-440d-41ed-b6db-1a9cd4321907">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#15a0cc0f-440d-41ed-b6db-1a9cd4321907)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h182.5l88.1 268.5-88 243.5H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bi.vue b/src/components/flags/bi.vue
index be08754..eb3902e 100644
--- a/src/components/flags/bi.vue
+++ b/src/components/flags/bi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9d072dcf-5365-4f92-bab5-f80dfcae7368">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9d072dcf-5365-4f92-bab5-f80dfcae7368)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bj.vue b/src/components/flags/bj.vue
index 52f3e61..59ce9d7 100644
--- a/src/components/flags/bj.vue
+++ b/src/components/flags/bj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="936c4d3f-45c6-4227-9962-28d1d90ce2a3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#936c4d3f-45c6-4227-9962-28d1d90ce2a3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M0 0h189.2l54 257.6-54 254.4H0z" />
       <path fill="#ffda44" d="M189.2 0H512v256l-159 53.5L189.1 256z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bl.vue b/src/components/flags/bl.vue
index 10380b4..f22b96a 100644
--- a/src/components/flags/bl.vue
+++ b/src/components/flags/bl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5bf0e167-5f0e-4d1c-9898-639ce426efd1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5bf0e167-5f0e-4d1c-9898-639ce426efd1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bm.vue b/src/components/flags/bm.vue
index 5d3c803..f3cdcbe 100644
--- a/src/components/flags/bm.vue
+++ b/src/components/flags/bm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f9277d93-3c4f-49c6-85d6-20938327101b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f9277d93-3c4f-49c6-85d6-20938327101b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M256 0h256v512H0V256z" />
       <path
@@ -47,7 +47,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -61,11 +61,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bn.vue b/src/components/flags/bn.vue
index 1103b87..5251a6e 100644
--- a/src/components/flags/bn.vue
+++ b/src/components/flags/bn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ce2c9ac1-9ea2-494a-8484-840956f0bf38">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ce2c9ac1-9ea2-494a-8484-840956f0bf38)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bo.vue b/src/components/flags/bo.vue
index 2322fa5..6f6cb7e 100644
--- a/src/components/flags/bo.vue
+++ b/src/components/flags/bo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a9478400-9026-428a-9739-db20c84b6b54">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a9478400-9026-428a-9739-db20c84b6b54)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bq-bo.vue b/src/components/flags/bq-bo.vue
index feb4f41..1afb62a 100644
--- a/src/components/flags/bq-bo.vue
+++ b/src/components/flags/bq-bo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f1032c42-aed4-439f-ae68-47c03177d3a4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f1032c42-aed4-439f-ae68-47c03177d3a4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bq-sa.vue b/src/components/flags/bq-sa.vue
index 7bc95a9..dee3b1a 100644
--- a/src/components/flags/bq-sa.vue
+++ b/src/components/flags/bq-sa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="87d3a56d-80a9-40a7-9b7c-673caf372a73">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#87d3a56d-80a9-40a7-9b7c-673caf372a73)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v256H0z" />
       <path fill="#0052b4" d="M0 256h512v256H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bq-se.vue b/src/components/flags/bq-se.vue
index f37c5d9..454bf5e 100644
--- a/src/components/flags/bq-se.vue
+++ b/src/components/flags/bq-se.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="95bad9e0-f762-4b14-89e6-811c93ce701f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#95bad9e0-f762-4b14-89e6-811c93ce701f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/br.vue b/src/components/flags/br.vue
index e39e29b..8518c39 100644
--- a/src/components/flags/br.vue
+++ b/src/components/flags/br.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8271ecdf-2ebd-4c4e-8149-8a6df5b00a2e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8271ecdf-2ebd-4c4e-8149-8a6df5b00a2e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M0 0h512v512H0z" />
       <path fill="#ffda44" d="M256 100.2 467.5 256 256 411.8 44.5 256z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bs.vue b/src/components/flags/bs.vue
index 8ce3247..f99c2f9 100644
--- a/src/components/flags/bs.vue
+++ b/src/components/flags/bs.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b84e3c66-ed6a-497f-96cf-5402d6b036dd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b84e3c66-ed6a-497f-96cf-5402d6b036dd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v167l-37.4 89 37.4 89v167H0l49.6-252z" />
       <path fill="#ffda44" d="M108.3 167H512v178H108.3z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bt.vue b/src/components/flags/bt.vue
index e8af0df..fba8e6c 100644
--- a/src/components/flags/bt.vue
+++ b/src/components/flags/bt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2b4d5e2a-efbe-4c89-a68a-f9b28da33226">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2b4d5e2a-efbe-4c89-a68a-f9b28da33226)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 0h512L281 293.2 0 512z" />
       <path fill="#ff9811" d="M506.7 0 0 506.7v5.3h512V0h-5.3z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bw.vue b/src/components/flags/bw.vue
index cc5c8cf..21d7a9b 100644
--- a/src/components/flags/bw.vue
+++ b/src/components/flags/bw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e697a0b3-cde3-4c79-85ff-ec794d58dd45">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e697a0b3-cde3-4c79-85ff-ec794d58dd45)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/by.vue b/src/components/flags/by.vue
index 15266ab..020d767 100644
--- a/src/components/flags/by.vue
+++ b/src/components/flags/by.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0eb4a0a0-0972-4bd1-b207-1234f36c2fa5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0eb4a0a0-0972-4bd1-b207-1234f36c2fa5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h155.8l35 254.6-35 257.4H0z" />
       <path fill="#a2001d" d="M155.8 0H512v345.1l-183 37.4-173.2-37.4z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/bz.vue b/src/components/flags/bz.vue
index e3b8235..6e52976 100644
--- a/src/components/flags/bz.vue
+++ b/src/components/flags/bz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="239448e7-6c68-4e7f-bf9c-c696d5a0732c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#239448e7-6c68-4e7f-bf9c-c696d5a0732c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ca-bc.vue b/src/components/flags/ca-bc.vue
index 8e21429..b02af9d 100644
--- a/src/components/flags/ca-bc.vue
+++ b/src/components/flags/ca-bc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="72bde135-dffc-479f-bd77-13839bb49690">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#72bde135-dffc-479f-bd77-13839bb49690)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ca.vue b/src/components/flags/ca.vue
index 17fe29f..d97796a 100644
--- a/src/components/flags/ca.vue
+++ b/src/components/flags/ca.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="16e26b43-482c-408a-bdc0-520e3092324b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#16e26b43-482c-408a-bdc0-520e3092324b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cc.vue b/src/components/flags/cc.vue
index ad25f95..7bcc969 100644
--- a/src/components/flags/cc.vue
+++ b/src/components/flags/cc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="51e6a377-be57-4d21-b78d-7b421a629dbf">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#51e6a377-be57-4d21-b78d-7b421a629dbf)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M0 0h512v512H0z" />
       <g fill="#ffda44">
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cd.vue b/src/components/flags/cd.vue
index f5ced1d..a7d337d 100644
--- a/src/components/flags/cd.vue
+++ b/src/components/flags/cd.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="97b73106-2de7-408a-a857-a3bba074100d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#97b73106-2de7-408a-a857-a3bba074100d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h401.9L512 110.3V512H110.3L0 401.9z" />
       <path
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cf.vue b/src/components/flags/cf.vue
index f26ec68..38535dc 100644
--- a/src/components/flags/cf.vue
+++ b/src/components/flags/cf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2f4a50ac-38b0-4f33-b5b6-cd4bc6736685">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2f4a50ac-38b0-4f33-b5b6-cd4bc6736685)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cg.vue b/src/components/flags/cg.vue
index a7e0953..ded4d6c 100644
--- a/src/components/flags/cg.vue
+++ b/src/components/flags/cg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0dd03694-614c-4c22-9087-09f0b0155fa3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0dd03694-614c-4c22-9087-09f0b0155fa3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M384 0h128v128L352 352 128 512H0V384l160-224Z" />
       <path fill="#6da544" d="M0 384 384 0H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ch-gr.vue b/src/components/flags/ch-gr.vue
index b268b9e..0ad98c5 100644
--- a/src/components/flags/ch-gr.vue
+++ b/src/components/flags/ch-gr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6b68b832-7adb-4320-ac86-69a7dee94ab0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6b68b832-7adb-4320-ac86-69a7dee94ab0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M128 0h128l256 256v256H0V256Z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ch.vue b/src/components/flags/ch.vue
index 8cb4236..63006ad 100644
--- a/src/components/flags/ch.vue
+++ b/src/components/flags/ch.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a7898712-59fb-45b9-b5db-6792a8c1af15">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a7898712-59fb-45b9-b5db-6792a8c1af15)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ci.vue b/src/components/flags/ci.vue
index bf87521..87a2661 100644
--- a/src/components/flags/ci.vue
+++ b/src/components/flags/ci.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b230453f-7da8-44eb-80ef-e9911cda6624">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b230453f-7da8-44eb-80ef-e9911cda6624)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M167 0h178l31 253.2L345 512H167l-33.4-257.4z" />
       <path fill="#ff9811" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ck.vue b/src/components/flags/ck.vue
index 261a2e6..cd71911 100644
--- a/src/components/flags/ck.vue
+++ b/src/components/flags/ck.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c8b98c96-1343-48c0-a260-b8b37b640cf8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c8b98c96-1343-48c0-a260-b8b37b640cf8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cl.vue b/src/components/flags/cl.vue
index 690dd0c..9433359 100644
--- a/src/components/flags/cl.vue
+++ b/src/components/flags/cl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5078a13b-40d3-4bc2-89e2-782498d4d53c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5078a13b-40d3-4bc2-89e2-782498d4d53c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 256 254.5-51.3L512 256v256H0z" />
       <path fill="#0052b4" d="M0 0h256l52.7 132.8L256 256H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cm.vue b/src/components/flags/cm.vue
index 37c64fc..a3fecf2 100644
--- a/src/components/flags/cm.vue
+++ b/src/components/flags/cm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6529566a-4473-4550-b2c0-e93289b27a9b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6529566a-4473-4550-b2c0-e93289b27a9b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M144.8 0h222.4l32 260-32 252H144.8l-32.1-256z" />
       <path
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cn-xj.vue b/src/components/flags/cn-xj.vue
index 78ad821..f1b59d1 100644
--- a/src/components/flags/cn-xj.vue
+++ b/src/components/flags/cn-xj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2c432b50-8c8c-433e-8423-0cfcd341a15f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2c432b50-8c8c-433e-8423-0cfcd341a15f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cn.vue b/src/components/flags/cn.vue
index 148dd84..4e66356 100644
--- a/src/components/flags/cn.vue
+++ b/src/components/flags/cn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c0419994-ffef-4d80-b470-67feebe7b472">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c0419994-ffef-4d80-b470-67feebe7b472)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/co.vue b/src/components/flags/co.vue
index e2dbef2..82bc6e0 100644
--- a/src/components/flags/co.vue
+++ b/src/components/flags/co.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f4553781-0199-4bd6-af2c-31ff5538fc94">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f4553781-0199-4bd6-af2c-31ff5538fc94)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 384 255.8-29.7L512 384v128H0z" />
       <path fill="#0052b4" d="m0 256 259.5-31L512 256v128H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cq.vue b/src/components/flags/cq.vue
index 216d3f3..e1e4875 100644
--- a/src/components/flags/cq.vue
+++ b/src/components/flags/cq.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="71af516c-3fd5-4b9d-bfa5-4e4362027d77">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#71af516c-3fd5-4b9d-bfa5-4e4362027d77)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cr.vue b/src/components/flags/cr.vue
index 17639be..b2c5ab2 100644
--- a/src/components/flags/cr.vue
+++ b/src/components/flags/cr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="235d8cb7-571a-480d-b537-bdff001f5c77">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#235d8cb7-571a-480d-b537-bdff001f5c77)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cu.vue b/src/components/flags/cu.vue
index b637759..a8cdca0 100644
--- a/src/components/flags/cu.vue
+++ b/src/components/flags/cu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8b95e29d-e307-48c3-a4cb-978d5442c588">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8b95e29d-e307-48c3-a4cb-978d5442c588)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cv.vue b/src/components/flags/cv.vue
index a8dd02b..aa915ac 100644
--- a/src/components/flags/cv.vue
+++ b/src/components/flags/cv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="faeafdd1-9e23-420b-87f7-e01ce152d77d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#faeafdd1-9e23-420b-87f7-e01ce152d77d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cw.vue b/src/components/flags/cw.vue
index 5ef6a9f..aa60b09 100644
--- a/src/components/flags/cw.vue
+++ b/src/components/flags/cw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3fb7f967-d0b4-4923-9d25-03e8fcd2c7ea">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3fb7f967-d0b4-4923-9d25-03e8fcd2c7ea)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cx.vue b/src/components/flags/cx.vue
index 1342a19..80de035 100644
--- a/src/components/flags/cx.vue
+++ b/src/components/flags/cx.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="73320aa7-c2df-4067-91eb-3a86f734b76b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#73320aa7-c2df-4067-91eb-3a86f734b76b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="m0 0 216.9 301.6L512 512V0z" />
       <path fill="#0052b4" d="m0 0 512 512H0z" />
@@ -37,7 +37,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -51,11 +51,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cy.vue b/src/components/flags/cy.vue
index 932ab5a..9c6ad05 100644
--- a/src/components/flags/cy.vue
+++ b/src/components/flags/cy.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="60f4e654-9d75-45d3-9bf0-a2bcb959cc4b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#60f4e654-9d75-45d3-9bf0-a2bcb959cc4b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/cz.vue b/src/components/flags/cz.vue
index ceb81bb..6fec058 100644
--- a/src/components/flags/cz.vue
+++ b/src/components/flags/cz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ef69496f-7b2d-4741-b956-b10936151a2c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ef69496f-7b2d-4741-b956-b10936151a2c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v256l-265 45.2z" />
       <path fill="#d80027" d="M210 256h302v256H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/de.vue b/src/components/flags/de.vue
index c5f0074..3fd6d91 100644
--- a/src/components/flags/de.vue
+++ b/src/components/flags/de.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f6c8a9cb-297d-4ec0-a73d-9cff46997a69">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f6c8a9cb-297d-4ec0-a73d-9cff46997a69)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z" />
       <path fill="#d80027" d="m0 167 255-23 257 23v178H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/dj.vue b/src/components/flags/dj.vue
index fcb49b9..ffa0c84 100644
--- a/src/components/flags/dj.vue
+++ b/src/components/flags/dj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ddb83ff8-5e3f-4305-b573-baf2a8ab90d0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ddb83ff8-5e3f-4305-b573-baf2a8ab90d0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v256l-153.2 35.7L210 256z" />
       <path fill="#6da544" d="M210 256h302v256H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/dk.vue b/src/components/flags/dk.vue
index c3b0e59..a1dab52 100644
--- a/src/components/flags/dk.vue
+++ b/src/components/flags/dk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ae2be9e0-5325-4503-8bc6-87166918efa0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ae2be9e0-5325-4503-8bc6-87166918efa0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/dm.vue b/src/components/flags/dm.vue
index b8b1878..f6cd982 100644
--- a/src/components/flags/dm.vue
+++ b/src/components/flags/dm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4f42b6f4-1a06-412c-ab42-9721248ae0e3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4f42b6f4-1a06-412c-ab42-9721248ae0e3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#496e2d"
@@ -37,7 +37,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -51,11 +51,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/do.vue b/src/components/flags/do.vue
index 6017652..f11ed4a 100644
--- a/src/components/flags/do.vue
+++ b/src/components/flags/do.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="addf14c6-b97a-4d74-b291-c39dee144b07">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#addf14c6-b97a-4d74-b291-c39dee144b07)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/dz.vue b/src/components/flags/dz.vue
index 6b19096..5851c2f 100644
--- a/src/components/flags/dz.vue
+++ b/src/components/flags/dz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="84eec927-8578-47d3-b1ef-3ac042038b31">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#84eec927-8578-47d3-b1ef-3ac042038b31)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h256l45.3 251.8L256 512H0z" />
       <path fill="#eee" d="M256 0h256v512H256z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/earth.vue b/src/components/flags/earth.vue
index ca6ac40..77da045 100644
--- a/src/components/flags/earth.vue
+++ b/src/components/flags/earth.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a3a38d10-e2fb-486a-85dd-84427101a446">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a3a38d10-e2fb-486a-85dd-84427101a446)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -51,7 +51,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -65,11 +65,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/east_african_federation.vue b/src/components/flags/east_african_federation.vue
index f244814..64acaab 100644
--- a/src/components/flags/east_african_federation.vue
+++ b/src/components/flags/east_african_federation.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3ae1b258-1234-4afe-86d9-ff65cddb2760">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3ae1b258-1234-4afe-86d9-ff65cddb2760)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/easter_island.vue b/src/components/flags/easter_island.vue
index 00c5659..ff3b808 100644
--- a/src/components/flags/easter_island.vue
+++ b/src/components/flags/easter_island.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3ae62738-f2b4-41c7-bcd4-7a0651fc3a11">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3ae62738-f2b4-41c7-bcd4-7a0651fc3a11)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ec-w.vue b/src/components/flags/ec-w.vue
index 5099672..f66d8ef 100644
--- a/src/components/flags/ec-w.vue
+++ b/src/components/flags/ec-w.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c58de0b8-89db-466f-8d90-066766e9e715">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c58de0b8-89db-466f-8d90-066766e9e715)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ec.vue b/src/components/flags/ec.vue
index d0f96af..515defe 100644
--- a/src/components/flags/ec.vue
+++ b/src/components/flags/ec.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="abd28fa1-8c17-4234-be00-a4c925b96ecb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#abd28fa1-8c17-4234-be00-a4c925b96ecb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 384 254.7-32.7L512 383.9V512H0z" />
       <path fill="#0052b4" d="m0 256 255-27 257 27v128H0z" />
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ee.vue b/src/components/flags/ee.vue
index 86aafc7..50913a7 100644
--- a/src/components/flags/ee.vue
+++ b/src/components/flags/ee.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9bab6a40-d1af-4ef2-83be-3d0de4c35e5f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9bab6a40-d1af-4ef2-83be-3d0de4c35e5f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#333"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/eg.vue b/src/components/flags/eg.vue
index 282b429..9685b94 100644
--- a/src/components/flags/eg.vue
+++ b/src/components/flags/eg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4c92a950-8a62-48a2-931c-6663340ffd97">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4c92a950-8a62-48a2-931c-6663340ffd97)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 144 256-32 256 32v224l-256 32L0 368Z" />
       <path fill="#d80027" d="M0 0h512v144H0Z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/eh.vue b/src/components/flags/eh.vue
index 4e461f3..8b43aff 100644
--- a/src/components/flags/eh.vue
+++ b/src/components/flags/eh.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6279edc9-69d7-4bfa-91fe-6935fb7ea272">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6279edc9-69d7-4bfa-91fe-6935fb7ea272)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/er.vue b/src/components/flags/er.vue
index 1ebbf92..78011cc 100644
--- a/src/components/flags/er.vue
+++ b/src/components/flags/er.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1c42b5cf-bc12-438c-9e9b-f069732662c6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1c42b5cf-bc12-438c-9e9b-f069732662c6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M0 0h512v256H62z" />
       <path fill="#338af3" d="M62 256h450v256H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ar.vue b/src/components/flags/es-ar.vue
index 73e49c3..7808377 100644
--- a/src/components/flags/es-ar.vue
+++ b/src/components/flags/es-ar.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d7771086-0ade-4e4a-9a0f-dd635cf3bb87">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d7771086-0ade-4e4a-9a0f-dd635cf3bb87)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ce.vue b/src/components/flags/es-ce.vue
index 88e22de..b812ed1 100644
--- a/src/components/flags/es-ce.vue
+++ b/src/components/flags/es-ce.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ddf68d5e-b3e9-4129-a24f-12662dab1460">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ddf68d5e-b3e9-4129-a24f-12662dab1460)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -50,7 +50,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -64,11 +64,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-cn.vue b/src/components/flags/es-cn.vue
index ff08571..a794232 100644
--- a/src/components/flags/es-cn.vue
+++ b/src/components/flags/es-cn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3dfd6e93-4e62-4474-b9b2-2b3c0152c8e3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3dfd6e93-4e62-4474-b9b2-2b3c0152c8e3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M167 0h178l32.3 257L345 512H167l-25.3-256z" />
       <path fill="#eee" d="M0 0h166.9v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ct.vue b/src/components/flags/es-ct.vue
index 319db18..37a3f77 100644
--- a/src/components/flags/es-ct.vue
+++ b/src/components/flags/es-ct.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e8eb1911-c913-46b1-a91b-679f769d51d7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e8eb1911-c913-46b1-a91b-679f769d51d7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ga.vue b/src/components/flags/es-ga.vue
index 3a43f19..55c32e7 100644
--- a/src/components/flags/es-ga.vue
+++ b/src/components/flags/es-ga.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3592082c-ff37-4370-8ed6-9507e8890004">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3592082c-ff37-4370-8ed6-9507e8890004)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 63 63 0h449v449l-63 63H0z" />
       <path fill="#338af3" d="M0 0v63l449 449h63v-63L63 0H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ib.vue b/src/components/flags/es-ib.vue
index 6e7fc2e..c3cfd28 100644
--- a/src/components/flags/es-ib.vue
+++ b/src/components/flags/es-ib.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d79154d5-59ed-4e55-9863-17ce3c3122a5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d79154d5-59ed-4e55-9863-17ce3c3122a5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-ml.vue b/src/components/flags/es-ml.vue
index 857c81d..767f24b 100644
--- a/src/components/flags/es-ml.vue
+++ b/src/components/flags/es-ml.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9d0315e6-b49e-4357-9bd0-9030f8b68414">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9d0315e6-b49e-4357-9bd0-9030f8b68414)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path fill="#acabb1" d="M122.4 278.3h267.2v33.4H122.4z" />
@@ -45,7 +45,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -59,11 +59,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-pv.vue b/src/components/flags/es-pv.vue
index f8b7a99..6a0a337 100644
--- a/src/components/flags/es-pv.vue
+++ b/src/components/flags/es-pv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f6a1bdfd-b166-4317-8ec0-62015abe71b4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f6a1bdfd-b166-4317-8ec0-62015abe71b4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es-variant.vue b/src/components/flags/es-variant.vue
index 26cbbcd..e72d160 100644
--- a/src/components/flags/es-variant.vue
+++ b/src/components/flags/es-variant.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bd247571-1a2e-4fa9-a8e1-7e139147c817">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bd247571-1a2e-4fa9-a8e1-7e139147c817)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/es.vue b/src/components/flags/es.vue
index 830bfc2..19b6a7c 100644
--- a/src/components/flags/es.vue
+++ b/src/components/flags/es.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0a571d60-b7a9-4a3a-a69a-a941b88a0842">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0a571d60-b7a9-4a3a-a69a-a941b88a0842)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 128 256-32 256 32v256l-256 32L0 384Z" />
       <path fill="#d80027" d="M0 0h512v128H0zm0 384h512v128H0z" />
@@ -84,7 +84,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -98,11 +98,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/et-or.vue b/src/components/flags/et-or.vue
index 8c963ff..245fdc8 100644
--- a/src/components/flags/et-or.vue
+++ b/src/components/flags/et-or.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="32d2317d-1904-4229-a435-b1e5d4d84b00">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#32d2317d-1904-4229-a435-b1e5d4d84b00)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#d80027" d="M0 0h512v160H0Z" />
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/et-ti.vue b/src/components/flags/et-ti.vue
index 1d28d8f..ec16af2 100644
--- a/src/components/flags/et-ti.vue
+++ b/src/components/flags/et-ti.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c9bb1843-85c8-494a-b96c-0e24f6c5c50c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c9bb1843-85c8-494a-b96c-0e24f6c5c50c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0l64-256Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/et.vue b/src/components/flags/et.vue
index ed28508..47d858d 100644
--- a/src/components/flags/et.vue
+++ b/src/components/flags/et.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ab8549f7-b886-483c-a6cd-35c7f4827ad7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ab8549f7-b886-483c-a6cd-35c7f4827ad7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 345 255.7-31L512 345v167H0z" />
       <path fill="#ffda44" d="m0 167 258-40.7L512 167v178H0z" />
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/european_union.vue b/src/components/flags/european_union.vue
index 79f7740..382d1a6 100644
--- a/src/components/flags/european_union.vue
+++ b/src/components/flags/european_union.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="26083c0d-33c2-462c-89eb-14edfa282793">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#26083c0d-33c2-462c-89eb-14edfa282793)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ewe.vue b/src/components/flags/ewe.vue
index 724c837..f2e76e4 100644
--- a/src/components/flags/ewe.vue
+++ b/src/components/flags/ewe.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ad4d8181-2f99-4c4b-bd86-a57e119d4c72">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ad4d8181-2f99-4c4b-bd86-a57e119d4c72)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#6da544" d="M0 0h512v167H0zm0 345h512v167H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fi.vue b/src/components/flags/fi.vue
index 5d18a10..2fd758d 100644
--- a/src/components/flags/fi.vue
+++ b/src/components/flags/fi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ac9bffe9-d852-4d77-8ccc-e8637c31a0e3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ac9bffe9-d852-4d77-8ccc-e8637c31a0e3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fj.vue b/src/components/flags/fj.vue
index 8a6b926..d9e63c9 100644
--- a/src/components/flags/fj.vue
+++ b/src/components/flags/fj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bb37f0be-0262-4e88-80a7-5c9098f3e5b4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bb37f0be-0262-4e88-80a7-5c9098f3e5b4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M256 0h256v512H0V256Z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fk.vue b/src/components/flags/fk.vue
index 3444afc..d69cc1b 100644
--- a/src/components/flags/fk.vue
+++ b/src/components/flags/fk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="acdadf62-0fdd-4c7c-9e22-cde11fdf6c62">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#acdadf62-0fdd-4c7c-9e22-cde11fdf6c62)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fm.vue b/src/components/flags/fm.vue
index c34c789..2a6068a 100644
--- a/src/components/flags/fm.vue
+++ b/src/components/flags/fm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1d142f8a-55b2-4d4e-8dc2-0a8f1f8e07b9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1d142f8a-55b2-4d4e-8dc2-0a8f1f8e07b9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fo.vue b/src/components/flags/fo.vue
index 1c09dce..4ee0e54 100644
--- a/src/components/flags/fo.vue
+++ b/src/components/flags/fo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e7339f17-c563-427e-ae86-7656e104605d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e7339f17-c563-427e-ae86-7656e104605d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fr-20r.vue b/src/components/flags/fr-20r.vue
index 470d057..ffa3a97 100644
--- a/src/components/flags/fr-20r.vue
+++ b/src/components/flags/fr-20r.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8a4dde31-db39-44a3-a3fe-fb5e123cfdc2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8a4dde31-db39-44a3-a3fe-fb5e123cfdc2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fr-bre.vue b/src/components/flags/fr-bre.vue
index c5157f5..972426b 100644
--- a/src/components/flags/fr-bre.vue
+++ b/src/components/flags/fr-bre.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1d95aa2c-2038-4468-88c3-f239036ab8cf">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1d95aa2c-2038-4468-88c3-f239036ab8cf)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -61,7 +61,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -75,11 +75,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fr-cp.vue b/src/components/flags/fr-cp.vue
index 4d0a35b..6c31e75 100644
--- a/src/components/flags/fr-cp.vue
+++ b/src/components/flags/fr-cp.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="954cbda6-fc92-4c47-99f4-176b208d5c61">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#954cbda6-fc92-4c47-99f4-176b208d5c61)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0Z" />
       <path fill="#fff" d="m256 52 204 204-204 204L52 256Z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/fr.vue b/src/components/flags/fr.vue
index dcd8368..1ef3778 100644
--- a/src/components/flags/fr.vue
+++ b/src/components/flags/fr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="da7803de-9bc9-4def-bb00-176f235a1368">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#da7803de-9bc9-4def-bb00-176f235a1368)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#0052b4" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ga.vue b/src/components/flags/ga.vue
index e9ecf6d..461ffdc 100644
--- a/src/components/flags/ga.vue
+++ b/src/components/flags/ga.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9f6d4ff2-f80e-458f-b56e-58e95af45397">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9f6d4ff2-f80e-458f-b56e-58e95af45397)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-con.vue b/src/components/flags/gb-con.vue
index 508f6bf..e6ad2d9 100644
--- a/src/components/flags/gb-con.vue
+++ b/src/components/flags/gb-con.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="133be630-9564-4ee6-ae3a-53f7dbc3287a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#133be630-9564-4ee6-ae3a-53f7dbc3287a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#333"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-eng.vue b/src/components/flags/gb-eng.vue
index 2051d7a..9e5e3fd 100644
--- a/src/components/flags/gb-eng.vue
+++ b/src/components/flags/gb-eng.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="946811d0-8eda-4ccc-95db-602091000c27">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#946811d0-8eda-4ccc-95db-602091000c27)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-nir.vue b/src/components/flags/gb-nir.vue
index 7b2bfac..2e19f44 100644
--- a/src/components/flags/gb-nir.vue
+++ b/src/components/flags/gb-nir.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="adf5254f-68c9-4837-bbe5-fdc3dcb7af01">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#adf5254f-68c9-4837-bbe5-fdc3dcb7af01)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-ork.vue b/src/components/flags/gb-ork.vue
index 36299f2..92c83a2 100644
--- a/src/components/flags/gb-ork.vue
+++ b/src/components/flags/gb-ork.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d63998b3-92d5-4222-b45e-9c5c7122db3b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d63998b3-92d5-4222-b45e-9c5c7122db3b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-sct.vue b/src/components/flags/gb-sct.vue
index eb05927..3626f1a 100644
--- a/src/components/flags/gb-sct.vue
+++ b/src/components/flags/gb-sct.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d31331b8-541b-4c63-8a30-8941f1eba5d6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d31331b8-541b-4c63-8a30-8941f1eba5d6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 68 68 0h376l68 68v376l-68 68H68L0 444Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb-wls.vue b/src/components/flags/gb-wls.vue
index 311ea3c..0ae2d10 100644
--- a/src/components/flags/gb-wls.vue
+++ b/src/components/flags/gb-wls.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8631b44d-6b07-490c-9ba0-359c4a705c15">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8631b44d-6b07-490c-9ba0-359c4a705c15)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="m0 256 256-64 256 64v256H0Z" />
       <path fill="#eee" d="M0 0h512v256H0Z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gb.vue b/src/components/flags/gb.vue
index 209fbcb..5560b19 100644
--- a/src/components/flags/gb.vue
+++ b/src/components/flags/gb.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="22883313-07a8-494f-b278-4dc6c16e1680">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#22883313-07a8-494f-b278-4dc6c16e1680)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gd.vue b/src/components/flags/gd.vue
index b54a964..a6f6c11 100644
--- a/src/components/flags/gd.vue
+++ b/src/components/flags/gd.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9218091b-d25c-4e78-9fc8-af41b4d2f058">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9218091b-d25c-4e78-9fc8-af41b4d2f058)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M23.6 23.7h464.8v464.7H23.6z" />
       <path
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ge-ab.vue b/src/components/flags/ge-ab.vue
index 4496ee1..7bbc8ad 100644
--- a/src/components/flags/ge-ab.vue
+++ b/src/components/flags/ge-ab.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="63d1a97f-cdac-4aca-a474-bee6d5d77248">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#63d1a97f-cdac-4aca-a474-bee6d5d77248)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ge.vue b/src/components/flags/ge.vue
index 7f9c5d5..53bc3e7 100644
--- a/src/components/flags/ge.vue
+++ b/src/components/flags/ge.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2de3925c-bbee-4942-9cb9-5b68e636f38b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2de3925c-bbee-4942-9cb9-5b68e636f38b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gf.vue b/src/components/flags/gf.vue
index c282af0..a04efe8 100644
--- a/src/components/flags/gf.vue
+++ b/src/components/flags/gf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3dc466cf-ba9d-47e1-b98b-5508d312a56c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3dc466cf-ba9d-47e1-b98b-5508d312a56c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="m0 0 216.9 301.6L512 512V0z" />
       <path fill="#ffda44" d="m0 0 512 512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gg.vue b/src/components/flags/gg.vue
index 1b8f800..6bb3d3d 100644
--- a/src/components/flags/gg.vue
+++ b/src/components/flags/gg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="104eeb62-b65e-426a-9239-cd2b82c89e6b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#104eeb62-b65e-426a-9239-cd2b82c89e6b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gh.vue b/src/components/flags/gh.vue
index 947804e..8555f65 100644
--- a/src/components/flags/gh.vue
+++ b/src/components/flags/gh.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="164f9297-544f-487b-b6e4-ca9390d45bcd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#164f9297-544f-487b-b6e4-ca9390d45bcd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#d80027" d="M0 0h512v167H0Z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gi.vue b/src/components/flags/gi.vue
index 3029c5b..75c2b8f 100644
--- a/src/components/flags/gi.vue
+++ b/src/components/flags/gi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b9f49bae-3cd5-49ff-a777-b28bc922ced9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b9f49bae-3cd5-49ff-a777-b28bc922ced9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 345 256.3-31.3L512 345v167H0z" />
       <path fill="#eee" d="M0 0h512v345H0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gl.vue b/src/components/flags/gl.vue
index a73e744..229798e 100644
--- a/src/components/flags/gl.vue
+++ b/src/components/flags/gl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="70da2250-6bf6-4622-9725-10c606ef253f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#70da2250-6bf6-4622-9725-10c606ef253f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 256 259-45.3L512 256v256H0z" />
       <path fill="#eee" d="M0 0h512v256H0z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gm.vue b/src/components/flags/gm.vue
index d8a5f50..1b92a58 100644
--- a/src/components/flags/gm.vue
+++ b/src/components/flags/gm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0e1a148b-cab5-49b2-8da6-9ec505ed2859">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0e1a148b-cab5-49b2-8da6-9ec505ed2859)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gn.vue b/src/components/flags/gn.vue
index cfc4d47..466f3c3 100644
--- a/src/components/flags/gn.vue
+++ b/src/components/flags/gn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ba06fbdf-3d55-445a-8d0c-809073adb5bb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ba06fbdf-3d55-445a-8d0c-809073adb5bb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#d80027" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gp.vue b/src/components/flags/gp.vue
index e8e95f4..8b023fc 100644
--- a/src/components/flags/gp.vue
+++ b/src/components/flags/gp.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4b486a58-fe22-48cf-9029-85c6226b4ea5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4b486a58-fe22-48cf-9029-85c6226b4ea5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 176h512v336H0z" />
       <path fill="#0052b4" d="M0 0h512v176H0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gq.vue b/src/components/flags/gq.vue
index 950bd8d..e4b3eef 100644
--- a/src/components/flags/gq.vue
+++ b/src/components/flags/gq.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d61a134d-68f4-4f1f-b64b-dc1cc74f9529">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d61a134d-68f4-4f1f-b64b-dc1cc74f9529)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M41.3 121.9 512 167v178L43.8 391.3z" />
       <path fill="#6da544" d="M0 0h512v167H111z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gr.vue b/src/components/flags/gr.vue
index cc072f7..cfd2a4c 100644
--- a/src/components/flags/gr.vue
+++ b/src/components/flags/gr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="20f3b585-ecf0-4bcd-8758-f12864fdf58c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#20f3b585-ecf0-4bcd-8758-f12864fdf58c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gs.vue b/src/components/flags/gs.vue
index ef468c1..212b403 100644
--- a/src/components/flags/gs.vue
+++ b/src/components/flags/gs.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9c9a28ca-60c0-42f2-8292-c955271dfd84">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9c9a28ca-60c0-42f2-8292-c955271dfd84)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -63,7 +63,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -77,11 +77,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gt.vue b/src/components/flags/gt.vue
index e22767b..53e6659 100644
--- a/src/components/flags/gt.vue
+++ b/src/components/flags/gt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ca8797f3-b8de-4eaf-98ae-278cc4470af9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ca8797f3-b8de-4eaf-98ae-278cc4470af9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gu.vue b/src/components/flags/gu.vue
index d782dbf..78b408b 100644
--- a/src/components/flags/gu.vue
+++ b/src/components/flags/gu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="805cde4e-5b3c-431c-827c-2868e5f89dea">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#805cde4e-5b3c-431c-827c-2868e5f89dea)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -45,7 +45,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -59,11 +59,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/guarani.vue b/src/components/flags/guarani.vue
index 6364114..950c69a 100644
--- a/src/components/flags/guarani.vue
+++ b/src/components/flags/guarani.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6deffaed-a4af-460b-ad88-df651236a228">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6deffaed-a4af-460b-ad88-df651236a228)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#d80027" d="M0 0h512v167H0Z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gw.vue b/src/components/flags/gw.vue
index 534ffc2..3b6fc82 100644
--- a/src/components/flags/gw.vue
+++ b/src/components/flags/gw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a10c679a-cc7c-4d93-9e54-47249a8047de">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a10c679a-cc7c-4d93-9e54-47249a8047de)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h189.2l54 257.6-54 254.4H0z" />
       <path fill="#ffda44" d="M189.2 0H512v256l-159 53.5L189.1 256z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/gy.vue b/src/components/flags/gy.vue
index d91dc7b..bfb1c4b 100644
--- a/src/components/flags/gy.vue
+++ b/src/components/flags/gy.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="03ccc28a-e929-4825-be48-6d7b3a4b2dae">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#03ccc28a-e929-4825-be48-6d7b3a4b2dae)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M77.7 0H512v512H77.8z" />
       <path fill="#eee" d="M425.4 254.7 31.4 512h46.4L512 256 77.7 0H31.4z" />
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hausa.vue b/src/components/flags/hausa.vue
index 269c555..65a8279 100644
--- a/src/components/flags/hausa.vue
+++ b/src/components/flags/hausa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="02619432-b969-40e9-8653-e0d795ffbfcb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#02619432-b969-40e9-8653-e0d795ffbfcb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hk.vue b/src/components/flags/hk.vue
index a8672ae..a7d28a4 100644
--- a/src/components/flags/hk.vue
+++ b/src/components/flags/hk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ce22e3fc-18ad-462d-b6ab-b8dd882c9d35">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ce22e3fc-18ad-462d-b6ab-b8dd882c9d35)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hmong.vue b/src/components/flags/hmong.vue
index 5f22629..0097a37 100644
--- a/src/components/flags/hmong.vue
+++ b/src/components/flags/hmong.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="712e9be7-678e-4533-9ffa-fe7de59fb694">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#712e9be7-678e-4533-9ffa-fe7de59fb694)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hn.vue b/src/components/flags/hn.vue
index 0f35b46..ab55877 100644
--- a/src/components/flags/hn.vue
+++ b/src/components/flags/hn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c9bbec9c-0461-4d4e-a405-019a1f806dff">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c9bbec9c-0461-4d4e-a405-019a1f806dff)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hr.vue b/src/components/flags/hr.vue
index dd831f9..48ab500 100644
--- a/src/components/flags/hr.vue
+++ b/src/components/flags/hr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="cdce931b-3ef1-42d5-a6c1-38845006ef47">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#cdce931b-3ef1-42d5-a6c1-38845006ef47)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#d80027" d="M0 0h512v167H0z" />
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ht.vue b/src/components/flags/ht.vue
index fae9674..7ee6a4c 100644
--- a/src/components/flags/ht.vue
+++ b/src/components/flags/ht.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5a6f4b81-6e7a-4651-95f6-c7d6c711101a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5a6f4b81-6e7a-4651-95f6-c7d6c711101a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#a2001d" d="m0 256 254.8-41.8L512 256v256H0z" />
       <path fill="#0052b4" d="M0 0h512v256H0z" />
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/hu.vue b/src/components/flags/hu.vue
index f4a4f9d..ed32c5e 100644
--- a/src/components/flags/hu.vue
+++ b/src/components/flags/hu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="54eb1f0d-a18f-4708-a897-21fc02e354d9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#54eb1f0d-a18f-4708-a897-21fc02e354d9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#d80027" d="M0 0h512v167H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/id-jb.vue b/src/components/flags/id-jb.vue
index 418d9c4..67a204d 100644
--- a/src/components/flags/id-jb.vue
+++ b/src/components/flags/id-jb.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d83d758a-b841-4960-8f10-a63429b20f44">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d83d758a-b841-4960-8f10-a63429b20f44)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0Z" />
       <path
@@ -49,7 +49,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -63,11 +63,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/id-jt.vue b/src/components/flags/id-jt.vue
index db0cd1d..8bf1d84 100644
--- a/src/components/flags/id-jt.vue
+++ b/src/components/flags/id-jt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="922d2d78-76b8-4670-8027-ef9836a8cfa6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#922d2d78-76b8-4670-8027-ef9836a8cfa6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 0h512v512H0Z" />
       <path
@@ -69,7 +69,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -83,11 +83,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/id.vue b/src/components/flags/id.vue
index a801d7c..adb31f4 100644
--- a/src/components/flags/id.vue
+++ b/src/components/flags/id.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="da8168a1-c817-49de-a301-bd1afa9c9986">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#da8168a1-c817-49de-a301-bd1afa9c9986)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 256 249.6-41.3L512 256v256H0z" />
       <path fill="#a2001d" d="M0 0h512v256H0z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ie.vue b/src/components/flags/ie.vue
index f5ee108..c7dbf28 100644
--- a/src/components/flags/ie.vue
+++ b/src/components/flags/ie.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="63683003-c69e-474d-81f9-6990122bc392">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#63683003-c69e-474d-81f9-6990122bc392)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#6da544" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/il.vue b/src/components/flags/il.vue
index 897aee6..dc0bb7f 100644
--- a/src/components/flags/il.vue
+++ b/src/components/flags/il.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a2135811-c982-4416-a8f1-c4acda7e2b1c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a2135811-c982-4416-a8f1-c4acda7e2b1c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/im.vue b/src/components/flags/im.vue
index 2f2270f..36038c5 100644
--- a/src/components/flags/im.vue
+++ b/src/components/flags/im.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="dbc4e097-8674-4725-ac54-16db9a786edd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#dbc4e097-8674-4725-ac54-16db9a786edd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-as.vue b/src/components/flags/in-as.vue
index 072ea3f..5e7ec87 100644
--- a/src/components/flags/in-as.vue
+++ b/src/components/flags/in-as.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a6bcadd4-241c-4232-ab7e-78eaed3ddca3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a6bcadd4-241c-4232-ab7e-78eaed3ddca3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -45,7 +45,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -59,11 +59,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-gj.vue b/src/components/flags/in-gj.vue
index 84d68d4..5bcdb38 100644
--- a/src/components/flags/in-gj.vue
+++ b/src/components/flags/in-gj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2b18f4bf-6b2a-4c66-84e5-ed557de24735">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2b18f4bf-6b2a-4c66-84e5-ed557de24735)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-ka.vue b/src/components/flags/in-ka.vue
index 8f08eb7..d1483c5 100644
--- a/src/components/flags/in-ka.vue
+++ b/src/components/flags/in-ka.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0ac24296-92ff-43dd-ba22-f917d7a740d2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0ac24296-92ff-43dd-ba22-f917d7a740d2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 256 256.5-36.4L512 256v256H0z" />
       <path fill="#ffda44" d="M0 0h512v256H0z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-mn.vue b/src/components/flags/in-mn.vue
index df27ca0..5c53a11 100644
--- a/src/components/flags/in-mn.vue
+++ b/src/components/flags/in-mn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f01d27ec-1547-41a3-8dc8-8784e1f13fb8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f01d27ec-1547-41a3-8dc8-8784e1f13fb8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v73L256 96 0 73Z" />
       <path fill="#eee" d="M0 73h512v73l-256 23L0 146Z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-mz.vue b/src/components/flags/in-mz.vue
index 2b0b662..df11887 100644
--- a/src/components/flags/in-mz.vue
+++ b/src/components/flags/in-mz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b61eaa89-c596-4ba1-ac9c-a29f635da463">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b61eaa89-c596-4ba1-ac9c-a29f635da463)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v256l-256 32L0 256Z" />
       <path fill="#338af3" d="M0 256h512v256H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-or.vue b/src/components/flags/in-or.vue
index f33e997..2333d3c 100644
--- a/src/components/flags/in-or.vue
+++ b/src/components/flags/in-or.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a5699802-bd60-427f-a2bd-e6960363d7ed">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a5699802-bd60-427f-a2bd-e6960363d7ed)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#d80027" d="M0 0h512v160H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-tg.vue b/src/components/flags/in-tg.vue
index 7eff00f..bff4388 100644
--- a/src/components/flags/in-tg.vue
+++ b/src/components/flags/in-tg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="97b4b270-7abd-41be-860f-a50875ce388a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#97b4b270-7abd-41be-860f-a50875ce388a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v128l-256 64L0 128Z" />
       <path fill="#338af3" d="M0 128h512v128l-256 64L0 256Z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in-tn.vue b/src/components/flags/in-tn.vue
index 0d24c8c..b460d57 100644
--- a/src/components/flags/in-tn.vue
+++ b/src/components/flags/in-tn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f67190cc-fa1e-4906-9938-24bdf73cd243">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f67190cc-fa1e-4906-9938-24bdf73cd243)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -40,7 +40,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -54,11 +54,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/in.vue b/src/components/flags/in.vue
index 07d85cc..0370b6e 100644
--- a/src/components/flags/in.vue
+++ b/src/components/flags/in.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="500d5d1b-722a-4add-86b6-8a621ddc0637">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#500d5d1b-722a-4add-86b6-8a621ddc0637)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352z" />
       <path fill="#ff9811" d="M0 0h512v160H0Z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/io.vue b/src/components/flags/io.vue
index a239af8..996a7ca 100644
--- a/src/components/flags/io.vue
+++ b/src/components/flags/io.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="37571065-447e-45fa-b456-72658b87cc57">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#37571065-447e-45fa-b456-72658b87cc57)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -44,7 +44,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -58,11 +58,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/iq-kr.vue b/src/components/flags/iq-kr.vue
index b1b9396..70ab6ab 100644
--- a/src/components/flags/iq-kr.vue
+++ b/src/components/flags/iq-kr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="09714c2a-211a-4629-a8ca-2d469f3ec8e7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#09714c2a-211a-4629-a8ca-2d469f3ec8e7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/iq.vue b/src/components/flags/iq.vue
index c97b63a..cb8e740 100644
--- a/src/components/flags/iq.vue
+++ b/src/components/flags/iq.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c8edfb0b-5da2-44a3-82d0-2acd52653193">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c8edfb0b-5da2-44a3-82d0-2acd52653193)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#a2001d" d="M0 0h512v167H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ir.vue b/src/components/flags/ir.vue
index fe5179f..15d0e59 100644
--- a/src/components/flags/ir.vue
+++ b/src/components/flags/ir.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c2e7bcf0-f4cf-4903-8a70-45b3ad91a169">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c2e7bcf0-f4cf-4903-8a70-45b3ad91a169)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/is.vue b/src/components/flags/is.vue
index 5027d2d..6d13a33 100644
--- a/src/components/flags/is.vue
+++ b/src/components/flags/is.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f3669564-5b3c-4ab9-993b-64263126c540">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f3669564-5b3c-4ab9-993b-64263126c540)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/it-23.vue b/src/components/flags/it-23.vue
index 5023cf6..9ee6460 100644
--- a/src/components/flags/it-23.vue
+++ b/src/components/flags/it-23.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="78d0ed67-d926-452a-b261-0c1589325b28">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#78d0ed67-d926-452a-b261-0c1589325b28)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M0 0h256l64 256-64 256H0Z" />
       <path fill="#d80027" d="M256 0h256v512H256Z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/it-82.vue b/src/components/flags/it-82.vue
index e45ef4b..0925003 100644
--- a/src/components/flags/it-82.vue
+++ b/src/components/flags/it-82.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="38023d11-b5ed-44ff-9f7f-4b069842c861">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#38023d11-b5ed-44ff-9f7f-4b069842c861)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 0 216.9 301.6L512 512V0z" />
       <path fill="#ffda44" d="m0 0 512 512H0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/it-88.vue b/src/components/flags/it-88.vue
index a064d4b..ea7638c 100644
--- a/src/components/flags/it-88.vue
+++ b/src/components/flags/it-88.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8eee8fa0-0d7c-491a-90f5-b05da7799920">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8eee8fa0-0d7c-491a-90f5-b05da7799920)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -62,7 +62,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -76,11 +76,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/it.vue b/src/components/flags/it.vue
index fca5a4e..55fb0bc 100644
--- a/src/components/flags/it.vue
+++ b/src/components/flags/it.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fed6b2ed-5a71-42e9-ab13-5c1a6ce41dfd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fed6b2ed-5a71-42e9-ab13-5c1a6ce41dfd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#6da544" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/je.vue b/src/components/flags/je.vue
index b41b45c..1cf924f 100644
--- a/src/components/flags/je.vue
+++ b/src/components/flags/je.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8dc8f890-bd34-4607-871e-92c8fe4806ed">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8dc8f890-bd34-4607-871e-92c8fe4806ed)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/jm.vue b/src/components/flags/jm.vue
index befaa54..db4dbaa 100644
--- a/src/components/flags/jm.vue
+++ b/src/components/flags/jm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c2a29998-1b7e-4725-9b31-e277a85003ce">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c2a29998-1b7e-4725-9b31-e277a85003ce)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#333"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/jo.vue b/src/components/flags/jo.vue
index b810e97..0277bc3 100644
--- a/src/components/flags/jo.vue
+++ b/src/components/flags/jo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="deefffd6-c451-4658-a88b-340fc011b0e9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#deefffd6-c451-4658-a88b-340fc011b0e9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/jp.vue b/src/components/flags/jp.vue
index bbc8473..f3e28b2 100644
--- a/src/components/flags/jp.vue
+++ b/src/components/flags/jp.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="26593ceb-aaf7-4fcd-b551-7267c69d5208">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#26593ceb-aaf7-4fcd-b551-7267c69d5208)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <circle cx="256" cy="256" r="111.3" fill="#d80027" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kanuri.vue b/src/components/flags/kanuri.vue
index df6c2c9..cba113b 100644
--- a/src/components/flags/kanuri.vue
+++ b/src/components/flags/kanuri.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0f78a8cd-9ed5-479e-94be-d9ebd78555a1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0f78a8cd-9ed5-479e-94be-d9ebd78555a1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#496e2d" d="M0 345h512v167H0Z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ke.vue b/src/components/flags/ke.vue
index 408a759..50794a8 100644
--- a/src/components/flags/ke.vue
+++ b/src/components/flags/ke.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="67508006-a9cb-4167-9aee-1b15739f816d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#67508006-a9cb-4167-9aee-1b15739f816d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -45,7 +45,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -59,11 +59,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kg.vue b/src/components/flags/kg.vue
index ee6b4fa..6f6c5d7 100644
--- a/src/components/flags/kg.vue
+++ b/src/components/flags/kg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2ff88a24-f172-4d38-a402-9e6e2ffea2df">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2ff88a24-f172-4d38-a402-9e6e2ffea2df)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kh.vue b/src/components/flags/kh.vue
index fd18eb9..ce6b8c1 100644
--- a/src/components/flags/kh.vue
+++ b/src/components/flags/kh.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="214627ac-10c1-41f6-b6ae-a6187980144f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#214627ac-10c1-41f6-b6ae-a6187980144f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ki.vue b/src/components/flags/ki.vue
index 3165488..79b1f22 100644
--- a/src/components/flags/ki.vue
+++ b/src/components/flags/ki.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="cc135755-dbe9-440a-a4ef-2ab1b9d15db5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#cc135755-dbe9-440a-a4ef-2ab1b9d15db5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512l-.1 234.8-254.7 260.9L.3 234.8z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kikuyu.vue b/src/components/flags/kikuyu.vue
index d23e4e1..cbe174d 100644
--- a/src/components/flags/kikuyu.vue
+++ b/src/components/flags/kikuyu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="686d08f1-4309-4949-8c58-cecedb3a4c2c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#686d08f1-4309-4949-8c58-cecedb3a4c2c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m228 0 32 211-32 211h-32l-32-211L196 0Z" />
       <path fill="#496e2d" d="M196 0v450H0V0Z" />
@@ -42,7 +42,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -56,11 +56,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/km.vue b/src/components/flags/km.vue
index fb771b1..40f887f 100644
--- a/src/components/flags/km.vue
+++ b/src/components/flags/km.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ff22c1de-aa6a-47c8-9450-26854b4f41ff">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ff22c1de-aa6a-47c8-9450-26854b4f41ff)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M124.4 149.7 512 132.8V0H0z" />
       <path fill="#eee" d="M112.5 132.8H512v122.4l-294.2 16.6z" />
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kn.vue b/src/components/flags/kn.vue
index b370bf1..8dc4202 100644
--- a/src/components/flags/kn.vue
+++ b/src/components/flags/kn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="677d6ec4-fe29-45a1-b8c7-b12be674c958">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#677d6ec4-fe29-45a1-b8c7-b12be674c958)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kongo.vue b/src/components/flags/kongo.vue
index 2c321d1..11edce3 100644
--- a/src/components/flags/kongo.vue
+++ b/src/components/flags/kongo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5005112f-eea7-4c5d-9cc2-3392844bba6d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5005112f-eea7-4c5d-9cc2-3392844bba6d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#d80027" d="M0 0h512v160H0Z" />
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kp.vue b/src/components/flags/kp.vue
index b488c58..5b219ff 100644
--- a/src/components/flags/kp.vue
+++ b/src/components/flags/kp.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b61d84b6-41cc-4657-b088-39a2bd378bc7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b61d84b6-41cc-4657-b088-39a2bd378bc7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kr.vue b/src/components/flags/kr.vue
index 3b7abe2..73bb510 100644
--- a/src/components/flags/kr.vue
+++ b/src/components/flags/kr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="dc95b229-f0ee-42d3-b07a-ac20583452f3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#dc95b229-f0ee-42d3-b07a-ac20583452f3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0Z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kw.vue b/src/components/flags/kw.vue
index 14800b8..51a43c7 100644
--- a/src/components/flags/kw.vue
+++ b/src/components/flags/kw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="136f6415-564d-4369-b76c-23073f00d780">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#136f6415-564d-4369-b76c-23073f00d780)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M138.4 147 512 167v178l-373.6 20z" />
       <path fill="#6da544" d="m0 0 138.4 167H512V0z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ky.vue b/src/components/flags/ky.vue
index c9e0f19..e25a509 100644
--- a/src/components/flags/ky.vue
+++ b/src/components/flags/ky.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="01f8e8cf-4446-40b3-9b74-719d7a9589d0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#01f8e8cf-4446-40b3-9b74-719d7a9589d0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -46,7 +46,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -60,11 +60,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/kz.vue b/src/components/flags/kz.vue
index 70a0cd2..ce2e9d4 100644
--- a/src/components/flags/kz.vue
+++ b/src/components/flags/kz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="19313e79-9b9b-4194-8a3f-22baada1820a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#19313e79-9b9b-4194-8a3f-22baada1820a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/la.vue b/src/components/flags/la.vue
index ca5a7a8..558e7ac 100644
--- a/src/components/flags/la.vue
+++ b/src/components/flags/la.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f8b7f13a-387f-4840-b549-9faae6e2d5c9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f8b7f13a-387f-4840-b549-9faae6e2d5c9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lb.vue b/src/components/flags/lb.vue
index e46e4e8..c0bfd80 100644
--- a/src/components/flags/lb.vue
+++ b/src/components/flags/lb.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b7ec4668-f6a0-43a5-a29a-23c195ff70ee">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b7ec4668-f6a0-43a5-a29a-23c195ff70ee)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lc.vue b/src/components/flags/lc.vue
index 359a6ec..17b4065 100644
--- a/src/components/flags/lc.vue
+++ b/src/components/flags/lc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="08f07495-8b75-43a7-8cfb-e309150cdf51">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#08f07495-8b75-43a7-8cfb-e309150cdf51)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path fill="#eee" d="M161.4 345h189.2L256 122.4z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/li.vue b/src/components/flags/li.vue
index 27b7da7..d16362c 100644
--- a/src/components/flags/li.vue
+++ b/src/components/flags/li.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5caef9a5-1edc-40be-bb8a-5de3efac6dd2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5caef9a5-1edc-40be-bb8a-5de3efac6dd2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 256 255.2-39.6L512 256v256H0z" />
       <path fill="#0052b4" d="M0 0h512v256H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lk.vue b/src/components/flags/lk.vue
index 3cceea4..fcb953d 100644
--- a/src/components/flags/lk.vue
+++ b/src/components/flags/lk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ef8076f2-bccf-4b0d-8bcb-6dfc577a5cd1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ef8076f2-bccf-4b0d-8bcb-6dfc577a5cd1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ff9811" d="M81.4 27.2h135.2v456.5H81.4z" />
       <path fill="#6da544" d="m0 44.5 100.2-22v463L0 467.5z" />
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lr.vue b/src/components/flags/lr.vue
index 31e451f..3592629 100644
--- a/src/components/flags/lr.vue
+++ b/src/components/flags/lr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e612d4cd-67b8-40b5-a9ab-d546e6dda595">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e612d4cd-67b8-40b5-a9ab-d546e6dda595)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ls.vue b/src/components/flags/ls.vue
index f527690..0b88b34 100644
--- a/src/components/flags/ls.vue
+++ b/src/components/flags/ls.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="cc84f9d0-42bd-4ef1-876f-3ec9cf13237d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#cc84f9d0-42bd-4ef1-876f-3ec9cf13237d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lt.vue b/src/components/flags/lt.vue
index 3ec3b19..f7869b4 100644
--- a/src/components/flags/lt.vue
+++ b/src/components/flags/lt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bc09dafb-fb66-44ff-815e-864c5fc8e5c8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bc09dafb-fb66-44ff-815e-864c5fc8e5c8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lu.vue b/src/components/flags/lu.vue
index c3f5fb9..ba491b1 100644
--- a/src/components/flags/lu.vue
+++ b/src/components/flags/lu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a518b540-fd6d-41bc-b0b6-2464caaf859d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a518b540-fd6d-41bc-b0b6-2464caaf859d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#d80027" d="M0 0h512v167H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/lv.vue b/src/components/flags/lv.vue
index c00dad5..8b0f91d 100644
--- a/src/components/flags/lv.vue
+++ b/src/components/flags/lv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="addf2c5d-525d-4d37-89e0-1c9fde6b7f3d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#addf2c5d-525d-4d37-89e0-1c9fde6b7f3d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#a2001d"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ly.vue b/src/components/flags/ly.vue
index b0e8de7..b6da049 100644
--- a/src/components/flags/ly.vue
+++ b/src/components/flags/ly.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="62a5fb56-dece-4754-9dc9-7cd39fcb6868">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#62a5fb56-dece-4754-9dc9-7cd39fcb6868)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#333"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ma.vue b/src/components/flags/ma.vue
index 59fbb01..0da84d1 100644
--- a/src/components/flags/ma.vue
+++ b/src/components/flags/ma.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="77b7369b-3454-4903-bb03-9a7b10765499">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#77b7369b-3454-4903-bb03-9a7b10765499)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/malayali.vue b/src/components/flags/malayali.vue
index e85a888..bfe3686 100644
--- a/src/components/flags/malayali.vue
+++ b/src/components/flags/malayali.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="448de938-6a71-43f2-9708-84477f88d3ac">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#448de938-6a71-43f2-9708-84477f88d3ac)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/maori.vue b/src/components/flags/maori.vue
index 1df30b3..4950611 100644
--- a/src/components/flags/maori.vue
+++ b/src/components/flags/maori.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e7868f9b-0575-4785-929d-fbb113b078c1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e7868f9b-0575-4785-929d-fbb113b078c1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mc.vue b/src/components/flags/mc.vue
index d9102a7..fb086df 100644
--- a/src/components/flags/mc.vue
+++ b/src/components/flags/mc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="574025dc-5e21-4528-8b02-e07c3d6f141e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#574025dc-5e21-4528-8b02-e07c3d6f141e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 256 258.2-43.3L512 256v256H0z" />
       <path fill="#d80027" d="M0 0h512v256H0z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/md.vue b/src/components/flags/md.vue
index b10dc43..356d678 100644
--- a/src/components/flags/md.vue
+++ b/src/components/flags/md.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="aeb00bcb-e2e5-4ba6-90d7-df51b22f1f59">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#aeb00bcb-e2e5-4ba6-90d7-df51b22f1f59)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h144.7l36 254.6-36 257.4H0z" />
       <path fill="#d80027" d="M367.3 0H512v512H367.3l-29.7-257.3z" />
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/me.vue b/src/components/flags/me.vue
index 79c1aaa..3a77598 100644
--- a/src/components/flags/me.vue
+++ b/src/components/flags/me.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="df1bde86-c156-4cec-919f-4ed4a7160f20">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#df1bde86-c156-4cec-919f-4ed4a7160f20)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mf.vue b/src/components/flags/mf.vue
index 6f54643..eae3408 100644
--- a/src/components/flags/mf.vue
+++ b/src/components/flags/mf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1e040a27-46e5-4e5f-9af9-74fe3874fcab">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1e040a27-46e5-4e5f-9af9-74fe3874fcab)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 128V0h512v128L299 512h-86z" />
       <circle cx="256" cy="213" r="57" fill="#ffda44" />
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mg.vue b/src/components/flags/mg.vue
index 6bae63a..10afd3b 100644
--- a/src/components/flags/mg.vue
+++ b/src/components/flags/mg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="728f3eac-bc01-493c-94ee-0f6e55729902">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#728f3eac-bc01-493c-94ee-0f6e55729902)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h167l45.6 257.6L167.1 512H0z" />
       <path fill="#d80027" d="M167 0h345v256l-176.7 53.5L166.9 256z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mh.vue b/src/components/flags/mh.vue
index c7be88f..0c63a32 100644
--- a/src/components/flags/mh.vue
+++ b/src/components/flags/mh.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="70db01ea-a241-4488-91f0-7048aae2c3c6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#70db01ea-a241-4488-91f0-7048aae2c3c6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h397.6L512 114.2V512H0z" />
       <path fill="#eee" d="M512 0H397.6L0 512 493.4 53.7z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mk.vue b/src/components/flags/mk.vue
index 4c4d31b..510285d 100644
--- a/src/components/flags/mk.vue
+++ b/src/components/flags/mk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c74e6020-895d-46ea-bc6b-5737570f39a7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c74e6020-895d-46ea-bc6b-5737570f39a7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ml.vue b/src/components/flags/ml.vue
index 1648e69..3b20620 100644
--- a/src/components/flags/ml.vue
+++ b/src/components/flags/ml.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="73287168-b267-4420-8b98-6fb19b087945">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#73287168-b267-4420-8b98-6fb19b087945)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#6da544" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mm.vue b/src/components/flags/mm.vue
index 6eea9ee..0d26642 100644
--- a/src/components/flags/mm.vue
+++ b/src/components/flags/mm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="31cc19d9-f7bc-42ab-a64d-0cda1b2165c0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#31cc19d9-f7bc-42ab-a64d-0cda1b2165c0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mn.vue b/src/components/flags/mn.vue
index 08c599b..8d6c875 100644
--- a/src/components/flags/mn.vue
+++ b/src/components/flags/mn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c9f40bc7-7c39-495a-a35a-a21d828c9b66">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c9f40bc7-7c39-495a-a35a-a21d828c9b66)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#a2001d"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mo.vue b/src/components/flags/mo.vue
index 47a6973..596e333 100644
--- a/src/components/flags/mo.vue
+++ b/src/components/flags/mo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="edd6c3f6-d943-44c3-984f-09b8aa5fa53d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#edd6c3f6-d943-44c3-984f-09b8aa5fa53d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mp.vue b/src/components/flags/mp.vue
index eb20c84..f830f18 100644
--- a/src/components/flags/mp.vue
+++ b/src/components/flags/mp.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2a88958b-da2e-462f-b997-f83bd532dc91">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2a88958b-da2e-462f-b997-f83bd532dc91)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mq.vue b/src/components/flags/mq.vue
index 3ee4132..4c79499 100644
--- a/src/components/flags/mq.vue
+++ b/src/components/flags/mq.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="434c2295-f924-4dfb-bdf5-eacec2256432">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#434c2295-f924-4dfb-bdf5-eacec2256432)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mr.vue b/src/components/flags/mr.vue
index be19398..9b2812b 100644
--- a/src/components/flags/mr.vue
+++ b/src/components/flags/mr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="06dd3f44-ff30-44e4-9a2e-fcfa516ec0f4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#06dd3f44-ff30-44e4-9a2e-fcfa516ec0f4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0z" />
       <g fill="#ffda44">
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ms.vue b/src/components/flags/ms.vue
index 77d8841..4511d45 100644
--- a/src/components/flags/ms.vue
+++ b/src/components/flags/ms.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0f0e0ba9-f76d-498d-a55b-7260f2a3d5bd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0f0e0ba9-f76d-498d-a55b-7260f2a3d5bd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -40,7 +40,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -54,11 +54,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mt.vue b/src/components/flags/mt.vue
index 7c7eca7..cd40886 100644
--- a/src/components/flags/mt.vue
+++ b/src/components/flags/mt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d9f716ba-a763-4646-96f8-9bc4774a6d9d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d9f716ba-a763-4646-96f8-9bc4774a6d9d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h256l52 259.2L256 512H0z" />
       <path fill="#d80027" d="M256 0h256v512H256z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mu.vue b/src/components/flags/mu.vue
index ea3b890..888bbc3 100644
--- a/src/components/flags/mu.vue
+++ b/src/components/flags/mu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="929bf023-d41a-4913-b03a-82d792ba1f16">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#929bf023-d41a-4913-b03a-82d792ba1f16)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="m0 378.3 254-37.1 258 37V512H0z" />
       <path fill="#ffda44" d="m0 256.1 252.2-33.3L512 256v122.4H0z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mv.vue b/src/components/flags/mv.vue
index d56aae3..9c7c95a 100644
--- a/src/components/flags/mv.vue
+++ b/src/components/flags/mv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="73e3740d-1205-48e3-955a-6021de7bc0f2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#73e3740d-1205-48e3-955a-6021de7bc0f2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path fill="#6da544" d="M89 133.6h334v244.8H89z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mw.vue b/src/components/flags/mw.vue
index a21cc17..f33d9b6 100644
--- a/src/components/flags/mw.vue
+++ b/src/components/flags/mw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="df9bf0c2-a2fa-47df-a9c2-2234a1ad68f4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#df9bf0c2-a2fa-47df-a9c2-2234a1ad68f4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mx.vue b/src/components/flags/mx.vue
index d8272b7..f43e353 100644
--- a/src/components/flags/mx.vue
+++ b/src/components/flags/mx.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c54d7be6-89fd-42c8-b1c5-aee70c252801">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c54d7be6-89fd-42c8-b1c5-aee70c252801)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M144 0h223l33 256-33 256H144l-32-256z" />
       <path fill="#496e2d" d="M0 0h144v512H0z" />
@@ -58,7 +58,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -72,11 +72,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/my.vue b/src/components/flags/my.vue
index db5a00c..6b76160 100644
--- a/src/components/flags/my.vue
+++ b/src/components/flags/my.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2f3c2b43-ecf2-4052-9c7b-49aae2f1544a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2f3c2b43-ecf2-4052-9c7b-49aae2f1544a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/mz.vue b/src/components/flags/mz.vue
index 673597f..49c0a0f 100644
--- a/src/components/flags/mz.vue
+++ b/src/components/flags/mz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5fb3f1d4-4c3a-4c15-8937-d9a610f0e0eb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5fb3f1d4-4c3a-4c15-8937-d9a610f0e0eb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/na.vue b/src/components/flags/na.vue
index a11837c..bc27edf 100644
--- a/src/components/flags/na.vue
+++ b/src/components/flags/na.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ffc1ffb9-dfdb-427c-814f-81ac2c4944bd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ffc1ffb9-dfdb-427c-814f-81ac2c4944bd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nato.vue b/src/components/flags/nato.vue
index 49e4ef7..2cb6389 100644
--- a/src/components/flags/nato.vue
+++ b/src/components/flags/nato.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c277d026-11b1-4fde-a6fa-19ff192e9d99">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c277d026-11b1-4fde-a6fa-19ff192e9d99)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nc.vue b/src/components/flags/nc.vue
index 60a62c9..73080c1 100644
--- a/src/components/flags/nc.vue
+++ b/src/components/flags/nc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="11553f0a-763c-45fb-a86d-47582f5a398e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#11553f0a-763c-45fb-a86d-47582f5a398e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 352h512v160H0z" />
       <path fill="#d80027" d="M0 160h512v192H0z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ne.vue b/src/components/flags/ne.vue
index e9fdb68..6670453 100644
--- a/src/components/flags/ne.vue
+++ b/src/components/flags/ne.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="932b63ec-b016-4c36-abc2-5f3188f37b93">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#932b63ec-b016-4c36-abc2-5f3188f37b93)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nf.vue b/src/components/flags/nf.vue
index c782f48..9bffe09 100644
--- a/src/components/flags/nf.vue
+++ b/src/components/flags/nf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e85c25cc-95e6-47b8-ba1e-43d73384ea53">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e85c25cc-95e6-47b8-ba1e-43d73384ea53)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ng.vue b/src/components/flags/ng.vue
index dd85ec4..3c107db 100644
--- a/src/components/flags/ng.vue
+++ b/src/components/flags/ng.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="13bf1346-171a-4967-80f2-a11ee377035a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#13bf1346-171a-4967-80f2-a11ee377035a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ni.vue b/src/components/flags/ni.vue
index 3631955..a71606b 100644
--- a/src/components/flags/ni.vue
+++ b/src/components/flags/ni.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a3b43d51-49b3-489b-80d2-235a1eee8560">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a3b43d51-49b3-489b-80d2-235a1eee8560)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -37,7 +37,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -51,11 +51,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nl-fr.vue b/src/components/flags/nl-fr.vue
index afc334f..37fc618 100644
--- a/src/components/flags/nl-fr.vue
+++ b/src/components/flags/nl-fr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1c460768-cc0e-426e-96c1-c710c3dca9ee">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1c460768-cc0e-426e-96c1-c710c3dca9ee)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nl.vue b/src/components/flags/nl.vue
index 13cc71b..e2575dc 100644
--- a/src/components/flags/nl.vue
+++ b/src/components/flags/nl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="574c6386-b95d-467a-8247-072a27871ed8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#574c6386-b95d-467a-8247-072a27871ed8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#a2001d" d="M0 0h512v167H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/no.vue b/src/components/flags/no.vue
index adadda0..3cc96c4 100644
--- a/src/components/flags/no.vue
+++ b/src/components/flags/no.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="06f284d1-b710-4e89-bfb3-5dd9a5563ed6">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#06f284d1-b710-4e89-bfb3-5dd9a5563ed6)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/northern_cyprus.vue b/src/components/flags/northern_cyprus.vue
index 426e05a..ab9f1cb 100644
--- a/src/components/flags/northern_cyprus.vue
+++ b/src/components/flags/northern_cyprus.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ee6c62cc-b07f-47d8-b4ad-ef963ff23f84">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ee6c62cc-b07f-47d8-b4ad-ef963ff23f84)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/np.vue b/src/components/flags/np.vue
index e73530b..6d19ad3 100644
--- a/src/components/flags/np.vue
+++ b/src/components/flags/np.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="44fd6754-6fc4-4b98-ab46-0b2db6876a5b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#44fd6754-6fc4-4b98-ab46-0b2db6876a5b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M228.4 0H512v512h-27.4L159.4 258.5z" />
       <path
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nr.vue b/src/components/flags/nr.vue
index 48a8cb5..e5168be 100644
--- a/src/components/flags/nr.vue
+++ b/src/components/flags/nr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="7cbcd650-7562-47d0-beb3-a8ff5c2ef35a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#7cbcd650-7562-47d0-beb3-a8ff5c2ef35a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nu.vue b/src/components/flags/nu.vue
index d47875a..374b188 100644
--- a/src/components/flags/nu.vue
+++ b/src/components/flags/nu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c31acc17-9ebe-4352-ad40-61a8a6f9d2ef">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c31acc17-9ebe-4352-ad40-61a8a6f9d2ef)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 256 256 0h256v512H0z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/nz.vue b/src/components/flags/nz.vue
index b66f775..4b325b5 100644
--- a/src/components/flags/nz.vue
+++ b/src/components/flags/nz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d45f7ccc-18c3-4681-9cd5-255c0c40b898">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d45f7ccc-18c3-4681-9cd5-255c0c40b898)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/occitania.vue b/src/components/flags/occitania.vue
index 4c5c85a..30f2285 100644
--- a/src/components/flags/occitania.vue
+++ b/src/components/flags/occitania.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="35044651-0b66-43d4-80d9-af0944f8431f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#35044651-0b66-43d4-80d9-af0944f8431f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <circle cx="256" cy="64" r="32" fill="#ffda44" />
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/olympics.vue b/src/components/flags/olympics.vue
index c0ff4b5..46921c6 100644
--- a/src/components/flags/olympics.vue
+++ b/src/components/flags/olympics.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="03009082-5130-4ad5-928f-d5a0ffb98ef7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#03009082-5130-4ad5-928f-d5a0ffb98ef7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -55,7 +55,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -69,11 +69,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/om.vue b/src/components/flags/om.vue
index faa89dc..b365130 100644
--- a/src/components/flags/om.vue
+++ b/src/components/flags/om.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4d55ad06-9e28-4568-952e-7f37e3698f30">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4d55ad06-9e28-4568-952e-7f37e3698f30)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M189.2 0H512v167l-347.5 24.6z" />
       <path fill="#6da544" d="m163 320 349 25v167H189.2z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/otomi.vue b/src/components/flags/otomi.vue
index 4720891..a8f29bb 100644
--- a/src/components/flags/otomi.vue
+++ b/src/components/flags/otomi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="73b9345a-e41c-478a-842c-bd1f706a3e9b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#73b9345a-e41c-478a-842c-bd1f706a3e9b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ff9811" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#eee" d="m0 160 256-32 256 32v32H0Z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pa.vue b/src/components/flags/pa.vue
index 418e9fd..4d84b96 100644
--- a/src/components/flags/pa.vue
+++ b/src/components/flags/pa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="576147fe-1fc0-4eae-9cb2-e749c0624e4f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#576147fe-1fc0-4eae-9cb2-e749c0624e4f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h256l256 256v256H256L0 256z" />
       <path fill="#0052b4" d="M0 256v256h256V256z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pe.vue b/src/components/flags/pe.vue
index 937c319..25727de 100644
--- a/src/components/flags/pe.vue
+++ b/src/components/flags/pe.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="830ba16c-a602-494d-a91a-64244f4208bf">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#830ba16c-a602-494d-a91a-64244f4208bf)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pf.vue b/src/components/flags/pf.vue
index 12fd369..923de5c 100644
--- a/src/components/flags/pf.vue
+++ b/src/components/flags/pf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d5a14bcd-4b8e-460c-8d39-a05b271213cd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d5a14bcd-4b8e-460c-8d39-a05b271213cd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pg.vue b/src/components/flags/pg.vue
index 8b68c17..ff001a2 100644
--- a/src/components/flags/pg.vue
+++ b/src/components/flags/pg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="230284dc-fcee-4e79-83e3-c79309f1bf5a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#230284dc-fcee-4e79-83e3-c79309f1bf5a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#333" d="M512 512 301.3 226.6 0 0v512z" />
       <path fill="#a2001d" d="m0 0 512 512V0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ph.vue b/src/components/flags/ph.vue
index 9f299e0..60b4031 100644
--- a/src/components/flags/ph.vue
+++ b/src/components/flags/ph.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4c7ad87c-b3cb-417b-8849-f38bdd87b519">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4c7ad87c-b3cb-417b-8849-f38bdd87b519)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v256l-265 45.2z" />
       <path fill="#d80027" d="M210 256h302v256H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pk-jk.vue b/src/components/flags/pk-jk.vue
index 78ef679..00552eb 100644
--- a/src/components/flags/pk-jk.vue
+++ b/src/components/flags/pk-jk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="85c4bc9b-c5b3-4d06-928e-c49fb11f4aeb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#85c4bc9b-c5b3-4d06-928e-c49fb11f4aeb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ff9811" d="M0 0h224l32 88-32 88-96 32L0 176Z" />
       <path
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pk-sd.vue b/src/components/flags/pk-sd.vue
index 26fb149..a676e90 100644
--- a/src/components/flags/pk-sd.vue
+++ b/src/components/flags/pk-sd.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a278205f-4da3-4a98-8dd3-fa7ea43970a5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a278205f-4da3-4a98-8dd3-fa7ea43970a5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0z" />
       <ellipse cx="256" cy="284" fill="#eee" rx="140" ry="132" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pk.vue b/src/components/flags/pk.vue
index 1c585dd..3b3a073 100644
--- a/src/components/flags/pk.vue
+++ b/src/components/flags/pk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a38bd73e-a51d-4a0b-9653-f2ec4907fef8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a38bd73e-a51d-4a0b-9653-f2ec4907fef8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h133.6l50.2 252.5L133.6 512H0z" />
       <path fill="#496e2d" d="M133.6 0H512v512H133.6z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pl.vue b/src/components/flags/pl.vue
index 687f362..bda4393 100644
--- a/src/components/flags/pl.vue
+++ b/src/components/flags/pl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="2a5b3cf8-be4c-4c60-82b7-f5685c92b0a3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#2a5b3cf8-be4c-4c60-82b7-f5685c92b0a3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m0 256 256.4-44.3L512 256v256H0z" />
       <path fill="#eee" d="M0 0h512v256H0z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pm.vue b/src/components/flags/pm.vue
index 6b3d49b..4b3c007 100644
--- a/src/components/flags/pm.vue
+++ b/src/components/flags/pm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d0417b1c-0e5a-4d93-894d-4f70edf8252b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d0417b1c-0e5a-4d93-894d-4f70edf8252b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M160 0h352v512H160l-32-256z" />
       <path fill="#eee" d="m0 160 80-32 80 32v192l-80 32-80-32z" />
@@ -56,7 +56,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -70,11 +70,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pn.vue b/src/components/flags/pn.vue
index 3d7874e..fd487e8 100644
--- a/src/components/flags/pn.vue
+++ b/src/components/flags/pn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5c134ff1-94ec-4d83-aca7-71ee5b1bec61">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5c134ff1-94ec-4d83-aca7-71ee5b1bec61)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path fill="#acabb1" d="m401 156-34 11-33-11-11-28 11-28h67l-11 28Z" />
@@ -44,7 +44,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -58,11 +58,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pr.vue b/src/components/flags/pr.vue
index d94ab47..52bb5ce 100644
--- a/src/components/flags/pr.vue
+++ b/src/components/flags/pr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1b5112f2-4a3b-4106-b826-442b867f732a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1b5112f2-4a3b-4106-b826-442b867f732a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ps.vue b/src/components/flags/ps.vue
index 4247196..0b88525 100644
--- a/src/components/flags/ps.vue
+++ b/src/components/flags/ps.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="24f451c0-3ef3-4b2e-b0bd-256730c20625">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#24f451c0-3ef3-4b2e-b0bd-256730c20625)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M41.3 121.9 512 167v178L43.8 391.3z" />
       <path fill="#333" d="M0 0h512v167H111z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pt-20.vue b/src/components/flags/pt-20.vue
index 26ff514..1b14bd0 100644
--- a/src/components/flags/pt-20.vue
+++ b/src/components/flags/pt-20.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d0c2e2eb-d8ac-4e05-9268-0395381847ec">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d0c2e2eb-d8ac-4e05-9268-0395381847ec)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 512h189.2l41.4-256L189.2 0H0z" />
       <path fill="#eee" d="M189.2 0H512v512H189.2z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pt-30.vue b/src/components/flags/pt-30.vue
index 85bbbce..d75412b 100644
--- a/src/components/flags/pt-30.vue
+++ b/src/components/flags/pt-30.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fdb68cf1-e404-4fef-bf55-a32f01a2e1c3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fdb68cf1-e404-4fef-bf55-a32f01a2e1c3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pt.vue b/src/components/flags/pt.vue
index 60eb7d4..c666193 100644
--- a/src/components/flags/pt.vue
+++ b/src/components/flags/pt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0a5ca789-e3ba-4215-97da-516528883c3a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0a5ca789-e3ba-4215-97da-516528883c3a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M0 512h167l37.9-260.3L167 0H0z" />
       <path fill="#d80027" d="M512 0H167v512h345z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/pw.vue b/src/components/flags/pw.vue
index 50a175b..08d0b4f 100644
--- a/src/components/flags/pw.vue
+++ b/src/components/flags/pw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bd63990a-36a3-49eb-8be6-89e76becd252">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bd63990a-36a3-49eb-8be6-89e76becd252)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <circle cx="200.3" cy="256" r="111.3" fill="#ffda44" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/py.vue b/src/components/flags/py.vue
index 1c5cf64..e89a2a9 100644
--- a/src/components/flags/py.vue
+++ b/src/components/flags/py.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0041fd51-c98c-4770-a555-6e3327aa6796">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0041fd51-c98c-4770-a555-6e3327aa6796)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/qa.vue b/src/components/flags/qa.vue
index 6fa44e8..30a363a 100644
--- a/src/components/flags/qa.vue
+++ b/src/components/flags/qa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c71ab278-271d-4a01-9df6-40cd09a13e51">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c71ab278-271d-4a01-9df6-40cd09a13e51)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h173l61 255.8L173.4 512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/quechua.vue b/src/components/flags/quechua.vue
index df8611b..9986409 100644
--- a/src/components/flags/quechua.vue
+++ b/src/components/flags/quechua.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fb5de041-64ed-47a8-b07c-9c0019758660">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fb5de041-64ed-47a8-b07c-9c0019758660)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#4a1f63" d="M0 512h512v-70l-256-32L0 442Z" />
       <path fill="#0052b4" d="M0 442h512v-70l-256-32L0 372Z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/re.vue b/src/components/flags/re.vue
index 54d7a28..7157e34 100644
--- a/src/components/flags/re.vue
+++ b/src/components/flags/re.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="892348e1-fabb-4f40-b76a-6433e7237680">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#892348e1-fabb-4f40-b76a-6433e7237680)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ro.vue b/src/components/flags/ro.vue
index 556dabf..a35bdfe 100644
--- a/src/components/flags/ro.vue
+++ b/src/components/flags/ro.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="886586dc-147b-4404-8371-dc48f9d150fb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#886586dc-147b-4404-8371-dc48f9d150fb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#0052b4" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/rs.vue b/src/components/flags/rs.vue
index dd261c1..619afd6 100644
--- a/src/components/flags/rs.vue
+++ b/src/components/flags/rs.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9bb3a20e-be89-4ff2-a01c-02c27add5298">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9bb3a20e-be89-4ff2-a01c-02c27add5298)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -40,7 +40,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -54,11 +54,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-ba.vue b/src/components/flags/ru-ba.vue
index 02354e8..41b6291 100644
--- a/src/components/flags/ru-ba.vue
+++ b/src/components/flags/ru-ba.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="7ed41d77-873f-41c9-8c3d-99bd564857c1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#7ed41d77-873f-41c9-8c3d-99bd564857c1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 160 256-32 256 32v192l-256 32L0 352Z" />
       <path fill="#338af3" d="M0 0h512v160H0Z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-ce.vue b/src/components/flags/ru-ce.vue
index 3f22629..5ade666 100644
--- a/src/components/flags/ru-ce.vue
+++ b/src/components/flags/ru-ce.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ba5876b4-e1db-45ed-8daa-2afabd6e1d50">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ba5876b4-e1db-45ed-8daa-2afabd6e1d50)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="m96 357 208-32 208 32v155H96l-32-78Z" />
       <path fill="#496e2d" d="M96 0h416v293l-208 32-208-32-32-147Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-cu.vue b/src/components/flags/ru-cu.vue
index 9c20950..09aff67 100644
--- a/src/components/flags/ru-cu.vue
+++ b/src/components/flags/ru-cu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="69617fc2-b639-4840-a151-b6d867bbe6f8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#69617fc2-b639-4840-a151-b6d867bbe6f8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 0h512v385l-256 64L0 385z" />
       <path
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-da.vue b/src/components/flags/ru-da.vue
index 7a0edf8..0486b80 100644
--- a/src/components/flags/ru-da.vue
+++ b/src/components/flags/ru-da.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4de7c4ca-d503-45ce-ad38-b8e0f25a06b0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4de7c4ca-d503-45ce-ad38-b8e0f25a06b0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#d80027" d="M0 345h512v167H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-ko.vue b/src/components/flags/ru-ko.vue
index 5cf5781..c496b32 100644
--- a/src/components/flags/ru-ko.vue
+++ b/src/components/flags/ru-ko.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bba7d7b6-d343-4632-bccc-72183926284c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bba7d7b6-d343-4632-bccc-72183926284c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="m0 167 256-32 256 32v178l-256 32L0 345Z" />
       <path fill="#eee" d="M0 345h512v167H0Z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-ta.vue b/src/components/flags/ru-ta.vue
index e119a30..aaabd65 100644
--- a/src/components/flags/ru-ta.vue
+++ b/src/components/flags/ru-ta.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="350b18cc-57f5-49ac-b02b-b5069437fad0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#350b18cc-57f5-49ac-b02b-b5069437fad0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 224 256-32 256 32v64l-256 32L0 288Z" />
       <path fill="#496e2d" d="M0 0h512v224H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru-ud.vue b/src/components/flags/ru-ud.vue
index 5a2a12e..4c17673 100644
--- a/src/components/flags/ru-ud.vue
+++ b/src/components/flags/ru-ud.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="feaff0ef-e2f6-4f23-ad2c-2068f78f8395">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#feaff0ef-e2f6-4f23-ad2c-2068f78f8395)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M160 0h192l32 256-32 256H160l-32-256Z" />
       <path fill="#333" d="M0 0h160v512H0Z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ru.vue b/src/components/flags/ru.vue
index 98758da..a74f7c9 100644
--- a/src/components/flags/ru.vue
+++ b/src/components/flags/ru.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f3bdd362-e311-45d6-9d78-ef5d103c9a66">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f3bdd362-e311-45d6-9d78-ef5d103c9a66)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/rw.vue b/src/components/flags/rw.vue
index f96523d..2687b9e 100644
--- a/src/components/flags/rw.vue
+++ b/src/components/flags/rw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8e49652b-2223-4d47-b78f-c6544e7b4707">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8e49652b-2223-4d47-b78f-c6544e7b4707)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="m0 378.5 254.1-22.1L512 378.5V512H0z" />
       <path fill="#ffda44" d="m0 256.1 255-30.3 257 30.3v122.4H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sa.vue b/src/components/flags/sa.vue
index 77984ba..8a8577f 100644
--- a/src/components/flags/sa.vue
+++ b/src/components/flags/sa.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="3823000d-3137-46ed-b6df-db13d7c729d8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#3823000d-3137-46ed-b6df-db13d7c729d8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v512H0z" />
       <g fill="#eee">
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sami.vue b/src/components/flags/sami.vue
index 9c56eae..22beabf 100644
--- a/src/components/flags/sami.vue
+++ b/src/components/flags/sami.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fb88d310-ff7c-4f7c-bf94-ca0b5060be17">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fb88d310-ff7c-4f7c-bf94-ca0b5060be17)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M199 0h32l32 256-32 256h-32l-32-256Z" />
       <path fill="#496e2d" d="M167 0h32v512h-32l-32-256Z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sb.vue b/src/components/flags/sb.vue
index fe0c483..3d3ac82 100644
--- a/src/components/flags/sb.vue
+++ b/src/components/flags/sb.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="817e89b2-6592-40c9-bc29-76320cf18fa2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#817e89b2-6592-40c9-bc29-76320cf18fa2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M512 512V23.6L256 255.9 23.6 512z" />
       <path fill="#0052b4" d="M0 0h488.4L256 256 0 488.4z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sc.vue b/src/components/flags/sc.vue
index 61482e6..46fc1ea 100644
--- a/src/components/flags/sc.vue
+++ b/src/components/flags/sc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="64cf18f9-3cf9-4ff6-a06f-e604c80bf0e2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#64cf18f9-3cf9-4ff6-a06f-e604c80bf0e2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0v332l150.9-138.5L225.2 0z" />
       <path fill="#ffda44" d="M273.1 253.3 512 0H225.2L0 332v80.2z" />
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sd.vue b/src/components/flags/sd.vue
index 2b8a6d4..804cbd7 100644
--- a/src/components/flags/sd.vue
+++ b/src/components/flags/sd.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8f12de6b-cbe8-4fc3-bb3b-c11b62d53f49">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8f12de6b-cbe8-4fc3-bb3b-c11b62d53f49)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M43.6 109.4 512 144.7v222.6L43.8 397.2z" />
       <path fill="#d80027" d="M0 0h512v144.7H111z" />
@@ -26,7 +26,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -40,11 +40,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/se.vue b/src/components/flags/se.vue
index 3c9da42..71aa031 100644
--- a/src/components/flags/se.vue
+++ b/src/components/flags/se.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c7a391fb-0946-4dcf-8a51-949f6225f557">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c7a391fb-0946-4dcf-8a51-949f6225f557)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sg.vue b/src/components/flags/sg.vue
index f0a5914..aeac732 100644
--- a/src/components/flags/sg.vue
+++ b/src/components/flags/sg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="97ac04e9-7dd1-447d-ab09-a617c9ee095d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#97ac04e9-7dd1-447d-ab09-a617c9ee095d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 256 257.7-51L512 256v256H0z" />
       <path fill="#d80027" d="M0 0h512v256H0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sh-ac.vue b/src/components/flags/sh-ac.vue
index d38961a..46d6e73 100644
--- a/src/components/flags/sh-ac.vue
+++ b/src/components/flags/sh-ac.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="98b3a50d-ecfc-446f-b6bb-5093258fcac2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#98b3a50d-ecfc-446f-b6bb-5093258fcac2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -56,7 +56,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -70,11 +70,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sh-hl.vue b/src/components/flags/sh-hl.vue
index c0dfb18..d2ef87a 100644
--- a/src/components/flags/sh-hl.vue
+++ b/src/components/flags/sh-hl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="e1fb5bc5-ed20-4a72-82ec-5fb265d31302">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#e1fb5bc5-ed20-4a72-82ec-5fb265d31302)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -41,7 +41,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -55,11 +55,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sh-ta.vue b/src/components/flags/sh-ta.vue
index ca7e122..adedf93 100644
--- a/src/components/flags/sh-ta.vue
+++ b/src/components/flags/sh-ta.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="45d12773-c499-489f-8dda-c7f446ac4b85">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#45d12773-c499-489f-8dda-c7f446ac4b85)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -60,7 +60,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -74,11 +74,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/si.vue b/src/components/flags/si.vue
index 1e71b77..c06fb44 100644
--- a/src/components/flags/si.vue
+++ b/src/components/flags/si.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f966ebf5-836b-41cc-a7e9-d189e83aa08e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f966ebf5-836b-41cc-a7e9-d189e83aa08e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sk.vue b/src/components/flags/sk.vue
index a7ecbce..1a0e2ba 100644
--- a/src/components/flags/sk.vue
+++ b/src/components/flags/sk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="46274ac1-f6c8-4030-9938-454b0d4c13c1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#46274ac1-f6c8-4030-9938-454b0d4c13c1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="m0 160 256-32 256 32v192l-256 32L0 352z" />
       <path fill="#eee" d="M0 0h512v160H0z" />
@@ -41,7 +41,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -55,11 +55,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sl.vue b/src/components/flags/sl.vue
index 6ce6d1e..77e77c2 100644
--- a/src/components/flags/sl.vue
+++ b/src/components/flags/sl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="dbb2b2bd-5668-426a-914a-535326fecf0e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#dbb2b2bd-5668-426a-914a-535326fecf0e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#6da544" d="M0 0h512v167H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sm.vue b/src/components/flags/sm.vue
index e2f27ee..60d8d5e 100644
--- a/src/components/flags/sm.vue
+++ b/src/components/flags/sm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ae2b7a9c-b2c9-43fd-ba8f-3f4750844909">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ae2b7a9c-b2c9-43fd-ba8f-3f4750844909)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="m0 256 256-52.3L512 256v256H0z" />
       <path fill="#eee" d="M0 0h512v256H0z" />
@@ -41,7 +41,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -55,11 +55,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sn.vue b/src/components/flags/sn.vue
index 20283d8..4db23fc 100644
--- a/src/components/flags/sn.vue
+++ b/src/components/flags/sn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ad40e8a0-e8b5-439b-ad56-487ff7c5f4b4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ad40e8a0-e8b5-439b-ad56-487ff7c5f4b4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M144.8 0h222.4l32 260-32 252H144.8l-32.1-256z" />
       <path fill="#496e2d" d="M0 0h144.8v512H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/so.vue b/src/components/flags/so.vue
index c82c684..ca4f5de 100644
--- a/src/components/flags/so.vue
+++ b/src/components/flags/so.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ea07991f-d092-4fd1-842b-ed76beafcbbd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ea07991f-d092-4fd1-842b-ed76beafcbbd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/somaliland.vue b/src/components/flags/somaliland.vue
index 72c4cbf..6baa311 100644
--- a/src/components/flags/somaliland.vue
+++ b/src/components/flags/somaliland.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6682e626-cc51-4a09-b24e-3d4c472661fd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6682e626-cc51-4a09-b24e-3d4c472661fd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#496e2d" d="M0 0h512v167H0z" />
@@ -38,7 +38,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -52,11 +52,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/south_ossetia.vue b/src/components/flags/south_ossetia.vue
index a447dd2..1130624 100644
--- a/src/components/flags/south_ossetia.vue
+++ b/src/components/flags/south_ossetia.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9770e137-c19c-40b2-9fc9-9b7750a774e2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9770e137-c19c-40b2-9fc9-9b7750a774e2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/soviet_union.vue b/src/components/flags/soviet_union.vue
index d83bb2c..237cf5b 100644
--- a/src/components/flags/soviet_union.vue
+++ b/src/components/flags/soviet_union.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="51569ae4-74dc-4a3d-a415-228933b8e52f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#51569ae4-74dc-4a3d-a415-228933b8e52f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sr.vue b/src/components/flags/sr.vue
index fd9b22f..8564c5f 100644
--- a/src/components/flags/sr.vue
+++ b/src/components/flags/sr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5168098b-0d99-481a-a076-4cdd90b44fda">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5168098b-0d99-481a-a076-4cdd90b44fda)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ss.vue b/src/components/flags/ss.vue
index 989e976..e721ba7 100644
--- a/src/components/flags/ss.vue
+++ b/src/components/flags/ss.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="703ebb8a-0062-4c38-8e16-0f7ef8f3787d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#703ebb8a-0062-4c38-8e16-0f7ef8f3787d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/st.vue b/src/components/flags/st.vue
index b0a5aaa..3fd2a3f 100644
--- a/src/components/flags/st.vue
+++ b/src/components/flags/st.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="12a1316d-2abc-47b1-b264-da9c2a70bb0b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#12a1316d-2abc-47b1-b264-da9c2a70bb0b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#6da544"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sv.vue b/src/components/flags/sv.vue
index 1b4cd53..d00d27e 100644
--- a/src/components/flags/sv.vue
+++ b/src/components/flags/sv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5833add2-02f2-495a-9566-219faf1e9e1d">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5833add2-02f2-495a-9566-219faf1e9e1d)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sx.vue b/src/components/flags/sx.vue
index 4bb17d1..a5adfcf 100644
--- a/src/components/flags/sx.vue
+++ b/src/components/flags/sx.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="6e9d9f78-1900-42a9-8cda-a747ba90a46f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#6e9d9f78-1900-42a9-8cda-a747ba90a46f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v256l-265 45.2z" />
       <path fill="#0052b4" d="M210 256h302v256H0z" />
@@ -41,7 +41,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -55,11 +55,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sy.vue b/src/components/flags/sy.vue
index d5e6e06..c2cf318 100644
--- a/src/components/flags/sy.vue
+++ b/src/components/flags/sy.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="db7f861a-12a0-4237-9698-a15b9fbaa88c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#db7f861a-12a0-4237-9698-a15b9fbaa88c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#d80027" d="M0 0h512v167H0z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/sz.vue b/src/components/flags/sz.vue
index 4230252..a3c83e7 100644
--- a/src/components/flags/sz.vue
+++ b/src/components/flags/sz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d104ca52-b829-4a6a-be94-18103f1fd858">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d104ca52-b829-4a6a-be94-18103f1fd858)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -47,7 +47,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -61,11 +61,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tc.vue b/src/components/flags/tc.vue
index a2f402d..d71ec20 100644
--- a/src/components/flags/tc.vue
+++ b/src/components/flags/tc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="29234782-2a85-4714-999d-caf9b3415ed1">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#29234782-2a85-4714-999d-caf9b3415ed1)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path
@@ -48,7 +48,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -62,11 +62,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/td.vue b/src/components/flags/td.vue
index 3feb37c..dd7b583 100644
--- a/src/components/flags/td.vue
+++ b/src/components/flags/td.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="aaa685a9-958f-4273-b6ce-fac454d33c97">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#aaa685a9-958f-4273-b6ce-fac454d33c97)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
       <path fill="#026" d="M0 0h167v512H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tf.vue b/src/components/flags/tf.vue
index 6ce67e4..4be4dec 100644
--- a/src/components/flags/tf.vue
+++ b/src/components/flags/tf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5622e308-c015-4976-890c-e421d265644a">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5622e308-c015-4976-890c-e421d265644a)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path fill="#eee" d="M0 0h256v256H0z" />
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tg.vue b/src/components/flags/tg.vue
index ee223c6..f33b7a5 100644
--- a/src/components/flags/tg.vue
+++ b/src/components/flags/tg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9022a500-cbd8-41c8-9b99-a5cc8d6e2d71">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9022a500-cbd8-41c8-9b99-a5cc8d6e2d71)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#496e2d"
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/th.vue b/src/components/flags/th.vue
index 16a8a4a..fd98da4 100644
--- a/src/components/flags/th.vue
+++ b/src/components/flags/th.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="367bc3b5-5310-4bb6-884e-5ce7f879c6a8">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#367bc3b5-5310-4bb6-884e-5ce7f879c6a8)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tibet.vue b/src/components/flags/tibet.vue
index 5f874b8..e230182 100644
--- a/src/components/flags/tibet.vue
+++ b/src/components/flags/tibet.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="754868d5-e866-44a1-8455-635050e8b14b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#754868d5-e866-44a1-8455-635050e8b14b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m12.4 481.9 491.1.6-247-247.3z" />
       <path
@@ -37,7 +37,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -51,11 +51,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tj.vue b/src/components/flags/tj.vue
index 1872e6d..556447b 100644
--- a/src/components/flags/tj.vue
+++ b/src/components/flags/tj.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="17d04f78-0382-4ce3-93a8-06725f464a77">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#17d04f78-0382-4ce3-93a8-06725f464a77)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tk.vue b/src/components/flags/tk.vue
index 4d8c76a..2d871cf 100644
--- a/src/components/flags/tk.vue
+++ b/src/components/flags/tk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="20aa2ba3-cee0-4a99-9225-c9e34570f29c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#20aa2ba3-cee0-4a99-9225-c9e34570f29c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tl.vue b/src/components/flags/tl.vue
index 37d78db..ec29627 100644
--- a/src/components/flags/tl.vue
+++ b/src/components/flags/tl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1a8cee3c-7e6c-4835-b9ae-b4e7b4bbf722">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1a8cee3c-7e6c-4835-b9ae-b4e7b4bbf722)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 0 214 251.8L0 512l418-256z" />
       <path fill="#d80027" d="M512 0H0l367.3 256L0 512h512z" />
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tm.vue b/src/components/flags/tm.vue
index df9fdaf..e5a7024 100644
--- a/src/components/flags/tm.vue
+++ b/src/components/flags/tm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="37e63c38-d93c-4c85-a54f-4d7413d59e46">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#37e63c38-d93c-4c85-a54f-4d7413d59e46)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#496e2d"
@@ -60,7 +60,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -74,11 +74,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tn.vue b/src/components/flags/tn.vue
index 3ecb11f..ebc64c1 100644
--- a/src/components/flags/tn.vue
+++ b/src/components/flags/tn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9774e8ff-e8a1-453f-9441-7c3622375f43">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9774e8ff-e8a1-453f-9441-7c3622375f43)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <circle cx="256" cy="256" r="122.4" fill="#eee" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/to.vue b/src/components/flags/to.vue
index cc4f067..57d1bc7 100644
--- a/src/components/flags/to.vue
+++ b/src/components/flags/to.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d15468e3-1d64-4df5-9061-233c562812cb">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d15468e3-1d64-4df5-9061-233c562812cb)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 256 256 0h256v512H0z" />
       <path fill="#eee" d="M0 0h256v256H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/torres_strait_islands.vue b/src/components/flags/torres_strait_islands.vue
index 023bd5a..510c223 100644
--- a/src/components/flags/torres_strait_islands.vue
+++ b/src/components/flags/torres_strait_islands.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0eeacbd3-fc09-47f7-823a-d88024ff8945">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0eeacbd3-fc09-47f7-823a-d88024ff8945)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="m0 128 256-32 256 32v256l-256 32L0 384Z" />
       <path fill="#333" d="m0 96 256-32 256 32v32H0Z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tr.vue b/src/components/flags/tr.vue
index 8567d38..9013bf6 100644
--- a/src/components/flags/tr.vue
+++ b/src/components/flags/tr.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="39d5a341-a6de-4a26-baad-a07a14a0b5fd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#39d5a341-a6de-4a26-baad-a07a14a0b5fd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <g fill="#eee">
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/transnistria.vue b/src/components/flags/transnistria.vue
index b0d0c37..73ff585 100644
--- a/src/components/flags/transnistria.vue
+++ b/src/components/flags/transnistria.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="5c581784-22f1-41db-aa81-0ef31a5b66b5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#5c581784-22f1-41db-aa81-0ef31a5b66b5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#a2001d"
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tt.vue b/src/components/flags/tt.vue
index bcdc790..593b4eb 100644
--- a/src/components/flags/tt.vue
+++ b/src/components/flags/tt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="24aaee14-b08f-4933-9ccd-24f8f7f686df">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#24aaee14-b08f-4933-9ccd-24f8f7f686df)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 110.2 110.2 0H512v401.8L401.8 512H0z" />
       <path fill="#eee" d="M110.2 0H63L0 63v47.2L401.8 512H449l63-63v-47.2z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tv.vue b/src/components/flags/tv.vue
index 405224c..75a6c63 100644
--- a/src/components/flags/tv.vue
+++ b/src/components/flags/tv.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a0427a70-26d2-40c0-b052-ce7b5e265de5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a0427a70-26d2-40c0-b052-ce7b5e265de5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 256 256 0h256v512H0z" />
       <path
@@ -40,7 +40,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -54,11 +54,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tw.vue b/src/components/flags/tw.vue
index 424bcb0..ad27002 100644
--- a/src/components/flags/tw.vue
+++ b/src/components/flags/tw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a89dd552-cc03-4304-a4a2-70467e60a773">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a89dd552-cc03-4304-a4a2-70467e60a773)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 256 256 0h256v512H0z" />
       <path fill="#0052b4" d="M256 256V0H0v256z" />
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/tz.vue b/src/components/flags/tz.vue
index b4177b8..7dd1fd4 100644
--- a/src/components/flags/tz.vue
+++ b/src/components/flags/tz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9449a69c-344a-40d2-820e-9ea70d24e544">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9449a69c-344a-40d2-820e-9ea70d24e544)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ua.vue b/src/components/flags/ua.vue
index fc9d2a7..c8d3bb7 100644
--- a/src/components/flags/ua.vue
+++ b/src/components/flags/ua.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="528801b6-f885-47fc-a091-b59d68c790ba">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#528801b6-f885-47fc-a091-b59d68c790ba)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="m0 256 258-39.4L512 256v256H0z" />
       <path fill="#338af3" d="M0 0h512v256H0z" />
@@ -24,7 +24,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -38,11 +38,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ug.vue b/src/components/flags/ug.vue
index 537baae..349cd98 100644
--- a/src/components/flags/ug.vue
+++ b/src/components/flags/ug.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4ce45e2b-2d53-401b-a22e-b89652ec99c3">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4ce45e2b-2d53-401b-a22e-b89652ec99c3)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 85v342l256 31 256-31V85L256 53Z" />
       <path fill="#333" d="M0 0h512v85H0z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/united_nations.vue b/src/components/flags/united_nations.vue
index 660cd21..16d9746 100644
--- a/src/components/flags/united_nations.vue
+++ b/src/components/flags/united_nations.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="dabae478-38be-4722-999d-5b07d9697679">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#dabae478-38be-4722-999d-5b07d9697679)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#338af3" d="M0 0h512v512H0z" />
       <circle cx="256" cy="256" r="145" fill="#eee" />
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ak.vue b/src/components/flags/us-ak.vue
index 9ca6d26..f0fbdaf 100644
--- a/src/components/flags/us-ak.vue
+++ b/src/components/flags/us-ak.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bfb47132-17e2-4d94-931f-cdb000620982">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bfb47132-17e2-4d94-931f-cdb000620982)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-al.vue b/src/components/flags/us-al.vue
index 575793b..afccbfb 100644
--- a/src/components/flags/us-al.vue
+++ b/src/components/flags/us-al.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="37f32323-9afe-4239-96f6-8a1aa1391eec">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#37f32323-9afe-4239-96f6-8a1aa1391eec)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 68 68 0h376l68 68v376l-68 68H68L0 444Z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ar.vue b/src/components/flags/us-ar.vue
index 69572a7..df9cde5 100644
--- a/src/components/flags/us-ar.vue
+++ b/src/components/flags/us-ar.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bb164f24-5c31-4db2-bfda-8843e758b7e5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bb164f24-5c31-4db2-bfda-8843e758b7e5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path fill="#0052b4" d="M256 70 5 256l251 186 251-186Z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-az.vue b/src/components/flags/us-az.vue
index 280e507..9982f76 100644
--- a/src/components/flags/us-az.vue
+++ b/src/components/flags/us-az.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="aa6875a5-03f2-417b-a94b-ab93bfbbfc1e">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#aa6875a5-03f2-417b-a94b-ab93bfbbfc1e)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ca.vue b/src/components/flags/us-ca.vue
index 40892ac..6cff6ea 100644
--- a/src/components/flags/us-ca.vue
+++ b/src/components/flags/us-ca.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4c22ef31-bc26-4b44-9b87-f131fe3511e9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4c22ef31-bc26-4b44-9b87-f131fe3511e9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v416l-256 32L0 416Z" />
       <path fill="#6da544" d="m396 280-67-8-34 3-24-2-54-2-93 13-8 12h299z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-co.vue b/src/components/flags/us-co.vue
index 8bec60f..5faf8ae 100644
--- a/src/components/flags/us-co.vue
+++ b/src/components/flags/us-co.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fbe03ab5-bd7d-43df-a4bb-a1d7e5df84e2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fbe03ab5-bd7d-43df-a4bb-a1d7e5df84e2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-dc.vue b/src/components/flags/us-dc.vue
index 783dd0b..75d9f70 100644
--- a/src/components/flags/us-dc.vue
+++ b/src/components/flags/us-dc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="4c60289c-4e5d-41d9-ac6c-57f29e36aaea">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#4c60289c-4e5d-41d9-ac6c-57f29e36aaea)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-fl.vue b/src/components/flags/us-fl.vue
index 877de6e..8659f3b 100644
--- a/src/components/flags/us-fl.vue
+++ b/src/components/flags/us-fl.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="8dcf74db-0885-4f1a-b99d-eb393e7c8dff">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#8dcf74db-0885-4f1a-b99d-eb393e7c8dff)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 68 68 0h376l68 68v376l-68 68H68L0 444Z" />
       <path
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ga.vue b/src/components/flags/us-ga.vue
index dfbfd8a..0d8e82d 100644
--- a/src/components/flags/us-ga.vue
+++ b/src/components/flags/us-ga.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="c3a490d0-3dcd-494d-b6c4-bd00ed9168c7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#c3a490d0-3dcd-494d-b6c4-bd00ed9168c7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M512 0v171l-64 85 64 85v171H0V341L341 0Z" />
       <path fill="#eee" d="M341 171h171v170H341l-64-85z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-hi.vue b/src/components/flags/us-hi.vue
index 70f98db..f961336 100644
--- a/src/components/flags/us-hi.vue
+++ b/src/components/flags/us-hi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a42f27b8-ae28-45c7-93c2-321829eae7b4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a42f27b8-ae28-45c7-93c2-321829eae7b4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-in.vue b/src/components/flags/us-in.vue
index 84cf626..6caddb7 100644
--- a/src/components/flags/us-in.vue
+++ b/src/components/flags/us-in.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d35b468f-f353-4372-a23c-c916b02a5667">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d35b468f-f353-4372-a23c-c916b02a5667)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-mo.vue b/src/components/flags/us-mo.vue
index 636d778..18134cf 100644
--- a/src/components/flags/us-mo.vue
+++ b/src/components/flags/us-mo.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f75739b9-03c8-4019-9922-bf81fdb67c69">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f75739b9-03c8-4019-9922-bf81fdb67c69)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 170 256-64 256 64v172l-256 64L0 342Z" />
       <path fill="#d80027" d="M0 0h512v170H0Z" />
@@ -42,7 +42,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -56,11 +56,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ms.vue b/src/components/flags/us-ms.vue
index 7ad1d57..a1b741f 100644
--- a/src/components/flags/us-ms.vue
+++ b/src/components/flags/us-ms.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0bb0ad75-6f19-43fe-85fe-52a1c1981e2f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0bb0ad75-6f19-43fe-85fe-52a1c1981e2f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -39,7 +39,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -53,11 +53,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-nc.vue b/src/components/flags/us-nc.vue
index 0a70ff9..1809b8a 100644
--- a/src/components/flags/us-nc.vue
+++ b/src/components/flags/us-nc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="01a8e481-ae8b-4c7b-8fef-21838a5cecbc">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#01a8e481-ae8b-4c7b-8fef-21838a5cecbc)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h232l64 256-64 256H0Z" />
       <path fill="#d80027" d="M232 0h280v256l-140 64-140-64Z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-nm.vue b/src/components/flags/us-nm.vue
index cace7a9..e5e3371 100644
--- a/src/components/flags/us-nm.vue
+++ b/src/components/flags/us-nm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="902c1be7-d83d-47ea-a142-b81d039e6abe">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#902c1be7-d83d-47ea-a142-b81d039e6abe)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 0h512v512H0Z" />
       <path
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -43,11 +43,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-ri.vue b/src/components/flags/us-ri.vue
index df46603..ed4ad56 100644
--- a/src/components/flags/us-ri.vue
+++ b/src/components/flags/us-ri.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="660125ae-f403-413c-adad-c3d5eb28f059">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#660125ae-f403-413c-adad-c3d5eb28f059)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-tn.vue b/src/components/flags/us-tn.vue
index e53c0d4..a0b5aee 100644
--- a/src/components/flags/us-tn.vue
+++ b/src/components/flags/us-tn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="d5f019a1-0318-4bc3-8a1e-83e71774c63b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#d5f019a1-0318-4bc3-8a1e-83e71774c63b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M448 0h64v512h-64l-16-256Z" />
       <path fill="#eee" d="M416 0h32v512h-32l-16-256Z" />
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us-tx.vue b/src/components/flags/us-tx.vue
index 6ffaeeb..7429574 100644
--- a/src/components/flags/us-tx.vue
+++ b/src/components/flags/us-tx.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="ef6d3bb7-12d5-46c9-aa96-07a6f3743273">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#ef6d3bb7-12d5-46c9-aa96-07a6f3743273)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h167l64 256-64 256H0Z" />
       <path
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/us.vue b/src/components/flags/us.vue
index 7dc1761..081f5c4 100644
--- a/src/components/flags/us.vue
+++ b/src/components/flags/us.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f1f3e6b8-ffa0-4b59-9553-5efd4188b450">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f1f3e6b8-ffa0-4b59-9553-5efd4188b450)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/uy.vue b/src/components/flags/uy.vue
index b744a8f..af8ee54 100644
--- a/src/components/flags/uy.vue
+++ b/src/components/flags/uy.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="94ca7d5b-f2ed-4146-afba-02d2e7079d5b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#94ca7d5b-f2ed-4146-afba-02d2e7079d5b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#338af3"
@@ -35,7 +35,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -49,11 +49,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/uz.vue b/src/components/flags/uz.vue
index 95b1a61..2a07b19 100644
--- a/src/components/flags/uz.vue
+++ b/src/components/flags/uz.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="42be4171-43fe-4841-9eb2-c0c49d811fd5">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#42be4171-43fe-4841-9eb2-c0c49d811fd5)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#d80027"
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/va.vue b/src/components/flags/va.vue
index a2fef86..7e9a76e 100644
--- a/src/components/flags/va.vue
+++ b/src/components/flags/va.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="9efe0c19-7ac3-43cc-8127-4b12347e78f0">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#9efe0c19-7ac3-43cc-8127-4b12347e78f0)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#ffda44" d="M0 0h256l51.7 254.7L256 512H0z" />
       <path fill="#eee" d="M256 0h256v512H256z" />
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/vc.vue b/src/components/flags/vc.vue
index 4e8790d..4b19378 100644
--- a/src/components/flags/vc.vue
+++ b/src/components/flags/vc.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="82d07237-7f76-4028-87f8-62dccea4508c">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#82d07237-7f76-4028-87f8-62dccea4508c)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#ffda44"
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ve.vue b/src/components/flags/ve.vue
index 0f9e964..82a751e 100644
--- a/src/components/flags/ve.vue
+++ b/src/components/flags/ve.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a12be5a9-5ae3-495c-af0a-ef60e7ffe9e7">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a12be5a9-5ae3-495c-af0a-ef60e7ffe9e7)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#0052b4"
@@ -32,7 +32,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -46,11 +46,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/vg.vue b/src/components/flags/vg.vue
index d907c7c..a89d7a1 100644
--- a/src/components/flags/vg.vue
+++ b/src/components/flags/vg.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bf864b7a-eb1e-4f18-973f-8874a926aef2">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bf864b7a-eb1e-4f18-973f-8874a926aef2)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M256 0h256v512H0V256Z" />
       <path fill="#ffda44" d="m367.3 256-69.2 69.2a77.9 77.9 0 0 0 138.4 0z" />
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/vi.vue b/src/components/flags/vi.vue
index bf53b27..0525633 100644
--- a/src/components/flags/vi.vue
+++ b/src/components/flags/vi.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="7b3e2b85-0514-4546-967f-afc324d08794">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#7b3e2b85-0514-4546-967f-afc324d08794)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <g fill="#ffda44">
@@ -44,7 +44,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -58,11 +58,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/vn.vue b/src/components/flags/vn.vue
index e58c831..59e6368 100644
--- a/src/components/flags/vn.vue
+++ b/src/components/flags/vn.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="fd33ec0f-f9d0-47fa-9099-0f787a553766">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#fd33ec0f-f9d0-47fa-9099-0f787a553766)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 0h512v512H0z" />
       <path
@@ -27,7 +27,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -41,11 +41,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/vu.vue b/src/components/flags/vu.vue
index c4450b9..22ebf79 100644
--- a/src/components/flags/vu.vue
+++ b/src/components/flags/vu.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="b6d095bf-ab1b-4565-a36a-028e08428ebd">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#b6d095bf-ab1b-4565-a36a-028e08428ebd)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M512 222.6V0H0l215.6 239.4z" />
       <path fill="#6da544" d="M512 289.4V512H0l216.5-240z" />
@@ -36,7 +36,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -50,11 +50,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/wf.vue b/src/components/flags/wf.vue
index abd2cb4..bec04b8 100644
--- a/src/components/flags/wf.vue
+++ b/src/components/flags/wf.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="78560bb5-caca-4b40-813f-d5e81da3b7a4">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#78560bb5-caca-4b40-813f-d5e81da3b7a4)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M256 0h256v512H0V256Z" />
       <path fill="#eee" d="M0 0h256v256H0Z" />
@@ -30,7 +30,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -44,11 +44,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/wiphala.vue b/src/components/flags/wiphala.vue
index c77d723..67a726f 100644
--- a/src/components/flags/wiphala.vue
+++ b/src/components/flags/wiphala.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a03457f1-39c5-43c0-8232-e6b2886ccb14">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a03457f1-39c5-43c0-8232-e6b2886ccb14)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 73V0h73l439 439v73h-73Z" />
       <path
@@ -52,7 +52,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -66,11 +66,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ws.vue b/src/components/flags/ws.vue
index ca6a0c6..3462299 100644
--- a/src/components/flags/ws.vue
+++ b/src/components/flags/ws.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="0a572a95-48ac-4822-9549-626544928b75">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#0a572a95-48ac-4822-9549-626544928b75)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#d80027" d="M0 256 256 0h256v512H0z" />
       <path fill="#0052b4" d="M0 0h256v256H0z" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/xk.vue b/src/components/flags/xk.vue
index dfc1ece..1147d5f 100644
--- a/src/components/flags/xk.vue
+++ b/src/components/flags/xk.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="05b168ad-aeaa-40ea-ab06-bc6bb91567f9">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#05b168ad-aeaa-40ea-ab06-bc6bb91567f9)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#0052b4" d="M0 0h512v512H0z" />
       <path
@@ -31,7 +31,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -45,11 +45,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/xx.vue b/src/components/flags/xx.vue
index 0d1870b..d8e4fb2 100644
--- a/src/components/flags/xx.vue
+++ b/src/components/flags/xx.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="1a6738c5-83a1-422a-9b03-ef48b0cbbf8b">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#1a6738c5-83a1-422a-9b03-ef48b0cbbf8b)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <circle cx="253" cy="380" r="32" fill="#acabb1" />
@@ -28,7 +28,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -42,11 +42,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/ye.vue b/src/components/flags/ye.vue
index 624225b..8531083 100644
--- a/src/components/flags/ye.vue
+++ b/src/components/flags/ye.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="bd01a6ae-48fc-4f8f-8c79-b15e97fa1f30">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#bd01a6ae-48fc-4f8f-8c79-b15e97fa1f30)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z" />
       <path fill="#d80027" d="M0 0h512v167H0z" />
@@ -25,7 +25,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -39,11 +39,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/yorubaland.vue b/src/components/flags/yorubaland.vue
index 08926d2..20fd620 100644
--- a/src/components/flags/yorubaland.vue
+++ b/src/components/flags/yorubaland.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="f0758696-24bc-4fae-ae7a-1190531ab59f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#f0758696-24bc-4fae-ae7a-1190531ab59f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M384 0h128v128L352 352 128 512H0V384l160-224Z" />
       <path fill="#338af3" d="M0 384 384 0H0Z" />
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/yt.vue b/src/components/flags/yt.vue
index 164b25a..84821f2 100644
--- a/src/components/flags/yt.vue
+++ b/src/components/flags/yt.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="a2981124-fa65-460b-8d69-37f0044c4361">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#a2981124-fa65-460b-8d69-37f0044c4361)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#eee" d="M0 0h512v512H0z" />
       <path
@@ -43,7 +43,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -57,11 +57,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/za.vue b/src/components/flags/za.vue
index 64df721..b1e22e0 100644
--- a/src/components/flags/za.vue
+++ b/src/components/flags/za.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="606d1da1-39e9-418e-a8be-3bfd8d4ff5ff">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#606d1da1-39e9-418e-a8be-3bfd8d4ff5ff)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path
         fill="#eee"
@@ -34,7 +34,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -48,11 +48,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/zm.vue b/src/components/flags/zm.vue
index e59c079..1e21896 100644
--- a/src/components/flags/zm.vue
+++ b/src/components/flags/zm.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="14917d65-7844-4bba-8f2a-465460bf2c1f">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#14917d65-7844-4bba-8f2a-465460bf2c1f)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#496e2d" d="M0 0h512v256L256 512H0z" />
       <path
@@ -33,7 +33,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -47,11 +47,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/src/components/flags/zw.vue b/src/components/flags/zw.vue
index 7fb63f7..043b9ed 100644
--- a/src/components/flags/zw.vue
+++ b/src/components/flags/zw.vue
@@ -4,10 +4,10 @@
     class="svg-circle-flags"
     :viewBox="`${viewBoxOrigin} ${viewBoxOrigin} ${svgSize} ${svgSize}`"
   >
-    <mask :id="`${maskId}`">
+    <mask id="aebc1ef4-29d5-473a-8b0d-ff22abe23866">
       <circle cx="256" cy="256" r="256" fill="#fff" />
     </mask>
-    <g :mask="`url(#${maskId})`">
+    <g mask="url(#aebc1ef4-29d5-473a-8b0d-ff22abe23866)">
       <title v-if="props.flagName">{{ props.flagName }}</title>
       <path fill="#6da544" d="M31.4 0H512v512H31.4z" />
       <path
@@ -41,7 +41,7 @@
   </svg>
 </template>
 <script setup lang="ts">
-  import { computed, ref, onMounted } from 'vue';
+  import { computed } from 'vue';
 
   const props = withDefaults(
     defineProps<{
@@ -55,11 +55,7 @@
     }
   );
 
-  const maskId = ref<string>();
-
   const svgSize = computed(() => 512 + 2 * props.strokeWidth),
     viewBoxOrigin = computed(() => -props.strokeWidth),
     circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-  onMounted(() => (maskId.value = window.crypto.randomUUID()));
 </script>
diff --git a/test/globalSetup.js b/test/globalSetup.js
deleted file mode 100644
index 03aeb6b..0000000
--- a/test/globalSetup.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { randomUUID } from 'node:crypto';
-window.crypto.randomUUID = randomUUID;
diff --git a/utils/addBorderToFlags.js b/utils/addBorderToFlags.js
index fc2fd6d..fa239c3 100644
--- a/utils/addBorderToFlags.js
+++ b/utils/addBorderToFlags.js
@@ -2,6 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 import * as xmljs from 'xml-js';
+import { randomUUID } from 'node:crypto';
 import countryNames from './country-names.json' assert { type: 'json' };
 
 const caseDir = path.dirname(fileURLToPath(import.meta.url)),
@@ -126,15 +127,16 @@ function addStroke(xml) {
  */
 function uniqueIdMask(xml) {
   const mask = xml.elements[0].elements[0],
-    gMask = xml.elements[0].elements[1];
+    gMask = xml.elements[0].elements[1],
+    maskId = randomUUID();
 
   // Change mask element id
   mask.attributes.id = undefined;
-  mask.attributes[':id'] = '`${maskId}`';
+  mask.attributes['id'] = `${maskId}`;
 
   // Change g url id
   gMask.attributes.mask = undefined;
-  gMask.attributes[':mask'] = '`url(#${maskId})`';
+  gMask.attributes['mask'] = `url(#${maskId})`;
 
   return xml;
 }
@@ -148,7 +150,7 @@ function injectSvg(xmlSvg) {
   const template = `
     <template>{{svg}}</template>
     <script setup lang="ts">
-      import { computed, ref, onMounted } from 'vue';
+      import { computed } from 'vue';
 
       const props = withDefaults(
         defineProps<{
@@ -162,13 +164,9 @@ function injectSvg(xmlSvg) {
         }
       );
 
-      const maskId = ref<string>();
-
       const svgSize = computed(() => 512 + 2 * props.strokeWidth),
         viewBoxOrigin = computed(() => -props.strokeWidth),
         circleStroke = computed(() => 256 + props.strokeWidth / 2);
-
-      onMounted(() => maskId.value = window.crypto.randomUUID() )
     </script>
   `;
 
diff --git a/vite.config.ts b/vite.config.ts
index c7c8ab3..d914caf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,9 +27,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
-    setupFiles: [
-      'test/globalSetup.js'
-    ]
   },
   build: {
     cssCodeSplit: true,