myshell-react-lib 0.1.4 → 0.1.6

package/src/components/context-menu.tsx

@@ -1,198 +0,0 @@
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const ContextMenu = ContextMenuPrimitive.Root;
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
-
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default select-none items-center rounded-lg py-1 px-2 text-sm outline-none hover:bg-surface-hovered data-[state=open]:bg-slate-100 data-[state=open]:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-50',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'flex flex-col gap-y-1 z-50 overflow-hidden rounded-xl border border-opaque bg-Colors-Background-Neutral-Primary-Default p-2 text-Colors-Text-Default shadow-modal-default',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-xl border-none bg-Colors-Background-Normal-Primary-Default p-1 text-Colors-Text-Default shadow-modal-default border border-opaque',
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-lg py-1 px-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-30 focus:bg-Colors-Background-Neutral-Primary-Default',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-lg py-1 px-2 text-sm outline-none hover:bg-surface-hovered data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-lg py-1 px-2 text-sm outline-none hover:bg-surface-hovered data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold text-Colors-Text-Default',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn('my-1 h-px bg-[var(--border)]', className)}
-    {...props}
-  />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400',
-        className
-      )}
-      {...props}
-    />
-  );
-};
-ContextMenuShortcut.displayName = 'ContextMenuShortcut';
-
-export {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuPortal,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-};

package/src/components/count-down.tsx

@@ -1,83 +0,0 @@
-import dayjs from 'dayjs';
-import duration, { Duration } from 'dayjs/plugin/duration';
-import utc from 'dayjs/plugin/utc';
-import { useMemo, useEffect, useState } from 'react';
-
-dayjs.extend(duration);
-dayjs.extend(utc);
-
-interface CountDownProps {
-  endTime: string;
-  callback?: () => void;
-}
-
-export default function CountDown({ endTime, callback }: CountDownProps) {
-  const end = dayjs(parseInt(endTime));
-  const [duration, setDuration] = useState<Duration | null>(null);
-
-  useEffect(() => {
-    let timer: any = null;
-    const countdown = () => {
-      const now = dayjs();
-      const diff = end.diff(now);
-
-      if (diff > 0) {
-        setDuration(dayjs.duration(diff));
-        timer = setTimeout(countdown, 1000);
-      } else {
-        callback && callback();
-      }
-    };
-
-    countdown();
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
-  const days = useMemo(() => {
-    return duration ? duration.days().toString().padStart(2, '0') : null;
-  }, [duration]);
-
-  const hours = useMemo(() => {
-    return duration ? duration.hours().toString().padStart(2, '0') : null;
-  }, [duration]);
-
-  const minutes = useMemo(() => {
-    return duration ? duration.minutes().toString().padStart(2, '0') : null;
-  }, [duration]);
-
-  const seconds = useMemo(() => {
-    return duration ? duration.seconds().toString().padStart(2, '0') : null;
-  }, [duration]);
-
-  return (
-    <div className="flex items-center space-x-2 text-Colors-Text-Default">
-      <div className="px-[9px] py-1 rounded-xl min-w-[64px] h-[64px] border border-Colors-Border-Default">
-        <div className="h-full flex flex-col justify-center items-center">
-          <p className="font-semibold text-[20px]">{days ?? '00'}</p>
-          <p className="opacity-60 text-[12px]">days</p>
-        </div>
-      </div>
-      <div className="px-[9px] py-1 rounded-xl min-w-[64px] h-[64px] border border-Colors-Border-Default">
-        <div className="h-full flex flex-col justify-center items-center">
-          <p className="font-semibold text-[20px]">{hours ?? '00'}</p>
-          <p className="opacity-60 text-[12px]">hrs</p>
-        </div>
-      </div>
-      <div className="px-[9px] py-1 rounded-xl min-w-[64px] h-[64px] border border-Colors-Border-Default">
-        <div className="h-full flex flex-col justify-center items-center">
-          <p className="font-semibold text-[20px]">{minutes ?? '00'}</p>
-          <p className="opacity-60 text-[12px]">mins</p>
-        </div>
-      </div>
-      <div className="px-[9px] py-1 rounded-xl min-w-[64px] h-[64px] border border-Colors-Border-Default">
-        <div className="h-full flex flex-col justify-center items-center">
-          <p className="font-semibold text-[20px]">{seconds ?? '00'}</p>
-          <p className="opacity-60 text-[12px]">secs</p>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/custom-notification.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import XMarkIcon from '@heroicons/react/24/outline/esm/XMarkIcon';
-import CheckCircleIcon from '@heroicons/react/24/solid/esm/CheckCircleIcon';
-import ExclamationCircleIcon from '@heroicons/react/24/solid/esm/ExclamationCircleIcon';
-import InformationCircleIcon from '@heroicons/react/24/solid/esm/InformationCircleIcon';
-import XCircleIcon from '@heroicons/react/24/solid/esm/XCircleIcon';
-import { toast, ToastOptions } from 'react-hot-toast';
-
-import { IconButton } from './button/icon-button';
-import { Separator } from './separator';
-import { Text } from './typography';
-import { isString } from '@/common/utils/common-helper';
-import { CustomToasterProps } from '@/common/hooks/useNotification';
-import { Spinner } from './spinner';
-
-export default function CustomNotification({
-  tProps,
-  customProps,
-}: {
-  tProps: ToastOptions;
-  customProps: CustomToasterProps;
-}) {
-  const {
-    type,
-    title,
-    content,
-    isClosable = false,
-    action,
-    loading,
-  } = customProps;
-  const { id } = tProps;
-
-  const displayedContent = !isString(content)
-    ? JSON.stringify(content)
-    : content;
-
-  return (
-    <div>
-      <div
-        id={id}
-        className="z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-opaque bg-Colors-Background-Normal-Primary-Active px-3 py-2 shadow-modal-default md:max-w-[560px]"
-      >
-        <div className="flex w-full items-center justify-center gap-2">
-          {loading && <Spinner />}
-          {!loading && type && (
-            <div className="flex flex-shrink-0 items-center">
-              {type === 'info' && (
-                <InformationCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Info" />
-              )}
-              {type === 'success' && (
-                <CheckCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Success" />
-              )}
-              {type === 'warning' && (
-                <ExclamationCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Warning" />
-              )}
-              {type === 'error' && (
-                <XCircleIcon className="h-6 w-6 text-cc-Icon-Featured-icon-fg-Error" />
-              )}
-            </div>
-          )}
-          <div className="flex flex-grow flex-col space-y-1 overflow-hidden">
-            {title && (
-              <Text size="sm" weight="regular" color="default">
-                {title}
-              </Text>
-            )}
-            <div>
-              <Text size="sm" weight="regular" color="default">
-                {displayedContent}
-              </Text>
-            </div>
-          </div>
-
-          {action && (
-            <>
-              <Separator orientation="vertical" className="h-3" />
-              {action}
-            </>
-          )}
-
-          {isClosable && (
-            <IconButton
-              size="sm"
-              variant="plain"
-              icon={XMarkIcon}
-              onClick={() => toast.dismiss(id)}
-              className="text-Colors-Foreground-Subtlest"
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/dialog.tsx

@@ -1,158 +0,0 @@
-'use client';
-
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogTrigger = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'ring-offset-cc-Focus-Rings-Brand-default focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1',
-      className
-    )}
-    {...props}
-  />
-));
-DialogTrigger.displayName = DialogPrimitive.Trigger.displayName;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-opacity-90 md:bg-opacity-75 bg-Colors-Background-Utilities-Overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    maskClosable?: boolean;
-    hideClose?: boolean;
-    onClose?: () => void;
-    overlayClose?: boolean;
-    overlayClassName?: string;
-    iconClassName?: string;
-  }
->(
-  (
-    {
-      className,
-      children,
-      hideClose = false,
-      maskClosable = true,
-      overlayClose = true,
-      onClose,
-      overlayClassName,
-      iconClassName,
-      ...props
-    },
-    ref
-  ) => (
-    <DialogPortal>
-      <DialogOverlay
-        onClick={() => {
-          maskClosable && overlayClose && onClose && onClose();
-        }}
-        className={overlayClassName}
-      />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-[90%] rounded-4xl max-w-lg translate-x-[-50%] translate-y-[-50%] bg-Colors-Background-Normal-Primary-Default shadow-modal-default duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ring-offset-cc-Focus-Rings-Brand-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 focus-visible:outline-0',
-          className
-        )}
-        {...props}
-      >
-        {children}
-
-        {!hideClose && (
-          <DialogPrimitive.Close
-            className={cn(
-              'w-9 h-9 absolute right-5 top-3 flex justify-center items-center focus-visible:outline-0 rounded-full hover:bg-surface-hovered',
-              iconClassName
-            )}
-            onClick={() => {
-              onClose && onClose();
-            }}
-          >
-            <X className="w-6 h-6 text-Colors-Foreground-Subtle" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-function DialogHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('flex flex-col p-4', className)} {...props} />;
-}
-DialogHeader.displayName = 'DialogHeader';
-
-function DialogFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('flex justify-end p-4', className)} {...props} />;
-}
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-xl font-normal', className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-Colors-Text-Subtle p-4', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};

