@ndla/ui 56.0.3-alpha.0 → 56.0.4-alpha.0

package/dist/panda.buildinfo.json

@@ -2,7 +2,6 @@
   "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
-      "width]___[value:100%",
       "display]___[value:flex",
       "flexDirection]___[value:column",
       "color]___[value:text.default",
@@ -11,6 +10,7 @@
       "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:8%",
       "alignItems]___[value:center",
+      "width]___[value:100%",
       "overflowWrap]___[value:break-word",
       "position]___[value:relative",
       "paddingBlock]___[value:medium]___[cond:tablet",
@@ -331,14 +331,46 @@
       "transitionDuration]___[value:fast]___[cond:& svg",
       "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
       "display]___[value:none]___[cond:_print",
+      "textUnderlineOffset]___[value:2px",
+      "paddingBlock]___[value:small",
+      "paddingInlineEnd]___[value:medium",
+      "paddingInlineStart]___[value:small",
+      "flexDirection]___[value:row",
+      "inset]___[value:0]___[cond:_before",
+      "zIndex]___[value:0]___[cond:_before",
+      "background]___[value:surface.infoSubtle",
+      "borderBlockEnd]___[value:1px solid",
+      "backgroundColor]___[value:surface.infoSubtle.hover]___[cond:_hover",
       "gap]___[value:small",
       "paddingInline]___[value:0",
       "marginBlockStart]___[value:3xsmall",
-      "paddingBlock]___[value:small",
       "background]___[value:surface.brand.1.subtle]___[cond:_first",
       "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",
+      "display]___[value:flex]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "flexFlow]___[value:column]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "justifyContent]___[value:center]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "alignItems]___[value:center]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "gridColumn]___[value:span 2]___[cond:tabletToDesktop<___>& > div:nth-child(3):last-child",
+      "gridTemplateColumns]___[value:repeat(3, minmax(0, 1fr))]___[cond:desktop",
+      "gridTemplateColumns]___[value:repeat(4, minmax(0, 1fr))]___[cond:desktop",
+      "backgroundColor]___[value:surface.default",
+      "backgroundColor]___[value:transparent",
+      "borderColor]___[value:surface.brand.2",
+      "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
+      "position]___[value:sticky]___[cond:& > div",
+      "width]___[value:surface.3xsmall",
+      "textStyle]___[value:heading.large",
+      "textStyle]___[value:title.medium",
       "position]___[value:relative!",
       "width]___[value:83.333%",
       "right]___[value:auto !important",
@@ -388,9 +420,6 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
-      "inset]___[value:0]___[cond:_before",
-      "zIndex]___[value:0]___[cond:_before",
-      "display]___[value:grid",
       "gridTemplateColumns]___[value:repeat(2, 1fr)",
       "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
       "marginBlockStart]___[value:xsmall",

package/dist/styles.css

@@ -48,6 +48,30 @@
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
+    .textStyle_heading\.large {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-bold);
+      font-size: var(--font-sizes-4xlarge);
+      line-height: var(--line-heights-4xlarge);
+}
+
+    .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-4xlarge) * 1.11);
+      line-height: calc(var(--line-heights-4xlarge) * 1.11);
+}
+
+    .textStyle_title\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-bold);
+      font-size: var(--font-sizes-large);
+      line-height: var(--line-heights-large);
+}
+
+    .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-large) * 1.11);
+      line-height: calc(var(--line-heights-large) * 1.11);
+}
+
     .\[\&_a\]\:textStyle_label\.xsmall a {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -61,10 +85,6 @@
 }
 }
 
-  .w_100\% {
-    width: 100%;
-}
-
   .d_flex {
     display: flex;
 }
@@ -89,6 +109,10 @@
     padding-inline: 8%;
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -491,6 +515,30 @@
     clear: both;
 }
 
+  .tu-o_2px {
+    text-underline-offset: 2px;
+}
+
+  .py_small {
+    padding-block: var(--spacing-small);
+}
+
+  .pe_medium {
+    padding-inline-end: var(--spacing-medium);
+}
+
+  .ps_small {
+    padding-inline-start: var(--spacing-small);
+}
+
+  .bg_surface\.infoSubtle {
+    background: var(--colors-surface-info-subtle);
+}
+
+  .bd-be_1px_solid {
+    border-block-end: 1px solid;
+}
+
   .gap_small {
     gap: var(--spacing-small);
 }
