mautourco-components 0.2.36 → 0.2.37

package/src/components/molecules/TextWithIcon/TextWithIcon.tsx

@@ -42,7 +42,7 @@ export interface TextWithIconProps {
  * @param TextWithIconProps
  * @returns
  */
-const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
+function TextWithIcon(props: TextWithIconProps) {
   const {
     icon,
     children,
@@ -76,6 +76,6 @@ const TextWithIcon: React.FC<TextWithIconProps> = (props) => {
       </Text>
     </div>
   );
-};
+}
 
 export default TextWithIcon;

package/src/components/molecules/TimelineItem/ServiceAccommodation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
 import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
@@ -11,7 +10,7 @@ export interface ServiceAccommodationProps {
   isOnRequest?: boolean;
 }
 
-export const ServiceAccommodation: React.FC<ServiceAccommodationProps> = (props) => {
+export function ServiceAccommodation(props: ServiceAccommodationProps) {
   const { hotelName, details, dates, isOnRequest } = props;
 
   return (
@@ -26,4 +25,4 @@ export const ServiceAccommodation: React.FC<ServiceAccommodationProps> = (props)
       </div>
     </div>
   );
-};
+}

package/src/components/molecules/TimelineItem/ServiceExcursion.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text } from '../../atoms/Typography/Typography';
 import { DateDisplay } from '../DateDisplay/DateDisplay';
 import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
@@ -10,7 +9,7 @@ export interface ServiceExcursionProps {
   date: string;
 }
 
