@janbox/storefront-ui 1.0.17 → 1.0.19

package/dist/lib/notifications/notifications.jsx

@@ -0,0 +1,161 @@
+/** @jsxImportSource @emotion/react */
+import { useCallback, useEffect, useRef, useSyncExternalStore } from 'react';
+import { FloatingPortal } from '@floating-ui/react';
+import { isNil } from 'lodash-es';
+import { AnimatePresence, motion, useAnimation } from 'motion/react';
+import { notificationStore } from './helpers';
+import { getColorShadesByVariant } from '../../utils';
+import { FLOATING_Z_INDEX, getTypographyVar, mediaQuery } from '../../theme';
+export const Notifications = () => {
+    const { entries } = useSyncExternalStore(notificationStore.subscribe, notificationStore.getSnapshot, notificationStore.getServerSnapshot);
+    return (<FloatingPortal>
+      <div css={{
+            zIndex: FLOATING_Z_INDEX + 1,
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            pointerEvents: 'none',
+            padding: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+            gap: 8,
+        }}>
+        <AnimatePresence mode="popLayout">
+          {entries.map((notification) => {
+            return <Notification key={notification.id} notification={notification}/>;
+        })}
+        </AnimatePresence>
+      </div>
+    </FloatingPortal>);
+};
+const Notification = ({ notification }) => {
+    const { main, light } = getColorShadesByVariant(notification.color);
+    const timerRef = useRef(null);
+    const controls = useAnimation();
+    const progressControls = useAnimation();
+    const startTimeRef = useRef(Date.now());
+    const remainingTimeRef = useRef(notification.duration ?? 3000);
+    const removeNotification = useCallback(() => {
+        notificationStore.setState((prev) => ({
+            ...prev,
+            entries: prev.entries.filter((n) => n.id !== notification.id),
+        }));
+    }, [notification.id]);
+    const clearTimer = useCallback(() => {
+        if (isNil(timerRef.current))
+            return;
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }, []);
+    const startTimer = useCallback((timeLeft) => {
+        clearTimer();
+        const duration = timeLeft ?? remainingTimeRef.current;
+        startTimeRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            removeNotification();
+        }, duration);
+    }, [clearTimer, removeNotification]);
+    useEffect(() => {
+        startTimer(notification.duration ?? 3000);
+        // Start progress bar animation - chạy từ 0% sang 100%
+        progressControls.start({
+            scaleX: 1,
+            transition: {
+                duration: (notification.duration ?? 3000) / 1000,
+                ease: 'linear',
+            },
+        });
+        return () => {
+            clearTimer();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleMouseEnter = useCallback(() => {
+        // Tính thời gian còn lại
+        const elapsed = Date.now() - startTimeRef.current;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+        clearTimer();
+        progressControls.stop();
+    }, [clearTimer, progressControls]);
+    const handleMouseLeave = useCallback(() => {
+        startTimer(remainingTimeRef.current);
+        // Tiếp tục progress bar với thời gian còn lại - chạy đến 100%
+        progressControls.start({
+            scaleX: 1,
+            transition: {
+                duration: remainingTimeRef.current / 1000,
+                ease: 'linear',
+            },
+        });
+    }, [startTimer, progressControls]);
+    return (<motion.div layout initial={{ opacity: 0, x: 100 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 300 }} transition={{ duration: 0.3 }} css={{
+            backgroundColor: light,
+            outlineColor: main,
+            width: 440,
+            borderRadius: 12,
+            outlineWidth: 1,
+            outlineOffset: -1,
+            outlineStyle: 'solid',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            maxWidth: '100%',
+            pointerEvents: 'auto',
+            cursor: 'grab',
+            padding: 16,
+            overflow: 'hidden',
+            position: 'relative',
+        }} drag="x" dragConstraints={{ left: 0, right: 0 }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onDragEnd={(_event, info) => {
+            if (Math.abs(info.offset.x) > 100) {
+                // vuốt đủ xa thì ẩn
+                controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
+            }
+            else {
+                // không đủ xa thì quay lại
+                controls.start({ x: 0 });
+            }
+        }}>
+      <div css={{
+            fontSize: getTypographyVar('sm').fontSize,
+            lineHeight: getTypographyVar('sm').lineHeight,
+            fontWeight: 500,
+            [mediaQuery('md')]: {
+                fontSize: getTypographyVar('base').fontSize,
+                lineHeight: getTypographyVar('base').lineHeight,
+            },
+        }}>
+        {notification.title ?? <>&nbsp;</>}
+      </div>
+      <div css={{
+            fontSize: getTypographyVar('xs').fontSize,
+            lineHeight: getTypographyVar('xs').lineHeight,
+            [mediaQuery('md')]: {
+                fontSize: getTypographyVar('sm').fontSize,
+                lineHeight: getTypographyVar('sm').lineHeight,
+            },
+        }}>
+        {notification.message ?? <>&nbsp;</>}
+      </div>
+      <div css={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 4,
+            paddingLeft: 4,
+            paddingRight: 4,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        }}>
+        <motion.div css={{
+            height: 4,
+            width: '100%',
+            borderRadius: 9999,
+        }} style={{
+            backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
+            transformOrigin: 'left',
+        }} initial={{ scaleX: 0 }} animate={progressControls}/>
+      </div>
+    </motion.div>);
+};

package/dist/lib/otp-input/index.d.ts

@@ -1,2 +1 @@
 export * from './otp-input';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/otp-input/index.js

@@ -0,0 +1 @@
+export * from './otp-input';

package/dist/lib/otp-input/otp-input.d.ts

@@ -1,3 +1,2 @@
 import { OtpInputProps } from './types';
 export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=otp-input.d.ts.map

package/dist/lib/otp-input/otp-input.jsx

@@ -0,0 +1,112 @@
+/** @jsxImportSource @emotion/react */
+import { useRef, useEffect } from 'react';
+import { times } from 'lodash-es';
+import { Input } from '../input';
+import { useControllableState } from '../../hooks';
+import { getTypographyVar, mediaQuery } from '../../theme';
+export const OtpInput = ({ length = 6, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }) => {
+    const [otp, setOtp] = useControllableState({
+        defaultValue: times(length, (num) => defaultValue?.at(num) ?? ''),
+        value: value?.split(''),
+    });
+    const inputRefs = useRef([]);
+    const getInputIndex = (target) => {
+        return Number(target.dataset.index);
+    };
+    useEffect(() => {
+        if (autoFocus) {
+            inputRefs.current.at(0)?.focus();
+        }
+    }, [autoFocus]);
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        const value = e.target.value;
+        const index = getInputIndex(e.target);
+        // Chỉ cho phép nhập số
+        if (value && !/^\d$/.test(value))
+            return;
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+        // Gọi callback khi có thay đổi
+        onChange?.(newOtp.join(''));
+        // Tự động chuyển sang ô tiếp theo
+        if (value && index < length - 1) {
+            inputRefs.current.at(index + 1)?.focus();
+        }
+        // Gọi callback khi hoàn thành
+        if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
+            onFullfilled?.(newOtp.join(''));
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        const index = getInputIndex(e.target);
+        // Xử lý phím Backspace
+        if (e.key === 'Backspace') {
+            if (otp[index]) {
+                // Xóa ký tự hiện tại
+                const newOtp = [...otp];
+                newOtp[index] = '';
+                setOtp(newOtp);
+                onChange?.(newOtp.join(''));
+            }
+            else if (index > 0) {
+                // Chuyển về ô trước đó và xóa
+                const newOtp = [...otp];
+                newOtp[index - 1] = '';
+                setOtp(newOtp);
+                inputRefs.current.at(index - 1)?.focus();
+                onChange?.(newOtp.join(''));
+            }
+        }
+        // Xử lý phím mũi tên
+        if (e.key === 'ArrowLeft' && index > 0) {
+            inputRefs.current.at(index - 1)?.focus();
+        }
+        if (e.key === 'ArrowRight' && index < length - 1) {
+            inputRefs.current.at(index + 1)?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain');
+        const pastedDigits = pastedData.replace(/\D/g, '').slice(0, length);
+        if (pastedDigits) {
+            const newOtp = [...otp];
+            pastedDigits.split('').forEach((digit, index) => {
+                if (index < length) {
+                    newOtp[index] = digit;
+                }
+            });
+            setOtp(newOtp);
+            onChange?.(newOtp.join(''));
+            // Focus vào ô cuối cùng được điền
+            const lastFilledIndex = Math.min(pastedDigits.length - 1, length - 1);
+            inputRefs.current.at(lastFilledIndex)?.focus();
+            // Kiểm tra xem đã hoàn thành chưa
+            if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
+                onFullfilled?.(newOtp.join(''));
+            }
+        }
+    };
+    const onFocus = (e) => {
+        e.target.select();
+    };
+    return (<div css={{ display: 'flex', width: '100%', gap: '0.5rem', [mediaQuery('sm')]: { gap: '0.75rem' } }}>
+      {otp.map((digit, index) => (<div key={index} css={{ flex: '1 1 0%', position: 'relative' }}>
+          <Input ref={(el) => {
+                inputRefs.current[index] = el;
+            }} type="text" inputMode="numeric" pattern="\d*" maxLength={1} data-index={index} value={digit} onChange={handleChange} onFocus={onFocus} onKeyDown={handleKeyDown} onPaste={index === 0 ? handlePaste : undefined} disabled={disabled} readOnly={isLoading} css={{
+                textAlign: 'center',
+                fontWeight: 500,
+                fontSize: getTypographyVar('lg').fontSize,
+                lineHeight: getTypographyVar('lg').lineHeight,
+            }} xs={{ size: 'md' }} error={error}/>
+        </div>))}
+    </div>);
+};

package/dist/lib/otp-input/types.d.ts

@@ -17,4 +17,3 @@ type OtpInputExtendedProps = ResponsiveDesign<OtpInputResponsiveProps> & {
 };
 export type OtpInputProps = ShallowMerge<JSX.IntrinsicElements['div'], OtpInputExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/otp-input/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/pagination/helpers.d.ts

@@ -11,4 +11,3 @@ type PageRangeItem = {
 export declare const getPageRange: (currentPage: number, totalPages: number, siblingCount?: number) => PageRangeItem[];
 export declare const getPaginationProps: (extended: PaginationProps) => PaginationProps;
 export {};
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/pagination/helpers.js

@@ -1,57 +1,66 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
+// Default values for the pagination component
 const DEFAULT_SIBLING_COUNT = 2;
-const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
-  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-  const shouldShowLeftDots = leftSiblingIndex > 2;
-  const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
-  const result = [];
-  result.push({ type: "page", page: 1 });
-  if (shouldShowLeftDots) {
-    result.push({ type: "ellipsis" });
-  } else if (leftSiblingIndex > 1) {
-    for (let i = 2; i < leftSiblingIndex; i++) {
-      result.push({ type: "page", page: i });
+export const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
+    // Calculate range based on siblingCount
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    // Always show at least 1 + 2*siblingCount pages (if available)
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    // Output array with page numbers and dots
+    const result = [];
+    // Always include page 1
+    result.push({ type: 'page', page: 1 });
+    // Add left dots if needed
+    if (shouldShowLeftDots) {
+        result.push({ type: 'ellipsis' });
     }
-  }
-  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-    if (i !== 1 && i !== totalPages) {
-      result.push({ type: "page", page: i });
+    else if (leftSiblingIndex > 1) {
+        // Fill in numbers between 1 and leftSiblingIndex if no dots
+        for (let i = 2; i < leftSiblingIndex; i++) {
+            result.push({ type: 'page', page: i });
+        }
     }
-  }
-  if (shouldShowRightDots) {
-    result.push({ type: "ellipsis" });
-  } else if (rightSiblingIndex < totalPages) {
-    for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
-      result.push({ type: "page", page: i });
+    // Add main page numbers
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        if (i !== 1 && i !== totalPages) {
+            result.push({ type: 'page', page: i });
+        }
     }
-  }
-  if (totalPages > 1) {
-    result.push({ type: "page", page: totalPages });
-  }
-  return result;
+    // Add right dots if needed
+    if (shouldShowRightDots) {
+        result.push({ type: 'ellipsis' });
+    }
+    else if (rightSiblingIndex < totalPages) {
+        // Fill in numbers between rightSiblingIndex and totalPages if no dots
+        for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+            result.push({ type: 'page', page: i });
+        }
+    }
+    // Always include last page if more than 1 page
+    if (totalPages > 1) {
+        result.push({ type: 'page', page: totalPages });
+    }
+    return result;
 };
 const defaultProps = {
-  xs: {
-    size: "sm"
-  },
-  showPrevPageButton: true,
-  showNextPageButton: true,
-  states: {
-    normal: {
-      color: "neutral",
-      variant: "outlined"
+    xs: {
+        size: 'sm',
+    },
+    showPrevPageButton: true,
+    showNextPageButton: true,
+    states: {
+        normal: {
+            color: 'neutral',
+            variant: 'outlined',
+        },
+        active: {
+            color: 'primary',
+            variant: 'outlined',
+        },
     },
-    active: {
-      color: "primary",
-      variant: "outlined"
-    }
-  }
-};
-const getPaginationProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
 };