@@ -503,8 +551,16 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
-  .py_small {
-    padding-block: var(--spacing-small);
+  .d_grid {
+    display: grid;
+}
+
+  .max-w_surface\.4xlarge {
+    max-width: var(--sizes-surface-4xlarge);
+}
+
+  .w_surface\.3xsmall {
+    width: var(--sizes-surface-3xsmall);
 }
 
   .pos_relative\! {
@@ -547,10 +603,6 @@
     color: var(--colors-icon-strong);
 }
 
-  .d_grid {
-    display: grid;
-}
-
   .mbs_xsmall {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -760,10 +812,42 @@
     bottom: calc(var(--spacing-medium) * -1);
 }
 
+  .flex-d_row {
+    flex-direction: row;
+}
+
   .font-style_italic {
     font-style: italic;
 }
 
+  .grid-rg_large {
+    grid-row-gap: var(--spacing-large);
+}
+
+  .grid-cg_medium {
+    grid-column-gap: var(--spacing-medium);
+}
+
+  .bg-c_background\.subtle {
+    background-color: var(--colors-background-subtle);
+}
+
+  .grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+  .bg-c_surface\.default {
+    background-color: var(--colors-surface-default);
+}
+
+  .bg-c_transparent {
+    background-color: transparent;
+}
+
+  .bd-c_surface\.brand\.2 {
+    border-color: var(--colors-surface-brand-2);
+}
+
   .right_auto\! {
     right: auto !important;
 }
@@ -1059,10 +1143,22 @@
     padding-block-end: var(--spacing-xsmall);
 }
 
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .first\:bg_surface\.brand\.1\.subtle:first-child {
     background: var(--colors-surface-brand-1-subtle);
 }
 
+  .\[\&_\>_div\]\:pos_sticky > div {
+    position: sticky;
+}
+
   .after\:d_block\!::after {
     display: block !important;
 }
@@ -1075,14 +1171,6 @@
     text-decoration: underline;
 }
 
-  .before\:inset_0::before {
-    inset: 0;
-}
-
-  .before\:z_0::before {
-    z-index: 0;
-}
-
   .after\:content_0::after {
     content: 0;
 }
@@ -1187,6 +1275,10 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .\[\&_\>_div\]\:top_var\(--masthead-height\,_0px\) > div {
+    top: var(--masthead-height, 0px);
+}
+
   .after\:content_\"\"\!::after {
     content: "" !important;
 }
@@ -1243,6 +1335,10 @@
     border-color: var(--colors-text-link);
 }
 
+  .hover\:bg-c_surface\.infoSubtle\.hover:is(:hover, [data-hover]) {
+    background-color: var(--colors-surface-info-subtle-hover);
+}
+
   .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
     background: var(--colors-surface-action-subtle-active);
 }
@@ -1397,6 +1493,27 @@
     .\[\&_svg\]\:tablet\:h_12px svg {
       height: 12px;
 }
