@ndla/ui 56.0.38-alpha.0 → 56.0.40-alpha.0

package/dist/panda.buildinfo.json

@@ -247,6 +247,7 @@
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
+      "marginBlockEnd]___[value:xsmall",
       "background]___[value:background.subtle",
       "height]___[value:5xlarge]___[cond:& svg",
       "width]___[value:5xlarge]___[cond:& svg",
@@ -296,6 +297,7 @@
       "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
       "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
       "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
+      "paddingInlineStart]___[value:4xsmall",
       "textAlign]___[value:center",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
@@ -374,6 +376,7 @@
       "borderColor]___[value:surface.brand.2",
       "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
       "position]___[value:sticky]___[cond:& > div",
+      "paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",
       "textStyle]___[value:title.medium",
@@ -412,6 +415,7 @@
       "color]___[value:text.link",
       "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
+      "display]___[value:none]___[cond:mobileWideDown<___>_disabled",
       "textDecoration]___[value:underline]___[cond:& h3",
       "transitionProperty]___[value:width, height]___[cond:& [data-forward]",
       "transitionTimingFunction]___[value:ease-in-out]___[cond:& [data-forward]",

package/dist/styles.css

@@ -498,6 +498,10 @@
     max-height: 50vh;
 }
 
+  .mbe_xsmall {
+    margin-block-end: var(--spacing-xsmall);
+}
+
   .bg_background\.subtle {
     background: var(--colors-background-subtle);
 }
@@ -542,6 +546,10 @@
     padding-inline: var(--spacing-4xsmall);
 }
 
+  .ps_4xsmall {
+    padding-inline-start: var(--spacing-4xsmall);
+}
+
   .ta_center {
     text-align: center;
 }
@@ -1175,6 +1183,10 @@
     position: sticky;
 }
 
+  .\[\&\:not\(\:has\(\>_img\)\)\]\:py_xxlarge:not(:has(> img)) {
+    padding-block: var(--spacing-xxlarge);
+}
+
   .after\:d_block\!::after {
     display: block !important;
 }
