myshell-react-lib 0.1.5 → 0.1.6

package/src/components/dropdown-menu.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-lg px-3 py-2 outline-none focus:bg-Colors-Background-Neutral-Primary-Default data-[state=open]:bg-Colors-Background-Neutral-Primary-Default',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-xl border border-alpha bg-Colors-Background-Normal-Primary-Active p-2 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => {
-  return (
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-[100] min-w-[8rem] overflow-hidden rounded-xl border border-opaque bg-Colors-Background-Normal-Primary-Default p-1 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    />
-  );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-lg px-2 py-1 outline-none transition-colors focus:bg-Colors-Background-Neutral-Primary-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-30',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-30',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-3 py-1 text-sm font-medium', inset && 'pl-8', className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('my-1 h-px bg-[var(--border)]', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};

package/src/components/energy-progress.tsx

@@ -1,55 +0,0 @@
-import Image from 'next/image';
-
-import { getAssetsUrl } from '../common/utils/common-helper';
-import { cn } from '@/lib/utils';
-
-import { Progress } from './progress';
-import { Tooltip } from './tooltip';
-
-type EnergyProgressBarProps = {
-  energy: number;
-  dailyEnergy: number;
-  hoverText?: string;
-  className?: string;
-};
-function EnergyProgress(props: EnergyProgressBarProps) {
-  const { energy, dailyEnergy, hoverText, className } = props;
-
-  return (
-    <div className={cn('flex items-center relative', className)}>
-      <div className="absolute left-[-20px] justify-center items-center w-6 h-6 border border-solid border-[#F3D42D] dark:border-[#A48F07] bg-white dark:bg-[#24210B] rounded-[6px] z-10">
-        <Image
-          src={getAssetsUrl('image/bot/tag/20231214/1719340128612116720.png')}
-          alt="energy"
-          width={22}
-          height={22}
-        />
-      </div>
-
-      <Tooltip
-        description={
-          hoverText ??
-          `Utilize battery to chat with bots or set up your own bot. Recharge ⚡️${Math.floor(
-            dailyEnergy / 24
-          )} per hour when battery is below ${dailyEnergy}`
-        }
-        side="bottom"
-        align="end"
-        sideOffset={16}
-        alignOffset={-16}
-        showArrow={false}
-      >
-        <Progress
-          value={energy}
-          max={dailyEnergy}
-          className="rounded-[6px] rounded-l-none border border-solid border-cc-Energy-border-default bg-cc-Energy-bg-alt flex items-center justify-start"
-          indicatorClassName={'bg-cc-Energy-bg-on'}
-          label={
-            <span className="text-cc-Energy-fg-default font-medium text-xs ml-[2px]">{`${energy}/${dailyEnergy}`}</span>
-          }
-        />
-      </Tooltip>
-    </div>
-  );
-}
-export default EnergyProgress;

package/src/components/form.tsx