-export const ServiceExcursion: React.FC<ServiceExcursionProps> = (props) => {
+export function ServiceExcursion(props: ServiceExcursionProps) {
   const { name, details, date } = props;
 
   return (
@@ -25,4 +24,4 @@ export const ServiceExcursion: React.FC<ServiceExcursionProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/molecules/TimelineItem/ServiceTransfer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import FromTo from '../FromTo/FromTo';
 import { DetailsCol, DetailsColData } from '../TableServiceItem/DetailsCol';
 import { TimelineHeader } from './TimelineHeader';
@@ -12,7 +11,7 @@ export interface ServiceTransferProps {
   details: DetailsColData[];
 }
 
-export const ServiceTransfer: React.FC<ServiceTransferProps> = (props) => {
+export function ServiceTransfer(props: ServiceTransferProps) {
   const { transferType, location, details } = props;
 
   return (
@@ -22,4 +21,4 @@ export const ServiceTransfer: React.FC<ServiceTransferProps> = (props) => {
       <DetailsCol data={details} className="gap-y-2" />
     </div>
   );
-};
+}

package/src/components/molecules/TimelineItem/TimelineHeader.tsx

@@ -1,5 +1,4 @@
 import { cn } from '@/src/lib/utils';
-import React from 'react';
 import Chip from '../../atoms/Chip/Chip';
 import Icon, { IconName } from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
@@ -12,7 +11,7 @@ export interface TimelineHeaderProps {
   isOnRequest?: boolean;
 }
 
-export const TimelineHeader: React.FC<TimelineHeaderProps> = (props) => {
+export function TimelineHeader(props: TimelineHeaderProps) {
   const { icon = 'car', title, extraText, isOnRequest = false } = props;
   return (
     <div className={cn('timeline-header', isOnRequest && 'timeline-header--request')}>
@@ -38,4 +37,4 @@ export const TimelineHeader: React.FC<TimelineHeaderProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/molecules/Toast/Toast.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../../styles/components/molecule/toast.css';
 import Icon from '../../atoms/Icon/Icon';
 import { IconName } from '../../atoms/Icon/icons/registry';
@@ -28,13 +27,14 @@ export interface ToastProps {
  * @param ToastProps
  * @returns
  */
-const Toast: React.FC<ToastProps> = ({
-  text,
-  type = 'informational',
-  className = '',
-  iconName = 'badge-alert',
-  showIcon = true,
-}) => {
+function Toast(props: ToastProps) {
+  const {
+    text,
+    type = 'informational',
+    className = '',
+    iconName = 'badge-alert',
+    showIcon = true,
+  } = props;
   return (
     <div className={`toast toast--${type} ${className}`.trim()}>
       <div className="toast__container">
@@ -49,6 +49,6 @@ const Toast: React.FC<ToastProps> = ({
       </div>
     </div>
   );
-};
+}
 
 export default Toast;

package/src/components/molecules/TooltipDisplay/TooltipDisplay.tsx

@@ -17,7 +17,7 @@ export interface TooltipDisplayProps {
   maxWidth?: `${number}px`;
 }
 
-export const TooltipDisplay: React.FC<TooltipDisplayProps> = (props) => {
+export function TooltipDisplay(props: TooltipDisplayProps) {
   const { children, content, side = 'right', maxWidth = '300px' } = props;
   return (
     <Tooltip>
@@ -31,4 +31,4 @@ export const TooltipDisplay: React.FC<TooltipDisplayProps> = (props) => {
       </TooltipContent>
     </Tooltip>
   );
-};
+}

package/src/components/organisms/Booking/BookingDocket/BookingDocket.tsx

@@ -31,7 +31,7 @@ export interface BookingDocketProps {
   resumes: BookingDocketItem[];
 }
 
-export const BookingDocket: React.FC<BookingDocketProps> = (props) => {
+export function BookingDocket(props: BookingDocketProps) {
   const { dates, resumes } = props;
   const [isBookingOpen, setIsBookingOpen] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -162,4 +162,4 @@ export const BookingDocket: React.FC<BookingDocketProps> = (props) => {
       </div>
     </LazyMotion>
   );
-};
+}

package/src/components/organisms/Booking/BookingHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Heading, Text } from '../../atoms/Typography/Typography';
 
 export interface BookingHeaderProps {
@@ -8,7 +7,7 @@ export interface BookingHeaderProps {
   isBooking?: boolean;
 }
 
-export const BookingHeader: React.FC<BookingHeaderProps> = (props) => {
+export function BookingHeader(props: BookingHeaderProps) {
   const { fileNumber, reference, isBooking, location } = props;
   return (
     <div className="space-y-2">
@@ -21,4 +20,4 @@ export const BookingHeader: React.FC<BookingHeaderProps> = (props) => {
       </Text>
     </div>
   );
-};
+}

package/src/components/organisms/Booking/BookingPaxList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
   BookingPax,
   BookingPaxAccomProps,
@@ -124,7 +124,7 @@ const isTransferData = (
  * @param props - The props for the BookingPaxList component.
  * @returns The BookingPaxList component.
  */
-export const BookingPaxList: React.FC<BookingPaxProps> = (props) => {
+export function BookingPaxList(props: BookingPaxProps) {
   const {
     data,
     isSubmitted,
@@ -285,4 +285,4 @@ export const BookingPaxList: React.FC<BookingPaxProps> = (props) => {
       })}
     </BookingPax>
   );
-};
+}

package/src/components/organisms/Booking/BookingStep/BookingStep.tsx

@@ -3,7 +3,7 @@ import {
   StepperTimeline,
   StepperTimelineItem,
 } from '@/src/components/molecules/StepperTimeline/StepperTimeline';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import './BookingStep.css';
 
 export interface BookingStepProps {
@@ -15,7 +15,7 @@ export interface BookingStepProps {
   onNextClick?: (step: StepperTimelineItem, index: number) => void;
 }
 
-export const BookingStep: React.FC<BookingStepProps> = (props) => {
+export function BookingStep(props: BookingStepProps) {
   const { steps, className, nextDisabled, currentStep, onStepChange, onNextClick } =
     props;
 
@@ -54,4 +54,4 @@ export const BookingStep: React.FC<BookingStepProps> = (props) => {
       </Button>
     </div>
   );
-};
+}

package/src/components/organisms/DialogBookingAddItem/AddItemNewService.tsx

@@ -24,7 +24,7 @@ export interface AddItemNewServiceProps {
   onBack: () => void;
 }
 
-export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
+export function AddItemNewService(props: AddItemNewServiceProps) {
   const { date, options, clients, onServiceChange, onNext, onBack } = props;
   const [service, setService] = useState<ServiceType>('accommodation');
   const [selectedClients, setSelectedClients] = useState<BookingPaxClientInfo[]>([]);
@@ -113,4 +113,4 @@ export const AddItemNewService: React.FC<AddItemNewServiceProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogBookingAddItem/AddItemSelector.tsx

@@ -10,7 +10,8 @@ export interface AddItemSelectorProps {
   onAddItem?: (type: AddItemType) => void;
 }
 
-export const AddItemSelector: React.FC<AddItemSelectorProps> = ({ onAddItem }) => {
+export function AddItemSelector(props: AddItemSelectorProps) {
+  const { onAddItem } = props;
   return (
     <div className="space-y-9">
       <Text size="sm" variant="medium">
@@ -40,4 +41,4 @@ export const AddItemSelector: React.FC<AddItemSelectorProps> = ({ onAddItem }) =
       </Text>
     </div>
   );
-};
+}

package/src/components/organisms/DialogBookingAddItem/DialogBookingAddItem.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, domAnimation, LazyMotion } from 'motion/react';
 import * as motion from 'motion/react-m';
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { BookingPaxClientInfo } from '../../molecules/BookingPax';
 import { ServiceOption, ServiceType } from '../../molecules/ServiceSelector';
 import { DEFAULT_SERVICE_SELECTOR_OPTIONS } from '../../molecules/ServiceSelector/ServiceSelector';
@@ -20,7 +20,7 @@ export interface DialogBookingAddItemProps {
   onBackToSelector?: () => void;
 }
 
-export const DialogBookingAddItem: React.FC<DialogBookingAddItemProps> = (props) => {
+export function DialogBookingAddItem(props: DialogBookingAddItemProps) {
   const {
     open,
     serviceDate = [],
@@ -117,4 +117,4 @@ export const DialogBookingAddItem: React.FC<DialogBookingAddItemProps> = (props)
       </LazyMotion>
     </Dialog>
   );
-};
+}

package/src/components/organisms/DialogBookingConfirm/BookingCancellationPolicy.tsx

@@ -30,7 +30,7 @@ export interface BookingCancellationPolicyProps {
  * @param props - The props for the BookingCancellationPolicy component.
  * @returns The BookingCancellationPolicy component.
  */
-export const BookingCancellationPolicy = (props: BookingCancellationPolicyProps) => {
+export function BookingCancellationPolicy(props: BookingCancellationPolicyProps) {
   const { open, setOpen, cancellations } = props;
   return (
     <DialogBookingConfirm
@@ -41,4 +41,4 @@ export const BookingCancellationPolicy = (props: BookingCancellationPolicyProps)
       <DialogContentPolicy.List cancellations={cancellations} />
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogBookingConfirm/BookingMailSent.tsx

@@ -1,5 +1,4 @@
 import { Button, Heading } from '@/src';
-import React from 'react';
 import { DialogBookingConfirm } from './DialogBookingConfirm';
 
 export interface BookingMailSentProps {
@@ -30,7 +29,7 @@ export interface BookingMailSentProps {
  * @param props - The props for the BookingMailSent component.
  * @returns
  */
-export const BookingMailSent: React.FC<BookingMailSentProps> = (props) => {
+export function BookingMailSent(props: BookingMailSentProps) {
   const { open, setOpen, onNext } = props;
   return (
     <DialogBookingConfirm open={open} setOpen={setOpen} className="!max-w-[800px]">
@@ -53,4 +52,4 @@ export const BookingMailSent: React.FC<BookingMailSentProps> = (props) => {
       </div>
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogBookingConfirm/BookingReference.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
 import { Text } from '../../atoms/Typography/Typography';
@@ -38,7 +38,7 @@ export interface BookingReferenceProps {
  * @param props - The props for the BookingReference component.
  * @returns The BookingReference component.
  */
-export const BookingReference: React.FC<BookingReferenceProps> = (props) => {
+export function BookingReference(props: BookingReferenceProps) {
   const { open, setOpen, onCancel, onConfirm } = props;
   const [reference, setReference] = useState('');
   return (
@@ -71,4 +71,4 @@ export const BookingReference: React.FC<BookingReferenceProps> = (props) => {
       </div>
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogBookingConfirm/BookingSuccess.tsx

@@ -1,5 +1,4 @@
 import { Button, Heading, Text } from '@/src';
-import React from 'react';
 import { DialogBookingConfirm } from './DialogBookingConfirm';
 
 export interface BookingSuccessProps {
@@ -36,7 +35,7 @@ export interface BookingSuccessProps {
  * @param props - The props for the BookingSuccess component.
  * @returns The BookingSuccess component.
  */
-export const BookingSuccess: React.FC<BookingSuccessProps> = (props) => {
+export function BookingSuccess(props: BookingSuccessProps) {
   const { open, bookingName, setOpen, onNext } = props;
   return (
     <DialogBookingConfirm open={open} setOpen={setOpen} className="!max-w-[800px]">
@@ -64,4 +63,4 @@ export const BookingSuccess: React.FC<BookingSuccessProps> = (props) => {
       </div>
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogBookingConfirm/DialogBookingConfirm.tsx

@@ -49,7 +49,7 @@ interface DialogBookingConfirmProps {
  * @param props - The props for the DialogBookingConfirm component.
  * @returns The DialogBookingConfirm component.
  */
-export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
+export function DialogBookingConfirm(props: DialogBookingConfirmProps) {
   const {
     open,
     title,
@@ -70,7 +70,7 @@ export const DialogBookingConfirm = (props: DialogBookingConfirmProps) => {
       {children}
     </Dialog>
   );
-};
+}
 
 DialogBookingConfirm.Reference = BookingReference;
 DialogBookingConfirm.CancellationPolicy = BookingCancellationPolicy;

package/src/components/organisms/DialogCancelService/CancelBooking/CancelBooking.tsx

@@ -7,7 +7,7 @@ import {
   CancellationsList,
 } from '@/src/components/molecules/DialogContentPolicy/DialogCancellationList';
 import { PaxChips, PaxCount } from '@/src/components/molecules/PaxChips/PaxChips';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import './CancelBooking.css';
 
 export interface CancelBookingProps {
@@ -22,7 +22,7 @@ export interface CancelBookingProps {
   onSubmit: () => void;
 }
 
-export const CancelBooking: React.FC<CancelBookingProps> = (props) => {
+export function CancelBooking(props: CancelBookingProps) {
   const { bookingNo, cancellationPolicies, pax, bookingDetails, onSubmit } = props;
   const [accepted, setAccepted] = useState(false);
 
@@ -95,4 +95,4 @@ export const CancelBooking: React.FC<CancelBookingProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogCancelService/CancelPolicy.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from '../../atoms/Button/Button';
 import { Text } from '../../atoms/Typography/Typography';
 import {
@@ -38,7 +37,7 @@ export interface CancelPolicyProps {
   onProceedToPayment?: () => void;
 }
 
-export const CancelPolicy: React.FC<CancelPolicyProps> = (props) => {
+export function CancelPolicy(props: CancelPolicyProps) {
   const { cancellations, isPolicyTransgressed, isProcessing, onProceedToPayment } = props;
   return (
     <div>
@@ -65,4 +64,4 @@ export const CancelPolicy: React.FC<CancelPolicyProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogCancelService/ConfirmDelete/ConfirmDelete.tsx

@@ -3,7 +3,6 @@ import { IconName } from '@/src/components/atoms/Icon/Icon';
 import FromTo from '@/src/components/molecules/FromTo/FromTo';
 import TextWithIcon from '@/src/components/molecules/TextWithIcon/TextWithIcon';
 import { ServiceType } from '@/src/types/table';
-import React from 'react';
 import { Text } from '../../../atoms/Typography/Typography';
 import './ConfirmDelete.css';
 
@@ -32,7 +31,7 @@ const mappedServiceName: Record<ConfirmDeleteProps['serviceType'], string> = {
   [ServiceType.OTHER_SERVICE]: 'Other Service',
 };
 
-export const ConfirmDelete: React.FC<ConfirmDeleteProps> = (props) => {
+export function ConfirmDelete(props: ConfirmDeleteProps) {
   const { serviceType, serviceName, transferData, onCancel, onDelete } = props;
   return (
     <div className="confirm-delete">
@@ -64,4 +63,4 @@ export const ConfirmDelete: React.FC<ConfirmDeleteProps> = (props) => {
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogCancelService/DialogCancelService.tsx

@@ -13,7 +13,7 @@ export interface DialogCancelServiceProps {
   setOpen: (open: boolean) => void;
 }
 
-export const DialogCancelService = (props: DialogCancelServiceProps) => {
+export function DialogCancelService(props: DialogCancelServiceProps) {
   const { open, children, title, className, setOpen } = props;
   return (
     <DialogBookingConfirm
@@ -24,7 +24,7 @@ export const DialogCancelService = (props: DialogCancelServiceProps) => {
       {children}
     </DialogBookingConfirm>
   );
-};
+}
 
 DialogCancelService.FromList = FromList;
 DialogCancelService.Confirm = ConfirmDelete;

package/src/components/organisms/DialogCancelService/FromList.tsx

@@ -13,9 +13,9 @@ export interface FromListProps<T extends TableRowData<T> = DetailResumeItem> {
   onSaveAndUpdate?: () => void;
 }
 
-export const FromList = <T extends TableRowData<T> = DetailResumeItem>(
+export function FromList<T extends TableRowData<T> = DetailResumeItem>(
   props: FromListProps<T>
-) => {
+) {
   const { data, columns, totalRows, onRemove, onCancel, onSaveAndUpdate } = props;
 
   // When using default columns, we need to ensure T is compatible with DetailResumeItem
@@ -47,4 +47,4 @@ export const FromList = <T extends TableRowData<T> = DetailResumeItem>(
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogComparison/DialogComparison.tsx

@@ -62,7 +62,7 @@ export const isComparisonOtherService = (
   return data.Type === ServiceType.OTHER_SERVICE;
 };
 
-export const DialogComparison = (props: DialogComparisonProps) => {
+export function DialogComparison(props: DialogComparisonProps) {
   const { open, data, columns, setOpen, onBookNow } = props;
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
   const [filteredData, setFilteredData] = useState<MultiComparisonData[]>(data);
@@ -154,4 +154,4 @@ export const DialogComparison = (props: DialogComparisonProps) => {
       </div>
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirm.tsx

@@ -20,7 +20,7 @@ const DialogDeleteConfirmText = (props: { children: React.ReactNode }) => {
   );
 };
 
-export const DialogDeleteConfirm = (props: DialogDeleteConfirmProps) => {
+export function DialogDeleteConfirm(props: DialogDeleteConfirmProps) {
   const { open, title, children, setOpen } = props;
   return (
     <DialogBookingConfirm
@@ -32,7 +32,7 @@ export const DialogDeleteConfirm = (props: DialogDeleteConfirmProps) => {
       {children}
     </DialogBookingConfirm>
   );
-};
+}
 
 DialogDeleteConfirm.Text = DialogDeleteConfirmText;
 DialogDeleteConfirm.Wrapper = DialogDeleteConfirmWrapper;

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmMultiple/DialogDeleteConfirmMultiple.tsx

@@ -1,5 +1,5 @@
 import Toast from '@/src/components/molecules/Toast';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Checkbox from '../../../atoms/Checkbox/Checkbox';
 import { DialogDeleteConfirm } from '../DialogDeleteConfirm';
 import './DialogDeleteConfirmMultiple.css';
@@ -15,9 +15,7 @@ export interface DialogDeleteConfirmMultipleProps {
   quotes: AvailableQuote[];
 }
 
-export const DialogDeleteConfirmMultiple: React.FC<DialogDeleteConfirmMultipleProps> = (
-  props
-) => {
+export function DialogDeleteConfirmMultiple(props: DialogDeleteConfirmMultipleProps) {
   const { quotes, onCancel, onDelete } = props;
 
   const [selectedQuotes, setSelectedQuotes] = useState<string[]>([]);
@@ -81,4 +79,4 @@ export const DialogDeleteConfirmMultiple: React.FC<DialogDeleteConfirmMultiplePr
       </div>
     </DialogDeleteConfirm.Wrapper>
   );
-};
+}

package/src/components/organisms/DialogDeleteConfirm/DialogDeleteConfirmWrapper.tsx

@@ -9,7 +9,7 @@ export interface DialogDeleteConfirmWrapperProps {
   children: React.ReactNode;
 }
 
-export const DialogDeleteConfirmWrapper = (props: DialogDeleteConfirmWrapperProps) => {
+export function DialogDeleteConfirmWrapper(props: DialogDeleteConfirmWrapperProps) {
   const {
     onCancel,
     cancelText = 'Cancel',
@@ -31,4 +31,4 @@ export const DialogDeleteConfirmWrapper = (props: DialogDeleteConfirmWrapperProp
       </div>
     </div>
   );
-};
+}

package/src/components/organisms/DialogQuoteRename/DialogQuoteRename.tsx

@@ -11,7 +11,7 @@ export interface DialogQuoteRenameProps {
   onSubmit: (quoteName: string) => void;
 }
 
-export const DialogQuoteRename = (props: DialogQuoteRenameProps) => {
+export function DialogQuoteRename(props: DialogQuoteRenameProps) {
   const { open, setOpen, quoteName, onSubmit } = props;
   const [value, setValue] = useState(quoteName);
 
@@ -45,4 +45,4 @@ export const DialogQuoteRename = (props: DialogQuoteRenameProps) => {
       </div>
     </DialogBookingConfirm>
   );
-};
+}

package/src/components/organisms/DialogSendingMail/DialogSendingMail.tsx

@@ -10,7 +10,7 @@ export interface DialogSendingMailProps {
   type?: 'booking' | 'quotation';
 }
 
-export const DialogSendingMail = (props: DialogSendingMailProps) => {
+export function DialogSendingMail(props: DialogSendingMailProps) {
   const { open, setOpen, children, type = 'booking' } = props;
 
   return (
@@ -23,7 +23,7 @@ export const DialogSendingMail = (props: DialogSendingMailProps) => {
       {children}
     </DialogBookingConfirm>
   );
-};
+}
 
 DialogSendingMail.SingleQuote = DialogSendingMailContent;
 DialogSendingMail.MultipleQuotes = DialogSendingMailMultiple;

package/src/components/organisms/DialogSendingMail/DialogSendingMailContent.tsx

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import Button from '../../atoms/Button/Button';
 import Input from '../../atoms/Inputs/Input/Input';
@@ -21,9 +21,7 @@ export interface DialogSendingMailContentProps {
   onCancel?: () => void;
 }
 
-export const DialogSendingMailContent: React.FC<DialogSendingMailContentProps> = (
-  props
-) => {
+export function DialogSendingMailContent(props: DialogSendingMailContentProps) {
   const { userInfo, subject, type, onSubmit, onPreviewAttachment, onCancel } = props;
 
   const messageText = () => {
@@ -113,4 +111,4 @@ export const DialogSendingMailContent: React.FC<DialogSendingMailContentProps> =
       </form>
     </Form>
   );
-};
+}

package/src/components/organisms/DialogSendingMail/DialogSendingMailMultiple/DialogSendingMailMultiple.tsx

@@ -1,6 +1,6 @@
 import Checkbox from '@/src/components/atoms/Checkbox/Checkbox';
 import SelectedValue from '@/src/components/atoms/SelectedValue/SelectedValue';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
   DialogSendingMailContent,
   DialogSendingMailContentProps,
@@ -57,9 +57,7 @@ export interface DialogSendingMailMultipleProps extends Omit<
  *
  * @param props - The props of the component
  */
-export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps> = (
-  props
-) => {
+export function DialogSendingMailMultiple(props: DialogSendingMailMultipleProps) {
   const { data, onSelected, onSubmit, onPreviewAttachment, ...rest } = props;
 
   const [isSelectAll, setIsSelectAll] = useState(false);
@@ -179,4 +177,4 @@ export const DialogSendingMailMultiple: React.FC<DialogSendingMailMultipleProps>
       />
     </div>
   );
-};
+}