@ndla/ui 56.0.3-alpha.0 → 56.0.5-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",
@@ -119,12 +119,11 @@
       "width]___[value:fit-content",
       "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
+      "gap]___[value:xxsmall",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
-      "gap]___[value:xxsmall]___[cond:mobileDown",
       "color]___[value:inherit",
-      "gap]___[value:4xsmall",
       "alignItems]___[value:flex-end",
       "display]___[value:block]___[cond:tabletDown",
       "textDecoration]___[value:underline",
@@ -134,7 +133,6 @@
       "maxWidth]___[value:surface.xsmall",
       "maxWidth]___[value:surface.medium]___[cond:mobileWide",
       "maxWidth]___[value:1100px]___[cond:tabletWide",
-      "gap]___[value:xxsmall",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",
@@ -331,14 +329,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 +418,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;
 }
@@ -302,12 +326,12 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
@@ -318,10 +342,6 @@
     max-width: var(--sizes-surface-xsmall);
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -491,6 +511,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 +547,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 +599,6 @@
     color: var(--colors-icon-strong);
 }
 
-  .d_grid {
-    display: grid;
-}
-
   .mbs_xsmall {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -760,10 +808,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 +1139,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 +1167,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 +1271,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 +1331,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 +1489,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 +1548,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 +1614,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;
@@ -1597,9 +1719,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

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/Breadcrumb/Breadcrumb.js

@@ -16,12 +16,11 @@ const StyledList = styled("ol", {
     flexWrap: "wrap",
     alignItems: "center",
     listStyle: "none",
-    gap: "xsmall",
+    gap: "xxsmall",
     mobileDown: {
       alignItems: "flex-start",
       justifyContent: "center",
-      flexDirection: "column",
-      gap: "xxsmall"
+      flexDirection: "column"
     }
   }
 });

package/es/Breadcrumb/BreadcrumbItem.js

@@ -15,7 +15,7 @@ const StyledListItem = styled("li", {
   base: {
     display: "flex",
     color: "inherit",
-    gap: "4xsmall",
+    gap: "3xsmall",
     alignItems: "flex-end",
     tabletDown: {
       display: "block"

package/es/Breadcrumb/HomeBreadcrumb.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -49,7 +49,7 @@ const HomeBreadcrumb = _ref => {
       return /*#__PURE__*/_jsx(IconSafeLink, {
         "aria-label": item.name,
         to: item.to,
-        children: /*#__PURE__*/_jsx(HomeFill, {
+        children: /*#__PURE__*/_jsx(HomeLine, {
           title: item.name
         })
       });

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;
+};