package/src/components/drawer.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-
-import { cn } from '@/lib/utils';
-
-function Drawer({
-  shouldScaleBackground = false,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return (
-    <DrawerPrimitive.Root
-      shouldScaleBackground={shouldScaleBackground}
-      {...props}
-    />
-  );
-}
-Drawer.displayName = 'Drawer';
-
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-const DrawerPortal = DrawerPrimitive.Portal;
-
-const DrawerClose = DrawerPrimitive.Close;
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn('fixed inset-0 z-50 bg-alpha-mask-mobile', className)}
-    {...props}
-  />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed inset-x-0 bottom-0 z-50 flex h-auto max-h-[70%] flex-col rounded-t-2xl bg-Colors-Background-Normal-Primary-Default shadow-modal-default',
-        className
-      )}
-      {...props}
-    >
-      {/* <DrawerPrimitive.Close className="w-9 h-9 absolute right-4 top-4 flex justify-center items-center ring-offset-cc-Focus-Rings-Brand-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1">
-        <X className="w-[22px] h-[22px] text-icon" />
-        <span className="sr-only">Close</span>
-      </DrawerPrimitive.Close> */}
-      {/* 类app拖动块在H5端不需要 */}
-      {/* <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-border-Colors-Border-Default" /> */}
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-));
-DrawerContent.displayName = 'DrawerContent';
-
-function DrawerHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('p-4', className)} {...props} />;
-}
-DrawerHeader.displayName = 'DrawerHeader';
-
-function DrawerFooter({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('p-4', className)} {...props} />;
-}
-DrawerFooter.displayName = 'DrawerFooter';
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn('text-xl font-normal text-Colors-Text-Default', className)}
-    {...props}
-  />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-Colors-Text-Subtle', className)}
-    {...props}
-  />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};