@sikka/hawa 0.0.173 → 0.0.174

package/dist/styles.css

@@ -375,11 +375,12 @@ 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;
@@ -719,6 +720,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -1016,6 +1021,9 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-2xs {
+  max-width: 250px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1372,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));
@@ -1388,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;
@@ -1433,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);
@@ -1467,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));
@@ -1487,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));
@@ -1773,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));
@@ -1854,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;
 }
@@ -1972,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);
 }
@@ -1995,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));
@@ -2046,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 {
@@ -2248,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));
@@ -2297,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));
@@ -2331,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";