@oaknational/oak-components 2.33.0 → 2.35.0

package/dist/types.d.ts

@@ -1,13 +1,9 @@
-import * as React$1 from 'react';
-import React__default, { CSSProperties as CSSProperties$1, ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEventHandler, FC, ReactNode, HTMLAttributes, DetailedHTMLProps, TextareaHTMLAttributes, InputHTMLAttributes, FocusEvent, ChangeEventHandler, ComponentProps, ReactElement, MutableRefObject, ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import React$1, { CSSProperties, MouseEventHandler, ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, FC, ReactNode, HTMLAttributes, DetailedHTMLProps, TextareaHTMLAttributes, InputHTMLAttributes, FocusEvent, ChangeEventHandler, ComponentProps, ReactElement, MutableRefObject, ButtonHTMLAttributes, PropsWithChildren } from 'react';
 import * as styled_components from 'styled-components';
-import { ThemedStyledProps, DefaultTheme, Interpolation, CSSProperties } from 'styled-components';
-import * as Image from 'next/image';
-import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
+import { ThemedStyledProps, DefaultTheme, Interpolation, CSSProperties as CSSProperties$1 } from 'styled-components';
+import Image, { ImageProps as ImageProps$1 } from 'next/image';
 import { UrlObject } from 'url';
 import { Announcements } from '@dnd-kit/core';
-import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
-import * as _cloudinary_util_url_loader from '@cloudinary-util/url-loader';
 import { CldImage } from 'next-cloudinary';
 
 declare const oakColorTokens: {
@@ -127,6 +123,34 @@ type Generic = string | number | undefined | null;
  */
 declare const responsiveStyle: <Props, T extends Generic>(attr: string, getValues: (props: Props) => ResponsiveValues<T | undefined | null>, parse?: ((unparsed: T | undefined | null) => Generic) | ((unparsed: T | undefined | null) => (props: PropsWithTheme) => Generic)) => (props: Props) => Interpolation<ThemedStyledProps<Props, DefaultTheme>>;
 
+/**
+ * Color token!
+ */
+type ColorToken = ResponsiveValues<OakUiRoleToken | null>;
+type ColorStyleProps = {
+    /**
+     * Sets the `color` of the element.
+     *
+     * Accepts a UI role token or a responsive array of UI role tokens.
+     */
+    $color?: ColorToken;
+    /**
+     * Sets the `background-color` of the element.
+     *
+     * Accepts a UI role token or a responsive array of UI role tokens.
+     */
+    $background?: ColorToken;
+};
+
+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 oakAllSpacingTokens: {
     "spacing-0": number;
     "spacing-2": number;
@@ -211,254 +235,6 @@ declare const additionalSpacingTokens: {
 type AdditionalSpacingTypes = keyof typeof additionalSpacingTokens;
 type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
 
-type ScrollMarginValue = OakAllSpacingToken | null | undefined;
-type ScrollMarginValues = ResponsiveValues<ScrollMarginValue>;
-type ScrollSnapStyleProps = {
-    /**
-     * Applies `scroll-margin-top` to the element
-     *
-     * Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
-     */
-    $scrollMarginTop?: ScrollMarginValues;
-    /**
-     * Applies `scroll-margin-left` to the element
-     *
-     * Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
-     */
-    $scrollMarginLeft?: ScrollMarginValues;
-};
-
-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;
-    readonly banner: number;
-};
-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 | number>;
-};
-
-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>;
-};
-
-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["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["transformOrigin"] | null>;
-};
-
-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>;
-};
-
-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;
-    "drop-shadow-black": string;
-    "drop-shadow-centred-standard": string;
-    "drop-shadow-none": 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 oakBorderWidthTokens: {
-    "border-solid-none": number;
-    "border-solid-s": number;
-    "border-solid-m": number;
-    "border-solid-l": number;
-    "border-solid-xl": number;
-    "border-solid-xxl": number;
-    "border-solid-xxxl": number;
-    "border-solid-xxxxl": 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["borderStyle"]>;
-type BorderColorProps = ResponsiveValues<OakUiRoleToken>;
-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 UI role token or a responsive array of UI role 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;
-};
-
-/**
- * Color token!
- */
-type ColorToken = ResponsiveValues<OakUiRoleToken | null>;
-type ColorStyleProps = {
-    /**
-     * Sets the `color` of the element.
-     *
-     * Accepts a UI role token or a responsive array of UI role tokens.
-     */
-    $color?: ColorToken;
-    /**
-     * Sets the `background-color` of the element.
-     *
-     * Accepts a UI role token or a responsive array of UI role tokens.
-     */
-    $background?: ColorToken;
-};
-
 type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
 type PaddingStyleProps = {
     /**
@@ -552,15 +328,6 @@ type MarginStyleProps = {
 };
 type SpacingStyleProps = PaddingStyleProps & MarginStyleProps;
 
-type DisplayStyleProps = {
-    /**
-     * Sets the `display` CSS property of the element.
-     *
-     * Accepts a `display` value or a responsive array of `display` values.
-     */
-    $display?: ResponsiveValues<CSSProperties$1["display"]>;
-};
-
 declare const oakFontSizeTokens: {
     "font-size-1": number;
     "font-size-2": number;
@@ -633,7 +400,7 @@ type TypographyStyleProps = {
      *
      * Accepts a `text-align` value or a responsive array of `text-align` values.
      */
-    $textAlign?: ResponsiveValues<CSSProperties["textAlign"]>;
+    $textAlign?: ResponsiveValues<CSSProperties$1["textAlign"]>;
     /**
      * Sets the `white-space` CSS property of the element.
      *
@@ -651,40 +418,200 @@ type TypographyStyleProps = {
      *
      * Accepts a text-overflow token or a responsive array of text-overflow tokens.
      */
-    $textOverflow?: ResponsiveValues<OakTextOverflow>;
+    $textOverflow?: ResponsiveValues<OakTextOverflow>;
+    /**
+     * Sets the `overflow` CSS property of the element.
+     *
+     * Accepts an overflow token or a responsive array of overflow tokens.
+     */
+    $overflow?: ResponsiveValues<CSSProperties$1["overflow"]>;
+    /**
+     * Sets the `text-wrap` CSS property of the element.
+     *
+     * Accepts a text-wrap token or a responsive array of text-wrap tokens.
+     *
+     * Controls how text inside an element is wrapped. The different values provide:
+     * - Typographic improvements, for example more balanced line lengths across broken headings
+     * - A way to turn text wrapping off completely
+     */
+    $textWrap?: ResponsiveValues<CSSProperties$1["textWrap"]>;
+};
+
+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;
+    "drop-shadow-black": string;
+    "drop-shadow-centred-standard": string;
+    "drop-shadow-none": 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 oakBorderWidthTokens: {
+    "border-solid-none": number;
+    "border-solid-s": number;
+    "border-solid-m": number;
+    "border-solid-l": number;
+    "border-solid-xl": number;
+    "border-solid-xxl": number;
+    "border-solid-xxxl": number;
+    "border-solid-xxxxl": number;
+};
+declare const oakBorderRadiusTokens: {
+    "border-radius-square": number;
+    "border-radius-xs": number;
+    "border-radius-s": number;
+    "border-radius-m": number;
+    "border-radius-m2": number;
+    "border-radius-l": number;
+    "border-radius-xl": number;
+    "border-radius-circle": number;
+};
+type OakBorderRadiusToken = keyof typeof oakBorderRadiusTokens;
+type OakBorderWidthToken = keyof typeof oakBorderWidthTokens;
+
+type BorderWidth = ResponsiveValues<OakBorderWidthToken>;
+type _BorderStyleProps = ResponsiveValues<CSSProperties$1["borderStyle"]>;
+type BorderColorProps = ResponsiveValues<OakUiRoleToken>;
+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 UI role token or a responsive array of UI role 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;
     /**
-     * Sets the `overflow` CSS property of the element.
+     * Apply border radius to the top right and top left
      *
-     * Accepts an overflow token or a responsive array of overflow tokens.
+     * Accepts a border-radius token or a responsive array of border-radius tokens.
      */
-    $overflow?: ResponsiveValues<CSSProperties["overflow"]>;
+    $btr?: BorderRadiusProps;
     /**
-     * Sets the `text-wrap` CSS property of the element.
-     *
-     * Accepts a text-wrap token or a responsive array of text-wrap tokens.
+     * Apply border radius to the bottom right and bottom left
      *
-     * Controls how text inside an element is wrapped. The different values provide:
-     * - Typographic improvements, for example more balanced line lengths across broken headings
-     * - A way to turn text wrapping off completely
+     * Accepts a border-radius token or a responsive array of border-radius tokens
      */
-    $textWrap?: ResponsiveValues<CSSProperties["textWrap"]>;
-};
-
-type ElementProp<C extends ElementType> = {
-    element?: C;
-};
-type PolymorphicPropsWithoutRef<C extends ElementType> = ElementProp<C> & ComponentPropsWithoutRef<C>;
-type PolymorphicRef<C extends React.ElementType> = ComponentPropsWithRef<C>["ref"];
-type PolymorphicPropsWithRef<C extends ElementType> = ElementProp<C> & ComponentPropsWithoutRef<C> & {
-    ref?: PolymorphicRef<C>;
+    $bbr?: BorderRadiusProps;
 };
 
 type StyledButtonProps = TypographyStyleProps & SpacingStyleProps & ColorStyleProps & DisplayStyleProps & BorderStyleProps & DropShadowStyleProps & {
     isLoading?: boolean;
 };
 type InternalButtonProps = StyledButtonProps & {
-    onHovered?: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;
+    onHovered?: (event: React$1.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;
+};
+
+declare const oakOpacityTokens: {
+    transparent: number;
+    "semi-transparent": number;
+    "semi-opaque": number;
+    opaque: number;
+};
+type OakOpacityToken = keyof typeof oakOpacityTokens;
+
+declare const oakTransitionTokens: {
+    "standard-ease": string;
+    "standard-transform": string;
+};
+type OakTransitionToken = keyof typeof oakTransitionTokens;
+
+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;
+    readonly banner: number;
 };
+type OakZIndexToken = keyof typeof oakZIndexTokens | null;
 
 declare const oakDefaultTheme: OakTheme;
 
@@ -933,7 +860,7 @@ type PositionStyleProps = {
      *
      * Accepts a `position` value or a responsive array of `position` values. Can be nulled.
      */
-    $position?: ResponsiveValues<CSSProperties$1["position"]>;
+    $position?: ResponsiveValues<CSSProperties["position"]>;
     /**
      * Sets the `top` CSS property of the element.
      *
@@ -978,49 +905,49 @@ type PositionStyleProps = {
      *
      * Accepts an `overflow` value or a responsive array of `overflow` values.
      */
-    $overflow?: ResponsiveValues<CSSProperties$1["overflow"]>;
+    $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$1["overflowX"]>;
+    $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$1["overflowY"]>;
+    $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$1["objectFit"]>;
+    $objectFit?: ResponsiveValues<CSSProperties["objectFit"]>;
     /**
      * Sets the `object-position` CSS property of the element.
      *
      * Accepts an `object-position` value or a responsive array of `object-position` values.
      */
-    $objectPosition?: ResponsiveValues<CSSProperties$1["objectPosition"]>;
+    $objectPosition?: ResponsiveValues<CSSProperties["objectPosition"]>;
     /**
      * 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$1["pointerEvents"]>;
+    $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$1["visibility"]>;
+    $visibility?: ResponsiveValues<CSSProperties["visibility"]>;
     /**
      * Sets the `vertical-align` CSS property of the element.
      *
      * Accepts a `vertical-align` value or a responsive array of `vertical-align` values.
      */
-    $verticalAlign?: ResponsiveValues<CSSProperties$1["verticalAlign"]>;
+    $verticalAlign?: ResponsiveValues<CSSProperties["verticalAlign"]>;
 };
 
 type SizeValues = ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
