@sikka/hawa 0.0.276 → 0.0.278

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.276",
+  "version": "0.0.278",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -69,7 +69,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.28.0",
     "react-phone-input-2": "^2.15.1",
-    "react-select": "^5.3.2",
+    "react-select": "^5.7.4",
     "react-transition-group": "^4.4.2",
     "rollup": "^2.38.4",
     "rollup-plugin-cleaner": "^1.0.0",

package/src/blocks/Account/UserProfileForm.tsx

@@ -20,7 +20,6 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
 
   return (
     <HawaContainer>
-      {" "}
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit((e) => props.handleUpdateProfile(e))}>
           <Controller

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react"
+import { HawaContainer } from "../../layout"
 
 type UserSettingsFormTypes = {
   children: any
@@ -9,7 +10,7 @@ type UserSettingsFormTypes = {
 
 export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
-    <div>
+    <HawaContainer>
       <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
       <div className="flex flex-col gap-4 rounded bg-white p-2">
         {props.children}
@@ -23,6 +24,6 @@ export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
       >
         {props.saveSettingsText}
       </HawaButton> */}
-    </div>
+    </HawaContainer>
   )
 }

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -33,11 +33,11 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
           severity="error"
         />
       )}
-      <div className="mb-4">
+      <div className="mb-4 dark:text-white">
         <div className="text-lg font-bold">
           {props.texts.checkYourPhone ?? "Please check your phone"}
         </div>
-        <div className="text-gray-500">
+        <div className="text-muted-foreground">
           <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
           <span>{props.phoneNumber}</span>
         </div>{" "}
@@ -51,7 +51,7 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
         }}
       >
         <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-        <div className=" py-2 text-center text-xs">
+        <div className=" py-2 text-center text-xs text-muted-foreground">
           <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
           <span className="cursor-pointer text-buttonPrimary-500">
             {props.texts.resendCode ?? "Click to resend"}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -287,7 +287,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
             </HawaButton>
           </form>
         </FormProvider>
-        <div className="flex flex-row items-center justify-center gap-1 p-3  text-center text-sm font-semibold">
+        <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
           <span>{props.texts.existingUserText}</span>
           <span
             onClick={props.handleRouteToSignIn}

package/src/blocks/Payment/CheckoutForm.tsx