+}
+
+  @media screen and (min-width: 37.5625rem) and (max-width: 61.31rem) {
+    .tabletToDesktop\:grid-tc_repeat\(2\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:d_flex > div:nth-child(3):last-child {
+      display: flex;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:flex-flow_column > div:nth-child(3):last-child {
+      flex-flow: column;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:grid-c_span_2 > div:nth-child(3):last-child {
+      grid-column: span 2;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:jc_center > div:nth-child(3):last-child {
+      justify-content: center;
+}
+    .tabletToDesktop\:\[\&_\>_div\:nth-child\(3\)\:last-child\]\:ai_center > div:nth-child(3):last-child {
+      align-items: center;
+}
 }
 
   @media screen and (min-width: 48rem) {
@@ -1435,6 +1552,12 @@
 }
     .desktop\:top_xxlarge {
       top: var(--spacing-xxlarge);
+}
+    .desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+    .desktop\:grid-tc_repeat\(4\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 }
 
@@ -1495,6 +1618,9 @@
 }
     .tabletDown\:bdr_0 {
       border-radius: 0;
+}
+    .tabletDown\:grid-tc_repeat\(1\,_minmax\(0\,_1fr\)\) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
 }
     .tabletDown\:grid-tc_1fr {
       grid-template-columns: 1fr;

package/es/Article/Article.js

@@ -9,13 +9,9 @@
 import { Heading, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import ArticleByline from "./ArticleByline";
+import { ArticleContent } from "./ArticleContent";
 import { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArticleContent = styled("section", {
-  base: {
-    width: "100%"
-  }
-});
 export const ArticleWrapper = styled("article", {
   base: {
     display: "flex",

package/es/Article/ArticleContent.js

@@ -0,0 +1,27 @@
+/**
+ * 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 { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledArticleContent = styled(ark.section, {}, {
+  baseComponent: true
+});
+export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledArticleContent, {
+    className: cx("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});

package/es/Article/index.js

@@ -8,6 +8,7 @@
 
 import ArticleByline from "./ArticleByline";
 import ArticleFootNotes from "./ArticleFootNotes";
-export { Article, ArticleContent, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { ArticleContent } from "./ArticleContent";
 export { ArticleByline, ArticleFootNotes };
 export { ArticleParagraph } from "./ArticleParagraph";

package/es/Embed/ImageEmbed.js

@@ -27,10 +27,11 @@ export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8
 const getFigureProps = (size, float) => {
   const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
   const replacedSize = size?.replace("-hide-byline", "") ?? "full";
+  const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
   return {
     float: actualFloat,
     // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.
-    size: replacedSize === "full" && float ? "medium" : replacedSize
+    size: actualSize === "full" && float ? "medium" : actualSize
   };
 };
 const getSizes = (size, align) => {

package/es/ErrorMessage/ErrorMessage.js

@@ -25,6 +25,8 @@ const StyledErrorMessage = styled("article", {
 });
 const IllustrationWrapper = styled("div", {
   base: {
+    display: "flex",
+    justifyContent: "center",
     marginBottom: "medium",
     tablet: {
       marginTop: "xxlarge"

package/es/FileList/File.js

@@ -1,4 +1,3 @@
-import _styled from "@emotion/styled/base";
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -7,38 +6,94 @@ import _styled from "@emotion/styled/base";
  *
  */
 
+import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
-import { breakpoints, colors, mq, spacing } from "@ndla/core";
-import Format from "./Format";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFileItem = /*#__PURE__*/_styled("li", {
-  target: "ei1p2nz0",
-  label: "StyledFileItem"
-})("background:", colors.brand.greyLighter, ";display:flex;align-items:center;flex-wrap:wrap;margin-bottom:", spacing.xsmall, ";padding:", spacing.small, ";", mq.range({
-  from: breakpoints.tablet
-}), "{padding:", spacing.small, " ", spacing.normal, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCZ0MiLCJmaWxlIjoiRmlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgbXEsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IEZvcm1hdCBmcm9tIFwiLi9Gb3JtYXRcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGZpbGVFeGlzdHM6IGJvb2xlYW47XG4gIGZpbGVUeXBlOiBzdHJpbmc7XG59XG5leHBvcnQgaW50ZXJmYWNlIEZpbGVUeXBlIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgZm9ybWF0czogRmlsZUZvcm1hdFtdO1xuICBmaWxlRXhpc3RzPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBGaWxlRm9ybWF0IHtcbiAgdXJsOiBzdHJpbmc7XG4gIGZpbGVUeXBlOiBzdHJpbmc7XG4gIHRvb2x0aXA6IHN0cmluZztcbn1cblxuY29uc3QgU3R5bGVkRmlsZUl0ZW0gPSBzdHlsZWQubGlgXG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbmA7XG5cbmNvbnN0IEZpbGUgPSAoeyB0aXRsZSwgdXJsLCBmaWxlRXhpc3RzLCBmaWxlVHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHRvb2x0aXAgPSBgJHt0KFwiZG93bmxvYWRcIil9ICR7dXJsLnNwbGl0KFwiL1wiKS5wb3AoKX1gO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEZpbGVJdGVtPlxuICAgICAgPEZvcm1hdCBmb3JtYXQ9e3sgdXJsLCBmaWxlVHlwZSwgdG9vbHRpcCB9fSBpc1ByaW1hcnkgdGl0bGU9e3RpdGxlfSBpc0RlYWRMaW5rPXshZmlsZUV4aXN0c30gLz5cbiAgICA8L1N0eWxlZEZpbGVJdGVtPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRmlsZTtcbiJdfQ== */"));
-const File = _ref => {
+import { DownloadLine } from "@ndla/icons/common";
+import { Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { FileListItem } from ".";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    textUnderlineOffset: "2px",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none"
+    }
+  }
+});
+const StyledHStack = styled(HStack, {
+  base: {
+    position: "relative",
+    paddingBlock: "small",
+    paddingInlineEnd: "medium",
+    paddingInlineStart: "small",
+    width: "100%"
+  }
+});
+export const File = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     title,
     url,
     fileExists,
-    fileType
+    fileType,
+    fileSize,
+    ...rest
   } = _ref;
   const {
     t
   } = useTranslation();
   const tooltip = `${t("download")} ${url.split("/").pop()}`;
-  return /*#__PURE__*/_jsx(StyledFileItem, {
-    children: /*#__PURE__*/_jsx(Format, {
-      format: {
-        url,
-        fileType,
-        tooltip
-      },
-      isPrimary: true,
+  return /*#__PURE__*/_jsxs(StyledHStack, {
+    justify: "space-between",
+    ref: ref,
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      gap: "xxsmall",
+      children: [/*#__PURE__*/_jsx(DownloadLine, {}), fileExists ? /*#__PURE__*/_jsx(StyledSafeLink, {
+        unstyled: true,
+        css: linkOverlay.raw(),
+        to: url,
+        title: tooltip,
+        children: title
+      }) : /*#__PURE__*/_jsx(Text, {
+        textStyle: "label.medium",
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        textStyle: "label.large",
+        asChild: true,
+        consumeCss: true,
+        children: /*#__PURE__*/_jsxs("span", {
+          children: ["(", fileType?.toUpperCase(), ")"]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      textStyle: "label.large",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: fileSize
+      })
+    })]
+  });
+});
+export const FileListElement = _ref2 => {
+  let {
+    title,
+    url,
+    fileExists,
+    fileType,
+    fileSize
+  } = _ref2;
+  return /*#__PURE__*/_jsx(FileListItem, {
+    children: /*#__PURE__*/_jsx(File, {
       title: title,
-      isDeadLink: !fileExists
+      url: url,
+      fileExists: fileExists,
+      fileType: fileType,
+      fileSize: fileSize
     })
   });
-};
-export default File;
+};

package/es/FileList/FileList.js

@@ -1,5 +1,3 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -9,52 +7,49 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { useTranslation } from "react-i18next";
-import { colors, fonts, spacing } from "@ndla/core";
-import { Heading } from "@ndla/typography";
+import { Heading } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FileListSection = /*#__PURE__*/_styled("section", {
-  target: "e1o67ylf2",
-  label: "FileListSection"
-})("margin:", spacing.large, " 0;padding:0 0 ", spacing.normal, " ", spacing.normal, ";border-left:2px solid ", colors.brand.greyLightest, ";font-family:", fonts.sans, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQnNDIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */"));
-const FileListHeaderWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1o67ylf1",
-  label: "FileListHeaderWrapper"
-})("display:flex;justify-content:space-between;align-items:center;margin:0 0 ", spacing.xsmall, " 0;padding-bottom:", spacing.xsmall, ";border-bottom:2px solid ", colors.brand.greyLight, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QndDIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */"));
-const FilesList = /*#__PURE__*/_styled("ul", {
-  target: "e1o67ylf0",
-  label: "FilesList"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1hcx8jb",
-  styles: "padding:0"
-} : {
-  name: "1hcx8jb",
-  styles: "padding:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQzJCIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+export const FileListWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall"
+  }
 });
-const FileList = _ref => {
+export const FileListItem = styled("li", {
+  base: {
+    background: "surface.infoSubtle",
+    borderBlockEnd: "1px solid",
+    borderColor: "stroke.default",
+    display: "flex",
+    justifyContent: "space-between",
+    _hover: {
+      backgroundColor: "surface.infoSubtle.hover"
+    }
+  }
+});
+export const FileListEmbed = _ref => {
   let {
     children,
-    headingButtons,
     ...rest
   } = _ref;
   const {
     t
   } = useTranslation();
-  return /*#__PURE__*/_jsxs(FileListSection, {
+  return /*#__PURE__*/_jsxs(FileListWrapper, {
     ...rest,
-    children: [/*#__PURE__*/_jsxs(FileListHeaderWrapper, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        element: "h3",
-        headingStyle: "list-title",
-        margin: "none",
+    "data-embed-type": "file-list",
+    children: [/*#__PURE__*/_jsx(Heading, {
+      fontWeight: "bold",
+      textStyle: "heading.small",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("h3", {
         children: t("files")
-      }), /*#__PURE__*/_jsx("div", {
-        children: headingButtons
-      })]
-    }), /*#__PURE__*/_jsx(FilesList, {
+      })
+    }), /*#__PURE__*/_jsx("ul", {
       children: children
     })]
   });
-};
-export default FileList;
+};