@mycause/ui 0.0.0-cd5f92c2 → 0.0.0-cd65c25d

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 0.18.3
+
+###### Tues, 23 Jan 2024
+
+- Update stats block
+
+## 0.18.2
+
+###### Mon, 22 Jan 2024
+
+- Add new components for My Account:
+  - Sidebar
+  - Stats blocks
+  - Progressbar
+  - FRP preview card
+  - FRP closed card
+  - Favorite charities card
+
+## 0.18.1
+
+###### Wed, 23 Aug 2023
+
+- Create modal show image
+
+## 0.18.0
+
+###### Wed, 23 Aug 2023
+
+- Nav
+- Add props for login button under "I'm A Charity" menu
+
+## 0.17.9
+
+- Update UI component for new parter dashboard
+
 ## 0.17.8
 
 ###### Wed, 23 Aug 2023

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -30,3 +30,9 @@ export declare const SingleDatePickerStory: {
         name: string;
     };
 };
+export declare const SingleDatePickerCustomHeaderStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/date-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DatePicker } from "./date-picker";
 export { default as SingleDatePicker } from "./single-date-picker";
+export { default as CustomHeaderSingleDatePicker, } from "./single-date-picker-custom-header";

package/dist/components/date-picker/single-date-picker-custom-header.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import moment from "moment";
+export interface DatePickerProps {
+    id: string;
+    date: moment.Moment | null;
+    onDateChange: (date: moment.Moment | null) => void;
+    onFocusChange: (arg: boolean | null) => void;
+    focused: boolean | null;
+    placeholder?: string;
+    disabled?: boolean;
+    color?: string;
+    required?: boolean;
+    numberOfMonths?: number;
+    inputIconPosition?: "before" | "after";
+    orientation?: "horizontal" | "vertical";
+    customInputIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+    customCloseIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
+    displayFormat?: string;
+    error?: boolean;
+    label?: string;
+    width?: string;
+    isOutsideRange?: () => boolean;
+    renderCalendarInfo?: () => string | JSX.Element;
+    calendarInfoPosition?: "before" | "after" | "top" | "bottom";
+    navPrev?: string | JSX.Element;
+    navNext?: string | JSX.Element;
+    showDefaultInputIcon?: boolean;
+    startYear?: number;
+    endYear?: number;
+}
+declare const CustomHeaderSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, startYear, endYear, ...rest }: DatePickerProps) => JSX.Element;
+export default CustomHeaderSingleDatePicker;

package/dist/components/favorite-charity-item/favorite-charity-item.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface FavoriteCharityItemProps {
+    className?: string;
+    index?: number;
+    charityLogoLink?: string;
+    charityName?: string;
+    charityFavorites?: boolean;
+    handleClick?: () => void;
+    handleClickItem?: () => void;
+    showHeartToggle?: boolean;
+    charityTextLink?: string;
+    width?: string;
+}
+declare const FavoriteCharityItem: React.FC<FavoriteCharityItemProps>;
+export default FavoriteCharityItem;

package/dist/components/favorite-charity-item/favorite-charity-item.stories.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: React.FunctionComponent<import("./favorite-charity-item").FavoriteCharityItemProps>;
+};
+export default _default;
+export declare const favoriteCharityItemStory1: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const favoriteCharityItemStory: () => JSX.Element;

package/dist/components/favorite-charity-item/index.d.ts

@@ -0,0 +1 @@
+export { default as FavoriteCharityItem } from "./favorite-charity-item";

package/dist/components/field-helpers/field-label.d.ts

@@ -3,6 +3,7 @@ interface FieldLabelProps extends React.HTMLProps<HTMLLabelElement> {
     large?: boolean;
     children?: React.ReactNode;
     required?: boolean;
+    asteriskColor?: string;
 }
-declare function FieldLabel({ large, className, children, required, ...rest }: FieldLabelProps): JSX.Element;
+declare function FieldLabel({ large, className, children, required, asteriskColor, ...rest }: FieldLabelProps): JSX.Element;
 export default FieldLabel;

