@uob-web-and-digital/component-library 0.0.35 → 0.0.37

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,10 @@
+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;
+}
+export default function CourseIcon({ theme, inverse, icon }: CourseIconProps): ReactElement;

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

@@ -0,0 +1,12 @@
+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;

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' | 'arrow-left' | 'search' | 'arrow-down' | 'play' | 'person' | 'people' | 'computer' | 'book' | 'briefcase' | 'notepad' | 'external' | 'clearing-tick' | 'phone' | 'email' | 'quote-marks';
 export type IconProps = {
     /**
      * The theme to use

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/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/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,11 @@
+import { ReactElement } from 'react';
+import PaginationNumbers from './PaginationNumbers';
+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/VideoWithPlaceholder/VideoWithPlaceholder.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './videoWithPlaceholder.scss';
+export interface VideoWithPlaceholderProps {
+    theme: ThemeProps;
+    videoId?: string;
+    videoUrl?: string;
+    imageSrc: {
+        small?: string;
+        medium?: string;
+        default: string;
+    };
+}
+export default function VideoWithPlaceholder({ theme, imageSrc, videoUrl, videoId }: VideoWithPlaceholderProps): ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { VideoWithPlaceholderProps } from './VideoWithPlaceholder';
+export declare const videoWithPlaceholderProps: VideoWithPlaceholderProps;

package/dist/components/organisms/AccreditationPromotion/AccreditationPromotion.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { ImageProps } from '../../atoms/Image/Image';
+import './accreditationPromotion.scss';
+interface Accreditation {
+    text: string;
+    image?: ImageProps;
+}
+export interface AccreditationPromotionProps {
+    theme: ThemeProps;
+    heading: string;
+    intro: string;
+    accreditations: Accreditation[];
+    /**
+     * The fullWidth version of this component is used for in study pages
+     */
+    fullWidth?: boolean;
+}
+export default function AcreditationPromotion({ theme, heading, intro, accreditations, fullWidth }: AccreditationPromotionProps): ReactElement;
+export {};

package/dist/components/organisms/AccreditationPromotion/AccreditationPromotion.stories.d.ts

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

package/dist/components/organisms/AccreditationPromotion/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { AccreditationPromotionProps } from './AccreditationPromotion';
+export declare const accreditationPromotionProps: AccreditationPromotionProps;

package/dist/components/organisms/CTAComponent/CTAComponent.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { ImageProps } from '../../atoms/Image/Image';
+import { TextButtonProps } from '../../atoms/TextButton/TextButton';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import './ctaComponent.scss';
+export interface CTAComponentProps {
+    theme: ThemeProps;
+    image?: ImageProps | null;
+    heading: string;
+    copy: string;
+    primaryCTA: TextButtonProps;
+    secondaryCTA?: TextButtonProps;
+    link?: LinkWithArrowProps;
+    /**
+     * The fullWidth version of this component is used for in study pages
+     */
+    fullWidth?: boolean;
+}
+export default function CTAComponent({ theme, image, heading, copy, primaryCTA, secondaryCTA, link, fullWidth }: CTAComponentProps): ReactElement;

package/dist/components/organisms/CTAComponent/CTAComponent.stories.d.ts

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

package/dist/components/organisms/CTAComponent/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { CTAComponentProps } from './CTAComponent';
+export declare const ctaComponentProps: CTAComponentProps;

package/dist/components/organisms/Carousel/Carousel.d.ts

@@ -5,6 +5,8 @@ import { CardVideoProps } from '../../molecules/CardVideo/CardVideo';
 import { CardPromoProps } from '../../molecules/CardPromo/CardPromo';
 import { CardPromoSignpostProps } from '../../molecules/CardPromoSignpost/CardPromoSignpost';
 import { CardPromoVideoProps } from '../../molecules/CardPromoVideo/CardPromoVideo';
