@sikka/hawa 0.0.212 → 0.0.214

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -25,6 +25,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -35,6 +36,7 @@ html {
      tab-size: 4; /* 3 */
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
 }
 
 /*
@@ -375,10 +377,12 @@ video {
   display: none;
 }
   :root {
+    --layout-primary-700: #b7aff7;
     --layout-primary-500: #dfdcfc;
     --layout-primary-300: #e7e5fa;
     --layout-secondary: #d2cdfa;
 
+    --button-primary-300: #6555e3;
     --button-primary-500: #4c37eb;
     --button-primary-700: #2e1dac;
 
@@ -564,10 +568,7 @@ video {
   position: sticky;
 }
 .inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
 }
 .-left-1 {
   left: -0.25rem;
@@ -683,6 +684,10 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -825,6 +830,9 @@ video {
 .h-2\.5 {
   height: 0.625rem;
 }
+.h-20 {
+  height: 5rem;
+}
 .h-24 {
   height: 6rem;
 }
@@ -920,6 +928,9 @@ video {
 .w-2\/3 {
   width: 66.666667%;
 }
+.w-20 {
+  width: 5rem;
+}
 .w-24 {
   width: 6rem;
 }
@@ -1422,10 +1433,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
 .bg-buttonPrimary-300 {
   background-color: var(--button-primary-300);
 }
@@ -1566,10 +1573,17 @@ video {
 .p-5 {
   padding: 1.25rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1892,9 +1906,9 @@ video {
   --tw-ring-offset-width: 2px;
 }
 .transition {
-  transition-property: color, background-color, border-color, outline-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -1912,13 +1926,6 @@ body {
   font-family: "IBM Plex Sans Arabic", sans-serif;
 }
 
-.layoutBody_open {
-  background-color: red;
-  /* left: 10rem; */
-  position: fixed;
-  left: 56px;
-}
-
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
@@ -1961,6 +1968,11 @@ body {
   height: 1.25rem;
 }
 
