@uob-web-and-digital/component-library 0.0.36 → 0.0.38

package/dist/components/atoms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ChangeEvent } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './checkbox.scss';
+export interface CheckboxProps {
+    theme: ThemeProps;
+    name: string;
+    value: string;
+    defaultChecked?: boolean;
+    label: string;
+    id: string;
+    onChange?: (e: ChangeEvent) => void;
+}
+export default function Checkbox({ theme, name, defaultChecked, label, id, value, onChange }: CheckboxProps): ReactElement;

package/dist/components/atoms/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;

package/dist/components/atoms/CourseDeliveryPill/CourseDeliveryPill.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './courseDeliveryPill.scss';
+type IconType = 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad';
+export interface CourseDeliveryPillProps {
+    theme: ThemeProps;
+    label: string;
+    iconType?: IconType;
+}
+export default function CourseDeliveryPill({ theme, label, iconType }: CourseDeliveryPillProps): ReactElement;
+export {};

package/dist/components/atoms/CourseDeliveryPill/CourseDeliveryPill.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import CourseDeliveryPill from './CourseDeliveryPill';
+declare const meta: {
+    title: string;
+    component: typeof CourseDeliveryPill;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof CourseDeliveryPill>;
+export declare const Default: Story;
+export declare const NoIcon: Story;

package/dist/components/atoms/CourseIcon/CourseIcon.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { IconType } from '../Icons/Icons';
+import './courseIcon.scss';
+export interface CourseIconProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    icon: IconType;
+    backgroundColor?: 'pale' | 'dark';
+}
+export default function CourseIcon({ theme, inverse, icon, backgroundColor }: CourseIconProps): ReactElement;

package/dist/components/atoms/CourseIcon/CourseIcon.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import CourseIcon from './CourseIcon';
+declare const meta: {
+    title: string;
+    component: typeof CourseIcon;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Clearing: Story;
+export declare const Phone: Story;
+export declare const Email: Story;
+export declare const PalePhone: Story;

package/dist/components/atoms/DateInput/DateInput.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './dateInput.scss';
+export interface DateInputProps {
+    theme: ThemeProps;
+    name: string;
+    id: string;
+    label: string;
+    defaultValue?: string;
+    onChange?: (e: ChangeEvent) => void;
+}
+export default function DateInput({ theme, name, id, label, defaultValue, onChange }: DateInputProps): ReactElement;

package/dist/components/atoms/DateInput/DateInput.stories.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import DateInput from './DateInput';
+declare const meta: {
+    title: string;
+    component: typeof DateInput;
+    tags: string[];
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        theme: import("../../../themeProps").ThemeProps;
+        name: string;
+        id: string;
+        label: string;
+        defaultValue?: string | undefined;
+        onChange?: ((e: React.ChangeEvent<Element>) => void) | undefined;
+    }>) => JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof DateInput>;
+export declare const Default: Story;

package/dist/components/atoms/Icons/Icons.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ThemeProps } from '../../../themeProps';
 import './icons.scss';
-export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play';
+export type IconType = 'twitter' | 'facebook' | 'wechat' | 'weibo' | 'youtube' | 'instagram' | 'linkedin' | 'tiktok' | 'chevron-down' | 'chevron-right' | 'arrow-right' | 'arrow-right-large' | 'location' | 'hamburger' | 'cross' | 'slim-cross' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks' | 'calendar' | 'clock' | 'internet' | 'slim-location' | 'bathroom' | 'catering' | 'pound' | 'scroll' | 'settings';
 export type IconProps = {
     /**
      * The theme to use

package/dist/components/atoms/RadioButton/RadioButton.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent, ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './radioButton.scss';
+export interface RadioButtonProps {
+    theme: ThemeProps;
+    name: string;
+    value: string;
+    label: string;
+    id: string;
+    defaultChecked?: boolean;
+    onChange?: (e: ChangeEvent) => void;
+}
+export default function RadioButton({ theme, name, value, label, id, onChange, defaultChecked }: RadioButtonProps): ReactElement;

package/dist/components/atoms/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+declare const meta: {
+    title: string;
+    component: typeof RadioButton;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof RadioButton>;
+export declare const Default: Story;

package/dist/components/atoms/SearchResultDetail/SearchResultDetail.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { IconType } from '../Icons/Icons';
+import './searchResultDetail.scss';
+export interface SearchResultDetailProps {
+    theme: ThemeProps;
+    iconType: IconType;
+    name: string;
+    value: string;
+}
+export default function SearchResultDetail({ iconType, name, value, theme }: SearchResultDetailProps): ReactElement;

package/dist/components/atoms/SearchResultDetail/SearchResultDetail.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import SearchResultDetail from './SearchResultDetail';
+declare const meta: {
+    title: string;
+    component: typeof SearchResultDetail;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/atoms/TextButton/TextButton.d.ts

@@ -25,5 +25,6 @@ export interface TextButtonProps {
      * Whether the button is used as a submit button in a form
      */
     isSubmit?: boolean;
+    disabled?: boolean;
 }
-export default function TextButton({ theme, inverse, label, onClick, url, externalLink, hollow, isSubmit }: TextButtonProps): ReactElement;
+export default function TextButton({ theme, inverse, label, onClick, url, externalLink, hollow, isSubmit, disabled }: TextButtonProps): ReactElement;

package/dist/components/atoms/TextButtonWithIcon/TextButtonWithIcon.d.ts

@@ -30,5 +30,9 @@ export interface TextButtonWithIconProps {
      * The icon to be used
      */
     icon: IconType;
+    /**
+     * The icon to be used
+     */
+    iconPosition?: 'left' | 'right';
 }
-export default function TextButtonWithIcon({ theme, inverse, label, onClick, url, externalLink, hollow, isSubmit, icon }: TextButtonWithIconProps): ReactElement;
+export default function TextButtonWithIcon({ theme, inverse, label, onClick, url, externalLink, hollow, isSubmit, icon, iconPosition }: TextButtonWithIconProps): ReactElement;

package/dist/components/atoms/VideoPlaceholder/VideoPlaceholder.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import './videoPlaceholder.scss';
+import { ThemeProps } from '../../../themeProps';
+export interface VideoPlaceholderProps {
+    theme: ThemeProps;
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+    onClick: () => void;
+}
+export default function VideoPlaceholder({ theme, imageSrc, onClick }: VideoPlaceholderProps): ReactElement;

package/dist/components/atoms/VideoPlaceholder/VideoPlaceholder.stories.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+import VideoPlaceholder from './VideoPlaceholder';
+declare const meta: {
+    title: string;
+    component: typeof VideoPlaceholder;
+    tags: string[];
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        theme: import("../../../themeProps").ThemeProps;
+        imageSrc: {
+            small?: string | undefined;
+            medium?: string | undefined;
+            default: string;
+        };
+        onClick: () => void;
+    }>) => JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof VideoPlaceholder>;
+export declare const Default: Story;

package/dist/components/atoms/VideoPlaceholder/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { VideoPlaceholderProps } from './VideoPlaceholder';
+export declare const videoPlaceholderProps: VideoPlaceholderProps;

package/dist/components/molecules/CardPromo/CardPromo.stories.d.ts

@@ -10,6 +10,7 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof CardPromo>;
-export declare const SinglePromoCard: Story;
+export declare const SinglePromoCardLight: Story;
+export declare const SinglePromoCardDark: Story;
 export declare const CardNoImage: Story;
 export declare const OneOfManyPromoCards: Story;

package/dist/components/molecules/CardRelatedCourse/CardRelatedCourse.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './cardRelatedCourse.scss';
+export interface CardRelatedProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    title: string;
+    subtitle: string;
+    href: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardRelated({ theme, inverse, title, subtitle, href }: CardRelatedProps): ReactElement;

