@oaknational/oak-components 0.2.0 → 0.2.1

package/dist/types.d.ts

@@ -0,0 +1,2254 @@
+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, ComponentPropsWithRef, FocusEvent, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, ReactElement, ComponentProps } from 'react';
+import * as csstype from 'csstype';
+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 { DndContextProps } from '@dnd-kit/core';
+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;
+/**
+ *
+ *  Use this tool to convert Hex to color filter values https://codepen.io/sosuke/pen/Pjoqqp
+ *
+ */
+declare const oakColorFilterTokens: {
+    black: string;
+    red: string;
+    oakGreen: string;
+    white: string;
+    grey40: string;
+    grey50: string;
+    navy: string;
+    navy110: string;
+    navy120: string;
+};
+type OakColorFilterToken = keyof typeof oakColorFilterTokens;
+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 = {
+    /**
+     * Applies `padding` to all sides of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pa?: PaddingValues;
+    /**
+     * Applies `padding`  to the left and right of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $ph?: PaddingValues;
+    /**
+     * Applies `padding` to the top and bottom of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pv?: PaddingValues;
+    /**
+     * Applies `padding` to the left of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pl?: PaddingValues;
+    /**
+     * Applies `padding` to the right of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pr?: PaddingValues;
+    /**
+     * Applies `padding` to the top of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pt?: PaddingValues;
+    /**
+     * Applies `padding` to the bottom of the element
+     *
+     * Accepts an inner padding token or a responsive array of inner padding tokens. Can be nulled.
+     */
+    $pb?: PaddingValues;
+};
+type MarginValue = "auto" | OakSpaceBetweenToken | null | undefined;
+type MarginValues = ResponsiveValues<MarginValue>;
+type MarginStyleProps = {
+    /**
+     * Applies `margin` to all sides of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $ma?: MarginValues;
+    /**
+     * Applies `margin` to the left and right of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $mh?: MarginValues;
+    /**
+     * Applies `margin` to the top and bottom of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $mv?: MarginValues;
+    /**
+     * Applies `margin` to the left of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $ml?: MarginValues;
+    /**
+     * Applies `margin` to the right of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $mr?: MarginValues;
+    /**
+     * Applies `margin` to the top of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $mt?: MarginValues;
+    /**
+     * Applies `margin` to the bottom of the element
+     *
+     * Accepts a space between token or a responsive array of space between tokens. Can be nulled.
+     */
+    $mb?: MarginValues;
+};
+type SpacingStyleProps = PaddingStyleProps & MarginStyleProps;
+
+/**
+ * Color token!
+ */
+type ColorToken = ResponsiveValues<OakCombinedColorToken | null>;
+type ColorStyleProps = {
+    /**
+     * Sets the `color` of the element.
+     *
+     * Accepts a color token or a responsive array of color tokens.
+     */
+    $color?: ColorToken;
+    /**
+     * Sets the `background-color` of the element.
+     *
+     * Accepts a color token or a responsive array of color tokens.
+     */
+    $background?: ColorToken;
+};
+
+type PositionSpacing = OakAllSpacingToken | OakSpaceBetweenToken | null | undefined;
+type PositionStyleProps = {
+    /**
+     * Sets the `position` CSS property of the element.
+     *
+     * Accepts a `position` value or a responsive array of `position` values. Can be nulled.
+     */
+    $position?: ResponsiveValues<CSSProperties["position"]>;
+    /**
+     * Sets the `top` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $top?: ResponsiveValues<PositionSpacing>;
+    /**
+     * Sets the `right` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $right?: ResponsiveValues<PositionSpacing>;
+    /**
+     * Sets the `bottom` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $bottom?: ResponsiveValues<PositionSpacing>;
+    /**
+     * Sets the `left` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $left?: ResponsiveValues<PositionSpacing>;
+    /**
+     * Sets the `inset` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $inset?: ResponsiveValues<PositionSpacing>;
+    /**
+     * Sets the `overflow` CSS property of the element.
+     *
+     * Accepts an `overflow` value or a responsive array of `overflow` values.
+     */
+    $overflow?: ResponsiveValues<CSSProperties["overflow"]>;
+    /**
+     * Sets the `overflow-x` CSS property of the element.
+     *
+     * Accepts an `overflow-x` value or a responsive array of `overflow-x` values.
+     */
+    $overflowX?: ResponsiveValues<CSSProperties["overflowX"]>;
+    /**
+     * Sets the `overflow-y` CSS property of the element.
+     *
+     * Accepts an `overflow-y` value or a responsive array of `overflow-y` values.
+     */
+    $overflowY?: ResponsiveValues<CSSProperties["overflowY"]>;
+    /**
+     * Sets the `object-fit` CSS property of the element.
+     *
+     * Accepts an `object-fit` value or a responsive array of `object-fit` values.
+     */
+    $objectFit?: ResponsiveValues<CSSProperties["objectFit"]>;
+    /**
+     * Sets the `pointer-events` CSS property of the element.
+     *
+     * Accepts a `pointer-events` value or a responsive array of `pointer-events` values.
+     */
+    $pointerEvents?: ResponsiveValues<CSSProperties["pointerEvents"]>;
+    /**
+     * Sets the `visibility` CSS property of the element.
+     *
+     * Accepts a `visibility` value or a responsive array of `visibility` values.
+     */
+    $visibility?: ResponsiveValues<CSSProperties["visibility"]>;
+};
+
+type SizeValues = ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
+type SizeStyleProps = {
+    /**
+     * Sets the `width` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $width?: SizeValues;
+    /**
+     * Sets the `min-width` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $minWidth?: SizeValues;
+    /**
+     * Sets the `max-width` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $maxWidth?: SizeValues;
+    /**
+     * Sets the `height` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $height?: SizeValues;
+    /**
+     * Sets the `min-height` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $minHeight?: SizeValues;
+    /**
+     * Sets the `max-height` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $maxHeight?: SizeValues;
+    /**
+     * Sets the `aspect-ratio` CSS property of the element.
+     *
+     * Accepts an `aspect-ratio` value or a responsive array of `aspect-ratio` values.
+     */
+    $aspectRatio?: ResponsiveValues<CSSProperties$1["aspectRatio"]>;
+    /**
+     * Sets the `box-sizing` CSS property of the element.
+     *
+     * Accepts a `box-sizing` value or a responsive array of `box-sizing` values.
+     */
+    $boxSizing?: ResponsiveValues<CSSProperties$1["boxSizing"]>;
+};
+
+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<OakCombinedColorToken>;
+type BorderRadiusProps = ResponsiveValues<OakBorderRadiusToken>;
+type BorderStyleProps = {
+    /**
+     * Apply border on all sides
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $ba?: BorderWidth;
+    /**
+     * Apply border to the top
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $bt?: BorderWidth;
+    /**
+     * Apply border to the right
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $br?: BorderWidth;
+    /**
+     * Apply border to the bottom
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $bb?: BorderWidth;
+    /**
+     * Apply border to the left
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $bl?: BorderWidth;
+    /**
+     * Apply border to the left and right
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $bh?: BorderWidth;
+    /**
+     * Apply border to the top and bottom
+     *
+     * Accepts a border-width token or a responsive array of border-width tokens
+     */
+    $bv?: BorderWidth;
+    /**
+     * Apply `border-style` to the element
+     *
+     * Accepts a single value or a responsive array of values.
+     */
+    $borderStyle?: _BorderStyleProps;
+    /**
+     * Apply a border color to all sides of the element
+     *
+     * Accepts a color token or a responsive array of color tokens.
+     */
+    $borderColor?: BorderColorProps;
+    $borderRadius?: BorderRadiusProps;
+    /**
+     * Apply border radius to the top left
+     *
+     * Accepts an `OakBorderRadiusToken` or a responsive array of `OakBorderRadiusToken`s.
+     */
+    $btlr?: BorderRadiusProps;
+    /**
+     * Apply border radius to the top right
+     *
+     * Accepts a border-radius token or a responsive array of border-radius tokens.
+     */
+    $btrr?: BorderRadiusProps;
+    /**
+     * Apply border radius to the bottom left
+     *
+     * Accepts a border-radius token or a responsive array of border-radius tokens.
+     */
+    $bblr?: BorderRadiusProps;
+    /**
+     * Apply border radius to the bottom right
+     *
+     * Accepts a border-radius token or a responsive array of border-radius tokens.
+     */
+    $bbrr?: BorderRadiusProps;
+    /**
+     * Apply border radius to the top right and top left
+     *
+     * Accepts a border-radius token or a responsive array of border-radius tokens.
+     */
+    $btr?: BorderRadiusProps;
+    /**
+     * Apply border radius to the bottom right and bottom left
+     *
+     * Accepts a border-radius token or a responsive array of border-radius tokens
+     */
+    $bbr?: BorderRadiusProps;
+};
+
+type DisplayStyleProps = {
+    /**
+     * Sets the `display` CSS property of the element.
+     *
+     * Accepts a `display` value or a responsive array of `display` values.
+     */
+    $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 = {
+    /**
+     * Applies a drop-shadow to the element.
+     *
+     * Accepts a drop-shadow token or a responsive array of drop-shadow tokens.
+     */
+    $dropShadow?: ResponsiveValues<OakDropShadowToken>;
+};
+
+declare const oakOpacityTokens: {
+    transparent: number;
+    "semi-transparent": number;
+    "semi-opaque": number;
+    opaque: number;
+};
+type OakOpacityToken = keyof typeof oakOpacityTokens;
+
+type OpacityStyleProps = {
+    /**
+     * Sets the `opacity` CSS property of the element.
+     *
+     * Accepts an opacity token or a responsive array of opacity tokens.
+     */
+    $opacity?: ResponsiveValues<OakOpacityToken>;
+};
+
+type TransformStyleProps = {
+    /**
+     * Sets the `transform` CSS property of the element.
+     *
+     * Accepts a `transform` value or a responsive array of `transform` values. Can be nulled.
+     */
+    $transform?: ResponsiveValues<CSSProperties$1["transform"] | null>;
+    /**
+     * Sets the `transform-origin` CSS property of the element.
+     *
+     * Accepts a `transform-origin` value or a responsive array of `transform-origin` values. Can be nulled.
+     */
+    $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 = {
+    /**
+     * Sets the `transition` CSS property of the element.
+     *
+     * Accepts a transition token or a responsive array of transition tokens.
+     */
+    $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 oakFontTokens: {
+    "heading-1": ["font-size-10", 64, 600, "0.0115rem"];
+    "heading-2": ["font-size-9", 56, 600, "0.0115rem"];
+    "heading-3": ["font-size-8", 48, 600, "0.0115rem"];
+    "heading-4": ["font-size-7", 40, 600, "0.0115rem"];
+    "heading-5": ["font-size-6", 32, 600, "0.0115rem"];
+    "heading-6": ["font-size-5", 24, 600, "0.0115rem"];
+    "heading-7": ["font-size-3", 20, 600, "0.0115rem"];
+    "heading-light-1": ["font-size-10", 64, 400, "0.0115rem"];
+    "heading-light-2": ["font-size-9", 56, 400, "0.0115rem"];
+    "heading-light-3": ["font-size-8", 48, 400, "0.0115rem"];
+    "heading-light-4": ["font-size-7", 40, 400, "0.0115rem"];
+    "heading-light-5": ["font-size-6", 32, 400, "0.0115rem"];
+    "heading-light-6": ["font-size-5", 24, 400, "0.0115rem"];
+    "heading-light-7": ["font-size-3", 20, 400, "0.0115rem"];
+    "body-1": ["font-size-4", 28, 300, "-0.005rem"];
+    "body-2": ["font-size-3", 24, 300, "-0.005rem"];
+    "body-3": ["font-size-2", 20, 300, "-0.005rem"];
+    "body-4": ["font-size-1", 16, 300, "-0.005rem"];
+    "body-1-bold": ["font-size-4", 28, 700, "-0.005rem"];
+    "body-2-bold": ["font-size-3", 24, 700, "-0.005rem"];
+    "body-3-bold": ["font-size-2", 20, 700, "-0.005rem"];
+    "list-item-1": ["font-size-4", 32, 300, "-0.005rem"];
+    "list-item-2": ["font-size-3", 24, 300, "-0.005rem"];
+};
+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 = {
+    /**
+     * Sets the `font-size`, `line-height`, `font-weight` and `letter-spacing` of the element.
+     *
+     * Accepts a font token or a responsive array of font tokens.
+     */
+    $font?: ResponsiveValues<OakFontToken>;
+    /**
+     * Sets the `text-decoration` CSS property of the element.
+     *
+     * Accepts a text-decoration token or a responsive array of text-decoration tokens.
+     */
+    $textDecoration?: ResponsiveValues<OakTextDecoration>;
+    /**
+     * Sets the `text-align` CSS property of the element.
+     *
+     * Accepts a `text-align` value or a responsive array of `text-align` values.
+     */
+    $textAlign?: ResponsiveValues<CSSProperties$1["textAlign"]>;
+    /**
+     * Sets the `white-space` CSS property of the element.
+     *
+     *  Accepts a white-space token or a responsive array of white-space tokens.
+     */
+    $whiteSpace?: ResponsiveValues<OakWhiteSpace>;
+    /**
+     * Sets the `word-wrap` CSS property of the element.
+     *
+     * Accepts a word-wrap token or a responsive array of word-wrap tokens.
+     */
+    $wordWrap?: ResponsiveValues<OakWordWrap>;
+    /**
+     * Sets the `text-overflow` CSS property of the element.
+     *
+     * Accepts a text-overflow token or a responsive array of text-overflow tokens.
+     */
+    $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 = {
+    /**
+     * Sets the `z-index` CSS property of the element.
+     *
+     * Accepts a z-index token or a responsive array of z-index tokens.
+     */
+    $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>>;
+/**
+ * OakBox exposes all the styles that are available styles on a div tag. These include:
+ * - color
+ * - size
+ * - display
+ * - spacing
+ * - position
+ * - border
+ * - opacity
+ * - z-index
+ * - typography
+ * - transition
+ * - transform
+ * - drop-shadow
+ *
+ */
+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 = DisplayStyleProps & {
+    /**
+     * Sets the `flex-direction` CSS property of the element.
+     *
+     * Accepts a `flex-direction` value or a responsive array of flex-direction values.
+     */
+    $flexDirection?: ResponsiveValues<CSSProperties["flexDirection"]>;
+    /**
+     * Sets the `flex-wrap` CSS property of the element.
+     *
+     * Accepts a `flex-wrap` value or a responsive array of flex-wrap values.
+     */
+    $flexWrap?: ResponsiveValues<CSSProperties["flexWrap"]>;
+    /**
+     * Sets the `align-items` CSS property of the element.
+     *
+     * Accepts an `align-items` value or a responsive array of `align-items` values.
+     */
+    $alignItems?: ResponsiveValues<CSSProperties["alignItems"]>;
+    /**
+     * Sets the `align-content` CSS property of the element.
+     *
+     * Accepts an `align-content` value or a responsive array of `align-content` values.
+     */
+    $alignContent?: ResponsiveValues<CSSProperties["alignContent"]>;
+    /**
+     * Sets the `justify-content` CSS property of the element.
+     *
+     * Accepts a `justify-content` value or a responsive array of `justify-content` values.
+     */
+    $justifyContent?: ResponsiveValues<CSSProperties["justifyContent"]>;
+    /**
+     * Sets the `align-self` CSS property of the element.
+     *
+     * Accepts an `align-self` value or a responsive array of `align-self` values.
+     */
+    $alignSelf?: ResponsiveValues<CSSProperties["alignSelf"]>;
+    /**
+     * Sets the `flex-grow` CSS property of the element.
+     *
+     * Accepts a `flex-grow` value or a responsive array of `flex-grow` values.
+     */
+    $flexGrow?: ResponsiveValues<CSSProperties["flexGrow"]>;
+    /**
+     * Sets the `flex-shrink` CSS property of the element.
+     *
+     * Accepts a `flex-shrink` value or a responsive array of `flex-shrink` values.
+     */
+    $flexShrink?: ResponsiveValues<CSSProperties["flexShrink"]>;
+    /**
+     * Sets the `order` CSS property of the element.
+     *
+     * Accepts an `order` value or a responsive array of `order` values.
+     */
+    $order?: ResponsiveValues<CSSProperties["order"]>;
+    /**
+     * Sets the `flex-basis` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $flexBasis?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    /**
+     * Sets the `gap` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    /**
+     * Sets the `column-gap` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    /**
+     * Sets the `row-gap` CSS property of the element.
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $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;
+} & {
+    $flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
+    $flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
+    $alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
+    $alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
+    $justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
+    $alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
+    $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
+    $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
+    $order?: ResponsiveValues<csstype.Property.Order | undefined>;
+    $flexBasis?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $gap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $columnGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $rowGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+}, 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.
+ *
+ * @deprecated Use `<OakBox as="form">` instead
+ */
+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 = {
+    /**
+     * Applies a color-filter to the element.
+     *
+     * Accepts a color filter token or a responsive array of color tokens.
+     */
+    $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>>;
+};
+/**
+ * A wrapper for NextJs's Image component.
+ *
+ * Use this for all image types as well as icons.
+ * Can accept remote urls provided they are whitelisted in next.config.js and relative urls for local images provided they begin with a "/".
+ * Set the width and height of the image through the `$width` and `$height` props when the aspect ratio is not known. This will letterbox the image to avoid stretching.
+ * Alternatively pass `width` and `height` props when the aspect ratio is known and use $minWidth to set the rendered width, avoiding letter-boxing.
+ * NB. for letterboxed images, $background controls the color of the letterbox not the image.
+ * `positionStyle` and `spacingStyle` props are also exposed for container.
+ * sizes is exposed for further optimisation read Next docs for more info.
+ *
+ */
+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;
+    /**
+     * HTML tag to be used for the heading
+     *
+     * Accepts a heading tag token
+     */
+    tag: OakHeadingTag;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+};
+declare const HeadingTagComponent: FC<OakHeadingTagProps>;
+type OakHeadingProps = TypographyStyleProps & OakHeadingTagProps & ColorStyleProps & OpacityStyleProps & MarginStyleProps;
+/**
+ *
+ * OakHeading can be one of the following style tags dependant on its role: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6".
+ * Use the controls to view different font styles.
+ *
+ */
+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 = {
+    /**
+     * Sets the `list-style` CSS property of the element.
+     *
+     * Accepts a `list-style` value or a responsive array of `list-style` values.
+     */
+    $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, DisplayStyleProps & {
+    $flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
+    $flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
+    $alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
+    $alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
+    $justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
+    $alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
+    $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
+    $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
+    $order?: ResponsiveValues<csstype.Property.Order | undefined>;
+    $flexBasis?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $gap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $columnGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $rowGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+} & {
+    children?: React$1.ReactNode;
+} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & 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 "move-arrows": "v1709052869/icons/hoddjsgpzkszgvnmn91q.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" | "move-arrows" | "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"> & {
+    /**
+     * The name of the icon to display
+     *
+     * Accepts an icon name token
+     */
+    iconName: OakIconName;
+    alt?: string;
+};
+/**
+ * returns true if the given string is a valid `OakIconName`
+ */
+declare function isValidIconName(iconName: string): iconName is OakIconName;
+/**
+ * A wrapper around OakImage which uses the image-map.json file to map icon names to image paths.
+ */
+declare const OakIcon: (props: OakIconProps) => React__default.JSX.Element;
+
+declare const oakDefaultTheme: OakTheme;
+
+type OakGridProps = OakBoxProps & {
+    /**
+     * Applies `row-gap` to the grid
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens.
+     */
+    $rg?: ResponsiveValues<OakCombinedSpacingToken>;
+    /**
+     * Applies `column-gap` to the grid
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens.
+     */
+    $cg?: ResponsiveValues<OakCombinedSpacingToken>;
+    /**
+     * Applies `grid-auto-rows` to the grid
+     *
+     * Accepts a `grid-auto-rows` value or a responsive array of `grid-auto-rows` values.
+     */
+    $gridAutoRows?: ResponsiveValues<CSSProperties$1["gridAutoRows"]>;
+    /**
+     * Applies `grid-template-areas` to the grid
+     *
+     * Accepts a `grid-template-areas` value or a responsive array of `grid-template-areas` values.
+     */
+    $gridTemplateAreas?: ResponsiveValues<CSSProperties$1["gridTemplateAreas"]>;
+    /**
+     * Applies `grid-template-columns` to the grid
+     *
+     * Accepts a `grid-template-columns` value or a responsive array of `grid-template-columns` values.
+     */
+    $gridTemplateColumns?: ResponsiveValues<CSSProperties$1["gridTemplateColumns"]>;
+    /**
+     * Applies `grid-template-rows` to the grid
+     *
+     * Accepts a `grid-template-rows` value or a responsive array of `grid-template-rows` values.
+     */
+    $gridTemplateRows?: ResponsiveValues<CSSProperties$1["gridTemplateRows"]>;
+};
+/**
+ * Creates a grid layout
+ *
+ * Defaults to a 12 column grid
+ */
+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;
+} & {
+    /**
+     * Applies `row-gap` to the grid
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens.
+     */
+    $rg?: ResponsiveValues<OakCombinedSpacingToken> | undefined;
+    /**
+     * Applies `column-gap` to the grid
+     *
+     * Accepts a spacing token or a responsive array of spacing tokens.
+     */
+    $cg?: ResponsiveValues<OakCombinedSpacingToken> | undefined;
+    /**
+     * Applies `grid-auto-rows` to the grid
+     *
+     * Accepts a `grid-auto-rows` value or a responsive array of `grid-auto-rows` values.
+     */
+    $gridAutoRows?: ResponsiveValues<CSSProperties$1["gridAutoRows"]>;
+    /**
+     * Applies `grid-template-areas` to the grid
+     *
+     * Accepts a `grid-template-areas` value or a responsive array of `grid-template-areas` values.
+     */
+    $gridTemplateAreas?: ResponsiveValues<CSSProperties$1["gridTemplateAreas"]>;
+    /**
+     * Applies `grid-template-columns` to the grid
+     *
+     * Accepts a `grid-template-columns` value or a responsive array of `grid-template-columns` values.
+     */
+    $gridTemplateColumns?: ResponsiveValues<CSSProperties$1["gridTemplateColumns"]>;
+    /**
+     * Applies `grid-template-rows` to the grid
+     *
+     * Accepts a `grid-template-rows` value or a responsive array of `grid-template-rows` values.
+     */
+    $gridTemplateRows?: ResponsiveValues<CSSProperties$1["gridTemplateRows"]>;
+}, 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.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colSpan: ResponsiveValues<ColRowSpan>;
+    /**
+     * Determines the number of rows the element should span.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $rowSpan?: ResponsiveValues<ColRowSpan>;
+    /**
+     * Sets the order of the element.
+     *
+     * Accepts a number or a responsive array of numbers.
+     */
+    $order?: ResponsiveValues<CSSProperties$1["order"]>;
+    /**
+     * The start column of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colStart?: ResponsiveValues<ColRowSpan>;
+    /**
+     * The end column of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colEnd?: ResponsiveValues<ColRowSpan>;
+    /**
+     * The start row of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $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;
+} & {
+    $flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
+    $flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
+    $alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
+    $alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
+    $justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
+    $alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
+    $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
+    $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
+    $order?: ResponsiveValues<csstype.Property.Order | undefined>;
+    $flexBasis?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $gap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $columnGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $rowGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>; /**
+     *
+     * 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
+     *
+     */
+} & {
+    /**
+     * Determines the number of columns the element should span.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colSpan: ResponsiveValues<ColRowSpan>;
+    /**
+     * Determines the number of rows the element should span.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $rowSpan?: ResponsiveValues<ColRowSpan> | undefined;
+    /**
+     * Sets the order of the element.
+     *
+     * Accepts a number or a responsive array of numbers.
+     */
+    $order?: ResponsiveValues<CSSProperties$1["order"]>;
+    /**
+     * The start column of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colStart?: ResponsiveValues<ColRowSpan> | undefined;
+    /**
+     * The end column of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $colEnd?: ResponsiveValues<ColRowSpan> | undefined;
+    /**
+     * The start row of the element.
+     *
+     * Accepts a value from 0-12 or a responsive value of 0-12.
+     */
+    $rowStart?: ResponsiveValues<ColRowSpan> | undefined;
+}, never>;
+
+type OakThemeProviderProps = {
+    theme: OakTheme;
+    children: React__default.ReactNode;
+};
+/**
+ *
+ * OakThemeProvider wraps Styled Components ThemeProvider allowing the use of the custom type OakTheme.
+ *
+ */
+declare const OakThemeProvider: ({ theme, children, }: OakThemeProviderProps) => React__default.JSX.Element;
+
+/**
+ * This component will provide a default maxWidth and ph value, it take Flex props.
+ * ## Usage
+ * Use this component on pages to limit the max-width to a specific container.
+ * This will make it easier to create full browser width or custom width containers on the same page
+ * with different background colors / image url.
+ */
+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;
+} & {
+    $flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
+    $flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
+    $alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
+    $alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
+    $justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
+    $alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
+    $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
+    $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
+    $order?: ResponsiveValues<csstype.Property.Order | undefined>;
+    $flexBasis?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $gap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $columnGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $rowGap?: ResponsiveValues<"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" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+}, 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 OakKbdProps = {
+    children: ReactNode;
+};
+/**
+ * Represents textual user input from a keyboard, voice input, or any other text entry device.
+ * */
+declare const OakKbd: ({ children }: OakKbdProps) => React__default.JSX.Element;
+
+type OakFieldErrorProps = {
+    children?: React__default.ReactNode;
+};
+/**
+ *
+ * OakFieldError renders a error message when passed children.
+ *
+ */
+declare const OakFieldError: (props: OakFieldErrorProps) => React__default.JSX.Element | null;
+
+type OakLoadingSpinnerProps = Pick<SizeStyleProps, "$width"> & ColorStyleProps & {
+    loaderColor?: OakCombinedColorToken;
+};
+/**
+ *
+ * A loading spinner of variable size.
+ *
+ */
+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">;
+/**
+ *
+ * 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
+ */
+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;
+
+type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
+/**
+ *
+ * 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
+ */
+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">;
+/**
+ *
+ * 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
+ */
+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" | "move-arrows" | "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;
+/**
+ * A radio button component.
+ *
+ * Use within `OakRadioGroup` component.
+ */
+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">;
+/**
+ *
+ * OakRadioGroup allow users to select a single item from a list of mutually exclusive options .
+ * OakRadioGroup consists of a set of OakRadioButtons, and a label. Each radio includes a label and a visual selection indicator. A single radio button within the group can be selected at a time. Users may click or touch a radio button to select it, or use the Tab key to navigate to the group, the arrow keys to navigate within the group, and the Space key to select an option.
+ * ## Usage
+ *
+ * use the callback onChange to get the value of the selected radio button.
+ *
+ */
+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;
+/**
+ *
+ * Default checkbox which can be extended to create specialised checkboxes.
+ * - if provided, displayValue is used to display a different value to the value prop.
+ *
+ *
+ * ## Events
+ * The following callbacks are available for tracking focus events:
+ *
+ * ### onChange
+ * onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+ *
+ * ### onFocus
+ *   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ *
+ * ### onBlur
+ *    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+ *
+ * ### onHovered
+ *  `onHovered?: (id, value, duration: number) => void;`<br>
+ *  called after a mouseEnter and mouseLeave event has happened
+ *
+ *
+ */
+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;
+/**
+ * An inline bulleted list
+ */
+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;
+/**
+ *
+ * OakLessonInfoCards are created using the custom card either oakLessoninfoCard or oakStaticMessageCard and the content is added as children. And use the oakCardHeader to create the header of the card.
+ *
+ */
+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;
+
+/**
+ * Displays different instructions for drag and drop functionality
+ * depending on the user's primary input device
+ */
+declare const OakDragAndDropInstructions: (props: ComponentPropsWithoutRef<typeof OakFlex>) => React__default.JSX.Element;
+
+type OakDraggableProps = {
+    /**
+     * Whether the item is currently being dragged
+     */
+    isDragging?: boolean;
+    /**
+     * Present the element in a subdued state with hover effects disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Read only
+     *
+     * Disables hover effects
+     */
+    isReadOnly?: boolean;
+    /**
+     * Icon to display
+     */
+    iconName?: IconName;
+    /**
+     * Icon color
+     */
+    iconColor?: OakColorFilterToken;
+};
+/**
+ * The component has no intrinsic draggable functionality.
+ * It is intended to be used with `useDraggable` from `@dnd-kit/core`
+ */
+declare const OakDraggable: FC<ComponentPropsWithRef<OakDraggableProps & typeof OakBox>>;
+
+type OakDroppableProps = {
+    /**
+     * Indicates whether a draggable is currently being dragged over the droppable
+     */
+    isOver?: boolean;
+    children?: ReactNode;
+};
+/**
+ * A drop zone for a draggable
+ *
+ * Has no intrinsic drop functionality.
+ * It is intended to be used with `useDraggable` from `@dnd-kit/core`
+ */
+declare const OakDroppable: FC<OakDroppableProps & ComponentPropsWithRef<typeof OakBox>>;
+
+type OakDraggableFeedbackProps = ComponentPropsWithoutRef<typeof OakDraggable> & {
+    /**
+     * Alters the appearance of the element to indicate whether or not it is in a correct state
+     */
+    feedback: "correct" | "incorrect";
+};
+/**
+ * A draggable element that visually indicates whether or not its state is correct or not
+ */
+declare const OakDraggableFeedback: ({ feedback, ...props }: OakDraggableFeedbackProps) => 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;
+};
+/**
+ * A checkbox representing the options in a multiple choice question.
+ */
+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;
+};
+/**
+ * A text input for a free-text question in a quiz
+ */
+declare const OakQuizTextInput: ({ feedback, readOnly, ...props }: OakQuizTextInputProps) => React__default.JSX.Element;
+
+type OakQuizRadioButtonProps = OakRadioButtonProps & {
+    feedback?: "correct" | "incorrect" | null;
+    image?: JSX.Element;
+};
+/**
+ * A radio button representing the options in a multiple choice question.
+ *
+ * Use with `OakRadioGroup` to create a group of radio buttons.
+ */
+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;
+};
+/**
+ * A counter representing progress through the questions in a quiz
+ */
+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;
+};
+/**
+ *
+ * A specific implementation of InternalShadowRoundButton
+ *
+ * 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
+ */
+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 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;
+
+type OakQuizOrderItem = {
+    id: string;
+    label: string;
+};
+type OakQuizOrderProps = {
+    /**
+     * The initial order of items
+     *
+     * this cannot be updated on subsequent renders
+     */
+    initialItems: OakQuizOrderItem[];
+    /**
+     * Notified the consumer when the order of items has changed
+     */
+    onChange?: (items: OakQuizOrderItem[]) => void;
+};
+/**
+ * Facilitates DI for the DndContext
+ */
+declare const injectDndContext: React__default.Context<React__default.FC<DndContextProps>>;
+/**
+ * A sortable list of items with drag and drop functionality. Items can be dragged over named slots to re-arrange them
+ *
+ * Keyboard navigation is supported with the `tab`, `space` and `arrow` keys
+ */
+declare const OakQuizOrder: ({ initialItems, onChange }: OakQuizOrderProps) => 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;
+/**
+ *
+ * A specific implementation of OakPrimaryButton and OakPrimaryInvertedButton rendering
+ * relevant view depending on isCurrent prop
+ *
+ */
+declare const OakPrimaryNavItem: ({ href, isCurrent, shallow, children, }: OakPrimaryNavItemProps) => React__default.JSX.Element;
+
+type OakPrimaryNavProps = {
+    ariaLabel?: string;
+    navItems: OakPrimaryNavItemProps[];
+};
+/**
+ * A row of buttons for navigating between different sections
+ */
+declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => 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, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, 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, OakKbd, type OakKbdProps, 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, OakQuizOrder, type OakQuizOrderProps, 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, injectDndContext, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens };