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

package/dist/panda.buildinfo.json

@@ -5,7 +5,6 @@
       "background]___[value:background.default",
       "display]___[value:flex",
       "flexDirection]___[value:column",
-      "gap]___[value:xxlarge",
       "color]___[value:text.default",
       "alignItems]___[value:center",
       "width]___[value:100%",
@@ -19,6 +18,7 @@
       "overflowWrap]___[value:anywhere]___[cond:& h1",
       "gap]___[value:medium",
       "paddingBlockStart]___[value:xxlarge",
+      "gap]___[value:xxlarge",
       "paddingBlockEnd]___[value:5xlarge]___[cond:& > :is(:last-child)",
       "minHeight]___[value:xxlarge",
       "marginBlockStart]___[value:medium",
@@ -33,8 +33,6 @@
       "flexDirection]___[value:row]___[cond:tabletWide",
       "gap]___[value:xsmall",
       "listStyle]___[value:none",
-      "textAlign]___[value:center]___[cond:&[data-align=\"center\"]",
-      "direction]___[value:rtl]___[cond:&:has(span[dir=\"rtl\"])",
       "border]___[value:1px solid",
       "borderColor]___[value:stroke.default",
       "borderRadius]___[value:xsmall",
@@ -122,11 +120,15 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
+      "display]___[value:grid",
+      "gridTemplateColumns]___[value:1fr",
+      "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:tabletWide",
+      "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:tabletWide",
       "fontWeight]___[value:bold",
-      "alignSelf]___[value:center",
       "height]___[value:215px",
-      "height]___[value:340px]___[cond:mobileWide",
-      "width]___[value:auto]___[cond:tabletWide",
+      "height]___[value:265px]___[cond:tablet",
+      "height]___[value:340px]___[cond:tabletWide",
+      "minWidth]___[value:270px",
       "display]___[value:block]___[cond:tabletWide",
       "overflow]___[value:hidden]___[cond:tabletWide",
       "position]___[value:relative]___[cond:tabletWide",
@@ -234,6 +236,8 @@
       "textStyle]___[value:label.large",
       "marginBlockStart]___[value:xsmall]___[cond:& > *:not(:where(:first-child))",
       "width]___[value:surface.xlarge",
+      "maxHeight]___[value:50vh",
+      "overflowY]___[value:auto",
       "display]___[value:block]___[cond:& li",
       "color]___[value:text.error",
       "backgroundColor]___[value:surface.disabled",
@@ -348,11 +352,9 @@
       "borderColor]___[value:stroke.default]___[cond:_first",
       "fontWeight]___[value:bold]___[cond:_first<___>& p",
       "fontStyle]___[value:italic",
-      "display]___[value:grid",
       "gridRowGap]___[value:large",
       "gridColumnGap]___[value:medium",
       "backgroundColor]___[value:background.subtle",
-      "maxWidth]___[value:surface.4xlarge",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))",
       "gridTemplateColumns]___[value:repeat(1, minmax(0, 1fr))]___[cond:tabletDown",
       "gridTemplateColumns]___[value:repeat(2, minmax(0, 1fr))]___[cond:tabletToDesktop",

package/dist/styles.css

@@ -93,10 +93,6 @@
     display: flex;
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
-}
-
   .c_text\.default {
     color: var(--colors-text-default);
 }
@@ -121,6 +117,10 @@
     padding-block-start: var(--spacing-xxlarge);
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
   .min-h_xxlarge {
     min-height: var(--sizes-xxlarge);
 }
@@ -326,10 +326,18 @@
     text-decoration: underline;
 }
 
+  .d_grid {
+    display: grid;
+}
+
   .h_215px {
     height: 215px;
 }
 
+  .min-w_270px {
+    min-width: 270px;
+}
+
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -438,6 +446,10 @@
     width: var(--sizes-surface-xlarge);
 }
 
+  .max-h_50vh {
+    max-height: 50vh;
+}
+
   .c_text\.error {
     color: var(--colors-text-error);
 }
@@ -539,14 +551,6 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
-  .d_grid {
-    display: grid;
-}
-
-  .max-w_surface\.4xlarge {
-    max-width: var(--sizes-surface-4xlarge);
-}
-
   .w_surface\.3xsmall {
     width: var(--sizes-surface-3xsmall);
 }
@@ -678,12 +682,12 @@
     align-items: flex-end;
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
+  .grid-tc_1fr {
+    grid-template-columns: 1fr;
 }
 
-  .as_center {
-    align-self: center;
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
 }
 
   .bd-l-c_stroke\.default {
@@ -722,6 +726,10 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
+  .ov-y_auto {
+    overflow-y: auto;
+}
+
   .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
@@ -900,14 +908,6 @@
     padding-block-end: var(--spacing-5xlarge);
 }
 
-  .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
-    text-align: center;
-}
-
-  .\[\&\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl:has(span[dir="rtl"]) {
-    direction: rtl;
-}
-
   .\[\&_img\]\:w_100\% img {
     width: 100%;
 }
@@ -1448,9 +1448,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:h_340px {
-      height: 340px;
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1465,6 +1462,9 @@
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
+}
+    .tablet\:h_265px {
+      height: 265px;
 }
     .tablet\:h_26px {
       height: 26px;
@@ -1544,8 +1544,8 @@
     .tabletWide\:max-w_532px {
       max-width: 532px;
 }
-    .tabletWide\:w_auto {
-      width: auto;
+    .tabletWide\:h_340px {
+      height: 340px;
 }
     .tabletWide\:d_block {
       display: block;
@@ -1570,6 +1570,12 @@
 }
     .tabletWide\:jc_space-between {
       justify-content: space-between;
+}
+    .tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
+      grid-template-columns: minmax(230px, 455px) auto;
+}
+    .tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
+      grid-template-columns: auto minmax(230px, 455px);
 }
 }
 

package/es/Article/Article.js