package/dist/components/molecules/CardRelatedCourse/CardRelatedCourse.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import CardRelatedCourse from './CardRelatedCourse';
+declare const meta: {
+    title: string;
+    component: typeof CardRelatedCourse;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardRelatedCourse>;
+export declare const Example: Story;

package/dist/components/molecules/CardStaff/CardStaff.d.ts

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../atoms/Image/Image';
+import { ThemeProps } from '../../../themeProps';
+import './cardStaff.scss';
+export interface CardStaffProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    image: ImageProps;
+    name: string;
+    jobTitle: string;
+    department: string;
+    copy: string;
+    href: string;
+    isSingle?: boolean;
+    phone: string;
+    email: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export default function CardStaff({ theme, inverse, image, name, jobTitle, department, href, copy, phone, email, isSingle }: CardStaffProps): ReactElement;

package/dist/components/molecules/CardStaff/CardStaff.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import CardStaff from './CardStaff';
+declare const meta: {
+    title: string;
+    component: typeof CardStaff;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof CardStaff>;
+export declare const ExampleSingleCard: Story;
+export declare const OneOfManyStaffCards: Story;

package/dist/components/molecules/FilterAccordion/FilterAccordion.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { CheckboxProps } from '../../atoms/Checkbox/Checkbox';
+import { RadioButtonProps } from '../../atoms/RadioButton/RadioButton';
+import './filterAccordion.scss';
+export type FilterAccordionProps = CheckboxAccordionProps | RadioButtonAccordionProps;
+interface CheckboxAccordionProps {
+    theme: ThemeProps;
+    heading: string;
+    type: 'checkbox';
+    inputs: Omit<CheckboxProps, 'theme'>[];
+    /**
+     * Whether the accordion is open or closed by default
+     */
+    defaultIsOpen?: boolean;
+}
+interface RadioButtonAccordionProps {
+    theme: ThemeProps;
+    heading: string;
+    type: 'radio';
+    inputs: Omit<RadioButtonProps, 'theme'>[];
+    /**
+     * Whether the accordion is open or closed by default
+     */
+    defaultIsOpen?: boolean;
+}
+export default function FilterAccordion({ theme, heading, type, inputs, defaultIsOpen }: FilterAccordionProps): ReactElement;
+export {};

package/dist/components/molecules/FilterAccordion/FilterAccordion.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryObj } from '@storybook/react';
+import FilterAccordion from './FilterAccordion';
+declare const meta: {
+    title: string;
+    component: typeof FilterAccordion;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof FilterAccordion>;
+export declare const RadioButtons: Story;
+export declare const Checkboxes: Story;

package/dist/components/molecules/FilterAccordion/defaultProps.d.ts

@@ -0,0 +1,3 @@
+import { FilterAccordionProps } from './FilterAccordion';
+export declare const radioButtonFilterProps: FilterAccordionProps;
+export declare const checkboxFilterProps: FilterAccordionProps;

package/dist/components/molecules/ListingResultCard/Cards/AccomodationCard.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../../atoms/Image/Image';
+import { ThemeProps } from '../../../../themeProps';
+export interface AccomodationCardProps {
+    theme: ThemeProps;
+    type: 'accomodation';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    bathroomType: string;
+    cateringType: string;
+    price: string;
+    showCategory?: boolean;
+}
+export default function AccomodationCard({ theme, type, image, title, url, description, bathroomType, cateringType, price, showCategory }: AccomodationCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/Cards/CourseCard.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../../atoms/Image/Image';
+import { ThemeProps } from '../../../../themeProps';
+export interface CourseCardProps {
+    theme: ThemeProps;
+    type: 'course';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    supervisors?: string;
+    department?: string;
+    studyLevel: string;
+    studyMode: string;
+    fundingType?: string;
+    showCategory?: boolean;
+}
+export default function CourseCard({ theme, type, image, title, url, description, supervisors, department, studyLevel, studyMode, fundingType, showCategory }: CourseCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/Cards/EventCard.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../../atoms/Image/Image';
+import { ThemeProps } from '../../../../themeProps';
+export interface EventCardProps {
+    theme: ThemeProps;
+    type: 'event';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    date: string;
+    time: string;
+    format?: string;
+    location?: string;
+    showCategory?: boolean;
+}
+export default function EventCard({ theme, type, image, title, url, description, date, time, location, format, showCategory }: EventCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/Cards/NewsCard.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../../atoms/Image/Image';
+import { ThemeProps } from '../../../../themeProps';
+export interface NewsCardProps {
+    theme: ThemeProps;
+    type: 'news';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    author?: string;
+    datePublished?: string;
+    showCategory?: boolean;
+}
+export default function NewsCard({ theme, type, image, title, url, description, author, datePublished, showCategory }: NewsCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/Cards/PageCard.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../../themeProps';
+import { ImageProps } from '../../../atoms/Image/Image';
+export interface PageCardProps {
+    theme: ThemeProps;
+    type: 'page';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    showCategory?: boolean;
+}
+export default function PageCard({ image, title, url, description }: PageCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/Cards/StaffCard.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ImageProps } from '../../../atoms/Image/Image';
+import { ThemeProps } from '../../../../themeProps';
+export interface StaffCardProps {
+    theme: ThemeProps;
+    type: 'staff';
+    image?: ImageProps;
+    title: string;
+    url: string;
+    description?: string;
+    jobTitle?: string;
+    department?: string;
+    phone?: string;
+    email?: string;
+    showCategory?: boolean;
+}
+export default function StaffCard({ theme, type, image, title, url, description, jobTitle, department, phone, email, showCategory }: StaffCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/ListingResultCard.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { AccomodationCardProps } from './Cards/AccomodationCard';
+import { CourseCardProps } from './Cards/CourseCard';
+import { EventCardProps } from './Cards/EventCard';
+import { NewsCardProps } from './Cards/NewsCard';
+import { PageCardProps } from './Cards/PageCard';
+import { StaffCardProps } from './Cards/StaffCard';
+import './listingResultCard.scss';
+export type ListingResultCardProps = AccomodationCardProps | CourseCardProps | EventCardProps | NewsCardProps | PageCardProps | StaffCardProps;
+export default function ListingResultCard(props: ListingResultCardProps): ReactElement;

package/dist/components/molecules/ListingResultCard/ListingResultCard.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import ListingResultCard from './ListingResultCard';
+declare const meta: {
+    title: string;
+    component: typeof ListingResultCard;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof ListingResultCard>;
+export declare const PageCard: Story;
+export declare const PageCardNoImage: Story;
+export declare const EventCard: Story;
+export declare const StaffCard: Story;
+export declare const NewsCard: Story;
+export declare const AccomodationCard: Story;
+export declare const CourseCard: Story;

package/dist/components/molecules/ListingResultCard/defaultProps.d.ts

@@ -0,0 +1,12 @@
+import { PageCardProps } from './Cards/PageCard';
+import { EventCardProps } from './Cards/EventCard';
+import { StaffCardProps } from './Cards/StaffCard';
+import { NewsCardProps } from './Cards/NewsCard';
+import { AccomodationCardProps } from './Cards/AccomodationCard';
+import { CourseCardProps } from './Cards/CourseCard';
+export declare const pageCardProps: PageCardProps;
+export declare const eventCardProps: EventCardProps;
+export declare const staffCardProps: StaffCardProps;
+export declare const newsCardProps: NewsCardProps;
+export declare const accomodationCardProps: AccomodationCardProps;
+export declare const courseCardProps: CourseCardProps;

package/dist/components/molecules/PaginationNumbers/PaginationNumbers.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+export interface PaginationNumbersProps {
+    theme: ThemeProps;
+    numOfPages: number;
+    onClick: (pageNumber: number) => void;
+    currentPage: number;
+}
+export default function PaginationNumbers({ theme, numOfPages, onClick, currentPage }: PaginationNumbersProps): ReactElement;

package/dist/components/molecules/PaginationNumbers/PaginationNumbers.stories.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import PaginationNumbers from './PaginationNumbers';
+import '../../organisms/Pagination/pagination.scss';
+declare const meta: {
+    title: string;
+    component: typeof PaginationNumbers;
+    tags: string[];
+};
+export default meta;
+export declare const FourItems: () => ReactElement;
+export declare const SixItems: () => ReactElement;
+export declare const SevenItems: () => ReactElement;

package/dist/components/molecules/SearchResultDetailList/SearchResultDetailList.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { SearchResultDetailProps } from '../../atoms/SearchResultDetail/SearchResultDetail';
+import './searchResultDetailList.scss';
+export interface SearchResultDetailListProps {
+    theme: ThemeProps;
+    details: Omit<SearchResultDetailProps, 'theme'>[];
+}
+export default function SearchResultDetailList({ theme, details }: SearchResultDetailListProps): ReactElement;

package/dist/components/molecules/SearchResultDetailList/SearchResultDetailList.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+import SearchResultDetailList from './SearchResultDetailList';
+declare const meta: {
+    title: string;
+    component: typeof SearchResultDetailList;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/molecules/SearchResultDetailList/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { SearchResultDetailListProps } from './SearchResultDetailList';
+export declare const searchResultDetailListProps: SearchResultDetailListProps;

package/dist/components/molecules/Tab/Tab.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactElement, KeyboardEvent } from 'react';
+import { TabItemProps } from './TabItemProps';
+import './tab.scss';
+export interface TabProps {
+    /**
+     * The tab list id
+     */
+    id: number;
+    /**
+     * The theme to use
+     */
+    theme?: string;
+    /**
+     * Whether to invert the colours
+     */
+    inverse?: boolean;
+    /**
+     * The tab items properties
+     */
+    tabItem: TabItemProps;
+    /**
+     * Is the tab active
+     */
+    isActive: boolean;
+    /**
+     * Does the tab have focus
+     */
+    hasFocus: boolean;
+    /**
+     * The ref for the top of the tab list
+     */
+    tabListTopRef: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * The method to set the active tab
+     */
+    setActiveTab: (id: number) => void;
+    /**
+     * The method to handle keyboard navigation events
+     */
+    onKeyboardNavigation: (e: KeyboardEvent) => void;
+}
+export default function Tab({ id, theme, inverse, tabItem, isActive, hasFocus, setActiveTab, onKeyboardNavigation: onKeyboardNavigation }: TabProps): ReactElement | null;

package/dist/components/molecules/Tab/TabItemProps.d.ts

@@ -0,0 +1,16 @@
+export interface TabItemProps {
+    title: string;
+    content: string;
+    primaryButton?: {
+        text: string;
+        url: string;
+    };
+    secondaryButton?: {
+        text: string;
+        url: string;
+    };
+    link?: {
+        text: string;
+        url: string;
+    };
+}

package/dist/components/molecules/TabList/TabsList.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode } from 'react';
+import './tabsList.scss';
+export interface TabListProps {
+    /**
+     * The theme to use
+     */
+    theme?: string;
+    /**
+     * Whether to invert the colours
+     */
+    inverse?: boolean;
+    /**
+     * The child components to display in the list
+     */
+    children?: ReactNode;
+}
+export default function TabList({ children, theme, inverse }: TabListProps): ReactElement | null;