@@ -1066,13 +993,73 @@ type SizeStyleProps = {
      *
      * Accepts an `aspect-ratio` value or a responsive array of `aspect-ratio` values.
      */
-    $aspectRatio?: ResponsiveValues<CSSProperties["aspectRatio"]>;
+    $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["boxSizing"]>;
+    $boxSizing?: ResponsiveValues<CSSProperties$1["boxSizing"]>;
+};
+
+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>;
+};
+
+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>;
+};
+
+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 | number>;
+};
+
+type ScrollMarginValue = OakAllSpacingToken | null | undefined;
+type ScrollMarginValues = ResponsiveValues<ScrollMarginValue>;
+type ScrollSnapStyleProps = {
+    /**
+     * Applies `scroll-margin-top` to the element
+     *
+     * Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $scrollMarginTop?: ScrollMarginValues;
+    /**
+     * Applies `scroll-margin-left` to the element
+     *
+     * Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
+     */
+    $scrollMarginLeft?: ScrollMarginValues;
 };
 
 type HTMLProps$1 = {
@@ -1099,12 +1086,12 @@ declare const oakBoxCss: styled_components.FlattenInterpolation<styled_component
  * - scroll-margin-top/left
  *
  */
-declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, OakBoxProps, never>;
+declare const OakBox: any;
 
 type HTMLProps = {
     onClick?: MouseEventHandler;
 };
-type OakImageProps<C extends ElementType = typeof Image__default> = Omit<ImageProps$1, "placeholder"> & OakBoxProps & ColorFilterStyleProps & HTMLProps & {
+type OakImageProps<C extends ElementType = typeof Image> = Omit<ImageProps$1, "placeholder"> & OakBoxProps & ColorFilterStyleProps & HTMLProps & {
     as?: C;
     /**
      * The placeholder to use while the image is loading
@@ -1134,7 +1121,7 @@ declare const placeholderStyles: styled_components.FlattenInterpolation<styled_c
  * sizes is exposed for further optimisation read Next docs for more info.
  *
  */
-declare const OakImage: <C extends ElementType = typeof Image__default>({ ...props }: OakImageProps<C>) => React__default.JSX.Element;
+declare const OakImage: <C extends ElementType = typeof Image>({ ...props }: OakImageProps<C>) => React$1.JSX.Element;
 
 declare const oakIconNames: IconName[];
 type OakIconName = IconName;
@@ -1160,7 +1147,16 @@ declare function generateOakIconURL(iconName: string): string;
 /**
  * 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 OakIcon: (props: OakIconProps) => React$1.JSX.Element;
+
+type ElementProp<C extends ElementType> = {
+    element?: C;
+};
+type PolymorphicPropsWithoutRef<C extends ElementType> = ElementProp<C> & ComponentPropsWithoutRef<C>;
+type PolymorphicRef<C extends React.ElementType> = ComponentPropsWithRef<C>["ref"];
+type PolymorphicPropsWithRef<C extends ElementType> = ElementProp<C> & ComponentPropsWithoutRef<C> & {
+    ref?: PolymorphicRef<C>;
+};
 
 type FlexStyleProps = DisplayStyleProps & {
     /**
@@ -1168,55 +1164,55 @@ type FlexStyleProps = DisplayStyleProps & {
      *
      * Accepts a `flex-direction` value or a responsive array of flex-direction values.
      */
-    $flexDirection?: ResponsiveValues<CSSProperties$1["flexDirection"]>;
+    $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$1["flexWrap"]>;
+    $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$1["alignItems"]>;
+    $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$1["alignContent"]>;
+    $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$1["justifyContent"]>;
+    $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$1["alignSelf"]>;
+    $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$1["flexGrow"]>;
+    $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$1["flexShrink"]>;
+    $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$1["order"]>;
+    $order?: ResponsiveValues<CSSProperties["order"]>;
     /**
      * Sets the `flex-basis` CSS property of the element.
      *
@@ -1251,7 +1247,7 @@ type InternalShadowRectButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "
     /**
      *  we can set a custom icon if we want different sizes and padding
      */
-    iconOverride?: React__default.ReactNode;
+    iconOverride?: React$1.ReactNode;
     isTrailingIcon?: boolean;
     /**
      *  we can arrange the icon vertically or horizontally
@@ -1301,18 +1297,18 @@ type OakSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorde
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
-type ButtonComponent = <C extends React__default.ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+type ButtonComponent = <C extends React$1.ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 type OakButtonWithDropdownProps = {
     primaryActionText: string;
     primaryActionIcon?: OakIconName;
     onPrimaryAction?: () => void;
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     isLoading?: boolean;
     disabled?: boolean;
     ariaLabel?: string;
-    leadingButtonIcon?: React__default.ReactNode;
+    leadingButtonIcon?: React$1.ReactNode;
     ariaDescription?: string;
     "data-testid"?: string;
     buttonComponent: ButtonComponent;
@@ -1325,11 +1321,11 @@ type OakButtonWithDropdownProps = {
  * Accepts the button component as a prop to eliminate code duplication.
  */
 declare const OakButtonWithDropdown: {
-    ({ primaryActionText, primaryActionIcon, onPrimaryAction, children, isLoading, disabled, ariaLabel, ariaDescription, leadingButtonIcon, "data-testid": dataTestId, buttonComponent: ButtonComponent, dropdownTopSpacing, flexWidth, closeOnChange, }: OakButtonWithDropdownProps): React__default.JSX.Element;
-    Divider(): React__default.ReactElement;
+    ({ primaryActionText, primaryActionIcon, onPrimaryAction, children, isLoading, disabled, ariaLabel, ariaDescription, leadingButtonIcon, "data-testid": dataTestId, buttonComponent: ButtonComponent, dropdownTopSpacing, flexWidth, closeOnChange, }: OakButtonWithDropdownProps): React$1.JSX.Element;
+    Divider(): React$1.ReactElement;
     Item<C extends ElementType = "button">({ children, element, ...rest }: {
-        children: React__default.ReactNode;
-    } & OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
+        children: React$1.ReactNode;
+    } & OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>): React$1.ReactElement;
 };
 
 type OakCloseButtonProps = {
@@ -1343,7 +1339,7 @@ type OakCloseButtonProps = {
  *
  *
  */
-declare function OakCloseButton({ onClose, ...rest }: Readonly<OakCloseButtonProps>): React__default.JSX.Element;
+declare function OakCloseButton({ onClose, ...rest }: Readonly<OakCloseButtonProps>): React$1.JSX.Element;
 
 type OakPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
 /**
@@ -1359,7 +1355,7 @@ type OakPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderC
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
 /**
@@ -1375,17 +1371,17 @@ type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaul
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakSecondaryButtonWithDropdownProps = {
     primaryActionText: string;
     primaryActionIcon?: OakIconName;
     onPrimaryAction?: () => void;
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     isLoading?: boolean;
     disabled?: boolean;
     ariaLabel?: string;
-    leadingButtonIcon?: React__default.ReactNode;
+    leadingButtonIcon?: React$1.ReactNode;
     ariaDescription?: string;
     "data-testid"?: string;
 };
@@ -1394,11 +1390,11 @@ type OakSecondaryButtonWithDropdownProps = {
  *
  */
 declare const OakSecondaryButtonWithDropdown: {
-    (props: OakSecondaryButtonWithDropdownProps): React__default.JSX.Element;
-    Divider(): React__default.ReactElement;
+    (props: OakSecondaryButtonWithDropdownProps): React$1.JSX.Element;
+    Divider(): React$1.ReactElement;
     Item<C extends ElementType = "button">({ children, element, ...rest }: {
-        children: React__default.ReactNode;
-    } & OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
+        children: React$1.ReactNode;
+    } & OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React$1.ReactElement;
 };
 
 type OakSmallPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font">;
@@ -1415,7 +1411,7 @@ type OakSmallPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBo
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSmallPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSmallPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakSmallPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
 /**
@@ -1431,7 +1427,7 @@ type OakSmallPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "d
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSmallPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSmallPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakSmallSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font">;
 /**
@@ -1447,7 +1443,7 @@ type OakSmallSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "default
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSmallSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSmallSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 declare const oakAllApectRatiosConst: readonly ["7:8", "2:3", "1:1", "3:2", "16:9"];
 type OakAllApectRatios = (typeof oakAllApectRatiosConst)[number];
@@ -1456,7 +1452,7 @@ type OakAspectRatioOuterProps = {
     ratio: OakAspectRatioValues;
 };
 type OakAspectRatioProps = {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
 } & OakAspectRatioOuterProps;
 /**
  *
@@ -1480,16 +1476,16 @@ declare const OakAspectRatio: FC<OakAspectRatioProps>;
  * Should be used only in cases where OakIcon can't be used and if this list grows much bigger in the future we should consider refactoring
  */
 declare const svgMap: {
-    "header-underline": () => React__default.JSX.Element;
-    underline: () => React__default.JSX.Element;
-    "horizontal-rule": () => React__default.JSX.Element;
-    "underline-3": () => React__default.JSX.Element;
-    "button-border-top": () => React__default.JSX.Element;
-    "button-border-bottom": () => React__default.JSX.Element;
-    "button-border-left": () => React__default.JSX.Element;
-    "button-border-right": () => React__default.JSX.Element;
-    "icon-background": () => React__default.JSX.Element;
-    scribble: () => React__default.JSX.Element;
+    "header-underline": () => React$1.JSX.Element;
+    underline: () => React$1.JSX.Element;
+    "horizontal-rule": () => React$1.JSX.Element;
+    "underline-3": () => React$1.JSX.Element;
+    "button-border-top": () => React$1.JSX.Element;
+    "button-border-bottom": () => React$1.JSX.Element;
+    "button-border-left": () => React$1.JSX.Element;
+    "button-border-right": () => React$1.JSX.Element;
+    "icon-background": () => React$1.JSX.Element;
+    scribble: () => React$1.JSX.Element;
 };
 type OakSvgNames = keyof typeof svgMap;
 type OakSvgProps = OakBoxProps & {
@@ -1517,17 +1513,17 @@ 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;
+declare const OakRoundIcon: ({ $background, $borderRadius, $width, $height, $pa, className, ...rest }: OakRoundIconProps) => React$1.JSX.Element;
 
 type OakSmallSecondaryButtonWithDropdownProps = {
     primaryActionText: string;
     primaryActionIcon?: OakIconName;
     onPrimaryAction?: () => void;
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     isLoading?: boolean;
     disabled?: boolean;
     ariaLabel?: string;
-    leadingButtonIcon?: React__default.ReactNode;
+    leadingButtonIcon?: React$1.ReactNode;
     ariaDescription?: string;
     "data-testid"?: string;
 };
@@ -1536,11 +1532,11 @@ type OakSmallSecondaryButtonWithDropdownProps = {
  *
  */
 declare const OakSmallSecondaryButtonWithDropdown: {
-    (props: OakSmallSecondaryButtonWithDropdownProps): React__default.JSX.Element;
-    Divider(): React__default.ReactElement;
+    (props: OakSmallSecondaryButtonWithDropdownProps): React$1.JSX.Element;
+    Divider(): React$1.ReactElement;
     Item<C extends ElementType = "button">({ children, element, ...rest }: {
-        children: React__default.ReactNode;
-    } & OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
+        children: React$1.ReactNode;
+    } & OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React$1.ReactElement;
 };
 
 type OakSmallSecondaryToggleButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font"> & {
@@ -1561,7 +1557,7 @@ type OakSmallSecondaryToggleButtonProps = Omit<InternalShadowRectButtonProps, "d
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSmallSecondaryToggleButton: <C extends ElementType = "button">({ element, toggleOn, ...rest }: OakSmallSecondaryToggleButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSmallSecondaryToggleButton: <C extends ElementType = "button">({ element, toggleOn, ...rest }: OakSmallSecondaryToggleButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type InternalShadowIconButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "$pv" | "$ba" | "$borderRadius" | "$borderColor" | "$background" | "$color"> & {
     iconName?: OakIconName;
@@ -1590,7 +1586,7 @@ type OakSmallTertiaryInvertedButtonProps = Omit<InternalShadowIconButtonProps, "
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSmallTertiaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSmallTertiaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type InternalShadowRoundButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "$pv" | "$ba" | "$borderRadius" | "$borderColor" | "$background" | "$color"> & {
     iconName?: OakIconName;
@@ -1626,7 +1622,7 @@ type InternalShadowRoundButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" |
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const InternalShadowRoundButton: <C extends ElementType = "button">(props: InternalShadowRoundButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const InternalShadowRoundButton: <C extends ElementType = "button">(props: InternalShadowRoundButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakTertiaryButtonProps = InternalButtonProps & {
     iconBackground?: OakRoundIconProps["$background"];
@@ -1638,7 +1634,7 @@ type OakTertiaryButtonProps = InternalButtonProps & {
  * An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
  *
  */
-declare const OakTertiaryButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryButtonProps & Partial<InternalShadowRoundButtonProps> & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakTertiaryButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryButtonProps & Partial<InternalShadowRoundButtonProps> & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakTertiaryInvertedButtonProps = InternalButtonProps & {
     iconBackground?: OakRoundIconProps["$background"];
@@ -1650,7 +1646,7 @@ type OakTertiaryInvertedButtonProps = InternalButtonProps & {
  * An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
  *
  */
-declare const OakTertiaryInvertedButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakTertiaryInvertedButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakLeftAlignedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor"> & {
     /**
@@ -1671,7 +1667,7 @@ type OakLeftAlignedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBor
  * `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`
  * called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakLeftAlignedButton: <C extends ElementType = "button">(props: OakLeftAlignedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakLeftAlignedButton: <C extends ElementType = "button">(props: OakLeftAlignedButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakCookieBannerProps = {
     /**
@@ -1723,7 +1719,7 @@ type OakCookieBannerProps = {
 /**
  * A banner presenting the user with options to accept or reject cookies.
  */
-declare const OakCookieBanner: ({ state, innerMaxWidth, onOpenSettings, onHide, onAccept, onReject, isFixed, zIndex, }: OakCookieBannerProps) => React__default.JSX.Element;
+declare const OakCookieBanner: ({ state, innerMaxWidth, onOpenSettings, onHide, onAccept, onReject, isFixed, zIndex, }: OakCookieBannerProps) => React$1.JSX.Element;
 
 type CookieConsentReducerState = {
     isSettingsModalOpen: boolean;
@@ -1825,7 +1821,7 @@ type OakCookieConsentContextType = {
     bannerState: CookieConsentReducerState["bannerState"];
 };
 declare function getDefaultContextState(): OakCookieConsentContextType;
-declare const OakCookieConsentContext: React__default.Context<OakCookieConsentContextType>;
+declare const OakCookieConsentContext: React$1.Context<OakCookieConsentContextType>;
 type OakCookieConsentProviderProps = Pick<OakCookieConsentContextType, "policyConsents"> & {
     children: ReactNode;
     /**
@@ -1846,9 +1842,9 @@ declare function useCookieConsent(): {
  *
  * Intended to be used with `OakCookieConsent`
  */
-declare const OakCookieConsentProvider: ({ children, policyConsents, onConsentChange, }: OakCookieConsentProviderProps) => React__default.JSX.Element;
+declare const OakCookieConsentProvider: ({ children, policyConsents, onConsentChange, }: OakCookieConsentProviderProps) => React$1.JSX.Element;
 
-declare const OakInformativeModalBorderColor: React__default.Context<("transparent" | "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-promo" | "bg-primary" | "bg-inverted" | "bg-inverted-semi-transparent" | "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-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-decorative6-main" | "bg-decorative6-subdued" | "bg-decorative6-very-subdued" | "bg-interactive-element1" | "bg-interactive-element2" | "bg-correct" | "bg-incorrect" | "bg-success" | "bg-error" | "icon-inverted" | "icon-disabled" | "icon-brand" | "icon-success" | "icon-error" | "icon-warning" | "icon-primary" | "icon-subdued" | "icon-link-active" | "icon-link-hover" | "icon-link-pressed" | "icon-link-visited" | "icon-decorative1" | "icon-decorative2" | "icon-decorative3" | "icon-decorative4" | "icon-decorative5" | "icon-decorative6" | "icon-promo" | "border-primary" | "border-inverted" | "border-neutral" | "border-neutral-lighter" | "border-neutral-stronger" | "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" | "code-blue" | "code-green" | "code-grey" | "code-pink" | ("transparent" | "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-promo" | "bg-primary" | "bg-inverted" | "bg-inverted-semi-transparent" | "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-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-decorative6-main" | "bg-decorative6-subdued" | "bg-decorative6-very-subdued" | "bg-interactive-element1" | "bg-interactive-element2" | "bg-correct" | "bg-incorrect" | "bg-success" | "bg-error" | "icon-inverted" | "icon-disabled" | "icon-brand" | "icon-success" | "icon-error" | "icon-warning" | "icon-primary" | "icon-subdued" | "icon-link-active" | "icon-link-hover" | "icon-link-pressed" | "icon-link-visited" | "icon-decorative1" | "icon-decorative2" | "icon-decorative3" | "icon-decorative4" | "icon-decorative5" | "icon-decorative6" | "icon-promo" | "border-primary" | "border-inverted" | "border-neutral" | "border-neutral-lighter" | "border-neutral-stronger" | "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" | "code-blue" | "code-green" | "code-grey" | "code-pink" | null)[] | null) | undefined>;
+declare const OakInformativeModalBorderColor: React$1.Context<("transparent" | "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-promo" | "bg-primary" | "bg-inverted" | "bg-inverted-semi-transparent" | "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-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-decorative6-main" | "bg-decorative6-subdued" | "bg-decorative6-very-subdued" | "bg-interactive-element1" | "bg-interactive-element2" | "bg-correct" | "bg-incorrect" | "bg-success" | "bg-error" | "icon-inverted" | "icon-disabled" | "icon-brand" | "icon-success" | "icon-error" | "icon-warning" | "icon-primary" | "icon-subdued" | "icon-link-active" | "icon-link-hover" | "icon-link-pressed" | "icon-link-visited" | "icon-decorative1" | "icon-decorative2" | "icon-decorative3" | "icon-decorative4" | "icon-decorative5" | "icon-decorative6" | "icon-promo" | "border-primary" | "border-inverted" | "border-neutral" | "border-neutral-lighter" | "border-neutral-stronger" | "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" | "code-blue" | "code-green" | "code-grey" | "code-pink" | ("transparent" | "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-promo" | "bg-primary" | "bg-inverted" | "bg-inverted-semi-transparent" | "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-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-decorative6-main" | "bg-decorative6-subdued" | "bg-decorative6-very-subdued" | "bg-interactive-element1" | "bg-interactive-element2" | "bg-correct" | "bg-incorrect" | "bg-success" | "bg-error" | "icon-inverted" | "icon-disabled" | "icon-brand" | "icon-success" | "icon-error" | "icon-warning" | "icon-primary" | "icon-subdued" | "icon-link-active" | "icon-link-hover" | "icon-link-pressed" | "icon-link-visited" | "icon-decorative1" | "icon-decorative2" | "icon-decorative3" | "icon-decorative4" | "icon-decorative5" | "icon-decorative6" | "icon-promo" | "border-primary" | "border-inverted" | "border-neutral" | "border-neutral-lighter" | "border-neutral-stronger" | "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" | "code-blue" | "code-green" | "code-grey" | "code-pink" | null)[] | null) | undefined>;
 type OakInformativeModalCloseAction = "close_button" | undefined;
 type OakInformativeModalProps = {
     /**
@@ -1902,7 +1898,7 @@ type OakInformativeModalProps = {
 /**
  * Modal dialog with trapped focus and a close button. See the [design specification](https://www.figma.com/design/YcWQMMhHPVVmc47cHHEEAl/Oak-Design-Kit?node-id=15135-2063)
  */
-declare const OakInformativeModal: ({ children, footerSlot, domContainer, isOpen, onClose, zIndex, isLeftHandSide, closeOnBackgroundClick, largeScreenMaxWidth, ...rest }: OakInformativeModalProps) => React__default.ReactPortal | null;
+declare const OakInformativeModal: ({ children, footerSlot, domContainer, isOpen, onClose, zIndex, isLeftHandSide, closeOnBackgroundClick, largeScreenMaxWidth, ...rest }: OakInformativeModalProps) => React$1.ReactPortal | null;
 
 type OakInformativeModalBodyProps = {
     children: ReactNode;
@@ -1912,7 +1908,7 @@ type OakInformativeModalBodyProps = {
  * it applies some padding and margin to ensure that the contents
  * line up with the modal's header and footer
  */
-declare const OakInformativeModalBody: (props: OakInformativeModalBodyProps) => React__default.JSX.Element;
+declare const OakInformativeModalBody: (props: OakInformativeModalBodyProps) => React$1.JSX.Element;
 
 type OakInformativeModalFooterProps = {
     children: ReactNode;
@@ -1922,7 +1918,7 @@ type OakInformativeModalFooterProps = {
  * it is ideal as a container for one or more buttons.
  * It switches from a horizontal to vertical layout on smaller screens
  */
-declare const OakInformativeModalFooter: (props: OakInformativeModalFooterProps) => React__default.JSX.Element;
+declare const OakInformativeModalFooter: (props: OakInformativeModalFooterProps) => React$1.JSX.Element;
 
 type OakCookieSettingsModalProps = Pick<OakInformativeModalProps, "isOpen" | "onClose" | "zIndex"> & {
     /**
@@ -1950,7 +1946,7 @@ type OakCookieSettingsModalProps = Pick<OakInformativeModalProps, "isOpen" | "on
 /**
  * Modal for managing cookie consent settings.
  */
-declare const OakCookieSettingsModal: ({ isOpen, onClose, onReject, onConfirm, onAccept, policyURL, policyConsents, zIndex, }: OakCookieSettingsModalProps) => React__default.JSX.Element;
+declare const OakCookieSettingsModal: ({ isOpen, onClose, onReject, onConfirm, onAccept, policyURL, policyConsents, zIndex, }: OakCookieSettingsModalProps) => React$1.JSX.Element;
 
 type OakCookieConsentProps = Pick<OakCookieSettingsModalProps, "policyURL"> & Pick<OakCookieBannerProps, "isFixed" | "innerMaxWidth"> & {
     /**
@@ -1964,14 +1960,14 @@ type OakCookieConsentProps = Pick<OakCookieSettingsModalProps, "policyURL"> & Pi
 /**
  * Connects `OakCookieBanner` and `OakCookieSettingsModal` to `OakCookieConsentProvider`.
  */
-declare const OakCookieConsent: ({ policyURL, isFixed, innerMaxWidth, zIndex, }: OakCookieConsentProps) => React__default.JSX.Element;
+declare const OakCookieConsent: ({ policyURL, isFixed, innerMaxWidth, zIndex, }: OakCookieConsentProps) => React$1.JSX.Element;
 
 type OakFieldsetProps = OakBoxProps;
 /**
  * OakFieldset renders a custom `fieldset` component, removes default styling of fieldset.
   color, opacity, margin, padding, border and typography styles can be passed in also.
  */
-declare const OakFieldset: styled_components.StyledComponent<"fieldset", styled_components.DefaultTheme, OakBoxProps, never>;
+declare const OakFieldset: any;
 
 /**
  *
@@ -1981,7 +1977,7 @@ declare const OakFieldset: styled_components.StyledComponent<"fieldset", styled_
  * Use `<OakBox as="form">` instead
  * @deprecated Use `<OakBox as="form">` instead
  */
-declare const OakForm: styled_components.StyledComponent<"form", styled_components.DefaultTheme, OakBoxProps, never>;
+declare const OakForm: any;
 type OakFormProps = OakBoxProps;
 
 type OakLabelProps = TypographyStyleProps & ColorStyleProps;
@@ -1991,7 +1987,7 @@ type OakLabelProps = TypographyStyleProps & ColorStyleProps;
  * 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, OakLabelProps, never>;
+declare const OakLabel: any;
 
 type OakTextAreaProps = Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & StyledTextAreaProps;
 type StyledTextAreaProps = SizeStyleProps & BorderStyleProps & SpacingStyleProps & TypographyStyleProps & PositionStyleProps & ColorStyleProps;
@@ -2000,7 +1996,7 @@ type StyledTextAreaProps = SizeStyleProps & BorderStyleProps & SpacingStyleProps
  * A textarea that can be used for longer text inputs where text should wrap.
  *
  */
-declare const OakTextArea: styled_components.StyledComponent<React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & SizeStyleProps & BorderStyleProps & PaddingStyleProps & MarginStyleProps & TypographyStyleProps & PositionStyleProps & ColorStyleProps & React__default.RefAttributes<HTMLTextAreaElement>>, styled_components.DefaultTheme, {}, never>;
+declare const OakTextArea: any;
 
 type OakButtonAsRadioGroupProps = {
     label?: string;
@@ -2008,7 +2004,7 @@ type OakButtonAsRadioGroupProps = {
     ariaLabelledby?: string;
     name: string;
     disabled?: boolean;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     onChange?: (value: string) => void;
     /**
      * Sets the value of the radio group
@@ -2031,7 +2027,7 @@ type OakButtonAsRadioGroupProps = {
  * use the callback onChange to get the value of the clicked button.
  *
  */
-declare const OakButtonAsRadioGroup: (props: OakButtonAsRadioGroupProps) => React__default.JSX.Element;
+declare const OakButtonAsRadioGroup: (props: OakButtonAsRadioGroupProps) => React$1.JSX.Element;
 
 /**
  *
@@ -2061,9 +2057,9 @@ type BaseCheckBoxProps = {
      */
     checked?: 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;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "data-testid"?: string;
@@ -2073,7 +2069,7 @@ type InternalCheckBoxLabelProps = {
     labelAlignItems?: FlexStyleProps["$alignItems"];
     labelGap?: FlexStyleProps["$gap"];
     disabled?: boolean;
-    pointerEvents?: CSSProperties["pointerEvents"];
+    pointerEvents?: CSSProperties$1["pointerEvents"];
     "data-testid"?: string;
 } & OakLabelProps;
 
@@ -2083,7 +2079,7 @@ type OakCheckBoxProps = BaseCheckBoxProps & {
     checkboxBorderRadius?: OakBorderRadiusToken;
     checkedBorderColor?: OakUiRoleToken;
     uncheckedBorderColor?: OakUiRoleToken;
-    checkedIcon?: React__default.JSX.Element;
+    checkedIcon?: React$1.JSX.Element;
     checkedBackgroundFill?: boolean;
     hoverBorderRadius?: OakBorderRadiusToken;
     iconPadding?: OakInnerPaddingToken;
@@ -2115,17 +2111,17 @@ type OakCheckBoxProps = BaseCheckBoxProps & {
  *
  *
  */
-declare const OakCheckBox: (props: OakCheckBoxProps) => React__default.JSX.Element;
+declare const OakCheckBox: (props: OakCheckBoxProps) => React$1.JSX.Element;
 
 type OakFieldErrorProps = {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
 };
 /**
  *
  * OakFieldError renders a error message when passed children.
  *
  */
-declare const OakFieldError: (props: OakFieldErrorProps) => React__default.JSX.Element | null;
+declare const OakFieldError: (props: OakFieldErrorProps) => React$1.JSX.Element | null;
 
 type StyledInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & SpacingStyleProps & SizeStyleProps;
 type InternalTextInputProps = Omit<StyledInputProps, "placeholder"> & {
@@ -2187,12 +2183,12 @@ type OakFormInputProps = {
 /**
  * Default input which can be extended to create specialised inputs.
  */
-declare const OakFormInput: ({ type, borderColor, focusBorderColor, focusBackgroundColor, background, hoverBackground, hoverBorderColor, disabledBackgroundColor, color, disabledBorderColor, disabledColor, invalid, invalidBorderColor, wrapperWidth, wrapperMaxWidth, ...props }: OakFormInputProps) => React__default.JSX.Element;
+declare const OakFormInput: ({ type, borderColor, focusBorderColor, focusBackgroundColor, background, hoverBackground, hoverBorderColor, disabledBackgroundColor, color, disabledBorderColor, disabledColor, invalid, invalidBorderColor, wrapperWidth, wrapperMaxWidth, ...props }: OakFormInputProps) => React$1.JSX.Element;
 
 type OakJauntyAngleLabelProps = {
     label: string;
 } & ComponentProps<typeof OakBox>;
-declare const OakJauntyAngleLabel: (props: OakJauntyAngleLabelProps) => React__default.JSX.Element;
+declare const OakJauntyAngleLabel: (props: OakJauntyAngleLabelProps) => React$1.JSX.Element;
 
 type OakMultilineTextProps = {
     /**
@@ -2228,7 +2224,7 @@ type OakMultilineTextProps = {
  *  - Current method of clearing the component is to reset its key in the parent component
  *  - useImperativeHandle could be used to expose a clear method
  */
-declare const OakMultilineText: React__default.ForwardRefExoticComponent<{
+declare const OakMultilineText: React$1.ForwardRefExoticComponent<{
     /**
      * Set the textarea text on first render when state is controlled internally (i.e. if `value` has not been provided)
      */
@@ -2243,7 +2239,7 @@ declare const OakMultilineText: React__default.ForwardRefExoticComponent<{
      */
     errors?: Array<string>;
     label?: string;
-} & Omit<OakTextAreaProps, "$width"> & React__default.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<OakTextAreaProps, "$width"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 declare function useDevice<T>(values: T | Array<T>): T;
 
 type RadioButtonLabelProps = {
@@ -2290,7 +2286,7 @@ type OakRadioButtonProps = {
  *
  * Use within `OakRadioGroup` component.
  */
-declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
+declare const OakRadioButton: React$1.ForwardRefExoticComponent<{
     id: string;
     label: ReactNode;
     value: string;
@@ -2324,28 +2320,28 @@ declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
      */
     checkedRadioBorderWidth?: OakBorderWidthToken;
 } & {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
 } & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React__default.MouseEventHandler;
+    onClick?: React$1.MouseEventHandler;
 } & ScrollSnapStyleProps & {
     $labelAlignItems?: FlexStyleProps["$alignItems"];
     $labelGap?: FlexStyleProps["$gap"];
     disabled?: boolean;
-} & React__default.RefAttributes<HTMLInputElement>>;
+} & React$1.RefAttributes<HTMLInputElement>>;
 
 type RadioContextType = {
     currentValue: string;
     name: string;
     disabled?: boolean;
-    onValueUpdated?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onValueUpdated?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
 };
-declare const RadioContext: React__default.Context<RadioContextType>;
+declare const RadioContext: React$1.Context<RadioContextType>;
 type OakRadioGroupProps = {
     label?: string;
     name: string;
     disabled?: boolean;
-    children: React__default.ReactNode;
-    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    children: React$1.ReactNode;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Sets the value of the radio group
      * for use as a controlled component
@@ -2366,10 +2362,10 @@ type OakRadioGroupProps = {
  * use the callback onChange to get the value of the selected radio button.
  *
  */
-declare const OakRadioGroup: (props: OakRadioGroupProps) => React__default.JSX.Element;
+declare const OakRadioGroup: (props: OakRadioGroupProps) => React$1.JSX.Element;
 
 type OakSecondaryButtonAsRadioProps = {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     value: string;
 };
 /**
@@ -2383,48 +2379,10 @@ type OakSecondaryButtonAsRadioProps = {
  * See OakButtonAsRadioGroup.
  *
  */
-declare const OakSecondaryButtonAsRadio: ({ children, value, }: OakSecondaryButtonAsRadioProps) => React__default.JSX.Element;
+declare const OakSecondaryButtonAsRadio: ({ children, value, }: OakSecondaryButtonAsRadioProps) => React$1.JSX.Element;
 
-declare const IconUp: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    children?: React__default.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React__default.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    $flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
-    $flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
-    $alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
-    $alignContent?: ResponsiveValues<React__default.CSSProperties["alignContent"]>;
-    $justifyContent?: ResponsiveValues<React__default.CSSProperties["justifyContent"]>;
-    $alignSelf?: ResponsiveValues<React__default.CSSProperties["alignSelf"]>;
-    $flexGrow?: ResponsiveValues<React__default.CSSProperties["flexGrow"]>;
-    $flexShrink?: ResponsiveValues<React__default.CSSProperties["flexShrink"]>;
-    $order?: ResponsiveValues<React__default.CSSProperties["order"]>;
-    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
-    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    focusable?: boolean;
-}, never>;
-declare const IconDown: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    children?: React__default.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React__default.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    $flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
-    $flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
-    $alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
-    $alignContent?: ResponsiveValues<React__default.CSSProperties["alignContent"]>;
-    $justifyContent?: ResponsiveValues<React__default.CSSProperties["justifyContent"]>;
-    $alignSelf?: ResponsiveValues<React__default.CSSProperties["alignSelf"]>;
-    $flexGrow?: ResponsiveValues<React__default.CSSProperties["flexGrow"]>;
-    $flexShrink?: ResponsiveValues<React__default.CSSProperties["flexShrink"]>;
-    $order?: ResponsiveValues<React__default.CSSProperties["order"]>;
-    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
-    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    focusable?: boolean;
-}, never>;
+declare const IconUp: any;
+declare const IconDown: any;
 type OakSelectProps = {
     id?: string;
     children: ReactNode;
@@ -2470,7 +2428,7 @@ type OakSelectProps = {
     $display?: DisplayStyleProps["$display"];
     name?: HTMLSelectElement["name"];
 };
-declare function OakSelect({ id, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, highlightBackgroundColor, color, disabledColor, readOnlyColor, validity, validBorderColor, invalidBorderColor, isHighlighted, $display, children, name, onChange, ...props }: Readonly<OakSelectProps>): React__default.JSX.Element;
+declare function OakSelect({ id, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, highlightBackgroundColor, color, disabledColor, readOnlyColor, validity, validBorderColor, invalidBorderColor, isHighlighted, $display, children, name, onChange, ...props }: Readonly<OakSelectProps>): React$1.JSX.Element;
 
 type OakOptionProps = {
     children: ReactNode;
@@ -2480,13 +2438,13 @@ type OakOptionProps = {
     asDefault?: boolean;
     $focusRingDropShadows?: OakDropShadowToken[];
 };
-declare function OakOption({ selected, disabled, value, children, asDefault, $focusRingDropShadows, }: Readonly<OakOptionProps>): React__default.JSX.Element;
+declare function OakOption({ selected, disabled, value, children, asDefault, $focusRingDropShadows, }: Readonly<OakOptionProps>): React$1.JSX.Element;
 
 type OakOptGroupProps = {
     label: string;
     children: ReactNode;
 };
-declare function OakOptGroup({ label, children }: Readonly<OakOptGroupProps>): React__default.JSX.Element;
+declare function OakOptGroup({ label, children }: Readonly<OakOptGroupProps>): React$1.JSX.Element;
 
 type OakTextInputProps = {
     /**
@@ -2553,7 +2511,7 @@ type OakTextInputProps = {
 /**
  * Default input which can be extended to create specialised inputs.
  */
-declare const OakTextInput: ({ type, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, highlightBackgroundColor, color, disabledColor, readOnlyColor, validity, iconColor, validBorderColor, invalidBorderColor, validIconColor, invalidIconColor, iconName, iconAlt, isTrailingIcon, isHighlighted, wrapperWidth, wrapperMaxWidth, ...props }: OakTextInputProps) => React__default.JSX.Element;
+declare const OakTextInput: ({ type, borderColor, readOnlyBorderColor, focusRingDropShadows, background, hoverBackground, disabledBackgroundColor, highlightBackgroundColor, color, disabledColor, readOnlyColor, validity, iconColor, validBorderColor, invalidBorderColor, validIconColor, invalidIconColor, iconName, iconAlt, isTrailingIcon, isHighlighted, wrapperWidth, wrapperMaxWidth, ...props }: OakTextInputProps) => React$1.JSX.Element;
 
 /**
  *
@@ -2590,15 +2548,15 @@ type BaseRadioProps = {
     /**
      * Called when the checked value changes.
      */
-    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Called when the input receives focus.
      */
-    onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
     /**
      * Called when the input loses focus.
      */
-    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React$1.FocusEvent<HTMLInputElement>) => void;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "data-testid"?: string;
@@ -2608,8 +2566,8 @@ declare const colorSchemes: ["primary", "decorative1", "decorative2", "decorativ
 type OakRadioAsButtonColorScheme = (typeof colorSchemes)[number];
 type OakRadioAsButtonProps = Omit<BaseRadioProps, "defaultChecked" | "id" | "checked" | "variant" | "icon"> & {
     value?: HTMLInputElement["value"];
-    innerRef?: React__default.RefObject<HTMLInputElement>;
-    displayValue: React__default.ReactNode;
+    innerRef?: React$1.RefObject<HTMLInputElement>;
+    displayValue: React$1.ReactNode;
     /**
      * Whether to keep the icon color when the component is checked.
      *
@@ -2619,8 +2577,8 @@ type OakRadioAsButtonProps = Omit<BaseRadioProps, "defaultChecked" | "id" | "che
      */
     keepIconColor?: boolean;
     disabled?: HTMLInputElement["disabled"];
-    "aria-labelledby"?: React__default.AriaAttributes["aria-labelledby"];
-    "aria-label"?: React__default.AriaAttributes["aria-label"];
+    "aria-labelledby"?: React$1.AriaAttributes["aria-labelledby"];
+    "aria-label"?: React$1.AriaAttributes["aria-label"];
     /**
      * Sets the color scheme of the component.
      * Defaults to `"primary"`.
@@ -2645,10 +2603,10 @@ type OakRadioAsButtonProps = Omit<BaseRadioProps, "defaultChecked" | "id" | "che
 /**
  * A radio input styled as a button, to be used within `<OakRadioGroup/>`.
  */
-declare const OakRadioAsButton: (props: OakRadioAsButtonProps) => React__default.JSX.Element;
+declare const OakRadioAsButton: (props: OakRadioAsButtonProps) => React$1.JSX.Element;
 
 type OakSearchFilterCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
-    innerRef?: React__default.RefObject<HTMLInputElement>;
+    innerRef?: React$1.RefObject<HTMLInputElement>;
     displayValue: string;
     icon?: OakIconName;
     keepIconColor?: boolean;
@@ -2679,7 +2637,7 @@ type OakSearchFilterCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> &
  *  called after a mouseEnter and mouseLeave event has happened
  *
  */
-declare const OakSearchFilterCheckBox: (props: OakSearchFilterCheckBoxProps) => React__default.JSX.Element;
+declare const OakSearchFilterCheckBox: (props: OakSearchFilterCheckBoxProps) => React$1.JSX.Element;
 
 interface OakCaptionCardProps {
     captionId: string;
@@ -2691,8 +2649,8 @@ interface OakCaptionCardProps {
     checked?: boolean;
     highlighted?: boolean;
     disabled?: boolean;
-    onCheckChanged?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
-    onClick?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
+    onCheckChanged?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLDivElement>) => void;
     editHref: string;
     lessonHref: string;
     "data-testid"?: string;
@@ -2707,7 +2665,7 @@ interface OakCaptionCardProps {
  *  onCheckChanged?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  *
  */
-declare const OakCaptionCard: (props: OakCaptionCardProps) => React__default.JSX.Element;
+declare const OakCaptionCard: (props: OakCaptionCardProps) => React$1.JSX.Element;
 
 interface OakCaptionSearchProps {
     defaultValue?: string;
@@ -2729,7 +2687,7 @@ interface OakCaptionSearchProps {
      */
     isLoading?: boolean;
 }
-declare const OakCaptionSearch: ({ onSearch, hasError, errorText, isLoading, defaultValue, }: OakCaptionSearchProps) => React__default.JSX.Element;
+declare const OakCaptionSearch: ({ onSearch, hasError, errorText, isLoading, defaultValue, }: OakCaptionSearchProps) => React$1.JSX.Element;
 
 type OakFlexProps = FlexStyleProps & OakBoxProps;
 declare const oakFlexCss: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<FlexStyleProps, styled_components.DefaultTheme>>;
@@ -2741,26 +2699,7 @@ declare const oakFlexCss: styled_components.FlattenInterpolation<styled_componen
  * 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.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    $flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
-    $flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
-    $alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
-    $alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
-    $justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
-    $alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
-    $flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
-    $flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
-    $order?: ResponsiveValues<React$1.CSSProperties["order"]>;
-    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
-    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    focusable?: boolean;
-}, never>;
+declare const OakFlex: any;
 
 type OakGridProps = OakBoxProps & {
     /**
@@ -2780,73 +2719,32 @@ type OakGridProps = OakBoxProps & {
      *
      * Accepts a `grid-auto-rows` value or a responsive array of `grid-auto-rows` values.
      */
-    $gridAutoRows?: ResponsiveValues<CSSProperties["gridAutoRows"]>;
+    $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["gridTemplateAreas"]>;
+    $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["gridTemplateColumns"]>;
+    $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["gridTemplateRows"]>;
+    $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.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    /**
-     * 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["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["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["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["gridTemplateRows"]>;
-}, never>;
+declare const OakGrid: any;
 
 type ColRowSpan = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type OakGridAreaProps = {
@@ -2867,7 +2765,7 @@ type OakGridAreaProps = {
      *
      * Accepts a number or a responsive array of numbers.
      */
-    $order?: ResponsiveValues<CSSProperties["order"]>;
+    $order?: ResponsiveValues<CSSProperties$1["order"]>;
     /**
      * The start column of the element.
      *
@@ -2895,63 +2793,7 @@ type OakGridAreaProps = {
  * - 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.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    $flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
-    $flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
-    $alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
-    $alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
-    $justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
-    $alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
-    $flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
-    $flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
-    $order?: ResponsiveValues<React$1.CSSProperties["order"]>;
-    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
-    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    focusable?: boolean;
-} & {
-    /**
-     * 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["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>;
-}, never>;
+declare const OakGridArea: any;
 
 /**
  * This component will provide a default maxWidth and ph value, it take Flex props.
@@ -2960,26 +2802,7 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
  * 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.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps & {
-    $flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
-    $flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
-    $alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
-    $alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
-    $justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
-    $alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
-    $flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
-    $flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
-    $order?: ResponsiveValues<React$1.CSSProperties["order"]>;
-    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
-    $gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    $rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
-    focusable?: boolean;
-}, never>;
+declare const OakMaxWidth: any;
 
 type OakAccordionProps = {
     /**
@@ -3006,11 +2829,26 @@ type OakAccordionProps = {
      * The id of the accordion
      */
     id: string;
-};
+    /**
+     * Which side the chevron icon appears on
+     * @default "left"
+     */
+    chevronPosition?: "left" | "right";
+    /**
+     * The background color when the accordion is open
+     * @default "bg-neutral"
+     */
+    openBackground?: OakUiRoleToken;
+    /**
+     * The color of the header text and chevron icon. When set, the icon is
+     * automatically tinted to match via CSS filter so a single prop keeps both in sync.
+     */
+    $color?: OakUiRoleToken;
+} & BorderStyleProps & FlexStyleProps;
 /**
  * An accordion component that can be used to show/hide content
  */
-declare const OakAccordion: (props: OakAccordionProps) => React__default.JSX.Element;
+declare const OakAccordion: (props: OakAccordionProps) => React$1.JSX.Element;
 
 type OakBasicAccordionProps = {
     /**
@@ -3034,7 +2872,7 @@ type OakBasicAccordionProps = {
      */
     id: string;
 } & BorderStyleProps & FlexStyleProps;
-declare const OakBasicAccordion: ({ header, children, id, initialOpen, subheading, ...styleProps }: OakBasicAccordionProps) => React__default.JSX.Element;
+declare const OakBasicAccordion: ({ header, children, id, initialOpen, subheading, ...styleProps }: OakBasicAccordionProps) => React$1.JSX.Element;
 
 type OakCollapsibleContentProps = ComponentProps<typeof OakFlex> & {
     /**
@@ -3046,7 +2884,7 @@ type OakCollapsibleContentProps = ComponentProps<typeof OakFlex> & {
  * 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;
+declare const OakCollapsibleContent: ({ isOpen, children, id, ...rest }: OakCollapsibleContentProps) => React$1.JSX.Element;
 
 type OakKbdProps = {
     children: ReactNode;
@@ -3054,7 +2892,7 @@ type OakKbdProps = {
 /**
  * Represents textual user input from a keyboard, voice input, or any other text entry device.
  * */
-declare const OakKbd: ({ children }: OakKbdProps) => React__default.JSX.Element;
+declare const OakKbd: ({ children }: OakKbdProps) => React$1.JSX.Element;
 
 /**
  * This component will visually hide its contents but will still be available
@@ -3063,7 +2901,7 @@ declare const OakKbd: ({ children }: OakKbdProps) => React__default.JSX.Element;
  * Use this component in places where content shouldn't be visible, but should
  * be accessible to assistive technology.
  */
-declare const OakScreenReader: styled_components.StyledComponent<"span", styled_components.DefaultTheme, {}, never>;
+declare const OakScreenReader: any;
 
 type OakLoadingSpinnerProps = Pick<SizeStyleProps, "$width"> & ColorStyleProps & {
     loaderColor?: OakUiRoleToken;
@@ -3079,13 +2917,13 @@ type OakLoadingSpinnerProps = Pick<SizeStyleProps, "$width"> & ColorStyleProps &
  * A loading spinner of variable size.
  *
  */
-declare const OakLoadingSpinner: (props: OakLoadingSpinnerProps) => React__default.JSX.Element;
+declare const OakLoadingSpinner: (props: OakLoadingSpinnerProps) => React$1.JSX.Element;
 
 declare const oakHeadingTagsConst: readonly ["div", "h1", "h2", "h3", "h4", "h5", "h6"];
 type OakHeadingTag = (typeof oakHeadingTagsConst)[number];
 declare const oakHeadingTags: ("div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6")[];
 type OakHeadingTagProps = {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     id?: string;
     /**
      * HTML tag to be used for the heading
@@ -3104,7 +2942,7 @@ type OakHeadingProps = TypographyStyleProps & OakHeadingTagProps & ColorStylePro
  * Use the controls to view different font styles.
  *
  */
-declare const OakHeading: styled_components.StyledComponent<React__default.FC<OakHeadingTagProps>, styled_components.DefaultTheme, OakHeadingProps, never>;
+declare const OakHeading: any;
 
 type OakInlineBannerTypes = "info" | "neutral" | "success" | "alert" | "error" | "warning";
 type OakInlineBannerVariants = "regular" | "large";
@@ -3200,7 +3038,7 @@ declare const bannerVariants: OakInlineBannerVariantProps;
  * - **variant?** \-                    The variant of the inline banner to display (regular, large) (default: regular)
  * - **...rest** \-                     Other props to be passed to the wrapper OakFlex component (can be used to override styles of the banner)
  */
-declare const OakInlineBanner: ({ isOpen, title, message, type, icon, iconColorFilter, isLoading, cta, canDismiss, onDismiss, closeButtonOverrideProps, variant, titleTag, ...props }: OakInlineBannerProps) => React__default.JSX.Element;
+declare const OakInlineBanner: ({ isOpen, title, message, type, icon, iconColorFilter, isLoading, cta, canDismiss, onDismiss, closeButtonOverrideProps, variant, titleTag, ...props }: OakInlineBannerProps) => React$1.JSX.Element;
 
 type OakModalCenterProps = {
     /**
@@ -3274,7 +3112,7 @@ type OakModalCenterProps = {
  * - **backdropFlexProps?** \-      Override HTMLAttributes & OakFlex props for the backdrop container
  * - **footerSlot?** \-             Fixed area at the bottom of the modal, this will remain fixed in view if the content is scrollable
  */
-declare const OakModalCenter: ({ children, domContainer, isOpen, onClose, disableBackdropClick, disableEscapeKey, hideCloseButton, modalFlexProps, modalOuterFlexProps, modalInnerFlexProps, backdropFlexProps, footerSlot, returnFocus, }: OakModalCenterProps) => React__default.JSX.Element;
+declare const OakModalCenter: ({ children, domContainer, isOpen, onClose, disableBackdropClick, disableEscapeKey, hideCloseButton, modalFlexProps, modalOuterFlexProps, modalInnerFlexProps, backdropFlexProps, footerSlot, returnFocus, }: OakModalCenterProps) => React$1.JSX.Element;
 
 type OakModalCenterBodyProps = {
     /**
@@ -3316,7 +3154,7 @@ type OakModalCenterBodyProps = {
  * - **headingOverride** \-     Override HTMLAttributes & OakHEading props for the heading
  * - **iconOverride** \-        Override HTMLAttributes & OakIcon props for the icon
  */
-declare const OakModalCenterBody: ({ children, iconName, title, headingOverride, iconOverride, hideIcon, }: OakModalCenterBodyProps) => React__default.JSX.Element;
+declare const OakModalCenterBody: ({ children, iconName, title, headingOverride, iconOverride, hideIcon, }: OakModalCenterBodyProps) => React$1.JSX.Element;
 
 type OakTagFunctionalProps = {
     label: string;
@@ -3324,10 +3162,10 @@ type OakTagFunctionalProps = {
     isTrailingIcon?: boolean;
     useSpan?: boolean;
 } & Omit<OakFlexProps, "onClick" | "label">;
-declare const OakTagFunctional: (props: OakTagFunctionalProps) => React__default.JSX.Element;
+declare const OakTagFunctional: (props: OakTagFunctionalProps) => React$1.JSX.Element;
 
 type OakToastProps = {
-    message: React__default.ReactNode;
+    message: React$1.ReactNode;
     variant: VariantKey;
     autoDismissDuration?: number;
     autoDismiss: boolean;
@@ -3337,7 +3175,7 @@ type OakToastProps = {
     showClose?: boolean;
 };
 type VariantKey = "green" | "yellow" | "pink" | "blue" | "aqua" | "light" | "dark" | "error" | "success";
-declare const OakToast: ({ message, variant, autoDismiss, autoDismissDuration, showIcon, onClose, id, showClose, }: OakToastProps) => React__default.JSX.Element;
+declare const OakToast: ({ message, variant, autoDismiss, autoDismissDuration, showIcon, onClose, id, showClose, }: OakToastProps) => React$1.JSX.Element;
 
 type InternalTooltipProps = OakFlexProps & HTMLAttributes<Element> & {
     children?: ReactNode;
@@ -3367,7 +3205,7 @@ type OakTooltipProps = InternalTooltipProps & {
 /**
  * A tooltip with oven-ready styling and positioning.
  */
-declare const OakTooltip: ({ tooltipPosition, children, tooltip, isOpen, domContainer, ...props }: OakTooltipProps) => React__default.JSX.Element;
+declare const OakTooltip: ({ tooltipPosition, children, tooltip, isOpen, domContainer, ...props }: OakTooltipProps) => React$1.JSX.Element;
 
 type OakFocusIndicatorProps = {
     hoverBackground?: OakUiRoleToken;
@@ -3378,11 +3216,7 @@ type OakFocusIndicatorProps = {
 /**
  * Wrap focusable components `<a/>`/`<button/>` and this will add focus styles then the inner element is focused
  */
-declare const OakFocusIndicator: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
-    children?: React.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps & OakFocusIndicatorProps, never>;
+declare const OakFocusIndicator: any;
 
 type InternalStyledSvgProps = {
     $fill?: ResponsiveValues<OakUiRoleToken>;
@@ -3400,7 +3234,7 @@ type OakHandDrawnFocusUnderlineProps = {
  *
  * change the sizeProps of the flex container to change the size and dimentions of the FocusUnderline
  */
-declare const OakHandDrawnFocusUnderline: (props: OakHandDrawnFocusUnderlineProps) => React__default.JSX.Element;
+declare const OakHandDrawnFocusUnderline: (props: OakHandDrawnFocusUnderlineProps) => React$1.JSX.Element;
 
 type OakAnchorTargetProps = PaddingStyleProps;
 /**
@@ -3414,7 +3248,7 @@ type OakAnchorTargetProps = PaddingStyleProps;
  * it a unique 'id'. Then link it elsewhere using `<a href='#${id}' />`.
  *
  * */
-declare const OakAnchorTarget: styled_components.StyledComponent<"span", styled_components.DefaultTheme, PaddingStyleProps, never>;
+declare const OakAnchorTarget: any;
 
 type InternalLinkProps = {
     /**
@@ -3443,13 +3277,13 @@ type OakHoverLinkProps = Pick<InternalLinkProps, "iconName" | "isTrailingIcon" |
     iconWidth?: OakAllSpacingToken;
     iconHeight?: OakAllSpacingToken;
 };
-type OakHoverLinkComponent = <C extends React__default.ElementType = "a">(props: {
+type OakHoverLinkComponent = <C extends React$1.ElementType = "a">(props: {
     /**
      * This colours the link as disabled, but does not disable the link.
      * It should be used when the link is wrapped in an element which prevents cursor interaction, such as a card
      */
     displayDisabled?: boolean;
-} & PolymorphicPropsWithRef<C> & OakHoverLinkProps) => React__default.ReactNode;
+} & PolymorphicPropsWithRef<C> & OakHoverLinkProps) => React$1.ReactNode;
 /**
  * deprecated - use `<OakLink />` instead
  * @deprecated
@@ -3474,7 +3308,7 @@ type OakLinkProps = Pick<InternalLinkProps, "iconName" | "isTrailingIcon" | "isL
      */
     variant?: Variant;
 } & Pick<TypographyStyleProps, "$font">;
-type OakLinkComponent$1 = <C extends React__default.ElementType = "a">(props: PolymorphicPropsWithRef<C> & OakLinkProps) => React__default.ReactNode;
+type OakLinkComponent$1 = <C extends React$1.ElementType = "a">(props: PolymorphicPropsWithRef<C> & OakLinkProps) => React$1.ReactNode;
 /**
  * A link with an optional icon and loading state.
  *
@@ -3491,7 +3325,7 @@ type OakPaginationProps = {
     pageName: string;
     onPageChange: (page: number) => void;
 };
-declare const OakPagination: ({ totalPages, nextHref, prevHref, paginationHref, pageName, onPageChange, currentPage, }: OakPaginationProps) => React__default.JSX.Element | null;
+declare const OakPagination: ({ totalPages, nextHref, prevHref, paginationHref, pageName, onPageChange, currentPage, }: OakPaginationProps) => React$1.JSX.Element | null;
 
 type Url = string | UrlObject;
 type OakPrimaryNavItemProps = {
@@ -3508,7 +3342,7 @@ type OakPrimaryNavItemProps = {
  * ⚠️ To be deprecated
  * @deprecated
  */
-declare const OakPrimaryNavItem: ({ href, isCurrent, shallow, children, }: OakPrimaryNavItemProps) => React__default.JSX.Element;
+declare const OakPrimaryNavItem: ({ href, isCurrent, shallow, children, }: OakPrimaryNavItemProps) => React$1.JSX.Element;
 
 type OakPrimaryNavProps = {
     ariaLabel?: string;
@@ -3520,12 +3354,12 @@ type OakPrimaryNavProps = {
  * ⚠️ To be deprecated
  * @deprecated
  */
-declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => React__default.JSX.Element;
+declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => React$1.JSX.Element;
 
 type OakSecondaryLinkProps = {
     displayDisabled?: boolean;
 } & Pick<InternalLinkProps, "iconName" | "isTrailingIcon" | "isLoading">;
-type OakLinkComponent = <C extends React__default.ElementType = "a">(props: PolymorphicPropsWithRef<C> & OakSecondaryLinkProps) => React__default.ReactNode;
+type OakLinkComponent = <C extends React$1.ElementType = "a">(props: PolymorphicPropsWithRef<C> & OakSecondaryLinkProps) => React$1.ReactNode;
 /**
  * deprecated - use `<OakLink variant="secondary"/>` instead
  * @deprecated
@@ -3560,7 +3394,7 @@ type OakTabsProps<T extends string> = {
      */
     onTabClick?: (tab: T, event: Event) => void;
 };
-declare function OakTabs<T extends string>(props: Readonly<OakTabsProps<T>>): React__default.JSX.Element;
+declare function OakTabs<T extends string>(props: Readonly<OakTabsProps<T>>): React$1.JSX.Element;
 
 type OakCardProps = {
     /**
@@ -3628,7 +3462,7 @@ type OakCardProps = {
  * The card can be oriented in a row or column layout and its width can be adjusted using spacing tokens.
  * The image aspect ratio can be set to either 1:1 or 4:3.
  */
-declare const OakCard: ({ heading, headingLevel, href, cardOrientation, cardWidth, imageSrc, imageAlt, aspectRatio, subCopy, tagName, tagBackground, linkText, linkIconName, hoverBackground, }: OakCardProps) => React__default.JSX.Element;
+declare const OakCard: ({ heading, headingLevel, href, cardOrientation, cardWidth, imageSrc, imageAlt, aspectRatio, subCopy, tagName, tagBackground, linkText, linkIconName, hoverBackground, }: OakCardProps) => React$1.JSX.Element;
 
 type OakBreadcrumb = {
     text: string;
@@ -3646,7 +3480,7 @@ type OakBreadcrumbsProps = {
 /**
  * The breadcrumb component helps users to understand where they are within a website’s structure and move between levels.
  */
-declare const OakBreadcrumbs: ({ breadcrumbs, }: Readonly<OakBreadcrumbsProps>) => React__default.JSX.Element;
+declare const OakBreadcrumbs: ({ breadcrumbs, }: Readonly<OakBreadcrumbsProps>) => React$1.JSX.Element;
 
 type OakDownloadsAccordionProps = {
     /**
@@ -3678,22 +3512,22 @@ type OakDownloadsAccordionProps = {
  * OakDownloadsAccordion
  *
  */
-declare const OakDownloadsAccordion: ({ initialOpen, ...props }: OakDownloadsAccordionProps) => React__default.JSX.Element;
+declare const OakDownloadsAccordion: ({ initialOpen, ...props }: OakDownloadsAccordionProps) => React$1.JSX.Element;
 
 type OakInlineRegistrationBannerProps = {
     onSubmit: (email: string) => Promise<string | undefined>;
-    headerText: React__default.ReactNode;
-    bodyText: React__default.ReactNode;
+    headerText: React$1.ReactNode;
+    bodyText: React$1.ReactNode;
 } & ColorStyleProps & BorderStyleProps;
-declare const OakInlineRegistrationBanner: (props: OakInlineRegistrationBannerProps) => React__default.JSX.Element;
+declare const OakInlineRegistrationBanner: (props: OakInlineRegistrationBannerProps) => React$1.JSX.Element;
 
 type OakTeacherNotesInlineProps = {
     sanitizedHtml?: string | TrustedHTML;
 };
-declare const OakTeacherNotesInline: ({ sanitizedHtml, }: OakTeacherNotesInlineProps) => React__default.JSX.Element;
+declare const OakTeacherNotesInline: ({ sanitizedHtml, }: OakTeacherNotesInlineProps) => React$1.JSX.Element;
 
 type EditorContainerProps = {
-    editorNode: React__default.ReactNode;
+    editorNode: React$1.ReactNode;
     onBoldClick: () => void;
     onBulletListClick: () => void;
     isBold: boolean;
@@ -3709,9 +3543,9 @@ type OakTeacherNotesModalProps = {
     error?: boolean;
     termsAndConditionsHref: string;
     shareLinkDisabled?: boolean;
-    footer?: React__default.ReactNode;
+    footer?: React$1.ReactNode;
 } & EditorContainerProps;
-declare const OakTeacherNotesModal: ({ isOpen, onClose, onShareClicked, progressSaved, noteShared, error, termsAndConditionsHref, shareLinkDisabled, footer, ...rest }: OakTeacherNotesModalProps) => React__default.JSX.Element;
+declare const OakTeacherNotesModal: ({ isOpen, onClose, onShareClicked, progressSaved, noteShared, error, termsAndConditionsHref, shareLinkDisabled, footer, ...rest }: OakTeacherNotesModalProps) => React$1.JSX.Element;
 
 type OakTertiaryOLNavProps = {
     title?: string;
@@ -3721,9 +3555,9 @@ type OakTertiaryOLNavProps = {
     }[];
     ariaLabel?: string;
     anchorTarget?: string;
-    onClick?: (event: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 };
-declare const OakTertiaryOLNav: ({ items, ariaLabel, title, anchorTarget, onClick, ...rest }: OakTertiaryOLNavProps) => React__default.JSX.Element;
+declare const OakTertiaryOLNav: ({ items, ariaLabel, title, anchorTarget, onClick, ...rest }: OakTertiaryOLNavProps) => React$1.JSX.Element;
 
 type OakUnitListItemProps<element extends ElementType> = {
     unavailable?: boolean;
@@ -3734,7 +3568,7 @@ type OakUnitListItemProps<element extends ElementType> = {
     isLegacy: boolean;
     href: string;
     firstItemRef?: MutableRefObject<HTMLAnchorElement | null> | null | undefined;
-    onClick?: (event: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     onSave?: () => void;
     isSaved?: boolean;
     isSaving?: boolean;
@@ -3745,7 +3579,7 @@ type OakUnitListItemProps<element extends ElementType> = {
  *
  * OakUnitsListItem component used as links for unit cards
  */
-declare const OakUnitListItem: <element extends ElementType = "a">(props: OakUnitListItemProps<element>) => React__default.JSX.Element;
+declare const OakUnitListItem: <element extends ElementType = "a">(props: OakUnitListItemProps<element>) => React$1.JSX.Element;
 
 type OakUnitListOptionalityItemProps = {
     unavailable?: boolean;
@@ -3761,7 +3595,7 @@ type OakUnitListOptionalityItemProps = {
         slug: string;
         href: string;
         lessonCount: string;
-        onClick?: (event: React__default.MouseEvent<HTMLElement, MouseEvent>) => void;
+        onClick?: (event: React$1.MouseEvent<HTMLElement, MouseEvent>) => void;
         firstItemRef?: MutableRefObject<HTMLAnchorElement | null> | null | undefined;
     }[];
 };
@@ -3769,7 +3603,7 @@ type OakUnitListOptionalityItemProps = {
  *
  * OakUnitsListOptionalityItem component used as links for unit cards with optionality
  */
-declare const OakUnitListOptionalityItem: (props: OakUnitListOptionalityItemProps) => React__default.JSX.Element;
+declare const OakUnitListOptionalityItem: (props: OakUnitListOptionalityItemProps) => React$1.JSX.Element;
 
 type OakUnitListOptionalityItemCardProps = {
     unavailable?: boolean;
@@ -3778,7 +3612,7 @@ type OakUnitListOptionalityItemCardProps = {
     href: string;
     slug: string;
     firstItemRef?: MutableRefObject<HTMLAnchorElement | null> | null | undefined;
-    onClick?: (event: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
     onSave?: (unitSlug: string) => void;
     isSaved?: boolean;
     isSaving?: boolean;
@@ -3787,7 +3621,7 @@ type OakUnitListOptionalityItemCardProps = {
  *
  * OakUnitsListItem component used as links for unit cards
  */
-declare const OakUnitListOptionalityItemCard: (props: OakUnitListOptionalityItemCardProps) => React__default.JSX.Element;
+declare const OakUnitListOptionalityItemCard: (props: OakUnitListOptionalityItemCardProps) => React$1.JSX.Element;
 
 type OakPupilContentGuidance = {
     contentguidanceLabel: string | null;
@@ -3847,7 +3681,7 @@ declare const removedGuidanceDuplicates: (contentGuidance?: OakPupilContentGuida
  * - **declineText** \-             The text to be displayed on the decline button
  * - **declineIcon** \-             The icon to be displayed on the decline button
  */
-declare const OakPupilJourneyContentGuidance: ({ isOpen, onAccept, onDecline, title, contentGuidance, supervisionLevel, acceptText, declineText, declineIcon, }: OakPupilJourneyContentGuidanceProps) => React__default.JSX.Element;
+declare const OakPupilJourneyContentGuidance: ({ isOpen, onAccept, onDecline, title, contentGuidance, supervisionLevel, acceptText, declineText, declineIcon, }: OakPupilJourneyContentGuidanceProps) => React$1.JSX.Element;
 
 type OakSpanProps = ColorStyleProps & OpacityStyleProps & MarginStyleProps & PaddingStyleProps & BorderStyleProps & TypographyStyleProps & PositionStyleProps;
 /**
@@ -3855,7 +3689,7 @@ type OakSpanProps = ColorStyleProps & OpacityStyleProps & MarginStyleProps & Pad
  * ## 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, OakSpanProps, never>;
+declare const OakSpan: any;
 
 type OakBulletListProps = {
     listItems: string[];
@@ -3863,7 +3697,7 @@ type OakBulletListProps = {
 /**
  * An inline bulleted list
  */
-declare const OakBulletList: (props: OakBulletListProps) => React__default.JSX.Element;
+declare const OakBulletList: (props: OakBulletListProps) => React$1.JSX.Element;
 
 type OakPupilJourneyHeaderProps = {
     title: string;
@@ -3880,7 +3714,7 @@ type OakPupilJourneyHeaderProps = {
  *
  *
  */
-declare const OakPupilJourneyHeader: ({ iconBackground, title, iconName, alt, breadcrumbs, optionalityTitle, }: OakPupilJourneyHeaderProps) => React__default.JSX.Element;
+declare const OakPupilJourneyHeader: ({ iconBackground, title, iconName, alt, breadcrumbs, optionalityTitle, }: OakPupilJourneyHeaderProps) => React$1.JSX.Element;
 
 type PupilJourneySectionName = "tier-listing" | "examboard-listing" | "unit-listing" | "lesson-listing" | "subject-listing" | "year-listing";
 type Phase$1 = "primary" | "secondary";
@@ -3897,15 +3731,15 @@ type OakPupilJourneyLayoutProps = {
  *
  * the sections of the page are passed in as props and children
  */
-declare const OakPupilJourneyLayout: ({ sectionName, topNavSlot, phase, children, }: OakPupilJourneyLayoutProps) => React__default.JSX.Element;
+declare const OakPupilJourneyLayout: ({ sectionName, topNavSlot, phase, children, }: OakPupilJourneyLayoutProps) => React$1.JSX.Element;
 declare function getBackgroundUrlForSection(sectionName: PupilJourneySectionName, phase?: Phase$1): string;
 
 type OakPupilJourneyListProps = {
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     phase: "primary" | "secondary";
-    titleSlot?: React__default.ReactNode;
-    filterSlot?: React__default.ReactNode;
-    subheadingSlot: React__default.ReactNode;
+    titleSlot?: React$1.ReactNode;
+    filterSlot?: React$1.ReactNode;
+    subheadingSlot: React$1.ReactNode;
 };
 /**
  *
@@ -3913,14 +3747,14 @@ type OakPupilJourneyListProps = {
  *
  *
  */
-declare const OakPupilJourneyList: ({ children, phase, titleSlot, subheadingSlot, filterSlot, }: OakPupilJourneyListProps) => React__default.JSX.Element;
+declare const OakPupilJourneyList: ({ children, phase, titleSlot, subheadingSlot, filterSlot, }: OakPupilJourneyListProps) => React$1.JSX.Element;
 
 type OakPupilJourneyListCounterProps = {
     count: number;
     countHeader: string;
     tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 };
-declare const OakPupilJourneyListCounter: (props: OakPupilJourneyListCounterProps) => React__default.JSX.Element;
+declare const OakPupilJourneyListCounter: (props: OakPupilJourneyListCounterProps) => React$1.JSX.Element;
 
 type OakPupilJourneyListItemProps<C extends ElementType> = {
     as?: C;
@@ -3939,10 +3773,10 @@ type OakPupilJourneyListItemProps<C extends ElementType> = {
 /**
  * Enables navigation to the given section of a lesson as well as displaying current progress
  */
-declare const OakPupilJourneyListItem: <C extends ElementType = "a">(props: OakPupilJourneyListItemProps<C>) => React__default.JSX.Element;
+declare const OakPupilJourneyListItem: <C extends ElementType = "a">(props: OakPupilJourneyListItemProps<C>) => React$1.JSX.Element;
 
 type OakPupilJourneyListItemSubheadingProps = {
-    textSlot?: React__default.ReactNode;
+    textSlot?: React$1.ReactNode;
 } & OakBulletListProps;
 /**
  * This component displays a heading for the previous lessons
@@ -3952,7 +3786,7 @@ type OakPupilJourneyListItemSubheadingProps = {
  * textSlot? - Can pass if any react node, but <OakPupilJourneyListCounter /> is recommended
  *
  */
-declare const OakPupilJourneyListItemSubheading: (props: OakPupilJourneyListItemSubheadingProps) => React__default.JSX.Element;
+declare const OakPupilJourneyListItemSubheading: (props: OakPupilJourneyListItemSubheadingProps) => React$1.JSX.Element;
 
 type OakPupilJourneyOptionalityButtonProps<C extends ElementType> = {
     /**
@@ -3969,10 +3803,10 @@ type OakPupilJourneyOptionalityButtonProps<C extends ElementType> = {
 /**
  * Button for units with optionality it is only used as the child of the PupilJourneyOptionailityitem component
  */
-declare const OakPupilJourneyOptionalityButton: <C extends ElementType = "a">(props: OakPupilJourneyOptionalityButtonProps<C>) => React__default.JSX.Element;
+declare const OakPupilJourneyOptionalityButton: <C extends ElementType = "a">(props: OakPupilJourneyOptionalityButtonProps<C>) => React$1.JSX.Element;
 
 type OakPupilJourneyOptionalityItemProps = {
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     index: number;
     title: string;
     unavailable?: boolean;
@@ -3983,13 +3817,13 @@ type OakPupilJourneyOptionalityItemProps = {
  * OakPupilJourneyOptionalityItem is a styled container to be used for units with optionality, OakPupilJourneyOptionalityButton should be used as children
  *
  */
-declare const OakPupilJourneyOptionalityItem: (props: OakPupilJourneyOptionalityItemProps) => React__default.JSX.Element;
+declare const OakPupilJourneyOptionalityItem: (props: OakPupilJourneyOptionalityItemProps) => React$1.JSX.Element;
 
 type OakPupilJourneyProgrammeOptionsProps = {
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
     phase: "primary" | "secondary";
-    titleSlot?: React__default.ReactNode;
-    optionTitleSlot: React__default.ReactNode;
+    titleSlot?: React$1.ReactNode;
+    optionTitleSlot: React$1.ReactNode;
 };
 /**
  *
@@ -3997,7 +3831,7 @@ type OakPupilJourneyProgrammeOptionsProps = {
  *
  *
  */
-declare const OakPupilJourneyProgrammeOptions: ({ children, phase, titleSlot, optionTitleSlot, }: OakPupilJourneyProgrammeOptionsProps) => React__default.JSX.Element;
+declare const OakPupilJourneyProgrammeOptions: ({ children, phase, titleSlot, optionTitleSlot, }: OakPupilJourneyProgrammeOptionsProps) => React$1.JSX.Element;
 
 type MenuItem = {
     displayText: string;
@@ -4019,7 +3853,7 @@ type OakPupilJourneyUnitsFilterProps = {
  * onSelected: Callback when a menu item is selected, takes the selected item as an argument
  *
  */
-declare const OakPupilJourneyUnitsFilter: (props: OakPupilJourneyUnitsFilterProps) => React__default.JSX.Element;
+declare const OakPupilJourneyUnitsFilter: (props: OakPupilJourneyUnitsFilterProps) => React$1.JSX.Element;
 
 type OakPupilJourneyYearButtonProps = {
     phase: "primary" | "secondary";
@@ -4038,7 +3872,7 @@ type OakPupilJourneyYearButtonProps = {
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakPupilJourneyYearButton: <C extends ElementType = "button">({ phase, element, ...rest }: OakPupilJourneyYearButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakPupilJourneyYearButton: <C extends ElementType = "button">({ phase, element, ...rest }: OakPupilJourneyYearButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakQuizHintProps = {
     /**
@@ -4053,7 +3887,7 @@ type OakQuizHintProps = {
 /**
  * Presents a button which will show a hint when clicked
  */
-declare const OakQuizHint: ({ hint, id, hintToggled }: OakQuizHintProps) => React__default.JSX.Element;
+declare const OakQuizHint: ({ hint, id, hintToggled }: OakQuizHintProps) => React$1.JSX.Element;
 
 type OakQuizFeedbackProps = {
     /**
@@ -4073,7 +3907,7 @@ type OakQuizFeedbackProps = {
 /**
  * Gives feedback after a question has been answered
  */
-declare const OakQuizFeedback: ({ feedback, answerFeedback, }: OakQuizFeedbackProps) => React__default.JSX.Element;
+declare const OakQuizFeedback: ({ feedback, answerFeedback, }: OakQuizFeedbackProps) => React$1.JSX.Element;
 
 type OakLessonBottomNavProps = {
     children?: ReactNode;
@@ -4087,7 +3921,7 @@ type OakLessonBottomNavProps = {
 /**
  * Renders feedback for an answer and onward navigation buttons to continue the lesson
  */
-declare const OakLessonBottomNav: ({ hint, hintToggled, feedback, answerFeedback, children, }: OakLessonBottomNavProps) => React__default.JSX.Element;
+declare const OakLessonBottomNav: ({ hint, hintToggled, feedback, answerFeedback, children, }: OakLessonBottomNavProps) => React$1.JSX.Element;
 
 declare const lessonSectionNames: string[];
 type LessonSectionName$1 = (typeof lessonSectionNames)[number];
@@ -4103,7 +3937,7 @@ type OakLessonLayoutProps = {
 /**
  * Provides overall page layout and colours for the sections of a lesson.
  */
-declare const OakLessonLayout: ({ lessonSectionName, phase, celebrate, topNavSlot, bottomNavSlot, children, }: OakLessonLayoutProps) => React__default.JSX.Element;
+declare const OakLessonLayout: ({ lessonSectionName, phase, celebrate, topNavSlot, bottomNavSlot, children, }: OakLessonLayoutProps) => React$1.JSX.Element;
 
 type BaseOakLessonNavItemProps<C extends ElementType> = {
     as?: C;
@@ -4143,7 +3977,7 @@ type OakLessonNavItemProps<C extends ElementType> = BaseOakLessonNavItemProps<C>
 /**
  * Enables navigation to the given section of a lesson as well as displaying current progress
  */
-declare const OakLessonNavItem: <C extends ElementType = "a">(props: OakLessonNavItemProps<C>) => React__default.JSX.Element;
+declare const OakLessonNavItem: <C extends ElementType = "a">(props: OakLessonNavItemProps<C>) => React$1.JSX.Element;
 
 type LessonSectionName = "intro" | "video";
 type BaseOakLessonReviewItemProps$1 = {
@@ -4158,7 +3992,7 @@ type IntroSectionProps$1 = {
 type OakLessonReviewIntroVideoProps = BaseOakLessonReviewItemProps$1 & {
     lessonSectionName: LessonSectionName;
 } & (IntroSectionProps$1 | VideoSectionProps$1);
-declare const OakLessonReviewIntroVideo: (props: OakLessonReviewIntroVideoProps) => React__default.JSX.Element;
+declare const OakLessonReviewIntroVideo: (props: OakLessonReviewIntroVideoProps) => React$1.JSX.Element;
 
 type BaseOakLessonReviewItemProps = {
     completed: boolean;
@@ -4181,7 +4015,7 @@ type IntroSectionProps = {
     lessonSectionName: "intro";
 };
 type OakLessonReviewItemProps = BaseOakLessonReviewItemProps & (IntroSectionProps | QuizSectionProps | VideoSectionProps);
-declare const OakLessonReviewItem: (props: OakLessonReviewItemProps) => React__default.JSX.Element;
+declare const OakLessonReviewItem: (props: OakLessonReviewItemProps) => React$1.JSX.Element;
 
 type LessonQuizName = "starter-quiz" | "exit-quiz";
 type OakLessonReviewQuizProps = {
@@ -4198,21 +4032,21 @@ type OakLessonReviewQuizProps = {
     /**
      * You MUST use the OakLessonExpandableReviewItem as the container component for this slot
      */
-    resultsSlot?: React__default.ReactNode;
+    resultsSlot?: React$1.ReactNode;
 };
 type OakLessonReviewItemContainerProps = {
     $background?: OakUiRoleToken;
     $borderColor?: OakUiRoleToken;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
 };
-declare const ReviewItemContainer: (props: OakLessonReviewItemContainerProps) => React__default.JSX.Element;
+declare const ReviewItemContainer: (props: OakLessonReviewItemContainerProps) => React$1.JSX.Element;
 type ReviewItemTitleSectionProps = {
     sectionHeader: string;
     completed: boolean;
     summaryForIncomplete: ReactNode;
 };
-declare const ReviewItemTitleSection: (props: ReviewItemTitleSectionProps) => React__default.JSX.Element;
-declare const OakLessonReviewQuiz: (props: OakLessonReviewQuizProps) => React__default.JSX.Element;
+declare const ReviewItemTitleSection: (props: ReviewItemTitleSectionProps) => React$1.JSX.Element;
+declare const OakLessonReviewQuiz: (props: OakLessonReviewQuizProps) => React$1.JSX.Element;
 
 type LessonTopNavSectionName = Omit<LessonSectionName$1, "overview" | "review">;
 type OakLessonTopNavProps = {
@@ -4235,7 +4069,7 @@ type OakLessonTopNavProps = {
 /**
  * Controls for navigating back and displaying progress in a lesson
  */
-declare const OakLessonTopNav: ({ lessonSectionName, backLinkSlot, counterSlot, heading, mobileSummary, }: OakLessonTopNavProps) => React__default.JSX.Element;
+declare const OakLessonTopNav: ({ lessonSectionName, backLinkSlot, counterSlot, heading, mobileSummary, }: OakLessonTopNavProps) => React$1.JSX.Element;
 
 type OakLessonVideoTranscriptProps = {
     /**
@@ -4257,7 +4091,7 @@ type OakLessonVideoTranscriptProps = {
 /**
  * Display a togglable video transcript with a slot to display a sign language control
  */
-declare const OakLessonVideoTranscript: ({ children, id, signLanguageControl, transcriptToggled, }: OakLessonVideoTranscriptProps) => React__default.JSX.Element;
+declare const OakLessonVideoTranscript: ({ children, id, signLanguageControl, transcriptToggled, }: OakLessonVideoTranscriptProps) => React$1.JSX.Element;
 
 type OakHintButtonProps = {
     isOpen: boolean;
@@ -4279,13 +4113,13 @@ type OakHintButtonProps = {
  *  `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;
+declare const OakHintButton: (props: OakHintButtonProps) => React$1.JSX.Element;
 
 type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
     feedback?: "correct" | "incorrect" | null;
-    image?: React__default.JSX.Element;
-    innerRef?: React__default.RefObject<HTMLInputElement>;
-    displayValue?: string | React__default.JSX.Element;
+    image?: React$1.JSX.Element;
+    innerRef?: React$1.RefObject<HTMLInputElement>;
+    displayValue?: string | React$1.JSX.Element;
     /**
      * Give the field a highlight to draw attention to it
      */
@@ -4294,7 +4128,7 @@ type OakQuizCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
 /**
  * A checkbox representing the options in a multiple choice question.
  */
-declare const OakQuizCheckBox: (props: OakQuizCheckBoxProps) => React__default.JSX.Element;
+declare const OakQuizCheckBox: (props: OakQuizCheckBoxProps) => React$1.JSX.Element;
 
 type OakQuizCounterProps = {
     counter: number;
@@ -4303,7 +4137,7 @@ type OakQuizCounterProps = {
 /**
  * A counter representing progress through the questions in a quiz
  */
-declare const OakQuizCounter: (props: OakQuizCounterProps) => React__default.JSX.Element;
+declare const OakQuizCounter: (props: OakQuizCounterProps) => React$1.JSX.Element;
 
 declare const OakQuizMatchItemId: (id: string) => string;
 type DraggableItem = {
@@ -4348,7 +4182,7 @@ type OakQuizMatchProps = {
  *
  * Keyboard navigation is supported with the `tab`, `space` and `arrow` keys
  */
-declare const OakQuizMatch: ({ initialOptions, initialSlots, isHighlighted, onChange, }: OakQuizMatchProps) => React__default.JSX.Element;
+declare const OakQuizMatch: ({ initialOptions, initialSlots, isHighlighted, onChange, }: OakQuizMatchProps) => React$1.JSX.Element;
 declare const announcements: Announcements;
 
 type OakQuizOrderItem = {
@@ -4378,7 +4212,7 @@ type OakQuizOrderProps = {
  *
  * Keyboard navigation is supported with the `tab`, `space` and `arrow` keys
  */
-declare const OakQuizOrder: ({ initialItems, announcements, onChange, isHighlighted, }: OakQuizOrderProps) => React__default.JSX.Element;
+declare const OakQuizOrder: ({ initialItems, announcements, onChange, isHighlighted, }: OakQuizOrderProps) => React$1.JSX.Element;
 
 type OakQuizPrintableHeaderProps = {
     title: string;
@@ -4396,7 +4230,7 @@ type OakQuizPrintableHeaderProps = {
  *
  *
  */
-declare const OakQuizPrintableHeader: ({ title, iconName, alt, breadcrumbs, worksheetDownloaded, workSheetAvailable, videoPercentage, }: OakQuizPrintableHeaderProps) => React__default.JSX.Element;
+declare const OakQuizPrintableHeader: ({ title, iconName, alt, breadcrumbs, worksheetDownloaded, workSheetAvailable, videoPercentage, }: OakQuizPrintableHeaderProps) => React$1.JSX.Element;
 
 type OakQuizPrintableSubHeaderProps = {
     title: string;
@@ -4410,7 +4244,7 @@ type OakQuizPrintableSubHeaderProps = {
  *
  *
  */
-declare const OakQuizPrintableSubHeader: ({ title, grade, numQuestions, attempts, }: OakQuizPrintableSubHeaderProps) => React__default.JSX.Element;
+declare const OakQuizPrintableSubHeader: ({ title, grade, numQuestions, attempts, }: OakQuizPrintableSubHeaderProps) => React$1.JSX.Element;
 
 type OakQuizRadioButtonProps = OakRadioButtonProps & {
     /**
@@ -4431,7 +4265,7 @@ type OakQuizRadioButtonProps = OakRadioButtonProps & {
  *
  * Use with `OakRadioGroup` to create a group of radio buttons.
  */
-declare const OakQuizRadioButton: (props: OakQuizRadioButtonProps) => React__default.JSX.Element;
+declare const OakQuizRadioButton: (props: OakQuizRadioButtonProps) => React$1.JSX.Element;
 
 type InternalQuizResultItemProps = {
     feedbackState?: "correct" | "incorrect" | null;
@@ -4450,7 +4284,7 @@ type InternalQuizResultItemProps = {
  *
  * NB. We must export a styled component for it to be inheritable
  */
-declare const OakQuizResultItem: ({ standardText, boldPrefixText, feedbackState, imageURL, imageAlt, }: InternalQuizResultItemProps) => React__default.JSX.Element;
+declare const OakQuizResultItem: ({ standardText, boldPrefixText, feedbackState, imageURL, imageAlt, }: InternalQuizResultItemProps) => React$1.JSX.Element;
 
 type OakQuizTextInputProps = Omit<OakTextInputProps, "validity" | "iconName" | "iconAlt" | "isTrailingIcon"> & {
     /**
@@ -4462,7 +4296,7 @@ type OakQuizTextInputProps = Omit<OakTextInputProps, "validity" | "iconName" | "
 /**
  * A text input for a free-text question in a quiz
  */
-declare const OakQuizTextInput: ({ feedback, readOnly, ...props }: OakQuizTextInputProps) => React__default.JSX.Element;
+declare const OakQuizTextInput: ({ feedback, readOnly, ...props }: OakQuizTextInputProps) => React$1.JSX.Element;
 
 type OakBackLinkProps<C extends ElementType> = {
     as?: C;
@@ -4479,7 +4313,7 @@ type OakBackLinkProps<C extends ElementType> = {
  * * Button `<OakBackLink as="button" onClick={() => goBack(-1)} />`
  *
  */
-declare const OakBackLink: <C extends ElementType = "a">({ as, label, ...props }: OakBackLinkProps<C>) => React__default.JSX.Element;
+declare const OakBackLink: <C extends ElementType = "a">({ as, label, ...props }: OakBackLinkProps<C>) => React$1.JSX.Element;
 
 type InternalCardProps = OakFlexProps;
 
@@ -4497,7 +4331,7 @@ type OakCardWithHandDrawnBorderProps = Omit<InternalCardWithBackgroundElementPro
  *
  * An optional `stroke` and `fill` can be applied to change the color of the border
  */
-declare const OakCardWithHandDrawnBorder: ({ $pa, fill, stroke, $width, ...props }: OakCardWithHandDrawnBorderProps) => React__default.JSX.Element;
+declare const OakCardWithHandDrawnBorder: ({ $pa, fill, stroke, $width, ...props }: OakCardWithHandDrawnBorderProps) => React$1.JSX.Element;
 
 type OakCopyLinkButtonProps = {
     /**
@@ -4508,21 +4342,21 @@ type OakCopyLinkButtonProps = {
 /**
  * Display copy link button
  */
-declare const OakCopyLinkButton: ({ href }: OakCopyLinkButtonProps) => React__default.JSX.Element;
+declare const OakCopyLinkButton: ({ href }: OakCopyLinkButtonProps) => React$1.JSX.Element;
 
 type OakDownloadCardProps = BaseCheckBoxProps & {
     /**
      * The primary title content for the download.
      */
-    title: React__default.ReactNode;
+    title: React$1.ReactNode;
     /**
      * Optional file size content shown beneath the title.
      */
-    fileSize?: React__default.ReactNode;
+    fileSize?: React$1.ReactNode;
     /**
      * The file format or secondary metadata shown beneath the title.
      */
-    format: React__default.ReactNode;
+    format: React$1.ReactNode;
     /**
      * The icon used to represent the download type.
      */
@@ -4541,12 +4375,12 @@ type OakDownloadCardProps = BaseCheckBoxProps & {
  * such as lesson plans, slide decks, or worksheets.
  * Design document: <https://www.figma.com/design/YcWQMMhHPVVmc47cHHEEAl/Oak-Design-Kit?node-id=14795-5603>
  */
-declare const OakDownloadCard: (props: OakDownloadCardProps) => React__default.JSX.Element;
+declare const OakDownloadCard: (props: OakDownloadCardProps) => React$1.JSX.Element;
 
 /**
  * Displays instructions for drag and drop functionality
  */
-declare const OakDragAndDropInstructions: (props: ComponentPropsWithoutRef<typeof OakFlex>) => React__default.JSX.Element;
+declare const OakDragAndDropInstructions: (props: ComponentPropsWithoutRef<typeof OakFlex>) => React$1.JSX.Element;
 
 type OakDraggableProps = {
     /**
@@ -4599,7 +4433,7 @@ type OakDraggableFeedbackProps = ComponentPropsWithoutRef<typeof OakDraggable> &
 /**
  * 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;
+declare const OakDraggableFeedback: ({ feedback, ...props }: OakDraggableFeedbackProps) => React$1.JSX.Element;
 
 type OakDroppableProps = {
     /**
@@ -4687,7 +4521,7 @@ type OakFilterDrawerProps = {
  * clearAllInputs: used to clear filter options
  *
  */
-declare const OakFilterDrawer: ({ isOpen, domContainer, onClose, zIndex, children, clearAllInputs, footerSlot, ...rest }: OakFilterDrawerProps) => React__default.ReactPortal | null;
+declare const OakFilterDrawer: ({ isOpen, domContainer, onClose, zIndex, children, clearAllInputs, footerSlot, ...rest }: OakFilterDrawerProps) => React$1.ReactPortal | null;
 
 interface OakFormInputWithLabelsProps {
     /**
@@ -4730,17 +4564,17 @@ interface OakFormInputWithLabelsProps {
     /**
      * Callback function that is called when the input value changes.
      */
-    onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
+    onChange?: React$1.ChangeEventHandler<HTMLInputElement>;
     /**
      * Callback function that is called when the input is focused initially.
      */
-    onInitialFocus?: React__default.FocusEventHandler<HTMLInputElement>;
+    onInitialFocus?: React$1.FocusEventHandler<HTMLInputElement>;
     /**
      * Callback function that is called when the input loses focus.
      */
-    onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
 }
-declare const OakFormInputWithLabels: ({ label, helperText, placeholder, invalid, invalidText, value, inputName, disabled, required, defaultValue, onChange, onInitialFocus, onBlur, }: OakFormInputWithLabelsProps) => React__default.JSX.Element;
+declare const OakFormInputWithLabels: ({ label, helperText, placeholder, invalid, invalidText, value, inputName, disabled, required, defaultValue, onChange, onInitialFocus, onBlur, }: OakFormInputWithLabelsProps) => React$1.JSX.Element;
 
 type OakHandDrawnCardProps = Omit<InternalCardWithBackgroundElementProps, "backgroundElement"> & {
     fill?: InternalStyledSvgProps["$fill"];
@@ -4752,7 +4586,7 @@ type OakHandDrawnCardProps = Omit<InternalCardWithBackgroundElementProps, "backg
  *
  * 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;
+declare const OakHandDrawnCard: ({ $pa, fill, stroke, strokeWidth, $width, ...props }: OakHandDrawnCardProps) => React$1.JSX.Element;
 
 type OakHandDrawnBoxWithIconProps = Omit<OakHandDrawnCardProps, "children"> & {
     iconName: OakIconProps["iconName"];
@@ -4764,7 +4598,7 @@ type OakHandDrawnBoxWithIconProps = Omit<OakHandDrawnCardProps, "children"> & {
 /**
  * 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;
+declare const OakHandDrawnCardWithIcon: ({ iconName, iconColor, iconWidth, iconHeight, alt, $width, $height, $alignItems, $justifyContent, ...props }: OakHandDrawnBoxWithIconProps) => React$1.JSX.Element;
 
 type OakHandDrawnHRProps = {
     hrColor?: InternalStyledSvgProps["$fill"];
@@ -4776,7 +4610,7 @@ type OakHandDrawnHRProps = {
  *
  * change the sizeProps of the flex container to change the size and dimentions of the HR
  */
-declare const OakHandDrawnHR: (props: OakHandDrawnHRProps) => React__default.JSX.Element;
+declare const OakHandDrawnHR: (props: OakHandDrawnHRProps) => React$1.JSX.Element;
 
 type OakInfoButtonProps = {
     onClick: MouseEventHandler;
@@ -4791,24 +4625,24 @@ type OakInfoButtonProps = {
  * onClick: MouseEventHandler
  *
  */
-declare const OakInfoButton: (props: OakInfoButtonProps) => React__default.JSX.Element;
+declare const OakInfoButton: (props: OakInfoButtonProps) => React$1.JSX.Element;
 
 type OakInfoCardProps = {
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
 };
 type OakCardHeaderprops = {
     iconName: OakIconName;
     tag: OakHeadingTag;
     children: string;
 };
-declare const OakCardHeader: (props: OakCardHeaderprops) => React__default.JSX.Element;
+declare const OakCardHeader: (props: OakCardHeaderprops) => React$1.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;
+declare const OakLessonInfoCard: (props: OakInfoCardProps) => React$1.JSX.Element;
+declare const OakStaticMessageCard: (props: OakInfoCardProps) => React$1.JSX.Element;
 
 type OakLinkCardProps = {
     /**
@@ -4864,7 +4698,7 @@ type OakLinkCardProps = {
  * - **showNew** - Whether to display the "New" promo tag
  * - **narrow** - Whether to display the card in a narrow layout
  */
-declare const OakLinkCard: ({ mainSection, iconName, iconAlt, iconColor, iconFill, href, showNew, hasAnimation, narrow, }: OakLinkCardProps) => React__default.JSX.Element;
+declare const OakLinkCard: ({ mainSection, iconName, iconAlt, iconColor, iconFill, href, showNew, hasAnimation, narrow, }: OakLinkCardProps) => React$1.JSX.Element;
 
 type OakSolidBorderAccordionProps = {
     /**
@@ -4887,7 +4721,7 @@ type OakSolidBorderAccordionProps = {
 /**
  * An accordion component that can be used to show/hide content
  */
-declare const OakMediaClipListAccordion: ({ header, children, id, initialOpen, ...styleProps }: OakSolidBorderAccordionProps) => React__default.JSX.Element;
+declare const OakMediaClipListAccordion: ({ header, children, id, initialOpen, ...styleProps }: OakSolidBorderAccordionProps) => React$1.JSX.Element;
 
 type OakOutlineAccordionProps = {
     /**
@@ -4910,7 +4744,7 @@ type OakOutlineAccordionProps = {
 /**
  * An accordion component that can be used to show/hide content
  */
-declare const OakOutlineAccordion: ({ header, children, id, initialOpen, ...styleProps }: OakOutlineAccordionProps) => React__default.JSX.Element;
+declare const OakOutlineAccordion: ({ header, children, id, initialOpen, ...styleProps }: OakOutlineAccordionProps) => React$1.JSX.Element;
 
 type OakPromoTagProps = {
     width?: SizeStyleProps["$width"];
@@ -4919,7 +4753,7 @@ type OakPromoTagProps = {
 /**
  * Renders a tag with the text "New"
  */
-declare const OakPromoTag: (props: OakPromoTagProps) => React__default.JSX.Element;
+declare const OakPromoTag: (props: OakPromoTagProps) => React$1.JSX.Element;
 
 type TileItem = {
     id: string;
@@ -4932,7 +4766,7 @@ type OakRadioTileProps = {
     id: string;
     onChange: (tileItem: TileItem) => void;
 };
-declare const OakRadioTile: styled_components.StyledComponent<(props: OakRadioTileProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
+declare const OakRadioTile: any;
 
 type OakSaveButtonProps = {
     isSaved: boolean;
@@ -4942,7 +4776,7 @@ type OakSaveButtonProps = {
     saveButtonId?: string;
     title: string;
 };
-declare const OakSaveButton: (props: OakSaveButtonProps) => React__default.JSX.Element;
+declare const OakSaveButton: (props: OakSaveButtonProps) => React$1.JSX.Element;
 
 type OakSaveCountProps = {
     /**
@@ -4958,10 +4792,10 @@ type OakSaveCountProps = {
     href: string;
     loading: boolean;
 };
-declare const OakSaveCount: ({ count, href, loading, label, }: OakSaveCountProps) => React__default.JSX.Element;
+declare const OakSaveCount: ({ count, href, loading, label, }: OakSaveCountProps) => React$1.JSX.Element;
 
 type OakScaleImageButtonProps = Omit<InternalShadowRectButtonProps, "defaultTextColor" | "hoverTextColor" | "disabledTextColor" | "defaultBackground" | "defaultBorderColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "iconGap" | "pv" | "ph" | "$bblr" | "$btlr" | "width" | "onClick"> & {
-    onImageScaleCallback: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    onImageScaleCallback: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     isExpanded: boolean;
 };
 /**
@@ -4974,24 +4808,24 @@ type OakScaleImageButtonProps = Omit<InternalShadowRectButtonProps, "defaultText
  * `onImageScaleCallback: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
  *ą
  */
-declare const OakScaleImageButton: <C extends ElementType = "button">({ onImageScaleCallback, isExpanded, }: OakScaleImageButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakScaleImageButton: <C extends ElementType = "button">({ onImageScaleCallback, isExpanded, }: OakScaleImageButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakSignLanguageButtonProps = {
     /**
      * On click function
      */
-    onClick: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClick: (event: React$1.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 /**
  * Display a button to toggle sign language
  */
-declare const OakSignLanguageButton: ({ onClick, }: OakSignLanguageButtonProps) => React__default.JSX.Element;
+declare const OakSignLanguageButton: ({ onClick, }: OakSignLanguageButtonProps) => React$1.JSX.Element;
 
 type OakTimerProps = {
     timeCode: number;
 } & Omit<OakBoxProps, "onClick" | "label">;
 declare const formatTimeCode: (seconds: number) => string;
-declare const OakTimer: (props: OakTimerProps) => React__default.JSX.Element;
+declare const OakTimer: (props: OakTimerProps) => React$1.JSX.Element;
 
 interface Tier {
     tier: string;
@@ -5016,12 +4850,12 @@ type OakDownloadsJourneyChildSubjectTierSelectorProps = {
  * once the Next button is pressed to continue on the Downloads journey.
  *
  */
-declare const OakDownloadsJourneyChildSubjectTierSelector: styled_components.StyledComponent<(props: OakDownloadsJourneyChildSubjectTierSelectorProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
+declare const OakDownloadsJourneyChildSubjectTierSelector: any;
 
 type OakCodeRendererProps = {
     string: string;
 } & TypographyStyleProps & OakBoxProps;
-declare const OakCodeRenderer: ({ string, ...rest }: OakCodeRendererProps) => string | React__default.JSX.Element;
+declare const OakCodeRenderer: ({ string, ...rest }: OakCodeRendererProps) => string | React$1.JSX.Element;
 
 type OakHeaderHeroProps = {
     authorImageSrc?: string;
@@ -5041,7 +4875,7 @@ type OakHeaderHeroProps = {
  *
  * This Oak component can be passed the OWA breadcrumbs component as a prop. Currently this component does not exist in the component library.
  */
-declare const OakHeaderHero: styled_components.StyledComponent<(props: OakHeaderHeroProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
+declare const OakHeaderHero: any;
 
 type OakHomepageTabButtonProps = InternalButtonProps & {
     title: string;
@@ -5049,7 +4883,7 @@ type OakHomepageTabButtonProps = InternalButtonProps & {
     isActive?: boolean;
     showNewIcon?: boolean;
 };
-declare const OakHomepageTabButton: <C extends ElementType = "button">(props: OakHomepageTabButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakHomepageTabButton: <C extends ElementType = "button">(props: OakHomepageTabButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakInfoProps = {
     /**
@@ -5064,22 +4898,22 @@ type OakInfoProps = {
 /**
  * Presents a button which will show a hint when clicked
  */
-declare const OakInfo: (props: OakInfoProps) => React__default.JSX.Element;
+declare const OakInfo: (props: OakInfoProps) => React$1.JSX.Element;
 
 type OakListItemProps = {
     unavailable?: boolean;
     index: number;
     title: string;
     isLegacy: boolean;
-    firstItemRef?: React__default.MutableRefObject<HTMLDivElement | null> | null | undefined;
-    onClick?: (event: React__default.MouseEvent<HTMLElement, MouseEvent>) => void;
-    middleSlot?: React__default.ReactNode;
-    endSlot?: React__default.ReactNode;
+    firstItemRef?: React$1.MutableRefObject<HTMLDivElement | null> | null | undefined;
+    onClick?: (event: React$1.MouseEvent<HTMLElement, MouseEvent>) => void;
+    middleSlot?: React$1.ReactNode;
+    endSlot?: React$1.ReactNode;
     hoverBgColour?: OakUiRoleToken;
     indexBgColour?: OakUiRoleToken;
     indexHoverBgColour?: OakUiRoleToken;
     indexLegacyBgColour?: OakUiRoleToken;
-    expandedContent?: React__default.ReactNode;
+    expandedContent?: React$1.ReactNode;
     isExpanded?: boolean;
     asRadio?: boolean;
     radioValue?: string;
@@ -5088,7 +4922,7 @@ type OakListItemProps = {
  * * OakListItem component used as links for unit cards
  * * adding asRadio and radioValue props to allow OakListItem to be used as radio buttons within OakUnitsContainer if the OakUnitsContainer is passed a radioGroupName prop. This allows for better accessibility when OakListItem is used in OakUnitsContainer, as the user can select a unit by clicking anywhere on the card, rather than having to click on a specific radio button.
  */
-declare const OakListItem: (props: OakListItemProps) => React__default.JSX.Element;
+declare const OakListItem: (props: OakListItemProps) => React$1.JSX.Element;
 
 type MuxPlayingState = "standard" | "playing" | "played";
 type OakMediaClipProps = {
@@ -5103,50 +4937,8 @@ type OakMediaClipProps = {
     isAudioClip?: boolean;
     element?: "button" | "a";
 };
-declare const StyledMediaClipImage: styled_components.StyledComponent<(<C extends React__default.ElementType = React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "alt" | "src" | "loading" | "srcSet"> & {
-    src: string | next_dist_shared_lib_get_img_props.StaticImport;
-    alt: string;
-    width?: number | `${number}`;
-    height?: number | `${number}`;
-    fill?: boolean;
-    loader?: Image.ImageLoader;
-    quality?: number | `${number}`;
-    priority?: boolean;
-    loading?: "eager" | "lazy" | undefined;
-    placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue;
-    blurDataURL?: string;
-    unoptimized?: boolean;
-    overrideSrc?: string;
-    onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete;
-    layout?: string;
-    objectFit?: string;
-    objectPosition?: string;
-    lazyBoundary?: string;
-    lazyRoot?: string;
-} & React__default.RefAttributes<HTMLImageElement | null>>>({ ...props }: OakImageProps<C>) => React__default.JSX.Element), styled_components.DefaultTheme, Omit<OakImageProps<React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "alt" | "src" | "loading" | "srcSet"> & {
-    src: string | next_dist_shared_lib_get_img_props.StaticImport;
-    alt: string;
-    width?: number | `${number}`;
-    height?: number | `${number}`;
-    fill?: boolean;
-    loader?: Image.ImageLoader;
-    quality?: number | `${number}`;
-    priority?: boolean;
-    loading?: "eager" | "lazy" | undefined;
-    placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue;
-    blurDataURL?: string;
-    unoptimized?: boolean;
-    overrideSrc?: string;
-    onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete;
-    layout?: string;
-    objectFit?: string;
-    objectPosition?: string;
-    lazyBoundary?: string;
-    lazyRoot?: string;
-} & React__default.RefAttributes<HTMLImageElement | null>>>, "as"> & {
-    $showOakPlaceholder: boolean;
-}, never>;
-declare const OakMediaClip: ({ thumbnailImage, timeCode, clipName, learningCycle, muxPlayingState, onClick, disabled, imageAltText, isAudioClip, element, }: OakMediaClipProps) => React__default.JSX.Element;
+declare const StyledMediaClipImage: any;
+declare const OakMediaClip: ({ thumbnailImage, timeCode, clipName, learningCycle, muxPlayingState, onClick, disabled, imageAltText, isAudioClip, element, }: OakMediaClipProps) => React$1.JSX.Element;
 
 type OakMediaClipListProps = {
     lessonTitle: string;
@@ -5159,7 +4951,7 @@ type OakMediaClipListProps = {
  * OakMediaClipList is a scrollable list of OakMediaClip components with clip counter and the title
  *
  */
-declare const OakMediaClipList: ({ lessonTitle, currentClipCounter, totalClipCounter, children, }: OakMediaClipListProps) => React__default.JSX.Element;
+declare const OakMediaClipList: ({ lessonTitle, currentClipCounter, totalClipCounter, children, }: OakMediaClipListProps) => React$1.JSX.Element;
 
 type OakMediaClipStackListItemProps = {
     title: string;
@@ -5171,7 +4963,7 @@ type OakMediaClipStackListItemProps = {
     onClick?: () => void;
     rel?: string;
 };
-declare const OakMediaClipStackListItem: (props: OakMediaClipStackListItemProps) => React__default.JSX.Element;
+declare const OakMediaClipStackListItem: (props: OakMediaClipStackListItemProps) => React$1.JSX.Element;
 
 type MenuItemProps = {
     heading: string;
@@ -5200,14 +4992,14 @@ type OakSideMenuNavLinkProps = FlexStyleProps & PaddingStyleProps & {
  * - `isSelected`: A boolean indicating whether the link is currently selected.
  * - `onClick`: A callback function that is triggered when the link is clicked.
  */
-declare const OakSideMenuNavLink: styled_components.StyledComponent<(props: OakSideMenuNavLinkProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
+declare const OakSideMenuNavLink: any;
 
 type OakSideMenuNavProps = {
     heading: string;
     menuItems: MenuItemProps[];
     anchorTargetId: string;
 };
-declare const OakSideMenuNav: (props: OakSideMenuNavProps) => React__default.JSX.Element;
+declare const OakSideMenuNav: (props: OakSideMenuNavProps) => React$1.JSX.Element;
 
 type OakSubjectIconProps = Pick<OakHandDrawnBoxWithIconProps, "iconName" | "fill" | "iconColor" | "alt"> & {
     iconName: `subject-${string}`;
@@ -5218,7 +5010,7 @@ type OakSubjectIconProps = Pick<OakHandDrawnBoxWithIconProps, "iconName" | "fill
  *
  * 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;
+declare const OakSubjectIcon: ({ showPromoTag, ...rest }: OakSubjectIconProps) => React$1.JSX.Element;
 
 type OakSubjectIconButtonProps = {
     phase: "primary" | "secondary" | "non-curriculum";
@@ -5240,7 +5032,7 @@ type OakSubjectIconButtonProps = {
  *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
  *  called after a mouseEnter and mouseLeave event has happened
  */
-declare const OakSubjectIconButton: <C extends ElementType = "button">({ phase, element, subjectIconName, variant, selected, ...rest }: OakSubjectIconButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
+declare const OakSubjectIconButton: <C extends ElementType = "button">({ phase, element, subjectIconName, variant, selected, ...rest }: OakSubjectIconButtonProps & PolymorphicPropsWithoutRef<C>) => React$1.JSX.Element;
 
 type OakVideoTranscriptProps = {
     /**
@@ -5269,7 +5061,7 @@ type OakVideoTranscriptProps = {
 /**
  * Display a togglable video transcript with a slot to display a sign language control
  */
-declare const OakVideoTranscript: ({ children, id, signLanguageControl, copyLinkControl, transcriptToggled, }: OakVideoTranscriptProps) => React__default.JSX.Element;
+declare const OakVideoTranscript: ({ children, id, signLanguageControl, copyLinkControl, transcriptToggled, }: OakVideoTranscriptProps) => React$1.JSX.Element;
 
 type OakCloudinaryImageProps = Omit<OakImageProps<typeof CldImage>, "src" | "imageProps"> & {
     /**
@@ -5285,7 +5077,7 @@ type OakCloudinaryImageProps = Omit<OakImageProps<typeof CldImage>, "src" | "ima
  * 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.CloudinaryConfigurationOptions | undefined>;
+declare const OakCloudinaryConfigProvider: React$1.Provider<any>;
 /**
  * OakCloudinaryImage wraps OakImage providing responsive images from Cloudinary
  * based on the `sizes` prop.
@@ -5296,7 +5088,7 @@ declare const OakCloudinaryConfigProvider: React__default.Provider<_cloudinary_u
  * ## To be refactored 🔀
  * This component will be refactored not to be tight to a service like Cloudinary
  */
-declare const OakCloudinaryImage: ({ cloudinaryId, unoptimized, ...props }: OakCloudinaryImageProps) => React__default.JSX.Element;
+declare const OakCloudinaryImage: ({ cloudinaryId, unoptimized, ...props }: OakCloudinaryImageProps) => React$1.JSX.Element;
 
 type OakCarouselProps = {
     content: ReactNode[];
@@ -5305,7 +5097,7 @@ type OakCarouselProps = {
     fwdLabel: string;
     containerLabel: string;
 };
-declare const OakCarousel: ({ content, isLooping, backLabel, fwdLabel, containerLabel, }: OakCarouselProps) => React__default.JSX.Element;
+declare const OakCarousel: ({ content, isLooping, backLabel, fwdLabel, containerLabel, }: OakCarouselProps) => React$1.JSX.Element;
 
 type OakQuoteProps = {
     quote: string;
@@ -5314,7 +5106,7 @@ type OakQuoteProps = {
     authorTitle?: string;
     authorImageSrc?: string;
 };
-declare const OakQuote: (props: OakQuoteProps) => React__default.JSX.Element;
+declare const OakQuote: (props: OakQuoteProps) => React$1.JSX.Element;
 
 type ListStyleProps = {
     /**
@@ -5322,7 +5114,7 @@ type ListStyleProps = {
      *
      * Accepts a `list-style` value or a responsive array of `list-style` values.
      */
-    $listStyle?: ResponsiveValues<CSSProperties["listStyle"]>;
+    $listStyle?: ResponsiveValues<CSSProperties$1["listStyle"]>;
 };
 
 type OakLIProps = OakFlexProps & TypographyStyleProps & ListStyleProps & DisplayStyleProps;
@@ -5335,9 +5127,9 @@ type OakLIProps = OakFlexProps & TypographyStyleProps & ListStyleProps & Display
  *
  **/
 declare const oakLIDefaults: {
-    $display: "revert";
+    $display: string;
 };
-declare const OakLI: styled_components.StyledComponent<"li", styled_components.DefaultTheme, OakLIProps, never>;
+declare const OakLI: any;
 
 type OakOLProps = MarginStyleProps & ColorStyleProps & TypographyStyleProps;
 /**
@@ -5348,7 +5140,7 @@ type OakOLProps = MarginStyleProps & ColorStyleProps & TypographyStyleProps;
  * Use where we have an ordered list to ensure numbers are styled
  *
  * */
-declare const OakOL: styled_components.StyledComponent<"ol", styled_components.DefaultTheme, OakOLProps, never>;
+declare const OakOL: any;
 
 type OakPProps = MarginStyleProps & TypographyStyleProps & ColorStyleProps;
 /**
@@ -5358,7 +5150,7 @@ type OakPProps = MarginStyleProps & TypographyStyleProps & ColorStyleProps;
  * 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, OakPProps, never>;
+declare const OakP: any;
 
 type OakTypographyProps = OakBoxProps & TypographyStyleProps;
 /**
@@ -5368,11 +5160,7 @@ type OakTypographyProps = OakBoxProps & TypographyStyleProps;
  * 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.ReactNode;
-} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
-    onClick?: React$1.MouseEventHandler;
-} & ScrollSnapStyleProps, never>;
+declare const OakTypography: any;
 
 type OakULProps = OakBoxProps & OakFlexProps & {
     $reset?: boolean;
@@ -5385,7 +5173,7 @@ type OakULProps = OakBoxProps & OakFlexProps & {
  * Resets browser spacing and other styles, accepts BoxProps' style props.
  *
  * */
-declare const OakUL: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, OakULProps, never>;
+declare const OakUL: any;
 
 type UnstyledChevronAccordionCommonProps = {
     /** The header of the accordion. */
@@ -5423,7 +5211,7 @@ type UnstyledChevronAccordionProps = UnstyledChevronAccordionCommonProps & (Unst
  * - Can be used as an uncontrolled component (via `isInitiallyOpen`) or as a
  *   controlled component (via `isOpen` + `onOpenChange`).
  */
-declare const UnstyledChevronAccordion: (props: UnstyledChevronAccordionProps) => React__default.JSX.Element;
+declare const UnstyledChevronAccordion: (props: UnstyledChevronAccordionProps) => React$1.JSX.Element;
 
 /**
  *
@@ -5434,14 +5222,14 @@ declare const OakGlobalStyle: styled_components.GlobalStyleComponent<{}, styled_
 
 type OakThemeProviderProps = {
     theme: OakTheme;
-    children: React__default.ReactNode;
+    children: React$1.ReactNode;
 };
 /**
  *
  * OakThemeProvider wraps Styled Components ThemeProvider allowing the use of the custom type OakTheme.
  *
  */
-declare const OakThemeProvider: ({ theme, children, }: OakThemeProviderProps) => React__default.JSX.Element;
+declare const OakThemeProvider: ({ theme, children, }: OakThemeProviderProps) => React$1.JSX.Element;
 
 /**
  * Installs a mock of IntersectionObserver when it is not present in the environment
@@ -5465,7 +5253,7 @@ declare const useMounted: () => boolean;
 
 declare const useIsScrolled: () => {
     isScrolled: boolean;
-    ObserveScroll: ({ children }: PropsWithChildren) => React__default.JSX.Element;
+    ObserveScroll: ({ children }: PropsWithChildren) => React$1.JSX.Element;
 };
 
 declare const useBreakpoint: () => Device;