@mycause/ui 0.18.13 → 1.0.0

package/dist/components/comment-section/index.d.ts

@@ -1,2 +1,2 @@
 export { default as CommentSection } from "./comment-section";
-export { default as CommentSectionV2, } from "./comment-section-v2/comment-section-v2";
+export { default as CommentSectionV2 } from "./comment-section-v2/comment-section-v2";

package/dist/components/comment-section/sub-comments.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { CommentType } from "./comment-section";
+import React from "react";
+import { CommentType } from "./comment-type";
 declare const SubComments: ({ comments }: {
-    comments: CommentType[];
-}) => JSX.Element;
+    comments: Array<CommentType>;
+}) => React.JSX.Element;
 export default SubComments;

package/dist/components/cropper/cropper.d.ts

@@ -18,5 +18,5 @@ export interface CropperProps {
     quality?: number;
     imageType?: string;
 }
-declare const Cropper: ({ image, aspectRatio, cropImage, autoCropArea, quality, imageType, ...res }: CropperProps) => JSX.Element;
+declare const Cropper: ({ image, aspectRatio, cropImage, autoCropArea, quality, imageType, ...res }: CropperProps) => React.JSX.Element;
 export default Cropper;

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

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

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

@@ -23,5 +23,5 @@ export interface DatePickerProps {
     customArrowIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
     customCloseIcon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>;
 }
-declare const DatePicker: ({ color, setStartDate, setEndDate, setFocusedInput, hasArrowIcon, numberOfMonths, ...rest }: DatePickerProps) => JSX.Element;
+declare const DatePicker: ({ color, setStartDate, setEndDate, setFocusedInput, hasArrowIcon, numberOfMonths, ...rest }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import "react-dates/initialize";
 import CenterDecorator from "../../utils/center-decorator";
 import "moment-timezone";
@@ -8,31 +8,31 @@ declare const _default: {
 };
 export default _default;
 export declare const DatePickerStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const DatePickerNoIconStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const DatePickerCustomIconsStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SingleDatePickerStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const SingleDatePickerCustomHeaderStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

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

@@ -1,3 +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";
+export { default as CustomHeaderSingleDatePicker } from "./single-date-picker-custom-header";

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

@@ -28,5 +28,5 @@ export interface DatePickerProps {
     startYear?: number;
     endYear?: number;
 }
-declare const CustomHeaderSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, startYear, endYear, ...rest }: DatePickerProps) => JSX.Element;
+declare const CustomHeaderSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, startYear, endYear, ...rest }: DatePickerProps) => React.JSX.Element;
 export default CustomHeaderSingleDatePicker;

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

@@ -22,5 +22,5 @@ export interface DatePickerProps {
     isOutsideRange?: (day: any) => boolean;
     showDefaultInputIcon?: boolean;
 }
-declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, ...rest }: DatePickerProps) => JSX.Element;
+declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, ...rest }: DatePickerProps) => React.JSX.Element;
 export default CustomSingleDatePicker;

package/dist/components/donate-card/donate-card.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 export interface DonateCardProps {
     className?: string;
     title?: string;
     description?: string;
 }
-declare const DonateCard: ({ className, title, description, }: DonateCardProps) => JSX.Element;
+declare const DonateCard: ({ className, title, description, }: DonateCardProps) => React.JSX.Element;
 export default DonateCard;

package/dist/components/donate-card/donate-card.stories.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, title, description, }: import("./donate-card").DonateCardProps) => JSX.Element;
+    component: ({ className, title, description, }: import("./donate-card").DonateCardProps) => React.JSX.Element;
 };
 export default _default;
 export declare const donatecard: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/donation-form/donation-details.d.ts

@@ -8,5 +8,5 @@ export interface DonationDetails {
     error: ErrorProps;
     color?: ColorSpecifier;
 }
-declare const DonationDetails: ({ formData, setFormData, getFormData, error, color, }: DonationDetails) => JSX.Element;
+declare const DonationDetails: ({ formData, setFormData, getFormData, error, color, }: DonationDetails) => React.JSX.Element;
 export default DonationDetails;