-export {
-  getPageRange,
-  getPaginationProps
+export const getPaginationProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/pagination/index.d.ts

@@ -1,4 +1,3 @@
 export * from './pagination';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/pagination/index.js

@@ -0,0 +1,3 @@
+export * from './pagination';
+export * from './types';
+export * from './helpers';

package/dist/lib/pagination/pagination.d.ts

@@ -1,3 +1,2 @@
 import { PaginationProps } from './types';
-export declare const Pagination: import('react').ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=pagination.d.ts.map
+export declare const Pagination: import("react").ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib/pagination/pagination.jsx

@@ -0,0 +1,143 @@
+/** @jsxImportSource @emotion/react */
+import { forwardRef, Fragment } from 'react';
+import { getPaginationProps, getPageRange } from './helpers';
+import { Icon } from '../icon';
+import { IconButton } from '../icon-button';
+import { Text } from '../text';
+import ArrowLeftIcon from '../../assets/svg/arrow-left.svg?raw';
+import ArrowForwardIcon from '../../assets/svg/arrow-forward.svg?raw';
+import ArrowRightIcon from '../../assets/svg/arrow-right.svg?raw';
+import { getTypographyVar } from '../../theme';
+import { getSizeVariantState } from '../../utils';
+export const Pagination = forwardRef((_props, ref) => {
+    const { page = 1, count = 1, onChange, disabled, showFirstPageButton, showLastPageButton, showNextPageButton, showPrevPageButton, siblingCount, states, xs, sm, md, lg, ...rest } = getPaginationProps(_props);
+    const sizeVariantState = {
+        xs: getSizeVariantState(xs?.size),
+        sm: getSizeVariantState(sm?.size),
+        md: getSizeVariantState(md?.size),
+        lg: getSizeVariantState(lg?.size),
+    };
+    // Get the current active siblingCount based on screen
+    // Generate the page numbers to display with responsive siblingCount
+    const pageRange = getPageRange(page, count, siblingCount);
+    const css = [
+        {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+        },
+    ];
+    const handlePageClick = (e) => {
+        const newPage = Number(e.currentTarget.value);
+        if (disabled || newPage === page)
+            return;
+        if (onChange)
+            onChange(newPage);
+    };
+    const handlePrevClick = (_e) => {
+        if (disabled || page <= 1)
+            return;
+        if (onChange)
+            onChange(page - 1);
+    };
+    const handleNextClick = (_e) => {
+        if (disabled || page >= count)
+            return;
+        if (onChange)
+            onChange(page + 1);
+    };
+    const handleFirstClick = (_e) => {
+        if (disabled || page <= 1)
+            return;
+        if (onChange)
+            onChange(1);
+    };
+    const handleLastClick = (_e) => {
+        if (disabled || page >= count)
+            return;
+        if (onChange)
+            onChange(count);
+    };
+    const PaginationButton = (buttonProps) => {
+        return (<IconButton disabled={disabled} variant={states?.normal?.variant} {...buttonProps} xs={{ size: xs?.size, ...buttonProps.xs }} sm={{ size: sm?.size, ...buttonProps.sm }} md={{ size: md?.size, ...buttonProps.md }} lg={{ size: lg?.size, ...buttonProps.lg }}/>);
+    };
+    const PaginationIcon = (iconProps) => {
+        return (<Icon xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+            }} {...iconProps}/>);
+    };
+    return (<div css={css} {...rest} ref={ref}>
+      {/* First page button */}
+
+      {showFirstPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handleFirstClick}>
+          <PaginationIcon css={{ transform: 'rotate(180deg)' }} source={ArrowForwardIcon}/>
+        </PaginationButton>)}
+
+      {/* Previous page button */}
+      {showPrevPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handlePrevClick}>
+          <PaginationIcon source={ArrowLeftIcon}/>
+        </PaginationButton>)}
+
+      {/* Page numbers */}
+      {pageRange.map((pageItem, index) => {
+            const isActive = pageItem.type === 'page' && pageItem.page === page;
+            return (<Fragment key={index}>
+            {pageItem.type === 'ellipsis' && <PaginationButton color={states?.normal?.color}>...</PaginationButton>}
+            {pageItem.type === 'page' && (<PaginationButton color={isActive ? states?.active?.color : states?.normal?.color} value={pageItem.page} variant={isActive ? states?.active?.variant : states?.normal?.variant} onClick={handlePageClick}>
+                <Text xs={{
+                        css: {
+                            paddingLeft: 2,
+                            paddingRight: 2,
+                            ...(sizeVariantState.xs.textVariant
+                                ? {
+                                    fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
+                                    lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight,
+                                }
+                                : {}),
+                        },
+                    }} sm={{
+                        css: sizeVariantState.sm.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight,
+                            }
+                            : {},
+                    }} md={{
+                        css: sizeVariantState.md.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight,
+                            }
+                            : {},
+                    }} lg={{
+                        css: sizeVariantState.lg.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight,
+                            }
+                            : {},
+                    }}>
+                  {pageItem.page}
+                </Text>
+              </PaginationButton>)}
+          </Fragment>);
+        })}
+
+      {/* Next page button */}
+      {showNextPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleNextClick}>
+          <PaginationIcon source={ArrowRightIcon}/>
+        </PaginationButton>)}
+
+      {/* Last page button */}
+      {showLastPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleLastClick}>
+          <PaginationIcon source={ArrowForwardIcon}/>
+        </PaginationButton>)}
+    </div>);
+});

package/dist/lib/pagination/types.d.ts

@@ -22,4 +22,3 @@ type PaginationExtendedProps = ResponsiveDesign<PaginationResponsiveProps> & {
 };
 export type PaginationProps = ShallowMerge<JSX.IntrinsicElements['div'], PaginationExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/pagination/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/phone-input/index.d.ts

@@ -1,3 +1,2 @@
 export * from './phone-input';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/phone-input/index.js

@@ -0,0 +1,2 @@
+export * from './phone-input';
+export * from './types';

package/dist/lib/phone-input/phone-input.d.ts

@@ -1,3 +1,2 @@
 import { PhoneInputProps } from './types';
 export declare const PhoneInput: ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ref, ...props }: PhoneInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=phone-input.d.ts.map