@@ -60,7 +60,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
   return (
     <HawaContainer>
       <div>
-        <div className="mb-2 text-center text-xl font-semibold">
+        <div className="mb-2 text-center text-xl font-semibold dark:text-white">
           {props.texts.orderDetails}
         </div>
         <div className="rounded border border-gray-300">
@@ -79,7 +79,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
         </div>
       </div>
       <div>
-        <div className="my-2 text-center text-xl font-semibold">
+        <div className="my-2 text-center text-xl font-semibold dark:text-white">
           {props.texts.billingAddress}
         </div>
 

package/src/blocks/Payment/Confirmation.tsx

@@ -10,8 +10,6 @@ type ConfirmationPageTypes = {
     successMessage: string
     orderDetails: string
     fasterPaymentNote: string
-    billingAddress: string
-    payNow: string
     yourOrderNumber: string
     emailLabel: string
     emailRequiredText: string
@@ -46,10 +44,10 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
   return (
     <HawaContainer>
       {" "}
-      <div className="py-5 text-center text-3xl font-bold">
+      <div className="py-5 text-center text-3xl font-bold dark:text-white">
         {props.confirmationTitle}
       </div>
-      <div className="py-5">
+      <div className="py-5 dark:text-white">
         <div className="mb-2 text-center">
           {props.texts.successMessage} <strong>{props.userEmail}</strong>
         </div>
@@ -81,11 +79,11 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
         <HawaButton color="primary" width="full" onClick={props.handleHome}>
           {props.texts.homePage}
         </HawaButton>
-        <div className="mb-5 mt-5 text-center text-sm">
+        <div className="mb-5 mt-5 text-center text-sm dark:text-white">
           {props.texts.fasterPaymentNote}
         </div>
         <a
-          className="w-fit cursor-pointer  text-center text-xs font-normal"
+          className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
           onClick={props.handleRefundPolicyLink}
         >
           {props.texts.refundPolicy}

package/src/elements/HawaButton.tsx

@@ -71,7 +71,7 @@ const colorStyles = {
     dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
   },
   outlined: {
-    default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:text-white",
+    default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
     primary: "text-black hover:bg-gray-50  dark:text-white",
     secondary:
       " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",

package/src/elements/HawaLogoButton.tsx

@@ -147,7 +147,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
+      className="my-2 border flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaPhoneInput.tsx

@@ -1,7 +1,35 @@
 import React, { useState, FC } from "react"
 import Countries from "../countries"
 import Select from "react-select"
-
+type MenuTypes = {
+  cx: any
+  children: any
+  getStyles: any
+  innerProps: any
+  innerRef: any
+}
+const Menu: FC<MenuTypes> = ({
+  cx,
+  children,
+  getStyles,
+  innerProps,
+  innerRef,
+  ...props
+}) => {
+  return (
+    <div
+      // width: 190,
+      // borderRadius: "0.5rem",
+      className="absolute z-50 w-[190px] rounded border bg-background"
+      // "absolute z-10 mt-2 flex  w-full flex-col  justify-start  rounded bg-white p-1 px-1.5 ring-1 ring-blue-200"
+      ref={innerRef}
+      {...innerProps}
+      // {...props}
+    >
+      {children}
+    </div>
+  )
+}
 type OptionTypes = {
   cx: any
   data: any
@@ -20,7 +48,7 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded p-1 px-2 hover:bg-blue-200"
+    className="m-2 flex cursor-pointer flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/30 dark:text-white dark:hover:bg-buttonPrimary-500/60"
     {...innerProps}
   >
     <div className="flex flex-row items-center justify-center gap-1">
@@ -45,45 +73,69 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
   return (
     <div className="mb-3 flex flex-col">
       {props.label && (
-        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
+        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
           {props.label}
         </label>
       )}
-      <div dir="ltr" className="flex flex-row">
+      <div dir="ltr" className="flex flex-row ">
         <Select
+          classNames={{
+            control: () => "w-[64px] border rounded-l bg-background text-right pr-2",
+            placeholder: (state) => "text-muted-foreground text-right pr-2",
+            input: (state) =>
+              "bg-transparent text-white  p-2  rounded-l text-[0.875rem]",
+            valueContainer: () => " rounded-l h-auto text-[0.875rem]",
+            // container: () => "bg-orange-400 border-none",
+            // control: () => "bg-blue-500",
+            // menu: () => "bg-red-900",
+          }}
           styles={{
-            input: (base) => ({
-              ...base,
-              fontSize: "0.875rem",
-              "input:focus": {
-                boxShadow: "none",
-              },
-              lineHeight: "1.25rem",
-              padding: "0.37rem",
-              paddingLeft: 0,
-            }),
-            singleValue: (base) => ({
+            // input: (base) => ({
+            //   ...base,
+            //   fontSize: "0.875rem",
+            //   "input:focus": {
+            //     boxShadow: "none",
+            //   },
+            //   lineHeight: "1.25rem",
+            //   padding: "0.37rem",
+            //   paddingLeft: 0,
+            //   textAlign: "right",
+            //   direction: "ltr",
+            // }),
+            // singleValue: (base) => ({
+            //   ...base,
+            //   fontSize: "0.875rem",
+            //   // textAlign: "right",
+            // }),
+            placeholder: (base) => ({
               ...base,
               fontSize: "0.875rem",
               textAlign: "right",
             }),
-            control: (base) => ({
-              ...base,
-              width: 64,
-              borderRadius: "0.5rem",
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-            }),
-            menu: (base) => ({
-              ...base,
-              width: 190,
-              borderRadius: "0.5rem",
-            }),
+            // control: (base) => ({
+            //   ...base,
+            //   width: 64,
+            //   borderRadius: "0.5rem",
+            //   borderTopRightRadius: 0,
+            //   borderBottomRightRadius: 0,
+            // }),
+            // menu: (base) => ({
+            //   ...base,
+            //   width: 190,
+            //   borderRadius: "0.5rem",
+            // }),
           }}
           components={{
             Option,
+            Menu,
+            // SelectContainer,
             DropdownIndicator: () => null,
             IndicatorSeparator: () => null,
+            // Placeholder: () => <div className="bg-red-400">test</div>,
+            // SelectContainer:
+            //   () =>
+            //   ({ innerProps, innerRef }) =>
+            //     <div ref={innerRef} {...innerProps} />,
           }}
           // className="bg-red-500"
 
@@ -92,6 +144,7 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
           isSearchable={true}
           isClearable={false}
           placeholder="+966"
+          unstyled
           defaultValue={props.preferredCountry}
           value={selectedCountry}
           onChange={(newValue, action) => setSelectedCountry(newValue)}
@@ -100,7 +153,10 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
           onChange={props.handleChange}
           type="number"
           placeholder="531045453"
-          className="block w-full appearance-none rounded rounded-l-none border border-l-0 border-gray-300 bg-gray-50 p-2.5 text-[0.875rem] text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          // text-gray-900 dark:text-gray-300
+          // dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500
+          className="block w-full appearance-none rounded rounded-l-none border border-l-0
+            bg-background p-2 text-[0.875rem] text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white "
         />
         {props.helperText && (
           <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">

package/src/elements/HawaPinInput.tsx

@@ -64,7 +64,7 @@ export const HawaPinInput: FC<PinInputTypes> = ({
           id={`input-${index}`}
           pattern="[0-9]*"
           className={clsx(
-            "h-10 rounded bg-white text-center",
+            "h-10 rounded border bg-background text-center",
             width === "full" ? "w-full" : "w-10"
           )}
           onChange={(e) => handleChange(e, index)}

package/src/elements/HawaSelect.tsx

@@ -31,7 +31,7 @@ const Control: FC<ControlTypes> = ({
       ref={innerRef}
       className={clsx(
         sizeStyles[size],
-        "flex  w-full rounded border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        "flex  w-full rounded border bg-background text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:focus:ring-blue-500"
       )}
       {...innerProps}
       // {...props}
@@ -58,7 +58,7 @@ const Menu: FC<MenuTypes> = ({
 }) => {
   return (
     <div
-      className="absolute z-10 mt-2 flex  w-full flex-col  justify-start  rounded bg-white p-1 px-1.5 ring-1 ring-blue-200"
+      className="absolute z-10 mt-2 flex w-full  flex-col justify-start  rounded  border  bg-background p-1  px-1.5"
       ref={innerRef}
       {...innerProps}
       // {...props}
@@ -87,7 +87,7 @@ const Option: FC<OptionTypes> = ({
 }) => (
   <div
     ref={innerRef}
-    className="flex flex-row items-center justify-between rounded p-1 px-2 hover:bg-buttonPrimary-500 hover:text-white"
+    className="flex flex-row items-center justify-between rounded-inner p-1 px-2 hover:bg-buttonPrimary-500/50 hover:text-white"
     {...innerProps}
   >
     {children}
@@ -116,7 +116,7 @@ type SelectTypes = {
 }
 export const HawaSelect: FC<SelectTypes> = (props) => {
   return (
-    <div>
+    <div className=" w-96">
       {props.label && (
         <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
@@ -124,6 +124,15 @@ export const HawaSelect: FC<SelectTypes> = (props) => {
       )}
       {!props.isCreatable && (
         <Select
+          classNames={{
+            // control: () => "text-white",
+            placeholder: (state) => "px-2 text-muted-foreground",
+            input: (state) => "text-white px-2",
+            valueContainer: () => "text-white dark:text-muted-foreground",
+            singleValue: () => "text-black dark:text-white px-2",
+            indicatorsContainer: () => " px-2 cursor-pointer text-muted-foreground",
+          }}
+          unstyled
           isDisabled={props.disabled}
           options={props.options}
           isClearable={props.isClearable}

package/src/elements/HawaTextField.tsx

@@ -52,7 +52,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "block w-full rounded outline outline-1 outline-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",

package/src/layout/HawaContainer.tsx

@@ -22,8 +22,8 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
     normal: "max-w-sm md:max-w-md",
   }
   let variantStyles = {
-    contained: "bg-layoutPrimary-500 dark:bg-layoutPrimary-dark",
-    outlined: "bg-transparent border-2 border-black w-fit",
+    contained: "bg-background border",
+    outlined: "bg-transparent border border-black w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
   }
 

package/src/styles.css

@@ -388,6 +388,7 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
+    --border: 240 5.9% 90%;
 
     --layout-primary-700: #b7aff7;
     /* --layout-primary-500: #dfdcfc; */
@@ -397,9 +398,9 @@ video {
 
     --layout-secondary: #d2cdfa;
 
-    --button-primary-300: #6555e3;
-    --button-primary-500: #4c37eb;
-    --button-primary-700: #2e1dac;
+    --button-primary-300: 247 72% 61%;
+    --button-primary-500: 247 82% 57%;
+    --button-primary-700: 247 71% 39%;
 
     --button-secondary-500: #ffc011;
     --button-secondary-700: #b48d24;
@@ -528,6 +529,14 @@ video {
     display: block;
     background: var(--button-primary-500);
   }
+  * {
+  border-color: hsl(var(--border));
+}
+  body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
+}
 
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
@@ -1204,9 +1213,15 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-96 {
+  width: 24rem;
+}
 .w-\[12px\] {
   width: 12px;
 }
+.w-\[190px\] {
+  width: 190px;
+}
 .w-\[25px\] {
   width: 25px;
 }
@@ -1216,6 +1231,9 @@ video {
 .w-\[400px\] {
   width: 400px;
 }
+.w-\[64px\] {
+  width: 64px;
+}
 .w-\[calc\(1\%\)\] {
   width: calc(1%);
 }
@@ -1738,10 +1756,10 @@ video {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 .border-buttonPrimary-500 {
-  border-color: var(--button-primary-500);
+  border-color: hsl(var(--button-primary-500));
 }
 .border-buttonPrimary-700 {
-  border-color: var(--button-primary-700);
+  border-color: hsl(var(--button-primary-700));
 }
 .border-gray-100 {
   --tw-border-opacity: 1;
@@ -1783,7 +1801,10 @@ video {
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
 .border-b-buttonPrimary-500 {
-  border-bottom-color: var(--button-primary-500);
+  border-bottom-color: hsl(var(--button-primary-500));
+}
+.bg-background {
+  background-color: hsl(var(--background));
 }
 .bg-black {
   --tw-bg-opacity: 1;
@@ -1810,10 +1831,10 @@ video {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 .bg-buttonPrimary-300 {
-  background-color: var(--button-primary-300);
+  background-color: hsl(var(--button-primary-300));
 }
 .bg-buttonPrimary-500 {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
 }
 .bg-buttonSecondary-500 {
   background-color: var(--button-secondary-500);
@@ -1882,6 +1903,10 @@ video {
 .bg-layoutPrimary-600 {
   background-color: var(--layout-primary-600);
 }
+.bg-orange-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1906,6 +1931,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
+.bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1943,7 +1972,7 @@ video {
   background-image: none;
 }
 .fill-buttonPrimary-500 {
-  fill: var(--button-primary-500);
+  fill: hsl(var(--button-primary-500));
 }
 .fill-gray-200 {
   fill: #e5e7eb;
@@ -2256,7 +2285,7 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 .text-buttonPrimary-500 {
-  color: var(--button-primary-500);
+  color: hsl(var(--button-primary-500));
 }
 .text-card-foreground {
   color: hsl(var(--card-foreground));
@@ -2436,7 +2465,7 @@ video {
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
 }
 .ring-buttonPrimary-500 {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
@@ -2639,10 +2668,6 @@ body {
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
-.hover\:bg-blue-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 .hover\:bg-blue-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2652,10 +2677,16 @@ body {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 .hover\:bg-buttonPrimary-500:hover {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
+}
+.hover\:bg-buttonPrimary-500\/30:hover {
+  background-color: hsl(var(--button-primary-500) / 0.3);
+}
+.hover\:bg-buttonPrimary-500\/50:hover {
+  background-color: hsl(var(--button-primary-500) / 0.5);
 }
 .hover\:bg-buttonPrimary-700:hover {
-  background-color: var(--button-primary-700);
+  background-color: hsl(var(--button-primary-700));
 }
 .hover\:bg-buttonSecondary-700:hover {
   background-color: var(--button-secondary-700);
@@ -2717,7 +2748,7 @@ body {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 .hover\:text-buttonPrimary-500:hover {
-  color: var(--button-primary-500);
+  color: hsl(var(--button-primary-500));
 }
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
@@ -2756,7 +2787,7 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .hover\:ring-buttonPrimary-500:hover {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 .hover\:brightness-90:hover {
   --tw-brightness: brightness(.9);
@@ -2824,7 +2855,7 @@ body {
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
 .peer:checked ~ .peer-checked\:bg-buttonPrimary-500 {
-  background-color: var(--button-primary-500);
+  background-color: hsl(var(--button-primary-500));
 }
 .peer:checked ~ .peer-checked\:text-blue-600 {
   --tw-text-opacity: 1;
@@ -3034,10 +3065,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
-:is(.dark .dark\:bg-layoutPrimary-dark) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 27 115 / var(--tw-bg-opacity));
-}
 :is(.dark .dark\:bg-red-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -3086,6 +3113,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:text-muted-foreground) {
+  color: hsl(var(--muted-foreground));
+}
 :is(.dark .dark\:text-red-500) {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -3118,8 +3148,11 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
+:is(.dark .dark\:hover\:bg-buttonPrimary-500\/60:hover) {
+  background-color: hsl(var(--button-primary-500) / 0.6);
+}
 :is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
-  background-color: var(--button-primary-700);
+  background-color: hsl(var(--button-primary-700));
 }
 :is(.dark .dark\:hover\:bg-gray-500:hover) {
   --tw-bg-opacity: 1;
@@ -3169,7 +3202,7 @@ body {
   --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
 }
 :is(.dark .dark\:focus\:ring-buttonPrimary-500:focus) {
-  --tw-ring-color: var(--button-primary-500);
+  --tw-ring-color: hsl(var(--button-primary-500));
 }
 :is(.dark .dark\:focus\:ring-gray-600:focus) {
   --tw-ring-opacity: 1;
@@ -3188,7 +3221,7 @@ body {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 :is(.dark .peer:focus ~ .dark\:peer-focus\:ring-buttonPrimary-700) {
-  --tw-ring-color: var(--button-primary-700);
+  --tw-ring-color: hsl(var(--button-primary-700));
 }
 @media (min-width: 440px) {