package/dist/components/donation-form/donation-form-v2/donation-form-v2.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { DonationOptionsProps } from "../donation-form";
 export interface DonationCampaignFormProps {
     id?: string;
@@ -9,5 +9,5 @@ export interface DonationCampaignFormProps {
     clickOnShare: () => void;
     clickOnDonation: () => void;
 }
-declare const DonationFormV2: ({ donationOption, rised, donation, target, clickOnShare, clickOnDonation, }: DonationCampaignFormProps) => JSX.Element;
+declare const DonationFormV2: ({ donationOption, rised, donation, target, clickOnShare, clickOnDonation, }: DonationCampaignFormProps) => React.JSX.Element;
 export default DonationFormV2;

package/dist/components/donation-form/donation-form.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ColorSpecifier } from "../../theme/theme";
 export interface PhoneProps {
     number: string;
@@ -60,5 +60,5 @@ export interface DonationFormProps {
     disableControl?: boolean;
     fees?: string | number;
 }
-declare const DonationForm: ({ isLoading, noContianer, currency, prefix, getOption, getDonation, getInHonor, getFormData, formDefault, hasCard, donationOption, submit, error, color, buttonDonationColor, buttonNextColor, width, disableControl, fees, }: DonationFormProps) => JSX.Element;
+declare const DonationForm: ({ isLoading, noContianer, currency, prefix, getOption, getDonation, getInHonor, getFormData, formDefault, hasCard, donationOption, submit, error, color, buttonDonationColor, buttonNextColor, width, disableControl, fees, }: DonationFormProps) => React.JSX.Element;
 export default DonationForm;

package/dist/components/donation-form/donation-form.stories.d.ts

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

package/dist/components/donation-form/donation-payment.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ColorSpecifier } from "../../theme/theme";
 import { FormDataProps, ErrorProps } from "./donation-form";
 export interface DonationPaymentProps {
@@ -9,5 +9,5 @@ export interface DonationPaymentProps {
     color?: ColorSpecifier;
     hasCard?: boolean;
 }
-declare const DonationPayment: ({ formData, setFormData, getFormData, error, color, hasCard, }: DonationPaymentProps) => JSX.Element;
+declare const DonationPayment: ({ formData, setFormData, getFormData, error, color, hasCard, }: DonationPaymentProps) => React.JSX.Element;
 export default DonationPayment;

package/dist/components/donation-form/donation-select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { ColorSpecifier } from "../../theme/theme";
 import { DonationOptionsProps } from "./donation-form";
 interface DonationFormProps {
@@ -9,5 +9,5 @@ interface DonationFormProps {
     prefix: string;
     mode: string;
 }
-declare const DonationSelect: ({ color, items, click, currency, prefix, mode, }: DonationFormProps) => JSX.Element;
+declare const DonationSelect: ({ color, items, click, currency, prefix, mode, }: DonationFormProps) => React.JSX.Element;
 export default DonationSelect;

package/dist/components/elevation/elevation.d.ts

@@ -9,5 +9,5 @@ export interface ElevationProps extends BoxProps {
     transition?: boolean;
     children: React.ReactNode;
 }
-declare const Elevation: ({ dp, id, radius, children, className, transition, ...res }: ElevationProps) => JSX.Element;
+declare const Elevation: ({ dp, id, radius, children, className, transition, ...res }: ElevationProps) => React.JSX.Element;
 export default Elevation;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
@@ -6,7 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const ElevationExample: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

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

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

package/dist/components/featured-campaign-card/featured-campaign-card.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface FeaturedCampaignCardProps {
     className?: string;
     imageURL?: string;
@@ -13,5 +13,5 @@ export interface FeaturedCampaignCardProps {
     fundraisingText: string;
     handleImageError?: () => void;
 }
-declare const FeaturedCampaignCard: ({ className, imageURL, title, donation, raised, goal, completed, maxWidth, onClick, fundraisingText, handleImageError, }: FeaturedCampaignCardProps) => JSX.Element;
+declare const FeaturedCampaignCard: ({ className, imageURL, title, donation, raised, goal, completed, maxWidth, onClick, fundraisingText, handleImageError, }: FeaturedCampaignCardProps) => React.JSX.Element;
 export default FeaturedCampaignCard;

package/dist/components/featured-campaign-card/featured-campaign-card.stories.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, imageURL, title, donation, raised, goal, completed, maxWidth, onClick, fundraisingText, handleImageError, }: import("./featured-campaign-card").FeaturedCampaignCardProps) => JSX.Element;
+    component: ({ className, imageURL, title, donation, raised, goal, completed, maxWidth, onClick, fundraisingText, handleImageError, }: import("./featured-campaign-card").FeaturedCampaignCardProps) => React.JSX.Element;
 };
 export default _default;
 export declare const featuredcampaigncard: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/field-helpers/field-helper-text.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-declare type FieldHelperTextProps = {
+type FieldHelperTextProps = {
     hidden?: boolean;
     error?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare function FieldHelperText({ hidden, children, error }: FieldHelperTextProps): JSX.Element;
+declare function FieldHelperText({ hidden, children, error }: FieldHelperTextProps): React.JSX.Element;
 export default FieldHelperText;

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

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

package/dist/components/footerV2/footerV2.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 interface PrismicFooterV2Document {
     key: string;
     total_member: string;
@@ -31,5 +31,5 @@ declare function FooterV2({ className, dataFooter: document, bottomSectionOnly,
     OrangeCardUrl?: string;
     OrangeCardFirstTitle?: string;
     OrangeCardSecondTitle?: string;
-}): JSX.Element;
+}): React.JSX.Element;
 export default FooterV2;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 import FooterV2 from "./footerV2";
 declare const _default: {
@@ -8,7 +8,7 @@ declare const _default: {
 };
 export default _default;
 export declare const FooterV2Story: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/fundraising-section/fundraising-section.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from "react";
 export interface FundraisingSectionProps {
     className?: string;
     title?: string;
     description?: string;
     imageUrl?: string;
 }
-declare const FundraisingSection: ({ className, title, description, imageUrl, }: FundraisingSectionProps) => JSX.Element;
+declare const FundraisingSection: ({ className, title, description, imageUrl, }: FundraisingSectionProps) => React.JSX.Element;
 export default FundraisingSection;

package/dist/components/fundraising-section/fundraising-section.stories.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, title, description, imageUrl, }: import("./fundraising-section").FundraisingSectionProps) => JSX.Element;
+    component: ({ className, title, description, imageUrl, }: import("./fundraising-section").FundraisingSectionProps) => React.JSX.Element;
 };
 export default _default;
 export declare const fundraisingsection: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/hero-banner/hero-banner.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from "react";
 export interface HeroBannerProps {
     className?: string;
     title?: string;
     description?: string;
     imageUrl?: string;
 }