@@ -1763,6 +1775,12 @@
     .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"]) {
       max-height: none;
 }
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:disabled\:d_none:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+      display: none;
+}
 }
 
   @media screen and (max-width: 19.9975rem) {

package/es/Article/Article.js

@@ -109,6 +109,7 @@ export const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
@@ -119,7 +120,8 @@ export const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/_jsx(Heading, {
         textStyle: "heading.medium",
@@ -146,6 +148,7 @@ export const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -167,7 +170,8 @@ export const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/_jsx(ArticleContent, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

package/es/Embed/CopyrightEmbed.js

@@ -6,8 +6,14 @@
  *
  */
 
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledCopyrightContent = styled("div", {
+  base: {
+    marginBlockEnd: "xsmall"
+  }
+});
 const CopyrightEmbed = _ref => {
   let {
     embed,
@@ -15,7 +21,10 @@ const CopyrightEmbed = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsxs("figure", {
     "data-embed-type": "copyright",
-    children: [children, /*#__PURE__*/_jsx(EmbedByline, {
+    children: [/*#__PURE__*/_jsx(StyledCopyrightContent, {
+      "data-copyright-content": "",
+      children: children
+    }), /*#__PURE__*/_jsx(EmbedByline, {
       type: "copyright",
       copyright: embed.embedData.copyright
     })]

package/es/Embed/EmbedWrapper.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledEmbedWrapper = styled(ark.div, {
+  base: {
+    position: "relative"
+  }
+}, {
+  baseComponent: true
+});
+export const EmbedWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledEmbedWrapper, {
+  "data-embed-wrapper": "",
+  ...props,
+  ref: ref
+}));

package/es/Embed/UuDisclaimerEmbed.js

@@ -6,16 +6,16 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    marginBlockEnd: "xsmall"
   }
 });
 const Disclaimer = styled("div", {
@@ -23,14 +23,16 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = useTranslation();
   if (embed.status === "error") {
     return null;
   }
@@ -38,13 +40,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/_jsx(SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsx(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/_jsxs("div", {
     role: "region",
@@ -55,7 +55,10 @@ const UuDisclaimerEmbed = _ref => {
       children: [/*#__PURE__*/_jsx(InformationLine, {}), /*#__PURE__*/_jsxs(Disclaimer, {
         children: [embedData.disclaimer, disclaimerLink]
       })]
-    }), children]
+    }), /*#__PURE__*/_jsx("div", {
+      "data-uu-content": "",
+      children: children
+    })]
   });
 };
 export default UuDisclaimerEmbed;

package/es/Embed/index.js

@@ -20,4 +20,5 @@ export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";
-export { default as CodeEmbed } from "./CodeEmbed";
+export { default as CodeEmbed } from "./CodeEmbed";
+export { EmbedWrapper } from "./EmbedWrapper";

package/es/KeyFigure/KeyFigure.js

@@ -14,7 +14,11 @@ const ContentWrapper = styled("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = styled("img", {

package/es/LicenseByline/EmbedByline.js

@@ -19,7 +19,6 @@ const BylineWrapper = styled("figcaption", {
     display: "flex",
     flexDirection: "column",
     paddingBlock: "xsmall",
-    background: "surface.default",
     textStyle: "label.medium",
     color: "text.subtle"
   }
@@ -144,9 +143,10 @@ const StyledButton = styled(Button, {
 });
 const LicenseDescription = _ref2 => {
   let {
-    children
+    children,
+    isOpen,
+    setIsOpen
   } = _ref2;
-  const [isOpen, setIsOpen] = useState(false);
   const open = isOpen ? {
     "data-open": ""
   } : {};
@@ -184,18 +184,22 @@ export const LicenseContainerContent = _ref3 => {
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
+  const [isOpen, setIsOpen] = useState(false);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/_jsx("span", {
       property: "cc:attributionName",
       children: captionAuthors.map(author => author.name).join(", ")
     }), license ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [" / ", /*#__PURE__*/_jsx(LicenseLink, {
-        license: license
+        license: license,
+        hideLink: !isOpen && !!children
       })]
     }) : null]
   });
   if (children) {
     return /*#__PURE__*/_jsx(LicenseDescription, {
+      isOpen: isOpen,
+      setIsOpen: setIsOpen,
       children: content
     });
   }

package/es/LicenseByline/LicenseLink.js

@@ -19,13 +19,22 @@ const StyledSafeLink = styled(SafeLink, {
     },
     _focusWithin: {
       textDecoration: "none"
+    },
+    mobileWideDown: {
+      _disabled: {
+        display: "none"
+      }
     }
   }
 });
 export const LicenseLink = _ref => {
   let {
-    license
+    license,
+    hideLink
   } = _ref;
+  const disabled = hideLink ? {
+    "data-disabled": ""
+  } : {};
   if (license.abbreviation === "unknown") {
     return null;
   }
@@ -33,6 +42,7 @@ export const LicenseLink = _ref => {
     return /*#__PURE__*/_jsx(StyledSafeLink, {
       to: license.url,
       rel: "license",
+      ...disabled,
       children: license.abbreviation
     });
   }

package/es/index.js

@@ -10,7 +10,7 @@
 // Move components to this file when they are migrated to typescript
 
 export { Concept } from "./Concept/Concept";
-export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, EmbedWrapper } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/es/locale/messages-en.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Learning paths and multidisciplinary cases cannot be shown directly in a shared folder. You can open the learning path in a new tab by clicking the link in the navigation menu to the left.",
       drawerButton: "Show folders and resources",
       drawerTitle: "Folders and resources",
-      description: {
-        all: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.\n\nYou can use the menu to navigate through the articles.",
-        info1: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher."
-      },
+      description: "In this folder you find articles and tasks from NDLA. The articles have been collected and placed in order by a teacher.",
       willOpenInNewTab: "Opens in a new tab."
     },
     myPage: {
@@ -1407,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nb.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {
@@ -1407,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nn.js

@@ -1218,10 +1218,7 @@ const messages = {
       drawerButton: "Vis mapper og ressursar",
       drawerTitle: "Mapper og ressursar",
       learningpathUnsupported: "Læringsstiar og tverrfaglege caser kan ikkje visast direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, blir stien opna i ei ny fane.",
-      description: {
-        all: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.\n\nDu kan bla i artiklane ved å bruke menyen.",
-        info1: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar."
-      },
+      description: "I denne delte mappa finn du fagstoff og oppgåver frå NDLA. Artiklane er samla inn og sette i rekkefølge av ein lærar.",
       willOpenInNewTab: "Blir opna i ny fane."
     },
     myPage: {
@@ -1407,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-se.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {
@@ -1407,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/es/locale/messages-sma.js

@@ -1218,10 +1218,7 @@ const messages = {
       learningpathUnsupported: "Læringsstier og tverrfaglige caser kan ikke vises direkte i delte mapper. Dersom du trykker på lenka i navigasjonsmenyen til venstre, vil stien åpnes i en ny fane.",
       drawerButton: "Vis mapper og ressurser",
       drawerTitle: "Mapper og ressurser",
-      description: {
-        all: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.\n\nDu kan bla i artiklene ved å bruke menyen.",
-        info1: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer."
-      },
+      description: "I denne delte mappa finner du fagstoff og oppgaver fra NDLA. Artiklene er samlet inn og satt i rekkefølge av en lærer.",
       willOpenInNewTab: "Åpnes i ny fane."
     },
     myPage: {
@@ -1407,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/Article/Article.d.ts

@@ -28,22 +28,24 @@ export declare const ArticleFooter: import("@ndla/styled-system/types").StyledCo
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
     title?: ReactNode;
     introduction?: ReactNode;
 }
-export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
     licenseBox?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     children?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
 }
-export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -115,6 +115,7 @@ const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
@@ -125,7 +126,8 @@ const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "heading.medium",
@@ -153,6 +155,7 @@ const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -174,7 +177,8 @@ const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {

package/lib/Embed/CopyrightEmbed.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -14,6 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+const StyledCopyrightContent = (0, _jsx2.styled)("div", {
+  base: {
+    marginBlockEnd: "xsmall"
+  }
+});
 const CopyrightEmbed = _ref => {
   let {
     embed,
@@ -21,7 +27,10 @@ const CopyrightEmbed = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("figure", {
     "data-embed-type": "copyright",
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCopyrightContent, {
+      "data-copyright-content": "",
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       type: "copyright",
       copyright: embed.embedData.copyright
     })]

package/lib/Embed/EmbedWrapper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+export declare const EmbedWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/Embed/EmbedWrapper.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedWrapper = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const StyledEmbedWrapper = (0, _jsx2.styled)(_react2.ark.div, {
+  base: {
+    position: "relative"
+  }
+}, {
+  baseComponent: true
+});
+const EmbedWrapper = exports.EmbedWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledEmbedWrapper, {
+  "data-embed-wrapper": "",
+  ...props,
+  ref: ref
+}));

package/lib/Embed/UuDisclaimerEmbed.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactI18next = require("react-i18next");
 var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
@@ -21,7 +20,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const StyledMessageBox = (0, _jsx2.styled)(_primitives.MessageBox, {
   base: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    marginBlockEnd: "xsmall"
   }
 });
 const Disclaimer = (0, _jsx2.styled)("div", {
@@ -29,14 +29,16 @@ const Disclaimer = (0, _jsx2.styled)("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
     return null;
   }
@@ -44,13 +46,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "region",
@@ -61,7 +61,10 @@ const UuDisclaimerEmbed = _ref => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_common.InformationLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Disclaimer, {
         children: [embedData.disclaimer, disclaimerLink]
       })]
-    }), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-uu-content": "",
+      children: children
+    })]
   });
 };
 var _default = exports.default = UuDisclaimerEmbed;