+.after\:h-9::after {
+  content: var(--tw-content);
+  height: 2.25rem;
+}
+
 .after\:w-10::after {
   content: var(--tw-content);
   width: 2.5rem;
@@ -1971,6 +1983,11 @@ body {
   width: 1.25rem;
 }
 
+.after\:w-9::after {
+  content: var(--tw-content);
+  width: 2.25rem;
+}
+
 .after\:rounded-full::after {
   content: var(--tw-content);
   border-radius: 9999px;
@@ -2029,11 +2046,6 @@ body {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-buttonPrimary-500:hover {
   background-color: var(--button-primary-500);
 }
@@ -2075,8 +2087,7 @@ body {
 }
 
 .hover\:bg-layoutPrimary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(183 175 247 / var(--tw-bg-opacity));
+  background-color: var(--layout-primary-700);
 }
 
 .hover\:text-blue-600:hover {
@@ -2160,11 +2171,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-blue-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-blue-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
@@ -2185,9 +2191,14 @@ body {
   --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
 }
 
-.peer:checked ~ .peer-checked\:bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+.peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
+  background-color: var(--button-primary-500);
+}
+
+.peer:checked ~ .peer-checked\:after\:translate-x-\[2\.445rem\]::after {
+  content: var(--tw-content);
+  --tw-translate-x: 2.445rem;
+  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));
 }
 
 .peer:checked ~ .peer-checked\:after\:translate-x-full::after {
@@ -2202,260 +2213,238 @@ body {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.peer:focus ~ .peer-focus\:outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.peer:focus ~ .peer-focus\:ring-4 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.peer:focus ~ .peer-focus\:ring-blue-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-}
-
-[dir="rtl"] .rtl\:ml-1 {
+:is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
 
-[dir="rtl"] .rtl\:ml-2 {
+:is([dir="rtl"] .rtl\:ml-2) {
   margin-left: 0.5rem;
 }
 
-[dir="rtl"] .rtl\:flex-row-reverse {
+:is([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
 
-.dark .dark\:border-blue-500 {
+:is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-600 {
+:is(.dark .dark\:border-gray-600) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-700 {
+:is(.dark .dark\:border-gray-700) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-900 {
+:is(.dark .dark\:border-gray-900) {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 
-.dark .dark\:bg-blue-200 {
+:is(.dark .dark\:bg-blue-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-600 {
+:is(.dark .dark\:bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-700 {
+:is(.dark .dark\:bg-gray-700) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-800 {
+:is(.dark .dark\:bg-gray-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-900 {
+:is(.dark .dark\:bg-gray-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-green-200 {
+:is(.dark .dark\:bg-green-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-layoutPrimary-dark {
+:is(.dark .dark\:bg-layoutPrimary-dark) {
   --tw-bg-opacity: 1;
   background-color: rgb(37 27 115 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-red-200 {
+:is(.dark .dark\:bg-red-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-yellow-200 {
+:is(.dark .dark\:bg-yellow-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:text-black {
+:is(.dark .dark\:text-black) {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-blue-400 {
+:is(.dark .dark\:text-blue-400) {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-blue-500 {
+:is(.dark .dark\:text-blue-500) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-blue-800 {
+:is(.dark .dark\:text-blue-800) {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-200 {
+:is(.dark .dark\:text-gray-200) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-300 {
+:is(.dark .dark\:text-gray-300) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-400 {
+:is(.dark .dark\:text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-500 {
+:is(.dark .dark\:text-gray-500) {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-green-800 {
+:is(.dark .dark\:text-green-800) {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-500 {
+:is(.dark .dark\:text-red-500) {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-800 {
+:is(.dark .dark\:text-red-800) {
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-white {
+:is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-yellow-800 {
+:is(.dark .dark\:text-yellow-800) {
   --tw-text-opacity: 1;
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.dark .dark\:placeholder-gray-400::-moz-placeholder {
+:is(.dark .dark\:placeholder-gray-400)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
 
-.dark .dark\:placeholder-gray-400::placeholder {
+:is(.dark .dark\:placeholder-gray-400)::placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
 
-.dark .dark\:ring-offset-gray-800 {
+:is(.dark .dark\:ring-offset-gray-800) {
   --tw-ring-offset-color: #1f2937;
 }
 
-.dark .dark\:after\:border-gray-700::after {
+:is(.dark .dark\:after\:border-gray-700)::after {
   content: var(--tw-content);
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.dark .dark\:hover\:bg-buttonPrimary-700:hover {
+:is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
   background-color: var(--button-primary-700);
 }
 
-.dark .dark\:hover\:bg-gray-600:hover {
+:is(.dark .dark\:hover\:bg-gray-600:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-gray-700:hover {
+:is(.dark .dark\:hover\:bg-gray-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-gray-800:hover {
+:is(.dark .dark\:hover\:bg-gray-800:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:text-blue-500:hover {
+:is(.dark .dark\:hover\:text-blue-500:hover) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-white:hover {
+:is(.dark .dark\:hover\:text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:brightness-90:hover {
+:is(.dark .dark\:hover\:brightness-90:hover) {
   --tw-brightness: brightness(.9);
   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);
 }
 
-.dark .dark\:focus\:border-blue-500:focus {
+:is(.dark .dark\:focus\:border-blue-500:focus) {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.dark .dark\:focus\:ring-blue-500:focus {
+:is(.dark .dark\:focus\:ring-blue-500:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-blue-600:focus {
+:is(.dark .dark\:focus\:ring-blue-600:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-blue-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
-}
-
-.dark .dark\:focus\:ring-buttonPrimary-500:focus {
+:is(.dark .dark\:focus\:ring-buttonPrimary-500:focus) {
   --tw-ring-color: var(--button-primary-500);
 }
 
-.dark .dark\:focus\:ring-gray-600:focus {
+:is(.dark .dark\:focus\:ring-gray-600:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-gray-700:focus {
+:is(.dark .dark\:focus\:ring-gray-700:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-gray-800:focus {
+:is(.dark .dark\:focus\:ring-gray-800:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
-.dark .peer:focus ~ .dark\:peer-focus\:ring-blue-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
+:is(.dark .peer:focus ~ .dark\:peer-focus\:ring-buttonPrimary-700) {
+  --tw-ring-color: var(--button-primary-700);
 }
 
 @media (min-width: 440px) {
@@ -2529,4 +2518,4 @@ body {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
   }
-}
+}

package/es/blocks/Misc/Newsletter.d.ts

@@ -4,6 +4,7 @@ type TNewsletter = {
     texts: {
         wantToStayUpdated: string;
         subscribeToNewsletter: string;
+        submit: string;
     };
     handleNewsletterSub: (e: string) => void;
 };

package/es/blocks/Misc/NotFound.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
 type NotFoundTypes = {
     variant?: "outlined" | "contained" | "neobrutalism";
+    texts?: {
+        pageNotFound?: string;
+        ifLost?: string;
+        home?: string;
+    };
 };
 export declare const NotFound: React.FunctionComponent<NotFoundTypes>;
 export {};

package/es/elements/HawaPanelTabs.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
 type PanelTabsTypes = {
     defaultValue: any;
-    options: any;
+    options: [{
+        label: string;
+        value: string;
+    }];
     lang: any;
     handleChange: any;
     location: any;

package/es/elements/HawaRange.d.ts

@@ -4,7 +4,7 @@ type RangeTypes = {
     handleChange?: any;
     startElement?: any;
     endElement?: any;
-    label?: any;
+    label?: string;
     min?: any;
     max?: any;
 };

package/es/elements/HawaSelect.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 type SelectTypes = {
-    label?: any;
-    isCreatable?: any;
+    label?: string;
     options?: any[any];
-    isClearable?: any;
-    isMulti?: any;
-    isSearchable?: any;
+    isCreatable?: boolean;
+    isClearable?: boolean;
+    isMulti?: boolean;
+    isSearchable?: boolean;
     onChange?: any;
     helperText?: any;
     onInputChange?: any;

package/es/elements/HawaSettingsRow.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 type SettingsRowTypes = {
-    settingsLabel: any;
+    settingsLabel: string;
     settingsType: "text" | "radio" | "boolean" | "color" | "range";
     radioProps: {
         defaultValue: any;

package/es/elements/HawaSwitch.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type SwitchTypes = {
     text?: any;
+    size?: "small" | "normal" | "large";
 };
 export declare const HawaSwitch: React.FunctionComponent<SwitchTypes>;
 export {};

package/es/elements/HawaTable.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 type TableTypes = {
+    pagination?: boolean;
     columns: any[string];
     actions?: ActionItems[][];
     direction?: "rtl" | "ltr";

package/es/elements/HawaTabs.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 type TabsTypes = {
     options?: any;
-    onChangeTab?: any;
+    onChangeTab?: (option: any) => void;
     defaultValue?: any;
     orientation?: "horizontal" | "vertical";
     direction?: "rtl" | "ltr";

package/es/elements/InvoiceAccordion.d.ts

@@ -13,9 +13,9 @@ type InvoiceAccordionTypes = {
         amount: string;
         price: string;
     };
-    invoiceTitle: any;
-    invoiceSubtitle: any;
-    invoiceDescription?: any;
+    invoiceTitle: string;
+    invoiceSubtitle: string;
+    invoiceDescription?: string;
     invoiceActions?: {
         icon?: JSX.Element;
         label: string;
@@ -23,7 +23,7 @@ type InvoiceAccordionTypes = {
         isButton?: boolean;
         element?: any;
     }[][];
-    total: string;
+    total: any;
     direction?: "rtl" | "ltr";
     status?: "paid" | "pending" | "overdue";
 };