@6thbridge/hexa 0.0.4 → 0.0.6

package/dist/output.css

@@ -1,5 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
 
+/* @import "../assets/fonts/GTWalsheimPro/stylesheet.css"; */
+
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -108,9 +110,7 @@
   --tw-contain-style:  ;
 }
 
-/*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -156,7 +156,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: Bricolage Grotesque, serif;
+  font-family: GT Walsheim Pro, sans-serif;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -572,10 +572,6 @@ video {
   pointer-events: auto;
 }
 
-.visible{
-  visibility: visible;
-}
-
 .fixed{
   position: fixed;
 }
@@ -683,6 +679,14 @@ video {
   display: none;
 }
 
+.aspect-square{
+  aspect-ratio: 1 / 1;
+}
+
+.\!h-14{
+  height: 3.5rem !important;
+}
+
 .\!h-5{
   height: 1.25rem !important;
 }
@@ -748,6 +752,10 @@ video {
   min-height: 80px;
 }
 
+.\!w-14{
+  width: 3.5rem !important;
+}
+
 .\!w-6{
   width: 1.5rem !important;
 }
@@ -874,6 +882,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-0\.5{
+  gap: 0.125rem;
+}
+
 .gap-1{
   gap: 0.25rem;
 }
@@ -1021,6 +1033,11 @@ video {
   border-color: rgb(222 222 222 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-300{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
 .border-primary-main{
   border-color: var(--color-primary);
 }
@@ -1061,8 +1078,8 @@ video {
   background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1));
 }
 
-.bg-black\/70{
-  background-color: rgb(0 0 0 / 0.7);
+.bg-black\/60{
+  background-color: rgb(0 0 0 / 0.6);
 }
 
 .bg-primary-main{
@@ -1092,10 +1109,6 @@ video {
   background-color: rgb(255 255 255 / 0.2);
 }
 
-.stroke-\[\#232528\]{
-  stroke: #232528;
-}
-
 .\!p-0{
   padding: 0px !important;
 }
@@ -1239,16 +1252,16 @@ video {
   line-height: 1.5rem;
 }
 
-.text-lg{
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-sm{
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.text-xl{
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs{
   font-size: 0.75rem;
   line-height: 1rem;
@@ -1274,6 +1287,14 @@ video {
   font-weight: 600;
 }
 
+.uppercase{
+  text-transform: uppercase;
+}
+
+.lowercase{
+  text-transform: lowercase;
+}
+
 .leading-\[1\.25rem\]{
   line-height: 1.25rem;
 }
@@ -1290,6 +1311,10 @@ video {
   line-height: 1;
 }
 
+.tracking-normal{
+  letter-spacing: 0em;
+}
+
 .tracking-tight{
   letter-spacing: -0.025em;
 }
@@ -1307,11 +1332,21 @@ video {
   color: rgb(25 25 25 / 0.5);
 }
 
+.text-\[\#62C554\]{
+  --tw-text-opacity: 1;
+  color: rgb(98 197 84 / var(--tw-text-opacity, 1));
+}
+
 .text-\[\#79818C\]{
   --tw-text-opacity: 1;
   color: rgb(121 129 140 / var(--tw-text-opacity, 1));
 }
 
+.text-\[\#8E98A8\]{
+  --tw-text-opacity: 1;
+  color: rgb(142 152 168 / var(--tw-text-opacity, 1));
+}
+
 .text-\[\#F04248\]{
   --tw-text-opacity: 1;
   color: rgb(240 66 72 / var(--tw-text-opacity, 1));
@@ -1327,6 +1362,11 @@ video {
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-500{
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
 .text-primary-main{
   color: var(--color-primary);
 }
@@ -1358,6 +1398,10 @@ video {
   caret-color: #DEDEDE;
 }
 
+.caret-primary-main{
+  caret-color: var(--color-primary);
+}
+
 .opacity-0{
   opacity: 0;
 }
@@ -1391,6 +1435,11 @@ video {
   outline-offset: 2px;
 }
 
+.\!ring-gray-200{
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1)) !important;
+}
+
 .filter{
   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);
 }
@@ -1467,6 +1516,76 @@ input[type="number"] {
   --color-primary-accent: #f5f7f9;
 }
 
+input:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px transparent inset !important;
+  -webkit-text-fill-color: inherit !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+  -webkit-background-clip: text !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+}
+
+input:-webkit-autofill:focus {
+  box-shadow: 0 0 0px 1000px transparent inset !important;
+  -webkit-text-fill-color: inherit !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+  -webkit-background-clip: text !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+}
+
+input:-webkit-autofill:hover {
+  box-shadow: 0 0 0px 1000px transparent inset !important;
+  -webkit-text-fill-color: inherit !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+  -webkit-background-clip: text !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+}
+
+input:-webkit-autofill:active {
+  box-shadow: 0 0 0px 1000px transparent inset !important;
+  -webkit-text-fill-color: inherit !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s !important;
+  transition: background-color 5000s ease-in-out 0s !important;
+  -webkit-background-clip: text !important;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+}
+
+.placeholder\:text-sm::-moz-placeholder{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.placeholder\:text-sm::placeholder{
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.placeholder\:font-normal::-moz-placeholder{
+  font-weight: 400;
+}
+
+.placeholder\:font-normal::placeholder{
+  font-weight: 400;
+}
+
 .placeholder\:text-\[\#79818C\]::-moz-placeholder{
   --tw-text-opacity: 1;
   color: rgb(121 129 140 / var(--tw-text-opacity, 1));
@@ -1487,6 +1606,16 @@ input[type="number"] {
   color: rgb(196 196 196 / var(--tw-text-opacity, 1));
 }
 
+.placeholder\:text-black::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.placeholder\:text-black::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
 .placeholder\:text-red-500::-moz-placeholder{
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -1497,6 +1626,16 @@ input[type="number"] {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.placeholder\:text-red-600::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
+.placeholder\:text-red-600::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
 .focus-within\:border-\[\#00B2A9\]:focus-within{
   --tw-border-opacity: 1;
   border-color: rgb(0 178 169 / var(--tw-border-opacity, 1));
@@ -1517,6 +1656,15 @@ input[type="number"] {
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
 
+.focus-within\:border-red-600:focus-within{
+  --tw-border-opacity: 1;
+  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
+}
+
+.focus-within\:border-primary-main:focus-within{
+  border-color: var(--color-primary);
+}
+
 .focus-within\:bg-\[\#F6F6F6\]:focus-within{
   --tw-bg-opacity: 1;
   background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1));
@@ -1558,6 +1706,16 @@ input[type="number"] {
   opacity: 0.8;
 }
 
+.focus\:border-gray-400:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+}
+
+.focus\:bg-white:focus{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
+
 .focus\:outline-none:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1577,6 +1735,10 @@ input[type="number"] {
   --tw-ring-offset-width: 2px;
 }
 
+.focus\:ring-offset-gray-200:focus{
+  --tw-ring-offset-color: #e5e7eb;
+}
+
 .focus-visible\:bg-transparent:focus-visible{
   background-color: transparent;
 }
@@ -1606,6 +1768,10 @@ input[type="number"] {
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:\!ring-offset-gray-200:focus-visible{
+  --tw-ring-offset-color: #e5e7eb !important;
+}
+
 .disabled\:\!pointer-events-none:disabled{
   pointer-events: none !important;
 }
@@ -1737,6 +1903,11 @@ input[type="number"] {
   border-color: rgb(146 153 162 / var(--tw-border-opacity, 1));
 }
 
+.dark\:border-\[\#d4d4d4\]:is(.dark *){
+  --tw-border-opacity: 1;
+  border-color: rgb(212 212 212 / var(--tw-border-opacity, 1));
+}
+
 .dark\:\!bg-red-50:is(.dark *){
   --tw-bg-opacity: 1 !important;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)) !important;
@@ -1765,6 +1936,16 @@ input[type="number"] {
   color: rgb(146 153 162 / var(--tw-text-opacity, 1));
 }
 
+.dark\:placeholder\:text-white:is(.dark *)::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.dark\:placeholder\:text-white:is(.dark *)::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
 .dark\:focus-within\:border-\[\#9299A2\]:focus-within:is(.dark *){
   --tw-border-opacity: 1;
   border-color: rgb(146 153 162 / var(--tw-border-opacity, 1));
@@ -1774,6 +1955,12 @@ input[type="number"] {
   background-color: transparent !important;
 }
 
+.dark\:focus-visible\:\!ring-0:focus-visible:is(.dark *){
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
 .dark\:disabled\:\!border-\[\#9299A2\]:disabled:is(.dark *){
   --tw-border-opacity: 1 !important;
   border-color: rgb(146 153 162 / var(--tw-border-opacity, 1)) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@6thbridge/hexa",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -47,6 +47,7 @@
     "lucide-react": "^0.474.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-otp-input": "^3.1.1",
     "react-phone-number-input": "^3.3.9",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"

package/tailwind.config.js

@@ -22,7 +22,7 @@ module.exports = {
         xxs: "10px",
       },
       fontFamily: {
-        sans: ["Bricolage Grotesque", "serif"],
+        sans: ["GT Walsheim Pro", "sans-serif"],
       },
     },
   },