package/dist/components/index.d.ts

@@ -40,10 +40,21 @@ export * from "./progressbar";
 export * from "./start-campaign-card";
 export * from "./nav";
 export * from "./popup";
-export * from "./footerV2";
 export * from "./partner-monthly-donations";
 export * from "./partner-monthly-stats";
 export * from "./table";
 export * from "./partner-chart-stats";
 export * from "./this-month-card";
 export * from "./partner-toggle-button";
+export * from "./footerV2";
+export * from "./my-account-start-fundraise-card";
+export * from "./my-account-choose-charity-card";
+export * from "./favorite-charity-item";
+export * from "./my-account-sidebar";
+export * from "./my-account-frp-preview";
+export * from "./my-account-stats-donated";
+export * from "./my-account-stats-raised";
+export * from "./input";
+export * from "./my-account-frp-closed";
+export * from "./transaction-card";
+export * from "./toast";

package/dist/components/input/InputDefault.d.ts

@@ -1,8 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 interface InputDefaltProps {
-    lable?: string;
+    label?: string | React.ReactNode;
     required?: boolean;
     placeholder?: string;
+    onChange?: (value: string) => void;
+    value?: string | Array<string> | number;
+    error?: string | null | boolean;
+    disable?: boolean;
+    name?: string;
 }
-declare const Input: ({ lable, required, placeholder }: InputDefaltProps) => JSX.Element;
+declare const Input: ({ label, required, placeholder, value, onChange, error, disable, name, }: InputDefaltProps) => JSX.Element;
 export default Input;

package/dist/components/input/index.d.ts

@@ -1 +1 @@
-export { default as HorizontalBar } from "./InputDefault";
+export { default as Input } from "./InputDefault";

package/dist/components/input/input.stories.d.ts

@@ -10,3 +10,15 @@ export declare const InputExample: {
         name: string;
     };
 };
+export declare const InputV2: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const InputV3: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/modal/index.d.ts

@@ -1 +1,2 @@
 export { default as Modal } from "./modal";
+export { default as ModalImage } from "./modal-image";

package/dist/components/modal/{modalImage.d.ts → modal-image.d.ts}

@@ -4,5 +4,5 @@ export interface ModalImasgeProps {
     modalImageSrc: string;
     toggleModal: (arg: boolean) => void;
 }
-declare const ModalIamge: ({ isOpen, modalImageSrc, toggleModal, }: ModalImasgeProps) => JSX.Element;
-export default ModalIamge;
+declare const ModalImage: ({ isOpen, modalImageSrc, toggleModal, }: ModalImasgeProps) => JSX.Element;
+export default ModalImage;

package/dist/components/modal/modal.d.ts

@@ -16,6 +16,8 @@ export interface ModalProps {
     acceptText?: string;
     cancelText?: string;
     disableAcceptButton?: boolean;
+    isConfirmationMessage?: boolean;
+    onCancel?: () => void;
 }
-declare const Modal: ({ id, isOpen, toggleModal, modalContent, modalTitle, onAccept, setWidth, buttonAlign, buttonColor, noCancelButton, noCloseButton, acceptText, cancelText, disableAcceptButton, minimal, }: ModalProps) => JSX.Element;
+declare const Modal: ({ id, isOpen, toggleModal, modalContent, modalTitle, onAccept, setWidth, buttonAlign, buttonColor, noCancelButton, noCloseButton, acceptText, cancelText, disableAcceptButton, minimal, isConfirmationMessage, onCancel, }: ModalProps) => JSX.Element;
 export default Modal;

package/dist/components/modal/modal.stories.d.ts

@@ -35,3 +35,9 @@ export declare const ModalStoriesImage: {
         name: string;
     };
 };
+export declare const ModalConfirmation: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-choose-charity-card/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountChooseCharityCard, } from "./my-account-choose-charity-card";

