@mycause/ui 0.0.0-cbcfc0a9 → 0.0.0-cbdca24c

package/README.md

@@ -5,6 +5,11 @@ Design system and UI components for mycause.
 - [Documentation](https://mycause.atlassian.net/wiki/spaces/MU/overview)
 - [Storybook](https://ui-test.mycause.com.au)
 
+## Prerequisites
+
+- Node.js (>= 22.x)
+- Yarn (>= 1.22.22)
+
 ## Setup
 
 Install the package:

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

@@ -12,9 +12,6 @@ export interface ButtonProps extends Omit<MDCButtonProps<ButtonTypes>, "color" |
     icon?: React.ReactElement<IconProps>;
     trailingIcon?: React.ReactElement<IconProps>;
     analyticsId?: string;
-    placeholder?: string;
-    onPointerEnterCapture?: React.PointerEventHandler;
-    onPointerLeaveCapture?: React.PointerEventHandler;
 }
 /**
  * Button
@@ -24,5 +21,5 @@ export interface ButtonProps extends Omit<MDCButtonProps<ButtonTypes>, "color" |
  *
  * When using this button you must also include the accompanying `button.scss`.
  */
-declare function Button({ control, display, large, color, invert, raised, unelevated, outlined, className, icon, trailingIcon, onMouseOver, onMouseOut, analyticsId, id, placeholder, onPointerEnterCapture, onPointerLeaveCapture, ...rest }: ButtonProps): React.JSX.Element;
+declare function Button({ control, display, large, color, invert, raised, unelevated, outlined, className, icon, trailingIcon, onMouseOver, onMouseOut, analyticsId, id, ...rest }: ButtonProps): React.JSX.Element;
 export default Button;

package/dist/components/button-select/button-select-exhanced.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface SelectItem {
+    icon?: JSX.Element;
+    label: string;
+    condition?: boolean;
+    active?: boolean;
+    handleClick?: () => void;
+}
+export interface SelectOrangeProps {
+    classname?: string;
+    title?: string;
+    selectItems: Array<SelectItem>;
+    width?: string;
+    buttonWidth?: string;
+    isScroll?: boolean;
+    align?: string;
+    noArrow?: boolean;
+    buttonColor?: string;
+    color?: string;
+    autoOpen?: boolean;
+}
+declare const ButtonSelectOrange: ({ classname, title, selectItems, width, buttonWidth, isScroll, align, noArrow, buttonColor, color, autoOpen, }: SelectOrangeProps) => React.JSX.Element;
+export default ButtonSelectOrange;

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

@@ -11,3 +11,9 @@ export declare const ButtonSelectStories: {
         name: string;
     };
 };
+export declare const SelectOrangeStory: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/button-select/index.d.ts

@@ -1 +1,2 @@
 export { default as ButtonSelect } from "./button-select";
+export { default as ButtonSelectExhanced } from "./button-select-exhanced";

package/dist/components/charity-tags-filter-button/FilterIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface FilterIconProps {
+    color?: string;
+}
+export declare function FilterIcon(props: FilterIconProps): React.JSX.Element;
+export {};

package/dist/components/charity-tags-filter-button/charity-tags-filter-button.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export type CharityTagsSelected = {
+    locations: Array<string>;
+    categories: Array<number>;
+};
+export interface CharityTagsFilterButtonProps {
+    btnIcon?: React.ReactNode;
+    btnText?: React.ReactNode;
+    states: Array<{
+        id: number | string;
+        name: string;
+    }>;
+    categories: Array<{
+        id: number | string;
+        name: string;
+    }>;
+    onChange: (tagSelected: CharityTagsSelected) => void;
+    className?: string;
+    classNameBtn?: string;
+    buttonStyle?: object;
+    activeButtonColor?: string;
+    buttonColor?: string;
+    classNameFilterLayout?: string;
+    checkBoxStyle?: {
+        foreground: string;
+        background: string;
+    };
+    activeColor?: string;
+    maxStatesSelected?: number;
+    maxCategoriesSelected?: number;
+    tagsSelected: CharityTagsSelected;
+    heightButton?: string;
+    isSurface?: boolean;
+}
+declare const CharityTagsFilterButton: ({ btnIcon, btnText, states, categories, onChange, className, classNameBtn, buttonStyle, activeButtonColor, buttonColor, classNameFilterLayout, checkBoxStyle, activeColor, maxStatesSelected, maxCategoriesSelected, tagsSelected, heightButton, isSurface, }: CharityTagsFilterButtonProps) => React.JSX.Element;
+export default CharityTagsFilterButton;

