@oaknational/oak-components 0.4.0 → 0.5.1

package/dist/types.d.ts

@@ -8,7 +8,6 @@ import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
 import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
 import * as _cloudinary_util_url_loader_dist_schema_UX7RRFIR from '@cloudinary-util/url-loader/dist/schema-UX7RRFIR';
 import { CldImage } from 'next-cloudinary';
-import { DndContextProps } from '@dnd-kit/core';
 import { UrlObject } from 'url';
 
 declare const oakColorTokens: {
@@ -58,23 +57,6 @@ declare const oakColorTokens: {
     transparent: string;
 };
 type OakColorToken = keyof typeof oakColorTokens;
-/**
- *
- *  Use this tool to convert Hex to color filter values https://codepen.io/sosuke/pen/Pjoqqp
- *
- */
-declare const oakColorFilterTokens: {
-    black: string;
-    red: string;
-    oakGreen: string;
-    white: string;
-    grey40: string;
-    grey50: string;
-    navy: string;
-    navy110: string;
-    navy120: string;
-};
-type OakColorFilterToken = keyof typeof oakColorFilterTokens;
 declare const oakUiRoleTokens: readonly ["text-primary", "text-subdued", "text-error", "text-disabled", "text-link-active", "text-link-hover", "text-link-visited", "text-link-pressed", "text-inverted", "text-success", "text-warning", "bg-primary", "bg-neutral", "bg-neutral-stronger", "bg-btn-primary", "bg-btn-primary-hover", "bg-btn-primary-disabled", "bg-btn-secondary", "bg-btn-secondary-hover", "bg-btn-secondary-disabled", "bg-icon", "bg-icon-hover", "bg-decorative1-main", "bg-decorative1-subdued", "bg-decorative1-very-subdued", "bg-decorative2-main", "bg-decorative2-subdued", "bg-decorative2-very-subdued", "bg-decorative3-main", "bg-decorative3-subdued", "bg-decorative3-very-subdued", "bg-decorative4-main", "bg-decorative4-subdued", "bg-decorative4-very-subdued", "bg-decorative5-main", "bg-decorative5-subdued", "bg-decorative5-very-subdued", "bg-correct", "bg-incorrect", "icon-main", "icon-inverted", "icon-disabled", "icon-brand", "icon-success", "icon-error", "icon-warning", "border-primary", "border-inverted", "border-neutral", "border-brand", "border-success", "border-error", "border-warning", "border-decorative1", "border-decorative1-stronger", "border-decorative2", "border-decorative2-stronger", "border-decorative3", "border-decorative3-stronger", "border-decorative4", "border-decorative4-stronger", "border-decorative5", "border-decorative5-stronger", "border-decorative6", "border-decorative6-stronger", "transparent"];
 type OakUiRoleToken = (typeof oakUiRoleTokens)[number];
 type UiRoleMap = Record<OakUiRoleToken, OakColorToken | null | undefined>;
@@ -770,7 +752,7 @@ type FlexStyleProps = DisplayStyleProps & {
      *
      * Accepts a spacing token or a responsive array of spacing tokens. Can be nulled.
      */
-    $flexBasis?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
+    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
     /**
      * Sets the `gap` CSS property of the element.
      *
@@ -814,7 +796,7 @@ declare const OakFlex: styled_components.StyledComponent<"div", styled_component
     $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
     $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
     $order?: ResponsiveValues<csstype.Property.Order | undefined>;
-    $flexBasis?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
     $gap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $columnGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $rowGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
@@ -1006,7 +988,7 @@ declare const OakLI: styled_components.StyledComponent<"li", styled_components.D
     $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
     $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
     $order?: ResponsiveValues<csstype.Property.Order | undefined>;
-    $flexBasis?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
     $gap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $columnGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $rowGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
@@ -1285,17 +1267,10 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
     $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
     $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
     $order?: ResponsiveValues<csstype.Property.Order | undefined>;
-    $flexBasis?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
     $gap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $columnGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
-    $rowGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>; /**
-     *
-     * OakGridArea is a flex container that should be used inside OakGrid.
-     *
-     * - There is no nesting of OakGridAreas
-     * - Column and row arrangements are achieved through $colSpan, $rowSpan, $colStart, $colEnd, $rowStart, $rowEnd
-     *
-     */
+    $rowGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
 } & {
     /**
      * Determines the number of columns the element should span.
@@ -1367,7 +1342,7 @@ declare const OakMaxWidth: styled_components.StyledComponent<"div", styled_compo
     $flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
     $flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
     $order?: ResponsiveValues<csstype.Property.Order | undefined>;
-    $flexBasis?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
+    $flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
     $gap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $columnGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
     $rowGap?: ResponsiveValues<"all-spacing-0" | "all-spacing-1" | "all-spacing-2" | "all-spacing-3" | "all-spacing-4" | "all-spacing-5" | "all-spacing-6" | "all-spacing-7" | "all-spacing-9" | "all-spacing-10" | "all-spacing-12" | "all-spacing-13" | "all-spacing-8" | "all-spacing-11" | "all-spacing-14" | "all-spacing-15" | "all-spacing-16" | "all-spacing-17" | "all-spacing-18" | "all-spacing-19" | "all-spacing-20" | "all-spacing-21" | "all-spacing-22" | "all-spacing-23" | "all-spacing-24" | "space-between-none" | "space-between-sssx" | "space-between-ssx" | "space-between-xs" | "space-between-s" | "space-between-m" | "space-between-m2" | "space-between-l" | "space-between-xl" | "space-between-xxl" | "space-between-xxxl" | null | undefined>;
@@ -1940,9 +1915,21 @@ type OakDraggableProps = {
      */
     iconName?: IconName;
     /**
-     * Icon color
+     * Icon color when not being dragged or hovered
+     */
+    iconColor?: OakCombinedColorToken;
+    /**
+     * The alt text for the icon
      */
-    iconColor?: OakColorFilterToken;
+    iconAlt?: string;
+    /**
+     * The background color of the draggable when not being dragged or hovered
+     */
+    background?: OakCombinedColorToken;
+    /**
+     * The color of the draggable when not being dragged or hovered
+     */
+    color?: OakCombinedColorToken;
 };
 /**
  * The component has no intrinsic draggable functionality.
@@ -1955,6 +1942,19 @@ type OakDroppableProps = {
      * Indicates whether a draggable is currently being dragged over the droppable
      */
     isOver?: boolean;
+    /**
+     * Present the element in a state making it clear that it can be dropped into
+     */
+    isDisabled?: boolean;
+    /**
+     * A slot for a label to be displayed to the RHS of the droppable
+     *
+     * useful for giving the user a hint about what to drop
+     */
+    labelSlot?: ReactNode;
+    /**
+     * A slot for the draggable that is currently occupying the droppable
+     */
     children?: ReactNode;
 };
 /**
@@ -1963,7 +1963,7 @@ type OakDroppableProps = {
  * Has no intrinsic drop functionality.
  * It is intended to be used with `useDraggable` from `@dnd-kit/core`
  */