package/dist/components/my-account-choose-charity-card/my-account-choose-charity-card.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MyAccountChooseCharityCardProps {
+    className?: string;
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onClick?: () => void;
+    width: string;
+}
+declare const MyAccountChooseCharityCard: ({ className, title, buttonText, onClick, width, }: MyAccountChooseCharityCardProps) => JSX.Element;
+export default MyAccountChooseCharityCard;

package/dist/components/{partner-dashboard-chart/chart.stories.d.ts → my-account-choose-charity-card/my-account-choose-charity-card.stories.d.ts}

@@ -3,10 +3,10 @@ import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: () => JSX.Element;
+    component: ({ className, title, buttonText, onClick, width, }: import("./my-account-choose-charity-card").MyAccountChooseCharityCardProps) => JSX.Element;
 };
 export default _default;
-export declare const progressbar: {
+export declare const chooseCharityStory: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/components/my-account-frp-closed/Icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Icons: {
+    arrowNext: () => JSX.Element;
+};
+export default Icons;

package/dist/components/my-account-frp-closed/frp-closed-img.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface FrpClosedImgProps {
+    img?: string;
+    link?: string;
+    title?: string;
+    frpColor?: string;
+}
+declare const FrpClosedImg: ({ img, link, title, frpColor }: FrpClosedImgProps) => JSX.Element;
+export default FrpClosedImg;

package/dist/components/my-account-frp-closed/frp-information.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface FrpInfomationProps {
+    donations: number;
+    amountRaised: number;
+    amountGoal: number | null;
+    sqSize: number;
+    strokeWidth: number;
+    closedDate?: string | undefined;
+    customRow?: React.ReactNode;
+    manageLink?: string;
+}
+declare const FrpInfomation: ({ donations, amountRaised, amountGoal, sqSize, strokeWidth, closedDate, customRow, manageLink, }: FrpInfomationProps) => JSX.Element;
+export default FrpInfomation;

package/dist/components/my-account-frp-closed/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountFrpClosed } from "./my-account-frp-closed";

package/dist/components/my-account-frp-closed/my-account-frp-closed.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface MyAccountFrpClosedProps {
+    img?: string;
+    link?: string;
+    title?: string;
+    donations: number;
+    amountRaised: number;
+    amountGoal: number | null;
+    sqSize: number;
+    strokeWidth: number;
+    frpColor?: string;
+    closedDate?: string;
+    customRow?: React.ReactNode;
+    manageLink?: string;
+}
+declare const MyAccountFrpClosed: ({ img, link, title, amountGoal, amountRaised, donations, sqSize, strokeWidth, frpColor, closedDate, customRow, manageLink, }: MyAccountFrpClosedProps) => JSX.Element;
+export default MyAccountFrpClosed;

package/dist/components/my-account-frp-closed/my-account-frp-closed.stories.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const MyAccountFrpCloseStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MyAccountFrpArchiveStoryV3: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MyAccountFrpArchiveStoryV2: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-frp-preview/Icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Icons: {
+    arrowNext: () => JSX.Element;
+};
+export default Icons;

package/dist/components/my-account-frp-preview/frp-information.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface FrpInfomationProps {
+    amountOfweek: number;
+    donations: number;
+    daysToGo: number;
+    amountRaised: number;
+    amountGoal: number;
+    sqSize: number;
+    strokeWidth: number;
+    manageLink?: string;
+}
+declare const FrpInfomation: ({ amountOfweek, donations, daysToGo, amountRaised, amountGoal, sqSize, strokeWidth, manageLink, }: FrpInfomationProps) => JSX.Element;
+export default FrpInfomation;

package/dist/components/my-account-frp-preview/frp-preview-img.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface FrpPreviewImgProps {
+    img?: string;
+    link?: string;
+    title?: string;
+    frpColor?: string;
+}
+declare const FrpPreviewImg: ({ img, link, title, frpColor }: FrpPreviewImgProps) => JSX.Element;
+export default FrpPreviewImg;

package/dist/components/my-account-frp-preview/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountFrpPreview } from "./my-account-frp-preview";

