@ndla/ui 56.0.18-alpha.0 → 56.0.20-alpha.0

package/lib/Article/Article.js

@@ -39,7 +39,6 @@ const StyledArticleWrapper = (0, _jsx2.styled)(_react2.ark.article, {
     background: "background.default",
     display: "flex",
     flexDirection: "column",
-    gap: "xxlarge",
     color: "text.default",
     alignItems: "center",
     width: "100%",
@@ -118,7 +117,7 @@ const ArticleTitle = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledStack, {
+      children: [(!!contentType || !!heartButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledStack, {
         justify: "space-between",
         align: "center",
         direction: "row",
@@ -127,9 +126,10 @@ const ArticleTitle = _ref2 => {
           contentType: contentType
         }), heartButton]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        textStyle: "heading.large",
+        textStyle: "heading.medium",
         id: id,
         lang: lang,
+        property: "dct:title",
         children: title
       })]
     }), !!introduction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {

package/lib/Article/ArticleByline.js

@@ -31,9 +31,6 @@ const Wrapper = (0, _jsx2.styled)("div", {
     borderColor: "stroke.subtle"
   }
 });
-
-// TODO: This is designed with 24px of inline padding. If you do this, most bylines will break into two lines.
-// Should reconsider.
 const TextWrapper = (0, _jsx2.styled)("div", {
   base: {
     display: "flex",
@@ -136,7 +133,11 @@ const ArticleByline = _ref => {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LicenseWrapper, {
         children: [license && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseLink.LicenseLink, {
           license: license
-        }), showPrimaryContributors && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        }), showPrimaryContributors &&
+        /*#__PURE__*/
+        //eslint-disable-next-line react/no-unknown-property
+        (0, _jsxRuntime.jsxs)("span", {
+          property: "cc:attributionName",
           children: [authors.length > 0 && `${t("article.authorsLabel", {
             names: renderContributors(authors, t),
             interpolation: {

package/lib/Article/index.d.ts

@@ -8,4 +8,3 @@
 export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleHGroup, ArticleContent, } from "./Article";
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
 export { ArticleFootNotes } from "./ArticleFootNotes";
-export { ArticleParagraph } from "./ArticleParagraph";

package/lib/Article/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "ArticleHeader", {
     return _Article.ArticleHeader;
   }
 });
-Object.defineProperty(exports, "ArticleParagraph", {
-  enumerable: true,
-  get: function () {
-    return _ArticleParagraph.ArticleParagraph;
-  }
-});
 Object.defineProperty(exports, "ArticleTitle", {
   enumerable: true,
   get: function () {
@@ -71,5 +65,4 @@ Object.defineProperty(exports, "ArticleWrapper", {
 });
 var _Article = require("./Article");
 var _ArticleByline = require("./ArticleByline");
-var _ArticleFootNotes = require("./ArticleFootNotes");
-var _ArticleParagraph = require("./ArticleParagraph");
+var _ArticleFootNotes = require("./ArticleFootNotes");

package/lib/AudioPlayer/AudioPlayer.js

@@ -180,7 +180,7 @@ const AudioPlayer = _ref => {
           }), !!textVersion && !img && textVersionButton]
         }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
           textStyle: "body.medium",
-          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
+          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
             variant: "link",
             onClick: () => setShowFullDescription(p => !p),
             children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)

package/lib/CampaignBlock/CampaignBlock.js

@@ -22,20 +22,32 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const Container = (0, _jsx2.styled)("div", {
   base: {
-    width: "100%",
-    display: "flex",
+    display: "grid",
+    gridTemplateColumns: "1fr",
     gap: "medium",
-    flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
     backgroundColor: "background.default",
     borderRadius: "xsmall",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
-    overflow: "hidden",
-    tabletWide: {
-      flexDirection: "row"
+    overflow: "hidden"
+  },
+  variants: {
+    imageSide: {
+      left: {
+        tabletWide: {
+          gridTemplateColumns: "minmax(230px, 455px) auto" //required for campaign block in myNdla
+        }
+      },
+      right: {
+        tabletWide: {
+          gridTemplateColumns: "auto minmax(230px, 455px)" //required for campaign block in myNdla
+        }
+      }
     }
+  },
+  defaultVariants: {
+    imageSide: "left"
   }
 });
 const LinkText = (0, _jsx2.styled)(_primitives.Text, {
@@ -61,29 +73,28 @@ const LinkHeader = (0, _jsx2.styled)(_primitives.Text, {
 });
 const StyledImg = (0, _jsx2.styled)("img", {
   base: {
-    alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    mobileWide: {
-      height: "340px"
+    tablet: {
+      height: "265px"
     },
     tabletWide: {
-      width: "auto"
+      height: "340px"
     }
   }
 });
 const ContentWrapper = (0, _jsx2.styled)("div", {
   base: {
     width: "100%",
-    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: "medium",
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium"
+    paddingInline: "medium",
+    minWidth: "270px" //required for campaign block in myNdla
   }
 });
 const StyledText = (0, _jsx2.styled)(_primitives.Text, {
@@ -135,6 +146,7 @@ const CampaignBlock = _ref2 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     className: className,
     "data-embed-type": "campaign-block",
+    imageSide: imageSide,
     children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
         url: url?.url,

package/lib/Concept/Concept.d.ts

@@ -14,5 +14,7 @@ export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
     lang?: string;
     title?: string;
     children?: ReactNode;
+    source?: string;
+    previewAlt?: boolean;
 }
 export declare const Concept: import("react").ForwardRefExoticComponent<Omit<ConceptProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/Concept/Concept.js

@@ -9,6 +9,7 @@ var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _Embed = require("../Embed");
 var _EmbedByline = require("../LicenseByline/EmbedByline");
+var _licenseAttributes = require("../utils/licenseAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -44,11 +45,15 @@ const Concept = exports.Concept = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref
     lang,
     children,
     title,
+    source,
+    previewAlt,
     ...rest
   } = _ref;
+  const licenseProps = (0, _licenseAttributes.licenseAttributes)(copyright?.license?.license, lang, source);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     ref: ref,
     ...rest,
+    ...licenseProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
       lang: lang,
       children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -58,7 +63,8 @@ const Concept = exports.Concept = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref
       }), children]
     }), visualElement?.resource === "image" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Embed.ImageEmbed, {
       embed: visualElement,
-      lang: lang
+      lang: lang,
+      previewAlt: previewAlt
     }) : visualElement?.resource === "brightcove" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Embed.BrightcoveEmbed, {
       embed: visualElement
     }) : visualElement?.resource === "h5p" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Embed.H5pEmbed, {

package/lib/ContactBlock/ContactBlock.js

@@ -43,7 +43,6 @@ const StyledWrapper = (0, _jsx2.styled)("div", {
     alignItems: "center",
     justifyContent: "space-between",
     boxShadow: "full",
-    marginBlockEnd: "4xsmall",
     border: "1px solid",
     gap: "medium",
     position: "relative",

package/lib/ContentTypeBadge/ContentTypeBadgeNew.js

@@ -27,12 +27,9 @@ const contentTypeToBadgeVariantMap = exports.contentTypeToBadgeVariantMap = {
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   [contentTypes.LEARNING_PATH]: "brand3",
   [contentTypes.TOPIC]: "neutral",
-  // TODO: Verify this color
   [contentTypes.MULTIDISCIPLINARY]: "neutral",
   [contentTypes.CONCEPT]: "brand1",
-  // TODO: Verify this color
   [contentTypes.EXTERNAL]: "brand2",
-  // TODO: Verify resourceEmbedTypeMapping colors
   [contentTypes.IMAGE]: "brand1",
   [contentTypes.AUDIO]: "brand1",
   [contentTypes.PODCAST]: "brand1",

package/lib/ContentTypeHero/ContentTypeHero.js

@@ -18,23 +18,18 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  *
  */
 
-// TODO: Figure out what to do with frontpage articles. If anything...
-// Also, verify all of these colors.
 const contentTypeToHeroMap = exports.contentTypeToHeroMap = {
   [contentTypes.SUBJECT_MATERIAL]: "primary",
-  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Strong",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Bold",
   [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
   // This will never happen
   [contentTypes.SUBJECT]: "primary",
   [contentTypes.SOURCE_MATERIAL]: "brand1",
   // This will never happen
   [contentTypes.LEARNING_PATH]: "primary",
-  // TODO: This needs a color
   [contentTypes.TOPIC]: "neutral",
-  // TODO: This is just taken from thin air.
-  [contentTypes.MULTIDISCIPLINARY]: "brand4",
+  [contentTypes.MULTIDISCIPLINARY]: "primary",
   [contentTypes.CONCEPT]: "brand1Subtle",
-  // TODO: No clue what this'll be. Maybe unused?
   [contentTypes.EXTERNAL]: "primary",
   [contentTypes.IMAGE]: "primary",
   [contentTypes.AUDIO]: "primary",

package/lib/Embed/AudioEmbed.js

@@ -8,6 +8,7 @@ var _primitives = require("@ndla/primitives");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
 var _LicenseByline = require("../LicenseByline");
+var _licenseAttributes = require("../utils/licenseAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -51,9 +52,11 @@ const AudioEmbed = _ref => {
     url: coverPhoto.url,
     alt: coverPhoto.altText
   };
+  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
     lang: lang,
     "data-embed-type": type,
+    ...licenseProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AudioPlayer.default, {
       description: data.podcastMeta?.introduction ?? "",
       img: img,

package/lib/Embed/BrightcoveEmbed.d.ts

@@ -10,8 +10,9 @@ import { RenderContext } from "./types";
 interface Props {
     embed: BrightcoveMetaData;
     renderContext?: RenderContext;
+    lang?: string;
 }
 export declare const makeIframeString: (url: string, width: string | number, height: string | number, title?: string) => string;
 export declare const isNumeric: (value: any) => boolean;
-declare const BrightcoveEmbed: ({ embed, renderContext }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BrightcoveEmbed: ({ embed, renderContext, lang }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BrightcoveEmbed;

package/lib/Embed/BrightcoveEmbed.js

@@ -11,6 +11,7 @@ var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _LicenseByline = require("../LicenseByline");
+var _licenseAttributes = require("../utils/licenseAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -58,7 +59,8 @@ const getIframeProps = (data, sources) => {
 const BrightcoveEmbed = _ref => {
   let {
     embed,
-    renderContext = "article"
+    renderContext = "article",
+    lang
   } = _ref;
   const [showOriginalVideo, setShowOriginalVideo] = (0, _react.useState)(true);
   const {
@@ -107,8 +109,10 @@ const BrightcoveEmbed = _ref => {
     ...embedData,
     videoid: linkedVideoId
   }, data.sources) : undefined;
+  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data?.copyright?.license.license, lang, embedData.pageUrl);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
     "data-embed-type": "brightcove",
+    ...licenseProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "brightcove-video",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrightcoveIframe, {

package/lib/Embed/ConceptEmbed.d.ts

@@ -12,13 +12,15 @@ import { ConceptProps } from "../Concept/Concept";
 interface BaseProps {
     renderContext?: RenderContext;
     lang?: string;
+    previewAlt?: boolean;
 }
 interface Props extends BaseProps {
     embed: ConceptMetaData;
 }
-export declare const ConceptEmbed: ({ embed, renderContext, lang }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ConceptEmbed: ({ embed, renderContext, lang, previewAlt }: Props) => import("react/jsx-runtime").JSX.Element;
 export interface InlineConceptProps extends ConceptProps, BaseProps {
     linkText?: string;
+    source?: string;
 }
 export declare const InlineConcept: import("react").ForwardRefExoticComponent<Omit<InlineConceptProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export interface BlockConceptProps extends ConceptProps {

package/lib/Embed/ConceptEmbed.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineConcept = exports.ConceptEmbed = exports.BlockConcept = void 0;
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
@@ -24,14 +25,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
   base: {
-    width: "surface.xlarge"
+    width: "surface.xlarge",
+    maxHeight: "50vh",
+    overflowY: "auto"
   }
 });
 const ConceptEmbed = _ref => {
   let {
     embed,
     renderContext,
-    lang
+    lang,
+    previewAlt
   } = _ref;
   const parsedContent = (0, _react.useMemo)(() => {
     if (embed.status === "error" || !embed.data.concept.content) return undefined;
@@ -60,19 +64,23 @@ const ConceptEmbed = _ref => {
   }
   if (embed.embedData.type === "inline") {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineConcept, {
+      previewAlt: previewAlt,
       linkText: embed.embedData.linkText,
       copyright: concept.copyright,
       visualElement: visualElement,
       lang: lang,
       title: concept.title.title,
+      source: concept.source,
       children: parsedContent
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockConcept, {
+    previewAlt: previewAlt,
     copyright: concept.copyright,
     visualElement: visualElement,
     lang: lang,
     title: renderContext === "embed" ? undefined : concept.title.title,
+    source: concept.source,
     children: parsedContent
   });
 };
@@ -85,23 +93,27 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
     lang,
     children,
     title,
+    source,
     ...rest
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
       asChild: true,
+      ref: ref,
+      ...rest,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
-        ...rest,
-        ref: ref,
         children: linkText
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
-        copyright: copyright,
-        visualElement: visualElement,
-        lang: lang,
-        title: title,
-        children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
+          copyright: copyright,
+          visualElement: visualElement,
+          lang: lang,
+          title: title,
+          source: source,
+          children: children
+        })
       })
     })]
   });

package/lib/Embed/ConceptListEmbed.js

@@ -69,7 +69,8 @@ const ConceptListEmbed = _ref => {
                 content: concept.content.content,
                 copyright: concept.copyright,
                 visualElement: visualElement,
-                lang: lang
+                lang: lang,
+                source: concept.source
               })
             }, concept.id);
           })

package/lib/Embed/ImageEmbed.js

@@ -13,6 +13,7 @@ var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _LicenseByline = require("../LicenseByline");
+var _licenseAttributes = require("../utils/licenseAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -233,12 +234,14 @@ const ImageEmbed = _ref => {
   const toggleImageSize = () => {
     setImageSizes(sizes => !sizes ? expandedSizes : undefined);
   };
+  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
 
   // TODO: Check how this works with `children`. Will only be important for ED
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     float: figureProps?.float,
     size: imageSizes ? "full" : figureProps?.size ?? "medium",
     "data-embed-type": "image",
+    ...licenseProps,
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
       border: embedData.border === "true",
       expandable: !!figureProps?.float,

package/lib/Embed/index.d.ts

@@ -6,6 +6,7 @@
  *
  */
 export { default as ImageEmbed, getCrop, getFocalPoint } from "./ImageEmbed";
+export { InlineTriggerButton } from "./InlineTriggerButton";
 export { default as AudioEmbed } from "./AudioEmbed";
 export { default as H5pEmbed } from "./H5pEmbed";
 export { default as ExternalEmbed } from "./ExternalEmbed";

package/lib/Embed/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "InlineConcept", {
     return _ConceptEmbed.InlineConcept;
   }
 });
+Object.defineProperty(exports, "InlineTriggerButton", {
+  enumerable: true,
+  get: function () {
+    return _InlineTriggerButton.InlineTriggerButton;
+  }
+});
 Object.defineProperty(exports, "RelatedContentEmbed", {
   enumerable: true,
   get: function () {
@@ -118,6 +124,7 @@ Object.defineProperty(exports, "getFocalPoint", {
   }
 });
 var _ImageEmbed = _interopRequireWildcard(require("./ImageEmbed"));
+var _InlineTriggerButton = require("./InlineTriggerButton");
 var _AudioEmbed = _interopRequireDefault(require("./AudioEmbed"));
 var _H5pEmbed = _interopRequireDefault(require("./H5pEmbed"));
 var _ExternalEmbed = _interopRequireDefault(require("./ExternalEmbed"));

package/lib/FileList/FileList.d.ts

@@ -9,6 +9,8 @@ import { ComponentPropsWithoutRef } from "react";
 interface Props extends ComponentPropsWithoutRef<"div"> {
 }
 export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
-export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<"li", {}>;
+export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/FileList/FileList.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FileListWrapper = exports.FileListItem = exports.FileListEmbed = void 0;
 var _reactI18next = require("react-i18next");
+var _react = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,8 +24,9 @@ const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)("div", {
     gap: "xsmall"
   }
 });
-const FileListItem = exports.FileListItem = (0, _jsx2.styled)("li", {
+const FileListItem = exports.FileListItem = (0, _jsx2.styled)(_react.ark.li, {
   base: {
+    listStyle: "none",
     background: "surface.infoSubtle",
     borderBlockEnd: "1px solid",
     borderColor: "stroke.default",
@@ -34,6 +36,8 @@ const FileListItem = exports.FileListItem = (0, _jsx2.styled)("li", {
       backgroundColor: "surface.infoSubtle.hover"
     }
   }
+}, {
+  baseComponent: true
 });
 const FileListEmbed = _ref => {
   let {

package/lib/FileList/PdfFile.js

@@ -20,6 +20,11 @@ const StyledIframe = (0, _jsx2.styled)("iframe", {
     width: "100%"
   }
 });
+const StyledListElement = (0, _jsx2.styled)("li", {
+  base: {
+    listStyle: "none"
+  }
+});
 const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
   base: {
     display: "flex",
@@ -32,7 +37,7 @@ const PdfFile = _ref => {
     title,
     url
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledListElement, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         asChild: true,

package/lib/FileList/index.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { FileListEmbed, FileListItem } from "./FileList";
+export { FileListEmbed, FileListItem, FileListWrapper } from "./FileList";
 export { File, FileListElement } from "./File";
 export { PdfFile } from "./PdfFile";

package/lib/FileList/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "FileListItem", {
     return _FileList.FileListItem;
   }
 });
+Object.defineProperty(exports, "FileListWrapper", {
+  enumerable: true,
+  get: function () {
+    return _FileList.FileListWrapper;
+  }
+});
 Object.defineProperty(exports, "PdfFile", {
   enumerable: true,
   get: function () {

package/lib/Grid/Grid.js

@@ -23,7 +23,6 @@ const GridContainer = (0, _jsx2.styled)("div", {
     gridColumnGap: "medium",
     width: "100%",
     backgroundColor: "background.subtle",
-    maxWidth: "surface.4xlarge",
     minWidth: "surface.xxsmall",
     gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
     tabletDown: {

package/lib/LicenseByline/EmbedByline.js

@@ -187,7 +187,10 @@ const LicenseContainerContent = _ref3 => {
   const authors = (0, _licenses.getLicenseCredits)(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, captionAuthors.map(author => author.name).join(", "), license ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      property: "cc:attributionName",
+      children: captionAuthors.map(author => author.name).join(", ")
+    }), license ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [" / ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseLink.LicenseLink, {
         license: license
       })]

package/lib/TreeStructure/TreeStructure.js

@@ -257,8 +257,6 @@ const TreeStructureItem = _ref2 => {
   } = (0, _react2.usePopoverContext)();
   const containsResource = targetResource && folder.resources.some(resource => resource.resourceId === targetResource.resourceId);
   const FolderIcon = folder.status === "shared" ? StyledFolderUserLine : StyledFolderLine;
-
-  // TODO: Pressing enter selects the item and closes the popover immediately. Do we actually want this? Old behavior.
   const onKeyDown = (0, _react.useCallback)(e => {
     if (e.key === "Enter") {
       setOpen(false);

package/lib/i18n/index.d.ts

@@ -7,4 +7,4 @@
  */
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
-export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, } from "./useComponentTranslations";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, } from "./useComponentTranslations";

package/lib/i18n/index.js

@@ -15,12 +15,24 @@ Object.defineProperty(exports, "i18nInstance", {
     return _i18n.i18nInstance;
   }
 });
+Object.defineProperty(exports, "useAudioSearchTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useAudioSearchTranslations;
+  }
+});
 Object.defineProperty(exports, "useComboboxTranslations", {
   enumerable: true,
   get: function () {
     return _useComponentTranslations.useComboboxTranslations;
   }
 });
+Object.defineProperty(exports, "useImageSearchTranslations", {
+  enumerable: true,
+  get: function () {
+    return _useComponentTranslations.useImageSearchTranslations;
+  }
+});
 Object.defineProperty(exports, "usePaginationTranslations", {
   enumerable: true,
   get: function () {