-declare const HeroBnner: ({ className, title, description, imageUrl, }: HeroBannerProps) => JSX.Element;
+declare const HeroBnner: ({ className, title, description, imageUrl, }: HeroBannerProps) => React.JSX.Element;
 export default HeroBnner;

package/dist/components/hero-banner/hero-banner.stories.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, title, description, imageUrl, }: import("./hero-banner").HeroBannerProps) => JSX.Element;
+    component: ({ className, title, description, imageUrl, }: import("./hero-banner").HeroBannerProps) => React.JSX.Element;
 };
 export default _default;
 export declare const herobanner: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/horizontalbar/horizontalbar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export interface HorizontalBarProps {
     className?: string;
     barColor?: string;
@@ -7,5 +7,5 @@ export interface HorizontalBarProps {
     height?: number;
     marginLeft?: number;
 }
-declare const HorizontalBar: ({ className, width, height, barColor, dotColor, marginLeft, }: HorizontalBarProps) => JSX.Element;
+declare const HorizontalBar: ({ className, width, height, barColor, dotColor, marginLeft, }: HorizontalBarProps) => React.JSX.Element;
 export default HorizontalBar;

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

@@ -1,25 +1,25 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, width, height, barColor, dotColor, marginLeft, }: import("./horizontalbar").HorizontalBarProps) => JSX.Element;
+    component: ({ className, width, height, barColor, dotColor, marginLeft, }: import("./horizontalbar").HorizontalBarProps) => React.JSX.Element;
 };
 export default _default;
 export declare const horizontalbar: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const horizontalbar2: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const horizontalbar3: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/icon/btn_google_light_normal_ios.svg.d.ts

@@ -5,4 +5,4 @@ import React from "react";
  * Based on the file btn_google_light_normal_ios.svg but with the button background removed
  * See: https://developers.google.com/identity/branding-guidelines
  */
