@reapit/elements 5.0.0-beta.3 → 5.0.0-beta.6

package/README.md

@@ -7,6 +7,7 @@ A React UI toolkit, with cross platform support for building web applications in
 [![Test PR](https://github.com/reapit/elements/actions/workflows/test-pr.yml/badge.svg)](https://github.com/reapit/elements/actions/workflows/test-pr.yml)
 [![Release Dev](https://github.com/reapit/elements/actions/workflows/release-dev.yml/badge.svg)](https://github.com/reapit/elements/actions/workflows/release-dev.yml)
 [![Release Prod](https://github.com/reapit/elements/actions/workflows/release-prod.yml/badge.svg)](https://github.com/reapit/elements/actions/workflows/release-prod.yml)
+[![Visual Regression Tests](https://github.com/reapit/elements/actions/workflows/playwright.yml/badge.svg)](https://github.com/reapit/elements/actions/workflows/playwright.yml)
 
 ## Documentation
 

package/dist/cjs/components/accordion/__styles__/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const ElAccordionContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ElAccordionItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ElAccordionItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
 export declare const ElAccordionTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElAccordionTitleContentWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElAccordionTitleContent: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/components/accordion/accordion.d.ts

@@ -1,6 +1,8 @@
 import { Dispatch, FC, HTMLAttributes, ReactNode, SetStateAction } from 'react';
 export interface AccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
 }
+export interface AccordionBaseItemProps extends HTMLAttributes<HTMLAnchorElement> {
+}
 export interface AccordionTitleItemProps {
 }
 export interface AccordionItemProps {
@@ -13,8 +15,8 @@ export interface AccordionProps extends AccordionBaseProps {
     items: AccordionItemProps[];
 }
 export declare const AccordionContainer: FC<AccordionBaseProps>;
-export declare const AccordionItem: FC<AccordionBaseProps>;
-export declare const AccordionTitle: FC<AccordionBaseProps>;
+export declare const AccordionItem: FC<AccordionBaseItemProps>;
+export declare const AccordionTitle: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const AccordionTitleContentWrapper: FC<AccordionBaseProps>;
 export declare const AccordionTitleContent: FC<AccordionBaseProps>;
 export declare const AccordionContent: FC<AccordionBaseProps>;

package/dist/cjs/components/avatar/__styles__/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const elAvatarSmall: import("@linaria/core").LinariaClassName;
 export declare const ElAvatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ElAvatarImage: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+export declare const ElAvatarImage: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;

package/dist/cjs/components/avatar/avatar.d.ts

@@ -2,5 +2,6 @@ import { FC, HTMLAttributes } from 'react';
 export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     type?: 'profile' | 'image';
     src?: string;
+    alt?: string;
 }
 export declare const Avatar: FC<AvatarProps>;

package/dist/cjs/components/breadcrumb/__styles__/index.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const ElBreadCrumbItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ElBreadCrumbItem: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
 export declare const ElBreadCrumbContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/components/breadcrumb/breadcrumb.d.ts

@@ -1,11 +1,11 @@
 import { Dispatch, FC, HTMLAttributes, MouseEvent, SetStateAction } from 'react';
-export interface BreadCrumbItem extends HTMLAttributes<HTMLDivElement> {
+export interface BreadCrumbItem extends HTMLAttributes<HTMLAnchorElement> {
     text: string;
     onClick: () => void;
 }
-export interface BreadCrumbProps extends HTMLAttributes<HTMLDivElement> {
+export interface BreadCrumbProps extends HTMLAttributes<HTMLElement> {
     items: BreadCrumbItem[];
     defaultActiveIndex?: number;
 }
-export declare const handleNext: (setActive: Dispatch<SetStateAction<number>>, onClick: () => void, index: number) => (e: MouseEvent<HTMLDivElement>) => void;
+export declare const handleNext: (setActive: Dispatch<SetStateAction<number>>, onClick: () => void, index: number) => (e?: MouseEvent<HTMLAnchorElement>) => void;
 export declare const BreadCrumb: FC<BreadCrumbProps>;

package/dist/cjs/components/button/__styles__/index.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-export declare const elButtonSize2: import("@linaria/core").LinariaClassName;
-export declare const elButtonSize3: import("@linaria/core").LinariaClassName;
-export declare const elButtonSize4: import("@linaria/core").LinariaClassName;
 export declare const elButtonSizeSmall: import("@linaria/core").LinariaClassName;
 export declare const elButtonSizeLarge: import("@linaria/core").LinariaClassName;
 export declare const elButtonSizeMedium: import("@linaria/core").LinariaClassName;
@@ -13,7 +10,5 @@ export declare const elButtonGroupAlignRight: import("@linaria/core").LinariaCla
 export declare const elButtonGroupAlignCenter: import("@linaria/core").LinariaClassName;
 export declare const elButtonFixedWidth: import("@linaria/core").LinariaClassName;
 export declare const ElButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const elButtonHasLeftChevron: import("@linaria/core").LinariaClassName;
-export declare const elButtonHasRightChevron: import("@linaria/core").LinariaClassName;
 export declare const ElButtonGroup: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElButtonGroupInner: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, FC, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, FC, HTMLAttributes, MouseEvent, MouseEventHandler } from 'react';
 import { Intent } from '../../helpers/intent';
 import { IconNames } from '../icon';
 export type ButtonSizeType = 2 | 3 | 4;
@@ -14,6 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
     buttonSize?: ButtonSize;
     buttonIcon?: ButtonIcon;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 export interface FloatingButtonProps extends ButtonProps {
     icon: IconNames;
@@ -22,6 +23,7 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     alignment?: ButtonGroupAlignment;
 }
 export declare const resolveButtonClassName: (intent?: Intent) => string;
+export declare const handleButtonClick: (onClick?: MouseEventHandler<HTMLButtonElement>) => (e: MouseEvent<HTMLButtonElement>) => void;
 export declare const Button: FC<ButtonProps>;
 export declare const ButtonGroup: FC<ButtonGroupProps>;
 export declare const FloatingButton: FC<FloatingButtonProps>;

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

@@ -31,6 +31,7 @@ export declare const StandardAttributes: {
         onClick: import("@storybook/addon-actions").HandlerFunction;
         type: string;
         children: string;
+        'aria-label': string;
     };
 };
 export declare const Group: {

package/dist/cjs/components/card/__styles__/index.d.ts

@@ -12,7 +12,7 @@ export declare const elCardBodyWrapExpanded: import("@linaria/core").LinariaClas
 export declare const ElCardBodyWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const elMobileListToggle: import("@linaria/core").LinariaClassName;
 export declare const ElCardAvatarWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ElCardImageWrap: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+export declare const ElCardImageWrap: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any> | undefined;
 }>;
 export declare const ElCardList: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -1,4 +1,4 @@
-import { Dispatch, FC, HTMLAttributes, SetStateAction, MouseEvent, ReactNode } from 'react';
+import { Dispatch, FC, HTMLAttributes, SetStateAction, ReactNode } from 'react';
 import { IconNames } from '../icon';
 import { Intent } from '../../helpers/intent';
 export interface CardListItemProps {
@@ -29,6 +29,5 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     listCardItems?: CardListItemProps[];
     isSelected?: boolean;
 }
-export declare const handleToggleContextMenu: (contextMenuOpen: boolean, setContextMenuOpen: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent) => void;
 export declare const handleMouseHover: (hoverIndex: number | null, setHoverIndex: Dispatch<SetStateAction<number | null>>) => () => void;
 export declare const Card: FC<CardProps>;

package/dist/cjs/components/drawer/drawer.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { FC, HTMLAttributes, ReactNode } from 'react';
 export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     onDrawerClose: () => void;
@@ -17,4 +17,5 @@ export declare const DrawerTitle: FC<DrawerBaseProps>;
 export declare const DrawerSubtitle: FC<DrawerBaseProps>;
 export declare const DrawerBody: FC<DrawerBaseProps>;
 export declare const DrawerFooter: FC<DrawerBaseProps>;
+export declare const handleDrawerFocus: (drawerRef: React.RefObject<HTMLDivElement>, isOpen: boolean) => () => void;
 export declare const Drawer: FC<DrawerProps>;

package/dist/cjs/components/drawer/drawer.stories.d.ts

@@ -11,6 +11,9 @@ export declare const BasicUsageClosed: {
 export declare const ReactUsage: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const ReactUsageWithForm: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
 export declare const ReactUsageCanDismiss: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
     name: string;

package/dist/cjs/components/file-input/file-input.d.ts

@@ -18,7 +18,7 @@ export interface CreateImageUploadModel {
 export interface ImageUploadModel {
     Url: string;
 }
-export declare const handleFileChange: (setFileName: Dispatch<SetStateAction<string>>, fileName: string, onFileUpload?: ((uploadImageModel: CreateImageUploadModel) => Promise<string | ImageUploadModel>) | undefined) => (event: ChangeEvent<HTMLInputElement>) => FileReader | undefined;
+export declare const handleFileChange: (setFileName: Dispatch<SetStateAction<string>>, fileName: string, onFileUpload?: (uploadImageModel: CreateImageUploadModel) => Promise<string | ImageUploadModel>) => (event: ChangeEvent<HTMLInputElement>) => FileReader | undefined;
 export declare const handleFileClear: (setFileName: Dispatch<SetStateAction<string>>) => (event: MouseEvent<HTMLSpanElement>) => void;
 export declare const handleFileView: (onFileView: (fileUrl: string) => void, fileUrl: string) => (event: MouseEvent<HTMLSpanElement>) => void;
 export declare const FilePreviewImage: FC<FilePreviewImageProps>;

package/dist/cjs/components/form-layout/__styles__/index.d.ts

@@ -6,3 +6,4 @@ export declare const ElInputWrapSmall: import("@linaria/react").StyledComponent<
 export declare const ElInputWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElInputWrapMed: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElInputWrapFull: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ElInputWrapHalf: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/components/form-layout/form-layout.d.ts

@@ -8,3 +8,4 @@ export declare const InputWrap: React.ForwardRefExoticComponent<FormLayoutProps
 export declare const InputWrapSmall: FC<FormLayoutProps>;
 export declare const InputWrapMed: FC<FormLayoutProps>;
 export declare const InputWrapFull: FC<FormLayoutProps>;
+export declare const InputWrapHalf: FC<FormLayoutProps>;

package/dist/cjs/components/icon/__styles__/index.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-export declare const elIconMenu: import("@linaria/core").LinariaClassName;
 export declare const ElIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/dist/cjs/components/icon/icon-component.d.ts

@@ -2,7 +2,6 @@ import { FC, HTMLAttributes } from 'react';
 import { Intent } from '../../helpers/intent';
 import { iconSet } from '../../icons';
 export type IconNames = keyof typeof iconSet;
-export type IconSize = 'smallest' | 'small' | 'medium' | 'large' | 'largest';
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     icon: IconNames;
     intent?: Intent;

package/dist/cjs/components/input-group/input-group.stories.d.ts

@@ -46,12 +46,6 @@ export declare const InputCheckboxNoLabel: {
 export declare const InputRadio: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const InputRadioWithIntent: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-};
-export declare const InputRadioWithInputAddOn: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-};
 export declare const ErrorMessage: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
     name: string;

package/dist/cjs/components/layout/__styles__/index.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const elHasGreyBackground: import("@linaria/core").LinariaClassName;
 export declare const elHasMaxWidth: import("@linaria/core").LinariaClassName;
-export declare const ElMainContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown>>;
-export declare const ElPageContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown>>;
-export declare const ElSecondaryNavContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & Record<never, unknown>>;
-export declare const ElFlexContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const elMainContainer: import("@linaria/core").LinariaClassName;
+export declare const elPageContainer: import("@linaria/core").LinariaClassName;
+export declare const elSecondaryNavContainer: import("@linaria/core").LinariaClassName;
+export declare const elFlexContainer: import("@linaria/core").LinariaClassName;

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

@@ -1,7 +1,9 @@
 import { HTMLAttributes, FC } from 'react';
+type LayoutTags = 'main' | 'aside' | 'section' | 'div';
 export interface ContainerProps extends HTMLAttributes<HTMLElement> {
     hasGreyBackground?: boolean;
     hasMaxWidth?: boolean;
+    tag?: LayoutTags;
 }
 export interface ContainerFlexProps extends ContainerProps {
     isFlexRow?: boolean;
@@ -28,7 +30,12 @@ export interface ContainerFlexProps extends ContainerProps {
     isFlexAlignEnd?: boolean;
     hasGreyBackground?: boolean;
 }
+interface TaggedElementProps extends ContainerProps {
+    baseClass: string;
+}
+export declare const TaggedElement: FC<TaggedElementProps>;
 export declare const MainContainer: FC<ContainerProps>;
 export declare const PageContainer: FC<ContainerProps>;
 export declare const SecondaryNavContainer: FC<ContainerProps>;
 export declare const FlexContainer: FC<ContainerFlexProps>;
+export {};

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

@@ -22,6 +22,9 @@ export declare const HasGreyBackground: {
 export declare const FlexContainerUsage: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const TaggedLayouts: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
 export declare const CombinedContainerComponents: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
     isOpen: boolean;
     onModalClose: () => void;
@@ -11,4 +11,5 @@ export declare const ModalBg: FC<ModalBaseProps>;
 export declare const ModalContainer: FC<ModalBaseProps>;
 export declare const ModalHeader: FC<ModalBaseProps>;
 export declare const ModalBody: FC<ModalBaseProps>;
+export declare const handleModalFocus: (modalRef: React.RefObject<HTMLDivElement>, isOpen: boolean) => () => void;
 export declare const Modal: FC<ModalProps>;

package/dist/cjs/components/multi-select/multi-select.d.ts

@@ -14,9 +14,10 @@ export interface MultiSelectInputProps extends InputHTMLAttributes<HTMLInputElem
 export type MultiSelectInputWrapped = React.ForwardRefExoticComponent<MultiSelectInputProps & RefAttributes<InputHTMLAttributes<HTMLInputElement>>>;
 export interface MultiSelectChipProps extends InputHTMLAttributes<HTMLInputElement> {
 }
-export declare const handleSetNativeInput: (id: string, selectedOptionValues: string[], testFunc?: ((value: string[]) => void) | undefined) => () => void;
+export declare const handleSetNativeInput: (id: string, selectedOptionValues: string[], testFunc?: (value: string[]) => void) => () => void;
 export declare const handleResetDefaultValues: (setSelectedOptionValues: Dispatch<SetStateAction<string[]>>, setSelectedDefaultValues: Dispatch<SetStateAction<string[]>>, defaultValues?: string[], selectedDefaultValues?: string[]) => () => void;
 export declare const handleSelectedOptions: (value: string, selectedOptionValues: string[], setSelectedOptionValues: Dispatch<SetStateAction<string[]>>) => (event: ChangeEvent<HTMLInputElement>) => void;
+export declare const handleSelectedKeyboardOptions: (value: string, selectedOptionValues: string[], setSelectedOptionValues: Dispatch<SetStateAction<string[]>>, isChecked: boolean) => () => void;
 export declare const MultiSelectChip: FC<MultiSelectChipProps>;
 export declare const MultiSelect: FC<MultiSelectProps>;
 export declare const MultiSelectSelected: FC<MultiSelectProps>;

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

@@ -12,7 +12,6 @@ export declare const ElNavSubItem: import("@linaria/react").StyledComponent<impo
 export declare const elNavSubItemExpanded: import("@linaria/core").LinariaClassName;
 export declare const elNavSubItemActive: import("@linaria/core").LinariaClassName;
 export declare const elNavItemHideDesktop: import("@linaria/core").LinariaClassName;
-export declare const elNavIsDesktop: import("@linaria/core").LinariaClassName;
 export declare const elNavIsHidden: import("@linaria/core").LinariaClassName;
 export declare const ElNavMenu: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElNavMenuOption: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/components/nav/nav-responsive.d.ts

@@ -38,8 +38,8 @@ export interface NavResponsiveAppSwitcherProps {
     options: NavResponsiveAppSwitcherOption[];
 }
 export type LogoIcon = 'reapitLogoSelectedMenu' | 'reapitLogoMenu';
-export declare const handleToggleMenu: (setState: Dispatch<SetStateAction<boolean>>, callback?: () => void) => (event: MouseEvent<HTMLDivElement>) => void;
-export declare const clickNavEventHandler: (setActive: Dispatch<SetStateAction<boolean>>) => (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
+export declare const handleToggleMenu: (setState: Dispatch<SetStateAction<boolean>>, callback?: () => void) => (event?: MouseEvent<HTMLDivElement>) => void;
+export declare const clickNavEventHandler: (setActive: Dispatch<SetStateAction<boolean>>) => (event?: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
 export declare const NavResponsiveAvatar: FC<NavResponsiveAvatarProps>;
 export declare const NavResponsiveAppSwitcher: FC<NavResponsiveAppSwitcherProps>;
 export declare const NavResponsive: FC<NavResponsiveProps>;

package/dist/cjs/components/pagination/pagination.d.ts

@@ -16,7 +16,7 @@ export interface PaginationButtonProps extends HTMLAttributes<HTMLButtonElement>
 }
 export declare const handlePageChange: (nextPage: number | null, callback: (page: number) => void, setInputValue: Dispatch<SetStateAction<string>>) => () => void;
 export declare const handlePageInputChange: (numberPages: number, currentPage: number, inputValue: string, callback: (page: number) => void) => () => void;
-export declare const handlePageInput: (setInputValue: Dispatch<SetStateAction<string>>) => (event: ChangeEvent<HTMLInputElement>) => void;
+export declare const handlePageInput: (setInputValue: Dispatch<SetStateAction<string>>, numberPages: number) => (event: ChangeEvent<HTMLInputElement>) => void;
 export declare const PaginationWrap: FC<PaginationWrapProps>;
 export declare const PaginationText: FC<PaginationTextProps>;
 export declare const PaginationInput: FC<PaginationInputProps>;

package/dist/cjs/components/progress-bar/__styles__/index.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-export declare const elProgressBarItemPurple: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemDarkBlue: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemMediumBlue: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemLightBlue: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemLightestBlue: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemYellow: import("@linaria/core").LinariaClassName;
-export declare const elProgressBarItemOrange: import("@linaria/core").LinariaClassName;
 export declare const ElProgressBarContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElProgressBarLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElProgressBarInner: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/dist/cjs/components/searchable-dropdown/__styles__/index.d.ts

@@ -2,8 +2,8 @@
 export declare const ElSearchableDropdownContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElSearchableDropdownResult: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ElSearchableDropdownResultsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ElSearchableDropdownSearchInputAddOn: import("@linaria/react").StyledMeta & import("react").FC<import("../../input-add-on").InputAddOnProps>;
-export declare const ElSearchableDropdownCloseButton: import("@linaria/react").StyledMeta & import("react").FC<import("../../icon").IconProps>;
-export declare const ElSearchableDropdownSearchInput: import("@linaria/react").StyledMeta & import("../../input").InputWrapped;
-export declare const ElSearchableDropdownSearchLabel: import("@linaria/react").StyledMeta & import("react").FC<import("../../label").LabelProps>;
-export declare const ElSearchableDropdownSearchLoader: import("@linaria/react").StyledMeta & import("react").FC<import("../../loader").LoaderProps>;
+export declare const ElSearchableDropdownSearchInputAddOn: import("@linaria/react").WYWEvalMeta & import("react").FC<import("../../input-add-on").InputAddOnProps>;
+export declare const ElSearchableDropdownCloseButton: import("@linaria/react").WYWEvalMeta & import("react").FC<import("../../icon").IconProps>;
+export declare const ElSearchableDropdownSearchInput: import("@linaria/react").WYWEvalMeta & import("../../input").InputWrapped;
+export declare const ElSearchableDropdownSearchLabel: import("@linaria/react").WYWEvalMeta & import("react").FC<import("../../label").LabelProps>;
+export declare const ElSearchableDropdownSearchLoader: import("@linaria/react").WYWEvalMeta & import("react").FC<import("../../loader").LoaderProps>;

package/dist/cjs/components/searchable-dropdown/searchable-dropdown.d.ts

@@ -27,10 +27,10 @@ export interface ControlledSearchableDropdownProps<T> extends React.InputHTMLAtt
 }
 export declare const SearchableDropdownControlledInner: <T extends unknown>({ isResultsListVisible, icon, loading, resultsList, onResultClick, onClear, isClearVisible, value, selectedValue, id, label, ...inputProps }: ControlledSearchableDropdownProps<T>, ref: React.ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlledSearchableDropdown: <T>(props: ControlledSearchableDropdownProps<T> & {
-    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+    ref?: React.ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof SearchableDropdownControlledInner>;
 export declare const SearchableDropdownInner: <T extends unknown>({ getResults, icon, getResultValue, getResultLabel, onChange, defaultVal, id, ...inputProps }: SearchableDropdownProps<T>, ref: React.ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const SearchableDropdown: <T>(props: SearchableDropdownProps<T> & {
-    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+    ref?: React.ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof SearchableDropdownInner>;
 export declare const SearchableDropdownSearchLabel: FC<HTMLAttributes<HTMLLabelElement>>;

package/dist/cjs/components/select/select.stories.d.ts

@@ -6,7 +6,3 @@ export default _default;
 export declare const BasicUsage: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const UseWithALabel: {
-    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};

package/dist/cjs/components/steps/steps.d.ts

@@ -15,5 +15,6 @@ export interface StepsVerticalProps extends HTMLAttributes<HTMLDivElement> {
     onStepClick?: (step: string) => void;
     className?: string;
 }
+export declare const handleStepClick: (step: string, onStepClick?: (step: string) => void) => () => void;
 export declare const Steps: FC<StepsProps>;
 export declare const StepsVertical: FC<StepsVerticalProps>;

package/dist/cjs/components/table/molecules.d.ts

@@ -36,6 +36,7 @@ export declare const TableHeader: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const TableRow: FC<HTMLAttributes<HTMLDivElement>>;
 export declare const TableCellSplit: FC<TableCellSplitProps>;
 export declare const TableCell: FC<TableCellProps>;
+export declare const handleTableCtaClick: (onClick?: (event?: any) => void) => () => void;
 export declare const TableExpandableRowTriggerCell: FC<TableExpandableRowTriggerCellProps>;
 export declare const TableCtaTriggerCell: FC<TableCtaTriggerCellProps>;
 export declare const TableExpandableRow: FC<TableExpandableRowProps>;

package/dist/cjs/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes, MutableRefObject } from 'react';
 export interface TabsOption {
     id: string;
     value: string;
@@ -12,4 +12,5 @@ export interface TabsProps extends HTMLAttributes<HTMLInputElement> {
     isFullWidth?: boolean;
     hasNoBorder?: boolean;
 }
+export declare const handleKeyboardTabChange: (tabsRefs: MutableRefObject<(HTMLInputElement | null)[]>, index: number) => () => void;
 export declare const Tabs: FC<TabsProps>;

package/dist/cjs/components/toggle/toggle.d.ts

@@ -18,5 +18,6 @@ export interface ToggleRadioProps extends HTMLAttributes<HTMLInputElement> {
 }
 export type ToggleWrapped = React.ForwardRefExoticComponent<ToggleProps & RefAttributes<InputHTMLAttributes<HTMLInputElement>>>;
 export type ToggleRadioWrapped = React.ForwardRefExoticComponent<ToggleRadioProps & RefAttributes<InputHTMLAttributes<HTMLInputElement>>>;
+export declare const handleKeyboardToggleChange: (id: string) => () => void;
 export declare const Toggle: ToggleWrapped;
 export declare const ToggleRadio: ToggleRadioWrapped;

package/dist/cjs/components/typography/__styles__/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const elHasGreyText: import("@linaria/core").LinariaClassName;
 export declare const elHasNoMargin: import("@linaria/core").LinariaClassName;
 export declare const elHasRegularText: import("@linaria/core").LinariaClassName;
@@ -11,29 +10,15 @@ export declare const elHasSectionMargin: import("@linaria/core").LinariaClassNam
 export declare const elHasDisabledText: import("@linaria/core").LinariaClassName;
 export declare const elHasCapitalisedText: import("@linaria/core").LinariaClassName;
 export declare const elHasUpperCasedText: import("@linaria/core").LinariaClassName;
-export declare const ElTextBase: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const ElText3XL: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElText2XL: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElTextXL: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElTextL: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElTextSM: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElTextXS: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElText2XS: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import("react").ElementType<any> | undefined;
-}>;
-export declare const ElTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
-export declare const ElSubtitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & Record<never, unknown>>;
-export declare const ElBodyText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
-export declare const ElSmallText: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & Record<never, unknown>>;
+export declare const elTextBase: import("@linaria/core").LinariaClassName;
+export declare const elText3XL: import("@linaria/core").LinariaClassName;
+export declare const elText2XL: import("@linaria/core").LinariaClassName;
+export declare const elTextXL: import("@linaria/core").LinariaClassName;
+export declare const elTextL: import("@linaria/core").LinariaClassName;
+export declare const elTextSM: import("@linaria/core").LinariaClassName;
+export declare const elTextXS: import("@linaria/core").LinariaClassName;
+export declare const elText2XS: import("@linaria/core").LinariaClassName;
+export declare const elTitle: import("@linaria/core").LinariaClassName;
+export declare const elSubtitle: import("@linaria/core").LinariaClassName;
+export declare const elBodyText: import("@linaria/core").LinariaClassName;
+export declare const elSmallText: import("@linaria/core").LinariaClassName;

package/dist/cjs/components/typography/typography.d.ts

@@ -1,5 +1,6 @@
 import { FC, HTMLAttributes } from 'react';
 import { Intent } from '../../helpers/intent';
+export type TypeographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'small' | 'div' | 'span';
 export interface TypographyProps extends HTMLAttributes<HTMLElement> {
     hasGreyText?: boolean;
     hasNoMargin?: boolean;
@@ -14,7 +15,12 @@ export interface TypographyProps extends HTMLAttributes<HTMLElement> {
     hasCapitalisedText?: boolean;
     hasUpperCasedText?: boolean;
     intent?: Intent;
+    tag?: TypeographyTag;
 }
+export interface TaggedTypographyProps extends TypographyProps {
+    baseClass?: string;
+}
+export declare const TaggedTypography: FC<TaggedTypographyProps>;
 export declare const Text3XL: FC<TypographyProps>;
 export declare const Text2XL: FC<TypographyProps>;
 export declare const TextXL: FC<TypographyProps>;

package/dist/cjs/components/typography/typography.stories.d.ts

@@ -7,6 +7,9 @@ export default _default;
 export declare const BaseScale: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const TaggedTypography: {
+    render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+};
 export declare const TypographyModifiers: {
     render: ({}: {}) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/hooks/use-media-query/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { FC } from 'react';
 export interface MediaType {
     isMobile: boolean;
     isTablet: boolean;
@@ -12,6 +12,6 @@ export declare const TABLET_BREAKPOINT = 1024;
 export declare const DESKTOP_BREAKPOINT = 1440;
 export declare const WIDESCREEN_BREAKPOINT = 1920;
 export declare const SUPER_WIDESCREEN_BREAKPOINT = 2560;
-export declare const MediaStateContext: React.Context<MediaType>;
-export declare const MediaStateProvider: FC<PropsWithChildren>;
+export declare const MediaStateContext: import("react").Context<MediaType>;
+export declare const MediaStateProvider: FC;
 export declare const useMediaQuery: () => MediaType;

package/dist/cjs/hooks/use-media-query/media.stories.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import("react").FC<{
-        children?: import("react").ReactNode;
-    }>;
+    component: import("react").FC;
 };
 export default _default;
 export declare const MediaStateProviderUsage: {

package/dist/cjs/hooks/use-nav-state/index.d.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, MouseEvent, PropsWithChildren, FC } from 'react';
+import React, { Dispatch, SetStateAction, MouseEvent, FC } from 'react';
 export interface NavState {
     navItemIndex: number | null;
     navMenuOpen: boolean;
@@ -12,8 +12,8 @@ export interface NavStateContextProps {
 }
 export interface UseNavState {
     navState: NavState;
-    setNavState: (newState: Partial<NavState>) => (event: MouseEvent<HTMLAnchorElement | HTMLDivElement>) => void;
+    setNavState: (newState: Partial<NavState>) => (event?: MouseEvent<HTMLAnchorElement | HTMLDivElement | HTMLSpanElement>) => void;
 }
 export declare const NavStateContext: React.Context<NavStateContextProps>;
-export declare const NavStateProvider: FC<PropsWithChildren>;
+export declare const NavStateProvider: FC;
 export declare const useNavState: (defaultNavIndex?: number | null, defaultNavSubIndex?: number | null) => UseNavState;

package/dist/cjs/hooks/use-snack/index.d.ts

@@ -1,10 +1,10 @@
-import React, { PropsWithChildren, FC } from 'react';
+import { FC } from 'react';
 import { SnackProps } from '../../components/snack';
 export interface SnackContextProps {
     addSnackWithTimeout: (snack: SnackProps, timeout: number) => void;
 }
-export declare const SnackContext: React.Context<SnackContextProps>;
-export declare const SnackProvider: FC<PropsWithChildren>;
+export declare const SnackContext: import("react").Context<SnackContextProps>;
+export declare const SnackProvider: FC;
 export interface UseSnack {
     custom: (snack: SnackProps, timeout?: number) => void;
     success: (text: string, timeout?: number) => void;

package/dist/cjs/hooks/use-theme/index.d.ts

@@ -3,7 +3,7 @@ export interface UseThemeInterface {
     currentTheme: string;
 }
 export declare const THEME_BODY_CLASS = "reapit-theme";
-export declare const THEME_LOCAL_STOREAGE_KEY: string;
+export declare const THEME_LOCAL_STOREAGE_KEY = "reapit-foundations-reapit-theme";
 /**
  *
  * window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
@@ -12,5 +12,5 @@ export declare const THEME_LOCAL_STOREAGE_KEY: string;
  *
  */
 export declare const useTheme: ({ initialSelection }: {
-    initialSelection?: string | undefined;
+    initialSelection?: string;
 }) => UseThemeInterface;