@kanda-libs/ks-component-ts 0.2.255 → 0.2.256-qa

package/app/.yalc/@kanda-libs/ks-design-library/dist/index.d.ts

@@ -0,0 +1,1229 @@
+// Generated by dts-bundle-generator v7.1.0
+
+import React from 'react';
+import { ChangeEvent, Dispatch, FunctionComponent, HTMLAttributes, HTMLProps, MouseEvent, MutableRefObject, SetStateAction } from 'react';
+import { SkeletonProps } from 'react-loading-skeleton';
+import { Id, ToastOptions } from 'react-toastify';
+import { ToastContent } from 'react-toastify/dist/types';
+
+export interface LogoProps {
+	width?: number;
+	height?: number;
+	className?: string;
+}
+export declare const Logo: FunctionComponent<LogoProps>;
+export interface ContentDefaultProps {
+	children?: JSX.Element | JSX.Element[];
+	footer?: JSX.Element | JSX.Element[];
+	header?: JSX.Element | JSX.Element[];
+	/**
+	 * Align content to top
+	 */
+	top?: boolean;
+	/**
+	 * Align content to left
+	 */
+	left?: boolean;
+	flex?: boolean;
+	width?: string;
+	/**
+	 * Don't add padding to the content
+	 */
+	noPadding?: boolean;
+}
+export declare const DesktopLayoutBoxedContent: FunctionComponent<ContentDefaultProps>;
+export interface ContentHeaderProps {
+	children?: JSX.Element | JSX.Element[];
+}
+export declare const DesktopLayoutBoxedContentHeader: FunctionComponent<ContentHeaderProps>;
+export type StringIndexedObject<T = any> = {
+	[key: string]: T;
+};
+export type Variant = string | boolean | number;
+export type Variants = StringIndexedObject<Variant>;
+export type ButtonOnClick = (event: MouseEvent<HTMLButtonElement>) => void;
+export interface DesktopLayoutBoxedProps {
+	children?: JSX.Element | JSX.Element[];
+	/**
+	 * Right side option for header
+	 */
+	options?: JSX.Element[];
+	logoProps?: StringIndexedObject<string>;
+	sidebar?: boolean | JSX.Element;
+	sidebarWidth?: string;
+	backgroundLines?: boolean;
+	/**
+	 * Hide header
+	 */
+	noHeader?: boolean;
+	/**
+	 * Show help
+	 */
+	help?: boolean;
+	layoutFooter?: JSX.Element | JSX.Element[];
+	/**
+	 * Allow for the y axis to overflow when there is a lot of content within the card
+	 */
+	allowYOverflow?: boolean;
+	/**
+	 * Optional prop for whether or not to show the navigation, like with DesktopLayoutDefault
+	 */
+	showNavigation?: boolean;
+}
+export declare const DesktopLayoutBoxed: FunctionComponent<DesktopLayoutBoxedProps>;
+export interface ContentProps {
+	children?: JSX.Element | JSX.Element[];
+}
+export declare const DesktopLayoutDefaultContent: FunctionComponent<ContentProps>;
+export interface ContentHeaderDefaultProps {
+	option?: JSX.Element;
+	children?: JSX.Element | JSX.Element[];
+}
+export declare const DesktopLayoutDefaultContentHeader: FunctionComponent<ContentHeaderDefaultProps>;
+export interface DesktopLayoutDefaultProps {
+	children?: JSX.Element | JSX.Element[];
+}
+export declare const DesktopLayoutDefault: FunctionComponent<DesktopLayoutDefaultProps>;
+declare const OPACITIES: readonly [
+	5,
+	10,
+	15,
+	20,
+	25,
+	30,
+	35,
+	40,
+	45,
+	50,
+	55,
+	60,
+	65,
+	70,
+	75,
+	80,
+	85,
+	90,
+	95,
+	100
+];
+export interface BaseFadeProps {
+	show: boolean;
+	className?: string;
+	onEnd?: () => void;
+	opacity?: typeof OPACITIES[number];
+}
+export interface FadeProps extends BaseFadeProps {
+	children: JSX.Element | JSX.Element[];
+}
+export interface BaseSlideLeftProps {
+	show: boolean;
+	className?: string;
+	onEnd?: () => void;
+}
+export interface SlideLeftProps extends BaseSlideLeftProps {
+	children: JSX.Element | JSX.Element[];
+}
+export declare const Animations: {
+	Fade: import("react").FunctionComponent<FadeProps>;
+	SlideLeft: import("react").FunctionComponent<SlideLeftProps>;
+};
+export interface BaseAnimatedModalContainerProps {
+	id: string;
+	opacity: typeof OPACITIES[number];
+}
+export type OuterClickHook = MutableRefObject<HTMLElement | undefined>;
+/**
+ * Hook that detect when the click is outside of the component
+ */
+export function useOuterClick(callback: (e: MouseEvent) => void): OuterClickHook;
+export interface ContainerChildrenArgs {
+	isShown: boolean;
+	backdropClassName: string;
+	isVisible: boolean;
+	handleClose: () => void;
+	hideModal: () => void;
+	ref: OuterClickHook;
+}
+export interface AnimatedModalContainerProps extends BaseAnimatedModalContainerProps {
+	children: (args: Omit<ContainerChildrenArgs, "backdropClassName">) => JSX.Element;
+}
+export declare const AnimatedModalContainer: FunctionComponent<AnimatedModalContainerProps>;
+export interface BannerProps {
+	children?: JSX.Element | JSX.Element[];
+	hideBackgroundOnMobile?: boolean;
+}
+export declare const Banner: FunctionComponent<BannerProps>;
+export interface BreakPointsProps {
+	/**
+	 * Desktop node(s) to display
+	 */
+	desktop?: JSX.Element | string;
+	/**
+	 * Mobile node(s) to display
+	 */
+	mobile?: JSX.Element | string;
+}
+export declare const BreakPoints: FunctionComponent<BreakPointsProps>;
+export interface IconProps {
+	/**
+	 * External HTML className
+	 */
+	className?: string;
+	/**
+	 * Stroke colour
+	 */
+	stroke?: string;
+	/**
+	 * Flag to flip icon
+	 */
+	flip?: boolean;
+	/**
+	 * The icon width
+	 */
+	width?: number;
+	/**
+	 * The icon height
+	 */
+	height?: number;
+	/**
+	 * The icon size (sets width and height together)
+	 */
+	size?: number;
+	/**
+	 * The icon background fill
+	 */
+	fill?: string;
+	/**
+	 * The loading state for the icon
+	 */
+	isLoading?: boolean;
+	/**
+	 * The icon name
+	 */
+	icon?: string;
+}
+declare const BUTTON_CLASS_NAME: {
+	base: string;
+	"@variant": {
+		solid: string;
+		danger: string;
+		gradient: string;
+		outline: string;
+		ghost: string;
+	};
+	"@size": {
+		48: string;
+		40: string;
+		32: string;
+		24: string;
+	};
+	"@loading": {
+		true: string;
+	};
+};
+export type ButtonTextVariant = keyof typeof BUTTON_CLASS_NAME["@variant"];
+export interface ButtonTextProps extends HTMLAttributes<HTMLButtonElement> {
+	id: string;
+	children?: JSX.Element | JSX.Element[];
+	onClick?: ButtonOnClick;
+	className?: string;
+	/**
+	 * Icon name
+	 */
+	icon?: string;
+	/**
+	 * Icon props
+	 */
+	iconProps?: IconProps;
+	/**
+	 * Button variant name
+	 */
+	variant?: ButtonTextVariant;
+	/**
+	 * Sets button to disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Sets button type to submit insted of button
+	 */
+	submit?: boolean;
+	/**
+	 * Changes position of the icon to left from right
+	 */
+	left?: boolean;
+	/**
+	 * Button size
+	 */
+	size?: Variant;
+	/**
+	 * Button label
+	 */
+	label?: JSX.Element | JSX.Element[] | string;
+	/**
+	 * Display Loading state
+	 */
+	isLoading?: boolean;
+	/**
+	 * Icon spacing
+	 */
+	iconSpacing?: Variant;
+	/**
+	 * Append
+	 */
+	append?: JSX.Element | JSX.Element[];
+	/**
+	 * Prepend
+	 */
+	prepend?: JSX.Element | JSX.Element[];
+}
+export interface BaseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+	id: string;
+	onClick?: ButtonOnClick;
+	/**
+	 * ClassNames
+	 */
+	classNames?: {
+		button?: string;
+		content?: string;
+	};
+	/**
+	 * Children
+	 */
+	children?: string | JSX.Element | JSX.Element[];
+	/**
+	 * Icon name
+	 */
+	icon?: string;
+	/**
+	 * Icon props
+	 */
+	iconProps?: IconProps;
+	/**
+	 * sets button to disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * sets button type to submit instead of button
+	 */
+	submit?: boolean;
+	/**
+	 * Button label
+	 */
+	label?: JSX.Element | JSX.Element[] | string;
+	/**
+	 * Display Loading state
+	 */
+	isLoading?: boolean;
+	/**
+	 * Append
+	 */
+	append?: JSX.Element | JSX.Element[];
+	/**
+	 * Append
+	 */
+	prepend?: JSX.Element | JSX.Element[];
+	/**
+	 * Forwarded ref
+	 */
+	forwardRef?: MutableRefObject<HTMLButtonElement>;
+}
+export type ButtonLinkVariant = "turquoise" | "grey" | "light-grey" | "custom";
+export interface ButtonLinkProps extends Omit<BaseButtonProps, "children"> {
+	id: string;
+	onClick?: ButtonOnClick;
+	/**
+	 * Children
+	 */
+	children?: JSX.Element | JSX.Element[] | string;
+	/**
+	 * ClassName
+	 */
+	className?: string;
+	/**
+	 * Icon name
+	 */
+	icon?: string;
+	/**
+	 * Icon props
+	 */
+	iconProps?: IconProps;
+	/**
+	 * Button variant name
+	 */
+	variant?: ButtonLinkVariant;
+	/**
+	 * sets button type to submit insted of button
+	 */
+	submit?: boolean;
+	/**
+	 * changes position of the icon to left from right
+	 */
+	left?: boolean;
+	/**
+	 * Button size
+	 */
+	size?: "custom" | 16 | 14 | 12;
+	/**
+	 * Button label
+	 */
+	label?: JSX.Element | JSX.Element[] | string;
+	/**
+	 * Display Loading state
+	 */
+	isLoading?: boolean;
+	/**
+	 * Icon spacing
+	 */
+	iconSpacing?: number;
+	/**
+	 * Sets button to disabled
+	 */
+	disabled?: boolean;
+}
+export type ButtonInlineLinkVariant = "custom" | "grey" | "turquoise" | "lavender";
+export interface ButtonInlineLinkProps extends BaseButtonProps {
+	id: string;
+	onClick?: ButtonOnClick;
+	/**
+	 * Children
+	 */
+	children?: string | JSX.Element | JSX.Element[];
+	/**
+	 * ClassName
+	 */
+	className?: string;
+	/**
+	 * Button variant name
+	 */
+	variant?: ButtonInlineLinkVariant;
+	/**
+	 * Whether or not the button is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * sets button type to submit insted of button
+	 */
+	submit?: boolean;
+	/**
+	 * Button label
+	 */
+	label?: string | JSX.Element | JSX.Element[];
+	/**
+	 * Display Loading state
+	 */
+	isLoading?: boolean;
+}
+export type ButtonIconVariant = "turquoise" | "light-turquoise" | "solid-grey" | "ghost-grey" | "custom";
+export type ButtonIconSize = number | "48-20" | "40-20" | "32-20" | "32-16" | "28-16" | "36-12";
+export interface ButtonIconProps extends HTMLAttributes<HTMLButtonElement> {
+	/**
+	 * Children
+	 */
+	children?: JSX.Element | JSX.Element[];
+	/**
+	 * HTML ID of element
+	 */
+	id: string;
+	onClick?: ButtonOnClick;
+	/**
+	 * ClassName
+	 */
+	className?: string;
+	/**
+	 * Icon name
+	 */
+	icon?: string;
+	/**
+	 * Button variant
+	 */
+	variant?: ButtonIconVariant;
+	/**
+	 * Button size
+	 */
+	size?: ButtonIconSize;
+	/**
+	 * sets button type to submit insted of button
+	 */
+	submit?: boolean;
+	/**
+	 * Display Loading state
+	 */
+	isLoading?: boolean;
+	/**
+	 * Icon props
+	 */
+	iconProps?: IconProps;
+	/**
+	 * indircator color
+	 */
+	indicator?: string;
+	/**
+	 * indicator position
+	 */
+	indicatorPosition?: string;
+	/**
+	 * Sets button to disabled
+	 */
+	disabled?: boolean;
+}
+export declare const Button: {
+	Text: import("react").FunctionComponent<ButtonTextProps>;
+	Link: import("react").FunctionComponent<ButtonLinkProps>;
+	Icon: import("react").FunctionComponent<ButtonIconProps>;
+	InlineLink: import("react").FunctionComponent<ButtonInlineLinkProps>;
+};
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+	children?: JSX.Element | JSX.Element[];
+	className?: string;
+	/**
+	 * Title of card
+	 */
+	title?: JSX.Element | JSX.Element[] | string;
+	padding?: string;
+	/**
+	 * Top right option
+	 */
+	option?: JSX.Element | JSX.Element[] | string;
+	footer?: JSX.Element | JSX.Element[] | string;
+	footerOptions?: JSX.Element | JSX.Element[] | string;
+	noContent?: boolean;
+	isLoading?: boolean;
+	showLoadingSkeleton?: {
+		title?: boolean;
+		option?: boolean;
+		content?: boolean;
+		footer?: boolean;
+		footerOptions?: boolean;
+	};
+	variant?: "default" | "simple";
+	fullHeightContent?: boolean;
+}
+export interface CardProps {
+	children?: JSX.Element | JSX.Element[];
+	option?: JSX.Element | JSX.Element[] | string;
+}
+export declare const Card: FunctionComponent<CardProps>;
+export interface ModalsWrapperContextValue {
+	visibleModals: string[];
+	visibleAnimatedModals: string[];
+	showLoader?: boolean;
+	showAnimatedModal: (modalId: string) => void;
+	hideAnimatedModal: (modalId: string) => void;
+	showModal: (modalId: string) => void;
+	hideModal: (modalId: string) => void;
+	setShowLoader: Dispatch<SetStateAction<boolean>>;
+}
+export interface ModalsWrapperProps {
+	children: JSX.Element | JSX.Element[];
+}
+export declare const ModalsWrapperContext: React.Context<ModalsWrapperContextValue>;
+export declare const ModalsWrapper: FunctionComponent<ModalsWrapperProps>;
+export interface CommonWrapperProps extends ModalsWrapperProps {
+	children: JSX.Element | JSX.Element[];
+	showHelp?: boolean;
+	recaptcha?: boolean;
+}
+export declare const CommonWrapper: FunctionComponent<CommonWrapperProps>;
+export interface HomeLinkProps {
+	href?: string;
+	className?: string;
+	to?: string;
+}
+export interface Props {
+	children?: JSX.Element | JSX.Element[];
+	linkComponent?: string | FunctionComponent<HomeLinkProps>;
+	desktopHeader?: FunctionComponent;
+	desktopFooter?: FunctionComponent;
+	homeLinkProps?: HomeLinkProps;
+	sidebar?: FunctionComponent;
+}
+export declare const ConfigWrapper: FunctionComponent<Props>;
+export interface CopyContentProps {
+	children?: JSX.Element | JSX.Element[];
+	/**
+	 * Element to be shown when clicked
+	 */
+	clickedView?: JSX.Element | JSX.Element[];
+	/**
+	 * DesktopLayoutBoxedContent to be copied
+	 */
+	content: string;
+	/**
+	 * HTML ID for the input
+	 */
+	id?: string;
+	className?: string;
+	time?: number;
+}
+export declare const CopyContent: FunctionComponent<CopyContentProps>;
+export declare const DesktopFooter: FunctionComponent;
+export interface CompanyItem {
+	active?: boolean;
+	name: string;
+	href?: string;
+	target?: string;
+	to?: string;
+	onClick?: () => void;
+}
+export interface DesktopHeaderProps {
+	items?: CompanyItem[];
+	companyItems: CompanyItem[];
+	/**
+	 * Notice banner to show
+	 */
+	notice?: FunctionComponent;
+	/**
+	 * Company name
+	 */
+	companyName?: string;
+	/**
+	 * Company profile picture url
+	 */
+	companyProfilePicture?: string;
+	/**
+	 * isLoading
+	 */
+	isLoading?: boolean;
+	/**
+	 * Display front chat widget
+	 */
+	help?: boolean;
+	/**
+	 * Displays extra actions alongside help / menu
+	 */
+	extraOptions?: JSX.Element;
+	/**
+	 * Function for logging out
+	 */
+	logout?: () => void;
+	/**
+	 * Function for logging out
+	 */
+	hideHomeLink?: boolean;
+	/**
+	 * Display logo without link component
+	 */
+	noLinkLogo?: boolean;
+	showAvatar?: boolean;
+}
+export declare const DesktopHeader: FunctionComponent<DesktopHeaderProps>;
+export type StatusTagStatus = "draft" | "sent" | "accepted" | "declined" | "lead";
+export type TagColor = "grey" | "violet" | "lavender" | "green" | "blue" | "orange" | null;
+export interface TagProps {
+	className?: string | JSX.Element;
+	label?: string;
+	children?: JSX.Element | JSX.Element[];
+	color?: TagColor;
+	size?: 31 | 28 | 24 | 21;
+	/**
+	 * Tag variant name
+	 */
+	variant?: "solid" | "outline";
+}
+export interface StatusTagProps extends TagProps {
+	status: StatusTagStatus;
+	timestamp?: number;
+	formatStatus?: (status: string) => string;
+	extractColor?: (status: string) => TagColor;
+}
+export declare const StatusTag: FunctionComponent<StatusTagProps>;
+export type FinanceStatusTagProps = Omit<StatusTagProps, "formatStatus" | "extractColor">;
+export declare const FinanceStatusTag: FunctionComponent<FinanceStatusTagProps>;
+export interface HeaderBaseProps extends HTMLAttributes<HTMLDivElement> {
+	className?: string;
+	children?: JSX.Element | JSX.Element[];
+	/**
+	 * Right side options for header
+	 */
+	options?: JSX.Element[];
+	/**
+	 * Show the help item
+	 */
+	help?: boolean;
+	/**
+	 * Top lines
+	 */
+	lines?: boolean;
+	/**
+	 * Hide number on header
+	 */
+	hideNumber?: boolean;
+}
+export interface HeaderMainProps {
+	/**
+	 * ClassName for main header
+	 */
+	logoProps?: StringIndexedObject;
+	/**
+	 * Show help
+	 */
+	help?: boolean;
+	/**
+	 * ClassName for main header
+	 */
+	className?: string;
+	/**
+	 * Displays skip button
+	 */
+	skip?: boolean;
+	/**
+	 * On Skip function callback
+	 */
+	onSkip?: () => void;
+	/**
+	 * linkComponent
+	 */
+	linkComponent?: FunctionComponent<HomeLinkProps> | "a";
+}
+export interface HeaderItems {
+	Base: FunctionComponent<HeaderBaseProps>;
+	Main: FunctionComponent<HeaderMainProps>;
+}
+export declare const Header: HeaderItems;
+export interface HelpButtonProps {
+	variant?: string;
+}
+export declare const HelpButton: FunctionComponent<HelpButtonProps>;
+export declare const Icon: FunctionComponent<IconProps>;
+export interface InfoBannerProps {
+	title?: string | JSX.Element;
+	icon?: JSX.Element;
+	nameContent?: JSX.Element;
+	search?: JSX.Element;
+	cta?: JSX.Element;
+	backArrow?: boolean;
+	isLoading?: boolean;
+	onGoBack?: () => void;
+	children?: JSX.Element;
+}
+export declare const InfoBanner: FunctionComponent<InfoBannerProps>;
+export interface LayoutProps {
+	children?: JSX.Element | JSX.Element[];
+	stickyHeader?: boolean;
+	stickyFooter?: boolean;
+	/**
+	 * header background color
+	 */
+	headerBg?: string;
+	/**
+	 * background color
+	 */
+	bg?: string;
+	/**
+	 * Removes Border
+	 */
+	noBorder?: boolean;
+	header?: JSX.Element;
+	footer?: JSX.Element;
+	/**
+	 * Boolean flag for whether to show scroll top button
+	 */
+	scrollTop?: boolean;
+	/**
+	 * Removes content padding
+	 */
+	noPadding?: boolean;
+	/**
+	 * Only load header and footer if the component as mounted
+	 * This is mainly used to allow for the use of this components
+	 * in environments that support SSR (IE: NextJS)
+	 */
+	checkForIsMounted?: boolean;
+}
+export declare const Layout: FunctionComponent<LayoutProps>;
+export declare const LayoutFooter: React.FC<{
+	children: React.ReactNode;
+}>;
+export declare const LayoutHeader: React.FC<{
+	children: React.ReactNode;
+}>;
+export interface LoaderProps {
+	isLoading?: boolean;
+}
+export declare const Loader: FunctionComponent<LoaderProps>;
+export interface LoadingProviderProps {
+	/**
+	 * The children contained within the provider
+	 */
+	children: JSX.Element;
+	/**
+	 * isLoading state
+	 */
+	isLoading: boolean;
+	/**
+	 * overwrite state
+	 */
+	overwrite?: boolean;
+}
+export declare const LoadingProvider: FunctionComponent<LoadingProviderProps>;
+export interface LoadingSpinnerProps {
+	/**
+	 * Size of the spinner
+	 */
+	size?: number;
+	/**
+	 * Duration for the animation in ms
+	 */
+	duration?: number;
+	/**
+	 * Duration for the animation
+	 */
+	anticlockwise?: boolean;
+	/**
+	 * Classname to be applied to SVG
+	 */
+	className: string;
+	/**
+	 * Tailwind color name to set as stroke of the icon e.g. blue-300
+	 */
+	stroke: string;
+}
+export declare const LoadingSpinner: FunctionComponent<LoadingSpinnerProps>;
+export interface MenuItem {
+	name: string;
+	icon: string;
+	href?: string;
+	target?: string;
+	to?: string;
+	onClick?: (e: MouseEvent) => void;
+	stroke?: string;
+	size?: number;
+}
+export interface MenuProps {
+	items: MenuItem[];
+	footer?: JSX.Element | JSX.Element[];
+	companyName?: string | JSX.Element | JSX.Element[];
+	companyProfilePicture?: string;
+	plan?: string | JSX.Element | JSX.Element[];
+	linkComponent?: FunctionComponent<HomeLinkProps>;
+	hideHelp?: boolean;
+}
+export declare const Menu: FunctionComponent<MenuProps>;
+export interface ContainerChildrenArgs {
+	id: string;
+	showBackdrop: boolean;
+	backdropClassName: string;
+	handleClose: () => void;
+	ref: OuterClickHook;
+}
+export interface ContainerProps {
+	/**
+	 * The ID of the modal
+	 */
+	id: string;
+	/**
+	 * The opacity oif the background
+	 */
+	opacity?: typeof OPACITIES[number];
+	children: (args: ContainerChildrenArgs) => JSX.Element;
+}
+export interface ModalContainerChildrenArgs {
+	id: string;
+	handleClose: () => void;
+	ref?: MutableRefObject<HTMLElement | undefined>;
+}
+export interface ModalContainerProps extends ContainerProps {
+	overlay?: boolean;
+	children: (args: ModalContainerChildrenArgs) => JSX.Element;
+}
+export declare const ModalContainer: FunctionComponent<ModalContainerProps>;
+export interface ModalLayoutCenterProps {
+	id: string;
+	children: JSX.Element | JSX.Element[];
+	onClose?: () => void;
+	className?: string;
+	opacity?: typeof OPACITIES[number];
+}
+export declare const ModalLayoutCenter: React.ForwardRefExoticComponent<ModalLayoutCenterProps & React.RefAttributes<HTMLDivElement>>;
+export interface ModalLayoutFullScreenProps {
+	children: JSX.Element | JSX.Element[];
+	/**
+	 * Header component
+	 */
+	header?: JSX.Element;
+	/**
+	 * Footer component
+	 */
+	footer?: JSX.Element;
+	/**
+	 * Removes header border
+	 */
+	noBorder?: boolean;
+	/**
+	 * Keep header in place
+	 */
+	stickyHeader?: boolean;
+}
+export declare const ModalLayoutFullScreen: FunctionComponent<ModalLayoutFullScreenProps>;
+export interface ModalLayoutSlideLeftProps {
+	children?: JSX.Element | JSX.Element[];
+	/**
+	 * Header component
+	 */
+	header?: JSX.Element | JSX.Element[];
+	/**
+	 * Footer component
+	 */
+	footer?: JSX.Element | JSX.Element[];
+	/**
+	 * Removes header border
+	 */
+	noBorder?: boolean;
+}
+export declare const ModalLayoutSlideLeft: React.ForwardRefExoticComponent<ModalLayoutSlideLeftProps & React.RefAttributes<HTMLDivElement>>;
+export interface ModalLayoutSlideUpProps {
+	id: string;
+	children: JSX.Element | JSX.Element[];
+	onClose?: () => void;
+	variant?: "DEFAULT" | "MARKETING";
+}
+export declare const ModalLayoutSlideUp: React.ForwardRefExoticComponent<ModalLayoutSlideUpProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavigationLinkProps {
+	title?: string | JSX.Element | JSX.Element[];
+	subtitle?: string | JSX.Element | JSX.Element[];
+	badgeColor?: string;
+	className?: string;
+	isLoading?: boolean;
+	children?: JSX.Element | JSX.Element[] | string;
+}
+export declare const NavigationLink: FunctionComponent<NavigationLinkProps>;
+export interface PaginationProps {
+	pageIndex: number;
+	pageCount: number;
+	setPage: (pageIndex: number) => void;
+}
+export declare const Pagination: FunctionComponent<PaginationProps>;
+export interface SkeletonLoaderProps extends SkeletonProps {
+	/**
+	 * The loading state of the component - defaults to false
+	 */
+	isLoading?: boolean;
+	/**
+	 * The component to show after loading
+	 */
+	afterLoading?: JSX.Element | string | null;
+	/**
+	 * HTML className for the wrapper
+	 */
+	wrapperClassName?: string;
+}
+export declare const SkeletonLoader: FunctionComponent<SkeletonLoaderProps>;
+export interface PropsGetters {
+	getButtonProps: (args: StringIndexedObject) => HTMLAttributes<HTMLButtonElement>;
+	getIconProps: (args: StringIndexedObject) => IconProps;
+	getSkeletonProps: (args: SkeletonLoaderProps) => IconProps;
+}
+export interface PropsHook extends PropsGetters {
+	classNames: StringIndexedObject;
+}
+export type Options = StringIndexedObject;
+export interface PassConstantsProps {
+	children: (args: PropsHook) => JSX.Element;
+	constants: Options;
+	className: string;
+	variant: Variant;
+	left: boolean;
+	iconSpacing: Variant;
+	loading: boolean;
+	size: Variant;
+}
+export declare const PassConstants: FunctionComponent<PassConstantsProps>;
+export interface PlaceHolderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+	children?: JSX.Element;
+	className?: string;
+	backgroundColour?: string;
+	/**
+	 * Title of card
+	 */
+	title?: JSX.Element | string;
+	/**
+	 * Call to action element
+	 */
+	cta?: JSX.Element | string;
+	/**
+	 * Set's content to top
+	 */
+	top?: boolean;
+}
+export declare const PlaceHolder: FunctionComponent<PlaceHolderProps>;
+export interface StandardHandleCloseArgs {
+	handleClose: () => void;
+}
+export type StandardHandleClose = (args: StandardHandleCloseArgs) => JSX.Element | JSX.Element[];
+export interface StandardProps {
+	children: StandardHandleClose;
+	button?: JSX.Element | JSX.Element | null;
+	className?: string;
+	/**
+	 * Position above button rather than below
+	 */
+	above?: boolean;
+	/**
+	 * Position popover to right-align rather than left-align
+	 */
+	right?: boolean;
+	/**
+	 * Visible state
+	 */
+	visible?: boolean | number;
+	/**
+	 * Y margin shift - tailwind className
+	 */
+	yMargin?: string;
+	/**
+	 * X margin shift - tailwind className
+	 */
+	xMargin?: string;
+}
+export type PopoverMenuItemSelectedColorVariant = "default" | "green";
+export interface PopoverMenuItemProps extends HTMLAttributes<HTMLButtonElement | HTMLDivElement> {
+	name: string;
+	icon: string;
+	size?: PopoverMenuItemSize;
+	arrow?: boolean;
+	selected?: boolean;
+	seperator?: boolean;
+	selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}
+export declare const PopoverMenuItem: FunctionComponent<PopoverMenuItemProps>;
+export type PopoverMenuItemSize = "xs" | "small" | "medium" | "big";
+export interface PopoverMenuProps {
+	className?: string;
+	/**
+	 * On close function
+	 */
+	onClose?: () => void;
+	items: PopoverMenuItemProps[];
+	size?: PopoverMenuItemSize;
+	header?: JSX.Element | JSX.Element[] | null;
+	content?: JSX.Element | JSX.Element[] | null;
+	/**
+	 * Notice banner to show
+	 */
+	notice?: FunctionComponent;
+	selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}
+export interface AdvancedItem {
+	action?: {
+		type: "open_panel";
+		action?: () => JSX.Element;
+		panel?: () => JSX.Element;
+	};
+	name: string;
+	icon?: string;
+	stopPropagation?: boolean;
+}
+export interface AdvancedWrapperArgs {
+	children: JSX.Element;
+}
+export interface AdvancedProps {
+	button: JSX.Element | JSX.Element[];
+	/**
+	 * Position above button rather than below
+	 */
+	above?: boolean;
+	/**
+	 * Position popover to right-align rather than left-align
+	 */
+	right?: boolean;
+	/**
+	 * Button wrapper
+	 */
+	wrapper?: (args: AdvancedWrapperArgs) => JSX.Element;
+	items?: AdvancedItem[];
+	/**
+	 * On action callback
+	 */
+	className?: string;
+	onAction?: (action: StringIndexedObject, e: MouseEvent) => void;
+	/**
+	 * Size
+	 */
+	size?: PopoverMenuItemSize;
+	search?: FunctionComponent;
+	searchInput?: FunctionComponent;
+	searchPlaceholder?: string;
+	searchDebounceInterval?: number;
+	variant?: "panel-full" | "panel-short" | "green" | "default";
+	selectedColorVariant?: PopoverMenuItemSelectedColorVariant;
+}
+export interface StickyProps {
+	children: JSX.Element;
+	content: JSX.Element;
+}
+export declare const Popover: {
+	Standard: import("react").FunctionComponent<StandardProps>;
+	Advanced: import("react").FunctionComponent<AdvancedProps>;
+	Sticky: import("react").FunctionComponent<StickyProps>;
+};
+export declare const PopoverMenu: FunctionComponent<PopoverMenuProps>;
+export interface PriceProps {
+	className?: string;
+	/**
+	 * Price color
+	 */
+	color?: string;
+	wrapperClassName?: string;
+	poundsClassName?: string;
+	centsClassName?: string;
+	/**
+	 * Price amount in cents
+	 */
+	amount?: number;
+	isLoading?: boolean;
+}
+export declare const Price: FunctionComponent<PriceProps>;
+export declare const Recaptcha: FunctionComponent;
+export interface ScrollTopButtonProps {
+	containerRef?: MutableRefObject<HTMLElement>;
+}
+export declare const ScrollTopButton: FunctionComponent<ScrollTopButtonProps>;
+export interface SeparatorProps {
+}
+export declare const Separator: FunctionComponent<SeparatorProps>;
+export interface StrengthMeterProps {
+	score: number;
+	isLoading?: boolean;
+	totalItems?: number;
+}
+export declare const StrengthMeter: FunctionComponent<StrengthMeterProps>;
+export declare const Tag: FunctionComponent<TagProps>;
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+	text?: JSX.Element | string;
+	className?: string;
+	skeletonClassName?: string;
+	isLoading?: boolean;
+	textComponent?: keyof JSX.IntrinsicElements;
+	skeletonProps?: SkeletonProps;
+	htmlFor?: string;
+}
+export declare const Text: FunctionComponent<TextProps>;
+export interface TextSlidesProps {
+	children: JSX.Element[];
+	autoRotating?: boolean;
+	autoRotateTime?: number;
+}
+export declare const TextSlides: FunctionComponent<TextSlidesProps>;
+export interface TimeAgoProps {
+	className?: string;
+	/**
+	 * Timestamp - any valid date timestamp format, as converted to date using
+	 * `new Date(timestamp)` for initial checking
+	 */
+	timestamp?: number;
+}
+export declare const TimeAgo: FunctionComponent<TimeAgoProps>;
+declare const FILL_CLASS_NAMES: StringIndexedObject<string>;
+export interface TimelineItem {
+	title: string;
+	date?: string;
+	fill: keyof typeof FILL_CLASS_NAMES;
+}
+export interface TimelineProps {
+	items: TimelineItem[];
+	canDeleteItem?: boolean;
+	onDeleteItem?: (item: TimelineItem) => void;
+	flipped?: boolean;
+	compact?: boolean;
+}
+export declare const Timeline: FunctionComponent<TimelineProps>;
+export interface ExpandableContentProps {
+	showLabel: string;
+	hideLabel: string;
+	compact?: boolean;
+	children: JSX.Element | JSX.Element[];
+}
+export declare const ExpandableContent: FunctionComponent<ExpandableContentProps>;
+/**
+ * The hook to match media queries.
+ * Returns true if there are matches for media query
+ *
+ * @param {string} query media query ex: (min-width: 768px)
+ * @return {Boolean} true if it matches
+ */
+export declare const useMediaQuery: (query: string) => boolean;
+/**
+ * The hook to check it current view is on desktop
+ * @return {Boolean} true if it's desktop
+ */
+export declare const useIsDesktop: () => boolean;
+export function useClasses(constants?: StringIndexedObject, extend?: StringIndexedObject): StringIndexedObject;
+export interface MessageProps {
+	message: string;
+	showIcon?: boolean;
+	icon?: IconProps;
+	container?: HTMLProps<HTMLDivElement>;
+	span?: HTMLProps<HTMLDivElement>;
+}
+export type ToastId = Id;
+export type ToastMessageFunction = (message: string, messageProps?: Omit<MessageProps, "message">, options?: ToastOptions) => ToastId;
+export interface ToastHook {
+	toast: (content: ToastContent, options?: ToastOptions) => ToastId;
+	dismiss: (id: ToastId) => void;
+	showInfo: ToastMessageFunction;
+	showError: ToastMessageFunction;
+	showWarning: ToastMessageFunction;
+	showSuccess: ToastMessageFunction;
+}
+export function useToast(): ToastHook;
+export interface Hook extends Variants {
+	media: "desktop" | "mobile";
+	loading: boolean;
+}
+export function useVariants(variants: Variants): Hook;
+export interface HelpCrunchHook {
+	openChat: () => void;
+	closeChat: () => void;
+	showNewMessage: (message: string) => void;
+	showProactiveMessage: (id: string | number) => void;
+	update: (settings: StringIndexedObject) => void;
+}
+/**
+ * Hook for using helpcrunch Javascript API Methods.
+ *
+ * Docs:
+ * - Methods:
+ *   https://docs.helpcrunch.com/developers/methods
+ */
+export function useHelpcrunch(): HelpCrunchHook;
+export function useEscClick(callback: (e: KeyboardEvent) => void): void;
+export interface UseButtonTrackingHook {
+	onClick: ButtonOnClick;
+}
+export function useButtonTracking(id: string, onClick?: ButtonOnClick): UseButtonTrackingHook;
+export interface MousePositionHook {
+	x: number | null;
+	y: number | null;
+}
+export function useMousePosition(ref?: MutableRefObject<HTMLElement> | null, offsetY?: number, offsetX?: number): MousePositionHook;
+export interface FuseHit<T> {
+	item: T;
+	refIndex: number;
+}
+export interface FuseHook<T> {
+	hits: FuseHit<T>[];
+	handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+	setQuery: Dispatch<SetStateAction<string>>;
+	query: string;
+}
+export function useFuse<T>(list: T[], options: StringIndexedObject, initialQuery: string, debounce?: number): FuseHook<T>;
+export interface FrontChatWidgetSettings {
+	email: string;
+	name?: string;
+	customFields?: StringIndexedObject;
+}
+export interface FrontChatWidgetHook {
+	openChat: () => void;
+	closeChat: () => void;
+	update: (settings: FrontChatWidgetSettings) => void;
+}
+/**
+ * Hook for using FrontChat Javascript API Methods.
+ *
+ * Docs:
+ * - Methods:
+ *   https://dev.frontapp.com/docs/chat-sdk-reference
+ */
+export function useFrontChatWidget(): FrontChatWidgetHook;
+
+export {};