-export default function GoogleIconSvg(props: React.HTMLProps<SVGSVGElement>): JSX.Element;
+export default function GoogleIconSvg(props: React.HTMLProps<SVGSVGElement>): React.JSX.Element;

package/dist/components/icon/facebook_6.svg.d.ts

@@ -6,4 +6,4 @@ import React from "react";
  *
  * Only use with the color #3C5A99
  */
-export default function FacebookIconSVG(props: React.HTMLProps<SVGSVGElement>): JSX.Element;
+export default function FacebookIconSVG(props: React.HTMLProps<SVGSVGElement>): React.JSX.Element;

package/dist/components/icon/heart-toggle.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { IconButtonProps as MDCIconButtonProps } from "@material/react-icon-button";
-declare type IconButtonTypes = HTMLButtonElement | HTMLAnchorElement;
+type IconButtonTypes = HTMLButtonElement | HTMLAnchorElement;
 export interface HeartToggleProps extends Omit<MDCIconButtonProps<IconButtonTypes>, "onChange" | "value" | "ref" | "children"> {
     active: React.ReactNode;
     inactive: React.ReactNode;
     onChange?: (value: boolean) => void;
     value: boolean;
+    onPointerEnterCapture?: React.PointerEventHandler;
+    onPointerLeaveCapture?: React.PointerEventHandler;
 }
 declare const HeartToggle: React.ForwardRefExoticComponent<HeartToggleProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default HeartToggle;

package/dist/components/icon/heart-toggle.stories.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
@@ -6,7 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const hearttoggle: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/icon/icon-button-group.d.ts

@@ -4,5 +4,5 @@ interface IconButtonGroupProps {
     size?: string;
     isOutlinedOnFocus?: boolean;
 }
-declare function IconButtonGroup({ children, size, isOutlinedOnFocus, }: IconButtonGroupProps): JSX.Element;
+declare function IconButtonGroup({ children, size, isOutlinedOnFocus, }: IconButtonGroupProps): React.JSX.Element;
 export default IconButtonGroup;

package/dist/components/icon/icon-button-group.stories.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
@@ -6,7 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const IconButtonGroupStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/icon/icon-button.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 import { IconButtonProps as MDCIconButtonProps } from "@material/react-icon-button";
 import { IconProps } from "./icon";
-export declare type IconButtonTypes = HTMLButtonElement | HTMLAnchorElement;
+export type IconButtonTypes = HTMLButtonElement | HTMLAnchorElement;
 export interface IconButtonProps extends Omit<MDCIconButtonProps<IconButtonTypes>, "ref" | "size"> {
     children: React.ReactElement<IconProps>;
     pressed?: boolean;
     size?: string;
+    onPointerEnterCapture?: React.PointerEventHandler;
+    onPointerLeaveCapture?: React.PointerEventHandler;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export default IconButton;

package/dist/components/icon/icon-button.stories.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
@@ -6,13 +6,13 @@ declare const _default: {
 };
 export default _default;
 export declare const iconButton: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const Toggle: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/icon/icon.d.ts

@@ -8,5 +8,5 @@ export interface IconProps extends Omit<React.HTMLProps<HTMLOrSVGElement>, "colo
     invert?: boolean;
     size?: string;
 }
-declare function Icon({ icon, iconSet, color, invert, className, size, ...rest }: IconProps): JSX.Element;
+declare function Icon({ icon, iconSet, color, invert, className, size, ...rest }: IconProps): React.JSX.Element;
 export default Icon;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
@@ -6,19 +6,19 @@ declare const _default: {
 };
 export default _default;
 export declare const material: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const colors: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const svg: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     story: {
         name: string;
     };

package/dist/components/icon/material-icon.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-export declare type IconSet = "material-icons" | "material-icons-outlined";
+export type IconSet = "material-icons" | "material-icons-outlined";
 export interface MaterialIconProps extends Omit<React.HTMLProps<HTMLOrSVGElement>, "ref" | "size"> {
     icon: string;
     iconSet?: IconSet;
     size?: string;
 }
-declare function MaterialIcon({ icon, iconSet, className, size, ...rest }: MaterialIconProps): JSX.Element;
+declare function MaterialIcon({ icon, iconSet, className, size, ...rest }: MaterialIconProps): React.JSX.Element;
 declare namespace MaterialIcon {
     var defaultProps: {
         iconSet: string;