+import { CardStaffProps } from '../../molecules/CardStaff/CardStaff';
+import { CardRelatedProps } from '../../molecules/CardRelatedCourse/CardRelatedCourse';
 import { ThemeProps } from '../../../themeProps';
 import './carousel.scss';
 export interface CarouselProps {
@@ -12,7 +14,7 @@ export interface CarouselProps {
     inverse?: boolean;
     type: string;
     title?: string;
-    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[];
+    cards: Omit<CardNewsProps, 'titleTag'>[] | CardFeaturedProps[] | CardVideoProps[] | CardPromoProps[] | CardPromoSignpostProps[] | CardPromoVideoProps[] | CardStaffProps[] | CardRelatedProps[];
     exploreMore?: string;
 }
 export default function Carousel({ theme, inverse, type, title, cards, exploreMore }: CarouselProps): ReactElement;

package/dist/components/organisms/ClearingBanner/ClearingBanner.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { ParagraphLinkProps } from '../../atoms/ParagraphLink/ParagraphLink';
+import { TextButtonWithIconProps } from '../../atoms/TextButtonWithIcon/TextButtonWithIcon';
+import './clearingBanner.scss';
+export interface ClearingBannerProps {
+    theme: ThemeProps;
+    text: string;
+    smallLink?: ParagraphLinkProps;
+    mainLink?: TextButtonWithIconProps;
+}
+export default function ClearingBanner({ theme, text, smallLink, mainLink }: ClearingBannerProps): ReactElement;

package/dist/components/organisms/ClearingBanner/ClearingBanner.stories.d.ts

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

package/dist/components/organisms/ClearingBanner/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { ClearingBannerProps } from './ClearingBanner';
+export declare const clearingBannerProps: ClearingBannerProps;

package/dist/components/organisms/CourseDeliveryPills/CourseDeliveryPills.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { CourseDeliveryPillProps } from '../../atoms/CourseDeliveryPill/CourseDeliveryPill';
+import './courseDeliveryPills.scss';
+export interface CourseDeliveryPillsProps {
+    theme: ThemeProps;
+    pills: Omit<CourseDeliveryPillProps, 'theme'>[];
+}
+export default function CourseDeliveryPills({ pills, theme }: CourseDeliveryPillsProps): ReactElement;

package/dist/components/organisms/CourseDeliveryPills/CourseDeliveryPills.stories.d.ts

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

package/dist/components/organisms/CourseDeliveryPills/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { CourseDeliveryPillsProps } from './CourseDeliveryPills';
+export declare const courseDeliveryPillsProps: CourseDeliveryPillsProps;

package/dist/components/organisms/ListingResultsCount/ListingResultsCount.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './listingResultsCount.scss';
+export interface ListingResultsCountProps {
+    theme: ThemeProps;
+    count: number;
+}
+export default function ListingResultsCount({ count, theme }: ListingResultsCountProps): ReactElement;

package/dist/components/organisms/ListingResultsCount/ListingResultsCount.stories.d.ts

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

package/dist/components/organisms/Pagination/Pagination.d.ts

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

package/dist/components/organisms/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import Pagination from './Pagination';
+declare const meta: {
+    title: string;
+    component: typeof Pagination;
+    tags: string[];
+};
+export default meta;
+export declare const FourPages: () => ReactElement;
+export declare const SevenPages: () => ReactElement;
+export declare const TenPages: () => ReactElement;
+export declare const TwentyPages: () => ReactElement;

package/dist/components/organisms/QuoteBlock/QuoteBlock.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { LinkWithArrowProps } from '../../atoms/LinkWithArrow/LinkWithArrow';
+import { HeadingProps } from '../../molecules/Heading/Heading';
+import './QuoteBlock.scss';
+type LinkProps = Omit<LinkWithArrowProps, 'theme' | 'inverse'>;
+export interface QuoteBlockProps extends HeadingProps {
+    theme: ThemeProps;
+    title?: string;
+    cite: string;
+    role: string;
+    quote: string;
+    quoteeProfileImage: string;
+    quoteeProfileImageAltText: string;
+    cta?: LinkProps;
+}
+export default function QuoteBlock({ theme, inverse, title, description, cite, role, quote, quoteeProfileImage, quoteeProfileImageAltText, cta }: QuoteBlockProps): ReactElement;
+export {};

package/dist/components/organisms/QuoteBlock/QuoteBlock.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import QuoteBlock from './QuoteBlock';
+declare const meta: {
+    title: string;
+    component: typeof QuoteBlock;
+    tags: string[];
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+        quoteBlockProps: import("./QuoteBlock").QuoteBlockProps;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof QuoteBlock>;
+export declare const Default: Story;

package/dist/components/organisms/QuoteBlock/defatultProps.d.ts

@@ -0,0 +1,2 @@
+import { QuoteBlockProps } from './QuoteBlock';
+export declare const quoteBlockProps: QuoteBlockProps;

package/dist/components/organisms/RelatedCourses/RelatedCourses.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import { CardRelatedProps } from '../../molecules/CardRelatedCourse/CardRelatedCourse';
+import './relatedCourses.scss';
+export interface RelatedCoursesProps {
+    theme: ThemeProps;
+    inverse?: boolean;
+    heading: string;
+    cards: CardRelatedProps[];
+}
+export default function RelatedCourses({ theme, inverse, heading, cards }: RelatedCoursesProps): ReactElement;

package/dist/components/organisms/RelatedCourses/RelatedCourses.stories.d.ts

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

package/dist/components/organisms/RelatedCourses/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { RelatedCoursesProps } from './RelatedCourses';
+export declare const relatedCourseProps: RelatedCoursesProps;

package/dist/components/organisms/RichText/RichText.d.ts

@@ -11,5 +11,9 @@ export interface RichTextProps {
      */
     inverse?: boolean;
     text: string;
+    /**
+     * The fullWidth version of this component is used for in study pages
+     */
+    fullWidth?: boolean;
 }
-export default function RichText({ text, theme, inverse }: RichTextProps): ReactElement;
+export default function RichText({ text, theme, inverse, fullWidth }: RichTextProps): ReactElement;

package/dist/components/organisms/SearchCourses/SearchCourses.d.ts

@@ -30,15 +30,15 @@ export interface SearchCoursesProps {
     /**
      * Display name of the filter
      */
-    filterTitle: string;
+    filterTitle?: string;
     /**
      * Field name of the filter (passed to the results page)
      */
-    filterFieldName: string;
+    filterFieldName?: string;
     /**
      * Available options in the select filter
      */
-    filterOptions: SelectOptionsProps[];
+    filterOptions?: SelectOptionsProps[];
     /**
      * Default value for filter
      */
@@ -51,8 +51,17 @@ export interface SearchCoursesProps {
      * The wrapped version of this component is used for Hero
      */
     wrapped?: boolean;
+    /**
+     * The fullWidth version of this component is used for in study pages
+     */
+    fullWidth?: boolean;
+    /**
+     * The onGrid version of this component is used for in study pages
+     */
+    onGrid?: boolean;
+    titleTag?: 'h1' | 'h2';
 }
 /**
  * Search component
  */
-export default function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped }: SearchCoursesProps): ReactElement;
+export default function SearchCourses({ theme, inverse, title, defaultSearchTerm, placeholder, filterTitle, filterFieldName, filterOptions, defaultFilter, resultsUrl, wrapped, fullWidth, onGrid, titleTag }: SearchCoursesProps): ReactElement;

package/dist/components/organisms/SearchCourses/SearchCourses.stories.d.ts

@@ -16,3 +16,4 @@ export declare const Dark: Story;
 export declare const Light: Story;
 export declare const WithDefaultValues: Story;
 export declare const Wrapped: Story;
+export declare const onGrid: Story;

package/dist/components/organisms/SidebarWrapper/SidebarWrapper.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement, ReactNode } from 'react';
+import { ThemeProps } from '../../../themeProps';
+import './sidebarWrapper.scss';
+export interface SidebarWrapperProps {
+    /**
+     * The theme to use
+     */
+    theme: ThemeProps;
+    children: ReactNode;
+}
+export default function SidebarWrapper({ theme, children }: SidebarWrapperProps): ReactElement;

package/dist/components/organisms/SidebarWrapper/SidebarWrapper.stories.d.ts

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