@kanda-libs/ks-design-library-new 0.0.38 → 0.0.39

package/src/styles/library.css

@@ -1022,26 +1022,38 @@ video {
   margin: auto;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-auto {
-  margin-top: auto;
+.mb-auto {
   margin-bottom: auto;
 }
 
-.mb-4 {
-  margin-bottom: 16px;
-}
-
 .mr-3 {
   margin-right: 12px;
 }
 
-.mb-auto {
-  margin-bottom: auto;
+.mt-12 {
+  margin-top: 48px;
+}
+
+.mb-6 {
+  margin-bottom: 24px;
+}
+
+.mr-2 {
+  margin-right: 8px;
+}
+
+.mb-4 {
+  margin-bottom: 16px;
 }
 
 .mt-4 {
@@ -1084,10 +1096,6 @@ video {
   margin-right: 32px;
 }
 
-.mr-2 {
-  margin-right: 8px;
-}
-
 .-ml-3 {
   margin-left: -12px;
 }
@@ -1124,6 +1132,10 @@ video {
   display: none;
 }
 
+.h-6 {
+  height: 24px;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1163,18 +1175,30 @@ video {
   height: 36px;
 }
 
-.w-screen {
-  width: 100vw;
+.min-h-9 {
+  min-height: 36px;
 }
 
-.w-8 {
-  width: 32px;
+.min-h-6 {
+  min-height: 24px;
 }
 
 .w-full {
   width: 100%;
 }
 
+.w-6 {
+  width: 24px;
+}
+
+.w-screen {
+  width: 100vw;
+}
+
+.w-8 {
+  width: 32px;
+}
+
 .w-7 {
   width: 28px;
 }
@@ -1183,6 +1207,14 @@ video {
   width: 50%;
 }
 
+.min-w-9 {
+  min-width: 36px;
+}
+
+.min-w-6 {
+  min-width: 24px;
+}
+
 .max-w-80 {
   max-width: 320px;
 }
@@ -1199,6 +1231,21 @@ video {
   flex-grow: 1;
 }
 
+.rotate-45 {
+  --tw-rotate: 45deg;
+  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));
+}
+
+.rotate-90 {
+  --tw-rotate: 90deg;
+  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));
+}
+
+.rotate-0 {
+  --tw-rotate: 0deg;
+  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));
+}
+
 .transform {
   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));
 }
@@ -1207,6 +1254,10 @@ video {
   cursor: pointer;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
@@ -1239,6 +1290,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-5 {
+  gap: 20px;
+}
+
 .gap-y-4 {
   row-gap: 16px;
 }
@@ -1272,6 +1327,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1280,10 +1339,6 @@ video {
   border-radius: 1rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -1324,6 +1379,16 @@ video {
   background-color: rgb(240 240 255 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 90 118 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(108 129 157 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(193 244 233 / var(--tw-bg-opacity));
@@ -1357,6 +1422,16 @@ video {
   padding: 16px;
 }
 
+.px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
 .px-4 {
   padding-left: 16px;
   padding-right: 16px;
@@ -1367,11 +1442,6 @@ video {
   padding-right: 8px;
 }
 
-.py-4 {
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
 .py-2 {
   padding-top: 8px;
   padding-bottom: 8px;
@@ -1382,11 +1452,6 @@ video {
   padding-bottom: 4px;
 }
 
-.px-3 {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
 .py-1\.75 {
   padding-top: 7px;
   padding-bottom: 7px;
@@ -1397,14 +1462,26 @@ video {
   padding-right: 0;
 }
 
-.pl-4 {
-  padding-left: 16px;
+.pr-2 {
+  padding-right: 8px;
 }
 
 .pt-2 {
   padding-top: 8px;
 }
 
+.pl-12 {
+  padding-left: 48px;
+}
+
+.pr-6 {
+  padding-right: 24px;
+}
+
+.pl-4 {
+  padding-left: 16px;
+}
+
 .pb-1 {
   padding-bottom: 4px;
 }
@@ -1434,6 +1511,16 @@ video {
   color: rgb(127 131 255 / var(--tw-text-opacity));
 }
 
+.text-neutral-000 {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(39 222 191 / var(--tw-text-opacity));
+}
+
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(13 27 46 / var(--tw-text-opacity));
@@ -1449,11 +1536,6 @@ video {
   color: rgb(108 129 157 / var(--tw-text-opacity));
 }
 
-.text-neutral-000 {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
 .text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgb(156 173 196 / var(--tw-text-opacity));
@@ -1471,6 +1553,12 @@ video {
   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);
 }
 
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2371,12 +2459,26 @@ Modified version of toast CSS to match designs
 }
 
 @media (min-width: 768px) {
+  .md\:text-32-40-em {
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 40px;
+  }
+
   .md\:text-16-24 {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
   }
 
+  .md\:mt-20 {
+    margin-top: 80px;
+  }
+
+  .md\:mb-10 {
+    margin-bottom: 40px;
+  }
+
   .md\:mb-3 {
     margin-bottom: 12px;
   }
@@ -2409,6 +2511,10 @@ Modified version of toast CSS to match designs
     min-width: 192px;
   }
 
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2417,6 +2523,11 @@ Modified version of toast CSS to match designs
     row-gap: 4px;
   }
 
+  .md\:px-16 {
+    padding-left: 64px;
+    padding-right: 64px;
+  }
+
   .md\:py-0 {
     padding-top: 0;
     padding-bottom: 0;