@sikka/hawa 0.0.270 → 0.0.271

package/src/elements/InvoiceAccordion.tsx

@@ -74,7 +74,6 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
               aria-hidden="true"
               height="2em"
               width="2em"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 fill-rule="evenodd"
@@ -110,7 +109,6 @@ export const InvoiceAccordion: FC<InvoiceAccordionTypes> = ({
                 viewBox="0 0 16 16"
                 height="1em"
                 width="1em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
               </svg>

package/src/elements/UsageCard.tsx

@@ -22,7 +22,6 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
               viewBox="0 0 16 16"
               height="1em"
               width="1em"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
             </svg>

package/src/elements/UserFeedback.tsx

@@ -68,7 +68,6 @@ export const UserFeedback: FC<ComponentTypes> = ({
             className="h-5 w-5"
             fill="currentColor"
             viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               fillRule="evenodd"

package/src/layout/Banner.tsx

@@ -108,7 +108,6 @@ export const HawaBanner: FC<BannerTypes> = ({
             className="h-5 w-5"
             fill="currentColor"
             viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
           >
             <path
               fillRule="evenodd"

package/src/layout/HawaAppLayout.tsx

@@ -142,7 +142,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -199,7 +198,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   className="absolute -left-1 h-10 w-10 text-gray-400"
                   fill="currentColor"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fillRule="evenodd"
@@ -438,7 +436,6 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                     stroke-linejoin="round"
                     height="1em"
                     width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <circle cx="12" cy="12" r="3"></circle>
                     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>

package/src/layout/HawaAppLayoutSimplified.tsx

@@ -146,7 +146,6 @@ export const HawaAppLayoutSimplified: React.FunctionComponent<
                   aria-hidden="true"
                   height="1.6em"
                   width="1.6em"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     fill-rule="evenodd"
@@ -505,7 +504,6 @@ const AvatarIcon = () => (
     className="absolute -left-1 h-10 w-10 text-gray-400"
     fill="currentColor"
     viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <path
       fillRule="evenodd"
@@ -542,7 +540,6 @@ const ArrowIcon = ({ pointing, color }) => {
       )}
       fill={color}
       viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         fillRule="evenodd"
@@ -563,7 +560,6 @@ const SettingsIcon = () => (
     stroke-linejoin="round"
     height="1em"
     width="1em"
-    xmlns="http://www.w3.org/2000/svg"
   >
     <circle cx="12" cy="12" r="3"></circle>
     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>

package/src/layout/HawaSiteLayout.tsx

@@ -125,7 +125,6 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
                 aria-hidden="true"
                 height="1.6em"
                 width="1.6em"
-                xmlns="http://www.w3.org/2000/svg"
               >
                 <path
                   fill-rule="evenodd"

package/src/styles.css

@@ -398,6 +398,13 @@ video {
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)
@@ -1501,9 +1508,6 @@ video {
 .rounded-\[30px\] {
   border-radius: 30px;
 }
-.rounded-\[3px\] {
-  border-radius: 3px;
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1734,10 +1738,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
 .bg-buttonPrimary-300 {
   background-color: var(--button-primary-300);
 }
@@ -1747,6 +1747,9 @@ video {
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
 }
+.bg-card {
+  background-color: hsl(var(--card));
+}
 .bg-cyan-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(21 94 117 / var(--tw-bg-opacity));
@@ -2171,6 +2174,9 @@ video {
 .text-buttonPrimary-500 {
   color: var(--button-primary-500);
 }
+.text-card-foreground {
+  color: hsl(var(--card-foreground));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2207,6 +2213,9 @@ video {
   --tw-text-opacity: 1;
   color: hsl(252 5.0% 40.7% / var(--tw-text-opacity));
 }
+.text-muted-foreground {
+  color: hsl(var(--muted-foreground));
+}
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -2783,9 +2792,24 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+:is([dir="ltr"] .ltr\:left-0) {
+  left: 0px;
+}
+:is([dir="ltr"] .ltr\:ml-auto) {
+  margin-left: auto;
+}
+:is([dir="ltr"] .ltr\:pl-\[0px\]) {
+  padding-left: 0px;
+}
 :is([dir="ltr"] .ltr\:pl-\[25px\]) {
   padding-left: 25px;
 }
+:is([dir="ltr"] .ltr\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:right-0) {
+  right: 0px;
+}
 :is([dir="rtl"] .rtl\:ml-1) {
   margin-left: 0.25rem;
 }
@@ -2802,8 +2826,17 @@ body {
 :is([dir="rtl"] .rtl\:flex-row-reverse) {
   flex-direction: row-reverse;
 }
-:is([dir="rtl"] .rtl\:pr-\[0px\]) {
-  padding-right: 0px;
+:is([dir="rtl"] .rtl\:pl-\[0px\]) {
+  padding-left: 0px;
+}
+:is([dir="rtl"] .rtl\:pl-\[25px\]) {
+  padding-left: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[25px\]) {
+  padding-right: 25px;
+}
+:is([dir="rtl"] .rtl\:pr-\[5px\]) {
+  padding-right: 5px;
 }
 :is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;

package/src/tailwind.css

@@ -17,6 +17,13 @@
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
 
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
     --border-radius: 10px;
     --border-radius-inner: calc(
       var(--border-radius) - calc(var(--border-radius) / 3)

package/tailwind.config.js

@@ -5,7 +5,7 @@ const LAYOUT_PRIMARY = "#EEF7FC";
 
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: "class",
+  darkMode: ["class"],
   theme: {
     fontFamily: {
       plex: ["IBM Plex Sans Arabic"]
@@ -93,6 +93,14 @@ module.exports = {
         inner: "var(--border-radius-inner)"
       },
       colors: {
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
         // #f6f5fe
         // #edebfd lighter
         // #d2cdfa