-declare const OakDroppable: FC<OakDroppableProps & ComponentPropsWithRef<typeof OakBox>>;
+declare const OakDroppable: FC<OakDroppableProps & ComponentPropsWithRef<typeof OakFlex>>;
 
 type OakDraggableFeedbackProps = ComponentPropsWithoutRef<typeof OakDraggable> & {
     /**
@@ -2211,10 +2211,6 @@ type OakQuizOrderProps = {
      */
     onChange?: (items: OakQuizOrderItem[]) => void;
 };
-/**
- * Facilitates DI for the DndContext
- */
-declare const injectDndContext: React__default.Context<React__default.FC<DndContextProps>>;
 /**
  * A sortable list of items with drag and drop functionality. Items can be dragged over named slots to re-arrange them
  *
@@ -2222,6 +2218,46 @@ declare const injectDndContext: React__default.Context<React__default.FC<DndCont
  */
 declare const OakQuizOrder: ({ initialItems, onChange }: OakQuizOrderProps) => React__default.JSX.Element;
 
+type DraggableId = string;
+type DroppableId = string;
+type DraggableItem = {
+    id: DraggableId;
+    label: string;
+};
+type DroppableItem = {
+    id: DroppableId;
+    label: string;
+};
+type Matches = Record<DroppableId, DraggableItem>;
+type OakQuizMatchProps = {
+    /**
+     * The initial options
+     *
+     * these are the items that can be dragged into a slot to form a match
+     *
+     * this cannot be updated on subsequent renders
+     */
+    initialOptions: DraggableItem[];
+    /**
+     * The initial slots
+     *
+     * these are the slots into which an option can be dropped to form a match
+     *
+     * this cannot be updated on subsequent renders
+     */
+    initialSlots: DroppableItem[];
+    /**
+     * Notify the consumer when matches have changed
+     */
+    onChange?: (matches: Matches) => void;
+};
+/**
+ * A list of draggable items with matching slots to drop them into.
+ *
+ * Keyboard navigation is supported with the `tab`, `space` and `arrow` keys
+ */
+declare const OakQuizMatch: ({ initialOptions, initialSlots, onChange, }: OakQuizMatchProps) => React__default.JSX.Element;
+
 type OakSubjectIconProps = Pick<OakHandDrawnBoxWithIconProps, "iconName" | "fill" | "iconColor" | "alt"> & {
     iconName: `subject-${string}`;
     showPromoTag?: boolean;
@@ -2257,4 +2293,4 @@ type OakPrimaryNavProps = {
  */
 declare const OakPrimaryNav: ({ ariaLabel, navItems }: OakPrimaryNavProps) => React__default.JSX.Element;
 
-export { HeadingTagComponent, type OakAllSpacingToken, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGlobalStyle, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, type OakInnerPaddingToken, OakKbd, type OakKbdProps, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizOrder, type OakQuizOrderProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, injectDndContext, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens };
+export { HeadingTagComponent, type OakAllSpacingToken, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGlobalStyle, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, type OakInfoCardProps, type OakInnerPaddingToken, OakKbd, type OakKbdProps, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizMatch, type OakQuizMatchProps, OakQuizOrder, type OakQuizOrderProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSecondaryButton, type OakSecondaryButtonProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oaknational/oak-components",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "licence": "MIT",
   "description": "Shared components for Oak applications",
   "main": "dist/cjs/index.js",