@oaknational/oak-components 0.28.0 → 0.30.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 +55 -27
- package/package.json +1 -1
package/dist/types.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ declare const oakColorTokens: {
|
|
|
19
19
|
grey50: string;
|
|
20
20
|
grey60: string;
|
|
21
21
|
grey70: string;
|
|
22
|
+
grey80: string;
|
|
22
23
|
black: string;
|
|
23
24
|
oakGreen: string;
|
|
24
25
|
mint: string;
|
|
@@ -1057,6 +1058,7 @@ declare const icons: {
|
|
|
1057
1058
|
readonly quiz: "v1705416077/icons/kaaizjcudy0jfgfrrdel.svg";
|
|
1058
1059
|
readonly video: "v1705416078/icons/wzey1zfxrvv3apeebbf5.svg";
|
|
1059
1060
|
readonly intro: "v1705662092/icons/pl7bnmb13txese9yxkjv.svg";
|
|
1061
|
+
readonly loopdown: "v1699887218/ui-graphics/loopdown.svg";
|
|
1060
1062
|
readonly "teacher-lesson": "icons/teacher-lesson.svg";
|
|
1061
1063
|
readonly "teacher-unit": "icons/teacher-unit.svg";
|
|
1062
1064
|
readonly "move-arrows": "v1709052869/icons/hoddjsgpzkszgvnmn91q.svg";
|
|
@@ -1116,7 +1118,7 @@ declare const icons: {
|
|
|
1116
1118
|
};
|
|
1117
1119
|
type IconName = keyof typeof icons;
|
|
1118
1120
|
|
|
1119
|
-
declare const oakIconNames: ("search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "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-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-expressive-arts-and-design" | "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-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world")[];
|
|
1121
|
+
declare const oakIconNames: ("search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "loopdown" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "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-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-expressive-arts-and-design" | "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-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world")[];
|
|
1120
1122
|
type OakIconName = IconName;
|
|
1121
1123
|
type OakIconProps = Omit<OakImageProps, "alt" | "src"> & {
|
|
1122
1124
|
/**
|
|
@@ -1566,7 +1568,7 @@ declare const OakTertiaryButton: <C extends React__default.ElementType = "button
|
|
|
1566
1568
|
iconBackground?: OakRoundIconProps["$background"];
|
|
1567
1569
|
iconColorFilter?: OakRoundIconProps["$colorFilter"];
|
|
1568
1570
|
isTrailingIcon?: boolean | undefined;
|
|
1569
|
-
iconName?: "search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "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-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-expressive-arts-and-design" | "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-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world" | undefined;
|
|
1571
|
+
iconName?: "search" | "video" | "download" | "question-mark" | "home" | "send" | "rocket" | "edit" | "hamburger" | "cross" | "bell" | "twitter" | "worksheet" | "facebook" | "share" | "arrow-right" | "worksheet-3" | "chevron-right" | "save" | "quiz-3" | "chevron-down" | "linkedin" | "magic-carpet" | "books" | "supervision-level" | "quiz-white" | "arrow-left" | "additional-material" | "slide-deck-3" | "sign-language" | "external" | "equipment-required" | "chevron-left" | "chevron-up" | "go" | "copyright" | "arrow-down" | "project" | "slide-deck" | "content-guidance" | "tick" | "instagram" | "dot" | "dot-png" | "warning" | "lightbulb-yellow" | "lightbulb" | "quiz" | "intro" | "loopdown" | "teacher-lesson" | "teacher-unit" | "move-arrows" | "info" | "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-computing-non-gcse" | "subject-creative-arts" | "subject-design-technology" | "subject-drama" | "subject-english" | "subject-english-grammar" | "subject-english-reading-for-pleasure" | "subject-english-spelling" | "subject-expressive-arts-and-design" | "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-science" | "subject-sensory-integration" | "subject-spanish" | "subject-speech-and-language-therapy" | "subject-specialist" | "subject-therapy" | "subject-therapies" | "subject-occupational-therapy" | "subject-understanding-the-world" | undefined;
|
|
1570
1572
|
} & {
|
|
1571
1573
|
element?: C | undefined;
|
|
1572
1574
|
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
@@ -2481,13 +2483,12 @@ type OakQuizMatchProps = {
|
|
|
2481
2483
|
*/
|
|
2482
2484
|
declare const OakQuizMatch: ({ initialOptions, initialSlots, isHighlighted, onChange, }: OakQuizMatchProps) => React__default.JSX.Element;
|
|
2483
2485
|
|
|
2484
|
-
type PupilJourneySectionName = "tier-listing" | "unit-listing" | "lesson-listing";
|
|
2486
|
+
type PupilJourneySectionName = "tier-listing" | "examboard-listing" | "unit-listing" | "lesson-listing" | "subject-listing" | "year-listing";
|
|
2485
2487
|
type Phase = "primary" | "secondary";
|
|
2486
2488
|
type OakPupilJourneyLayoutProps = {
|
|
2487
2489
|
sectionName: PupilJourneySectionName;
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
phase: Phase;
|
|
2490
|
+
phase?: Phase;
|
|
2491
|
+
topNavSlot?: ReactNode;
|
|
2491
2492
|
children: ReactNode;
|
|
2492
2493
|
};
|
|
2493
2494
|
/**
|
|
@@ -2497,23 +2498,7 @@ type OakPupilJourneyLayoutProps = {
|
|
|
2497
2498
|
*
|
|
2498
2499
|
* the sections of the page are passed in as props and children
|
|
2499
2500
|
*/
|
|
2500
|
-
declare const OakPupilJourneyLayout: ({ sectionName,
|
|
2501
|
-
|
|
2502
|
-
type OakPupilJourneyHeaderProps = {
|
|
2503
|
-
title: string;
|
|
2504
|
-
iconName: OakIconProps["iconName"];
|
|
2505
|
-
alt?: OakIconProps["alt"];
|
|
2506
|
-
iconBackground?: "primary" | "secondary";
|
|
2507
|
-
breadcrumbs: OakBulletListProps["listItems"];
|
|
2508
|
-
} & FlexStyleProps;
|
|
2509
|
-
/**
|
|
2510
|
-
* This component is the header for the pupil journey;
|
|
2511
|
-
*
|
|
2512
|
-
* the icon, title and list of items are passed as props and change change depending on which page it is called
|
|
2513
|
-
*
|
|
2514
|
-
*
|
|
2515
|
-
*/
|
|
2516
|
-
declare const OakPupilJourneyHeader: ({ iconBackground, title, iconName, alt, breadcrumbs, }: OakPupilJourneyHeaderProps) => React__default.JSX.Element;
|
|
2501
|
+
declare const OakPupilJourneyLayout: ({ sectionName, topNavSlot, phase, children, }: OakPupilJourneyLayoutProps) => React__default.JSX.Element;
|
|
2517
2502
|
|
|
2518
2503
|
type OakInfoProps = {
|
|
2519
2504
|
/**
|
|
@@ -2609,7 +2594,7 @@ declare const OakPupilJourneySubjectButton: <C extends React__default.ElementTyp
|
|
|
2609
2594
|
element?: C | undefined;
|
|
2610
2595
|
} & React__default.PropsWithoutRef<React__default.ComponentProps<C>>) => React__default.JSX.Element;
|
|
2611
2596
|
|
|
2612
|
-
type
|
|
2597
|
+
type OakPupilJourneyPreviousLessonsProps = {
|
|
2613
2598
|
numberOfLessons: number;
|
|
2614
2599
|
} & OakBulletListProps;
|
|
2615
2600
|
/**
|
|
@@ -2621,11 +2606,13 @@ type OakPreviousLessonsHeadingProps = {
|
|
|
2621
2606
|
*
|
|
2622
2607
|
*
|
|
2623
2608
|
*/
|
|
2624
|
-
declare const
|
|
2609
|
+
declare const OakPupilJourneyPreviousLessons: (props: OakPupilJourneyPreviousLessonsProps) => React__default.JSX.Element;
|
|
2625
2610
|
|
|
2626
2611
|
type OakPupilJourneyListProps = {
|
|
2627
2612
|
children: React__default.ReactNode;
|
|
2628
2613
|
phase: "primary" | "secondary";
|
|
2614
|
+
titleSlot?: React__default.ReactNode;
|
|
2615
|
+
counterSlot: React__default.ReactNode;
|
|
2629
2616
|
};
|
|
2630
2617
|
/**
|
|
2631
2618
|
*
|
|
@@ -2633,7 +2620,30 @@ type OakPupilJourneyListProps = {
|
|
|
2633
2620
|
*
|
|
2634
2621
|
*
|
|
2635
2622
|
*/
|
|
2636
|
-
declare const OakPupilJourneyList: ({ children, phase, }: OakPupilJourneyListProps) => React__default.JSX.Element;
|
|
2623
|
+
declare const OakPupilJourneyList: ({ children, phase, titleSlot, counterSlot, }: OakPupilJourneyListProps) => React__default.JSX.Element;
|
|
2624
|
+
|
|
2625
|
+
type OakPupilJourneyHeaderProps = {
|
|
2626
|
+
title: string;
|
|
2627
|
+
iconName: OakIconProps["iconName"];
|
|
2628
|
+
alt?: OakIconProps["alt"];
|
|
2629
|
+
iconBackground?: "primary" | "secondary";
|
|
2630
|
+
breadcrumbs: OakBulletListProps["listItems"];
|
|
2631
|
+
} & FlexStyleProps;
|
|
2632
|
+
/**
|
|
2633
|
+
* This component is the header for the pupil journey;
|
|
2634
|
+
*
|
|
2635
|
+
* the icon, title and list of items are passed as props and change change depending on which page it is called
|
|
2636
|
+
*
|
|
2637
|
+
*
|
|
2638
|
+
*/
|
|
2639
|
+
declare const OakPupilJourneyHeader: ({ iconBackground, title, iconName, alt, breadcrumbs, }: OakPupilJourneyHeaderProps) => React__default.JSX.Element;
|
|
2640
|
+
|
|
2641
|
+
type OakPupilJourneyListCounterProps = {
|
|
2642
|
+
count: number;
|
|
2643
|
+
countHeader: string;
|
|
2644
|
+
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
2645
|
+
};
|
|
2646
|
+
declare const OakPupilJourneyListCounter: (props: OakPupilJourneyListCounterProps) => React__default.JSX.Element;
|
|
2637
2647
|
|
|
2638
2648
|
type OakSearchFilterCheckBoxProps = Omit<BaseCheckBoxProps, "defaultChecked"> & {
|
|
2639
2649
|
innerRef?: React__default.RefObject<HTMLInputElement>;
|
|
@@ -2941,4 +2951,22 @@ type OakCookieConsentProps = Pick<OakCookieSettingsModalProps, "policyURL"> & Pi
|
|
|
2941
2951
|
*/
|
|
2942
2952
|
declare const OakCookieConsent: ({ policyURL, isFixed, innerMaxWidth, }: OakCookieConsentProps) => React__default.JSX.Element;
|
|
2943
2953
|
|
|
2944
|
-
|
|
2954
|
+
type OakHeaderHeroProps = {
|
|
2955
|
+
headingTitle: string;
|
|
2956
|
+
heroImageSrc: string;
|
|
2957
|
+
authorImageSrc: string;
|
|
2958
|
+
authorName: string;
|
|
2959
|
+
authorTitle: string;
|
|
2960
|
+
subHeadingText: string;
|
|
2961
|
+
breadcrumbs: ReactElement;
|
|
2962
|
+
children?: ReactNode;
|
|
2963
|
+
};
|
|
2964
|
+
/**
|
|
2965
|
+
*
|
|
2966
|
+
* Oak Heading component with hero image, can be used for blog posts, articles, and other content pages.
|
|
2967
|
+
*
|
|
2968
|
+
* This Oak component can be passed the OWA breadcrumbs component as a prop. Currently this component does not exist in the component library.
|
|
2969
|
+
*/
|
|
2970
|
+
declare const OakHeaderHero: styled_components.StyledComponent<(props: OakHeaderHeroProps) => React__default.JSX.Element, styled_components.DefaultTheme, {}, never>;
|
|
2971
|
+
|
|
2972
|
+
export { HeadingTagComponent, OakAccordion, type OakAccordionProps, type OakAllSpacingToken, OakAnchorTarget, type OakAnchorTargetProps, OakBackLink, type OakBackLinkProps, type OakBorderRadiusToken, type OakBorderWidthToken, OakBox, type OakBoxProps, OakBulletList, type OakBulletListProps, OakCardHeader, type OakCardHeaderprops, OakCheckBox, type OakCheckBoxProps, OakCloudinaryConfigProvider, OakCloudinaryImage, type OakCloudinaryImageProps, OakCollapsibleContent, type OakCollapsibleContentProps, type OakColorToken, type OakCombinedColorToken, type OakCombinedSpacingToken, OakCookieBanner, type OakCookieBannerProps, OakCookieConsent, type OakCookieConsentProps, OakCookieConsentProvider, OakCookieSettingsModal, type OakCookieSettingsModalProps, OakDragAndDropInstructions, OakDraggable, OakDraggableFeedback, type OakDropShadowToken, OakDroppable, type OakDroppableProps, OakFieldError, type OakFieldErrorProps, OakFlex, type OakFlexProps, type OakFontSizeToken, type OakFontToken, OakForm, type OakFormProps, OakGlobalStyle, OakGrid, OakGridArea, type OakGridAreaProps, type OakGridProps, type OakHandDrawnBoxWithIconProps, OakHandDrawnCard, type OakHandDrawnCardProps, OakHandDrawnCardWithIcon, OakHeaderHero, type OakHeaderHeroProps, OakHeading, type OakHeadingProps, type OakHeadingTag, OakHintButton, type OakHintButtonProps, OakIcon, type OakIconName, type OakIconProps, OakImage, type OakImageProps, OakInfo, OakInfoButton, type OakInfoButtonProps, type OakInfoCardProps, type OakInfoProps, type OakInnerPaddingToken, OakKbd, type OakKbdProps, OakLI, type OakLIProps, OakLabel, type OakLabelProps, OakLessonBottomNav, type OakLessonBottomNavProps, OakLessonInfoCard, OakLessonLayout, type OakLessonLayoutProps, OakLessonNavItem, type OakLessonNavItemProps, OakLessonReviewItem, type OakLessonReviewItemProps, OakLessonTopNav, type OakLessonTopNavProps, OakLessonVideoTranscript, OakLink, type OakLinkProps, OakLoadingSpinner, type OakLoadingSpinnerProps, OakMaxWidth, OakModal, OakModalBody, type OakModalBodyProps, OakModalFooter, type OakModalFooterProps, type OakModalProps, OakOL, type OakOLProps, type OakOpacityToken, OakP, type OakPProps, OakPrimaryButton, type OakPrimaryButtonProps, OakPrimaryInvertedButton, type OakPrimaryInvertedButtonProps, OakPrimaryNav, OakPrimaryNavItem, type OakPrimaryNavItemProps, type OakPrimaryNavProps, OakPromoTag, OakPupilJourneyHeader, type OakPupilJourneyHeaderProps, OakPupilJourneyLayout, type OakPupilJourneyLayoutProps, OakPupilJourneyList, OakPupilJourneyListCounter, OakPupilJourneyListItem, type OakPupilJourneyListProps, OakPupilJourneyPreviousLessons, type OakPupilJourneyPreviousLessonsProps, OakPupilJourneySubjectButton, type OakPupilJourneySubjectButtonProps, OakPupilJourneyYearButton, type OakPupilJourneyYearButtonProps, OakQuizCheckBox, type OakQuizCheckBoxProps, OakQuizCounter, type OakQuizCounterProps, OakQuizFeedback, type OakQuizFeedbackProps, OakQuizHint, type OakQuizHintProps, OakQuizMatch, type OakQuizMatchProps, OakQuizOrder, type OakQuizOrderProps, OakQuizRadioButton, type OakQuizRadioButtonProps, OakQuizTextInput, OakRadioButton, OakRadioGroup, OakRoundIcon, type OakRoundIconProps, OakSearchFilterCheckBox, type OakSearchFilterCheckBoxProps, OakSecondaryButton, type OakSecondaryButtonProps, OakSecondaryLink, type OakSecondaryLinkProps, type OakSpaceBetweenToken, OakSpan, type OakSpanProps, OakStaticMessageCard, OakSubjectIcon, type OakSubjectIconProps, OakTertiaryButton, OakTertiaryOLNav, type OakTertiaryOLNavProps, OakTextInput, type OakTextInputProps, type OakTheme, OakThemeProvider, type OakThemeProviderProps, OakTooltip, type OakTooltipProps, type OakTransitionToken, OakTypography, type OakTypographyProps, OakUL, type OakULProps, type OakUiRoleToken, isValidIconName, oakAllSpacingTokens, oakBorderRadiusTokens, oakBorderWidthTokens, oakBoxCss, oakColorTokens, oakDefaultTheme, oakDropShadowTokens, oakFontSizeTokens, oakFontTokens, oakHeadingTags, oakIconNames, oakInnerPaddingTokens, oakOpacityTokens, oakSpaceBetweenTokens, oakTransitionTokens, oakUiRoleTokens, useCookieConsent };
|