@oaknational/oak-components 2.19.1 → 2.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +213 -362
- package/package.json +38 -38
package/dist/types.d.ts
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default, { CSSProperties as CSSProperties$1, ElementType, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEventHandler, FC, ReactNode, HTMLAttributes, DetailedHTMLProps, TextareaHTMLAttributes,
|
|
2
|
+
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';
|
|
3
3
|
import * as styled_components from 'styled-components';
|
|
4
4
|
import { ThemedStyledProps, DefaultTheme, CSSProperties } from 'styled-components';
|
|
5
|
-
import * as
|
|
6
|
-
import
|
|
7
|
-
import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
|
|
8
|
-
import * as csstype from 'csstype';
|
|
5
|
+
import * as Image from 'next/image';
|
|
6
|
+
import Image__default, { ImageProps as ImageProps$1 } from 'next/image';
|
|
9
7
|
import { UrlObject } from 'url';
|
|
10
8
|
import { Announcements } from '@dnd-kit/core';
|
|
11
|
-
import * as
|
|
9
|
+
import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
|
|
10
|
+
import * as _cloudinary_util_url_loader from '@cloudinary-util/url-loader';
|
|
12
11
|
import { CldImage } from 'next-cloudinary';
|
|
13
12
|
|
|
14
13
|
declare const oakColorTokens: {
|
|
@@ -1052,14 +1051,12 @@ declare const oakBoxCss: styled_components.FlattenInterpolation<styled_component
|
|
|
1052
1051
|
* - drop-shadow
|
|
1053
1052
|
*
|
|
1054
1053
|
*/
|
|
1055
|
-
declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme,
|
|
1056
|
-
children?: React.ReactNode;
|
|
1057
|
-
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1, never>;
|
|
1054
|
+
declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, OakBoxProps, never>;
|
|
1058
1055
|
|
|
1059
1056
|
type HTMLProps = {
|
|
1060
1057
|
onClick?: MouseEventHandler;
|
|
1061
1058
|
};
|
|
1062
|
-
type OakImageProps<C extends ElementType = typeof
|
|
1059
|
+
type OakImageProps<C extends ElementType = typeof Image__default> = Omit<ImageProps$1, "placeholder"> & OakBoxProps & ColorFilterStyleProps & HTMLProps & {
|
|
1063
1060
|
as?: C;
|
|
1064
1061
|
/**
|
|
1065
1062
|
* The placeholder to use while the image is loading
|
|
@@ -1089,34 +1086,9 @@ declare const placeholderStyles: styled_components.FlattenInterpolation<styled_c
|
|
|
1089
1086
|
* sizes is exposed for further optimisation read Next docs for more info.
|
|
1090
1087
|
*
|
|
1091
1088
|
*/
|
|
1092
|
-
declare const OakImage: <C extends
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
width?: number | `${number}` | undefined;
|
|
1096
|
-
/**
|
|
1097
|
-
* The placeholder to use while the image is loading
|
|
1098
|
-
*
|
|
1099
|
-
* Defaults to `oak` which is a placeholder containing the Oak logo
|
|
1100
|
-
* also accepts the same options as next/image */
|
|
1101
|
-
height?: number | `${number}` | undefined;
|
|
1102
|
-
fill?: boolean | undefined;
|
|
1103
|
-
loader?: next_image.ImageLoader | undefined;
|
|
1104
|
-
quality?: number | `${number}` | undefined;
|
|
1105
|
-
priority?: boolean | undefined;
|
|
1106
|
-
loading?: "eager" | "lazy" | undefined;
|
|
1107
|
-
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue | undefined;
|
|
1108
|
-
blurDataURL?: string | undefined;
|
|
1109
|
-
unoptimized?: boolean | undefined;
|
|
1110
|
-
overrideSrc?: string | undefined;
|
|
1111
|
-
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete | undefined;
|
|
1112
|
-
layout?: string | undefined;
|
|
1113
|
-
objectFit?: string | undefined;
|
|
1114
|
-
objectPosition?: string | undefined;
|
|
1115
|
-
lazyBoundary?: string | undefined;
|
|
1116
|
-
lazyRoot?: string | undefined;
|
|
1117
|
-
} & React__default.RefAttributes<HTMLImageElement | null>>>({ ...props }: OakImageProps<C>) => React__default.JSX.Element;
|
|
1118
|
-
|
|
1119
|
-
declare const oakIconNames: ("data" | "search" | "video" | "filter" | "image" | "x" | "download" | "list" | "header-underline" | "question-mark" | "ai" | "ai-additional-material" | "ai-quiz" | "ai-slide-deck" | "ai-worksheet" | "home" | "send" | "rocket" | "edit" | "expand" | "minimise" | "hamburger" | "cross" | "copy" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-up" | "worksheet-3" | "chevron-right" | "save" | "success" | "error" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "warning" | "lightbulb-yellow" | "lightbulb" | "pencil" | "quiz" | "intro" | "loopdown" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "play" | "bookmark-outlined" | "bookmark-filled" | "microsoft-teams" | "google-classroom" | "clipboard" | "book-steps" | "free-tag" | "threads" | "spreadsheet" | "curriculum-plan" | "chatting" | "snack-break" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-gcse-citizenship" | "subject-core-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computer-science" | "subject-core-computing" | "subject-cooking-nutrition" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-language" | "subject-english-grammar" | "subject-english-handwriting" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-english-reading-writing-oracy" | "subject-english-vocabulary" | "subject-expressive-arts-and-design" | "subject-financial-education" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-literacy" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-personal-social-and-emotional-development" | "subject-physical-development" | "subject-physical-education" | "subject-core-physical-education" | "subject-gcse-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-core-religious-education" | "subject-gcse-religious-education" | "subject-rshe-pshe" | "subject-rshe" | "subject-rule-of-law" | "subject-philosophy" | "subject-social-science" | "subject-theology" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world" | "swimming" | "homepage-robot-waving" | "homepage-three-pupils" | "homepage-teacher" | "homepage-teacher-map" | "audio-clip-large" | "audio-clip-small" | "box-border-bottom" | "box-border-left" | "box-border-right" | "box-border-top" | "bubble-1" | "bubble-2" | "burst" | "confetti" | "icon-background-square" | "looping-arrow-1" | "looping-line-1" | "looping-line-2" | "looping-line-3" | "looping-line-4" | "looping-line-5" | "speech-bubble" | "tag-promotional" | "tick-mark-happiness" | "underline-1" | "logo" | "trash" | "media-clips" | "retake")[];
|
|
1089
|
+
declare const OakImage: <C extends ElementType = typeof Image__default>({ ...props }: OakImageProps<C>) => React__default.JSX.Element;
|
|
1090
|
+
|
|
1091
|
+
declare const oakIconNames: IconName[];
|
|
1120
1092
|
type OakIconName = IconName;
|
|
1121
1093
|
type OakIconProps = Omit<OakImageProps, "alt" | "src"> & {
|
|
1122
1094
|
/**
|
|
@@ -1281,9 +1253,7 @@ type OakSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorde
|
|
|
1281
1253
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1282
1254
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1283
1255
|
*/
|
|
1284
|
-
declare const OakSecondaryButton: <C extends
|
|
1285
|
-
element?: C | undefined;
|
|
1286
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1256
|
+
declare const OakSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1287
1257
|
|
|
1288
1258
|
type ButtonComponent = <C extends React__default.ElementType = "button">({ element, ...rest }: OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1289
1259
|
type OakButtonWithDropdownProps = {
|
|
@@ -1309,11 +1279,9 @@ type OakButtonWithDropdownProps = {
|
|
|
1309
1279
|
declare const OakButtonWithDropdown: {
|
|
1310
1280
|
({ primaryActionText, primaryActionIcon, onPrimaryAction, children, isLoading, disabled, ariaLabel, ariaDescription, leadingButtonIcon, "data-testid": dataTestId, buttonComponent: ButtonComponent, dropdownTopSpacing, flexWidth, closeOnChange, }: OakButtonWithDropdownProps): React__default.JSX.Element;
|
|
1311
1281
|
Divider(): React__default.ReactElement;
|
|
1312
|
-
Item<C extends
|
|
1282
|
+
Item<C extends ElementType = "button">({ children, element, ...rest }: {
|
|
1313
1283
|
children: React__default.ReactNode;
|
|
1314
|
-
} & OakSecondaryButtonProps &
|
|
1315
|
-
element?: C | undefined;
|
|
1316
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>): React__default.ReactElement;
|
|
1284
|
+
} & OakSecondaryButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
|
|
1317
1285
|
};
|
|
1318
1286
|
|
|
1319
1287
|
type OakCloseButtonProps = {
|
|
@@ -1343,9 +1311,7 @@ type OakPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderC
|
|
|
1343
1311
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1344
1312
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1345
1313
|
*/
|
|
1346
|
-
declare const OakPrimaryButton: <C extends
|
|
1347
|
-
element?: C | undefined;
|
|
1348
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1314
|
+
declare const OakPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1349
1315
|
|
|
1350
1316
|
type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
|
|
1351
1317
|
/**
|
|
@@ -1361,9 +1327,7 @@ type OakPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaul
|
|
|
1361
1327
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1362
1328
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1363
1329
|
*/
|
|
1364
|
-
declare const OakPrimaryInvertedButton: <C extends
|
|
1365
|
-
element?: C | undefined;
|
|
1366
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1330
|
+
declare const OakPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1367
1331
|
|
|
1368
1332
|
type OakSecondaryButtonWithDropdownProps = {
|
|
1369
1333
|
primaryActionText: string;
|
|
@@ -1384,11 +1348,9 @@ type OakSecondaryButtonWithDropdownProps = {
|
|
|
1384
1348
|
declare const OakSecondaryButtonWithDropdown: {
|
|
1385
1349
|
(props: OakSecondaryButtonWithDropdownProps): React__default.JSX.Element;
|
|
1386
1350
|
Divider(): React__default.ReactElement;
|
|
1387
|
-
Item<C extends
|
|
1351
|
+
Item<C extends ElementType = "button">({ children, element, ...rest }: {
|
|
1388
1352
|
children: React__default.ReactNode;
|
|
1389
|
-
} & OakPrimaryInvertedButtonProps &
|
|
1390
|
-
element?: C | undefined;
|
|
1391
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>): React__default.ReactElement;
|
|
1353
|
+
} & OakPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
|
|
1392
1354
|
};
|
|
1393
1355
|
|
|
1394
1356
|
type OakSmallPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font">;
|
|
@@ -1405,9 +1367,7 @@ type OakSmallPrimaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBo
|
|
|
1405
1367
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1406
1368
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1407
1369
|
*/
|
|
1408
|
-
declare const OakSmallPrimaryButton: <C extends
|
|
1409
|
-
element?: C | undefined;
|
|
1410
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1370
|
+
declare const OakSmallPrimaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1411
1371
|
|
|
1412
1372
|
type OakSmallPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor">;
|
|
1413
1373
|
/**
|
|
@@ -1423,9 +1383,7 @@ type OakSmallPrimaryInvertedButtonProps = Omit<InternalShadowRectButtonProps, "d
|
|
|
1423
1383
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1424
1384
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1425
1385
|
*/
|
|
1426
|
-
declare const OakSmallPrimaryInvertedButton: <C extends
|
|
1427
|
-
element?: C | undefined;
|
|
1428
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1386
|
+
declare const OakSmallPrimaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1429
1387
|
|
|
1430
1388
|
type OakSmallSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font">;
|
|
1431
1389
|
/**
|
|
@@ -1441,9 +1399,7 @@ type OakSmallSecondaryButtonProps = Omit<InternalShadowRectButtonProps, "default
|
|
|
1441
1399
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1442
1400
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1443
1401
|
*/
|
|
1444
|
-
declare const OakSmallSecondaryButton: <C extends
|
|
1445
|
-
element?: C | undefined;
|
|
1446
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1402
|
+
declare const OakSmallSecondaryButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallSecondaryButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1447
1403
|
|
|
1448
1404
|
declare const oakAllApectRatiosConst: readonly ["7:8", "2:3", "1:1", "3:2", "16:9"];
|
|
1449
1405
|
type OakAllApectRatios = (typeof oakAllApectRatiosConst)[number];
|
|
@@ -1534,11 +1490,9 @@ type OakSmallSecondaryButtonWithDropdownProps = {
|
|
|
1534
1490
|
declare const OakSmallSecondaryButtonWithDropdown: {
|
|
1535
1491
|
(props: OakSmallSecondaryButtonWithDropdownProps): React__default.JSX.Element;
|
|
1536
1492
|
Divider(): React__default.ReactElement;
|
|
1537
|
-
Item<C extends
|
|
1493
|
+
Item<C extends ElementType = "button">({ children, element, ...rest }: {
|
|
1538
1494
|
children: React__default.ReactNode;
|
|
1539
|
-
} & OakSmallPrimaryInvertedButtonProps &
|
|
1540
|
-
element?: C | undefined;
|
|
1541
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>): React__default.ReactElement;
|
|
1495
|
+
} & OakSmallPrimaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>): React__default.ReactElement;
|
|
1542
1496
|
};
|
|
1543
1497
|
|
|
1544
1498
|
type OakSmallSecondaryToggleButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor" | "pv" | "ph" | "font"> & {
|
|
@@ -1559,11 +1513,7 @@ type OakSmallSecondaryToggleButtonProps = Omit<InternalShadowRectButtonProps, "d
|
|
|
1559
1513
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1560
1514
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1561
1515
|
*/
|
|
1562
|
-
declare const OakSmallSecondaryToggleButton: <C extends
|
|
1563
|
-
toggleOn?: boolean | undefined;
|
|
1564
|
-
} & {
|
|
1565
|
-
element?: C | undefined;
|
|
1566
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1516
|
+
declare const OakSmallSecondaryToggleButton: <C extends ElementType = "button">({ element, toggleOn, ...rest }: OakSmallSecondaryToggleButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1567
1517
|
|
|
1568
1518
|
type InternalShadowIconButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "$pv" | "$ba" | "$borderRadius" | "$borderColor" | "$background" | "$color"> & {
|
|
1569
1519
|
iconName?: OakIconName;
|
|
@@ -1592,9 +1542,7 @@ type OakSmallTertiaryInvertedButtonProps = Omit<InternalShadowIconButtonProps, "
|
|
|
1592
1542
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1593
1543
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1594
1544
|
*/
|
|
1595
|
-
declare const OakSmallTertiaryInvertedButton: <C extends
|
|
1596
|
-
element?: C | undefined;
|
|
1597
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1545
|
+
declare const OakSmallTertiaryInvertedButton: <C extends ElementType = "button">({ element, ...rest }: OakSmallTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1598
1546
|
|
|
1599
1547
|
type InternalShadowRoundButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" | "$pv" | "$ba" | "$borderRadius" | "$borderColor" | "$background" | "$color"> & {
|
|
1600
1548
|
iconName?: OakIconName;
|
|
@@ -1630,62 +1578,31 @@ type InternalShadowRoundButtonProps = Omit<InternalButtonProps, "$pa" | "$ph" |
|
|
|
1630
1578
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
1631
1579
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1632
1580
|
*/
|
|
1633
|
-
declare const InternalShadowRoundButton: <C extends
|
|
1634
|
-
iconName?: "data" | "search" | "video" | "filter" | "image" | "x" | "download" | "list" | "header-underline" | "question-mark" | "ai" | "ai-additional-material" | "ai-quiz" | "ai-slide-deck" | "ai-worksheet" | "home" | "send" | "rocket" | "edit" | "expand" | "minimise" | "hamburger" | "cross" | "copy" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-up" | "worksheet-3" | "chevron-right" | "save" | "success" | "error" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "warning" | "lightbulb-yellow" | "lightbulb" | "pencil" | "quiz" | "intro" | "loopdown" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "play" | "bookmark-outlined" | "bookmark-filled" | "microsoft-teams" | "google-classroom" | "clipboard" | "book-steps" | "free-tag" | "threads" | "spreadsheet" | "curriculum-plan" | "chatting" | "snack-break" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-gcse-citizenship" | "subject-core-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computer-science" | "subject-core-computing" | "subject-cooking-nutrition" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-language" | "subject-english-grammar" | "subject-english-handwriting" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-english-reading-writing-oracy" | "subject-english-vocabulary" | "subject-expressive-arts-and-design" | "subject-financial-education" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-literacy" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-personal-social-and-emotional-development" | "subject-physical-development" | "subject-physical-education" | "subject-core-physical-education" | "subject-gcse-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-core-religious-education" | "subject-gcse-religious-education" | "subject-rshe-pshe" | "subject-rshe" | "subject-rule-of-law" | "subject-philosophy" | "subject-social-science" | "subject-theology" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world" | "swimming" | "homepage-robot-waving" | "homepage-three-pupils" | "homepage-teacher" | "homepage-teacher-map" | "audio-clip-large" | "audio-clip-small" | "box-border-bottom" | "box-border-left" | "box-border-right" | "box-border-top" | "bubble-1" | "bubble-2" | "burst" | "confetti" | "icon-background-square" | "looping-arrow-1" | "looping-line-1" | "looping-line-2" | "looping-line-3" | "looping-line-4" | "looping-line-5" | "speech-bubble" | "tag-promotional" | "tick-mark-happiness" | "underline-1" | "logo" | "trash" | "media-clips" | "retake" | undefined;
|
|
1635
|
-
isTrailingIcon?: boolean | undefined;
|
|
1636
|
-
defaultTextColor: OakUiRoleToken;
|
|
1637
|
-
hoverTextColor: OakUiRoleToken;
|
|
1638
|
-
disabledTextColor: OakUiRoleToken;
|
|
1639
|
-
defaultIconBackground: OakUiRoleToken;
|
|
1640
|
-
hoverIconBackground: OakUiRoleToken;
|
|
1641
|
-
hoverIconColor?: "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" | undefined;
|
|
1642
|
-
disabledIconBackground: OakUiRoleToken;
|
|
1643
|
-
defaultIconColor?: OakRoundIconProps["$colorFilter"];
|
|
1644
|
-
disabledIconColor?: OakRoundIconProps["$colorFilter"];
|
|
1645
|
-
defaultIconBorderColor?: "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" | undefined;
|
|
1646
|
-
disabledIconBorderColor?: "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" | undefined;
|
|
1647
|
-
width?: SizeStyleProps["$width"];
|
|
1648
|
-
maxWidth?: SizeStyleProps["$maxWidth"];
|
|
1649
|
-
iconBackgroundSize: SizeStyleProps["$width"];
|
|
1650
|
-
iconSize: SizeStyleProps["$width"];
|
|
1651
|
-
hoverDropShadow?: "drop-shadow-standard" | "drop-shadow-lemon" | "drop-shadow-wide-lemon" | "drop-shadow-centered-lemon" | "drop-shadow-grey" | "drop-shadow-centered-grey" | "drop-shadow-black" | "drop-shadow-centred-standard" | "drop-shadow-none" | null | undefined;
|
|
1652
|
-
} & PositionStyleProps & {
|
|
1653
|
-
element?: C | undefined;
|
|
1654
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1581
|
+
declare const InternalShadowRoundButton: <C extends ElementType = "button">(props: InternalShadowRoundButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1655
1582
|
|
|
1583
|
+
type OakTertiaryButtonProps = InternalButtonProps & {
|
|
1584
|
+
iconBackground?: OakRoundIconProps["$background"];
|
|
1585
|
+
iconColorFilter?: OakRoundIconProps["$colorFilter"];
|
|
1586
|
+
isTrailingIcon?: boolean;
|
|
1587
|
+
iconName?: OakIconName;
|
|
1588
|
+
};
|
|
1656
1589
|
/**
|
|
1657
1590
|
* An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
|
|
1658
1591
|
*
|
|
1659
1592
|
*/
|
|
1660
|
-
declare const OakTertiaryButton: <C extends
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
onHovered?: ((event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void) | undefined;
|
|
1664
|
-
} & {
|
|
1593
|
+
declare const OakTertiaryButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryButtonProps & Partial<InternalShadowRoundButtonProps> & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1594
|
+
|
|
1595
|
+
type OakTertiaryInvertedButtonProps = InternalButtonProps & {
|
|
1665
1596
|
iconBackground?: OakRoundIconProps["$background"];
|
|
1666
1597
|
iconColorFilter?: OakRoundIconProps["$colorFilter"];
|
|
1667
|
-
isTrailingIcon?: boolean
|
|
1668
|
-
iconName?:
|
|
1669
|
-
}
|
|
1670
|
-
element?: C | undefined;
|
|
1671
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1672
|
-
|
|
1598
|
+
isTrailingIcon?: boolean;
|
|
1599
|
+
iconName?: OakIconName;
|
|
1600
|
+
};
|
|
1673
1601
|
/**
|
|
1674
1602
|
* An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
|
|
1675
1603
|
*
|
|
1676
1604
|
*/
|
|
1677
|
-
declare const OakTertiaryInvertedButton: <C extends
|
|
1678
|
-
isLoading?: boolean | undefined;
|
|
1679
|
-
} & {
|
|
1680
|
-
onHovered?: ((event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void) | undefined;
|
|
1681
|
-
} & {
|
|
1682
|
-
iconBackground?: OakRoundIconProps["$background"];
|
|
1683
|
-
iconColorFilter?: OakRoundIconProps["$colorFilter"];
|
|
1684
|
-
isTrailingIcon?: boolean | undefined;
|
|
1685
|
-
iconName?: "data" | "search" | "video" | "filter" | "image" | "x" | "download" | "list" | "header-underline" | "question-mark" | "ai" | "ai-additional-material" | "ai-quiz" | "ai-slide-deck" | "ai-worksheet" | "home" | "send" | "rocket" | "edit" | "expand" | "minimise" | "hamburger" | "cross" | "copy" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-up" | "worksheet-3" | "chevron-right" | "save" | "success" | "error" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "warning" | "lightbulb-yellow" | "lightbulb" | "pencil" | "quiz" | "intro" | "loopdown" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "play" | "bookmark-outlined" | "bookmark-filled" | "microsoft-teams" | "google-classroom" | "clipboard" | "book-steps" | "free-tag" | "threads" | "spreadsheet" | "curriculum-plan" | "chatting" | "snack-break" | "subject-art" | "subject-biology" | "subject-chemistry" | "subject-citizenship" | "subject-gcse-citizenship" | "subject-core-citizenship" | "subject-combined-science" | "subject-communication-and-language" | "subject-computing" | "subject-computer-science" | "subject-core-computing" | "subject-cooking-nutrition" | "subject-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-language" | "subject-english-grammar" | "subject-english-handwriting" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-english-reading-writing-oracy" | "subject-english-vocabulary" | "subject-expressive-arts-and-design" | "subject-financial-education" | "subject-french" | "subject-geography" | "subject-german" | "subject-history" | "subject-independent-living" | "subject-latin" | "subject-literacy" | "subject-maths" | "subject-music" | "subject-numeracy" | "occupational-therapy" | "subject-personal-social-and-emotional-development" | "subject-physical-development" | "subject-physical-education" | "subject-core-physical-education" | "subject-gcse-physical-education" | "subject-physical-therapy" | "subject-physics" | "subject-religious-education" | "subject-core-religious-education" | "subject-gcse-religious-education" | "subject-rshe-pshe" | "subject-rshe" | "subject-rule-of-law" | "subject-philosophy" | "subject-social-science" | "subject-theology" | "subject-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world" | "swimming" | "homepage-robot-waving" | "homepage-three-pupils" | "homepage-teacher" | "homepage-teacher-map" | "audio-clip-large" | "audio-clip-small" | "box-border-bottom" | "box-border-left" | "box-border-right" | "box-border-top" | "bubble-1" | "bubble-2" | "burst" | "confetti" | "icon-background-square" | "looping-arrow-1" | "looping-line-1" | "looping-line-2" | "looping-line-3" | "looping-line-4" | "looping-line-5" | "speech-bubble" | "tag-promotional" | "tick-mark-happiness" | "underline-1" | "logo" | "trash" | "media-clips" | "retake" | undefined;
|
|
1686
|
-
} & {
|
|
1687
|
-
element?: C | undefined;
|
|
1688
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1605
|
+
declare const OakTertiaryInvertedButton: <C extends ElementType = "button">({ element, isTrailingIcon, iconName, children, ...props }: OakTertiaryInvertedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1689
1606
|
|
|
1690
1607
|
type OakLeftAlignedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBorderColor" | "defaultBackground" | "defaultTextColor" | "hoverBackground" | "hoverBorderColor" | "hoverTextColor" | "disabledBackground" | "disabledBorderColor" | "disabledTextColor"> & {
|
|
1691
1608
|
/**
|
|
@@ -1706,14 +1623,7 @@ type OakLeftAlignedButtonProps = Omit<InternalShadowRectButtonProps, "defaultBor
|
|
|
1706
1623
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`
|
|
1707
1624
|
* called after a mouseEnter and mouseLeave event has happened
|
|
1708
1625
|
*/
|
|
1709
|
-
declare const OakLeftAlignedButton: <C extends
|
|
1710
|
-
/**
|
|
1711
|
-
* Whether to align the icon to the right with space-between justification
|
|
1712
|
-
*/
|
|
1713
|
-
rightAlignIcon?: boolean | undefined;
|
|
1714
|
-
} & {
|
|
1715
|
-
element?: C | undefined;
|
|
1716
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
1626
|
+
declare const OakLeftAlignedButton: <C extends ElementType = "button">(props: OakLeftAlignedButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
1717
1627
|
|
|
1718
1628
|
type OakCookieBannerProps = {
|
|
1719
1629
|
/**
|
|
@@ -2013,11 +1923,7 @@ type OakFieldsetProps = OakBoxProps;
|
|
|
2013
1923
|
* OakFieldset renders a custom `fieldset` component, removes default styling of fieldset.
|
|
2014
1924
|
color, opacity, margin, padding, border and typography styles can be passed in also.
|
|
2015
1925
|
*/
|
|
2016
|
-
declare const OakFieldset: styled_components.StyledComponent<"fieldset", styled_components.DefaultTheme,
|
|
2017
|
-
children?: React$1.ReactNode;
|
|
2018
|
-
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2019
|
-
onClick?: React$1.MouseEventHandler | undefined;
|
|
2020
|
-
}, never>;
|
|
1926
|
+
declare const OakFieldset: styled_components.StyledComponent<"fieldset", styled_components.DefaultTheme, OakBoxProps, never>;
|
|
2021
1927
|
|
|
2022
1928
|
/**
|
|
2023
1929
|
*
|
|
@@ -2027,11 +1933,7 @@ declare const OakFieldset: styled_components.StyledComponent<"fieldset", styled_
|
|
|
2027
1933
|
* Use `<OakBox as="form">` instead
|
|
2028
1934
|
* @deprecated Use `<OakBox as="form">` instead
|
|
2029
1935
|
*/
|
|
2030
|
-
declare const OakForm: styled_components.StyledComponent<"form", styled_components.DefaultTheme,
|
|
2031
|
-
children?: React$1.ReactNode;
|
|
2032
|
-
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2033
|
-
onClick?: React$1.MouseEventHandler | undefined;
|
|
2034
|
-
}, never>;
|
|
1936
|
+
declare const OakForm: styled_components.StyledComponent<"form", styled_components.DefaultTheme, OakBoxProps, never>;
|
|
2035
1937
|
type OakFormProps = OakBoxProps;
|
|
2036
1938
|
|
|
2037
1939
|
type OakLabelProps = TypographyStyleProps & ColorStyleProps;
|
|
@@ -2041,7 +1943,7 @@ type OakLabelProps = TypographyStyleProps & ColorStyleProps;
|
|
|
2041
1943
|
* Use this component when you want to apply styles to a label, likely within
|
|
2042
1944
|
* a form.
|
|
2043
1945
|
*/
|
|
2044
|
-
declare const OakLabel: styled_components.StyledComponent<"label", styled_components.DefaultTheme,
|
|
1946
|
+
declare const OakLabel: styled_components.StyledComponent<"label", styled_components.DefaultTheme, OakLabelProps, never>;
|
|
2045
1947
|
|
|
2046
1948
|
type OakTextAreaProps = Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & StyledTextAreaProps;
|
|
2047
1949
|
type StyledTextAreaProps = SizeStyleProps & BorderStyleProps & SpacingStyleProps & TypographyStyleProps & PositionStyleProps & ColorStyleProps;
|
|
@@ -2282,17 +2184,17 @@ declare const OakMultilineText: React__default.ForwardRefExoticComponent<{
|
|
|
2282
2184
|
/**
|
|
2283
2185
|
* Set the textarea text on first render when state is controlled internally (i.e. if `value` has not been provided)
|
|
2284
2186
|
*/
|
|
2285
|
-
initialValue?: string
|
|
2187
|
+
initialValue?: string;
|
|
2286
2188
|
/**
|
|
2287
2189
|
* Maximum number of characters
|
|
2288
2190
|
*/
|
|
2289
2191
|
charLimit: number;
|
|
2290
|
-
ariaLabel?: string
|
|
2192
|
+
ariaLabel?: string;
|
|
2291
2193
|
/**
|
|
2292
2194
|
* Display errors passed in as a prop
|
|
2293
2195
|
*/
|
|
2294
|
-
errors?: string
|
|
2295
|
-
label?: string
|
|
2196
|
+
errors?: Array<string>;
|
|
2197
|
+
label?: string;
|
|
2296
2198
|
} & Omit<OakTextAreaProps, "$width"> & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
2297
2199
|
declare function useDevice<T>(values: T | Array<T>): T;
|
|
2298
2200
|
|
|
@@ -2344,43 +2246,43 @@ declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
|
|
|
2344
2246
|
id: string;
|
|
2345
2247
|
label: ReactNode;
|
|
2346
2248
|
value: string;
|
|
2347
|
-
tabIndex?: number
|
|
2348
|
-
"data-testid"?: string
|
|
2349
|
-
disabled?: boolean
|
|
2350
|
-
required?: boolean
|
|
2249
|
+
tabIndex?: number;
|
|
2250
|
+
"data-testid"?: string;
|
|
2251
|
+
disabled?: boolean;
|
|
2252
|
+
required?: boolean;
|
|
2351
2253
|
/**
|
|
2352
2254
|
* Allows the focus ring to be disabled. This is useful when focus is indicated
|
|
2353
2255
|
* by other means, such as a border or background color change.
|
|
2354
2256
|
*/
|
|
2355
|
-
disableFocusRing?: boolean
|
|
2257
|
+
disableFocusRing?: boolean;
|
|
2356
2258
|
/**
|
|
2357
2259
|
* Allows the size of the radio button to be customized.
|
|
2358
2260
|
*/
|
|
2359
|
-
radioOuterSize?:
|
|
2261
|
+
radioOuterSize?: OakAllSpacingToken;
|
|
2360
2262
|
/**
|
|
2361
2263
|
* Allows the size of the inner "checked" circle of the radio button to be customized.
|
|
2362
2264
|
*/
|
|
2363
|
-
radioInnerSize?:
|
|
2265
|
+
radioInnerSize?: OakAllSpacingToken;
|
|
2364
2266
|
/**
|
|
2365
2267
|
* Allows the width of the radio button border to be customized.
|
|
2366
2268
|
*/
|
|
2367
|
-
radioBorderWidth?:
|
|
2269
|
+
radioBorderWidth?: OakBorderWidthToken;
|
|
2368
2270
|
/**
|
|
2369
2271
|
* Allows the background color of the radio button to be customized.
|
|
2370
2272
|
*/
|
|
2371
|
-
radioBackground?:
|
|
2273
|
+
radioBackground?: OakUiRoleToken;
|
|
2372
2274
|
/**
|
|
2373
2275
|
* Allows the width of the radio button border to be customized when the radio button is checked.
|
|
2374
2276
|
*/
|
|
2375
|
-
checkedRadioBorderWidth?:
|
|
2277
|
+
checkedRadioBorderWidth?: OakBorderWidthToken;
|
|
2376
2278
|
} & {
|
|
2377
2279
|
children?: React__default.ReactNode;
|
|
2378
2280
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2379
|
-
onClick?: React__default.MouseEventHandler
|
|
2281
|
+
onClick?: React__default.MouseEventHandler;
|
|
2380
2282
|
} & {
|
|
2381
2283
|
$labelAlignItems?: FlexStyleProps["$alignItems"];
|
|
2382
2284
|
$labelGap?: FlexStyleProps["$gap"];
|
|
2383
|
-
disabled?: boolean
|
|
2285
|
+
disabled?: boolean;
|
|
2384
2286
|
} & React__default.RefAttributes<HTMLInputElement>>;
|
|
2385
2287
|
|
|
2386
2288
|
type RadioContextType = {
|
|
@@ -2438,42 +2340,42 @@ declare const OakSecondaryButtonAsRadio: ({ children, value, }: OakSecondaryButt
|
|
|
2438
2340
|
declare const IconUp: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
2439
2341
|
children?: React__default.ReactNode;
|
|
2440
2342
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2441
|
-
onClick?: React__default.MouseEventHandler
|
|
2343
|
+
onClick?: React__default.MouseEventHandler;
|
|
2442
2344
|
} & {
|
|
2443
|
-
$flexDirection?: ResponsiveValues<
|
|
2444
|
-
$flexWrap?: ResponsiveValues<
|
|
2445
|
-
$alignItems?: ResponsiveValues<
|
|
2446
|
-
$alignContent?: ResponsiveValues<
|
|
2447
|
-
$justifyContent?: ResponsiveValues<
|
|
2448
|
-
$alignSelf?: ResponsiveValues<
|
|
2449
|
-
$flexGrow?: ResponsiveValues<
|
|
2450
|
-
$flexShrink?: ResponsiveValues<
|
|
2451
|
-
$order?: ResponsiveValues<
|
|
2345
|
+
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2346
|
+
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2347
|
+
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
2348
|
+
$alignContent?: ResponsiveValues<React__default.CSSProperties["alignContent"]>;
|
|
2349
|
+
$justifyContent?: ResponsiveValues<React__default.CSSProperties["justifyContent"]>;
|
|
2350
|
+
$alignSelf?: ResponsiveValues<React__default.CSSProperties["alignSelf"]>;
|
|
2351
|
+
$flexGrow?: ResponsiveValues<React__default.CSSProperties["flexGrow"]>;
|
|
2352
|
+
$flexShrink?: ResponsiveValues<React__default.CSSProperties["flexShrink"]>;
|
|
2353
|
+
$order?: ResponsiveValues<React__default.CSSProperties["order"]>;
|
|
2452
2354
|
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
2453
|
-
$gap?: ResponsiveValues<
|
|
2454
|
-
$columnGap?: ResponsiveValues<
|
|
2455
|
-
$rowGap?: ResponsiveValues<
|
|
2456
|
-
focusable?: boolean
|
|
2355
|
+
$gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2356
|
+
$columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2357
|
+
$rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2358
|
+
focusable?: boolean;
|
|
2457
2359
|
}, never>;
|
|
2458
2360
|
declare const IconDown: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
2459
2361
|
children?: React__default.ReactNode;
|
|
2460
2362
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2461
|
-
onClick?: React__default.MouseEventHandler
|
|
2363
|
+
onClick?: React__default.MouseEventHandler;
|
|
2462
2364
|
} & {
|
|
2463
|
-
$flexDirection?: ResponsiveValues<
|
|
2464
|
-
$flexWrap?: ResponsiveValues<
|
|
2465
|
-
$alignItems?: ResponsiveValues<
|
|
2466
|
-
$alignContent?: ResponsiveValues<
|
|
2467
|
-
$justifyContent?: ResponsiveValues<
|
|
2468
|
-
$alignSelf?: ResponsiveValues<
|
|
2469
|
-
$flexGrow?: ResponsiveValues<
|
|
2470
|
-
$flexShrink?: ResponsiveValues<
|
|
2471
|
-
$order?: ResponsiveValues<
|
|
2365
|
+
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2366
|
+
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2367
|
+
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
2368
|
+
$alignContent?: ResponsiveValues<React__default.CSSProperties["alignContent"]>;
|
|
2369
|
+
$justifyContent?: ResponsiveValues<React__default.CSSProperties["justifyContent"]>;
|
|
2370
|
+
$alignSelf?: ResponsiveValues<React__default.CSSProperties["alignSelf"]>;
|
|
2371
|
+
$flexGrow?: ResponsiveValues<React__default.CSSProperties["flexGrow"]>;
|
|
2372
|
+
$flexShrink?: ResponsiveValues<React__default.CSSProperties["flexShrink"]>;
|
|
2373
|
+
$order?: ResponsiveValues<React__default.CSSProperties["order"]>;
|
|
2472
2374
|
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
2473
|
-
$gap?: ResponsiveValues<
|
|
2474
|
-
$columnGap?: ResponsiveValues<
|
|
2475
|
-
$rowGap?: ResponsiveValues<
|
|
2476
|
-
focusable?: boolean
|
|
2375
|
+
$gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2376
|
+
$columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2377
|
+
$rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2378
|
+
focusable?: boolean;
|
|
2477
2379
|
}, never>;
|
|
2478
2380
|
type OakSelectProps = {
|
|
2479
2381
|
id?: string;
|
|
@@ -2792,24 +2694,24 @@ declare const oakFlexCss: styled_components.FlattenInterpolation<styled_componen
|
|
|
2792
2694
|
* to add it to Box instead, as this component extends that.
|
|
2793
2695
|
*/
|
|
2794
2696
|
declare const OakFlex: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
2795
|
-
children?: React
|
|
2697
|
+
children?: React.ReactNode;
|
|
2796
2698
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2797
|
-
onClick?: React$1.MouseEventHandler
|
|
2699
|
+
onClick?: React$1.MouseEventHandler;
|
|
2798
2700
|
} & {
|
|
2799
|
-
$flexDirection?: ResponsiveValues<
|
|
2800
|
-
$flexWrap?: ResponsiveValues<
|
|
2801
|
-
$alignItems?: ResponsiveValues<
|
|
2802
|
-
$alignContent?: ResponsiveValues<
|
|
2803
|
-
$justifyContent?: ResponsiveValues<
|
|
2804
|
-
$alignSelf?: ResponsiveValues<
|
|
2805
|
-
$flexGrow?: ResponsiveValues<
|
|
2806
|
-
$flexShrink?: ResponsiveValues<
|
|
2807
|
-
$order?: ResponsiveValues<
|
|
2701
|
+
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2702
|
+
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2703
|
+
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
2704
|
+
$alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
|
|
2705
|
+
$justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
|
|
2706
|
+
$alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
|
|
2707
|
+
$flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
|
|
2708
|
+
$flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
|
|
2709
|
+
$order?: ResponsiveValues<React$1.CSSProperties["order"]>;
|
|
2808
2710
|
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
2809
|
-
$gap?: ResponsiveValues<
|
|
2810
|
-
$columnGap?: ResponsiveValues<
|
|
2811
|
-
$rowGap?: ResponsiveValues<
|
|
2812
|
-
focusable?: boolean
|
|
2711
|
+
$gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2712
|
+
$columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2713
|
+
$rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2714
|
+
focusable?: boolean;
|
|
2813
2715
|
}, never>;
|
|
2814
2716
|
|
|
2815
2717
|
type OakGridProps = OakBoxProps & {
|
|
@@ -2856,22 +2758,22 @@ type OakGridProps = OakBoxProps & {
|
|
|
2856
2758
|
* Defaults to a 12 column grid
|
|
2857
2759
|
*/
|
|
2858
2760
|
declare const OakGrid: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
2859
|
-
children?: React
|
|
2761
|
+
children?: React.ReactNode;
|
|
2860
2762
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2861
|
-
onClick?: React$1.MouseEventHandler
|
|
2763
|
+
onClick?: React$1.MouseEventHandler;
|
|
2862
2764
|
} & {
|
|
2863
2765
|
/**
|
|
2864
2766
|
* Applies `row-gap` to the grid
|
|
2865
2767
|
*
|
|
2866
2768
|
* Accepts a spacing token or a responsive array of spacing tokens.
|
|
2867
2769
|
*/
|
|
2868
|
-
$rg?: ResponsiveValues<OakCombinedSpacingToken
|
|
2770
|
+
$rg?: ResponsiveValues<OakCombinedSpacingToken>;
|
|
2869
2771
|
/**
|
|
2870
2772
|
* Applies `column-gap` to the grid
|
|
2871
2773
|
*
|
|
2872
2774
|
* Accepts a spacing token or a responsive array of spacing tokens.
|
|
2873
2775
|
*/
|
|
2874
|
-
$cg?: ResponsiveValues<OakCombinedSpacingToken
|
|
2776
|
+
$cg?: ResponsiveValues<OakCombinedSpacingToken>;
|
|
2875
2777
|
/**
|
|
2876
2778
|
* Applies `grid-auto-rows` to the grid
|
|
2877
2779
|
*
|
|
@@ -2946,24 +2848,24 @@ type OakGridAreaProps = {
|
|
|
2946
2848
|
*
|
|
2947
2849
|
*/
|
|
2948
2850
|
declare const OakGridArea: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
2949
|
-
children?: React
|
|
2851
|
+
children?: React.ReactNode;
|
|
2950
2852
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2951
|
-
onClick?: React$1.MouseEventHandler
|
|
2853
|
+
onClick?: React$1.MouseEventHandler;
|
|
2952
2854
|
} & {
|
|
2953
|
-
$flexDirection?: ResponsiveValues<
|
|
2954
|
-
$flexWrap?: ResponsiveValues<
|
|
2955
|
-
$alignItems?: ResponsiveValues<
|
|
2956
|
-
$alignContent?: ResponsiveValues<
|
|
2957
|
-
$justifyContent?: ResponsiveValues<
|
|
2958
|
-
$alignSelf?: ResponsiveValues<
|
|
2959
|
-
$flexGrow?: ResponsiveValues<
|
|
2960
|
-
$flexShrink?: ResponsiveValues<
|
|
2961
|
-
$order?: ResponsiveValues<
|
|
2855
|
+
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2856
|
+
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2857
|
+
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
2858
|
+
$alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
|
|
2859
|
+
$justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
|
|
2860
|
+
$alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
|
|
2861
|
+
$flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
|
|
2862
|
+
$flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
|
|
2863
|
+
$order?: ResponsiveValues<React$1.CSSProperties["order"]>;
|
|
2962
2864
|
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
2963
|
-
$gap?: ResponsiveValues<
|
|
2964
|
-
$columnGap?: ResponsiveValues<
|
|
2965
|
-
$rowGap?: ResponsiveValues<
|
|
2966
|
-
focusable?: boolean
|
|
2865
|
+
$gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2866
|
+
$columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2867
|
+
$rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2868
|
+
focusable?: boolean;
|
|
2967
2869
|
} & {
|
|
2968
2870
|
/**
|
|
2969
2871
|
* Determines the number of columns the element should span.
|
|
@@ -2976,7 +2878,7 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
|
|
|
2976
2878
|
*
|
|
2977
2879
|
* Accepts a value from 0-12 or a responsive value of 0-12.
|
|
2978
2880
|
*/
|
|
2979
|
-
$rowSpan?: ResponsiveValues<ColRowSpan
|
|
2881
|
+
$rowSpan?: ResponsiveValues<ColRowSpan>;
|
|
2980
2882
|
/**
|
|
2981
2883
|
* Sets the order of the element.
|
|
2982
2884
|
*
|
|
@@ -2988,19 +2890,19 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
|
|
|
2988
2890
|
*
|
|
2989
2891
|
* Accepts a value from 0-12 or a responsive value of 0-12.
|
|
2990
2892
|
*/
|
|
2991
|
-
$colStart?: ResponsiveValues<ColRowSpan
|
|
2893
|
+
$colStart?: ResponsiveValues<ColRowSpan>;
|
|
2992
2894
|
/**
|
|
2993
2895
|
* The end column of the element.
|
|
2994
2896
|
*
|
|
2995
2897
|
* Accepts a value from 0-12 or a responsive value of 0-12.
|
|
2996
2898
|
*/
|
|
2997
|
-
$colEnd?: ResponsiveValues<ColRowSpan
|
|
2899
|
+
$colEnd?: ResponsiveValues<ColRowSpan>;
|
|
2998
2900
|
/**
|
|
2999
2901
|
* The start row of the element.
|
|
3000
2902
|
*
|
|
3001
2903
|
* Accepts a value from 0-12 or a responsive value of 0-12.
|
|
3002
2904
|
*/
|
|
3003
|
-
$rowStart?: ResponsiveValues<ColRowSpan
|
|
2905
|
+
$rowStart?: ResponsiveValues<ColRowSpan>;
|
|
3004
2906
|
}, never>;
|
|
3005
2907
|
|
|
3006
2908
|
/**
|
|
@@ -3011,24 +2913,24 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
|
|
|
3011
2913
|
* with different background colors / image url.
|
|
3012
2914
|
*/
|
|
3013
2915
|
declare const OakMaxWidth: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
3014
|
-
children?: React
|
|
2916
|
+
children?: React.ReactNode;
|
|
3015
2917
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
3016
|
-
onClick?: React$1.MouseEventHandler
|
|
2918
|
+
onClick?: React$1.MouseEventHandler;
|
|
3017
2919
|
} & {
|
|
3018
|
-
$flexDirection?: ResponsiveValues<
|
|
3019
|
-
$flexWrap?: ResponsiveValues<
|
|
3020
|
-
$alignItems?: ResponsiveValues<
|
|
3021
|
-
$alignContent?: ResponsiveValues<
|
|
3022
|
-
$justifyContent?: ResponsiveValues<
|
|
3023
|
-
$alignSelf?: ResponsiveValues<
|
|
3024
|
-
$flexGrow?: ResponsiveValues<
|
|
3025
|
-
$flexShrink?: ResponsiveValues<
|
|
3026
|
-
$order?: ResponsiveValues<
|
|
2920
|
+
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2921
|
+
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2922
|
+
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
2923
|
+
$alignContent?: ResponsiveValues<React$1.CSSProperties["alignContent"]>;
|
|
2924
|
+
$justifyContent?: ResponsiveValues<React$1.CSSProperties["justifyContent"]>;
|
|
2925
|
+
$alignSelf?: ResponsiveValues<React$1.CSSProperties["alignSelf"]>;
|
|
2926
|
+
$flexGrow?: ResponsiveValues<React$1.CSSProperties["flexGrow"]>;
|
|
2927
|
+
$flexShrink?: ResponsiveValues<React$1.CSSProperties["flexShrink"]>;
|
|
2928
|
+
$order?: ResponsiveValues<React$1.CSSProperties["order"]>;
|
|
3027
2929
|
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
3028
|
-
$gap?: ResponsiveValues<
|
|
3029
|
-
$columnGap?: ResponsiveValues<
|
|
3030
|
-
$rowGap?: ResponsiveValues<
|
|
3031
|
-
focusable?: boolean
|
|
2930
|
+
$gap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2931
|
+
$columnGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2932
|
+
$rowGap?: ResponsiveValues<OakAllSpacingToken | OakSpaceBetweenToken | null | undefined>;
|
|
2933
|
+
focusable?: boolean;
|
|
3032
2934
|
}, never>;
|
|
3033
2935
|
|
|
3034
2936
|
type OakAccordionProps = {
|
|
@@ -3138,7 +3040,7 @@ type OakHeadingProps = TypographyStyleProps & OakHeadingTagProps & ColorStylePro
|
|
|
3138
3040
|
* Use the controls to view different font styles.
|
|
3139
3041
|
*
|
|
3140
3042
|
*/
|
|
3141
|
-
declare const OakHeading: styled_components.StyledComponent<React__default.FC<OakHeadingTagProps>, styled_components.DefaultTheme,
|
|
3043
|
+
declare const OakHeading: styled_components.StyledComponent<React__default.FC<OakHeadingTagProps>, styled_components.DefaultTheme, OakHeadingProps, never>;
|
|
3142
3044
|
|
|
3143
3045
|
type OakInlineBannerTypes = "info" | "neutral" | "success" | "alert" | "error" | "warning";
|
|
3144
3046
|
type OakInlineBannerVariants = "regular" | "large";
|
|
@@ -3422,9 +3324,9 @@ type OakFocusIndicatorProps = {
|
|
|
3422
3324
|
* Wrap focusable components `<a/>`/`<button/>` and this will add focus styles then the inner element is focused
|
|
3423
3325
|
*/
|
|
3424
3326
|
declare const OakFocusIndicator: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
3425
|
-
children?: React
|
|
3327
|
+
children?: React.ReactNode;
|
|
3426
3328
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
3427
|
-
onClick?: React$1.MouseEventHandler
|
|
3329
|
+
onClick?: React$1.MouseEventHandler;
|
|
3428
3330
|
} & OakFocusIndicatorProps, never>;
|
|
3429
3331
|
|
|
3430
3332
|
type InternalStyledSvgProps = {
|
|
@@ -3767,7 +3669,7 @@ type OakUnitListItemProps<element extends ElementType> = {
|
|
|
3767
3669
|
*
|
|
3768
3670
|
* OakUnitsListItem component used as links for unit cards
|
|
3769
3671
|
*/
|
|
3770
|
-
declare const OakUnitListItem: <element extends
|
|
3672
|
+
declare const OakUnitListItem: <element extends ElementType = "a">(props: OakUnitListItemProps<element>) => React__default.JSX.Element;
|
|
3771
3673
|
|
|
3772
3674
|
type OakUnitListOptionalityItemProps = {
|
|
3773
3675
|
unavailable?: boolean;
|
|
@@ -3877,7 +3779,7 @@ type OakSpanProps = ColorStyleProps & OpacityStyleProps & MarginStyleProps & Pad
|
|
|
3877
3779
|
* ## Usage
|
|
3878
3780
|
* Use this component when you want to apply styles to a piece of inline text.
|
|
3879
3781
|
*/
|
|
3880
|
-
declare const OakSpan: styled_components.StyledComponent<"span", styled_components.DefaultTheme,
|
|
3782
|
+
declare const OakSpan: styled_components.StyledComponent<"span", styled_components.DefaultTheme, OakSpanProps, never>;
|
|
3881
3783
|
|
|
3882
3784
|
type OakBulletListProps = {
|
|
3883
3785
|
listItems: string[];
|
|
@@ -3961,7 +3863,7 @@ type OakPupilJourneyListItemProps<C extends ElementType> = {
|
|
|
3961
3863
|
/**
|
|
3962
3864
|
* Enables navigation to the given section of a lesson as well as displaying current progress
|
|
3963
3865
|
*/
|
|
3964
|
-
declare const OakPupilJourneyListItem: <C extends
|
|
3866
|
+
declare const OakPupilJourneyListItem: <C extends ElementType = "a">(props: OakPupilJourneyListItemProps<C>) => React__default.JSX.Element;
|
|
3965
3867
|
|
|
3966
3868
|
type OakPupilJourneyListItemSubheadingProps = {
|
|
3967
3869
|
textSlot?: React__default.ReactNode;
|
|
@@ -3991,7 +3893,7 @@ type OakPupilJourneyOptionalityButtonProps<C extends ElementType> = {
|
|
|
3991
3893
|
/**
|
|
3992
3894
|
* Button for units with optionality it is only used as the child of the PupilJourneyOptionailityitem component
|
|
3993
3895
|
*/
|
|
3994
|
-
declare const OakPupilJourneyOptionalityButton: <C extends
|
|
3896
|
+
declare const OakPupilJourneyOptionalityButton: <C extends ElementType = "a">(props: OakPupilJourneyOptionalityButtonProps<C>) => React__default.JSX.Element;
|
|
3995
3897
|
|
|
3996
3898
|
type OakPupilJourneyOptionalityItemProps = {
|
|
3997
3899
|
children: React__default.ReactNode;
|
|
@@ -4060,11 +3962,7 @@ type OakPupilJourneyYearButtonProps = {
|
|
|
4060
3962
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
4061
3963
|
* called after a mouseEnter and mouseLeave event has happened
|
|
4062
3964
|
*/
|
|
4063
|
-
declare const OakPupilJourneyYearButton: <C extends
|
|
4064
|
-
phase: "primary" | "secondary";
|
|
4065
|
-
} & Omit<InternalShadowRectButtonProps, "font" | "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph"> & {
|
|
4066
|
-
element?: C | undefined;
|
|
4067
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
3965
|
+
declare const OakPupilJourneyYearButton: <C extends ElementType = "button">({ phase, element, ...rest }: OakPupilJourneyYearButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
4068
3966
|
|
|
4069
3967
|
type OakQuizHintProps = {
|
|
4070
3968
|
/**
|
|
@@ -4169,7 +4067,7 @@ type OakLessonNavItemProps<C extends ElementType> = BaseOakLessonNavItemProps<C>
|
|
|
4169
4067
|
/**
|
|
4170
4068
|
* Enables navigation to the given section of a lesson as well as displaying current progress
|
|
4171
4069
|
*/
|
|
4172
|
-
declare const OakLessonNavItem: <C extends
|
|
4070
|
+
declare const OakLessonNavItem: <C extends ElementType = "a">(props: OakLessonNavItemProps<C>) => React__default.JSX.Element;
|
|
4173
4071
|
|
|
4174
4072
|
type LessonSectionName = "intro" | "video";
|
|
4175
4073
|
type BaseOakLessonReviewItemProps$1 = {
|
|
@@ -4505,7 +4403,7 @@ type OakBackLinkProps<C extends ElementType> = {
|
|
|
4505
4403
|
* * Button `<OakBackLink as="button" onClick={() => goBack(-1)} />`
|
|
4506
4404
|
*
|
|
4507
4405
|
*/
|
|
4508
|
-
declare const OakBackLink: <C extends
|
|
4406
|
+
declare const OakBackLink: <C extends ElementType = "a">({ as, label, ...props }: OakBackLinkProps<C>) => React__default.JSX.Element;
|
|
4509
4407
|
|
|
4510
4408
|
type InternalCardProps = OakFlexProps;
|
|
4511
4409
|
|
|
@@ -4984,12 +4882,7 @@ type OakScaleImageButtonProps = Omit<InternalShadowRectButtonProps, "defaultText
|
|
|
4984
4882
|
* `onImageScaleCallback: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
|
|
4985
4883
|
*ą
|
|
4986
4884
|
*/
|
|
4987
|
-
declare const OakScaleImageButton: <C extends
|
|
4988
|
-
onImageScaleCallback: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
4989
|
-
isExpanded: boolean;
|
|
4990
|
-
} & {
|
|
4991
|
-
element?: C | undefined;
|
|
4992
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
4885
|
+
declare const OakScaleImageButton: <C extends ElementType = "button">({ onImageScaleCallback, isExpanded, }: OakScaleImageButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
4993
4886
|
|
|
4994
4887
|
type OakSignLanguageButtonProps = {
|
|
4995
4888
|
/**
|
|
@@ -5064,18 +4957,7 @@ type OakHomepageTabButtonProps = InternalButtonProps & {
|
|
|
5064
4957
|
isActive?: boolean;
|
|
5065
4958
|
showNewIcon?: boolean;
|
|
5066
4959
|
};
|
|
5067
|
-
declare const OakHomepageTabButton: <C extends
|
|
5068
|
-
isLoading?: boolean | undefined;
|
|
5069
|
-
} & {
|
|
5070
|
-
onHovered?: ((event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void) | undefined;
|
|
5071
|
-
} & {
|
|
5072
|
-
title: string;
|
|
5073
|
-
iconName: OakIconName;
|
|
5074
|
-
isActive?: boolean | undefined;
|
|
5075
|
-
showNewIcon?: boolean | undefined;
|
|
5076
|
-
} & {
|
|
5077
|
-
element?: C | undefined;
|
|
5078
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
4960
|
+
declare const OakHomepageTabButton: <C extends ElementType = "button">(props: OakHomepageTabButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
5079
4961
|
|
|
5080
4962
|
type OakInfoProps = {
|
|
5081
4963
|
/**
|
|
@@ -5129,46 +5011,46 @@ type OakMediaClipProps = {
|
|
|
5129
5011
|
isAudioClip?: boolean;
|
|
5130
5012
|
element?: "button" | "a";
|
|
5131
5013
|
};
|
|
5132
|
-
declare const StyledMediaClipImage: styled_components.StyledComponent<(<C extends React__default.ElementType = React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "
|
|
5014
|
+
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"> & {
|
|
5133
5015
|
src: string | next_dist_shared_lib_get_img_props.StaticImport;
|
|
5134
5016
|
alt: string;
|
|
5135
|
-
width?: number | `${number}
|
|
5136
|
-
height?: number | `${number}
|
|
5137
|
-
fill?: boolean
|
|
5138
|
-
loader?:
|
|
5139
|
-
quality?: number | `${number}
|
|
5140
|
-
priority?: boolean
|
|
5017
|
+
width?: number | `${number}`;
|
|
5018
|
+
height?: number | `${number}`;
|
|
5019
|
+
fill?: boolean;
|
|
5020
|
+
loader?: Image.ImageLoader;
|
|
5021
|
+
quality?: number | `${number}`;
|
|
5022
|
+
priority?: boolean;
|
|
5141
5023
|
loading?: "eager" | "lazy" | undefined;
|
|
5142
|
-
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue
|
|
5143
|
-
blurDataURL?: string
|
|
5144
|
-
unoptimized?: boolean
|
|
5145
|
-
overrideSrc?: string
|
|
5146
|
-
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete
|
|
5147
|
-
layout?: string
|
|
5148
|
-
objectFit?: string
|
|
5149
|
-
objectPosition?: string
|
|
5150
|
-
lazyBoundary?: string
|
|
5151
|
-
lazyRoot?: string
|
|
5152
|
-
} & 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" | "
|
|
5024
|
+
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue;
|
|
5025
|
+
blurDataURL?: string;
|
|
5026
|
+
unoptimized?: boolean;
|
|
5027
|
+
overrideSrc?: string;
|
|
5028
|
+
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete;
|
|
5029
|
+
layout?: string;
|
|
5030
|
+
objectFit?: string;
|
|
5031
|
+
objectPosition?: string;
|
|
5032
|
+
lazyBoundary?: string;
|
|
5033
|
+
lazyRoot?: string;
|
|
5034
|
+
} & 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"> & {
|
|
5153
5035
|
src: string | next_dist_shared_lib_get_img_props.StaticImport;
|
|
5154
5036
|
alt: string;
|
|
5155
|
-
width?: number | `${number}
|
|
5156
|
-
height?: number | `${number}
|
|
5157
|
-
fill?: boolean
|
|
5158
|
-
loader?:
|
|
5159
|
-
quality?: number | `${number}
|
|
5160
|
-
priority?: boolean
|
|
5037
|
+
width?: number | `${number}`;
|
|
5038
|
+
height?: number | `${number}`;
|
|
5039
|
+
fill?: boolean;
|
|
5040
|
+
loader?: Image.ImageLoader;
|
|
5041
|
+
quality?: number | `${number}`;
|
|
5042
|
+
priority?: boolean;
|
|
5161
5043
|
loading?: "eager" | "lazy" | undefined;
|
|
5162
|
-
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue
|
|
5163
|
-
blurDataURL?: string
|
|
5164
|
-
unoptimized?: boolean
|
|
5165
|
-
overrideSrc?: string
|
|
5166
|
-
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete
|
|
5167
|
-
layout?: string
|
|
5168
|
-
objectFit?: string
|
|
5169
|
-
objectPosition?: string
|
|
5170
|
-
lazyBoundary?: string
|
|
5171
|
-
lazyRoot?: string
|
|
5044
|
+
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue;
|
|
5045
|
+
blurDataURL?: string;
|
|
5046
|
+
unoptimized?: boolean;
|
|
5047
|
+
overrideSrc?: string;
|
|
5048
|
+
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete;
|
|
5049
|
+
layout?: string;
|
|
5050
|
+
objectFit?: string;
|
|
5051
|
+
objectPosition?: string;
|
|
5052
|
+
lazyBoundary?: string;
|
|
5053
|
+
lazyRoot?: string;
|
|
5172
5054
|
} & React__default.RefAttributes<HTMLImageElement | null>>>, "as"> & {
|
|
5173
5055
|
$showOakPlaceholder: boolean;
|
|
5174
5056
|
}, never>;
|
|
@@ -5262,13 +5144,7 @@ type OakSubjectIconButtonProps = {
|
|
|
5262
5144
|
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
|
|
5263
5145
|
* called after a mouseEnter and mouseLeave event has happened
|
|
5264
5146
|
*/
|
|
5265
|
-
declare const OakSubjectIconButton: <C extends
|
|
5266
|
-
phase: "primary" | "secondary" | "non-curriculum";
|
|
5267
|
-
subjectIconName: OakIconName;
|
|
5268
|
-
variant: "vertical" | "horizontal";
|
|
5269
|
-
} & Omit<InternalShadowRectButtonProps, "font" | "defaultBackground" | "defaultBorderColor" | "defaultTextColor" | "disabledTextColor" | "hoverTextColor" | "hoverBackground" | "hoverBorderColor" | "disabledBackground" | "disabledBorderColor" | "pv" | "ph"> & {
|
|
5270
|
-
element?: C | undefined;
|
|
5271
|
-
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
5147
|
+
declare const OakSubjectIconButton: <C extends ElementType = "button">({ phase, element, subjectIconName, variant, ...rest }: OakSubjectIconButtonProps & PolymorphicPropsWithoutRef<C>) => React__default.JSX.Element;
|
|
5272
5148
|
|
|
5273
5149
|
type OakVideoTranscriptProps = {
|
|
5274
5150
|
/**
|
|
@@ -5313,7 +5189,7 @@ type OakCloudinaryImageProps = Omit<OakImageProps<typeof CldImage>, "src" | "ima
|
|
|
5313
5189
|
* See https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters
|
|
5314
5190
|
* for documentation of the config object.
|
|
5315
5191
|
*/
|
|
5316
|
-
declare const OakCloudinaryConfigProvider: React__default.Provider<
|
|
5192
|
+
declare const OakCloudinaryConfigProvider: React__default.Provider<_cloudinary_util_url_loader.CloudinaryConfigurationOptions | undefined>;
|
|
5317
5193
|
/**
|
|
5318
5194
|
* OakCloudinaryImage wraps OakImage providing responsive images from Cloudinary
|
|
5319
5195
|
* based on the `sizes` prop.
|
|
@@ -5365,26 +5241,7 @@ type OakLIProps = OakFlexProps & TypographyStyleProps & ListStyleProps & Display
|
|
|
5365
5241
|
declare const oakLIDefaults: {
|
|
5366
5242
|
$display: "revert";
|
|
5367
5243
|
};
|
|
5368
|
-
declare const OakLI: styled_components.StyledComponent<"li", styled_components.DefaultTheme,
|
|
5369
|
-
$flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
|
|
5370
|
-
$flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
|
|
5371
|
-
$alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
|
|
5372
|
-
$alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
|
|
5373
|
-
$justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
|
|
5374
|
-
$alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
|
|
5375
|
-
$flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
|
|
5376
|
-
$flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
|
|
5377
|
-
$order?: ResponsiveValues<csstype.Property.Order | undefined>;
|
|
5378
|
-
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
5379
|
-
$gap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5380
|
-
$columnGap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5381
|
-
$rowGap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5382
|
-
focusable?: boolean | undefined;
|
|
5383
|
-
} & {
|
|
5384
|
-
children?: React$1.ReactNode;
|
|
5385
|
-
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
5386
|
-
onClick?: React$1.MouseEventHandler | undefined;
|
|
5387
|
-
} & ListStyleProps, never>;
|
|
5244
|
+
declare const OakLI: styled_components.StyledComponent<"li", styled_components.DefaultTheme, OakLIProps, never>;
|
|
5388
5245
|
|
|
5389
5246
|
type OakOLProps = MarginStyleProps & ColorStyleProps & TypographyStyleProps;
|
|
5390
5247
|
/**
|
|
@@ -5395,7 +5252,7 @@ type OakOLProps = MarginStyleProps & ColorStyleProps & TypographyStyleProps;
|
|
|
5395
5252
|
* Use where we have an ordered list to ensure numbers are styled
|
|
5396
5253
|
*
|
|
5397
5254
|
* */
|
|
5398
|
-
declare const OakOL: styled_components.StyledComponent<"ol", styled_components.DefaultTheme,
|
|
5255
|
+
declare const OakOL: styled_components.StyledComponent<"ol", styled_components.DefaultTheme, OakOLProps, never>;
|
|
5399
5256
|
|
|
5400
5257
|
type OakPProps = MarginStyleProps & TypographyStyleProps & ColorStyleProps;
|
|
5401
5258
|
/**
|
|
@@ -5405,7 +5262,7 @@ type OakPProps = MarginStyleProps & TypographyStyleProps & ColorStyleProps;
|
|
|
5405
5262
|
* However, if you want different styles for a particular paragraph,
|
|
5406
5263
|
* you can use this component to apply additional styles.
|
|
5407
5264
|
*/
|
|
5408
|
-
declare const OakP: styled_components.StyledComponent<"p", styled_components.DefaultTheme,
|
|
5265
|
+
declare const OakP: styled_components.StyledComponent<"p", styled_components.DefaultTheme, OakPProps, never>;
|
|
5409
5266
|
|
|
5410
5267
|
type OakTypographyProps = OakBoxProps & TypographyStyleProps;
|
|
5411
5268
|
/**
|
|
@@ -5416,9 +5273,9 @@ type OakTypographyProps = OakBoxProps & TypographyStyleProps;
|
|
|
5416
5273
|
* Use this component whenever you want to style blocks of 'body' text.
|
|
5417
5274
|
*/
|
|
5418
5275
|
declare const OakTypography: styled_components.StyledComponent<"div", styled_components.DefaultTheme, {
|
|
5419
|
-
children?: React
|
|
5276
|
+
children?: React.ReactNode;
|
|
5420
5277
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
5421
|
-
onClick?: React$1.MouseEventHandler
|
|
5278
|
+
onClick?: React$1.MouseEventHandler;
|
|
5422
5279
|
}, never>;
|
|
5423
5280
|
|
|
5424
5281
|
type OakULProps = OakBoxProps & OakFlexProps & {
|
|
@@ -5432,34 +5289,11 @@ type OakULProps = OakBoxProps & OakFlexProps & {
|
|
|
5432
5289
|
* Resets browser spacing and other styles, accepts BoxProps' style props.
|
|
5433
5290
|
*
|
|
5434
5291
|
* */
|
|
5435
|
-
declare const OakUL: styled_components.StyledComponent<"ul", styled_components.DefaultTheme,
|
|
5436
|
-
children?: React$1.ReactNode;
|
|
5437
|
-
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
5438
|
-
onClick?: React$1.MouseEventHandler | undefined;
|
|
5439
|
-
} & {
|
|
5440
|
-
$flexDirection?: ResponsiveValues<csstype.Property.FlexDirection | undefined>;
|
|
5441
|
-
$flexWrap?: ResponsiveValues<csstype.Property.FlexWrap | undefined>;
|
|
5442
|
-
$alignItems?: ResponsiveValues<csstype.Property.AlignItems | undefined>;
|
|
5443
|
-
$alignContent?: ResponsiveValues<csstype.Property.AlignContent | undefined>;
|
|
5444
|
-
$justifyContent?: ResponsiveValues<csstype.Property.JustifyContent | undefined>;
|
|
5445
|
-
$alignSelf?: ResponsiveValues<csstype.Property.AlignSelf | undefined>;
|
|
5446
|
-
$flexGrow?: ResponsiveValues<csstype.Property.FlexGrow | undefined>;
|
|
5447
|
-
$flexShrink?: ResponsiveValues<csstype.Property.FlexShrink | undefined>;
|
|
5448
|
-
$order?: ResponsiveValues<csstype.Property.Order | undefined>;
|
|
5449
|
-
$flexBasis?: ResponsiveValues<OakCombinedSpacingToken | null | undefined>;
|
|
5450
|
-
$gap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5451
|
-
$columnGap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5452
|
-
$rowGap?: ResponsiveValues<"spacing-0" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-20" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-2" | "spacing-92" | "spacing-100" | "spacing-120" | "spacing-160" | "spacing-180" | "spacing-240" | "spacing-360" | "spacing-480" | "spacing-640" | "spacing-960" | "spacing-1280" | "spacing-1360" | null | undefined>;
|
|
5453
|
-
focusable?: boolean | undefined;
|
|
5454
|
-
} & {
|
|
5455
|
-
$reset?: boolean | undefined;
|
|
5456
|
-
}, never>;
|
|
5292
|
+
declare const OakUL: styled_components.StyledComponent<"ul", styled_components.DefaultTheme, OakULProps, never>;
|
|
5457
5293
|
|
|
5458
|
-
type
|
|
5294
|
+
type UnstyledChevronAccordionCommonProps = {
|
|
5459
5295
|
/** The header of the accordion. */
|
|
5460
5296
|
header: ReactNode;
|
|
5461
|
-
/** Whether the accordion should be open initially. */
|
|
5462
|
-
isInitiallyOpen?: boolean;
|
|
5463
5297
|
/** The content of the accordion. */
|
|
5464
5298
|
content: ReactNode;
|
|
5465
5299
|
/** Optional subheader to display above the fold. */
|
|
@@ -5471,13 +5305,29 @@ type UnstyledChevronAccordionProps = {
|
|
|
5471
5305
|
/** Aria label for the button when the accordion is closed. */
|
|
5472
5306
|
ariaLabelClose?: string;
|
|
5473
5307
|
} & FlexStyleProps & OakBoxProps & ColorStyleProps;
|
|
5308
|
+
type UnstyledChevronAccordionUncontrolledProps = {
|
|
5309
|
+
/** Whether the accordion should be open initially. Uncontrolled usage only. */
|
|
5310
|
+
isInitiallyOpen?: boolean;
|
|
5311
|
+
isOpen?: never;
|
|
5312
|
+
onOpenChange?: never;
|
|
5313
|
+
};
|
|
5314
|
+
type UnstyledChevronAccordionControlledProps = {
|
|
5315
|
+
isInitiallyOpen?: never;
|
|
5316
|
+
/** Controlled open state. Must be paired with `onOpenChange`. */
|
|
5317
|
+
isOpen: boolean;
|
|
5318
|
+
/** Called when the user toggles the accordion. Required when `isOpen` is provided. */
|
|
5319
|
+
onOpenChange: (open: boolean) => void;
|
|
5320
|
+
};
|
|
5321
|
+
type UnstyledChevronAccordionProps = UnstyledChevronAccordionCommonProps & (UnstyledChevronAccordionUncontrolledProps | UnstyledChevronAccordionControlledProps);
|
|
5474
5322
|
/**
|
|
5475
5323
|
* - UnstyledChevronAccordion has a chevron icon that rotates when the accordion is open.
|
|
5476
5324
|
* - Unlike InternalChevronAccordion, it has no border effects for hover or focus states.
|
|
5477
5325
|
* - Only the chevron is interactive so as to allow interactive elements to be placed in the header.
|
|
5478
5326
|
* - The intention is for these to be added by consuming components as needed.
|
|
5327
|
+
* - Can be used as an uncontrolled component (via `isInitiallyOpen`) or as a
|
|
5328
|
+
* controlled component (via `isOpen` + `onOpenChange`).
|
|
5479
5329
|
*/
|
|
5480
|
-
declare const UnstyledChevronAccordion: (
|
|
5330
|
+
declare const UnstyledChevronAccordion: (props: UnstyledChevronAccordionProps) => React__default.JSX.Element;
|
|
5481
5331
|
|
|
5482
5332
|
/**
|
|
5483
5333
|
*
|
|
@@ -5524,4 +5374,5 @@ declare const useIsScrolled: () => {
|
|
|
5524
5374
|
|
|
5525
5375
|
declare const useBreakpoint: () => Device;
|
|
5526
5376
|
|
|
5527
|
-
export {
|
|
5377
|
+
export { HeadingTagComponent, IconDown, IconUp, OakAccordion, OakAnchorTarget, OakAspectRatio, OakBackLink, OakBasicAccordion, OakBox, OakBreadcrumbs, OakBulletList, OakButtonAsRadioGroup, OakButtonWithDropdown, OakCaptionCard, OakCaptionSearch, OakCard, OakCardHeader, OakCardWithHandDrawnBorder, OakCarousel, OakCheckBox, OakCloseButton, OakCloudinaryConfigProvider, OakCloudinaryImage, OakCodeRenderer, OakCollapsibleContent, OakCookieBanner, OakCookieConsent, OakCookieConsentContext, OakCookieConsentProvider, OakCookieSettingsModal, OakCopyLinkButton, OakDownloadCard, OakDownloadsAccordion, OakDownloadsJourneyChildSubjectTierSelector, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, OakDroppable, OakFieldError, OakFieldset, OakFilterDrawer, OakFlex, OakFocusIndicator, OakForm, OakFormInput, OakFormInputWithLabels, OakGlobalStyle, OakGrid, OakGridArea, OakHandDrawnCard, OakHandDrawnCardWithIcon, OakHandDrawnFocusUnderline, OakHandDrawnHR, OakHeaderHero, OakHeading, OakHintButton, OakHomepageTabButton, OakHoverLink, OakIcon, OakImage, OakInfo, OakInfoButton, OakInformativeModal, OakInformativeModalBody, OakInformativeModalBorderColor, OakInformativeModalFooter, OakInlineBanner, OakInlineRegistrationBanner, OakJauntyAngleLabel, OakKbd, OakLI, OakLabel, OakLeftAlignedButton, OakLessonBottomNav, OakLessonInfoCard, OakLessonLayout, OakLessonNavItem, OakLessonReviewIntroVideo, OakLessonReviewItem, OakLessonReviewQuiz, OakLessonTopNav, OakLessonVideoTranscript, OakLink, OakLinkCard, OakListItem, OakLoadingSpinner, OakMaxWidth, OakMediaClip, OakMediaClipList, OakMediaClipListAccordion, OakMediaClipStackListItem, OakModalCenter, OakModalCenterBody, OakMultilineText, OakOL, OakOptGroup, OakOption, OakOutlineAccordion, OakP, OakPagination, OakPrimaryButton, OakPrimaryInvertedButton, OakPrimaryNav, OakPrimaryNavItem, OakPromoTag, OakPupilJourneyContentGuidance, OakPupilJourneyHeader, OakPupilJourneyLayout, OakPupilJourneyList, OakPupilJourneyListCounter, OakPupilJourneyListItem, OakPupilJourneyListItemSubheading, OakPupilJourneyOptionalityButton, OakPupilJourneyOptionalityItem, OakPupilJourneyProgrammeOptions, OakPupilJourneyUnitsFilter, OakPupilJourneyYearButton, OakQuizCheckBox, OakQuizCounter, OakQuizFeedback, OakQuizHint, OakQuizMatch, OakQuizMatchItemId, OakQuizOrder, OakQuizOrderitemId, OakQuizPrintableHeader, OakQuizPrintableSubHeader, OakQuizRadioButton, OakQuizResultItem, OakQuizTextInput, OakQuote, OakRadioAsButton, OakRadioButton, OakRadioGroup, OakRadioTile, OakRoundIcon, OakSaveButton, OakSaveCount, OakScaleImageButton, OakScreenReader, OakSearchFilterCheckBox, OakSecondaryButton, OakSecondaryButtonAsRadio, OakSecondaryButtonWithDropdown, OakSecondaryLink, OakSelect, OakSideMenuNav, OakSideMenuNavLink, OakSignLanguageButton, OakSmallPrimaryButton, OakSmallPrimaryInvertedButton, OakSmallSecondaryButton, OakSmallSecondaryButtonWithDropdown, OakSmallSecondaryToggleButton, OakSmallTertiaryInvertedButton, OakSpan, OakStaticMessageCard, OakSubjectIcon, OakSubjectIconButton, OakSvg, OakTabs, OakTagFunctional, OakTeacherNotesInline, OakTeacherNotesModal, OakTertiaryButton, OakTertiaryInvertedButton, OakTertiaryOLNav, OakTextArea, OakTextInput, OakThemeProvider, OakTimer, OakToast, OakTooltip, OakTypography, OakUL, OakUnitListItem, OakUnitListOptionalityItem, OakUnitListOptionalityItemCard, OakVideoTranscript, RadioContext, ReviewItemContainer, ReviewItemTitleSection, StyledMediaClipImage, UnstyledChevronAccordion, announcements, bannerTypes, bannerVariants, colorSchemes, formatTimeCode, generateOakIconURL, getBackgroundUrlForSection, getDefaultContextState, installMockIntersectionObserver, installMockResizeObserver, isTileItem, isValidIconName, lessonSectionNames, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDarkTheme, oakDefaultTheme, oakDropShadowTokens, oakFlexCss, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakLIDefaults, oakOpacityTokens, oakPlaceholder, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens, oakZIndexTokens, parseBorder, parseBorderRadius, parseColor, parseColorFilter, parseDropShadow, parseFontSize, parseFontWeight, parseLetterSpacing, parseLineHeight, parseOpacity, parseSpacing, parseTransitions, parseZIndex, placeholderStyles, removedGuidanceDuplicates, rgbToHex, useBreakpoint, useCookieConsent, useDevice, useIsScrolled, useMediaQuery, useMounted };
|
|
5378
|
+
export type { BannerTypes, Consent, InternalQuizResultItemProps, LessonSectionName$1 as LessonSectionName, MenuItemProps, OakAccordionProps, OakAllSpacingToken, OakAnchorTargetProps, OakAspectRatioProps, OakBackLinkProps, OakBasicAccordionProps, OakBorderRadiusToken, OakBorderWidthToken, OakBoxProps, OakBreadcrumb, OakBreadcrumbWithoutHref, OakBreadcrumbsProps, OakBulletListProps, OakButtonWithDropdownProps, OakCaptionCardProps, OakCaptionSearchProps, OakCardHeaderprops, OakCardProps, OakCardWithHandDrawnBorderProps, OakCarouselProps, OakCheckBoxProps, OakCloseButtonProps, OakCloudinaryImageProps, OakCodeRendererProps, OakCollapsibleContentProps, OakColorFilterToken, OakColorToken, OakCombinedSpacingToken, OakCookieBannerProps, OakCookieConsentProps, OakCookieSettingsModalProps, OakDownloadCardProps, OakDownloadsAccordionProps, OakDownloadsJourneyChildSubjectTierSelectorProps, OakDropShadowToken, OakDroppableProps, OakFieldErrorProps, OakFieldsetProps, OakFlexProps, OakFocusIndicatorProps, OakFontSizeToken, OakFontToken, OakFormInputProps, OakFormInputWithLabelsProps, OakFormProps, OakGridAreaProps, OakGridProps, OakHandDrawnBoxWithIconProps, OakHandDrawnCardProps, OakHandDrawnFocusUnderlineProps, OakHandDrawnHRProps, OakHeaderHeroProps, OakHeadingProps, OakHeadingTag, OakHintButtonProps, OakHomepageTabButtonProps, OakHoverLinkProps, OakIconName, OakIconProps, OakImageProps, OakInfoButtonProps, OakInfoCardProps, OakInfoProps, OakInformativeModalBodyProps, OakInformativeModalCloseAction, OakInformativeModalFooterProps, OakInformativeModalProps, OakInlineBannerProps, OakInlineBannerTypes, OakInlineBannerVariantProps, OakInlineBannerVariants, OakInlineRegistrationBannerProps, OakInnerPaddingToken, OakJauntyAngleLabelProps, OakKbdProps, OakLIProps, OakLabelProps, OakLeftAlignedButtonProps, OakLessonBottomNavProps, OakLessonLayoutProps, OakLessonNavItemProps, OakLessonReviewIntroVideoProps, OakLessonReviewItemProps, OakLessonTopNavProps, OakLinkCardProps, OakLinkProps, OakListItemProps, OakLoadingSpinnerProps, OakMediaClipListProps, OakMediaClipProps, OakMediaClipStackListItemProps, OakModalCenterBodyProps, OakModalCenterProps, OakMultilineTextProps, OakOLProps, OakOpacityToken, OakOptGroupProps, OakOptionProps, OakOutlineAccordionProps, OakPProps, OakPaginationProps, OakPrimaryButtonProps, OakPrimaryInvertedButtonProps, OakPrimaryNavItemProps, OakPrimaryNavProps, OakPromoTagProps, OakPupilContentGuidance, OakPupilJourneyContentGuidanceProps, OakPupilJourneyHeaderProps, OakPupilJourneyLayoutProps, OakPupilJourneyListItemSubheadingProps, OakPupilJourneyListProps, OakPupilJourneyOptionalityItemProps, OakPupilJourneyProgrammeOptionsProps, OakPupilJourneyUnitsFilterProps, OakPupilJourneyYearButtonProps, OakQuizCheckBoxProps, OakQuizCounterProps, OakQuizFeedbackProps, OakQuizHintProps, OakQuizMatchProps, OakQuizOrderProps, OakQuizPrintableHeaderProps, OakQuizPrintableSubHeaderProps, OakQuizRadioButtonProps, OakQuoteProps, OakRadioAsButtonProps, OakRadioGroupProps, OakRadioTileProps, OakRoundIconProps, OakSaveButtonProps, OakSaveCountProps, OakScaleImageButtonProps, OakSearchFilterCheckBoxProps, OakSecondaryButtonAsRadioProps, OakSecondaryButtonProps, OakSecondaryButtonWithDropdownProps, OakSecondaryLinkProps, OakSelectProps, OakSideMenuNavLinkProps, OakSideMenuNavProps, OakSmallPrimaryButtonProps, OakSmallPrimaryInvertedButtonProps, OakSmallSecondaryButtonProps, OakSmallSecondaryButtonWithDropdownProps, OakSmallSecondaryToggleButtonProps, OakSmallTertiaryInvertedButtonProps, OakSolidBorderAccordionProps, OakSpaceBetweenToken, OakSpanProps, OakSubjectIconButtonProps, OakSubjectIconProps, OakSvgNames, OakSvgProps, OakTabsProps, OakTagFunctionalProps, OakTeacherNotesInlineProps, OakTeacherNotesModalProps, OakTertiaryOLNavProps, OakTextAreaProps, OakTextInputProps, OakTheme, OakThemeProviderProps, OakTimerProps, OakToastProps, OakTooltipProps, OakTransitionToken, OakTypographyProps, OakULProps, OakUiRoleToken, OakUnitListItemProps, OakUnitListOptionalityItemCardProps, OakUnitListOptionalityItemProps, OakZIndexToken, Phase$1 as Phase, PolicyConsent, PupilJourneySectionName, Subject, Tier, TileItem, UnstyledChevronAccordionProps };
|