package/dist/components/my-account-frp-preview/my-account-frp-preview.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface MyAccountFrpPreviewProps {
+    img?: string;
+    link?: string;
+    title?: string;
+    amountOfweek: number;
+    donations: number;
+    daysToGo: number;
+    amountRaised: number;
+    amountGoal: number;
+    sqSize: number;
+    strokeWidth: number;
+    manageLink?: string;
+    frpColor?: string;
+}
+declare const MyAccountFrpPreview: ({ img, link, title, amountGoal, amountOfweek, amountRaised, donations, sqSize, strokeWidth, daysToGo, manageLink, frpColor, }: MyAccountFrpPreviewProps) => JSX.Element;
+export default MyAccountFrpPreview;

package/dist/components/my-account-frp-preview/my-account-frp-preview.stories.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const MyAccountFrpPreviewStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MyAccountFrpPreviewStoryV3: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const MyAccountFrpPreviewStoryV2: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-sidebar/Icon.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare const Icons: {
+    dashboard: (props?: {}) => JSX.Element;
+    collapse: (props?: {}) => JSX.Element;
+    expand: () => JSX.Element;
+    donations: () => JSX.Element;
+    account: () => JSX.Element;
+    support: () => JSX.Element;
+    additional: () => JSX.Element;
+    minus: () => JSX.Element;
+    dot: () => JSX.Element;
+    menu: () => JSX.Element;
+    close: () => JSX.Element;
+};
+export default Icons;

package/dist/components/my-account-sidebar/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountSidebar } from "./my-account-sidebar";

package/dist/components/my-account-sidebar/my-account-sidebar.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface MyAccountSidebarProps {
+    listMenu: Array<ItemMenu>;
+    dashboard: ItemMenu;
+    account?: ItemMenu;
+    contract?: ItemMenu;
+    handleSetOverlay: (value: boolean) => void;
+    activeMenu: ItemMenu;
+}
+declare type ItemMenu = {
+    id: string;
+    icon?: any;
+    label: string;
+    href?: string;
+    items?: Array<ItemMenu>;
+};
+declare const MyAccountSidebar: ({ listMenu, dashboard, account, contract, handleSetOverlay, activeMenu, }: MyAccountSidebarProps) => JSX.Element;
+export default MyAccountSidebar;

package/dist/components/{line-chart/partner-line-chart-block.stories.d.ts → my-account-sidebar/my-account-sidebar.stories.d.ts}

@@ -4,7 +4,7 @@ declare const _default: {
     decorators: ((...args: any) => any)[];
 };
 export default _default;
-export declare const PartnertLineChartStories: {
+export declare const MyAccountSidebarStory: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/components/my-account-start-fundraise-card/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountStartFundraiseCard, } from "./my-account-start-fundraise-card";

package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MyAccountStartFundraiseCardProps {
+    className?: string;
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    onClick?: () => void;
+    width: string;
+}
+declare const MyAccountStartFundraiseCard: ({ className, title, buttonText, onClick, width, }: MyAccountStartFundraiseCardProps) => JSX.Element;
+export default MyAccountStartFundraiseCard;

package/dist/components/my-account-start-fundraise-card/my-account-start-fundraise-card.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+    component: ({ className, title, buttonText, onClick, width, }: import("./my-account-start-fundraise-card").MyAccountStartFundraiseCardProps) => JSX.Element;
+};
+export default _default;
+export declare const startFundraiseStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-stats-donated/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountStatsDonated } from "./my-account-stats-donated";

package/dist/components/my-account-stats-donated/my-account-stats-donated.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface MyAccountStatsDonatedProps {
+    amount: number;
+    donations: number;
+    viewDonationLink?: string;
+}
+declare const MyAccountStatsDonated: ({ amount, donations, viewDonationLink, }: MyAccountStatsDonatedProps) => JSX.Element;
+export default MyAccountStatsDonated;

package/dist/components/my-account-stats-donated/my-account-stats-donated.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const MyAccountStatsDonatedStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/my-account-stats-raised/index.d.ts

@@ -0,0 +1 @@
+export { default as MyAccountStatsRaised } from "./my-account-stats-raised";

