@sikka/hawa 0.0.172 → 0.0.174

package/dist/styles.css

@@ -375,16 +375,17 @@ video {
   display: none;
 }
   :root {
-    --layout-primary: #d2cdfa;
+    --layout-primary-500: #dfdcfc;
+    --layout-primary-300: #e7e5fa;
     --layout-secondary: #d2cdfa;
 
-    --button-primary: #4c37eb;
-    --button-primary-darker: #2e1dac;
+    --button-primary-500: #4c37eb;
+    --button-primary-700: #2e1dac;
 
     --button-secondary: #ffc011;
     --button-secondary-darker: #b48d24;
 
-    --border-radius: 8px;
+    --border-radius: 13px;
   }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
@@ -719,6 +720,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -900,6 +905,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-44 {
+  height: 11rem;
+}
 .h-96 {
   height: 24rem;
 }
@@ -986,12 +994,6 @@ video {
 .w-10\/12 {
   width: 83.333333%;
 }
-.w-80 {
-  width: 20rem;
-}
-.w-12 {
-  width: 3rem;
-}
 .min-w-min {
   min-width: -moz-min-content;
   min-width: min-content;
@@ -1019,6 +1021,9 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-2xs {
+  max-width: 250px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1161,11 +1166,6 @@ video {
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0px * var(--tw-space-y-reverse));
 }
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1226,6 +1226,9 @@ video {
 .rounded-none {
   border-radius: 0px;
 }
+.rounded-\[30px\] {
+  border-radius: 30px;
+}
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1377,10 +1380,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.border-secondary-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(89 116 27 / var(--tw-border-opacity));
-}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1393,23 +1392,22 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
-.border-buttonPrimary-default {
-  border-color: var(--button-primary);
+.border-buttonPrimary-500 {
+  border-color: var(--button-primary-500);
 }
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.border-b-primary-500 {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(61 147 249 / var(--tw-border-opacity));
+.border-b-buttonPrimary-500 {
+  border-bottom-color: var(--button-primary-500);
 }
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-.bg-layoutPrimary-default {
-  background-color: var(--layout-primary);
+.bg-layoutPrimary-500 {
+  background-color: var(--layout-primary-500);
 }
 .bg-white {
   --tw-bg-opacity: 1;
@@ -1438,8 +1436,8 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-buttonPrimary-default {
-  background-color: var(--button-primary);
+.bg-buttonPrimary-500 {
+  background-color: var(--button-primary-500);
 }
 .bg-buttonSecondary-default {
   background-color: var(--button-secondary);
@@ -1472,10 +1470,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
-.bg-layout-1200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 247 252 / var(--tw-bg-opacity));
-}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1492,10 +1486,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
-.bg-primary-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(196 222 253 / var(--tw-bg-opacity));
-}
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1526,6 +1516,9 @@ video {
 .bg-\[url\(\'https\:\/\/via\.placeholder\.com\/50\'\)\] {
   background-image: url('https://via.placeholder.com/50');
 }
+.bg-none {
+  background-image: none;
+}
 .bg-cover {
   background-size: cover;
 }
@@ -1619,10 +1612,6 @@ video {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -1666,9 +1655,6 @@ video {
 .align-middle {
   vertical-align: middle;
 }
-.font-plex {
-  font-family: IBM Plex Sans Arabic;
-}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1782,10 +1768,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-secondary-800 {
-  --tw-text-opacity: 1;
-  color: rgb(89 116 27 / var(--tw-text-opacity));
-}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1863,10 +1845,6 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
 }
-.ring-primary-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(196 222 253 / var(--tw-ring-opacity));
-}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -1981,10 +1959,6 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-buttonPrimary-darker:hover {
-  background-color: var(--button-primary-darker);
-}
-
 .hover\:bg-buttonSecondary-darker:hover {
   background-color: var(--button-secondary-darker);
 }
@@ -2004,6 +1978,14 @@ body {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-buttonPrimary-500:hover {
+  background-color: var(--button-primary-500);
+}
+
+.hover\:bg-layoutPrimary-300:hover {
+  background-color: var(--layout-primary-300);
+}
+
 .hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -2055,8 +2037,8 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.hover\:ring-buttonPrimary-default:hover {
-  --tw-ring-color: var(--button-primary);
+.hover\:ring-buttonPrimary-500:hover {
+  --tw-ring-color: var(--button-primary-500);
 }
 
 .hover\:brightness-90:hover {
@@ -2157,11 +2139,6 @@ body {
   flex-direction: row-reverse;
 }
 
-.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
-}
-
 .dark .dark\:border-gray-700 {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -2262,6 +2239,11 @@ body {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -2311,10 +2293,6 @@ body {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-buttonPrimary-darker:hover {
-  background-color: var(--button-primary-darker);
-}
-
 .dark .dark\:hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2345,9 +2323,8 @@ body {
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-primary-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(5 74 158 / var(--tw-ring-opacity));
+.dark .dark\:focus\:ring-buttonPrimary-500:focus {
+  --tw-ring-color: var(--button-primary-500);
 }
 
 .dark .dark\:focus\:ring-blue-500:focus {

package/es/elements/HawaChip.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 type TChipTypes = {
     label: string;
-    size: "small" | "normal" | "large";
+    size?: "small" | "normal" | "large";
     icon?: JSX.Element;
 };
 export declare const HawaChip: React.FunctionComponent<TChipTypes>;

package/es/elements/SubsectionList.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+type SubsectionListTypes = {
+    align?: any;
+    subsections: [
+        {
+            title: string;
+            sections: [
+                {
+                    label: string;
+                    action: () => void;
+                    icon?: any;
+                    value?: any;
+                }
+            ];
+        }
+    ];
+};
+export declare const SubsectionList: React.FunctionComponent<SubsectionListTypes>;
+export {};

package/es/elements/index.d.ts

@@ -26,6 +26,7 @@ export * from "./HawaStats";
 export * from "./HawaSpinner";
 export * from "./HawaRadio";
 export * from "./HawaDrawer";
+export * from "./SubsectionList";
 export * from "./HawaTextField";
 export * from "./HawaCardInput";
 export * from "./HawaPinInput";