@@ -33,7 +33,6 @@ const StyledArticleWrapper = styled(ark.article, {
     background: "background.default",
     display: "flex",
     flexDirection: "column",
-    gap: "xxlarge",
     color: "text.default",
     alignItems: "center",
     width: "100%",
@@ -112,7 +111,7 @@ export const ArticleTitle = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
     children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
-      children: [/*#__PURE__*/_jsxs(StyledStack, {
+      children: [(!!contentType || !!heartButton) && /*#__PURE__*/_jsxs(StyledStack, {
         justify: "space-between",
         align: "center",
         direction: "row",
@@ -121,9 +120,10 @@ export const ArticleTitle = _ref2 => {
           contentType: contentType
         }), heartButton]
       }), /*#__PURE__*/_jsx(Heading, {
-        textStyle: "heading.large",
+        textStyle: "heading.medium",
         id: id,
         lang: lang,
+        property: "dct:title",
         children: title
       })]
     }), !!introduction && /*#__PURE__*/_jsx(Text, {

package/es/Article/ArticleByline.js

@@ -25,9 +25,6 @@ const Wrapper = 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 = styled("div", {
   base: {
     display: "flex",
@@ -130,7 +127,11 @@ export const ArticleByline = _ref => {
       children: [/*#__PURE__*/_jsxs(LicenseWrapper, {
         children: [license && /*#__PURE__*/_jsx(LicenseLink, {
           license: license
-        }), showPrimaryContributors && /*#__PURE__*/_jsxs("span", {
+        }), showPrimaryContributors &&
+        /*#__PURE__*/
+        //eslint-disable-next-line react/no-unknown-property
+        _jsxs("span", {
+          property: "cc:attributionName",
           children: [authors.length > 0 && `${t("article.authorsLabel", {
             names: renderContributors(authors, t),
             interpolation: {

package/es/Article/index.js

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

package/es/AudioPlayer/AudioPlayer.js

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

package/es/CampaignBlock/CampaignBlock.js

@@ -15,20 +15,32 @@ import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Container = 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 = styled(Text, {
@@ -54,29 +66,28 @@ const LinkHeader = styled(Text, {
 });
 const StyledImg = styled("img", {
   base: {
-    alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    mobileWide: {
-      height: "340px"
+    tablet: {
+      height: "265px"
     },
     tabletWide: {
-      width: "auto"
+      height: "340px"
     }
   }
 });
 const ContentWrapper = 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 = styled(Text, {
@@ -128,6 +139,7 @@ const CampaignBlock = _ref2 => {
   return /*#__PURE__*/_jsxs(Container, {
     className: className,
     "data-embed-type": "campaign-block",
+    imageSide: imageSide,
     children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
       children: [/*#__PURE__*/_jsx(MaybeLinkText, {
         url: url?.url,

package/es/Concept/Concept.js

@@ -11,6 +11,7 @@ import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledFigure = styled(Figure, {
   base: {
@@ -38,11 +39,14 @@ export const Concept = /*#__PURE__*/forwardRef((_ref, ref) => {
     lang,
     children,
     title,
+    source,
     ...rest
   } = _ref;
+  const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
   return /*#__PURE__*/_jsxs(StyledFigure, {
     ref: ref,
     ...rest,
+    ...licenseProps,
     children: [/*#__PURE__*/_jsxs(ContentWrapper, {
       lang: lang,
       children: [!!title && /*#__PURE__*/_jsxs(_Fragment, {

package/es/ContactBlock/ContactBlock.js

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

package/es/ContentTypeBadge/ContentTypeBadgeNew.js

@@ -19,12 +19,9 @@ export const 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/es/ContentTypeHero/ContentTypeHero.js

@@ -9,25 +9,19 @@
 import { forwardRef } from "react";
 import { Hero } from "@ndla/primitives";
 import * as contentTypes from "../model/ContentType";
-
-// TODO: Figure out what to do with frontpage articles. If anything...
-// Also, verify all of these colors.
 import { jsx as _jsx } from "react/jsx-runtime";
 export const 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/es/Embed/AudioEmbed.js

@@ -10,6 +10,7 @@ import { Figure } from "@ndla/primitives";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import AudioPlayer from "../AudioPlayer";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
 const AudioEmbed = _ref => {
@@ -43,9 +44,11 @@ const AudioEmbed = _ref => {
     url: coverPhoto.url,
     alt: coverPhoto.altText
   };
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
   return /*#__PURE__*/_jsxs(Figure, {
     lang: lang,
     "data-embed-type": type,
+    ...licenseProps,
     children: [/*#__PURE__*/_jsx(AudioPlayer, {
       description: data.podcastMeta?.introduction ?? "",
       img: img,

package/es/Embed/BrightcoveEmbed.js

@@ -13,6 +13,7 @@ import { Button, Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LinkedVideoButton = styled(Button, {
   base: {
@@ -49,7 +50,8 @@ const getIframeProps = (data, sources) => {
 const BrightcoveEmbed = _ref => {
   let {
     embed,
-    renderContext = "article"
+    renderContext = "article",
+    lang
   } = _ref;
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const {
@@ -98,8 +100,10 @@ const BrightcoveEmbed = _ref => {
     ...embedData,
     videoid: linkedVideoId
   }, data.sources) : undefined;
+  const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
   return /*#__PURE__*/_jsxs(Figure, {
     "data-embed-type": "brightcove",
+    ...licenseProps,
     children: [/*#__PURE__*/_jsx("div", {
       className: "brightcove-video",
       children: /*#__PURE__*/_jsx(BrightcoveIframe, {

package/es/Embed/ConceptEmbed.js

@@ -8,6 +8,7 @@
 
 import parse from "html-react-parser";
 import { forwardRef, useMemo } from "react";
+import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
@@ -17,7 +18,9 @@ import { Concept } from "../Concept/Concept";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
-    width: "surface.xlarge"
+    width: "surface.xlarge",
+    maxHeight: "50vh",
+    overflowY: "auto"
   }
 });
 export const ConceptEmbed = _ref => {
@@ -58,6 +61,7 @@ export const ConceptEmbed = _ref => {
       visualElement: visualElement,
       lang: lang,
       title: concept.title.title,
+      source: concept.source,
       children: parsedContent
     });
   }
@@ -66,6 +70,7 @@ export const ConceptEmbed = _ref => {
     visualElement: visualElement,
     lang: lang,
     title: renderContext === "embed" ? undefined : concept.title.title,
+    source: concept.source,
     children: parsedContent
   });
 };
@@ -77,23 +82,27 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
     lang,
     children,
     title,
+    source,
     ...rest
   } = _ref2;
   return /*#__PURE__*/_jsxs(PopoverRoot, {
     children: [/*#__PURE__*/_jsx(PopoverTrigger, {
       asChild: true,
+      ref: ref,
+      ...rest,
       children: /*#__PURE__*/_jsx(InlineTriggerButton, {
-        ...rest,
-        ref: ref,
         children: linkText
       })
-    }), /*#__PURE__*/_jsx(StyledPopoverContent, {
-      children: /*#__PURE__*/_jsx(Concept, {
-        copyright: copyright,
-        visualElement: visualElement,
-        lang: lang,
-        title: title,
-        children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(StyledPopoverContent, {
+        children: /*#__PURE__*/_jsx(Concept, {
+          copyright: copyright,
+          visualElement: visualElement,
+          lang: lang,
+          title: title,
+          source: source,
+          children: children
+        })
       })
     })]
   });

package/es/Embed/ConceptListEmbed.js

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

package/es/Embed/ImageEmbed.js

@@ -15,6 +15,7 @@ import { Figure, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { EmbedByline } from "../LicenseByline";
+import { licenseAttributes } from "../utils/licenseAttributes";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const getLicenseCredits = copyright => {
   return {
@@ -223,12 +224,14 @@ const ImageEmbed = _ref => {
   const toggleImageSize = () => {
     setImageSizes(sizes => !sizes ? expandedSizes : undefined);
   };
+  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
 
   // TODO: Check how this works with `children`. Will only be important for ED
   return /*#__PURE__*/_jsxs(StyledFigure, {
     float: figureProps?.float,
     size: imageSizes ? "full" : figureProps?.size ?? "medium",
     "data-embed-type": "image",
+    ...licenseProps,
     children: [children, /*#__PURE__*/_jsxs(ImageWrapper, {
       border: embedData.border === "true",
       expandable: !!figureProps?.float,

package/es/Embed/index.js

@@ -7,6 +7,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/es/FileList/FileList.js

@@ -7,6 +7,7 @@
  */
 
 import { useTranslation } from "react-i18next";
+import { ark } from "@ark-ui/react";
 import { Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,8 +18,9 @@ export const FileListWrapper = styled("div", {
     gap: "xsmall"
   }
 });
-export const FileListItem = styled("li", {
+export const FileListItem = styled(ark.li, {
   base: {
+    listStyle: "none",
     background: "surface.infoSubtle",
     borderBlockEnd: "1px solid",
     borderColor: "stroke.default",
@@ -28,6 +30,8 @@ export const FileListItem = styled("li", {
       backgroundColor: "surface.infoSubtle.hover"
     }
   }
+}, {
+  baseComponent: true
 });
 export const FileListEmbed = _ref => {
   let {

package/es/FileList/PdfFile.js

@@ -14,6 +14,11 @@ const StyledIframe = styled("iframe", {
     width: "100%"
   }
 });
+const StyledListElement = styled("li", {
+  base: {
+    listStyle: "none"
+  }
+});
 const StyledFigure = styled(Figure, {
   base: {
     display: "flex",
@@ -26,7 +31,7 @@ export const PdfFile = _ref => {
     title,
     url
   } = _ref;
-  return /*#__PURE__*/_jsx("li", {
+  return /*#__PURE__*/_jsx(StyledListElement, {
     children: /*#__PURE__*/_jsxs(StyledFigure, {
       children: [/*#__PURE__*/_jsx(Heading, {
         asChild: true,

package/es/FileList/index.js

@@ -6,6 +6,6 @@
  *
  */
 
-export { FileListEmbed, FileListItem } from "./FileList";
+export { FileListEmbed, FileListItem, FileListWrapper } from "./FileList";
 export { File, FileListElement } from "./File";
 export { PdfFile } from "./PdfFile";

package/es/Grid/Grid.js

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