package/dist/components/my-account-stats-raised/my-account-stats-raised.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface MyAccountStatsRaisedProps {
+    amount: number;
+    campaigns: number;
+}
+declare const MyAccountStatsRaised: ({ amount, campaigns, }: MyAccountStatsRaisedProps) => JSX.Element;
+export default MyAccountStatsRaised;

package/dist/components/my-account-stats-raised/my-account-stats-raised.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const MyAccountStatsRaisedStory: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/nav/index.d.ts

@@ -1 +1,2 @@
 export { default as Nav } from "./nav";
+export { default as NavMyAccount } from "./nav-myaccount";

package/dist/components/nav/nav-expanded-charity.d.ts

@@ -8,6 +8,7 @@ export declare type NavigationExpandedCharityProps = {
     className?: string;
     action: HybridNavigationLink | null;
     actionRaised?: HybridNavigationLink | null;
+    loginRaised?: HybridNavigationLink | null;
 };
-declare function NavigationExpandedCharity({ children, onRequestClose, className, banner, action, actionRaised, }: NavigationExpandedCharityProps): JSX.Element;
+declare function NavigationExpandedCharity({ children, onRequestClose, className, banner, action, actionRaised, loginRaised, }: NavigationExpandedCharityProps): JSX.Element;
 export default NavigationExpandedCharity;

package/dist/components/nav/nav-myaccount.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ColorSpecifier } from "../../theme/theme";
+import { ButtonProps } from "../button/button";
+import { UserData } from "./nav-user-menu";
+import { UserMenuItemWithSubmenu } from "./nav-user-menu-items";
+declare type LoginAction = {
+    analyticsId?: string;
+    onLogin: () => void;
+    color?: ColorSpecifier;
+    noIcon?: boolean;
+};
+export declare type NavigationProps = {
+    logo?: React.ReactNode;
+    cta?: ButtonProps | null;
+    user?: UserData | null;
+    login?: LoginAction | null;
+    isSticky?: boolean;
+    menuReverse?: boolean;
+    userMenu?: Array<UserMenuItemWithSubmenu>;
+};
+declare function Navigation({ logo, cta, user, login, isSticky, userMenu, }: NavigationProps): JSX.Element;
+export default Navigation;

package/dist/components/nav/nav.d.ts

@@ -15,6 +15,7 @@ declare type NavigationMenu = {
     }>;
     action?: HybridNavigationLink;
     actionRaised?: HybridNavigationLink;
+    loginRaised?: HybridNavigationLink | null;
     onClick?: () => void;
 };
 declare type SearchAction = {

package/dist/components/nav/nav.stories.d.ts

@@ -9,3 +9,9 @@ export declare const NavigationDemo2SupportLink: {
         name: string;
     };
 };
+export declare const NavigationMyaccount: {
+    (): JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/phone-number-input/index.d.ts

@@ -1,2 +1,4 @@
 export { default as PhoneNumberInput } from "./phone-number-input";
+export { default as PhoneInput } from "./phone-number-input-v2";
+export { default as PhoneNumberInputV1 } from "./phone-number-input-v1";
 export * from "./util";

package/dist/components/phone-number-input/phone-number-input-v1.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { CountryCode } from "libphonenumber-js";
+declare type PhoneNumberInputProps = {
+    values: {
+        number: string;
+        countryCallingCode: string;
+        country: string;
+    };
+    names?: {
+        number: string;
+        countryCallingCode: string;
+        country: string;
+    };
+    onChange: (value: string, name: string) => void;
+    label?: React.ReactNode;
+    error?: string | null;
+    onBlur?: (e: React.FocusEvent) => void;
+    helperText?: React.ReactNode;
+    required?: boolean;
+    defaultCountry?: CountryCode;
+    placeholder?: string;
+    color?: string;
+};
+declare function PhoneNumberInputV1({ onChange, values, names, error, onBlur, helperText, label, required, defaultCountry, placeholder, color, }: PhoneNumberInputProps): JSX.Element;
+export default PhoneNumberInputV1;