@ndla/ui 56.0.148-alpha.0 → 56.0.149-alpha.0

package/src/AudioPlayer/Controls.tsx

@@ -158,7 +158,7 @@ interface Props {
   title: string;
 }
 
-const Controls = ({ src, title }: Props) => {
+export const Controls = ({ src, title }: Props) => {
   const { t } = useTranslation();
   const [speedValue, setSpeedValue] = useState(1);
   const [volumeValue, setVolumeValue] = useState(100);
@@ -354,5 +354,3 @@ const Controls = ({ src, title }: Props) => {
     </div>
   );
 };
-
-export default Controls;

package/src/AudioPlayer/SpeechControl.tsx

@@ -17,7 +17,7 @@ type Props = {
   type?: "gloss" | "audio";
 };
 
-const SpeechControl = ({ src, title, type = "audio" }: Props) => {
+export const SpeechControl = ({ src, title, type = "audio" }: Props) => {
   const { t } = useTranslation();
   const audioRef = useRef<HTMLAudioElement>(null);
 
@@ -41,5 +41,3 @@ const SpeechControl = ({ src, title, type = "audio" }: Props) => {
     </div>
   );
 };
-
-export default SpeechControl;

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import Breadcrumb from "./Breadcrumb";
+import { Breadcrumb } from "./Breadcrumb";
 
 const items = [
   {

package/src/Breadcrumb/Breadcrumb.tsx

@@ -9,7 +9,7 @@
 import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { styled } from "@ndla/styled-system/jsx";
-import BreadcrumbItem, { type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from "./BreadcrumbItem";
+import { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
   items: SimpleBreadcrumbItem[];
@@ -32,7 +32,7 @@ const StyledList = styled("ol", {
   },
 });
 
-const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {
+export const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -51,5 +51,3 @@ const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {
     </nav>
   );
 };
-
-export default Breadcrumb;

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -48,7 +48,7 @@ interface Props {
   renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;
 }
 
-const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {
+export const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {
   const isLast = item.index === totalCount - 1;
   return (
     <StyledListItem aria-current={isLast ? "page" : undefined}>
@@ -57,5 +57,3 @@ const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props
     </StyledListItem>
   );
 };
-
-export default BreadcrumbItem;

package/src/Breadcrumb/HomeBreadcrumb.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import HomeBreadcrumb from "./HomeBreadcrumb";
+import { HomeBreadcrumb } from "./HomeBreadcrumb";
 
 const items = [
   {

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -9,7 +9,7 @@
 import { ArrowRightShortLine, HomeLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import Breadcrumb from "./Breadcrumb";
+import { Breadcrumb } from "./Breadcrumb";
 import type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 const StyledSafeLink = styled(SafeLink, {
@@ -43,7 +43,7 @@ interface Props {
   items: SimpleBreadcrumbItem[];
 }
 
-const HomeBreadcrumb = ({ items }: Props) => {
+export const HomeBreadcrumb = ({ items }: Props) => {
   const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {
     if (item.index === totalCount - 1) {
       return <span>{item.name}</span>;
@@ -70,5 +70,3 @@ const HomeBreadcrumb = ({ items }: Props) => {
 
   return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;
 };
-
-export default HomeBreadcrumb;

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import CampaignBlock from "./CampaignBlock";
+import { CampaignBlock } from "./CampaignBlock";
 
 export default {
   title: "Components/Campaign Block",

package/src/CampaignBlock/CampaignBlock.tsx

@@ -164,7 +164,7 @@ const LinkButton = ({ url, children, path }: LinkButtonProps) => {
   return children;
 };
 
-const CampaignBlock = ({
+export const CampaignBlock = ({
   title,
   image,
   imageSide = "left",
@@ -198,5 +198,3 @@ const CampaignBlock = ({
     </Wrapper>
   );
 };
-
-export default CampaignBlock;

package/src/CodeBlock/CodeBlock.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-import CodeBlock from "./CodeBlock";
+import { CodeBlock } from "./CodeBlock";
 
 export default {
   title: "Components/CodeBlock",

package/src/CodeBlock/CodeBlock.tsx

@@ -18,7 +18,7 @@ interface Props extends StyledProps, ComponentPropsWithRef<"pre"> {
 
 const Pre = styled("pre", {});
 
-export const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {
+export const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {
   const codeWithLineNumbers = useMemo(() => {
     return highlightedCode
       .split("\n")
@@ -37,5 +37,3 @@ export const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, f
     />
   );
 });
-
-export default Codeblock;

package/src/Concept/Concept.tsx

@@ -11,11 +11,11 @@ import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { ConceptVisualElementMeta } from "@ndla/types-embed";
-import BrightcoveEmbed from "../Embed/BrightcoveEmbed";
-import ExternalEmbed from "../Embed/ExternalEmbed";
-import H5pEmbed from "../Embed/H5pEmbed";
-import IframeEmbed from "../Embed/IframeEmbed";
-import ImageEmbed from "../Embed/ImageEmbed";
+import { BrightcoveEmbed } from "../Embed/BrightcoveEmbed";
+import { ExternalEmbed } from "../Embed/ExternalEmbed";
+import { H5pEmbed } from "../Embed/H5pEmbed";
+import { IframeEmbed } from "../Embed/IframeEmbed";
+import { ImageEmbed } from "../Embed/ImageEmbed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -43,7 +43,7 @@ interface Props {
   copyText: string;
   lang?: string;
 }
-const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
+export const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
   const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, "-")), [copyText]);
@@ -85,5 +85,3 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
     </ContainerDiv>
   );
 };
-
-export default CopyParagraphButton;

package/src/Embed/AudioEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
-import AudioEmbed from "./AudioEmbed";
+import { AudioEmbed } from "./AudioEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
 
 const embedData: AudioEmbedData = {

package/src/Embed/AudioEmbed.tsx

@@ -9,9 +9,9 @@
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { AudioMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import type { Author } from "./ImageEmbed";
-import AudioPlayer from "../AudioPlayer/AudioPlayer";
+import { AudioPlayer } from "../AudioPlayer/AudioPlayer";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
 
@@ -32,7 +32,7 @@ export const getFirstNonEmptyLicenseCredits = (authors: {
   processors: Author[];
 }) => Object.values(authors).find((i) => i.length > 0) ?? [];
 
-const AudioEmbed = ({ embed, lang }: Props) => {
+export const AudioEmbed = ({ embed, lang }: Props) => {
   const type = embed.embedData.type === "standard" ? "audio" : "podcast";
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type={type} />;
@@ -74,5 +74,3 @@ const AudioEmbed = ({ embed, lang }: Props) => {
     </StyledFigure>
   );
 };
-
-export default AudioEmbed;

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
-import BrightcoveEmbed from "./BrightcoveEmbed";
+import { BrightcoveEmbed } from "./BrightcoveEmbed";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
 
 const embedData: BrightcoveEmbedData = {

package/src/Embed/BrightcoveEmbed.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import type { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
@@ -57,7 +57,7 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? "640",
   };
 };
-const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
+export const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -130,5 +130,3 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
     </Figure>
   );
 };
-
-export default BrightcoveEmbed;

package/src/Embed/CodeEmbed.stories.tsx

@@ -8,7 +8,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 import type { CodeEmbedData, CodeMetaData } from "@ndla/types-embed";
-import CodeEmbed from "./CodeEmbed";
+import { CodeEmbed } from "./CodeEmbed";
 
 const codeEmbedData: CodeEmbedData = {
   resource: "code-block",

package/src/Embed/CodeEmbed.tsx

@@ -12,8 +12,8 @@ import { FileCopyLine, CheckLine } from "@ndla/icons";
 import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { CodeMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import CodeBlock from "../CodeBlock/CodeBlock";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { CodeBlock } from "../CodeBlock/CodeBlock";
 import { codeLanguageOptions, type ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
 
 interface Props {
@@ -45,7 +45,7 @@ const getTitleFromFormat = (format: string) => {
   return;
 };
 
-const CodeEmbed = ({ embed }: Props) => {
+export const CodeEmbed = ({ embed }: Props) => {
   const [isCopied, setIsCopied] = useState(false);
   const { t } = useTranslation();
 
@@ -89,5 +89,3 @@ const CodeEmbed = ({ embed }: Props) => {
     </StyledFigure>
   );
 };
-
-export default CodeEmbed;

package/src/Embed/ConceptEmbed.tsx

@@ -13,7 +13,7 @@ import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { ConceptMetaData } from "@ndla/types-embed";
 import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import { GlossEmbed } from "./GlossEmbed";
 import type { RenderContext } from "./types";
 import { Concept, type ConceptProps } from "../Concept/Concept";

package/src/Embed/ContentLinkEmbed.tsx

@@ -17,7 +17,7 @@ interface Props {
   children?: ReactNode;
 }
 
-const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {
+export const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return (
@@ -42,5 +42,3 @@ const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {
 
   return <a href={data.path}>{children}</a>;
 };
-
-export default ContentLinkEmbed;

package/src/Embed/CopyrightEmbed.tsx

@@ -22,7 +22,7 @@ const StyledCopyrightContent = styled("div", {
   },
 });
 
-const CopyrightEmbed = ({ embed, children }: Props) => {
+export const CopyrightEmbed = ({ embed, children }: Props) => {
   return (
     <figure data-embed-type="copyright">
       <StyledCopyrightContent data-copyright-content="">{children}</StyledCopyrightContent>
@@ -30,5 +30,3 @@ const CopyrightEmbed = ({ embed, children }: Props) => {
     </figure>
   );
 };
-
-export default CopyrightEmbed;

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -45,7 +45,7 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {
+export const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {
   return (
     <StyledFigure size={figureType} float={float} data-embed-type={type}>
       {children ?? (
@@ -57,5 +57,3 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) =>
     </StyledFigure>
   );
 };
-
-export default EmbedErrorPlaceholder;

package/src/Embed/ExternalEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { OembedEmbedData, OembedData } from "@ndla/types-embed";
-import ExternalEmbed from "./ExternalEmbed";
+import { ExternalEmbed } from "./ExternalEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: OembedEmbedData = {

package/src/Embed/ExternalEmbed.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { OembedMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import ResourceBox from "../ResourceBox/ResourceBox";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { ResourceBox } from "../ResourceBox/ResourceBox";
 
 interface Props {
   embed: OembedMetaData;
@@ -27,7 +27,7 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-const ExternalEmbed = ({ embed }: Props) => {
+export const ExternalEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const figRef = useRef<HTMLElement>(null);
 
@@ -73,4 +73,3 @@ const ExternalEmbed = ({ embed }: Props) => {
     />
   );
 };
-export default ExternalEmbed;

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -8,7 +8,7 @@
 
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import type { FootnoteData, FootnoteEmbedData } from "@ndla/types-embed";
-import FootnoteEmbed from "./FootnoteEmbed";
+import { FootnoteEmbed } from "./FootnoteEmbed";
 import { ArticleByline } from "../Article/ArticleByline";
 
 /**

package/src/Embed/FootnoteEmbed.tsx

@@ -23,7 +23,7 @@ const StyledSup = styled("sup", {
   },
 });
 
-const FootnoteEmbed = ({ embed }: Props) => {
+export const FootnoteEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return <div>{t("error")}</div>;
@@ -37,5 +37,3 @@ const FootnoteEmbed = ({ embed }: Props) => {
     </span>
   );
 };
-
-export default FootnoteEmbed;

package/src/Embed/GlossEmbed.tsx

@@ -12,8 +12,8 @@ import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primi
 import { styled } from "@ndla/styled-system/jsx";
 import type { ConceptMetaData } from "@ndla/types-embed";
 import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import Gloss from "../Gloss/Gloss";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { Gloss } from "../Gloss/Gloss";
 
 interface Props {
   embed: ConceptMetaData;

package/src/Embed/H5pEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { H5pEmbedData, H5pData } from "@ndla/types-embed";
-import H5pEmbed from "./H5pEmbed";
+import { H5pEmbed } from "./H5pEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: H5pEmbedData = {

package/src/Embed/H5pEmbed.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { H5pMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: H5pMetaData;
@@ -34,7 +34,7 @@ const FigureOembed = styled(Figure, {
   },
 });
 
-const H5pEmbed = ({ embed }: Props) => {
+export const H5pEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="h5p" />;
@@ -58,5 +58,3 @@ const H5pEmbed = ({ embed }: Props) => {
     </StyledFigure>
   );
 };
-
-export default H5pEmbed;

package/src/Embed/IframeEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { IframeData, IframeEmbedData } from "@ndla/types-embed";
-import IframeEmbed from "./IframeEmbed";
+import { IframeEmbed } from "./IframeEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 
 const embedData: IframeEmbedData = {

package/src/Embed/IframeEmbed.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IframeMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import ResourceBox from "../ResourceBox/ResourceBox";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { ResourceBox } from "../ResourceBox/ResourceBox";
 
 interface Props {
   embed: IframeMetaData;
@@ -31,7 +31,7 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-const IframeEmbed = ({ embed }: Props) => {
+export const IframeEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -89,5 +89,3 @@ const IframeEmbed = ({ embed }: Props) => {
     </StyledFigure>
   );
 };
-
-export default IframeEmbed;

package/src/Embed/ImageEmbed.stories.tsx

@@ -12,7 +12,7 @@ import { PageContent, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { ImageEmbedData } from "@ndla/types-embed";
-import ImageEmbed from "./ImageEmbed";
+import { ImageEmbed } from "./ImageEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 import { Grid } from "../Grid/Grid";
 

package/src/Embed/ImageEmbed.tsx

@@ -13,7 +13,7 @@ import { AddLine } from "@ndla/icons";
 import { Figure, type FigureSize, type FigureVariantProps, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 import type { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
@@ -190,7 +190,7 @@ const ExpandButton = styled(
   { defaultProps: { type: "button" } },
 );
 
-const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }: Props) => {
+export const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }: Props) => {
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
   const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
   const { t } = useTranslation();
@@ -266,5 +266,3 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
     </StyledFigure>
   );
 };
-
-export default ImageEmbed;

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -9,7 +9,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import type { RelatedContentMetaData } from "@ndla/types-embed";
-import RelatedContentEmbed from "./RelatedContentEmbed";
+import { RelatedContentEmbed } from "./RelatedContentEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 import { RelatedArticleList } from "../RelatedArticleList/RelatedArticleList";
 

package/src/Embed/RelatedContentEmbed.tsx

@@ -18,7 +18,7 @@ interface Props {
   ndlaFrontendDomain?: string;
 }
 
-const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {
+export const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return null;
@@ -55,5 +55,3 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
   }
   return null;
 };
-
-export default RelatedContentEmbed;

package/src/Embed/UnknownEmbed.tsx

@@ -14,7 +14,7 @@ interface Props {
   embed: MetaData<any, any>;
 }
 
-const UnknownEmbed = ({ embed }: Props) => {
+export const UnknownEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   return (
     <Text color="text.error" asChild consumeCss data-embed-type="unknown">
@@ -22,5 +22,3 @@ const UnknownEmbed = ({ embed }: Props) => {
     </Text>
   );
 };
-
-export default UnknownEmbed;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -9,12 +9,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
 import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
-import H5pEmbed from "./H5pEmbed";
-import IframeEmbed from "./IframeEmbed";
-import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
+import { H5pEmbed } from "./H5pEmbed";
+import { IframeEmbed } from "./IframeEmbed";
+import { UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
-import CopyParagraphButton from "../CopyParagraphButton/CopyParagraphButton";
-import FactBox from "../FactBox/FactBox";
+import { CopyParagraphButton } from "../CopyParagraphButton/CopyParagraphButton";
+import { FactBox } from "../FactBox/FactBox";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -50,7 +50,7 @@ const StyledPopoverContent = styled(PopoverContent, {
   },
 });
 
-const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {
+export const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {
   const { t } = useTranslation();
   if (embed.status === "error") {
     return (
@@ -87,5 +87,3 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) =>
     </DisclaimerWrapper>
   );
 };
-
-export default UuDisclaimerEmbed;

package/src/FactBox/FactBox.tsx

@@ -127,7 +127,7 @@ const StyledIconButton = styled(IconButton, {
 
 // TODO: Consider moving the open trigger depending on whether the content is open or closed.
 
-const FactBox = forwardRef<HTMLElement, Props>(
+export const FactBox = forwardRef<HTMLElement, Props>(
   ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
     const { t } = useTranslation();
     const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
@@ -187,5 +187,3 @@ const FactBox = forwardRef<HTMLElement, Props>(
     );
   },
 );
-
-export default FactBox;