@oaknational/oak-components 0.0.27

package/dist/types.d.ts

@@ -0,0 +1,1120 @@
+import * as styled_components from 'styled-components';
+import { CSSProperties as CSSProperties$1 } from 'styled-components';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, MouseEventHandler, ElementType, ComponentPropsWithoutRef, FC, ReactNode, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler } from 'react';
+import * as Image from 'next/image';
+import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
+import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
+import * as _cloudinary_util_url_loader_dist_schema_UX7RRFIR from '@cloudinary-util/url-loader/dist/schema-UX7RRFIR';
+import { CldImage } from 'next-cloudinary';
+
+declare const oakColorTokens: {
+    white: string;
+    grey10: string;
+    grey20: string;
+    grey30: string;
+    grey40: string;
+    grey50: string;
+    grey60: string;
+    grey70: string;
+    black: string;
+    oakGreen: string;
+    mint: string;
+    mint30: string;
+    mint50: string;
+    mint110: string;
+    aqua: string;
+    aqua30: string;
+    aqua50: string;
+    aqua110: string;
+    lavender: string;
+    lavender30: string;
+    lavender50: string;
+    lavender110: string;
+    pink: string;
+    pink30: string;
+    pink50: string;
+    pink110: string;
+    lemon: string;
+    lemon30: string;
+    lemon50: string;
+    lemon110: string;
+    amber: string;
+    amber30: string;
+    amber50: string;
+    red: string;
+    red30: string;
+    red50: string;
+    navy: string;
+    navy110: string;
+    navy120: string;
+    blue: string;
+    magenta: string;
+    purple: string;
+    teal: string;
+    transparent: string;
+};
+type OakColorToken = keyof typeof oakColorTokens;
+declare const oakUiRoleTokens: readonly ["text-primary", "text-subdued", "text-error", "text-disabled", "text-link-active", "text-link-hover", "text-link-visited", "text-link-pressed", "text-inverted", "text-success", "text-warning", "bg-primary", "bg-neutral", "bg-neutral-stronger", "bg-btn-primary", "bg-btn-primary-hover", "bg-btn-primary-disabled", "bg-btn-secondary", "bg-btn-secondary-hover", "bg-btn-secondary-disabled", "bg-icon", "bg-icon-hover", "bg-decorative1-main", "bg-decorative1-subdued", "bg-decorative1-very-subdued", "bg-decorative2-main", "bg-decorative2-subdued", "bg-decorative2-very-subdued", "bg-decorative3-main", "bg-decorative3-subdued", "bg-decorative3-very-subdued", "bg-decorative4-main", "bg-decorative4-subdued", "bg-decorative4-very-subdued", "bg-decorative5-main", "bg-decorative5-subdued", "bg-decorative5-very-subdued", "bg-correct", "bg-incorrect", "icon-main", "icon-inverted", "icon-disabled", "icon-brand", "icon-success", "icon-error", "icon-warning", "border-primary", "border-inverted", "border-neutral", "border-brand", "border-success", "border-error", "border-warning", "border-decorative1", "border-decorative1-stronger", "border-decorative2", "border-decorative2-stronger", "border-decorative3", "border-decorative3-stronger", "border-decorative4", "border-decorative4-stronger", "border-decorative5", "border-decorative5-stronger", "border-decorative6", "border-decorative6-stronger", "transparent"];
+type OakUiRoleToken = (typeof oakUiRoleTokens)[number];
+type UiRoleMap = Record<OakUiRoleToken, OakColorToken | null | undefined>;
+type OakCombinedColorToken = OakColorToken | OakUiRoleToken;
+
+type OakTheme = {
+    name: string;
+    uiColors: UiRoleMap;
+};
+
+type ResponsiveValues<Value> = (Value | null) | (Value | null)[];
+
+declare const oakAllSpacingTokens: {
+    "all-spacing-0": number;
+    "all-spacing-1": number;
+    "all-spacing-2": number;
+    "all-spacing-3": number;
+    "all-spacing-4": number;
+    "all-spacing-5": number;
+    "all-spacing-6": number;
+    "all-spacing-7": number;
+    "all-spacing-8": number;
+    "all-spacing-9": number;
+    "all-spacing-10": number;
+    "all-spacing-11": number;
+    "all-spacing-12": number;
+    "all-spacing-13": number;
+    "all-spacing-14": number;
+    "all-spacing-15": number;
+    "all-spacing-16": number;
+    "all-spacing-17": number;
+    "all-spacing-18": number;
+    "all-spacing-19": number;
+    "all-spacing-20": number;
+    "all-spacing-21": number;
+    "all-spacing-22": number;
+    "all-spacing-23": number;
+    "all-spacing-24": number;
+};
+type OakAllSpacingToken = keyof typeof oakAllSpacingTokens;
+declare const oakInnerPaddingTokens: {
+    "inner-padding-none": string;
+    "inner-padding-ssx": string;
+    "inner-padding-xs": string;
+    "inner-padding-s": string;
+    "inner-padding-m": string;
+    "inner-padding-l": string;
+    "inner-padding-xl": string;
+};
+type OakInnerPaddingToken = keyof typeof oakInnerPaddingTokens;
+declare const oakSpaceBetweenTokens: {
+    "space-between-none": string;
+    "space-between-sssx": string;
+    "space-between-ssx": string;
+    "space-between-xs": string;
+    "space-between-s": string;
+    "space-between-m": string;
+    "space-between-m2": string;
+    "space-between-l": string;
+    "space-between-xl": string;
+    "space-between-xxl": string;
+    "space-between-xxxl": string;
+};
+type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
+type AdditionalSpacingTypes = "100%" | 0 | "100vh" | "100vw" | "auto" | "fit-content" | "inherit" | "initial" | "unset";
+type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
+
+type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
+type PaddingStyleProps = {
+    $pa?: PaddingValues;
+    $ph?: PaddingValues;
+    $pv?: PaddingValues;
+    $pl?: PaddingValues;
+    $pr?: PaddingValues;
+    $pt?: PaddingValues;
+    $pb?: PaddingValues;
+};
+type MarginValue = "auto" | OakSpaceBetweenToken | null | undefined;
+type MarginValues = ResponsiveValues<MarginValue>;
+type MarginStyleProps = {
+    $ma?: MarginValues;
+    $mh?: MarginValues;
+    $mv?: MarginValues;
+    $ml?: MarginValues;
+    $mr?: MarginValues;
+    $mt?: MarginValues;
+    $mb?: MarginValues;
+};
+type SpacingStyleProps = PaddingStyleProps & MarginStyleProps;
+
+type ColorToken = ResponsiveValues<OakCombinedColorToken | null>;
+type ColorStyleProps = {
+    $color?: ColorToken;
+    $background?: ColorToken;
+};
+
+type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | null | undefined;
+type PositionStyleProps = {
+    $position?: ResponsiveValues<CSSProperties["position"]>;
+    $top?: ResponsiveValues<PositionSpacing>;
+    $right?: ResponsiveValues<PositionSpacing>;
+    $bottom?: ResponsiveValues<PositionSpacing>;
+    $left?: ResponsiveValues<PositionSpacing>;
+    $overflow?: ResponsiveValues<CSSProperties["overflow"]>;
+    $overflowX?: ResponsiveValues<CSSProperties["overflowX"]>;
+    $overflowY?: ResponsiveValues<CSSProperties["overflowY"]>;
+    $objectFit?: ResponsiveValues<CSSProperties["objectFit"]>;
+    $pointerEvents?: ResponsiveValues<CSSProperties["pointerEvents"]>;
+    $visibility?: ResponsiveValues<CSSProperties["visibility"]>;
+};
+
+type SizeValues = ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
+type SizeStyleProps = {
+    $width?: SizeValues;
+    $minWidth?: SizeValues;
+    $maxWidth?: SizeValues;
+    $height?: SizeValues;
+    $minHeight?: SizeValues;
+    $maxHeight?: SizeValues;
+};
+
+declare const oakBorderWidthTokens: {
+    "border-solid-none": number;
+    "border-solid-s": number;
+    "border-solid-m": number;
+    "border-solid-l": number;
+    "border-solid-xl": number;
+};
+declare const oakBorderRadiusTokens: {
+    "border-radius-square": number;
+    "border-radius-xs": number;
+    "border-radius-s": number;
+    "border-radius-m": number;
+    "border-radius-m2": number;
+    "border-radius-l": number;
+    "border-radius-xl": number;
+    "border-radius-circle": number;
+};
+type OakBorderRadiusToken = keyof typeof oakBorderRadiusTokens;
+type OakBorderWidthToken = keyof typeof oakBorderWidthTokens;
+
+type BorderWidth = ResponsiveValues<OakBorderWidthToken>;
+type _BorderStyleProps = ResponsiveValues<CSSProperties$1["borderStyle"]>;
+type BorderColorProps = ResponsiveValues<OakUiRoleToken | OakColorToken>;
+type BorderRadiusProps = ResponsiveValues<OakBorderRadiusToken>;
+type BorderStyleProps = {
+    $ba?: BorderWidth;
+    $bt?: BorderWidth;
+    $br?: BorderWidth;
+    $bb?: BorderWidth;
+    $bl?: BorderWidth;
+    $bh?: BorderWidth;
+    $bv?: BorderWidth;
+    $borderStyle?: _BorderStyleProps;
+    $borderColor?: BorderColorProps;
+    $borderRadius?: BorderRadiusProps;
+    $btlr?: BorderRadiusProps;
+    $btrr?: BorderRadiusProps;
+    $bblr?: BorderRadiusProps;
+    $bbrr?: BorderRadiusProps;
+    $btr?: BorderRadiusProps;
+    $bbr?: BorderRadiusProps;
+};
+
+type DisplayStyleProps = {
+    $display?: ResponsiveValues<CSSProperties["display"]>;
+};
+
+declare const oakDropShadowTokens: {
+    "drop-shadow-standard": string;
+    "drop-shadow-lemon": string;
+    "drop-shadow-wide-lemon": string;
+    "drop-shadow-centered-lemon": string;
+    "drop-shadow-grey": string;
+    "drop-shadow-centered-grey": string;
+};
+type OakDropShadowToken = keyof typeof oakDropShadowTokens;
+
+type DropShadowStyleProps = {
+    $dropShadow?: ResponsiveValues<OakDropShadowToken>;
+};
+
+declare const oakOpacityTokens: {
+    transparent: number;
+    "semi-transparent": number;
+    "semi-opaque": number;
+    opaque: number;
+};
+type OakOpacityToken = keyof typeof oakOpacityTokens;
+
+type OpacityStyleProps = {
+    $opacity?: ResponsiveValues<OakOpacityToken>;
+};
+
+type TransformStyleProps = {
+    $transform?: ResponsiveValues<CSSProperties$1["transform"] | null>;
+    $transformOrigin?: ResponsiveValues<CSSProperties$1["transformOrigin"] | null>;
+};
+
+declare const oakTransitionTokens: {
+    "standard-ease": string;
+    "standard-transform": string;
+};
+type OakTransitionToken = keyof typeof oakTransitionTokens;
+
+type Transition = OakTransitionToken;
+type TransitionStyleProps = {
+    $transition?: ResponsiveValues<Transition>;
+};
+
+declare const oakFontSizeTokens: {
+    "font-size-1": number;
+    "font-size-2": number;
+    "font-size-3": number;
+    "font-size-4": number;
+    "font-size-5": number;
+    "font-size-6": number;
+    "font-size-7": number;
+    "font-size-8": number;
+    "font-size-9": number;
+    "font-size-10": number;
+};
+type OakFontSizeToken = keyof typeof oakFontSizeTokens;
+declare const fontWeights: readonly [300, 400, 600, 700];
+type FontWeight = (typeof fontWeights)[number];
+declare const lineHeights: readonly [16, 20, 24, 28, 32, 40, 48, 56, 64];
+type LineHeight = (typeof lineHeights)[number];
+declare const letterSpacings: readonly ["0.0115rem", "-0.005rem"];
+type LetterSpacing = (typeof letterSpacings)[number];
+type FontParameters = readonly [
+    OakFontSizeToken,
+    LineHeight,
+    FontWeight,
+    LetterSpacing
+];
+declare const oakFontTokens: Record<string, FontParameters>;
+type OakFontToken = keyof typeof oakFontTokens;
+declare const oakTextDecorations: readonly ["underline", "overline", "line-through", "none"];
+declare const oakWhiteSpaces: readonly ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"];
+declare const oakWordWraps: readonly ["normal", "break-word", "initial", "inherit"];
+declare const oakTextOverflows: readonly ["clip", "ellipsis"];
+type OakTextDecoration = (typeof oakTextDecorations)[number];
+type OakWhiteSpace = (typeof oakWhiteSpaces)[number];
+type OakWordWrap = (typeof oakWordWraps)[number];
+type OakTextOverflow = (typeof oakTextOverflows)[number];
+
+type TypographyStyleProps = {
+    $font?: ResponsiveValues<OakFontToken>;
+    $textDecoration?: ResponsiveValues<OakTextDecoration>;
+    $textAlign?: ResponsiveValues<CSSProperties$1["textAlign"]>;
+    $whiteSpace?: ResponsiveValues<OakWhiteSpace>;
+    $wordWrap?: ResponsiveValues<OakWordWrap>;
+    $textOverflow?: ResponsiveValues<OakTextOverflow>;
+};
+
+declare const oakZIndexTokens: {
+    readonly behind: -1;
+    readonly neutral: 0;
+    readonly "in-front": 1;
+    readonly "mobile-filters": 2;
+    readonly "fixed-header": 100;
+    readonly "modal-close-button": 150;
+    readonly "modal-dialog": 300;
+};
+type OakZIndexToken = keyof typeof oakZIndexTokens | null;
+
+type ZIndexStyleProps = {
+    $zIndex?: ResponsiveValues<OakZIndexToken>;
+};
+
+type HTMLProps$1 = {
+    onClick?: MouseEventHandler;
+};
+type OakBoxProps = {
+    children?: React.ReactNode;
+} & PositionStyleProps & SizeStyleProps & SpacingStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1;
+declare const oakBoxCss: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<OakBoxProps, styled_components.DefaultTheme>>;
+declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1, never>;
+
+type FlexStyleProps = {
+    $flexDirection?: ResponsiveValues<CSSProperties["flexDirection"]>;
+    $flexWrap?: ResponsiveValues<CSSProperties["flexWrap"]>;
+    $alignItems?: ResponsiveValues<CSSProperties["alignItems"]>;
+    $alignContent?: ResponsiveValues<CSSProperties["alignContent"]>;
+    $justifyContent?: ResponsiveValues<CSSProperties["justifyContent"]>;
+    $alignSelf?: ResponsiveValues<CSSProperties["alignSelf"]>;
+    $flexGrow?: ResponsiveValues<CSSProperties["flexGrow"]>;
+    $flexShrink?: ResponsiveValues<CSSProperties["flexShrink"]>;
+    $order?: ResponsiveValues<CSSProperties["order"]>;
+    $flexBasis?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+};
+
+type OakFlexProps = FlexStyleProps & OakBoxProps;
+/**
+ * Flex sets `display: flex;` and exposes various flex props, along with Box
+ * props.
+ *
+ * ## Usage
+ * Before adding props to this component, think about whether it makes sense
+ * to add it to Box instead, as this component extends that.
+ */
+declare const OakFlex: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & FlexStyleProps, never>;
+
+type OakSpanProps = ColorStyleProps & OpacityStyleProps & MarginStyleProps & PaddingStyleProps & BorderStyleProps & TypographyStyleProps;
+/**
+ * Span renders a `span` (inline text) component, exposing all the typography props.
+ * ## Usage
+ * Use this component when you want to apply styles to a piece of inline text.
+ */
+declare const OakSpan: styled_components.StyledComponent<"span", styled_components.DefaultTheme, ColorStyleProps & OpacityStyleProps & MarginStyleProps & PaddingStyleProps & BorderStyleProps & TypographyStyleProps, never>;
+
+/**
+ *
+ * Inherit everything from OakBox, but change the element to a form.
+ *
+ */
+declare const OakForm: styled_components.StyledComponent<"form", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+}, never>;
+type OakFormProps = OakBoxProps;
+
+type ColorFilterToken = ResponsiveValues<OakCombinedColorToken | null>;
+type ColorFilterStyleProps = {
+    $colorFilter?: ColorFilterToken;
+};
+
+type HTMLProps = {
+    onClick?: MouseEventHandler;
+};
+type OakImageProps<C extends ElementType = typeof Image__default> = Omit<ImageProps$1, "placeholder"> & OakBoxProps & ColorFilterStyleProps & HTMLProps & {
+    as?: C;
+    /**
+     * The placeholder to use while the image is loading
+     *
+     * Defaults to `oak` which is a placeholder containing the Oak logo
+     * also accepts the same options as next/image */
+    placeholder?: ImageProps$1["placeholder"] | "oak";
+    /**
+     * Additional props forwarded to the underlying `Image` component `as`
+     */
+    imageProps?: Partial<ComponentPropsWithoutRef<C>>;
+};
+/**
+ * OakImage is a wrapper round next/image which adds convenience style
+ * props to the api
+ */
+declare const OakImage: <C extends React__default.ElementType = React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "width" | "height" | "alt" | "src" | "loading" | "srcSet"> & {
+    src: string | next_dist_shared_lib_get_img_props.StaticImport;
+    alt: string;
+    /**
+     * The placeholder to use while the image is loading
+     *
+     * Defaults to `oak` which is a placeholder containing the Oak logo
+     * also accepts the same options as next/image */
+    width?: number | `${number}` | undefined;
+    height?: number | `${number}` | undefined;
+    fill?: boolean | undefined;
+    loader?: Image.ImageLoader | undefined;
+    quality?: number | `${number}` | undefined;
+    priority?: boolean | undefined;
+    loading?: "eager" | "lazy" | undefined;
+    placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue | undefined;
+    blurDataURL?: string | undefined;
+    unoptimized?: boolean | undefined;
+    onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete | undefined;
+    layout?: string | undefined;
+    objectFit?: string | undefined;
+    objectPosition?: string | undefined;
+    lazyBoundary?: string | undefined;
+    lazyRoot?: string | undefined;
+} & React__default.RefAttributes<HTMLImageElement | null>>>({ ...props }: OakImageProps<C>) => React__default.JSX.Element;
+
+type OakTypographyProps = OakBoxProps & TypographyStyleProps;
+/**
+ * The Typography component sets a typography style context from which children
+ * inherit style properties through the cascade.
+ * ## Usage
+ * This should be the primary component to set a typography context.
+ * Use this component whenever you want to style blocks of 'body' text.
+ */
+declare const OakTypography: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+}, never>;
+
+declare const oakHeadingTags: readonly ["div", "h1", "h2", "h3", "h4", "h5", "h6"];
+type OakHeadingTag = (typeof oakHeadingTags)[number];
+type OakHeadingTagProps = {
+    children?: React__default.ReactNode;
+    id?: string;
+    tag: OakHeadingTag;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+};
+declare const HeadingTagComponent: FC<OakHeadingTagProps>;
+type OakHeadingProps = TypographyStyleProps & OakHeadingTagProps & ColorStyleProps & OpacityStyleProps & MarginStyleProps;
+declare const OakHeading: styled_components.StyledComponent<React__default.FC<OakHeadingTagProps>, styled_components.DefaultTheme, TypographyStyleProps & OakHeadingTagProps & ColorStyleProps & OpacityStyleProps & MarginStyleProps, never>;
+
+type OakPProps = MarginStyleProps & TypographyStyleProps & ColorStyleProps;
+/**
+ * Styled `p` (paragraph) component.
+ * ## Usage
+ * In general, using a `p` as a descendant of `<Body>` should suffice.
+ * However, if you want different styles for a particular paragraph,
+ * you can use this component to apply additional styles.
+ */
+declare const OakP: styled_components.StyledComponent<"p", styled_components.DefaultTheme, MarginStyleProps & TypographyStyleProps & ColorStyleProps, never>;
+
+type OakULProps = OakBoxProps & {
+    $reset?: boolean;
+};
+/**
+ * Styled `ul` (unordered list) component.
+ *
+ * ## Usage
+ *
+ * Resets browser spacing and other styles, accepts BoxProps' style props.
+ *
+ * */
+declare const OakUL: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & {
+    $reset?: boolean | undefined;
+}, never>;
+
+type OakOLProps = MarginStyleProps & ColorStyleProps & TypographyStyleProps;
+/**
+ * Styled `ol` (ordered list) component.
+ *
+ * ## Usage
+ *
+ * Use where we have an ordered list to ensure numbers are styled
+ *
+ * */
+declare const OakOL: styled_components.StyledComponent<"ol", styled_components.DefaultTheme, MarginStyleProps & ColorStyleProps & TypographyStyleProps, never>;
+
+type ListStyleProps = {
+    $listStyle?: ResponsiveValues<CSSProperties$1["listStyle"]>;
+};
+
+type OakLIProps = OakFlexProps & TypographyStyleProps & ListStyleProps & DisplayStyleProps;
+/**
+ * Styled `li` (list item) component.
+ *
+ * ## Usage
+ *
+ * Places where we directly want to style a list item
+ *
+ **/
+declare const OakLI: styled_components.StyledComponent<"li", styled_components.DefaultTheme, FlexStyleProps & {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & ListStyleProps, never>;
+
+type OakLabelProps = TypographyStyleProps & ColorStyleProps;
+/**
+ * Label renders a `label` element, exposing all the typography props.
+ * ## Usage
+ * Use this component when you want to apply styles to a label, likely within
+ * a form.
+ */
+declare const OakLabel: styled_components.StyledComponent<"label", styled_components.DefaultTheme, TypographyStyleProps & ColorStyleProps, never>;
+
+declare const oakIconNames: readonly ["home", "send", "rocket", "video", "edit", "hamburger", "cross", "bell", "twitter", "worksheet", "facebook", "share", "arrow-right", "worksheet-3", "chevron-right", "save", "quiz-3", "chevron-down", "linkedin", "magic-carpet", "books", "supervision-level", "quiz-white", "arrow-left", "additional-material", "slide-deck-3", "sign-language", "external", "equipment-required", "chevron-left", "download", "search", "chevron-up", "go", "copyright", "arrow-down", "project", "quiz", "slide-deck", "content-guidance", "tick", "instagram", "dot", "dot-png", "warning", "lightbulb", "lightbulb-yellow", "intro"];
+type OakIconName = (typeof oakIconNames)[number];
+type OakIconProps = Omit<OakImageProps, "alt" | "src"> & {
+    iconName: OakIconName;
+    alt?: string;
+};
+declare const OakIcon: (props: OakIconProps) => React__default.JSX.Element;
+
+declare const oakDefaultTheme: OakTheme;
+
+type OakGridProps = OakBoxProps & {
+    $rg?: ResponsiveValues<OakCombinedSpacingToken>;
+    $cg?: ResponsiveValues<OakCombinedSpacingToken>;
+    $gridAutoRows?: ResponsiveValues<"1fr">;
+    $gridTemplateAreas?: ResponsiveValues<string>;
+    $gridTemplateColumns?: ResponsiveValues<string>;
+};
+declare const OakGrid: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & {
+    $rg?: ResponsiveValues<OakCombinedSpacingToken> | undefined;
+    $cg?: ResponsiveValues<OakCombinedSpacingToken> | undefined;
+    $gridAutoRows?: ResponsiveValues<"1fr"> | undefined;
+    $gridTemplateAreas?: ResponsiveValues<string> | undefined;
+    $gridTemplateColumns?: ResponsiveValues<string> | undefined;
+}, never>;
+
+type ColRowSpan = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type OakGridAreaProps = {
+    /**
+     * Determines the number of columns the element should span.
+     */
+    $colSpan: ResponsiveValues<ColRowSpan>;
+    /**
+     * Determines the number of rows the element should span.
+     */
+    $rowSpan?: ResponsiveValues<ColRowSpan>;
+    $order?: ResponsiveValues<number>;
+    /**
+     * The start column of the element.
+     */
+    $colStart?: ResponsiveValues<ColRowSpan>;
+    $colEnd?: ResponsiveValues<ColRowSpan>;
+    /**
+     * The start row of the element.
+     */
+    $rowStart?: ResponsiveValues<ColRowSpan>;
+} & SpacingStyleProps;
+/**
+ *
+ * OakGridArea is a flex container that should be used inside OakGrid.
+ *
+ * - There is no nesting of OakGridAreas
+ * - Column and row arrangements are achieved through $colSpan, $rowSpan, $colStart, $colEnd, $rowStart, $rowEnd
+ *
+ */
+declare const OakGridArea: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & FlexStyleProps & {
+    /**
+     * Determines the number of columns the element should span.
+     */
+    $colSpan: ResponsiveValues<ColRowSpan>;
+    /**
+     * Determines the number of rows the element should span.
+     */
+    $rowSpan?: ResponsiveValues<ColRowSpan> | undefined;
+    $order?: ResponsiveValues<number> | undefined;
+    /**
+     * The start column of the element.
+     */
+    $colStart?: ResponsiveValues<ColRowSpan> | undefined;
+    $colEnd?: ResponsiveValues<ColRowSpan> | undefined;
+    /**
+     * The start row of the element.
+     */
+    $rowStart?: ResponsiveValues<ColRowSpan> | undefined;
+}, never>;
+
+type OakThemeProviderProps = {
+    theme: OakTheme;
+    children: React__default.ReactNode;
+};
+declare const OakThemeProvider: ({ theme, children, }: OakThemeProviderProps) => React__default.JSX.Element;
+
+declare const OakMaxWidth: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React$1.MouseEventHandler | undefined;
+} & FlexStyleProps, never>;
+
+type OakCloudinaryImageProps = Omit<OakImageProps<typeof CldImage>, "src" | "imageProps"> & {
+    /**
+     * The cloudinary image id or the full cloudinary URL
+     *
+     * Usually in the format `v1234567890/image.jpg`
+     */
+    cloudinaryId: string;
+};
+/**
+ * Provides a Cloudinary config to all descendent `OakCloudinaryImage` elements.
+ *
+ * See https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
+ * for documentation of the config object.
+ */
+declare const OakCloudinaryConfigProvider: React__default.Provider<_cloudinary_util_url_loader_dist_schema_UX7RRFIR.g | undefined>;
+/**
+ * OakCloudinaryImage wraps OakImage providing responsive images from Cloudinary
+ * based on the `sizes` prop.
+ *
+ * Cloudinary cloud name can be set globally with `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME` or a config
+ * can be passed with `OakCloudinaryConfigProvider`.
+ */
+declare const OakCloudinaryImage: ({ cloudinaryId, unoptimized, ...props }: OakCloudinaryImageProps) => React__default.JSX.Element;
+
+type OakFieldErrorProps = {
+    children?: React__default.ReactNode;
+};
+declare const OakFieldError: (props: OakFieldErrorProps) => React__default.JSX.Element | null;
+
+type OakLoadingSpinnerProps = Pick<SizeStyleProps, "$width"> & ColorStyleProps & {
+    loaderColor?: OakCombinedColorToken;
+};
+declare const OakLoadingSpinner: (props: OakLoadingSpinnerProps) => React__default.JSX.Element;
+
+type StyledButtonProps = TypographyStyleProps & SpacingStyleProps & ColorStyleProps & DisplayStyleProps & BorderStyleProps & DropShadowStyleProps & {
+    isLoading?: boolean;
+};
+type InternalButtonProps = StyledButtonProps & {
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onHovered?: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;
+    children?: React__default.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    "data-testid"?: string;
+    type?: "button" | "submit" | "reset";
+    form?: string;
+};
+
+type InternalRectButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "$pv" | "$ba" | "$borderRadius" | "$borderColor" | "$background" | "$color"> & {
+    iconName?: OakIconName;
+    isTrailingIcon?: boolean;
+    defaultTextColor: OakCombinedColorToken;
+    defaultBackground: OakCombinedColorToken;
+    defaultBorderColor: OakCombinedColorToken;
+    hoverTextColor: OakCombinedColorToken;
+    hoverBackground: OakCombinedColorToken;
+    hoverBorderColor: OakCombinedColorToken;
+    disabledBackground: OakCombinedColorToken;
+    disabledBorderColor: OakCombinedColorToken;
+    disabledTextColor: OakCombinedColorToken;
+    width?: SizeStyleProps["$width"];
+    maxWidth?: SizeStyleProps["$maxWidth"];
+} & PositionStyleProps;
+
+type OakPrimaryButtonProps = Pick<InternalRectButtonProps, "children" | "className" | "data-testid" | "onClick" | "onHovered" | "disabled" | "isLoading" | "iconName" | "isTrailingIcon" | "type" | "width" | "maxWidth" | "form">;
+declare const OakPrimaryButton: (props: OakPrimaryButtonProps) => React__default.JSX.Element;
+
+type OakSecondaryButtonProps = Pick<InternalRectButtonProps, "children" | "className" | "data-testid" | "onClick" | "onHovered" | "disabled" | "isLoading" | "iconName" | "isTrailingIcon" | "type" | "width" | "maxWidth" | "form">;
+declare const OakSecondaryButton: (props: OakSecondaryButtonProps) => React__default.JSX.Element;
+
+type ImageProps = OakImageProps & {
+    iconName?: undefined;
+};
+type IconProps = OakIconProps & {
+    src?: undefined;
+};
+type OakRoundIconProps = IconProps | ImageProps;
+/**
+ * A wrapper around `OakIcon` which applies a rounded background.
+ * Supports either an icon name or an image src
+ */
+declare const OakRoundIcon: ({ $background, $borderRadius, $width, $height, $pa, className, ...rest }: OakRoundIconProps) => React__default.JSX.Element;
+
+type OakTertiaryButtonProps = InternalButtonProps & {
+    iconBackground?: OakRoundIconProps["$background"];
+    iconColorFilter?: OakRoundIconProps["$colorFilter"];
+    isTrailingIcon?: boolean;
+    iconName?: OakIconName;
+};
+/**
+ * An implementation of InternalRoundButton, its a subtle button with no border and a round icon.
+ */
+declare const OakTertiaryButton: ({ isTrailingIcon, iconName, children, disabled, ...props }: OakTertiaryButtonProps) => React__default.JSX.Element;
+
+type RadioButtonLabelProps = {
+    $labelAlignItems?: FlexStyleProps["$alignItems"];
+    $labelGap?: FlexStyleProps["$gap"];
+    disabled?: boolean;
+} & OakLabelProps;
+type OakRadioButtonProps = {
+    id: string;
+    label: ReactNode;
+    value: string;
+    tabIndex?: number;
+    "data-testid"?: string;
+    disabled?: boolean;
+    /**
+     * Allows the focus ring to be disabled. This is useful when focus is indicated
+     * by other means, such as a border or background color change.
+     */
+    disableFocusRing?: boolean;
+    /**
+     * Allows the size of the radio button to be customized.
+     */
+    radioOuterSize?: OakAllSpacingToken;
+    /**
+     * Allows the size of the inner "checked" circle of the radio button to be customized.
+     */
+    radioInnerSize?: OakAllSpacingToken;
+    /**
+     * Allows the width of the radio button border to be customized.
+     */
+    radioBorderWidth?: OakBorderWidthToken;
+    /**
+     * Allows the width of the radio button border to be customized when the radio button is checked.
+     */
+    checkedRadioBorderWidth?: OakBorderWidthToken;
+} & OakBoxProps & RadioButtonLabelProps;
+declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
+    id: string;
+    label: ReactNode;
+    value: string;
+    tabIndex?: number | undefined;
+    "data-testid"?: string | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Allows the focus ring to be disabled. This is useful when focus is indicated
+     * by other means, such as a border or background color change.
+     */
+    disableFocusRing?: boolean | undefined;
+    /**
+     * Allows the size of the radio button to be customized.
+     */
+    radioOuterSize?: "all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | undefined;
+    /**
+     * Allows the size of the inner "checked" circle of the radio button to be customized.
+     */
+    radioInnerSize?: "all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | undefined;
+    /**
+     * Allows the width of the radio button border to be customized.
+     */
+    radioBorderWidth?: "border-solid-none" | "border-solid-s" | "border-solid-m" | "border-solid-l" | "border-solid-xl" | undefined;
+    /**
+     * Allows the width of the radio button border to be customized when the radio button is checked.
+     */
+    checkedRadioBorderWidth?: "border-solid-none" | "border-solid-s" | "border-solid-m" | "border-solid-l" | "border-solid-xl" | undefined;
+} & {
+    children?: React__default.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
+    onClick?: React__default.MouseEventHandler | undefined;
+} & {
+    $labelAlignItems?: FlexStyleProps["$alignItems"];
+    $labelGap?: FlexStyleProps["$gap"];
+    disabled?: boolean | undefined;
+} & React__default.RefAttributes<HTMLInputElement>>;
+
+type OakRadioGroupProps = {
+    label?: string;
+    name: string;
+    disabled?: boolean;
+    children: React__default.ReactNode;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Sets the value of the radio group
+     * for use as a controlled component
+     */
+    value?: string;
+    /**
+     * Sets the initial value of the radio group
+     * for use as an uncontrolled component
+     */
+    defaultValue?: string;
+} & Pick<TypographyStyleProps, "$font"> & ColorStyleProps & Pick<FlexStyleProps, "$flexDirection" | "$alignItems" | "$gap">;
+declare const OakRadioGroup: (props: OakRadioGroupProps) => React__default.JSX.Element;
+
+/**
+ *
+ * These components can be used with InternalCheckBoxWrapper which allows for customisable icons
+ *
+ * Several flavours of checkbox are created here:
+ *  - Default
+ *  - Hover decorations
+ *  - Focus decorations
+ *  - Hover + Focus decorations
+ *
+ * As they are styled components they can be further customised in implementation. Alternatively additional
+ * components can be created here.
+ *
+ */
+type BaseCheckBoxProps = {
+    id: string;
+    disabled?: boolean;
+    value: string;
+    defaultChecked?: boolean;
+    onHovered?: (value: string, id: string, duration: number) => void;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    "data-testid"?: string;
+};
+
+type InternalCheckBoxLabelProps = {
+    labelAlignItems?: FlexStyleProps["$alignItems"];
+    labelGap?: FlexStyleProps["$gap"];
+    disabled?: boolean;
+    "data-testid"?: string;
+} & OakLabelProps;
+
+type OakCheckBoxProps = BaseCheckBoxProps & {
+    checkboxSize?: OakAllSpacingToken;
+    checkboxBorder?: OakBorderWidthToken;
+    checkboxBorderRadius?: OakBorderRadiusToken;
+    checkedIcon?: React__default.JSX.Element;
+    checkedBackgroundFill?: boolean;
+    hoverBorderRadius?: OakBorderRadiusToken;
+    iconPadding?: OakInnerPaddingToken;
+    defaultColor?: OakCombinedColorToken;
+    disabledColor?: OakCombinedColorToken;
+    displayValue?: string;
+} & InternalCheckBoxLabelProps;
+declare const OakCheckBox: (props: OakCheckBoxProps) => React__default.JSX.Element;
+
+type StyledInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & SpacingStyleProps & SizeStyleProps;
+type InternalTextInputProps = Omit<StyledInputProps, "placeholder"> & {
+    /**
+     * A textual hint or example to display before a value has been entered
+     */
+    placeholder?: string;
+    /**
+     * Fired only when the input is focused for the first time
+     */
+    onInitialFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+};
+
+type OakTextInputProps = {
+    /**
+     * Disables user input and updates the appearance accordingly.
+     */
+    disabled?: boolean;
+    /**
+     * Makes the input read-only. Preventing the user from changing the value.
+     */
+    readOnly?: boolean;
+    /**
+     * Sets the value. Use this in controlled components;
+     */
+    value?: string;
+    /**
+     * Sets the initial value. Use this for an uncontrolled component;
+     */
+    defaultValue?: string;
+    /**
+     * Used to target the input element in tests.
+     */
+    "data-testid"?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Alters the appearance of the input field to indicate whether the input is valid or invalid.
+     */
+    validity?: "valid" | "invalid";
+    /**
+     * Adds an icon to the input
+     *
+     * Defaults to the start of the input
+     */
+    iconName?: OakIconName;
+    /**
+     * Position the icon at the end of the input
+     */
+    isTrailingIcon?: boolean;
+    iconColor?: OakCombinedColorToken;
+    validBorderColor?: OakCombinedColorToken;
+    invalidBorderColor?: OakCombinedColorToken;
+    validIconColor?: OakCombinedColorToken;
+    invalidIconColor?: OakCombinedColorToken;
+    color?: OakCombinedColorToken;
+    hoverBackground?: OakCombinedColorToken;
+    background?: OakCombinedColorToken;
+    borderColor?: OakCombinedColorToken;
+    focusRingDropShadows?: OakDropShadowToken[];
+    disabledBackgroundColor?: OakCombinedColorToken;
+    readOnlyBorderColor?: OakCombinedColorToken;
+    disabledColor?: OakCombinedColorToken;
+    readOnlyColor?: OakCombinedColorToken;
+    width?: SizeStyleProps["$width"];
+    maxWidth?: SizeStyleProps["$maxWidth"];
+    iconAlt?: string;
+} & InternalTextInputProps;
+/**
+ * Default input which can be extended to create specialised inputs.
+ */
+declare const OakTextInput: ({ type, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, color, disabledColor, readOnlyColor, validity, iconColor, validBorderColor, invalidBorderColor, validIconColor, invalidIconColor, iconName, iconAlt, isTrailingIcon, width, maxWidth, ...props }: OakTextInputProps) => React__default.JSX.Element;
+
+type InternalTooltipProps = OakFlexProps & {
+    isOpen: boolean;
+    tooltip: ReactNode;
+    children?: ReactNode;
+};
+
+/**
+ * A tooltip with oven-ready styling
+ */
+declare const OakTooltip: ({ ...props }: Pick<InternalTooltipProps, "isOpen" | "tooltip" | "children">) => React__default.JSX.Element;
+
+type OakBackLinkProps<C extends ElementType> = {
+    as?: C;
+    label?: string;
+} & ComponentPropsWithoutRef<C>;
+/**
+ * Used to navigate the user back to the previous page in the app.
+ *
+ * Polymorphic rendering as any HTML element or component using `as` — defaults to `a`.
+ *
+ * E.g.
+ *
+ * * Default (Anchor) `<OakBackLink href="https://www.thenational.academy/" />`
+ * * Button `<OakBackLink as="button" onClick={() => goBack(-1)} />`
+ */
+declare const OakBackLink: <C extends React__default.ElementType = "a">({ as, label, ...props }: OakBackLinkProps<C>) => React__default.JSX.Element;
+
+type OakBulletListProps = {
+    listItems: string[];
+} & OakSpanProps;
+declare const OakBulletList: (props: OakBulletListProps) => React__default.JSX.Element;
+
+type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
+    feedback?: "correct" | "incorrect" | null;
+    image?: React__default.JSX.Element;
+    innerRef?: React__default.RefObject<HTMLInputElement>;
+    displayValue?: string;
+};
+declare const OakQuizCheckBox: (props: OakQuizCheckBoxProps) => React__default.JSX.Element;
+
+type OakQuizTextInputProps = Omit<OakTextInputProps, "validity" | "iconName" | "iconAlt" | "isTrailingIcon"> & {
+    /**
+     * Alters the appearance of the input to indicate whether or not a correct answer was given.
+     * Also sets the input to read-only.
+     */
+    feedback?: "correct" | "incorrect" | null;
+};
+declare const OakQuizTextInput: ({ feedback, readOnly, ...props }: OakQuizTextInputProps) => React__default.JSX.Element;
+
+type OakQuizRadioButtonProps = OakRadioButtonProps & {
+    feedback?: "correct" | "incorrect" | null;
+    image?: JSX.Element;
+};
+declare const OakQuizRadioButton: (props: OakQuizRadioButtonProps) => React__default.JSX.Element;
+
+type OakQuizHintProps = {
+    /**
+     * Some content to give as a hint to answer a question
+     */
+    hint: ReactNode;
+};
+/**
+ * Presents a button which will show a hint when clicked
+ */
+declare const OakQuizHint: ({ hint }: OakQuizHintProps) => React__default.JSX.Element;
+
+type OakQuizFeedbackProps = {
+    /**
+     * Feedback for an answer
+     * `partially-correct` can be used to feedback on a multi-answer MCQ where some
+     * correct options were not selected and/or some incorrect answers were selected
+     */
+    feedback: "correct" | "incorrect" | "partially-correct";
+    /**
+     * Some additional content to present with the feedback.
+     * This is likely the correct answer(s) to the question or some praise.
+     *
+     * Only displayed when `feedback` has been applied.
+     */
+    answerFeedback?: ReactNode;
+};
+/**
+ * Gives feedback after a question has been answered
+ */
+declare const OakQuizFeedback: ({ feedback, answerFeedback, }: OakQuizFeedbackProps) => React__default.JSX.Element;
+
+type OakLessonBottomNavProps = {
+    children?: ReactNode;
+    feedback?: OakQuizFeedbackProps["feedback"] | null;
+    answerFeedback?: OakQuizFeedbackProps["answerFeedback"];
+    hint?: OakQuizHintProps["hint"];
+};
+/**
+ * Renders feedback for an answer and onward navigation buttons to continue the lesson
+ */
+declare const OakLessonBottomNav: ({ hint, feedback, answerFeedback, children, }: OakLessonBottomNavProps) => React__default.JSX.Element;
+
+type LessonSectionName$1 = "intro" | "starter-quiz" | "video" | "exit-quiz";
+type OakLessonTopNavProps = {
+    lessonSectionName: LessonSectionName$1;
+    /**
+     * Slot to render `OakBackLink` or similar
+     */
+    backLinkSlot: ReactNode;
+    heading: ReactNode;
+    /**
+     * Displayed at the mobile breakpoint where the counter is not rendered.
+     * Provides alternative content for the counter/progress in the lesson.
+     */
+    mobileSummary: ReactNode;
+    /**
+     * Slot to render `OakQuizCounter` or similar
+     */
+    counterSlot?: ReactNode;
+};
+/**
+ * Controls for navigating back and displaying progress in a lesson
+ */
+declare const OakLessonTopNav: ({ lessonSectionName, backLinkSlot, counterSlot, heading, mobileSummary, }: OakLessonTopNavProps) => React__default.JSX.Element;
+
+type OakQuizCounterProps = {
+    counter: number;
+    total: number;
+};
+declare const OakQuizCounter: (props: OakQuizCounterProps) => React__default.JSX.Element;
+
+type LessonSectionName = "overview" | "intro" | "starter-quiz" | "video" | "exit-quiz" | "review";
+type OakLessonLayoutProps = {
+    lessonSectionName: LessonSectionName;
+    topNavSlot: ReactNode;
+    bottomNavSlot: ReactNode;
+    children: ReactNode;
+};
+/**
+ * Provides overall page layout and colours for the sections of a lesson.
+ */
+declare const OakLessonLayout: ({ lessonSectionName, topNavSlot, bottomNavSlot, children, }: OakLessonLayoutProps) => React__default.JSX.Element;
+
+type OakHintButtonProps = {
+    isOpen: boolean;
+    onClick?: MouseEventHandler;
+    isLoading?: boolean;
+    disabled?: boolean;
+};
+declare const OakHintButton: (props: OakHintButtonProps) => React__default.JSX.Element;
+
+type BaseOakLessonNavItemProps<C extends ElementType> = {
+    as?: C;
+    /**
+     * Disable the section preventing navigation to it.
+     */
+    disabled?: boolean;
+} & ComponentPropsWithoutRef<C>;
+type QuizSectionProps = {
+    lessonSectionName: "starter-quiz" | "exit-quiz";
+    /**
+     * The number of questions in the quiz
+     */
+    numQuestions: number;
+    /**
+     * The number of questions answered correctly
+     */
+    grade: number;
+};
+type VideoSectionProps = {
+    lessonSectionName: "video";
+    /**
+     * The length of the video in minutes
+     */
+    videoLength: number;
+};
+type IntroSectionProps = {
+    lessonSectionName: "intro";
+};
+type SectionProps = {
+    /**
+     * Denotes the progress in the lesson section
+     */
+    progress: "not-started" | "in-progress" | "complete";
+} & (IntroSectionProps | QuizSectionProps | VideoSectionProps);
+type OakLessonNavItemProps<C extends ElementType> = BaseOakLessonNavItemProps<C> & SectionProps;
+/**
+ * Enables navigation to the given section of a lesson as well as displaying current progress
+ */
+declare const OakLessonNavItem: <C extends React__default.ElementType = "a">(props: OakLessonNavItemProps<C>) => React__default.JSX.Element;
+
+export { HeadingTagComponent, type OakAllSpacingToken, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, type OakDropShadowToken, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInnerPaddingToken, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens };