@oaknational/oak-components 2.29.0 → 2.31.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 +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +113 -94
- package/package.json +1 -1
package/dist/types.d.ts
CHANGED
|
@@ -127,6 +127,107 @@ type Generic = string | number | undefined | null;
|
|
|
127
127
|
*/
|
|
128
128
|
declare const responsiveStyle: <Props, T extends Generic>(attr: string, getValues: (props: Props) => ResponsiveValues<T | undefined | null>, parse?: ((unparsed: T | undefined | null) => Generic) | ((unparsed: T | undefined | null) => (props: PropsWithTheme) => Generic)) => (props: Props) => Interpolation<ThemedStyledProps<Props, DefaultTheme>>;
|
|
129
129
|
|
|
130
|
+
declare const oakAllSpacingTokens: {
|
|
131
|
+
"spacing-0": number;
|
|
132
|
+
"spacing-2": number;
|
|
133
|
+
"spacing-4": number;
|
|
134
|
+
"spacing-8": number;
|
|
135
|
+
"spacing-12": number;
|
|
136
|
+
"spacing-16": number;
|
|
137
|
+
"spacing-20": number;
|
|
138
|
+
"spacing-24": number;
|
|
139
|
+
"spacing-32": number;
|
|
140
|
+
"spacing-40": number;
|
|
141
|
+
"spacing-48": number;
|
|
142
|
+
"spacing-56": number;
|
|
143
|
+
"spacing-64": number;
|
|
144
|
+
"spacing-72": number;
|
|
145
|
+
"spacing-80": number;
|
|
146
|
+
"spacing-92": number;
|
|
147
|
+
"spacing-100": number;
|
|
148
|
+
"spacing-120": number;
|
|
149
|
+
"spacing-160": number;
|
|
150
|
+
"spacing-180": number;
|
|
151
|
+
"spacing-240": number;
|
|
152
|
+
"spacing-360": number;
|
|
153
|
+
"spacing-480": number;
|
|
154
|
+
"spacing-640": number;
|
|
155
|
+
"spacing-960": number;
|
|
156
|
+
"spacing-1280": number;
|
|
157
|
+
"spacing-1360": number;
|
|
158
|
+
};
|
|
159
|
+
type OakAllSpacingToken = keyof typeof oakAllSpacingTokens;
|
|
160
|
+
declare const oakInnerPaddingTokens: {
|
|
161
|
+
"spacing-0": string;
|
|
162
|
+
"spacing-2": string;
|
|
163
|
+
"spacing-4": string;
|
|
164
|
+
"spacing-8": string;
|
|
165
|
+
"spacing-12": string;
|
|
166
|
+
"spacing-16": string;
|
|
167
|
+
"spacing-20": string;
|
|
168
|
+
"spacing-24": string;
|
|
169
|
+
"spacing-32": string;
|
|
170
|
+
"spacing-40": string;
|
|
171
|
+
"spacing-48": string;
|
|
172
|
+
"spacing-56": string;
|
|
173
|
+
"spacing-64": string;
|
|
174
|
+
"spacing-72": string;
|
|
175
|
+
"spacing-80": string;
|
|
176
|
+
};
|
|
177
|
+
type OakInnerPaddingToken = keyof typeof oakInnerPaddingTokens;
|
|
178
|
+
declare const oakSpaceBetweenTokens: {
|
|
179
|
+
"spacing-0": string;
|
|
180
|
+
"spacing-2": string;
|
|
181
|
+
"spacing-4": string;
|
|
182
|
+
"spacing-8": string;
|
|
183
|
+
"spacing-12": string;
|
|
184
|
+
"spacing-16": string;
|
|
185
|
+
"spacing-20": string;
|
|
186
|
+
"spacing-24": string;
|
|
187
|
+
"spacing-32": string;
|
|
188
|
+
"spacing-40": string;
|
|
189
|
+
"spacing-48": string;
|
|
190
|
+
"spacing-56": string;
|
|
191
|
+
"spacing-64": string;
|
|
192
|
+
"spacing-72": string;
|
|
193
|
+
"spacing-80": string;
|
|
194
|
+
};
|
|
195
|
+
type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
|
|
196
|
+
declare const additionalSpacingTokens: {
|
|
197
|
+
"100%": string;
|
|
198
|
+
"-50%": string;
|
|
199
|
+
"50%": string;
|
|
200
|
+
0: string;
|
|
201
|
+
"100vh": string;
|
|
202
|
+
"100vw": string;
|
|
203
|
+
auto: string;
|
|
204
|
+
"fit-content": string;
|
|
205
|
+
"max-content": string;
|
|
206
|
+
"min-content": string;
|
|
207
|
+
inherit: string;
|
|
208
|
+
initial: string;
|
|
209
|
+
unset: string;
|
|
210
|
+
};
|
|
211
|
+
type AdditionalSpacingTypes = keyof typeof additionalSpacingTokens;
|
|
212
|
+
type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
|
|
213
|
+
|
|
214
|
+
type ScrollMarginValue = OakAllSpacingToken | null | undefined;
|
|
215
|
+
type ScrollMarginValues = ResponsiveValues<ScrollMarginValue>;
|
|
216
|
+
type ScrollSnapStyleProps = {
|
|
217
|
+
/**
|
|
218
|
+
* Applies `scroll-margin-top` to the element
|
|
219
|
+
*
|
|
220
|
+
* Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
|
|
221
|
+
*/
|
|
222
|
+
$scrollMarginTop?: ScrollMarginValues;
|
|
223
|
+
/**
|
|
224
|
+
* Applies `scroll-margin-left` to the element
|
|
225
|
+
*
|
|
226
|
+
* Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
|
|
227
|
+
*/
|
|
228
|
+
$scrollMarginLeft?: ScrollMarginValues;
|
|
229
|
+
};
|
|
230
|
+
|
|
130
231
|
declare const oakZIndexTokens: {
|
|
131
232
|
readonly behind: -1;
|
|
132
233
|
readonly neutral: 0;
|
|
@@ -358,90 +459,6 @@ type ColorStyleProps = {
|
|
|
358
459
|
$background?: ColorToken;
|
|
359
460
|
};
|
|
360
461
|
|
|
361
|
-
declare const oakAllSpacingTokens: {
|
|
362
|
-
"spacing-0": number;
|
|
363
|
-
"spacing-2": number;
|
|
364
|
-
"spacing-4": number;
|
|
365
|
-
"spacing-8": number;
|
|
366
|
-
"spacing-12": number;
|
|
367
|
-
"spacing-16": number;
|
|
368
|
-
"spacing-20": number;
|
|
369
|
-
"spacing-24": number;
|
|
370
|
-
"spacing-32": number;
|
|
371
|
-
"spacing-40": number;
|
|
372
|
-
"spacing-48": number;
|
|
373
|
-
"spacing-56": number;
|
|
374
|
-
"spacing-64": number;
|
|
375
|
-
"spacing-72": number;
|
|
376
|
-
"spacing-80": number;
|
|
377
|
-
"spacing-92": number;
|
|
378
|
-
"spacing-100": number;
|
|
379
|
-
"spacing-120": number;
|
|
380
|
-
"spacing-160": number;
|
|
381
|
-
"spacing-180": number;
|
|
382
|
-
"spacing-240": number;
|
|
383
|
-
"spacing-360": number;
|
|
384
|
-
"spacing-480": number;
|
|
385
|
-
"spacing-640": number;
|
|
386
|
-
"spacing-960": number;
|
|
387
|
-
"spacing-1280": number;
|
|
388
|
-
"spacing-1360": number;
|
|
389
|
-
};
|
|
390
|
-
type OakAllSpacingToken = keyof typeof oakAllSpacingTokens;
|
|
391
|
-
declare const oakInnerPaddingTokens: {
|
|
392
|
-
"spacing-0": string;
|
|
393
|
-
"spacing-2": string;
|
|
394
|
-
"spacing-4": string;
|
|
395
|
-
"spacing-8": string;
|
|
396
|
-
"spacing-12": string;
|
|
397
|
-
"spacing-16": string;
|
|
398
|
-
"spacing-20": string;
|
|
399
|
-
"spacing-24": string;
|
|
400
|
-
"spacing-32": string;
|
|
401
|
-
"spacing-40": string;
|
|
402
|
-
"spacing-48": string;
|
|
403
|
-
"spacing-56": string;
|
|
404
|
-
"spacing-64": string;
|
|
405
|
-
"spacing-72": string;
|
|
406
|
-
"spacing-80": string;
|
|
407
|
-
};
|
|
408
|
-
type OakInnerPaddingToken = keyof typeof oakInnerPaddingTokens;
|
|
409
|
-
declare const oakSpaceBetweenTokens: {
|
|
410
|
-
"spacing-0": string;
|
|
411
|
-
"spacing-2": string;
|
|
412
|
-
"spacing-4": string;
|
|
413
|
-
"spacing-8": string;
|
|
414
|
-
"spacing-12": string;
|
|
415
|
-
"spacing-16": string;
|
|
416
|
-
"spacing-20": string;
|
|
417
|
-
"spacing-24": string;
|
|
418
|
-
"spacing-32": string;
|
|
419
|
-
"spacing-40": string;
|
|
420
|
-
"spacing-48": string;
|
|
421
|
-
"spacing-56": string;
|
|
422
|
-
"spacing-64": string;
|
|
423
|
-
"spacing-72": string;
|
|
424
|
-
"spacing-80": string;
|
|
425
|
-
};
|
|
426
|
-
type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
|
|
427
|
-
declare const additionalSpacingTokens: {
|
|
428
|
-
"100%": string;
|
|
429
|
-
"-50%": string;
|
|
430
|
-
"50%": string;
|
|
431
|
-
0: string;
|
|
432
|
-
"100vh": string;
|
|
433
|
-
"100vw": string;
|
|
434
|
-
auto: string;
|
|
435
|
-
"fit-content": string;
|
|
436
|
-
"max-content": string;
|
|
437
|
-
"min-content": string;
|
|
438
|
-
inherit: string;
|
|
439
|
-
initial: string;
|
|
440
|
-
unset: string;
|
|
441
|
-
};
|
|
442
|
-
type AdditionalSpacingTypes = keyof typeof additionalSpacingTokens;
|
|
443
|
-
type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
|
|
444
|
-
|
|
445
462
|
type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
|
|
446
463
|
type PaddingStyleProps = {
|
|
447
464
|
/**
|
|
@@ -722,6 +739,7 @@ declare const icons: {
|
|
|
722
739
|
readonly "ai-quiz": "v1756224440/icons/AI_quiz_eivb2s.svg";
|
|
723
740
|
readonly "ai-slide-deck": "v1756224440/icons/Ai_slidedeck_xuo49n.svg";
|
|
724
741
|
readonly "ai-worksheet": "v1756224441/icons/AI_worksheet_cm4f0q.svg";
|
|
742
|
+
readonly "ai-teaching-resources": "v1779438987/icons/ai-teaching-resources.svg";
|
|
725
743
|
readonly home: "v1699887218/icons/gvqxjxcw07ei2kkmwnes.svg";
|
|
726
744
|
readonly send: "v1699893673/icons/rmvytilpjgvh3pgwc8ph.svg";
|
|
727
745
|
readonly rocket: "v1699894015/icons/u26xm5hteot875ozfnk9.svg";
|
|
@@ -1062,7 +1080,7 @@ type HTMLProps$1 = {
|
|
|
1062
1080
|
};
|
|
1063
1081
|
type OakBoxProps = {
|
|
1064
1082
|
children?: React.ReactNode;
|
|
1065
|
-
} & PositionStyleProps & SizeStyleProps & SpacingStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1;
|
|
1083
|
+
} & PositionStyleProps & SizeStyleProps & SpacingStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1 & ScrollSnapStyleProps;
|
|
1066
1084
|
declare const oakBoxCss: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<OakBoxProps, styled_components.DefaultTheme>>;
|
|
1067
1085
|
/**
|
|
1068
1086
|
* OakBox exposes all the styles that are available styles on a div tag. These include:
|
|
@@ -1078,6 +1096,7 @@ declare const oakBoxCss: styled_components.FlattenInterpolation<styled_component
|
|
|
1078
1096
|
* - transition
|
|
1079
1097
|
* - transform
|
|
1080
1098
|
* - drop-shadow
|
|
1099
|
+
* - scroll-margin-top/left
|
|
1081
1100
|
*
|
|
1082
1101
|
*/
|
|
1083
1102
|
declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, OakBoxProps, never>;
|
|
@@ -2308,7 +2327,7 @@ declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
|
|
|
2308
2327
|
children?: React__default.ReactNode;
|
|
2309
2328
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2310
2329
|
onClick?: React__default.MouseEventHandler;
|
|
2311
|
-
} & {
|
|
2330
|
+
} & ScrollSnapStyleProps & {
|
|
2312
2331
|
$labelAlignItems?: FlexStyleProps["$alignItems"];
|
|
2313
2332
|
$labelGap?: FlexStyleProps["$gap"];
|
|
2314
2333
|
disabled?: boolean;
|
|
@@ -2370,7 +2389,7 @@ declare const IconUp: styled_components.StyledComponent<"div", styled_components
|
|
|
2370
2389
|
children?: React__default.ReactNode;
|
|
2371
2390
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2372
2391
|
onClick?: React__default.MouseEventHandler;
|
|
2373
|
-
} & {
|
|
2392
|
+
} & ScrollSnapStyleProps & {
|
|
2374
2393
|
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2375
2394
|
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2376
2395
|
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
@@ -2390,7 +2409,7 @@ declare const IconDown: styled_components.StyledComponent<"div", styled_componen
|
|
|
2390
2409
|
children?: React__default.ReactNode;
|
|
2391
2410
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2392
2411
|
onClick?: React__default.MouseEventHandler;
|
|
2393
|
-
} & {
|
|
2412
|
+
} & ScrollSnapStyleProps & {
|
|
2394
2413
|
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2395
2414
|
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2396
2415
|
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
@@ -2726,7 +2745,7 @@ declare const OakFlex: styled_components.StyledComponent<"div", styled_component
|
|
|
2726
2745
|
children?: React.ReactNode;
|
|
2727
2746
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2728
2747
|
onClick?: React$1.MouseEventHandler;
|
|
2729
|
-
} & {
|
|
2748
|
+
} & ScrollSnapStyleProps & {
|
|
2730
2749
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2731
2750
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2732
2751
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -2790,7 +2809,7 @@ declare const OakGrid: styled_components.StyledComponent<"div", styled_component
|
|
|
2790
2809
|
children?: React.ReactNode;
|
|
2791
2810
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2792
2811
|
onClick?: React$1.MouseEventHandler;
|
|
2793
|
-
} & {
|
|
2812
|
+
} & ScrollSnapStyleProps & {
|
|
2794
2813
|
/**
|
|
2795
2814
|
* Applies `row-gap` to the grid
|
|
2796
2815
|
*
|
|
@@ -2880,7 +2899,7 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
|
|
|
2880
2899
|
children?: React.ReactNode;
|
|
2881
2900
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2882
2901
|
onClick?: React$1.MouseEventHandler;
|
|
2883
|
-
} & {
|
|
2902
|
+
} & ScrollSnapStyleProps & {
|
|
2884
2903
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2885
2904
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2886
2905
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -2945,7 +2964,7 @@ declare const OakMaxWidth: styled_components.StyledComponent<"div", styled_compo
|
|
|
2945
2964
|
children?: React.ReactNode;
|
|
2946
2965
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2947
2966
|
onClick?: React$1.MouseEventHandler;
|
|
2948
|
-
} & {
|
|
2967
|
+
} & ScrollSnapStyleProps & {
|
|
2949
2968
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2950
2969
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2951
2970
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -3357,7 +3376,7 @@ declare const OakFocusIndicator: styled_components.StyledComponent<"div", styled
|
|
|
3357
3376
|
children?: React.ReactNode;
|
|
3358
3377
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
3359
3378
|
onClick?: React$1.MouseEventHandler;
|
|
3360
|
-
} & OakFocusIndicatorProps, never>;
|
|
3379
|
+
} & ScrollSnapStyleProps & OakFocusIndicatorProps, never>;
|
|
3361
3380
|
|
|
3362
3381
|
type InternalStyledSvgProps = {
|
|
3363
3382
|
$fill?: ResponsiveValues<OakUiRoleToken>;
|
|
@@ -5334,7 +5353,7 @@ declare const OakTypography: styled_components.StyledComponent<"div", styled_com
|
|
|
5334
5353
|
children?: React.ReactNode;
|
|
5335
5354
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
5336
5355
|
onClick?: React$1.MouseEventHandler;
|
|
5337
|
-
}, never>;
|
|
5356
|
+
} & ScrollSnapStyleProps, never>;
|
|
5338
5357
|
|
|
5339
5358
|
type OakULProps = OakBoxProps & OakFlexProps & {
|
|
5340
5359
|
$reset?: boolean;
|