@@ -1,201 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import * as React from 'react';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import { Label } from './label';
-import { cn } from '@/lib/utils';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-);
-
-function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({ ...props }: ControllerProps<TFieldValues, TName>) {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-);
-
-interface IFormItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  layout?: 'Vertical' | 'Horizontal';
-}
-
-const formLayoutVariants = cva('', {
-  variants: {
-    layout: {
-      Vertical: 'space-y-1.5',
-      Horizontal: 'flex flex-row items-center space-x-3',
-    },
-  },
-  defaultVariants: {
-    layout: 'Vertical',
-  },
-});
-
-const FormItem = React.forwardRef<HTMLDivElement, IFormItemProps>(
-  ({ className, layout, ...props }, ref) => {
-    const id = React.useId();
-
-    const cls = cn(className, formLayoutVariants({ layout }));
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cls} {...props} />
-      </FormItemContext.Provider>
-    );
-  }
-);
-FormItem.displayName = 'FormItem';
-
-interface IFormLabelProps
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
-  required?: boolean;
-}
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  IFormLabelProps
->(({ className, required, children, ...props }, ref) => {
-  const { formItemId } = useFormField();
-
-  return (
-    <Label ref={ref} className={className} htmlFor={formItemId} {...props}>
-      {required ? (
-        <span className="text-Colors-Text-Critical-Default mr-1">*</span>
-      ) : null}
-      {children}
-    </Label>
-  );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn('text-sm text-Colors-Text-Subtler', className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn(
-        'text-sm font-medium text-Colors-Text-Critical-Default',
-        className
-      )}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField,
-};

package/src/components/group.tsx

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-
-interface P {
-  children: ReactNode;
-}
-
-export default function Group({ children }: P) {
-  return <div className="flex space-x-2">{children}</div>;
-}

package/src/components/guide.tsx

@@ -1,243 +0,0 @@
-'use client';
-
-import {
-  AllowedButtons,
-  Config,
-  DriveStep,
-  PopoverDOM,
-  State,
-  driver,
-} from 'driver.js';
-import * as React from 'react';
-import { useEffect, useMemo, useRef } from 'react';
-
-import { cn } from '@/lib/utils';
-
-// Import driver.js styles
-import 'driver.js/dist/driver.css';
-
-interface GuideProps {
-  /*
-    引导步骤
-   */
-  steps: DriveStep[];
-  /*
-    是否显示进度条
-    @default true
-   */
-  showProgress?: boolean;
-  /*
-    是否显示遮罩层
-    @default true
-   */
-  showOverlay?: boolean;
-  /*
-    是否显示关闭按钮
-    @default true
-   */
-  hasCloseBtn?: boolean;
-  /*
-    是否允许点击背景蒙层关闭
-    @default true
-   */
-  allowClose?: boolean;
-  /*
-    是否显示跳过按钮
-    @default true
-   */
-  hasSkip?: boolean;
-  /*
-    跳过按钮文本
-    @default 'Skip'
-   */
-  skipText?: string;
-  /*
-    是否显示下一步按钮
-    @default true
-   */
-  hasNextBtn?: boolean;
-  /*
-    是否显示上一步按钮
-    @default false
-   */
-  hasPrevBtn?: boolean;
-  /*
-    上一步按钮文本
-    @default 'Previous'
-   */
-  prevBtnText?: string;
-  /*
-    下一步按钮文本
-    @default 'Next'
-   */
-  nextBtnText?: string;
-  /*
-    完成按钮文本
-    @default 'Done'
-   */
-  doneBtnText?: string;
-  /*
-    自定义类名
-   */
-  className?: string;
-  /*
-    完成的回调
-   */
-  onComplete?: () => void;
-  /*
-    跳过的回调
-   */
-  onSkip?: () => void;
-}
-
-export const Guide: React.FC<GuideProps> = ({
-  steps,
-  showProgress = true,
-  showOverlay = false,
-  hasSkip = true,
-  hasCloseBtn = true,
-  hasPrevBtn = false,
-  hasNextBtn = true,
-  allowClose = false,
-  skipText = 'Skip',
-  prevBtnText = 'Previous',
-  nextBtnText = 'Next',
-  doneBtnText = 'Done',
-  className,
-  onComplete,
-  onSkip,
-}) => {
-  const driverRef = useRef<any>(null);
-  const buttons = useMemo(() => {
-    const buttons = [] as AllowedButtons[];
-    if (hasPrevBtn) {
-      buttons.push('previous');
-    }
-    if (hasNextBtn) {
-      buttons.push('next');
-    }
-    if (hasCloseBtn) {
-      buttons.push('close');
-    }
-
-    return buttons;
-  }, [hasNextBtn, hasPrevBtn, hasCloseBtn]);
-  useEffect(() => {
-    driverRef.current = driver({
-      overlayOpacity: showOverlay ? 0.8 : 0,
-      animate: true,
-      showButtons: buttons?.length > 0 ? buttons : [],
-      showProgress,
-      steps,
-      prevBtnText,
-      nextBtnText,
-      doneBtnText,
-      allowClose,
-      progressText: '{{current}}/{{total}}',
-      onDestroyed: onComplete,
-      onPopoverRender: (
-        popover: PopoverDOM,
-        { config, state }: { config: Config; state: State }
-      ) => {
-        const closeBtn = popover.closeButton as HTMLElement;
-
-        if (hasCloseBtn && closeBtn) {
-          closeBtn.className = cn(
-            'driver-popover-close-btn !text-Colors-Text-Static-White !opacity-70 !w-4.5 !h-4.5 !right-3 !top-3',
-            closeBtn.className
-          );
-          closeBtn.style.display = 'block';
-          closeBtn.innerHTML =
-            '<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21201_7803)"><path d="M4.10225 4.10225C4.32192 3.88258 4.67808 3.88258 4.89775 4.10225L9 8.20451L13.1023 4.10225C13.3219 3.88258 13.6781 3.88258 13.8977 4.10225C14.1174 4.32192 14.1174 4.67808 13.8977 4.89775L9.7955 9L13.8977 13.1023C14.1174 13.3219 14.1174 13.6781 13.8977 13.8977C13.6781 14.1174 13.3219 14.1174 13.1023 13.8977L9 9.7955L4.89775 13.8977C4.67808 14.1174 4.32192 14.1174 4.10225 13.8977C3.88258 13.6781 3.88258 13.3219 4.10225 13.1023L8.20451 9L4.10225 4.89775C3.88258 4.67808 3.88258 4.32192 4.10225 4.10225Z" fill="white" fill-opacity="0.7"/></g><defs><clipPath id="clip0_21201_7803"><rect width="18" height="18" fill="white"/></clipPath></defs></svg>';
-          closeBtn.onclick = () => {
-            driverRef.current.destroy();
-          };
-        }
-        const content = popover.wrapper as HTMLElement;
-        if (content) {
-          content.className = cn(
-            '!bg-Colors-Utility-Lake-Blue-50 !p-3 !shadow-modal-default',
-            content.className
-          );
-          const arrow = popover.arrow as HTMLElement;
-          if (arrow) {
-            arrow.className = cn(
-              'border-t-Colors-Utility-Lake-Blue-50',
-              arrow.className
-            );
-          }
-          const title = popover.title as HTMLElement;
-          const description = popover.description as HTMLElement;
-          const footer = popover.footer as HTMLElement;
-          const footerButtons = popover.footerButtons as HTMLElement;
-
-          if (title) {
-            title.className = cn('mb-1', title.className);
-            title.innerHTML = `<p class="text-base font-medium text-Colors-Beta-White-100">${title.innerHTML}</p>`;
-          }
-
-          if (description) {
-            description.innerHTML = `<p class="text-sm !text-Colors-Beta-White-80">${description.innerHTML}</p>`;
-          }
-          if (footer) {
-            footer.className = cn('!mt-3 space-x-1.5', footer.className);
-          }
-
-          if (footer && footerButtons && hasSkip) {
-            footer.style.display = 'flex';
-            const skipBtn = document.createElement('button');
-            skipBtn.innerText = skipText;
-            skipBtn.className =
-              'driver-popover-skip-btn driver-popover-close-btn !text-Colors-Beta-White-80';
-            skipBtn.addEventListener('click', () => {
-              driverRef.current.destroy();
-              onSkip && onSkip();
-            });
-            footerButtons.className = cn(
-              'flex-1 flex justify-end items-center',
-              footerButtons.className
-            );
-            footerButtons.insertBefore(skipBtn, footerButtons.firstChild);
-          }
-          popover.previousButton.style.display = hasPrevBtn ? 'block' : 'none';
-          popover.nextButton.style.display = hasNextBtn ? 'block' : 'none';
-          popover.closeButton.style.display = hasCloseBtn ? 'block' : 'none';
-        }
-
-        const { progress } = popover;
-        if (progress) {
-          progress.className = cn(
-            'text-sm text-Colors-Beta-White-60 opacity-60',
-            progress.className
-          );
-        }
-      },
-    });
-
-    driverRef.current.drive();
-
-    return () => {
-      if (driverRef.current) {
-        driverRef.current.destroy();
-      }
-    };
-  }, [
-    steps,
-    showProgress,
-    hasSkip,
-    hasPrevBtn,
-    hasNextBtn,
-    skipText,
-    prevBtnText,
-    nextBtnText,
-    doneBtnText,
-    className,
-    onComplete,
-    onSkip,
-    showOverlay,
-    hasCloseBtn,
-    buttons,
-  ]);
-
-  return null;
-};