@oaknational/oak-components 0.0.37 → 0.1.0

package/dist/types.d.ts

@@ -1,1387 +0,0 @@
-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, ComponentPropsWithRef, ReactNode, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement, ComponentProps } 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';
-import { UrlObject } from 'url';
-
-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" | "max-content" | "min-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>;
-    $inset?: 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;
-    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 icons: {
-    readonly "question-mark": "v1706872277/icons/question-mark.svg";
-    readonly home: "v1699887218/icons/gvqxjxcw07ei2kkmwnes.svg";
-    readonly send: "v1699893673/icons/rmvytilpjgvh3pgwc8ph.svg";
-    readonly rocket: "v1699894015/icons/u26xm5hteot875ozfnk9.svg";
-    readonly edit: "v1699894149/icons/qxlunbg5tfrdherzsvlt.svg";
-    readonly hamburger: "v1699895123/icons/jaqdnomtbhqvjcap962u.svg";
-    readonly cross: "v1699895179/icons/xigimrbivcaxt4omxamp.svg";
-    readonly bell: "v1699895207/icons/ecejtvqerx81prxyxh9b.svg";
-    readonly twitter: "v1699895251/icons/bq6a50xtkvnzhltfggzz.svg";
-    readonly worksheet: "v1699895300/icons/ez1s6mtpe5jkunnxzvlw.svg";
-    readonly facebook: "v1699895330/icons/iojlvh3o5lshy2jupyph.svg";
-    readonly share: "v1699895363/icons/agcmduftef3wcla6gzec.svg";
-    readonly "arrow-right": "v1707149070/icons/fv0z57zerrioft52dd9n.svg";
-    readonly "worksheet-3": "v1699895429/icons/bzhojpjxp9rukdvh7daz.svg";
-    readonly "chevron-right": "v1707752509/icons/vk9xxxhnsltsickom6q9.svg";
-    readonly save: "v1699895505/icons/rh1ahwwtbemvz0ihluew.svg";
-    readonly "quiz-3": "v1699895534/icons/zoayhgtrotv32fad7d3k.svg";
-    readonly "chevron-down": "v1699953557/icons/botfld6brychmttwtv6u.svg";
-    readonly linkedin: "v1699953592/icons/leqneklorqqzb1zo6rf1.svg";
-    readonly "magic-carpet": "v1699953622/icons/jifivg9xxm7sb0fjdilm.svg";
-    readonly books: "v1699953657/icons/hz4l3iq6i68kazvkvorq.svg";
-    readonly "supervision-level": "v1699953696/icons/cwqhknapp3maa4g0t3lj.svg";
-    readonly "quiz-white": "v1699953730/icons/gpcehpgr9mqoumsa25xe.svg";
-    readonly "arrow-left": "v1707149179/icons/ejrm9dpgpzb7ddbo8z2i.svg";
-    readonly "additional-material": "v1699953798/icons/ntoq4tqvcm2uj1pajubt.svg";
-    readonly "slide-deck-3": "v1699953830/icons/sm92moja9d5utu3cj16c.svg";
-    readonly "sign-language": "v1699953861/icons/ns94ozvozzi22enxkx0x.svg";
-    readonly external: "v1699953892/icons/hlxmejse3mcr4tqo6t8u.svg";
-    readonly "equipment-required": "v1699953925/icons/pw22bdhj2vrzfv2ogi4e.svg";
-    readonly "chevron-left": "v1707752509/icons/rbvzan0ozubmr4j0uqdn.svg";
-    readonly download: "v1699953991/icons/dk0f6a6hdpzxftjosngn.svg";
-    readonly search: "v1704901279/icons/canbi3fuz5fanzom2hvi.svg";
-    readonly "chevron-up": "v1699954058/icons/pay71thmhhylj7z28sj1.svg";
-    readonly go: "v1699954090/icons/vdzptyvmitylra8x4usy.svg";
-    readonly copyright: "v1699954118/icons/boiod3rflocgsnfokyo8.svg";
-    readonly "arrow-down": "v1699954152/icons/wpfmbmwpyfinipg0d61y.svg";
-    readonly project: "v1699954186/icons/zofq5pheud6spnwjpewk.svg";
-    readonly "slide-deck": "v1699954241/icons/sjjy5f3g4eciwcuxxr33.svg";
-    readonly "content-guidance": "v1699954277/icons/tm3uhcqenaznq4fxys7j.svg";
-    readonly tick: "v1699954310/icons/efd3esaor6zqk7seh6kt.svg";
-    readonly instagram: "v1699954343/icons/ayfeljric0kkimdymvva.svg";
-    readonly dot: "v1699954371/icons/knykdclphkm8lgff4u2g.svg";
-    readonly "dot-png": "v1699954394/icons/qecbh291nzwmhcvqayqd.png";
-    readonly warning: "v1704901279/icons/zzszodmk7fvxm9xzzg9s.svg";
-    readonly "lightbulb-yellow": "v1705078631/icons/q2v4sqxouy1ngcajoavv.svg";
-    readonly lightbulb: "v1705078631/icons/zldisxmbff36z68rwcef.svg";
-    readonly quiz: "v1705416077/icons/kaaizjcudy0jfgfrrdel.svg";
-    readonly video: "v1705416078/icons/wzey1zfxrvv3apeebbf5.svg";
-    readonly intro: "v1705662092/icons/pl7bnmb13txese9yxkjv.svg";
-    readonly "subject-art": "subject-icons/art.svg";
-    readonly "subject-biology": "subject-icons/biology.svg";
-    readonly "subject-chemistry": "subject-icons/chemistry.svg";
-    readonly "subject-citizenship": "subject-icons/citizenship.svg";
-    readonly "subject-combined-science": "subject-icons/science.svg";
-    readonly "subject-communication-and-language": "subject-icons/communication-and-language.svg";
-    readonly "subject-computing": "subject-icons/computing.svg";
-    readonly "subject-computing-non-gcse": "subject-icons/computing.svg";
-    readonly "subject-creative-arts": "subject-icons/creative-arts.svg";
-    readonly "subject-design-technology": "subject-icons/design-technology.svg";
-    readonly "subject-drama": "subject-icons/drama.svg";
-    readonly "subject-english": "subject-icons/english.svg";
-    readonly "subject-english-grammar": "subject-icons/english-grammar.svg";
-    readonly "subject-english-reading-for-pleasure": "subject-icons/literature.svg";
-    readonly "subject-english-spelling": "subject-icons/english-spelling.svg";
-    readonly "subject-french": "subject-icons/french.svg";
-    readonly "subject-geography": "subject-icons/geography.svg";
-    readonly "subject-german": "subject-icons/german.svg";
-    readonly "subject-history": "subject-icons/history.svg";
-    readonly "subject-independent-living": "subject-icons/independent-living.svg";
-    readonly "subject-latin": "subject-icons/latin.svg";
-    readonly "subject-maths": "subject-icons/maths.svg";
-    readonly "subject-music": "subject-icons/music-hollow.svg";
-    readonly "subject-numeracy": "subject-icons/numeracy.svg";
-    readonly "occupational-therapy": "subject-icons/therapy.svg";
-    readonly "subject-physical-development": "subject-icons/physical-development.svg";
-    readonly "subject-physical-education": "subject-icons/physical-education.svg";
-    readonly "subject-physical-therapy": "subject-icons/physical-therapy.svg";
-    readonly "subject-physics": "subject-icons/physics.svg";
-    readonly "subject-religious-education": "subject-icons/religious-education.svg";
-    readonly "subject-rshe-pshe": "subject-icons/rshe-pshe.svg";
-    readonly "subject-science": "subject-icons/science.svg";
-    readonly "subject-sensory-integration": "subject-icons/sensory-integration.svg";
-    readonly "subject-spanish": "subject-icons/spanish.svg";
-    readonly "subject-speech-and-language-therapy": "subject-icons/speech-and-language.svg";
-    readonly "subject-therapy": "subject-icons/therapy.svg";
-    readonly "subject-understanding-the-world": "subject-icons/understanding-the-world.svg";
-};
-type IconName = keyof typeof icons;
-
-declare const oakIconNames: ("search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "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" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world")[];
-type OakIconName = IconName;
-type OakIconProps = Omit<OakImageProps, "alt" | "src"> & {
-    iconName: OakIconName;
-    alt?: string;
-};
-/**
- * returns true if the given string is a valid `OakIconName`
- */
-declare function isValidIconName(iconName: string): iconName is OakIconName;
-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>;
-    $gridTemplateRows?: 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;
-    $gridTemplateRows?: 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 ElementProp<C extends ElementType> = {
-    element?: C;
-};
-type PolymorphicRef<C extends React.ElementType> = ComponentPropsWithRef<C>["ref"];
-type PolymorphicPropsWithRef<C extends ElementType> = ElementProp<C> & ComponentPropsWithoutRef<C> & {
-    ref?: PolymorphicRef<C>;
-};
-
-type StyledButtonProps = TypographyStyleProps & SpacingStyleProps & ColorStyleProps & DisplayStyleProps & BorderStyleProps & DropShadowStyleProps & {
-    isLoading?: boolean;
-};
-type InternalButtonProps = StyledButtonProps & {
-    onHovered?: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;
-};
-
-type InternalShadowRectButtonProps = 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"];
-    hoverShadow?: OakDropShadowToken | null;
-} & PositionStyleProps;
-
-type OakPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
-declare const OakPrimaryButton: <C extends React__default.ElementType = "button">({ element, ...rest }: OakPrimaryButtonProps & {
-    element?: C | undefined;
-} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
-
-/**
- *
- * A specific implementation of InternalRectButton
- *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
- */
-type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
-declare const OakPrimaryInvertedButton: <C extends React__default.ElementType = "button">({ element, ...rest }: OakPrimaryInvertedButtonProps & {
-    element?: C | undefined;
-} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
-
-type OakSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
-declare const OakSecondaryButton: <C extends React__default.ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & {
-    element?: C | undefined;
-} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => 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;
-
-/**
- * An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
- */
-declare const OakTertiaryButton: <C extends React__default.ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: TypographyStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & DisplayStyleProps & BorderStyleProps & DropShadowStyleProps & {
-    isLoading?: boolean | undefined;
-} & {
-    onHovered?: ((event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void) | undefined;
-} & {
-    iconBackground?: OakRoundIconProps["$background"];
-    iconColorFilter?: OakRoundIconProps["$colorFilter"];
-    isTrailingIcon?: boolean | undefined;
-    iconName?: "search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "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" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-physical-development" | "subject-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-rshe-pshe" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-therapy" | "subject-understanding-the-world" | undefined;
-} & {
-    element?: C | undefined;
-} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => 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;
-    /**
-     * The width of the surrounding div - the input and icon will fill this
-     */
-    wrapperWidth?: SizeStyleProps["$width"];
-    wrapperMaxWidth?: 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, wrapperWidth, wrapperMaxWidth, ...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 InternalCardProps = OakFlexProps;
-
-type InternalCardWithBackgroundElementProps = InternalCardProps & {
-    backgroundElement: ReactElement;
-};
-
-type InternalStyledSvgProps = {
-    $fill?: ResponsiveValues<OakCombinedColorToken>;
-    $stroke?: ResponsiveValues<OakCombinedColorToken>;
-    $strokeWidth?: ResponsiveValues<OakBorderWidthToken>;
-};
-
-type OakHandDrawnCardProps = Omit<InternalCardWithBackgroundElementProps, "backgroundElement"> & {
-    fill?: InternalStyledSvgProps["$fill"];
-    stroke?: InternalStyledSvgProps["$stroke"];
-    strokeWidth?: InternalStyledSvgProps["$strokeWidth"];
-};
-/**
- * A flexed card with a hand-drawn filled background
- *
- * An optional `stroke` and `strokeWidth` can be applied to give the background a border
- */
-declare const OakHandDrawnCard: ({ $pa, fill, stroke, strokeWidth, $width, ...props }: OakHandDrawnCardProps) => React__default.JSX.Element;
-
-type OakHandDrawnBoxWithIconProps = Omit<OakHandDrawnCardProps, "children"> & {
-    iconName: OakIconProps["iconName"];
-    alt?: OakIconProps["alt"];
-    iconColor?: OakIconProps["$colorFilter"];
-    iconWidth?: OakIconProps["$width"];
-    iconHeight?: OakIconProps["$height"];
-};
-/**
- * A hand-drawn card with an icon in the center
- */
-declare const OakHandDrawnCardWithIcon: ({ iconName, iconColor, iconWidth, iconHeight, alt, $width, $height, $alignItems, $justifyContent, ...props }: OakHandDrawnBoxWithIconProps) => React__default.JSX.Element;
-
-/**
- * Renders a tag with the text "New"
- */
-declare const OakPromoTag: () => React__default.JSX.Element;
-
-type OakInfoCardProps = {
-    children: React__default.ReactNode;
-};
-type OakCardHeaderprops = {
-    iconName: OakIconName;
-    tag: OakHeadingTag;
-    children: string;
-};
-declare const OakCardHeader: (props: OakCardHeaderprops) => React__default.JSX.Element;
-declare const OakLessonInfoCard: (props: OakInfoCardProps) => React__default.JSX.Element;
-declare const OakStaticMessageCard: (props: OakInfoCardProps) => React__default.JSX.Element;
-
-type OakCollapsibleContentProps = ComponentProps<typeof OakFlex> & {
-    /**
-     * Whether the content is displayed or not
-     */
-    isOpen: boolean;
-};
-/**
- * A filled scrollable box that can be hidden with the `isOpen` prop.
- * Useful for hiding content that is not immediately relevant
- */
-declare const OakCollapsibleContent: ({ isOpen, children, id, ...rest }: OakCollapsibleContentProps) => React__default.JSX.Element;
-
-type OakLinkProps = {
-    iconName?: OakIconProps["iconName"];
-    isTrailingIcon?: boolean;
-    isLoading?: boolean;
-};
-type OakLinkComponent = <C extends React__default.ElementType = "a">(props: PolymorphicPropsWithRef<C> & OakLinkProps) => React__default.ReactNode;
-/**
- * A blue link with an optional icon and loading state.
- *
- * Defaulting to a `HTMLAnchorElement` this component is polymorphic and can be rendered as a button or any other element.
- */
-declare const OakLink: OakLinkComponent;
-
-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$1 = {
-    lessonSectionName: "starter-quiz" | "exit-quiz";
-    /**
-     * The number of questions in the quiz
-     */
-    numQuestions: number;
-    /**
-     * The number of questions answered correctly
-     */
-    grade: number;
-};
-type VideoSectionProps$1 = {
-    lessonSectionName: "video";
-};
-type IntroSectionProps$1 = {
-    lessonSectionName: "intro";
-};
-type SectionProps = {
-    /**
-     * Denotes the progress in the lesson section
-     */
-    progress: "not-started" | "in-progress" | "complete";
-} & (IntroSectionProps$1 | QuizSectionProps$1 | VideoSectionProps$1);
-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;
-
-type BaseOakLessonReviewItemProps = {
-    completed: boolean;
-};
-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";
-};
-type IntroSectionProps = {
-    lessonSectionName: "intro";
-};
-type OakLessonReviewItemProps = BaseOakLessonReviewItemProps & (IntroSectionProps | QuizSectionProps | VideoSectionProps);
-declare const OakLessonReviewItem: (props: OakLessonReviewItemProps) => React__default.JSX.Element;
-
-type OakSubjectIconProps = Pick<OakHandDrawnBoxWithIconProps, "iconName" | "fill" | "iconColor" | "alt"> & {
-    iconName: `subject-${string}`;
-    showPromoTag?: boolean;
-};
-/**
- * A large illuminated hand-drawn box with a subject icon in the center
- *
- * Accepts an optional `showPromoTag` prop to display a "New" tag in the top left corner
- */
-declare const OakSubjectIcon: ({ showPromoTag, ...rest }: OakSubjectIconProps) => React__default.JSX.Element;
-
-type Url = string | UrlObject;
-type OakPrimaryNavItemProps = {
-    href: Url;
-    isCurrent?: boolean;
-    shallow?: boolean;
-    children: ReactNode;
-} & OakPrimaryButtonProps & OakPrimaryInvertedButtonProps;
-declare const OakPrimaryNavItem: ({ href, isCurrent, shallow, children, }: OakPrimaryNavItemProps) => React__default.JSX.Element;
-
-type OakPrimaryNavProps = {
-    ariaLabel?: string;
-    navItems: OakPrimaryNavItemProps[];
-};
-declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => React__default.JSX.Element;
-
-type OakLessonVideoTranscriptProps = {
-    /**
-     * The transcript content
-     */
-    children: ReactNode;
-    /**
-     * The id of the collapsible content element. This is used to link the button to the content
-     */
-    id: string;
-    /**
-     * A control to toggle the video to display sign language
-     */
-    signLanguageControl?: ReactNode;
-};
-/**
- * Display a togglable video transcript with a slot to display a sign language control
- */
-declare const OakLessonVideoTranscript: ({ children, id, signLanguageControl, }: OakLessonVideoTranscriptProps) => React__default.JSX.Element;
-
-export { HeadingTagComponent, type OakAllSpacingToken, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, 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, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, type OakInnerPaddingToken, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, 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, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens };