@sikka/hawa 0.1.57 → 0.1.59

package/src/styles.css

@@ -681,6 +681,9 @@ video {
 .clickable-link:hover {
   color: hsl(var(--primary));
 }
+.ddm-w-parent {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
 .sr-only {
   position: absolute;
   width: 1px;
@@ -758,6 +761,9 @@ video {
 .bottom-4 {
   bottom: 1rem;
 }
+.bottom-5 {
+  bottom: 1.25rem;
+}
 .bottom-6 {
   bottom: 1.5rem;
 }
@@ -782,6 +788,12 @@ video {
 .left-4 {
   left: 1rem;
 }
+.left-5 {
+  left: 1.25rem;
+}
+.left-7 {
+  left: 1.75rem;
+}
 .right-0 {
   right: 0px;
 }
@@ -794,6 +806,12 @@ video {
 .right-4 {
   right: 1rem;
 }
+.right-5 {
+  right: 1.25rem;
+}
+.right-7 {
+  right: 1.75rem;
+}
 .top-0 {
   top: 0px;
 }
@@ -812,12 +830,21 @@ video {
 .top-4 {
   top: 1rem;
 }
+.top-5 {
+  top: 1.25rem;
+}
 .top-6 {
   top: 1.5rem;
 }
+.top-7 {
+  top: 1.75rem;
+}
 .top-\[22px\] {
   top: 22px;
 }
+.top-\[76px\] {
+  top: 76px;
+}
 .top-auto {
   top: auto;
 }
@@ -839,6 +866,9 @@ video {
 .z-\[100\] {
   z-index: 100;
 }
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
 .m-0 {
   margin: 0px;
 }
@@ -1123,12 +1153,21 @@ video {
 .h-\[150px\] {
   height: 150px;
 }
+.h-\[16px\] {
+  height: 16px;
+}
 .h-\[1px\] {
   height: 1px;
 }
 .h-\[2\.36rem\] {
   height: 2.36rem;
 }
+.h-\[20px\] {
+  height: 20px;
+}
+.h-\[21px\] {
+  height: 21px;
+}
 .h-\[25px\] {
   height: 25px;
 }
@@ -1204,9 +1243,6 @@ video {
 .w-10\/12 {
   width: 83.333333%;
 }
-.w-11 {
-  width: 2.75rem;
-}
 .w-14 {
   width: 3.5rem;
 }
@@ -1219,9 +1255,6 @@ video {
 .w-2\/4 {
   width: 50%;
 }
-.w-20 {
-  width: 5rem;
-}
 .w-24 {
   width: 6rem;
 }
@@ -1273,12 +1306,21 @@ video {
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[16px\] {
+  width: 16px;
+}
 .w-\[190px\] {
   width: 190px;
 }
 .w-\[1px\] {
   width: 1px;
 }
+.w-\[200px\] {
+  width: 200px;
+}
+.w-\[21px\] {
+  width: 21px;
+}
 .w-\[25px\] {
   width: 25px;
 }
@@ -1288,9 +1330,15 @@ video {
 .w-\[32px\] {
   width: 32px;
 }
+.w-\[37px\] {
+  width: 37px;
+}
 .w-\[400px\] {
   width: 400px;
 }
+.w-\[42px\] {
+  width: 42px;
+}
 .w-\[500px\] {
   width: 500px;
 }
@@ -1398,6 +1446,14 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.-translate-x-0 {
+  --tw-translate-x: -0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.-translate-x-0\.5 {
+  --tw-translate-x: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1410,6 +1466,14 @@ video {
   --tw-translate-y: -2rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-0\.5 {
+  --tw-translate-x: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-0 {
   --tw-translate-y: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2569,6 +2633,9 @@ video {
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
+.text-muted-foreground\/50 {
+  color: hsl(var(--muted-foreground) / 0.5);
+}
 .text-neutral-400 {
   --tw-text-opacity: 1;
   color: rgb(163 163 163 / var(--tw-text-opacity));
@@ -2722,6 +2789,9 @@ video {
 .outline-1 {
   outline-width: 1px;
 }
+.outline-4 {
+  outline-width: 4px;
+}
 .-outline-offset-1 {
   outline-offset: -1px;
 }
@@ -2731,6 +2801,9 @@ video {
 .outline-gray-300 {
   outline-color: #d1d5db;
 }
+.outline-primary {
+  outline-color: hsl(var(--primary));
+}
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2808,6 +2881,9 @@ video {
 .delay-300 {
   transition-delay: 300ms;
 }
+.duration-100 {
+  transition-duration: 100ms;
+}
 .duration-1000 {
   transition-duration: 1000ms;
 }
@@ -2820,6 +2896,9 @@ video {
 .will-change-\[opacity\2c transform\] {
   will-change: opacity,transform;
 }
+.will-change-transform {
+  will-change: transform;
+}
 @keyframes enter {
 
   from {
@@ -2852,6 +2931,9 @@ video {
 .zoom-in-95 {
   --tw-enter-scale: .95;
 }
+.duration-100 {
+  animation-duration: 100ms;
+}
 .duration-1000 {
   animation-duration: 1000ms;
 }
@@ -2951,18 +3033,6 @@ body {
 .placeholder\:text-muted-foreground::placeholder {
   color: hsl(var(--muted-foreground));
 }
-.after\:absolute::after {
-  content: var(--tw-content);
-  position: absolute;
-}
-.after\:left-\[2px\]::after {
-  content: var(--tw-content);
-  left: 2px;
-}
-.after\:top-\[2px\]::after {
-  content: var(--tw-content);
-  top: 2px;
-}
 .after\:mx-2::after {
   content: var(--tw-content);
   margin-left: 0.5rem;
@@ -2981,34 +3051,10 @@ body {
   content: var(--tw-content);
   height: 0.25rem;
 }
-.after\:h-5::after {
-  content: var(--tw-content);
-  height: 1.25rem;
-}
-.after\:h-9::after {
-  content: var(--tw-content);
-  height: 2.25rem;
-}
 .after\:w-10::after {
   content: var(--tw-content);
   width: 2.5rem;
 }
-.after\:w-5::after {
-  content: var(--tw-content);
-  width: 1.25rem;
-}
-.after\:w-9::after {
-  content: var(--tw-content);
-  width: 2.25rem;
-}
-.after\:rounded-full::after {
-  content: var(--tw-content);
-  border-radius: 9999px;
-}
-.after\:border::after {
-  content: var(--tw-content);
-  border-width: 1px;
-}
 .after\:border-b::after {
   content: var(--tw-content);
   border-bottom-width: 1px;
@@ -3018,26 +3064,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.after\:border-gray-300::after {
-  content: var(--tw-content);
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-.after\:bg-white::after {
-  content: var(--tw-content);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-.after\:transition-all::after {
-  content: var(--tw-content);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.after\:content-\[\'\'\]::after {
-  --tw-content: '';
-  content: var(--tw-content);
-}
 .first\:rounded-l:first-child {
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
@@ -3215,18 +3241,6 @@ body {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.hover\:ring-1:hover {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-.hover\:ring-buttonPrimary-500:hover {
-  --tw-ring-color: hsl(var(--button-primary-500));
-}
-.hover\:brightness-90:hover {
-  --tw-brightness: brightness(.9);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .hover\:drop-shadow-lg:hover {
   --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3424,28 +3438,10 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
-.peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
-  background-color: hsl(var(--button-primary-500));
-}
 .peer:checked ~ .peer-checked\:text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
-.peer:checked ~ .peer-checked\:after\:translate-x-\[2\.445rem\]::after {
-  content: var(--tw-content);
-  --tw-translate-x: 2.445rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
-  content: var(--tw-content);
-  --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.peer:checked ~ .peer-checked\:after\:border-white::after {
-  content: var(--tw-content);
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -3471,6 +3467,14 @@ body {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[state\=checked\]\:-translate-x-\[19px\][data-state=checked] {
+  --tw-translate-x: -19px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.data-\[state\=checked\]\:translate-x-\[19px\][data-state=checked] {
+  --tw-translate-x: 19px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3580,6 +3584,12 @@ body {
 .data-\[state\=active\]\:bg-primary[data-state=active] {
   background-color: hsl(var(--primary));
 }
+.data-\[state\=checked\]\:bg-primary[data-state=checked] {
+  background-color: hsl(var(--primary));
+}
+.data-\[state\=checked\]\:bg-primary-foreground[data-state=checked] {
+  background-color: hsl(var(--primary-foreground));
+}
 .data-\[state\=open\]\:bg-accent[data-state=open] {
   background-color: hsl(var(--accent));
 }
@@ -3793,6 +3803,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
+:is(.dark .dark\:bg-gray-950) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity));
+}
 :is(.dark .dark\:bg-green-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@@ -3811,10 +3825,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
-:is(.dark .dark\:text-black) {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
 :is(.dark .dark\:text-blue-500) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3968,9 +3978,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
-:is(.dark .peer:focus ~ .dark\:peer-focus\:ring-buttonPrimary-700) {
-  --tw-ring-color: hsl(var(--button-primary-700));
-}
 @media (min-width: 440px) {
 
   .xs\:max-w-full {

package/src/tailwind.css

@@ -130,7 +130,6 @@
     --ring: 240 4.9% 83.9%;
   }
 }
-
 @layer base {
   .link::after {
     content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
@@ -226,11 +225,13 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
-
 @layer components {
   .clickable-link {
     @apply cursor-pointer text-primary/80 underline underline-offset-4 transition-all hover:text-primary;
   }
+  .ddm-w-parent {
+    width: var(--radix-dropdown-menu-trigger-width);
+  }
 }
 @layer utilities {
   /* Chrome, Safari and Opera */

package/src/elements/HawaLogoButton.tsx

@@ -1,154 +0,0 @@
-import React, { FC } from "react"
-
-type LogoButtonTypes = {
-  lang?: any
-  logo?:
-    | "google"
-    | "github"
-    | "twitter"
-    | "wallet"
-    | "googlepay"
-    | "applepay"
-    | "stcpay"
-    | "visa/master"
-    | "paypal"
-    | "mada"
-  onClick?: any
-  buttonText?: any
-  direction?: "rtl" | "ltr"
-}
-export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
-  let isArabic = props.lang === "ar"
-  let logoElement: any = ""
-  switch (props.logo?.toLowerCase()) {
-    case "google":
-      logoElement = (
-        <img
-          src={
-            "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
-          }
-          className="h-6"
-        />
-      )
-      break
-    case "github":
-      logoElement = (
-        <svg width="32px" height="32px" viewBox="0 0 32 32" className="h-7 w-7">
-          <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
-        </svg>
-      )
-      break
-    case "twitter":
-      logoElement = (
-        <svg
-          version="1.1"
-          x="0px"
-          y="0px"
-          className="h-5 w-5"
-          viewBox="0 0 512.002 512.002"
-        >
-          <path
-            // style="fill:#73A1FB;"
-            d="M500.398,94.784c-8.043,3.567-16.313,6.578-24.763,9.023c10.004-11.314,17.631-24.626,22.287-39.193
-     c1.044-3.265-0.038-6.839-2.722-8.975c-2.681-2.137-6.405-2.393-9.356-0.644c-17.945,10.643-37.305,18.292-57.605,22.764
-     c-20.449-19.981-48.222-31.353-76.934-31.353c-60.606,0-109.913,49.306-109.913,109.91c0,4.773,0.302,9.52,0.9,14.201
-     c-75.206-6.603-145.124-43.568-193.136-102.463c-1.711-2.099-4.347-3.231-7.046-3.014c-2.7,0.211-5.127,1.734-6.491,4.075
-     c-9.738,16.709-14.886,35.82-14.886,55.265c0,26.484,9.455,51.611,26.158,71.246c-5.079-1.759-10.007-3.957-14.711-6.568
-     c-2.525-1.406-5.607-1.384-8.116,0.054c-2.51,1.439-4.084,4.084-4.151,6.976c-0.012,0.487-0.012,0.974-0.012,1.468
-     c0,39.531,21.276,75.122,53.805,94.52c-2.795-0.279-5.587-0.684-8.362-1.214c-2.861-0.547-5.802,0.456-7.731,2.638
-     c-1.932,2.18-2.572,5.219-1.681,7.994c12.04,37.591,43.039,65.24,80.514,73.67c-31.082,19.468-66.626,29.665-103.939,29.665
-     c-7.786,0-15.616-0.457-23.279-1.364c-3.807-0.453-7.447,1.795-8.744,5.416c-1.297,3.622,0.078,7.66,3.316,9.736
-     c47.935,30.735,103.361,46.98,160.284,46.98c111.903,0,181.907-52.769,220.926-97.037c48.657-55.199,76.562-128.261,76.562-200.451
-     c0-3.016-0.046-6.061-0.139-9.097c19.197-14.463,35.724-31.967,49.173-52.085c2.043-3.055,1.822-7.094-0.545-9.906
-     C507.7,94.204,503.76,93.294,500.398,94.784z"
-          />
-        </svg>
-      )
-      break
-    case "mada":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-          className="h-6"
-        />
-      )
-      break
-    case "stcpay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-          // height={20}
-          className="h-6"
-        />
-      )
-      break
-    case "visa/master":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-          className="h-6"
-        />
-      )
-      break
-    case "paypal":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-          className="h-6"
-        />
-      )
-      break
-    case "googlepay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-          className="h-6"
-        />
-      )
-      break
-    case "applepay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-          className="h-11"
-        />
-      )
-      break
-    case "wallet":
-      logoElement = (
-        <svg version="1.1" viewBox="0 0 223 223" className="h-6 w-6">
-          <g>
-            <path
-              d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
-           M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823
-          C182.338,118.225,176.597,123.967,169.515,123.967z"
-            />
-            <path
-              d="M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175
-          c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
-            />
-          </g>
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-
-  return (
-    <button
-      dir={props.direction}
-      // style={{ direction: isArabic ? "rtl" : "ltr" }}
-      onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded border bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
-    >
-      <div className="flex h-full flex-row items-center justify-end">
-        {logoElement}
-      </div>
-      <div style={{ width: 10 }} />
-      <div className="flex h-full flex-col items-start justify-center dark:text-black">
-        {props.buttonText}
-      </div>
-    </button>
-  )
-}