@firecms/ui 3.0.0-alpha.84 → 3.0.0-beta.10

package/src/components/Button.tsx

@@ -1,60 +1,78 @@
 import React from "react";
-
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
     & {
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
-    size?: "small" | "medium" | "large";
+    color?: "primary" | "secondary" | "text" | "error";
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
     onClick?: React.MouseEventHandler<any>
 };
 
-export function Button<P extends React.ElementType>({
-                                                        children,
-                                                        className,
-                                                        variant = "filled",
-                                                        disabled = false,
-                                                        size = "medium",
-                                                        startIcon = null,
-                                                        fullWidth = false,
-                                                        component: Component,
-                                                        ...props
-                                                    }: ButtonProps<P>) {
+const ButtonInner = React.forwardRef<
+    ButtonProps<React.ElementType<any>>
+>(({
+       children,
+       className,
+       variant = "filled",
+       disabled = false,
+       size = "medium",
+       startIcon = null,
+       fullWidth = false,
+       component: Component,
+       color = "primary",
+       ...props
+   }: ButtonProps<any>, ref) => {
 
     const baseClasses =
-        "h-fit rounded-md border uppercase inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
+        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    const buttonClasses = cn(
-        {
-            "w-full": fullWidth,
-            "w-fit": !fullWidth,
-            "border-transparent bg-primary hover:bg-primary-dark focus:ring-primary !text-white shadow hover:ring-1 hover:ring-primary": variant === "filled" && !disabled,
-            "border-transparent !text-primary !hover:text-primary-dark hover:bg-primary hover:bg-primary-bg": variant === "text" && !disabled,
-            "border-primary !text-primary hover:bg-primary-bg hover:border-primary-dark !hover:text-primary-dark focus:ring-primary hover:ring-1 hover:ring-primary": variant === "outlined" && !disabled,
-            "border-primary-dark border-opacity-50 dark:border-blue-500 dark:border-opacity-50 opacity-50 !text-primary-dark !dark:text-blue-500 text-opacity-50 dark:text-opacity-50": variant === "outlined" && disabled,
-            "border-transparent outline-none opacity-50 !text-slate-600 !dark:text-slate-500": (variant === "filled" || variant === "text") && disabled
-        }
-    );
+    const buttonClasses = cls({
+        "w-full": fullWidth,
+        "w-fit": !fullWidth,
+        // Filled Variants
+        "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-slate-200 bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
+        // Text Variants
+        "border border-transparent text-primary hover:text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
+        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
+        "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-slate-200 hover:dark:bg-gray-700": variant === "text" && color === "text" && !disabled,
+        // Outlined Variants
+        "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
+        "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
+        "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
+        "border border-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
+        // Disabled states for all variants
+        "border border-transparent opacity-50": variant === "text" && disabled,
+        "border border-gray-500 opacity-50": variant === "outlined" && disabled,
+        "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled,
+    });
 
-    const sizeClasses = cn(
+    const sizeClasses = cls(
         {
             "py-1 px-2": size === "small",
             "py-2 px-4": size === "medium",
-            "py-2.5 px-5": size === "large"
+            "py-2.5 px-5": size === "large",
+            "py-3 px-6": size === "xl",
+            "py-4 px-10": size === "2xl",
         }
     );
 
     if (Component) {
         return (
-            <Component onClick={props.onClick}
-                       className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
-                       {...(props as React.ComponentPropsWithRef<P>)}>
+            <Component
+                ref={ref}
+                onClick={props.onClick}
+                className={cls( startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}
             </Component>
@@ -62,13 +80,19 @@ export function Button<P extends React.ElementType>({
     }
 
     return (
-        <button type={props.type ?? "button"}
+        <button ref={ref as any}
+                type={props.type ?? "button"}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 disabled={disabled}
                 {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
             {startIcon}
             {children}
         </button>
     );
-}
+
+});
+
+ButtonInner.displayName = "Button"
+
+export const Button = ButtonInner as React.FC<ButtonProps<any>>;

package/src/components/Card.tsx

@@ -1,19 +1,21 @@
 import React, { useCallback } from "react";
-import { cardClickableMixin, cardMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cardClickableMixin, cardMixin } from "../styles";
+import { cls } from "../util";
 
-export function Card({
-                         children,
-                         style,
-                         onClick,
-                         className
-                     }: {
+type CardProps = {
     children: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
-}) {
+};
 
+const Card = React.forwardRef<HTMLDivElement, CardProps>(({
+                                                              children,
+                                                              className,
+                                                              onClick,
+                                                              style,
+                                                              ...props
+                                                          }, ref) => {
     const onKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
         if (e.key === "Enter" || e.key === " ") {
             onClick?.();
@@ -22,13 +24,17 @@ export function Card({
 
     return (
         <div
+            ref={ref}
             onKeyPress={onKeyPress}
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}
-            className={cn(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
-            style={style}>
+            className={cls(cardMixin, onClick && cardClickableMixin, className)}
+            style={style}
+            {...props}>
             {children}
         </div>
-    )
-}
+    );
+});
+
+export { Card };

package/src/components/CenteredView.tsx

@@ -1,22 +1,34 @@
 import React from "react";
 import { Container } from "./Container";
-import { cn } from "../util";
+import { cls } from "../util";
 
-export function CenteredView({
-                                 children,
-                                 maxWidth,
-                                 className
-                             }: {
+export type CenteredViewProps = {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    outerClassName?: string;
     className?: string;
-}) {
+    fullScreen?: boolean;
+};
 
-    return <div className={"flex flex-col flex-grow h-full"}>
-        <Container className={cn("m-auto", className)}
-                   maxWidth={maxWidth}>
-            {children}
-        </Container>
-    </div>
+export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(({
+                                                                                     children,
+                                                                                     maxWidth,
+                                                                                     outerClassName,
+                                                                                     className,
+                                                                                     fullScreen,
+                                                                                     ...rest
+                                                                                 }, ref) => { // Notice how the ref is now received as the second argument
 
-}
+    return (
+        <div ref={ref}
+             className={cls("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             {...rest}>
+            <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
+                {children}
+            </Container>
+        </div>
+    );
+
+});
+
+CenteredView.displayName = "CenteredView";

package/src/components/Checkbox.tsx

@@ -2,27 +2,37 @@ import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 import { Icon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 
-interface CheckboxProps {
+export interface CheckboxProps {
     checked: boolean;
+    id?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    size?: "small" | "medium" | "large";
+    padding?: boolean;
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 
 const sizeClasses = {
     large: "w-6 h-6 rounded flex items-center justify-center",
     medium: "w-5 h-5 rounded flex items-center justify-center",
-    small: "w-4 h-4 rounded flex items-center justify-center"
+    small: "w-4 h-4 rounded flex items-center justify-center",
+    smallest: "w-4 h-4 rounded flex items-center justify-center"
 };
 
 const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
-    large: "w-12 h-12"
+    large: "w-12 h-12 ",
+    smallest: "w-6 h-6"
+}
+const paddingClasses = {
+    medium: "p-2",
+    small: "p-2",
+    large: "p-2",
+    smallest: ""
 }
 
 const colorClasses = {
@@ -31,8 +41,10 @@ const colorClasses = {
 }
 
 export const Checkbox = ({
+                             id,
                              checked,
                              indeterminate = false,
+                             padding = true,
                              disabled,
                              size = "medium",
                              onCheckedChange,
@@ -45,21 +57,25 @@ export const Checkbox = ({
         ? 20
         : size === "small"
             ? 16
-            : 24;
+            : size === "smallest"
+                ? 14
+                : 24;
     return (
-        <div className={cn(
-            outerSizeClasses[size],
-            "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-            onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
-            onCheckedChange ? "cursor-pointer" : "cursor-default"
-        )}>
-            <CheckboxPrimitive.Root
-                asChild
-                checked={indeterminate || isChecked}
-                disabled={disabled}
-                onCheckedChange={disabled ? undefined : onCheckedChange}>
+        <CheckboxPrimitive.Root
+            id={id}
+            checked={indeterminate || isChecked}
+            disabled={disabled}
+            onCheckedChange={disabled ? undefined : onCheckedChange}>
+
+            <div className={cls(
+                padding ? paddingClasses[size] : "",
+                outerSizeClasses[size],
+                "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
+                onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "cursor-pointer" : "cursor-default"
+            )}>
                 <div
-                    className={cn(
+                    className={cls(
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
@@ -80,12 +96,7 @@ export const Checkbox = ({
                             )}
                     </CheckboxPrimitive.Indicator>
                 </div>
-            </CheckboxPrimitive.Root>
-            {/*{indeterminate && (*/}
-            {/*    <div >*/}
-            {/*         YO*/}
-            {/*    </div>*/}
-            {/*)}*/}
-        </div>
+            </div>
+        </CheckboxPrimitive.Root>
     );
 };

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CHIP_COLORS, cn, getColorSchemeForKey } from "../util";
+import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
 
 export type ChipColorScheme = {
     color: string;
@@ -11,16 +11,17 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "smaller" | "small" | "medium";
+    size?: "smallest" | "small" | "medium";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
     onClick?: () => void;
     icon?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 
 const sizeClassNames = {
-    smaller: "px-2 py-0.5 text-sm",
+    smallest: "px-2 py-0.5 text-sm",
     small: "px-3 py-1 text-sm",
     medium: "px-4 py-1.5 text-sm"
 }
@@ -36,17 +37,18 @@ export function Chip({
                          onClick,
                          icon,
                          size = "medium",
-                         className
+                         className,
+                         style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],
-                error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-slate-200" : "",
+                error || !usedColorScheme ? "bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white" : "",
                 error ? "text-red-500 dark:text-red-400" : "",
                 className)}
             onClick={onClick}
@@ -54,6 +56,7 @@ export function Chip({
                 backgroundColor: error || !usedColorScheme ? undefined : usedColorScheme.color,
                 color: error || !usedColorScheme ? undefined : usedColorScheme.text,
                 overflow: "hidden",
+                ...style
                 // display: "-webkit-box",
                 // WebkitLineClamp: 1,
                 // WebkitBoxOrient: "vertical",

package/src/components/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type CircularProgressProps = {
     size?: "small" | "medium" | "large",
@@ -31,7 +31,7 @@ export function CircularProgress({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 sizeClasses,
                 borderClasses,
                 "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",

package/src/components/Collapse.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface CollapseProps {
     children?: React.ReactNode;
@@ -53,7 +54,7 @@ export function Collapse({
             className={className}>
 
             <Collapsible.Content
-                className={cn(`CollapseContent-${duration}`)}
+                className={cls(`CollapseContent-${duration}`)}
             >
                 {children}
             </Collapsible.Content>

package/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ContainerProps = {
     children: React.ReactNode;
@@ -37,7 +37,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cn("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg-px-6",
                 classForMaxWidth,
                 className)}
             style={style}>

package/src/components/DateTimeField.tsx

@@ -1,34 +1,33 @@
 import React, { useRef } from "react";
-// @ts-ignore
-import DatePicker from "react-datepicker";
+import * as RDP from "react-datepicker"
 
 import { CalendarMonthIcon, ClearIcon, ErrorIcon } from "../icons";
 import { IconButton } from "./IconButton";
-import {
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    focusedMixin,
-    paperMixin
-} from "../styles";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, paperMixin } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn, useInjectStyles } from "../util";
 import { Typography } from "./Typography";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
+
+// this fixes the issue with the default export, affecting Next.js
+const DatePicker = (((RDP.default as any).default as any) ||
+    (RDP.default as any) ||
+    (RDP as any)) as typeof RDP.default
+
+export type DateTimeFieldProps = {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
 
-interface DateTimeFieldProps {
-    value?: Date;
-    onChange: (date: Date | null) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size: "small" | "medium";
+    size?: "small" | "medium";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 
@@ -40,11 +39,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 clearable,
                                                                 mode = "date",
                                                                 error,
-                                                                size,
+                                                                size = "medium",
                                                                 className,
                                                                 style,
                                                                 inputClassName,
-                                                                preventOpenOnFocus,
                                                                 invisible,
                                                                 locale
                                                             }) => {
@@ -60,14 +58,14 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
     const handleClear = (e: React.MouseEvent) => {
         e.preventDefault();
-        onChange(null);
+        onChange?.(null);
     }
 
     return (
         <>
 
             <div
-                className={cn(
+                className={cls(
                     "rounded-md relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -80,7 +78,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
                 {label && (
                     <InputLabel
-                        className={cn("absolute top-1 pointer-events-none",
+                        className={cls("absolute top-1 pointer-events-none",
                             !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-500",
                             disabled ? "opacity-50" : "")}
                         shrink={hasValue || focused}
@@ -95,8 +93,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     selected={(invalidValue ? null : value) ?? null}
                     onChange={onChange}
                     disabled={false}
-                    popperClassName={cn(paperMixin, "my-4 shadow")}
-                    onClick={(e: any) => e.stopPropagation()}
+                    popperClassName={cls(paperMixin, "my-4 shadow")}
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
                     showTimeSelect={mode === "date_time"}
@@ -105,11 +102,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     timeCaption="time"
                     dateFormat={mode === "date_time" ? "Pp" : "P"}
                     preventOpenOnFocus={true}
-                    className={cn(
+                    className={cls(
                         "w-full outline-none bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
                         "rounded-md",
-                        !invisible && focusedMixin,
                         size === "small" ? "min-h-[48px]" : "min-h-[64px]",
                         label ? "pt-[28px] pb-2" : "py-2",
                         inputClassName,
@@ -117,7 +113,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     )}
                 />
 
-
                 <IconButton
                     onClick={() => {
                         // @ts-ignore
@@ -527,7 +522,7 @@ const datePickerCss = `
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
   border-radius: 100%;
-  background-color: #5193f6;
+  background-color: #186ef0;
   color: #fff;
 }
 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -540,22 +535,22 @@ const datePickerCss = `
 .react-datepicker__year-text--selected:hover,
 .react-datepicker__year-text--in-selecting-range:hover,
 .react-datepicker__year-text--in-range:hover {
-  background-color: #186ef0;
-}
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__month-text--keyboard-selected,
-.react-datepicker__quarter-text--keyboard-selected,
-.react-datepicker__year-text--keyboard-selected {
-  border-radius: 100%;
-  background-color: #cee2ff;
-  color: rgb(0, 0, 0);
-}
-.react-datepicker__day--keyboard-selected:hover,
-.react-datepicker__month-text--keyboard-selected:hover,
-.react-datepicker__quarter-text--keyboard-selected:hover,
-.react-datepicker__year-text--keyboard-selected:hover {
-  background-color: #186ef0;
-}
+  background-color: #5698f9;
+}
+// .react-datepicker__day--keyboard-selected,
+// .react-datepicker__month-text--keyboard-selected,
+// .react-datepicker__quarter-text--keyboard-selected,
+// .react-datepicker__year-text--keyboard-selected {
+//   border-radius: 100%;
+//   background-color: #5193f6;
+//   color: rgb(0, 0, 0);
+// }
+// .react-datepicker__day--keyboard-selected:hover,
+// .react-datepicker__month-text--keyboard-selected:hover,
+// .react-datepicker__quarter-text--keyboard-selected:hover,
+// .react-datepicker__year-text--keyboard-selected:hover {
+//   background-color: #5193f6;
+// }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
 .react-datepicker__quarter-text--in-range,
@@ -838,7 +833,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__month-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__month-year-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__navigation-icon::before {
-  border-color: #333;
+  border-color: #999;
 }
 
 
@@ -912,7 +907,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__year-text--selected:hover,
 :is([data-theme="dark"]) .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover
  {
-  background-color: #1a1a1a;
+  background-color: #262626;
 }
 
 :is([data-theme="dark"]) .react-datepicker__day--selected,
@@ -930,12 +925,12 @@ const datePickerCss = `
   background-color: #0e528f;
 }
 
-:is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
-  background-color: #0e529f;
-}
+// :is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
+//   background-color: #0e529f;
+// }
 
 :is([data-theme="dark"]) .react-datepicker__today-button {
   background-color: #262626;