coinley-checkout 0.2.7 → 0.2.8

package/dist/style.css

@@ -499,6 +499,9 @@ video {
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -526,6 +529,9 @@ video {
 .z-50 {
   z-index: 50;
 }
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -533,6 +539,9 @@ video {
 .mb-1 {
   margin-bottom: 0.25rem;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -545,9 +554,6 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
-.mb-8 {
-  margin-bottom: 2rem;
-}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -563,30 +569,18 @@ video {
 .mt-12 {
   margin-top: 3rem;
 }
-.mt-16 {
-  margin-top: 4rem;
-}
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-24 {
-  margin-top: 6rem;
-}
 .mt-3 {
   margin-top: 0.75rem;
 }
-.mt-32 {
-  margin-top: 8rem;
-}
 .mt-4 {
   margin-top: 1rem;
 }
 .mt-6 {
   margin-top: 1.5rem;
 }
-.mt-9 {
-  margin-top: 2.25rem;
-}
 .block {
   display: block;
 }
@@ -617,16 +611,9 @@ video {
 .h-8 {
   height: 2rem;
 }
-.h-\[200px\] {
-  height: 200px;
-}
 .h-\[300px\] {
   height: 300px;
 }
-.h-min {
-  height: -moz-min-content;
-  height: min-content;
-}
 .min-h-screen {
   min-height: 100vh;
 }
@@ -657,38 +644,11 @@ video {
 .w-\[1000px\] {
   width: 1000px;
 }
-.w-\[100px\] {
-  width: 100px;
-}
-.w-\[180px\] {
-  width: 180px;
-}
-.w-\[300px\] {
-  width: 300px;
-}
-.w-\[350px\] {
-  width: 350px;
-}
-.w-\[400px\] {
-  width: 400px;
-}
 .w-full {
   width: 100%;
 }
-.max-w-\[170px\] {
-  max-width: 170px;
-}
-.max-w-\[230px\] {
-  max-width: 230px;
-}
-.max-w-\[350px\] {
-  max-width: 350px;
-}
-.max-w-\[370px\] {
-  max-width: 370px;
-}
-.max-w-\[480px\] {
-  max-width: 480px;
+.max-w-6xl {
+  max-width: 72rem;
 }
 .max-w-md {
   max-width: 28rem;
@@ -722,12 +682,18 @@ video {
 .cursor-pointer {
   cursor: pointer;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
@@ -743,12 +709,18 @@ video {
 .gap-16 {
   gap: 4rem;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
 .gap-4 {
   gap: 1rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-8 {
   gap: 2rem;
 }
@@ -768,28 +740,13 @@ video {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
-.gap-x-24 {
-  -moz-column-gap: 6rem;
-       column-gap: 6rem;
-}
-.gap-x-32 {
-  -moz-column-gap: 8rem;
-       column-gap: 8rem;
-}
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
 }
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
 .gap-y-2 {
   row-gap: 0.5rem;
 }
-.gap-y-4 {
-  row-gap: 1rem;
-}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -812,9 +769,6 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-2xl {
-  border-radius: 2rem;
-}
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -837,12 +791,19 @@ video {
 .border {
   border-width: 1px;
 }
+.border-2 {
+  border-width: 2px;
+}
 .border-4 {
   border-width: 4px;
 }
 .border-b {
   border-bottom-width: 1px;
 }
+.border-\[\#7042D2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(112 66 210 / var(--tw-border-opacity, 1));
+}
 .border-\[\#FF6A2B\] {
   --tw-border-opacity: 1;
   border-color: rgb(255 106 43 / var(--tw-border-opacity, 1));
@@ -870,13 +831,17 @@ video {
   --tw-border-opacity: 1;
   border-top-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
 }
-.bg-\[\#FF6A2B\] {
+.bg-\[\#7042D2\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 106 43 / var(--tw-bg-opacity, 1));
+  background-color: rgb(112 66 210 / var(--tw-bg-opacity, 1));
+}
+.bg-\[\#F1ECFB\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 236 251 / var(--tw-bg-opacity, 1));
 }
-.bg-black {
+.bg-\[\#FF6A2B\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 106 43 / var(--tw-bg-opacity, 1));
 }
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
@@ -907,10 +872,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
-}
 .bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
@@ -919,6 +880,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-900\/75 {
   background-color: rgb(17 24 39 / 0.75);
 }
@@ -941,19 +906,6 @@ video {
 .bg-yellow-900\/20 {
   background-color: rgb(113 63 18 / 0.2);
 }
-.bg-cover {
-  background-size: cover;
-}
-.bg-center {
-  background-position: center;
-}
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
-.object-cover {
-  -o-object-fit: cover;
-     object-fit: cover;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -966,9 +918,8 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.p-8 {
+  padding: 2rem;
 }
 .px-3 {
   padding-left: 0.75rem;
@@ -990,9 +941,9 @@ video {
   padding-left: 2.25rem;
   padding-right: 2.25rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 .py-12 {
   padding-top: 3rem;
@@ -1026,9 +977,6 @@ video {
 .pt-9 {
   padding-top: 2.25rem;
 }
-.pt-\[10px\] {
-  padding-top: 10px;
-}
 .text-left {
   text-align: left;
 }
@@ -1041,22 +989,10 @@ video {
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -1082,9 +1018,9 @@ video {
 .font-semibold {
   font-weight: 600;
 }
-.text-\[\#FF6A2B\] {
+.text-\[\#7042D2\] {
   --tw-text-opacity: 1;
-  color: rgb(255 106 43 / var(--tw-text-opacity, 1));
+  color: rgb(112 66 210 / var(--tw-text-opacity, 1));
 }
 .text-blue-300 {
   --tw-text-opacity: 1;
@@ -1166,16 +1102,19 @@ video {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity, 1));
 }
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+.opacity-80 {
+  opacity: 0.8;
 }
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --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);
 }
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1186,10 +1125,6 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1203,6 +1138,11 @@ video {
 
 /* Additional custom styles can go here */
 
+.hover\:bg-\[\#7042D2\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 66 210 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -1213,6 +1153,11 @@ video {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
@@ -1265,22 +1210,10 @@ video {
 
 @media (min-width: 768px) {
 
-  .md\:mb-32 {
-    margin-bottom: 8rem;
-  }
-
   .md\:mt-11 {
     margin-top: 2.75rem;
   }
 
-  .md\:mt-24 {
-    margin-top: 6rem;
-  }
-
-  .md\:mt-32 {
-    margin-top: 8rem;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -1293,12 +1226,12 @@ video {
     width: auto;
   }
 
-  .md\:flex-row {
-    flex-direction: row;
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  .md\:justify-end {
-    justify-content: flex-end;
+  .md\:flex-row {
+    flex-direction: row;
   }
 
   .md\:justify-around {
@@ -1314,15 +1247,6 @@ video {
          column-gap: 3rem;
   }
 
-  .md\:gap-y-0 {
-    row-gap: 0px;
-  }
-
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .md\:px-16 {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -1332,9 +1256,4 @@ video {
     padding-left: 8rem;
     padding-right: 8rem;
   }
-
-  .md\:px-48 {
-    padding-left: 12rem;
-    padding-right: 12rem;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coinley-checkout",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A React SDK for Coinley cryptocurrency payment processing",
   "main": "dist/coinley-checkout.umd.js",
   "module": "dist/coinley-checkout.es.js",
@@ -38,6 +38,9 @@
     "vite": "^4.5.12"
   },
   "dependencies": {
-    "qrcode.react": "^4.2.0"
+    "lucide-react": "^0.501.0",
+    "qrcode.react": "^4.2.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.5.1"
   }
 }