@zap-wunschlachen/wl-shared-components 1.0.25 → 1.0.26

package/src/components/MaintenanceBanner/MaintenanceBanner.vue

@@ -0,0 +1,127 @@
+<template>
+  <Background>
+    <!-- Main Content -->
+    <div :class="['maintenance-banner__content', { 'maintenance-banner__content--cocoon': isCocoon }]">
+      <!-- Illustration (only for dental) -->
+      <MaintenanceIllustration v-if="!isCocoon" class="maintenance-banner__illustration" />
+
+      <!-- Banner Text Content -->
+      <div class="maintenance-banner__text-content">
+        <div class="maintenance-banner__logo-section">
+          <div class="maintenance-banner__logo-headline">
+            <!-- Wordmark Logo -->
+            <Logo width="124" height="44" />
+
+            <!-- Headline -->
+            <h1 :style="{ color: siteColors['font_color_title_code'] }" class="maintenance-banner__title">{{ displayTitle }}</h1>
+          </div>
+
+          <div class="maintenance-banner__body-section">
+            <!-- Description -->
+            <p v-html="displayDescriptionHtml" :style="{ color: siteColors['font_color_code'] }" class="maintenance-banner__description"></p>
+
+            <!-- Contact Info -->
+            <div class="maintenance-banner__contact">
+              <div class="maintenance-banner__contact-item">
+                <PhoneIcon :style="{ color: siteColors['font_color_code'] }" class="maintenance-banner__icon" />
+                <span :style="{ color: siteColors['font_color_code'] }" class="maintenance-banner__contact-text">{{ displayPhone }}</span>
+              </div>
+              <div class="maintenance-banner__contact-item">
+                <EnvelopeIcon :style="{ color: siteColors['font_color_code'] }" class="maintenance-banner__icon" />
+                <span :style="{ color: siteColors['font_color_code'] }" class="maintenance-banner__contact-text">{{ displayEmail }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- CTA Button -->
+        <Button variant="outlined" :color="siteColors['font_color_code']" :label="displayButtonText" @click="callUs" class="maintenance-banner__button" />
+      </div>
+    </div>
+  </Background>
+</template>
+
+<script setup lang="ts">
+import { PhoneIcon, EnvelopeIcon } from '@heroicons/vue/24/outline';
+import Logo from '../Icons/Logo.vue';
+import MaintenanceIllustration from './MaintenanceIllustration.vue';
+import './MaintenanceBanner.css';
+import { siteColors } from '@/utils';
+import Button from '../Button/Button.vue';
+import { computed } from 'vue';
+import Background from '../Background/Background.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  phone: {
+    type: String,
+    default: ''
+  },
+  email: {
+    type: String,
+    default: ''
+  },
+  buttonText: {
+    type: String,
+    default: ''
+  }
+});
+
+const isCocoon = computed(() => siteColors['domain'] === 'domain-cocoon');
+
+const displayTitle = computed(() => {
+  if (props.title) return props.title;
+  return 'Wir polieren gerade nach';
+});
+
+const displayDescription = computed(() => {
+  if (props.description) return props.description;
+  return 'Unsere Webseite befindet sich aktuell in Wartung. Bitte schauen Sie später erneut vorbei.\nTermine können Sie in der Zwischenzeit gerne telefonisch oder per Mail vereinbaren.';
+});
+
+// Provide a safe HTML string for the description: escape HTML then replace newlines with <br/>
+const escapeHtml = (unsafe: string) => {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const displayDescriptionHtml = computed(() => {
+  const text = displayDescription.value || '';
+  const escaped = escapeHtml(text);
+  return escaped.replace(/\r?\n/g, '<br/>');
+});
+
+const displayPhone = computed(() => {
+  if (props.phone) return props.phone;
+  return isCocoon.value
+    ? '+4930233290390'
+    : '+49304952010';
+});
+
+const displayEmail = computed(() => {
+  if (props.email) return props.email;
+  return isCocoon.value
+    ? 'praxis@white-cocoon.de'
+    : 'info@wunschlachen.de';
+});
+
+const displayButtonText = computed(() => {
+  if (props.buttonText) return props.buttonText;
+  return 'Jetzt anrufen';
+});
+
+const callUs = () => {
+  window.location.href = `tel:${displayPhone.value.replace(/\s/g, '')}`;
+};
+</script>

package/src/components/MaintenanceBanner/MaintenanceIllustration.vue

@@ -0,0 +1,54 @@
+<template>
+  <svg v-if="siteColors['domain'] === 'domain-dental'" :width="width" :height="height" viewBox="0 0 304 304" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M32.0294 184.264C34.0571 182.061 37.3236 182.144 39.4422 183.343C41.5792 184.553 42.7738 186.682 43.3875 188.552C43.7804 189.749 43.1285 191.038 41.9315 191.431C40.7345 191.824 39.4456 191.172 39.0528 189.975C38.6263 188.676 37.9595 187.746 37.1949 187.313C36.4139 186.871 35.6192 187.104 35.3878 187.352L35.3302 187.421C35.0705 187.766 34.9301 188.432 34.9548 189.758L34.9625 190.053V190.054C35.0543 192.8 35.8308 198.128 36.2385 200.767L36.2483 200.818C36.3032 201.075 36.4627 201.288 36.6921 201.413C38.6376 202.475 41.403 203.482 42.8668 203.983C43.0718 204.053 43.2587 204.056 43.4166 204.016C47.3881 203.012 50.9499 201.289 53.4877 198.822C55.9763 196.402 57.5593 193.199 57.5593 188.95C57.5592 187.211 56.8664 185.709 55.5279 184.191C54.1426 182.619 52.1842 181.162 49.8483 179.551C47.5904 177.994 44.9713 176.288 42.6515 174.352C40.3817 172.458 38.2411 170.222 36.799 167.423L36.6615 167.15C32.99 159.696 36.7568 151.893 42.3925 147.039C48.0337 142.179 56.491 139.395 63.6957 142.648C64.8439 143.167 65.3544 144.518 64.836 145.666C64.3176 146.814 62.9665 147.325 61.8183 146.806C56.7901 144.536 50.2042 146.331 45.3698 150.495C40.53 154.665 38.3886 160.331 40.7544 165.134C41.8054 167.268 43.4878 169.108 45.5745 170.849C47.6842 172.61 50.0366 174.139 52.4386 175.795C54.7627 177.398 57.1528 179.134 58.9508 181.174C60.7956 183.267 62.1215 185.798 62.1215 188.95C62.1215 194.487 59.9995 198.854 56.6682 202.093C53.3873 205.283 49.0162 207.307 44.5287 208.441C44.5268 208.441 44.5249 208.442 44.523 208.442C43.4643 208.707 42.3855 208.637 41.4043 208.305C41.4018 208.304 41.3993 208.303 41.3969 208.302C39.9266 207.799 36.8282 206.685 34.5069 205.418V205.418C33.0121 204.603 31.991 203.145 31.7303 201.467L31.73 201.465C31.3348 198.908 30.506 193.284 30.4029 190.208L30.394 189.93C30.3534 188.472 30.3964 186.042 32.0276 184.266L32.0294 184.264Z" :fill="siteColors['font_color_code']"/>
+    <path d="M20.1471 144.194C25.2221 129.148 40.2284 116.937 57.3888 120.317C58.6249 120.56 59.4299 121.76 59.1864 122.996C58.9429 124.232 57.7434 125.037 56.5073 124.793C42.1823 121.972 29.0229 132.154 24.47 145.652C22.2187 152.327 22.1593 159.639 25.0807 166.322C27.9921 172.982 33.9629 179.241 44.1862 183.651C45.343 184.15 45.8763 185.492 45.3773 186.649C44.8783 187.806 43.536 188.339 42.3792 187.84C31.2695 183.048 24.3463 176.032 20.9004 168.149C17.4644 160.289 17.5845 151.792 20.1471 144.194Z" :fill="siteColors['font_color_code']"/>
+    <path d="M22.5688 64.0491C33.2699 47.3563 54.8836 38.5801 74.1922 43.0916C81.762 44.8604 89.2006 48.5409 96.0458 51.2421C103.071 54.0143 109.716 55.8901 116.54 54.8034C117.784 54.6053 118.954 55.4531 119.152 56.6972C119.35 57.9414 118.502 59.1108 117.258 59.3089C109.166 60.5976 101.553 58.3199 94.3712 55.486C87.0096 52.5809 80.2929 49.2022 73.1541 47.5341C55.7275 43.4624 36.0682 51.4449 26.4095 66.5114C16.7512 81.5774 17.7101 102.775 28.6844 116.91C29.4571 117.905 29.2768 119.338 28.2817 120.111C27.2866 120.883 25.8536 120.703 25.081 119.708C12.9218 104.048 11.8673 80.7423 22.5688 64.0491Z" :fill="siteColors['font_color_code']"/>
+    <path d="M180.205 215.956C180.487 214.728 181.711 213.962 182.939 214.244C184.167 214.526 184.933 215.751 184.651 216.978C181.789 229.425 178.029 241.657 173.083 253.566L173.083 253.567C170.595 259.554 167.129 265.975 162.557 270.929C157.973 275.896 152.108 279.554 144.912 279.527H144.911C138.73 279.503 133.39 276.656 129.152 272.61C124.924 268.572 121.681 263.245 119.604 257.929L119.236 256.975C115.498 247.158 113.751 238.609 110.765 228.903C110.394 227.699 111.07 226.422 112.274 226.052C113.478 225.681 114.755 226.357 115.125 227.561C118.381 238.145 119.922 246.208 123.853 256.268H123.854C125.74 261.096 128.649 265.821 132.303 269.31C135.948 272.791 140.222 274.946 144.929 274.964L145.186 274.963C150.569 274.899 155.214 272.158 159.205 267.834C163.271 263.428 166.489 257.547 168.87 251.816C173.706 240.173 177.392 228.188 180.205 215.956Z" :fill="siteColors['font_color_code']"/>
+    <path d="M155.015 37.7775C166.914 37.0774 177.08 41.1003 184.689 48.1516C199.845 62.1967 204.582 87.9088 193.821 111.594C193.3 112.741 191.947 113.249 190.8 112.728C189.653 112.206 189.146 110.854 189.667 109.707C199.755 87.5024 195.069 63.9905 181.588 51.4978C174.879 45.2803 165.925 41.7058 155.283 42.332C144.605 42.9604 132.063 47.8329 118.325 58.8369C111.769 64.0883 104.974 67.3719 97.823 68.3072C90.6547 69.2447 83.3332 67.7953 75.7882 63.9216C74.6675 63.3462 74.2255 61.9712 74.8009 60.8504C75.3763 59.7297 76.7513 59.2878 77.8721 59.8631C84.7345 63.3864 91.1273 64.5816 97.2313 63.7832C103.353 62.9826 109.388 60.1496 115.473 55.2759C129.733 43.8535 143.152 38.4756 155.015 37.7775Z" :fill="siteColors['font_color_code']"/>
+    <path d="M124.555 199.294C125.111 198.164 126.479 197.698 127.609 198.255C128.739 198.811 129.204 200.179 128.648 201.309C116.038 226.923 107.02 245.164 88.6697 265.895H88.6694C85.1598 269.859 80.9614 273.844 76.354 276.466C71.7283 279.1 66.475 280.473 61.0726 278.784V278.783C55.4647 277.03 51.4493 272.474 48.7536 267.129C46.0474 261.763 44.5249 255.332 44.0233 249.275C43.0479 237.497 42.9322 229.058 44.1115 218.352C44.2494 217.1 45.3763 216.197 46.6284 216.335C47.8807 216.472 48.784 217.6 48.6461 218.852C47.5077 229.187 47.6111 237.319 48.5701 248.899C49.0356 254.521 50.4451 260.351 52.8273 265.075C55.2199 269.819 58.4494 273.183 62.4341 274.429H62.4347C66.2206 275.613 70.1343 274.758 74.097 272.502C78.0779 270.236 81.8893 266.671 85.2534 262.871C103.152 242.651 111.938 224.922 124.555 199.294Z" :fill="siteColors['font_color_code']"/>
+    <path d="M45.4613 107.784C58.4836 106.972 70.2531 115.737 76.7335 126.361C78.4273 129.136 81.0666 135.557 83.9481 143.538C86.862 151.608 90.1043 161.505 92.9921 171.404C95.8774 181.295 98.4228 191.237 99.929 199.383C100.681 203.451 101.185 207.128 101.332 210.154C101.468 212.961 101.327 215.61 100.485 217.465L100.402 217.642C98.6359 221.229 95.1748 222.685 91.8593 223.25C88.5544 223.813 84.885 223.586 81.9887 223.384H81.9881C76.2792 222.986 70.5694 222.588 64.8598 222.189C59.1502 221.791 53.4406 221.392 47.7317 220.994V220.993C43.5194 220.701 40.7286 220.488 36.4503 218.466L36.4494 218.466C33.7087 217.169 32.4865 214.851 32.0998 212.285C31.7375 209.88 32.0705 207.064 32.4865 204.299C32.674 203.054 33.8358 202.196 35.0816 202.383C36.3274 202.571 37.1855 203.733 36.998 204.978C36.5746 207.792 36.3645 209.967 36.6113 211.605C36.8336 213.08 37.3719 213.855 38.399 214.341C41.6532 215.879 43.681 216.129 47.3022 216.39L48.0487 216.442L48.0492 216.443C53.7581 216.841 59.4679 217.239 65.1776 217.638C70.8871 218.036 76.5968 218.435 82.3056 218.833H82.3053C85.2699 219.039 88.4073 219.21 91.0927 218.752C93.7673 218.296 95.4797 217.311 96.3084 215.627L96.341 215.557C96.676 214.806 96.9102 213.153 96.7753 210.375C96.6423 207.637 96.1771 204.184 95.4428 200.212C93.976 192.279 91.4768 182.501 88.6122 172.682C85.7501 162.87 82.5372 153.064 79.6571 145.087C76.7445 137.021 74.2507 131.05 72.8392 128.738L72.8389 128.737C66.9038 119.007 56.5194 111.665 45.7453 112.337C40.4965 112.665 35.3496 115.521 31.8904 119.652C28.4369 123.775 26.8682 128.903 28.2409 133.736C28.5851 134.948 27.8816 136.209 26.6697 136.553C25.4578 136.898 24.1963 136.194 23.8521 134.982C21.9674 128.346 24.2281 121.695 28.3927 116.723C32.5517 111.757 38.8118 108.199 45.4613 107.784Z" :fill="siteColors['font_color_code']"/>
+    <path d="M49.0482 117.92C52.2793 117.801 55.6422 118.77 58.2942 120.716C63.4399 124.492 65.7957 130.793 66.4792 136.583L66.4795 136.584C67.0262 141.236 66.6655 146.268 64.5343 150.75L64.534 150.751C62.404 155.226 58.3305 159.102 53.1958 160.212L53.1961 160.212C48.0773 161.319 42.0627 159.24 39.3163 154.411C38.6935 153.316 39.0764 151.923 40.1715 151.3C41.2666 150.678 42.6594 151.061 43.2822 152.156C44.8912 154.985 48.7432 156.507 52.2317 155.753L52.2323 155.753C55.711 155.001 58.7608 152.265 60.4144 148.79C62.0664 145.316 62.4296 141.213 61.9485 137.118L61.8876 136.637C61.2143 131.681 59.2021 127.041 55.5952 124.394C53.8127 123.086 51.4711 122.396 49.2169 122.48C46.9709 122.563 44.9973 123.398 43.717 124.907C42.902 125.867 41.4624 125.986 40.5018 125.171C39.5411 124.356 39.423 122.916 40.238 121.955C42.5162 119.27 45.809 118.04 49.0482 117.92Z" :fill="siteColors['font_color_code']"/>
+    <path d="M38.6795 166.83C39.0122 165.615 40.2668 164.9 41.4818 165.232C56.702 169.4 72.8668 170.087 88.3842 167.224C89.6231 166.995 90.813 167.814 91.0416 169.053C91.2702 170.292 90.4511 171.482 89.2123 171.71C73.019 174.698 56.1593 173.981 40.2771 169.632C39.062 169.3 38.3468 168.045 38.6795 166.83Z" :fill="siteColors['font_color_code']"/>
+    <path d="M95.6063 193.186C96.8334 192.901 98.0594 193.664 98.3445 194.891C98.6296 196.119 97.8661 197.345 96.639 197.63C83.9184 200.586 70.6842 201.293 57.7215 199.713C56.471 199.561 55.5806 198.423 55.733 197.173C55.8854 195.922 57.0229 195.032 58.2734 195.184C70.7072 196.7 83.405 196.021 95.6063 193.186Z" :fill="siteColors['font_color_code']"/>
+    <path d="M225.903 97.9092C226.524 96.8127 227.916 96.4265 229.012 97.0467C230.109 97.6669 230.495 99.0588 229.875 100.155C226.116 106.8 221.534 113.612 214.916 118.252C208.324 122.875 200.107 124.785 193.462 122.498C192.271 122.088 191.638 120.79 192.048 119.599C192.458 118.407 193.756 117.774 194.947 118.184C199.823 119.863 206.521 118.567 212.296 114.517L212.297 114.516C218.051 110.482 222.223 104.416 225.903 97.9092Z" :fill="siteColors['font_color_code']"/>
+    <path d="M229.636 85.8051C233.884 79.5809 242.483 76.5493 249.649 79.298C256.805 82.0416 261.364 90.5018 259.15 97.9954L259.151 97.9957C258.536 100.079 257.284 102.09 255.604 103.538C253.914 104.993 251.639 105.991 249.089 105.638C245.79 105.181 243.402 102.654 242.202 100.152L242.201 100.151C241.014 97.6711 240.702 94.9493 240.436 92.7203C240.287 91.4694 241.18 90.3343 242.431 90.185C243.682 90.0357 244.817 90.9289 244.966 92.1798C245.248 94.5368 245.508 96.4925 246.315 98.1793L246.391 98.3332C247.194 99.906 248.479 100.948 249.714 101.119H249.715C250.647 101.248 251.655 100.918 252.626 100.081C253.607 99.2358 254.395 97.9914 254.775 96.7043L254.775 96.7037C256.272 91.6361 253.093 85.5038 248.016 83.5575H248.016C242.956 81.6166 236.542 83.7794 233.405 88.3767C230.274 92.9646 230.401 99.6071 233.552 104.348C234.249 105.397 233.963 106.813 232.914 107.511C231.865 108.208 230.449 107.922 229.751 106.873C225.651 100.701 225.383 92.0389 229.636 85.8051Z" :fill="siteColors['font_color_code']"/>
+    <path d="M266.547 79.3853C268.489 78.3248 271.343 76.9289 274.409 77.4653H274.41C276.683 77.8634 278.428 79.1871 279.693 80.7242C280.949 82.2517 281.819 84.0901 282.38 85.8078H282.38C282.788 87.0553 283.106 88.5843 283.017 90.1063C282.927 91.6452 282.397 93.3873 280.888 94.6501L280.887 94.6504C279.621 95.709 277.925 96.423 276.728 96.8629L276.729 96.8632C274.116 97.8234 269.053 98.7236 266.204 99.1907L266.203 99.1904C263.783 99.5872 261.387 98.5443 260.002 96.5546V96.5543C259.171 95.3606 258.243 93.9129 257.793 92.9749L257.792 92.9734C256.996 91.3113 256.547 89.0534 257.423 86.9228C258.099 85.2774 259.388 84.1663 260.348 83.4212C262.31 81.8916 264.395 80.5579 266.547 79.3853ZM273.623 81.959C272.274 81.7232 270.7 82.3161 268.731 83.3906L268.73 83.3912C266.765 84.4623 264.891 85.664 263.15 87.0223C263.148 87.0234 263.147 87.0247 263.146 87.0258C262.287 87.6918 261.836 88.1867 261.643 88.6577L261.642 88.6583C261.418 89.2042 261.455 90.061 261.906 91.0024H261.906C262.186 91.5854 262.93 92.776 263.746 93.9473L263.747 93.9482C264.144 94.5192 264.808 94.7962 265.466 94.6884H265.466C268.444 94.2004 273.034 93.3605 275.155 92.581H275.155C276.275 92.1693 277.335 91.6731 277.961 91.1503C278.2 90.95 278.419 90.5843 278.462 89.8395C278.507 89.0774 278.344 88.1459 278.043 87.2249V87.224C277.604 85.8761 276.966 84.5909 276.169 83.6223C275.38 82.6632 274.528 82.1178 273.623 81.9593V81.959Z" :fill="siteColors['font_color_code']"/>
+    <path d="M274.464 105.21C274.464 103.565 273.988 102.518 273.396 101.803C272.773 101.049 271.888 100.504 270.862 100.124C269.837 99.7451 268.777 99.5701 267.948 99.4949C267.539 99.458 267.203 99.4466 266.975 99.4442C266.875 99.4431 266.796 99.4438 266.744 99.4447C266.701 99.448 266.657 99.4507 266.614 99.4516C262.923 99.5257 260.915 100.143 259.683 101.885C258.299 103.844 258.213 106.706 259.475 108.745C259.874 109.39 259.926 110.192 259.614 110.883C259.302 111.575 258.667 112.066 257.919 112.194C256.446 112.445 255.144 113.102 254.299 114.053L254.299 114.053C253.451 115.01 253.107 116.28 253.344 117.294L253.345 117.295C253.621 118.475 254.752 119.632 256.326 120.189C257.903 120.748 259.755 120.752 261.836 120.503L261.837 120.503C263.825 120.267 265.579 119.858 267.012 119.031C268.44 118.202 269.421 116.956 269.658 115.7C269.898 114.427 269.247 113.202 268.452 112.823C267.487 112.363 266.971 111.295 267.21 110.252C267.45 109.21 268.381 108.475 269.45 108.483C270.615 108.491 271.986 108.074 273.026 107.354C274.074 106.629 274.464 105.849 274.464 105.21ZM279.026 105.21C279.026 107.861 277.407 109.87 275.623 111.106C275.016 111.526 274.352 111.885 273.657 112.177C274.246 113.572 274.408 115.134 274.142 116.545C273.594 119.45 271.533 121.683 269.3 122.978L269.297 122.979C267.069 124.267 264.591 124.77 262.377 125.033C260.077 125.308 257.38 125.403 254.802 124.49C252.222 123.575 249.63 121.447 248.902 118.333C248.276 115.655 249.216 112.91 250.885 111.026L250.887 111.025C251.888 109.898 253.121 109.067 254.436 108.499C253.56 105.396 254.078 101.912 255.958 99.2517C258.525 95.62 262.552 94.9823 266.396 94.8935C266.414 94.8922 266.432 94.8905 266.45 94.8896V94.8923C266.45 94.8923 266.451 94.892 266.452 94.892C266.452 94.8895 266.452 94.8896 266.452 94.8896C266.452 94.8896 266.453 94.8894 266.454 94.8893C266.455 94.8893 266.457 94.8891 266.459 94.889C266.463 94.8889 266.467 94.8889 266.472 94.8887C266.482 94.8883 266.495 94.8878 266.51 94.8873C266.539 94.8862 266.579 94.8847 266.628 94.8837C266.725 94.8816 266.859 94.8804 267.024 94.8822C267.353 94.8857 267.813 94.9016 268.359 94.9511C269.439 95.0489 270.924 95.2825 272.446 95.8457C273.965 96.4083 275.625 97.3397 276.912 98.8953C278.229 100.488 279.026 102.583 279.026 105.21Z" :fill="siteColors['font_color_code']"/>
+    <path d="M235.921 118.341C236.607 117.284 238.02 116.984 239.077 117.67C240.134 118.356 240.434 119.769 239.748 120.825C231.781 133.096 217.374 140.86 202.743 140.767C201.483 140.759 200.468 139.731 200.476 138.472C200.484 137.212 201.512 136.197 202.772 136.205C215.848 136.288 228.802 129.307 235.921 118.341Z" :fill="siteColors['font_color_code']"/>
+    <path d="M249.15 26.1386C261.518 23.8289 274.418 24.3067 286.574 27.526H286.574C290.275 28.5048 295.043 30.1315 297.58 34.1528H297.58C299.983 37.9605 299.555 42.7034 297.9 46.3319C296.311 49.8167 288.736 64.5167 267.677 69.9614C266.458 70.2767 265.213 69.5436 264.898 68.3239C264.582 67.1042 265.316 65.8597 266.535 65.5444C285.709 60.5871 292.442 47.3054 293.749 44.4396L293.749 44.4387C294.988 41.7227 295.054 38.6982 293.722 36.5875L293.721 36.5872C292.225 34.2157 289.135 32.9224 285.408 31.9365H285.407C273.906 28.8905 261.691 28.4373 249.988 30.6227L249.989 30.623C245.764 31.4137 242.157 32.6805 240.438 35.3243L240.438 35.3246C238.734 37.9428 239.112 41.7357 240.619 45.5059C243.17 51.8854 247.926 57.4284 253.938 61.0053C255.021 61.6495 255.376 63.0494 254.732 64.1321C254.088 65.2147 252.688 65.5702 251.605 64.926C244.745 60.8444 239.312 54.5254 236.383 47.2001V47.1998C234.727 43.0561 233.651 37.3902 236.613 32.8367C239.487 28.4184 244.956 26.9234 249.149 26.1386H249.15Z" :fill="siteColors['font_color_code']"/>
+    <path d="M258.599 36.4217C264.448 35.3291 270.547 35.5548 276.296 37.0767L276.296 37.0764C277.987 37.5231 280.625 38.3584 282.07 40.6478L282.134 40.7517C283.455 42.9364 283.157 45.5244 282.296 47.4083L282.295 47.408C281.487 49.1818 277.786 56.2976 267.625 58.9241C266.405 59.2394 265.161 58.506 264.846 57.2863C264.53 56.0666 265.264 54.8223 266.483 54.5071C274.766 52.3662 277.623 46.6606 278.145 45.5148L278.146 45.5112C278.603 44.5112 278.534 43.5929 278.214 43.086L278.212 43.0839C277.808 42.4431 276.846 41.9406 275.131 41.4871L275.13 41.4868C270.034 40.138 264.619 39.9376 259.434 40.9065L259.432 40.9071C257.487 41.2685 256.34 41.7874 255.865 42.519L255.863 42.5211C255.423 43.1983 255.408 44.4263 256.057 46.0568C257.124 48.7256 259.122 51.0567 261.648 52.5592C262.73 53.2033 263.086 54.603 262.442 55.6856C261.798 56.7684 260.398 57.1242 259.315 56.4802C255.941 54.4728 253.266 51.3654 251.821 47.7504L251.82 47.7484C251.023 45.749 250.34 42.6479 252.038 40.035H252.038C253.668 37.5244 256.681 36.7778 258.599 36.4214V36.4217Z" :fill="siteColors['font_color_code']"/>
+    <path d="M253.313 58.8642C253.497 57.618 254.657 56.7572 255.903 56.9413C257.149 57.1255 258.01 58.2851 257.826 59.5313L254.274 83.5651C254.089 84.8114 252.93 85.6725 251.684 85.4883C250.437 85.3041 249.576 84.1443 249.761 82.898L253.313 58.8642Z" :fill="siteColors['font_color_code']"/>
+    <path d="M266.048 58.9635C266.177 57.7103 267.297 56.7987 268.551 56.9277C269.804 57.0567 270.715 58.1772 270.586 59.4304C270.287 62.3359 269.331 68.4201 268.464 73.7002C268.028 76.3572 267.611 78.8369 267.302 80.652C267.148 81.5595 267.02 82.3013 266.932 82.8164C266.888 83.0738 266.853 83.2747 266.829 83.4113C266.818 83.4796 266.808 83.532 266.802 83.5672C266.799 83.5847 266.797 83.5981 266.796 83.607C266.795 83.6114 266.794 83.6148 266.794 83.6171C266.794 83.6182 266.793 83.6192 266.793 83.6198V83.6207C266.578 84.862 265.397 85.6936 264.156 85.4783C262.914 85.2629 262.083 84.0822 262.298 82.841V82.8401C262.298 82.8396 262.298 82.8388 262.299 82.8377C262.299 82.8356 262.3 82.8323 262.3 82.8279C262.302 82.8192 262.304 82.8061 262.307 82.7887C262.313 82.754 262.322 82.7023 262.334 82.6346C262.357 82.4991 262.392 82.2992 262.436 82.0429C262.524 81.5303 262.651 80.7913 262.804 79.8868C263.112 78.0776 263.528 75.6072 263.963 72.9615C264.837 67.6359 265.766 61.703 266.048 58.9635Z" :fill="siteColors['font_color_code']"/>
+    <path d="M245.999 104.339C246.348 104.137 246.957 103.916 247.691 104.095C248.399 104.267 248.817 104.713 249.013 104.988C249.207 105.257 249.297 105.508 249.337 105.634C249.467 106.039 249.456 106.419 249.456 106.453C249.456 106.91 249.322 107.335 249.09 107.692C249.008 108.015 248.899 108.475 248.763 109.08C248.358 110.885 247.766 113.749 247.028 117.464C245.554 124.887 243.51 135.639 241.232 147.964C236.678 172.614 231.199 203.517 227.498 226.586C227.299 227.83 226.129 228.676 224.885 228.477C223.641 228.277 222.794 227.107 222.994 225.863C226.702 202.744 232.188 171.802 236.746 147.135C239.025 134.801 241.073 124.026 242.553 116.576C243.292 112.855 243.893 109.945 244.311 108.081C244.516 107.168 244.691 106.443 244.824 105.995C244.858 105.881 244.9 105.748 244.949 105.62C244.955 105.602 245.088 105.212 245.383 104.859C245.475 104.749 245.676 104.526 245.999 104.339Z" :fill="siteColors['font_color_code']"/>
+    <path d="M253.917 120.72C254.06 120.577 255.083 119.617 256.481 120.242C257.044 120.494 257.351 120.899 257.492 121.126C257.639 121.361 257.711 121.573 257.746 121.69C257.859 122.067 257.851 122.412 257.851 122.457C257.851 122.915 257.716 123.341 257.484 123.698C257.416 123.959 257.327 124.318 257.218 124.784C256.856 126.338 256.326 128.817 255.663 132.05C254.339 138.507 252.501 147.891 250.45 158.697C246.348 180.31 241.402 207.572 238.022 228.417C237.82 229.661 236.648 230.505 235.405 230.304C234.161 230.102 233.317 228.93 233.518 227.687C236.908 206.785 241.862 179.479 245.968 157.846C248.021 147.03 249.863 137.621 251.194 131.134C251.858 127.895 252.399 125.365 252.775 123.748C252.959 122.96 253.12 122.319 253.246 121.918C253.278 121.815 253.321 121.686 253.374 121.557C253.399 121.494 253.441 121.397 253.499 121.288C253.537 121.216 253.67 120.968 253.917 120.72Z" :fill="siteColors['font_color_code']"/>
+    <path d="M206.753 211.501C213.463 209.656 220.429 208.944 227.342 209.286C228.6 209.348 229.569 210.419 229.507 211.677C229.445 212.935 228.375 213.905 227.117 213.843C220.456 213.514 213.767 214.234 207.361 216.069L207.36 216.069C204.084 217.006 201.74 220.005 201.515 223.51C200.921 232.86 201.732 242.301 203.925 251.408C205.867 259.46 208.9 266.97 215.308 271.72L215.309 271.721C216.701 272.754 218.234 273.573 219.844 274.112H219.844C224.739 275.75 228.887 274.89 232.586 272.717C236.381 270.487 239.697 266.869 242.662 263.026L242.662 263.026C249.302 254.421 255.673 243.712 260.341 233.215L260.417 233.036C261.98 229.285 260.529 224.897 257.008 222.813L257.008 222.813C251.726 219.685 246.001 217.331 240.069 215.808C238.849 215.495 238.113 214.252 238.427 213.032C238.74 211.812 239.983 211.076 241.203 211.39C247.546 213.018 253.671 215.536 259.332 218.887H259.332C264.893 222.178 267.138 229.155 264.51 235.068V235.068C259.7 245.885 253.144 256.91 246.274 265.813L246.274 265.813C243.213 269.78 239.465 273.967 234.897 276.65C230.232 279.391 224.719 280.554 218.397 278.438C216.296 277.736 214.338 276.682 212.59 275.385V275.384C204.851 269.647 201.497 260.801 199.49 252.478V252.477C197.189 242.923 196.339 233.025 196.962 223.221V223.219C197.303 217.892 200.877 213.179 206.104 211.683L206.753 211.501Z" :fill="siteColors['font_color_code']"/>
+    <path d="M197.684 119.58C197.684 116.96 196.829 115.391 195.85 114.453C194.857 113.5 193.558 113.026 192.37 112.941L192.255 112.934C190.075 112.824 187.699 114.464 186.404 116.953C185.104 119.452 184.789 122.455 184.627 125.818C184.175 135.296 184.756 144.797 185.057 154.512C185.356 164.16 185.374 173.942 183.718 183.652C182.694 189.671 181.212 194.879 180.926 200.488C180.646 205.962 181.75 211.41 184.992 215.169C188.249 218.946 193.936 220.334 197.669 218.054C198.744 217.398 200.148 217.737 200.805 218.812C201.461 219.887 201.122 221.291 200.047 221.948C193.908 225.696 185.834 223.131 181.537 218.148C177.223 213.147 176.059 206.332 176.369 200.255C176.673 194.313 178.305 188.267 179.221 182.886L179.221 182.885C180.796 173.65 180.795 164.249 180.497 154.653C180.202 145.123 179.607 135.316 180.07 125.6V125.599C180.231 122.24 180.549 118.321 182.357 114.847C184.17 111.362 187.944 108.148 192.486 108.378L192.688 108.39C194.783 108.539 197.137 109.365 199.008 111.16C200.986 113.056 202.246 115.865 202.246 119.58C202.246 120.84 201.225 121.861 199.965 121.861C198.705 121.861 197.684 120.84 197.684 119.58Z" :fill="siteColors['font_color_code']"/>
+    <path d="M206.316 137.281C207.527 136.935 208.79 137.636 209.136 138.848C215.974 162.798 218.414 186.876 216.078 211.701C215.96 212.956 214.847 213.877 213.593 213.759C212.339 213.641 211.418 212.528 211.536 211.274C213.816 187.04 211.439 163.531 204.749 140.101C204.403 138.889 205.104 137.627 206.316 137.281Z" :fill="siteColors['font_color_code']"/>
+    <path d="M211.774 185.309C212.949 184.854 214.27 185.439 214.724 186.613C215.178 187.789 214.594 189.109 213.419 189.564C202.748 193.69 191.058 195.133 179.704 193.721C178.454 193.565 177.567 192.426 177.722 191.175C177.878 189.925 179.017 189.038 180.267 189.193C190.873 190.513 201.805 189.163 211.774 185.309Z" :fill="siteColors['font_color_code']"/>
+    <path d="M210.982 162.438C212.205 162.136 213.442 162.883 213.744 164.106C214.046 165.329 213.299 166.565 212.076 166.867C202.566 169.216 192.642 169.869 182.907 168.791C181.654 168.652 180.752 167.524 180.891 166.272C181.029 165.02 182.157 164.117 183.409 164.256C192.61 165.276 201.994 164.658 210.982 162.438Z" :fill="siteColors['font_color_code']"/>
+    <path d="M195.471 115.223C196.492 114.485 197.918 114.713 198.656 115.734C199.395 116.755 199.166 118.181 198.146 118.919C196.165 120.352 195.318 123.234 195.011 126.724C194.479 132.777 195.095 138.929 196.812 144.759L196.981 145.322L196.982 145.324C197.504 147.026 198.053 148.413 198.908 149.468C199.756 150.512 200.853 151.047 201.739 151.007H201.74C202.918 150.955 204.323 149.755 204.83 147.896C205.342 146.02 205.068 143.929 204.639 141.385C204.429 140.143 205.266 138.965 206.508 138.756C207.75 138.546 208.927 139.383 209.137 140.625C209.547 143.051 210.046 146.112 209.232 149.096C208.413 152.097 205.797 155.392 201.944 155.565C199.187 155.689 196.817 154.132 195.365 152.342C193.922 150.562 193.169 148.451 192.62 146.662V146.661C190.603 140.103 189.866 133.16 190.466 126.324C190.78 122.758 191.709 117.945 195.471 115.223Z" :fill="siteColors['font_color_code']"/>
+    <path d="M98.6385 104.05C105.563 100.996 113.23 99.66 120.781 100.188C122.037 100.275 122.985 101.365 122.897 102.622C122.809 103.879 121.719 104.826 120.463 104.739C113.651 104.263 106.725 105.47 100.48 108.224C99.3274 108.733 97.9806 108.21 97.4721 107.058C96.9638 105.905 97.486 104.559 98.6385 104.05Z" :fill="siteColors['font_color_code']"/>
+    <path d="M107.229 79.6025C109.264 79.166 111.112 80.1276 112.227 81.2198L112.332 81.3249C113.368 82.3868 113.977 83.6757 114.406 84.6186L114.628 85.1105C116.894 90.2021 118.452 95.6098 119.239 101.129C119.417 102.376 118.55 103.531 117.303 103.709C116.056 103.887 114.901 103.02 114.723 101.773C113.972 96.5081 112.461 91.3499 110.255 86.5112L110.254 86.5094C109.81 85.5328 109.466 84.9052 109.034 84.4778L108.966 84.4151C108.806 84.2738 108.632 84.1698 108.477 84.1116C108.303 84.0466 108.21 84.0583 108.186 84.0635L108.186 84.0632C108.133 84.0749 107.952 84.129 107.703 84.5933C107.437 85.0887 107.242 85.8029 107.141 86.589L107.141 86.5908C106.508 91.4778 107.181 96.5381 109.069 101.091C109.552 102.255 109 103.589 107.836 104.072C106.672 104.554 105.338 104.002 104.855 102.838C102.661 97.5489 101.881 91.6839 102.616 86.0048C102.756 84.9238 103.055 83.6057 103.683 82.4358C104.321 81.2485 105.43 79.992 107.225 79.6034L107.229 79.6025Z" :fill="siteColors['font_color_code']"/>
+    <path d="M138.81 98.8646C145.608 97.1337 152.837 97.0279 159.684 98.5634C160.913 98.8391 161.686 100.059 161.411 101.288C161.135 102.518 159.915 103.291 158.686 103.015C152.54 101.637 146.039 101.732 139.935 103.286C138.715 103.597 137.473 102.859 137.162 101.638C136.851 100.417 137.589 99.1755 138.81 98.8646Z" :fill="siteColors['font_color_code']"/>
+    <path d="M144.854 78.6058C146.82 78.3714 148.424 79.4918 149.311 80.6089C150.183 81.7081 150.61 82.999 150.895 83.8946L151.039 84.352C152.504 89.0884 153.33 94.0418 153.487 99.0269C153.526 100.286 152.538 101.339 151.278 101.379C150.019 101.418 148.967 100.43 148.927 99.1704C148.778 94.4436 147.974 89.75 146.549 85.2811V85.2805C146.256 84.3634 146.032 83.8174 145.737 83.4446C145.625 83.3036 145.502 83.2093 145.411 83.163C145.404 83.1596 145.398 83.1571 145.392 83.1544C145.345 83.1929 145.264 83.2744 145.156 83.4401C144.9 83.8308 144.673 84.4265 144.514 85.1091L144.514 85.11C143.524 89.3734 143.626 93.8948 144.804 98.0717C145.146 99.2842 144.44 100.545 143.228 100.887C142.016 101.229 140.755 100.523 140.413 99.3106C139.024 94.3874 138.907 89.0845 140.07 84.0776C140.292 83.121 140.676 81.9529 141.339 80.941C142.005 79.9232 143.132 78.8143 144.85 78.6064L144.854 78.6058Z" :fill="siteColors['font_color_code']"/>
+    <path d="M109.131 122.154C110.391 122.171 111.398 123.206 111.381 124.466C111.364 125.725 110.329 126.733 109.07 126.716C104.155 126.649 99.4044 130.742 98.7416 135.613C98.5717 136.861 97.4221 137.735 96.1738 137.566C94.9255 137.396 94.0511 136.246 94.2209 134.998C95.1944 127.843 101.911 122.056 109.131 122.154Z" :fill="siteColors['font_color_code']"/>
+    <path d="M100.904 127.933C101.497 127.353 102.358 127.14 103.153 127.377C117.376 131.622 132.541 132.68 147.222 130.497C147.23 130.496 147.239 130.495 147.247 130.494C149.294 130.189 151.33 129.822 153.354 129.391C154.586 129.128 155.798 129.914 156.06 131.147C156.322 132.379 155.536 133.59 154.304 133.853C152.691 134.196 151.07 134.501 149.443 134.768C146.989 143.923 141.86 153.888 135.493 160.794L135.493 160.794C132.89 163.617 129.489 166.669 125.103 167.624L125.103 167.623C118.922 168.971 112.747 165.656 109.142 161.113C105.536 156.57 104.007 150.891 103.131 145.642C102.246 140.34 101.647 135.039 100.302 130.17C100.081 129.37 100.312 128.514 100.904 127.933ZM105.616 132.796C106.462 136.881 107.001 141.12 107.631 144.89C108.47 149.915 109.843 154.657 112.716 158.277C115.588 161.896 120.137 164.037 124.132 163.166L124.133 163.166C127.071 162.526 129.662 160.389 132.139 157.702V157.702C137.529 151.854 142.049 143.442 144.498 135.459C131.521 136.961 118.266 136.061 105.616 132.796Z" :fill="siteColors['font_color_code']"/>
+    <path d="M122.843 132.825C123.361 131.677 124.712 131.166 125.86 131.684C134.163 135.43 140.151 143.355 140.581 152.766C140.638 154.025 139.664 155.092 138.406 155.149C137.147 155.206 136.081 154.233 136.023 152.974C135.68 145.444 130.876 138.952 123.984 135.843C122.836 135.325 122.325 133.974 122.843 132.825Z" :fill="siteColors['font_color_code']"/>
+    <path d="M138.676 152.31C141.897 148.146 147.35 138.097 146.489 133.288C137.949 133.726 128.414 135.052 125.807 133.893C130.09 136.208 137.861 141.488 138.676 152.31Z" :fill="siteColors['font_color_code']"/>
+  </svg>
+
+</template>
+
+<script setup lang="ts">
+import { siteColors } from '@/utils';
+defineProps({
+  width: {
+    type: [String, Number],
+    default: 304
+  },
+  height: {
+    type: [String, Number],
+    default: 304
+  }
+});
+</script>

package/src/components/Modal/Modal.css

@@ -1,6 +1,6 @@
-.wl-modal .v-overlay__scrim {
-  fill: rgba(217, 217, 217, 0.55) !important;
-  backdrop-filter: blur(4px) !important;
-  opacity: 1 !important;
-  background: transparent !important;
+.wl-modal .v-overlay__scrim {
+  fill: rgba(217, 217, 217, 0.55) !important;
+  backdrop-filter: blur(4px) !important;
+  opacity: 1 !important;
+  background: transparent !important;
 }

package/src/components/Modal/Modal.vue

@@ -1,23 +1,23 @@
-<template>
-  <teleport to="body" data-testid="root">
-    <v-dialog class="wl-modal" v-model="dialog" width="auto">
-      <slot name="content" :closeDialog="closeDialog"/>
-    </v-dialog>
-  </teleport>
-</template>
-
-<script setup>
-import { ref, defineExpose } from 'vue';
-import './Modal.css';
-
-const dialog = ref(false);
-
-function openDialog() {
-  dialog.value = true;
-}
-function closeDialog() {
-  dialog.value = false;
-}
-
-defineExpose({ openDialog, closeDialog });
+<template>
+  <teleport to="body" data-testid="root">
+    <v-dialog class="wl-modal" v-model="dialog" width="auto">
+      <slot name="content" :closeDialog="closeDialog"/>
+    </v-dialog>
+  </teleport>
+</template>
+
+<script setup>
+import { ref, defineExpose } from 'vue';
+import './Modal.css';
+
+const dialog = ref(false);
+
+function openDialog() {
+  dialog.value = true;
+}
+function closeDialog() {
+  dialog.value = false;
+}
+
+defineExpose({ openDialog, closeDialog });
 </script>

package/src/components/NotificationBubble/NotificationBubble.css

@@ -1,4 +1,4 @@
-.notification-bubble.v-btn:hover > .v-btn__overlay {
-  color: var(--Dental-Blue-0) !important;
-  background: var(--Dental-Blue-0) !important;
-}
+.notification-bubble.v-btn:hover > .v-btn__overlay {
+  color: var(--Dental-Blue-0) !important;
+  background: var(--Dental-Blue-0) !important;
+}

package/src/components/NotificationBubble/NotificationBubble.vue

@@ -1,90 +1,90 @@
-<template>
-  <v-btn
-    class="notification-bubble"
-    elevation="0"
-    :flat="true"
-    :color="color"
-    :size="size"
-    rounded="xl"
-    :variant="variant"
-    :readonly="readonly"
-    data-testid="root"
-  >
-    <!-- Render either text or vIcon based on the props -->
-    <h4 v-if="text" :style="{ color: textColor }">
-      {{ text }}
-    </h4>
-    <v-icon v-else :size="iconSize" :color="textColor" :icon="icon"></v-icon>
-  </v-btn>
-</template>
-
-<script setup>
-import './NotificationBubble.css';
-
-// Define the component props
-defineProps({
-  /**
-   * The background color of the component.
-   * Can be any valid CSS color string (hex, rgb, etc.).
-   * Default is an empty string, which means no background color will be applied.
-   */
-  color: {
-    type: String,
-    default: '',
-  },
-
-  /**
-   * The size of the component.
-   * Can be a string or a number representing the size in pixels or other CSS units.
-   * Default is '30'.
-   */
-  size: {
-    type: [String, Number],
-    default: '30',
-  },
-
-  /**
-   * The text displayed within the component.
-   * If no text is provided, it will be empty by default.
-   */
-  text: {
-    type: String,
-  },
-
-  /**
-   * The color of the text.
-   * Accepts any valid CSS color string (hex, rgb, etc.).
-   * Default is 'var(--Dental-Blue-0)', a custom CSS variable for the text color.
-   */
-  textColor: {
-    type: String,
-    default: 'var(--Dental-Blue-0)',
-  },
-
-  /**
-   * The name or path of the icon to be displayed in the component.
-   * This can be an icon name if using an icon library.
-   */
-  icon: {
-    type: String,
-  },
-
-  /**
-   * The size of the icon.
-   * Can be any valid CSS size value, such as '20' (pixels) by default.
-   */
-  iconSize: {
-    type: String,
-    default: '20',
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-
-  variant: {
-    type: String,
-    default: 'flat',
-  },
-});
-</script>
+<template>
+  <v-btn
+    class="notification-bubble"
+    elevation="0"
+    :flat="true"
+    :color="color"
+    :size="size"
+    rounded="xl"
+    :variant="variant"
+    :readonly="readonly"
+    data-testid="root"
+  >
+    <!-- Render either text or vIcon based on the props -->
+    <h4 v-if="text" :style="{ color: textColor }">
+      {{ text }}
+    </h4>
+    <v-icon v-else :size="iconSize" :color="textColor" :icon="icon"></v-icon>
+  </v-btn>
+</template>
+
+<script setup>
+import './NotificationBubble.css';
+
+// Define the component props
+defineProps({
+  /**
+   * The background color of the component.
+   * Can be any valid CSS color string (hex, rgb, etc.).
+   * Default is an empty string, which means no background color will be applied.
+   */
+  color: {
+    type: String,
+    default: '',
+  },
+
+  /**
+   * The size of the component.
+   * Can be a string or a number representing the size in pixels or other CSS units.
+   * Default is '30'.
+   */
+  size: {
+    type: [String, Number],
+    default: '30',
+  },
+
+  /**
+   * The text displayed within the component.
+   * If no text is provided, it will be empty by default.
+   */
+  text: {
+    type: String,
+  },
+
+  /**
+   * The color of the text.
+   * Accepts any valid CSS color string (hex, rgb, etc.).
+   * Default is 'var(--Dental-Blue-0)', a custom CSS variable for the text color.
+   */
+  textColor: {
+    type: String,
+    default: 'var(--Dental-Blue-0)',
+  },
+
+  /**
+   * The name or path of the icon to be displayed in the component.
+   * This can be an icon name if using an icon library.
+   */
+  icon: {
+    type: String,
+  },
+
+  /**
+   * The size of the icon.
+   * Can be any valid CSS size value, such as '20' (pixels) by default.
+   */
+  iconSize: {
+    type: String,
+    default: '20',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: 'flat',
+  },
+});
+</script>

package/src/components/OtpInput/OtpInput.css

@@ -1,39 +1,39 @@
-.wl-otp-input {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.wl-otp-input .phone-number {
-  text-decoration: underline;
-}
-
-.wl-otp-input .button-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 30px;
-  width: 80%;
-  padding-top: 43px;
-}
-
-.wl-otp-input .title-container {
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-  text-align: center;
-  gap: 10px;
-}
-
-.wl-otp-input .input-container {
-  padding-top: 60px;
-}
-
-.wl-otp-input .message-container {
-  padding-top: 16px;
-}
+.wl-otp-input {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.wl-otp-input .phone-number {
+  text-decoration: underline;
+}
+
+.wl-otp-input .button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  width: 80%;
+  padding-top: 43px;
+}
+
+.wl-otp-input .title-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  text-align: center;
+  gap: 10px;
+}
+
+.wl-otp-input .input-container {
+  padding-top: 60px;
+}
+
+.wl-otp-input .message-container {
+  padding-top: 16px;
+}