package/dist/components/{start-campaign-card/start-campaign-card.stories.d.ts → charity-tags-filter-button/charity-tags-filter-button.stories.d.ts}

@@ -3,10 +3,9 @@ import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-    component: ({ className, title, description, }: import("./start-campaign-card").StartCampaignCardProps) => React.JSX.Element;
 };
 export default _default;
-export declare const startcampaincard: {
+export declare const CharityTagsFilterButtonStories: {
     (): React.JSX.Element;
     story: {
         name: string;

package/dist/components/charity-tags-filter-button/index.d.ts

@@ -0,0 +1 @@
+export { default as CharityTagsFilterButton } from "./charity-tags-filter-button";

package/dist/components/collapse/collapse.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface ActionCollapse {
+    completeText?: string;
+    deleteText?: string;
+    onComplete?: () => void;
+    onDelete?: () => void;
+    noCompleteButton?: boolean;
+    noDeleteButton?: boolean;
+}
+export interface CollapseProps {
+    hideCollapse?: boolean;
+    buttonAlign?: "center" | "left" | "right";
+    collapseText?: React.ReactNode;
+    expandedText?: React.ReactNode;
+    listActions?: Array<ActionCollapse>;
+    setWidth?: string;
+    isTimeoutEnabled?: boolean;
+    timeoutDuration?: number;
+}
+declare const Collapse: ({ hideCollapse, buttonAlign, collapseText, expandedText, listActions, setWidth, isTimeoutEnabled, timeoutDuration, }: CollapseProps) => React.JSX.Element;
+export default Collapse;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
+declare const _default: {
+    title: string;
+    decorators: (typeof CenterDecorator)[];
+};
+export default _default;
+export declare const CollapseStoriesDefault: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const CollapseStoriesHideButton: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/components/collapse/icons.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const TrashCanIcon: (props: Record<string, unknown>) => React.JSX.Element;
+export declare const ChevronDownIcon: () => React.JSX.Element;
+export declare const ChevronUpIcon: () => React.JSX.Element;

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

@@ -0,0 +1 @@
+export { default as Collapse } from "./collapse";

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

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const CropperStory: {

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

@@ -1,7 +1,6 @@
 import React from "react";
 import "react-dates/initialize";
 import CenterDecorator from "../../utils/center-decorator";
-import "moment-timezone";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { Moment } from "moment";
+import moment, { Moment } from "moment";
 export interface DatePickerProps {
     id: string;
-    date: Moment | null;
-    onDateChange: (date: Moment | null) => void;
+    date: moment.Moment | null;
+    onDateChange: (date: moment.Moment | null) => void;
     onFocusChange: (arg: boolean | null) => void;
     focused: boolean | null;
     placeholder?: string;
@@ -19,7 +19,7 @@ export interface DatePickerProps {
     error?: boolean;
     label?: string;
     width?: string;
-    isOutsideRange?: (day: any) => boolean;
+    isOutsideRange?: (day: Moment) => boolean;
     renderCalendarInfo?: () => string | JSX.Element;
     calendarInfoPosition?: "before" | "after" | "top" | "bottom";
     navPrev?: string | JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import moment from "moment";
+import moment, { Moment } from "moment";
 export interface DatePickerProps {
     id: string;
     date: moment.Moment | null;
@@ -19,8 +19,8 @@ export interface DatePickerProps {
     error?: boolean;
     label?: string;
     width?: string;
-    isOutsideRange?: (day: any) => boolean;
+    isOutsideRange?: (day: Moment) => boolean;
     showDefaultInputIcon?: boolean;
 }
-declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, ...rest }: DatePickerProps) => React.JSX.Element;
+declare const CustomSingleDatePicker: ({ width, color, onDateChange, onFocusChange, numberOfMonths, error, label, focused, required, id, ...rest }: DatePickerProps) => React.JSX.Element;
 export default CustomSingleDatePicker;

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

@@ -1,15 +1,41 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
-};
-export default _default;
-export declare const DonationFormStories: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
+    decorators: (typeof CenterDecorator)[];
+    argTypes: {
+        prefix: {
+            control: string;
+            defaultValue: string;
+        };
+        currency: {
+            control: string;
+            defaultValue: string;
+        };
+        control: {
+            control: string;
+            defaultValue: boolean;
+        };
+        hasCard: {
+            control: string;
+            defaultValue: boolean;
+        };
+        hasError: {
+            control: string;
+            defaultValue: boolean;
+        };
+        noContianer: {
+            control: string;
+            defaultValue: boolean;
+        };
+        maxWidth: {
+            control: string;
+            defaultValue: string;
+        };
     };
 };
+export default _default;
+export declare const DonationFormStories: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
 export declare const DonationCampaignFormStories: {
     (): React.JSX.Element;
     story: {

package/dist/components/donation.d.ts

@@ -0,0 +1,18 @@
+export * from "./button";
+export * from "./button-select";
+export * from "./checkbox";
+export * from "./combo-field";
+export * from "./date-picker";
+export * from "./elevation";
+export * from "./field-helpers";
+export * from "./layout";
+export * from "./modal";
+export * from "./navigation";
+export * from "./phone-number-input";
+export * from "./radio";
+export * from "./select";
+export * from "./spinner";
+export * from "./switch";
+export * from "./text-field";
+export * from "./text";
+export * from "./input";

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

@@ -7,8 +7,8 @@ export interface FeaturedCampaignCardProps {
     completed?: number;
     maxWidth?: number;
     donation?: number;
-    raised?: number;
-    goal?: number;
+    raised?: number | string;
+    goal?: number | string;
     onClick: () => void;
     fundraisingText: string;
     handleImageError?: () => void;

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

@@ -6,8 +6,6 @@ export interface HeartToggleProps extends Omit<MDCIconButtonProps<IconButtonType
     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/icon-button.d.ts

@@ -6,8 +6,6 @@ export interface IconButtonProps extends Omit<MDCIconButtonProps<IconButtonTypes
     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/material-icon.d.ts

@@ -6,9 +6,4 @@ export interface MaterialIconProps extends Omit<React.HTMLProps<HTMLOrSVGElement
     size?: string;
 }
 declare function MaterialIcon({ icon, iconSet, className, size, ...rest }: MaterialIconProps): React.JSX.Element;
-declare namespace MaterialIcon {
-    var defaultProps: {
-        iconSet: string;
-    };
-}
 export default MaterialIcon;

package/dist/components/index.d.ts

@@ -37,7 +37,6 @@ export * from "./fundraising-section";
 export * from "./hero-banner";
 export * from "./horizontalbar";
 export * from "./progressbar";
-export * from "./start-campaign-card";
 export * from "./nav";
 export * from "./popup";
 export * from "./partner-monthly-donations";
@@ -59,3 +58,5 @@ export * from "./my-account-stats-raised";
 export * from "./my-account-frp-closed";
 export * from "./transaction-card";
 export * from "./input-social";
+export * from "./charity-tags-filter-button";
+export * from "./collapse";

package/dist/components/info-represent-campaign/info-represent-campaign.stories.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const InforRepresentCampaignStories: {

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

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const InputExample: {

package/dist/components/input-social/Icons.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
+export interface PropHTML {
+    [key: string]: string;
+}
 declare const Icons: {
-    facebook: (props: any) => React.JSX.Element;
+    Facebook: (props: PropHTML) => React.JSX.Element;
 };
 export default Icons;

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

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const InputExample: {

package/dist/components/layout/box.d.ts

@@ -382,7 +382,6 @@ declare function Box({ as, ma, mv, mh, mt, mr, mb, ml, pa, pv, ph, pt, pb, pl, p
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     ref?: React.LegacyRef<HTMLElement> | undefined;
     key?: React.Key | null | undefined;
     className: string;

package/dist/components/layout/flex.d.ts

@@ -13,13 +13,4 @@ export interface FlexProps extends Omit<BoxProps, "wrap"> {
     children?: React.ReactNode;
 }
 declare function Flex({ direction, justify, align, reverse, wrap, center, className, children, ...rest }: FlexProps): React.JSX.Element;
-declare namespace Flex {
-    var defaultProps: {
-        direction: string;
-        justify: string;
-        align: string;
-        reverse: boolean;
-        wrap: boolean;
-    };
-}
 export default Flex;

package/dist/components/layout/flex.stories.d.ts

@@ -1,14 +1,42 @@
-import React from "react";
 import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
     decorators: (typeof CenterDecorator)[];
-};
-export default _default;
-export declare const FlexStory: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-        decorators: ((...args: any) => any)[];
+    argTypes: {
+        number: {
+            control: string;
+            defaultValue: number;
+        };
+        reverse: {
+            control: string;
+            defaultValue: boolean;
+        };
+        wrap: {
+            control: string;
+            defaultValue: boolean;
+        };
+        align: {
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        direction: {
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
+        justify: {
+            control: {
+                type: string;
+                options: string[];
+            };
+            defaultValue: string;
+        };
     };
 };
+export default _default;
+export declare const FlexStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;

package/dist/components/layout/stack.d.ts

@@ -3,14 +3,7 @@ import { FlexProps } from "./flex";
 interface StackProps extends FlexProps {
     horizontal?: boolean;
     vertical?: boolean;
-    gap: string;
+    gap?: string;
 }
 declare function Stack({ gap, direction, reverse, className, children, ...rest }: StackProps): React.JSX.Element;
-declare namespace Stack {
-    var defaultProps: {
-        gap: string;
-        direction: string;
-        reverse: boolean;
-    };
-}
 export default Stack;

package/dist/components/list/list.d.ts

@@ -37,8 +37,6 @@ export type ListProps = {
     setItems?: (e: Array<ItemType>) => void;
     items: Array<ItemType>;
     tooltipArrow?: number;
-    onPointerEnterCapture?: React.PointerEventHandler;
-    onPointerLeaveCapture?: React.PointerEventHandler;
 };
-declare const List: ({ items, divider, fullWidth, iconWidth, centerText, itemHeight, overflowHidden, breakspaces, iconsNotRounded, style, textGap, setItems, showToggleMeta, tooltipArrow, onPointerEnterCapture, onPointerLeaveCapture, }: ListProps) => React.JSX.Element;
+declare const List: ({ items, divider, fullWidth, iconWidth, centerText, itemHeight, overflowHidden, breakspaces, iconsNotRounded, style, textGap, setItems, showToggleMeta, tooltipArrow, }: ListProps) => React.JSX.Element;
 export default List;

package/dist/components/login/login.d.ts

@@ -4,10 +4,13 @@ export declare const ENV_TEST = "test";
 export declare const ENV_DEV = "dev";
 export declare const getAccountLink: (env: string) => "https://account-dev.mycause.com.au" | "https://account-test.mycause.com.au" | "https://account.mycause.com.au";
 export declare const getMycauseLink: (env: string) => "https://dev.mycause.com.au" | "https://aws-test.mycause.com.au" | "https://www.mycause.com.au";
+export interface Param {
+    [key: string]: string | number | boolean;
+}
 export interface LoginProps {
     id?: string;
     className?: string;
-    params?: any;
+    params?: Param;
     env?: string;
     loggedInCallBack?: () => void;
 }

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

@@ -1,9 +1,8 @@
 import React from "react";
 export interface FrpClosedImgProps {
     img?: string;
-    link?: string;
     title?: string;
     frpColor?: string;
 }
-declare const FrpClosedImg: ({ img, link, title, frpColor }: FrpClosedImgProps) => React.JSX.Element;
+declare const FrpClosedImg: ({ img, title, frpColor }: FrpClosedImgProps) => React.JSX.Element;
 export default FrpClosedImg;

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

@@ -8,6 +8,9 @@ interface FrpInfomationProps {
     closedDate?: string | undefined;
     customRow?: React.ReactNode;
     manageLink?: string;
+    thankLink?: string;
+    handleCertificateMemento?: () => void;
+    handleDeleteFrp?: () => void;
 }
-declare const FrpInfomation: ({ donations, amountRaised, amountGoal, sqSize, strokeWidth, closedDate, customRow, manageLink, }: FrpInfomationProps) => React.JSX.Element;
+declare const FrpInfomation: ({ donations, amountRaised, amountGoal, sqSize, strokeWidth, closedDate, customRow, thankLink, handleCertificateMemento, handleDeleteFrp, }: FrpInfomationProps) => React.JSX.Element;
 export default FrpInfomation;

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

@@ -12,6 +12,9 @@ export interface MyAccountFrpClosedProps {
     closedDate?: string;
     customRow?: React.ReactNode;
     manageLink?: string;
+    thankLink?: string;
+    handleCertificateMemento?: () => void;
+    handleDeleteFrp?: () => void;
 }
-declare const MyAccountFrpClosed: ({ img, link, title, amountGoal, amountRaised, donations, sqSize, strokeWidth, frpColor, closedDate, customRow, manageLink, }: MyAccountFrpClosedProps) => React.JSX.Element;
+declare const MyAccountFrpClosed: ({ img, link, title, amountGoal, amountRaised, donations, sqSize, strokeWidth, frpColor, closedDate, customRow, manageLink, thankLink, handleCertificateMemento, handleDeleteFrp, }: MyAccountFrpClosedProps) => React.JSX.Element;
 export default MyAccountFrpClosed;

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

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const MyAccountFrpCloseStory: {

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

@@ -1,5 +1,5 @@
 import React from "react";
 declare const Icons: {
-    arrowNext: () => React.JSX.Element;
+    ArrowNext: () => React.JSX.Element;
 };
 export default Icons;

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

@@ -5,5 +5,5 @@ export interface FrpPreviewImgProps {
     title?: string;
     frpColor?: string;
 }
-declare const FrpPreviewImg: ({ img, link, title, frpColor }: FrpPreviewImgProps) => React.JSX.Element;
+declare const FrpPreviewImg: ({ img, title, frpColor }: FrpPreviewImgProps) => React.JSX.Element;
 export default FrpPreviewImg;

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

@@ -1,7 +1,8 @@
 import React from "react";
+import CenterDecorator from "../../utils/center-decorator";
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: (typeof CenterDecorator)[];
 };
 export default _default;
 export declare const MyAccountFrpPreviewStory: {

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

@@ -1,15 +1,15 @@
 import React from "react";
 declare const Icons: {
-    dashboard: (props?: {}) => React.JSX.Element;
-    collapse: (props?: {}) => React.JSX.Element;
-    expand: () => React.JSX.Element;
-    donations: () => React.JSX.Element;
-    account: () => React.JSX.Element;
-    support: () => React.JSX.Element;
-    additional: () => React.JSX.Element;
-    minus: () => React.JSX.Element;
-    dot: () => React.JSX.Element;
-    menu: () => React.JSX.Element;
-    close: () => React.JSX.Element;
+    Dashboard: () => React.JSX.Element;
+    Collapse: () => React.JSX.Element;
+    Expand: () => React.JSX.Element;
+    Donations: () => React.JSX.Element;
+    Account: () => React.JSX.Element;
+    Support: () => React.JSX.Element;
+    Additional: () => React.JSX.Element;
+    Minus: () => React.JSX.Element;
+    Dot: () => React.JSX.Element;
+    Menu: () => React.JSX.Element;
+    Close: () => React.JSX.Element;
 };
 export default Icons;