@ndla/ui 56.0.5-alpha.0 → 56.0.6-alpha.0

package/dist/panda.buildinfo.json

@@ -130,9 +130,6 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
-      "maxWidth]___[value:surface.xsmall",
-      "maxWidth]___[value:surface.medium]___[cond:mobileWide",
-      "maxWidth]___[value:1100px]___[cond:tabletWide",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",
@@ -243,7 +240,6 @@
       "width]___[value:100%]___[cond:& iframe",
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
-      "borderColor]___[value:surface.brand.1.strong",
       "borderBottom]___[value:0",
       "borderBottomLeftRadius]___[value:0",
       "borderBottomRightRadius]___[value:0",

package/dist/styles.css

@@ -338,10 +338,6 @@
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -722,10 +718,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bd-c_surface\.brand\.1\.strong {
-    border-color: var(--colors-surface-brand-1-strong);
-}
-
   .bdr-bl_0 {
     border-bottom-left-radius: 0;
 }
@@ -1420,9 +1412,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:max-w_surface\.medium {
-      max-width: var(--sizes-surface-medium);
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1521,9 +1510,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;

package/es/Article/Article.js

@@ -6,13 +6,29 @@
  *
  */
 
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
+import { cx } from "@ndla/styled-system/css";
 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 ArticleWrapper = styled("article", {
+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
+  });
+});
+const StyledArticleWrapper = styled("article", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -41,7 +57,12 @@ export const ArticleWrapper = styled("article", {
     }
   }
 });
-const ArticleTitleWrapper = styled("hgroup", {
+export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+export const ArticleHGroup = styled("hgroup", {
   base: {
     display: "flex",
     width: "100%",
@@ -53,7 +74,7 @@ const ArticleTitleWrapper = styled("hgroup", {
     }
   }
 });
-const ArticleFavoritesButtonWrapper = styled("div", {
+export const ArticleActionWrapper = styled("div", {
   base: {
     position: "absolute",
     right: "8%",
@@ -83,7 +104,40 @@ export const ArticleFooter = styled("footer", {
     width: "100%"
   }
 });
-export const Article = _ref => {
+export const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    competenceGoals
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(ArticleHeader, {
+    children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
+      children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
+        contentType: contentType
+      }), !!heartButton && /*#__PURE__*/_jsx(ArticleActionWrapper, {
+        children: heartButton
+      }), /*#__PURE__*/_jsx(Heading, {
+        textStyle: "heading.large",
+        id: id,
+        lang: lang,
+        children: title
+      })]
+    }), !!introduction && /*#__PURE__*/_jsx(Text, {
+      lang: lang,
+      textStyle: "body.xlarge",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("div", {
+        children: introduction
+      })
+    }), competenceGoals]
+  });
+};
+export const Article = _ref3 => {
   let {
     article,
     contentType,
@@ -93,7 +147,7 @@ export const Article = _ref => {
     id,
     heartButton,
     lang
-  } = _ref;
+  } = _ref3;
   const {
     title,
     introduction,
@@ -104,29 +158,14 @@ export const Article = _ref => {
   } = article;
   const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
   return /*#__PURE__*/_jsxs(ArticleWrapper, {
-    "data-ndla-article": "",
-    children: [/*#__PURE__*/_jsxs(ArticleHeader, {
-      children: [/*#__PURE__*/_jsxs(ArticleTitleWrapper, {
-        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-          contentType: contentType
-        }), !!heartButton && /*#__PURE__*/_jsx(ArticleFavoritesButtonWrapper, {
-          children: heartButton
-        }), /*#__PURE__*/_jsx(Heading, {
-          textStyle: "heading.large",
-          id: id,
-          tabIndex: -1,
-          lang: lang,
-          children: title
-        })]
-      }), !!introduction && /*#__PURE__*/_jsx(Text, {
-        lang: lang,
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("div", {
-          children: introduction
-        })
-      }), competenceGoals]
+    children: [/*#__PURE__*/_jsx(ArticleTitle, {
+      id: id,
+      contentType: contentType,
+      heartButton: heartButton,
+      title: title,
+      introduction: introduction,
+      competenceGoals: competenceGoals,
+      lang: lang
     }), /*#__PURE__*/_jsx(ArticleContent, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

package/es/Article/index.js

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

package/es/CampaignBlock/CampaignBlock.js

@@ -23,14 +23,8 @@ const Container = styled("div", {
     borderRadius: "xsmall",
     boxShadow: "full",
     marginBlockEnd: "4xsmall",
-    maxWidth: "surface.xsmall",
     overflow: "hidden",
-    mobileWide: {
-      maxWidth: "surface.medium"
-    },
     tabletWide: {
-      // TODO: This is probably not the correct max-width. And it should be a token
-      maxWidth: "1100px",
       flexDirection: "row"
     }
   }

package/es/Concept/Concept.js

@@ -29,7 +29,7 @@ const ContentWrapper = styled("div", {
   }
 });
 
-// TODO: Figure out if we need to support tags, subjects and headerButtons.
+// TODO: Figure out if we need to support headerButtons.
 
 export const Concept = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/es/Embed/ConceptEmbed.js

@@ -69,10 +69,6 @@ export const ConceptEmbed = _ref => {
     children: parsedContent
   });
 };
-// TODO: Consider if we should make this act like the old concept popover.
-// Should it take up the entire screen height on mobile? I don't think we need to.
-// Should it always stay directly underneath the trigger?
-
 export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     linkText,

package/es/Embed/ImageEmbed.js

@@ -93,8 +93,7 @@ const ImageWrapper = styled("div", {
     border: {
       true: {
         border: "1px solid",
-        // TODO: Not sure if we want this color.
-        borderColor: "surface.brand.1.strong",
+        borderColor: "stroke.subtle",
         borderBottom: "0",
         borderRadius: "xsmall",
         borderBottomLeftRadius: "0",
@@ -127,8 +126,6 @@ const StyledFigure = styled(Figure, {
     }
   }
 });
-
-// TODO: Ask about BylineButton styling. Not included in design
 const BylineButton = styled("button", {
   base: {
     cursor: "pointer",

package/es/LinkBlock/LinkBlock.js

@@ -32,8 +32,8 @@ const StyledSafeLink = styled(SafeLink, {
     background: "surface.default",
     padding: "medium",
     border: "1px solid",
-    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
-    borderColor: "stroke.default",
+    borderColor: "stroke.subtle",
+    borderRadius: "xsmall",
     "& h3": {
       textDecoration: "underline"
     },

package/es/index.js

@@ -11,7 +11,7 @@
 
 export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
-export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent } from "./Article";
+export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";

package/es/styles.css

@@ -338,10 +338,6 @@
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -722,10 +718,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bd-c_surface\.brand\.1\.strong {
-    border-color: var(--colors-surface-brand-1-strong);
-}
-
   .bdr-bl_0 {
     border-bottom-left-radius: 0;
 }
@@ -1420,9 +1412,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:max-w_surface\.medium {
-      max-width: var(--sizes-surface-medium);
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1521,9 +1510,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;

package/es/utils/relativeUrl.js

@@ -23,13 +23,15 @@ export const getPossiblyRelativeUrl = (url, path) => {
   // If the host is the same, return the relative path
   if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
     // Replace the language part of the url with the language part of the path
+    // Keep the search params if they exist
+    const search = urlObj.search;
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
     if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
-      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
+      return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "")}${search}`;
     }
-    return urlObj.pathname;
+    return `${urlObj.pathname}${search}`;
   }
   return url;
 };

package/lib/Article/Article.d.ts

@@ -8,10 +8,29 @@
 import { ReactNode } from "react";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
-export declare const ArticleWrapper: import("@ndla/styled-system/types").StyledComponent<"article", {}>;
+export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
+export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<"hgroup", {}>;
+export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
 export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<"header", {}>;
 export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<"footer", {}>;
-type Props = {
+interface ArticleTitleProps {
+    heartButton?: ReactNode;
+    contentType?: ContentType;
+    competenceGoals?: ReactNode;
+    id: string;
+    lang?: string;
+    title?: ReactNode;
+    introduction?: ReactNode;
+}
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
     licenseBox?: ReactNode;
@@ -20,6 +39,6 @@ type Props = {
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
-};
+}
 export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleWrapper = exports.ArticleHeader = exports.ArticleFooter = exports.Article = void 0;
+exports.ArticleWrapper = exports.ArticleTitle = exports.ArticleHeader = exports.ArticleHGroup = exports.ArticleFooter = exports.ArticleContent = exports.ArticleActionWrapper = exports.Article = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
+var _css = require("@ndla/styled-system/css");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
-var _ArticleContent = require("./ArticleContent");
 var _ = require("..");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,7 +21,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const ArticleWrapper = exports.ArticleWrapper = (0, _jsx2.styled)("article", {
+const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
+  baseComponent: true
+});
+const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleContent, {
+    className: (0, _css.cx)("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});
+const StyledArticleWrapper = (0, _jsx2.styled)("article", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -48,7 +64,12 @@ const ArticleWrapper = exports.ArticleWrapper = (0, _jsx2.styled)("article", {
     }
   }
 });
-const ArticleTitleWrapper = (0, _jsx2.styled)("hgroup", {
+const ArticleWrapper = exports.ArticleWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)("hgroup", {
   base: {
     display: "flex",
     width: "100%",
@@ -60,7 +81,7 @@ const ArticleTitleWrapper = (0, _jsx2.styled)("hgroup", {
     }
   }
 });
-const ArticleFavoritesButtonWrapper = (0, _jsx2.styled)("div", {
+const ArticleActionWrapper = exports.ArticleActionWrapper = (0, _jsx2.styled)("div", {
   base: {
     position: "absolute",
     right: "8%",
@@ -90,7 +111,41 @@ const ArticleFooter = exports.ArticleFooter = (0, _jsx2.styled)("footer", {
     width: "100%"
   }
 });
-const Article = _ref => {
+const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    competenceGoals
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
+      children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
+        contentType: contentType
+      }), !!heartButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleActionWrapper, {
+        children: heartButton
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
+        textStyle: "heading.large",
+        id: id,
+        lang: lang,
+        children: title
+      })]
+    }), !!introduction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+      lang: lang,
+      textStyle: "body.xlarge",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: introduction
+      })
+    }), competenceGoals]
+  });
+};
+exports.ArticleTitle = ArticleTitle;
+const Article = _ref3 => {
   let {
     article,
     contentType,
@@ -100,7 +155,7 @@ const Article = _ref => {
     id,
     heartButton,
     lang
-  } = _ref;
+  } = _ref3;
   const {
     title,
     introduction,
@@ -111,30 +166,15 @@ const Article = _ref => {
   } = article;
   const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleWrapper, {
-    "data-ndla-article": "",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleTitleWrapper, {
-        children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-          contentType: contentType
-        }), !!heartButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleFavoritesButtonWrapper, {
-          children: heartButton
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-          textStyle: "heading.large",
-          id: id,
-          tabIndex: -1,
-          lang: lang,
-          children: title
-        })]
-      }), !!introduction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        lang: lang,
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: introduction
-        })
-      }), competenceGoals]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleContent.ArticleContent, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleTitle, {
+      id: id,
+      contentType: contentType,
+      heartButton: heartButton,
+      title: title,
+      introduction: introduction,
+      competenceGoals: competenceGoals,
+      lang: lang
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleByline.default, {

package/lib/Article/index.d.ts

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

package/lib/Article/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Article", {
     return _Article.Article;
   }
 });
+Object.defineProperty(exports, "ArticleActionWrapper", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleActionWrapper;
+  }
+});
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
   get: function () {
@@ -18,7 +24,7 @@ Object.defineProperty(exports, "ArticleByline", {
 Object.defineProperty(exports, "ArticleContent", {
   enumerable: true,
   get: function () {
-    return _ArticleContent.ArticleContent;
+    return _Article.ArticleContent;
   }
 });
 Object.defineProperty(exports, "ArticleFootNotes", {
@@ -33,6 +39,12 @@ Object.defineProperty(exports, "ArticleFooter", {
     return _Article.ArticleFooter;
   }
 });
+Object.defineProperty(exports, "ArticleHGroup", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleHGroup;
+  }
+});
 Object.defineProperty(exports, "ArticleHeader", {
   enumerable: true,
   get: function () {
@@ -45,6 +57,12 @@ Object.defineProperty(exports, "ArticleParagraph", {
     return _ArticleParagraph.ArticleParagraph;
   }
 });
+Object.defineProperty(exports, "ArticleTitle", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleTitle;
+  }
+});
 Object.defineProperty(exports, "ArticleWrapper", {
   enumerable: true,
   get: function () {
@@ -54,6 +72,5 @@ Object.defineProperty(exports, "ArticleWrapper", {
 var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
 var _ArticleFootNotes = _interopRequireDefault(require("./ArticleFootNotes"));
 var _Article = require("./Article");
-var _ArticleContent = require("./ArticleContent");
 var _ArticleParagraph = require("./ArticleParagraph");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/CampaignBlock/CampaignBlock.js

@@ -30,14 +30,8 @@ const Container = (0, _jsx2.styled)("div", {
     borderRadius: "xsmall",
     boxShadow: "full",
     marginBlockEnd: "4xsmall",
-    maxWidth: "surface.xsmall",
     overflow: "hidden",
-    mobileWide: {
-      maxWidth: "surface.medium"
-    },
     tabletWide: {
-      // TODO: This is probably not the correct max-width. And it should be a token
-      maxWidth: "1100px",
       flexDirection: "row"
     }
   }

package/lib/Concept/Concept.js

@@ -35,7 +35,7 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
   }
 });
 
-// TODO: Figure out if we need to support tags, subjects and headerButtons.
+// TODO: Figure out if we need to support headerButtons.
 
 const Concept = exports.Concept = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

package/lib/Embed/ConceptEmbed.js

@@ -77,10 +77,6 @@ const ConceptEmbed = _ref => {
   });
 };
 exports.ConceptEmbed = ConceptEmbed;
-// TODO: Consider if we should make this act like the old concept popover.
-// Should it take up the entire screen height on mobile? I don't think we need to.
-// Should it always stay directly underneath the trigger?
-
 const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     linkText,

package/lib/Embed/ImageEmbed.js

@@ -103,8 +103,7 @@ const ImageWrapper = (0, _jsx2.styled)("div", {
     border: {
       true: {
         border: "1px solid",
-        // TODO: Not sure if we want this color.
-        borderColor: "surface.brand.1.strong",
+        borderColor: "stroke.subtle",
         borderBottom: "0",
         borderRadius: "xsmall",
         borderBottomLeftRadius: "0",
@@ -137,8 +136,6 @@ const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
     }
   }
 });
-
-// TODO: Ask about BylineButton styling. Not included in design
 const BylineButton = (0, _jsx2.styled)("button", {
   base: {
     cursor: "pointer",

package/lib/LinkBlock/LinkBlock.js

@@ -39,8 +39,8 @@ const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
     background: "surface.default",
     padding: "medium",
     border: "1px solid",
-    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
-    borderColor: "stroke.default",
+    borderColor: "stroke.subtle",
+    borderRadius: "xsmall",
     "& h3": {
       textDecoration: "underline"
     },

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
-export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, } from "./Article";
+export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";

package/lib/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Article", {
     return _Article.Article;
   }
 });
+Object.defineProperty(exports, "ArticleActionWrapper", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleActionWrapper;
+  }
+});
 Object.defineProperty(exports, "ArticleByline", {
   enumerable: true,
   get: function () {
@@ -33,6 +39,12 @@ Object.defineProperty(exports, "ArticleFooter", {
     return _Article.ArticleFooter;
   }
 });
+Object.defineProperty(exports, "ArticleHGroup", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleHGroup;
+  }
+});
 Object.defineProperty(exports, "ArticleHeader", {
   enumerable: true,
   get: function () {
@@ -45,6 +57,12 @@ Object.defineProperty(exports, "ArticleParagraph", {
     return _Article.ArticleParagraph;
   }
 });
+Object.defineProperty(exports, "ArticleTitle", {
+  enumerable: true,
+  get: function () {
+    return _Article.ArticleTitle;
+  }
+});
 Object.defineProperty(exports, "ArticleWrapper", {
   enumerable: true,
   get: function () {

package/lib/styles.css

@@ -338,10 +338,6 @@
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -722,10 +718,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bd-c_surface\.brand\.1\.strong {
-    border-color: var(--colors-surface-brand-1-strong);
-}
-
   .bdr-bl_0 {
     border-bottom-left-radius: 0;
 }
@@ -1420,9 +1412,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:max-w_surface\.medium {
-      max-width: var(--sizes-surface-medium);
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1521,9 +1510,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;

package/lib/types.d.ts

@@ -36,7 +36,7 @@ export interface Copyright {
     rightsholders: Array<Contributor>;
     processors: Array<Contributor>;
     origin?: string;
-    processed: boolean;
+    processed?: boolean;
 }
 export interface FootNote {
     ref: number;

package/lib/utils/relativeUrl.js

@@ -29,13 +29,15 @@ const getPossiblyRelativeUrl = (url, path) => {
   // If the host is the same, return the relative path
   if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
     // Replace the language part of the url with the language part of the path
+    // Keep the search params if they exist
+    const search = urlObj.search;
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
     if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
-      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
+      return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "")}${search}`;
     }
-    return urlObj.pathname;
+    return `${urlObj.pathname}${search}`;
   }
   return url;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.5-alpha.0",
+  "version": "56.0.6-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,13 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.5-alpha.0",
+    "@ndla/button": "^15.0.6-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/hooks": "^2.1.8",
-    "@ndla/icons": "^8.0.5-alpha.0",
+    "@ndla/icons": "^8.0.6-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
-    "@ndla/primitives": "^1.0.5-alpha.0",
-    "@ndla/safelink": "^7.0.5-alpha.0",
+    "@ndla/primitives": "^1.0.6-alpha.0",
+    "@ndla/safelink": "^7.0.6-alpha.0",
     "@ndla/styled-system": "^0.0.10",
     "@ndla/typography": "^0.4.23",
     "@ndla/util": "^4.1.0",
@@ -60,7 +60,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.15",
+    "@ndla/preset-panda": "^0.0.16",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.0-alpha.0",
     "@pandacss/dev": "^0.44.0",
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d1e87ed1d2fccefbc0ece2130f42d7d71cbe1a9"
+  "gitHead": "7770121967e96fe8d661b0f540e3397d6e2c453f"
 }

package/src/Article/Article.tsx

@@ -6,16 +6,26 @@
  *
  */
 
-import { ReactNode } from "react";
+import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
+import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
+import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import ArticleByline from "./ArticleByline";
-import { ArticleContent } from "./ArticleContent";
 import { ContentTypeBadgeNew } from "..";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
 
-export const ArticleWrapper = styled("article", {
+const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
+
+export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps>(
+  ({ className, ...props }, ref) => (
+    <StyledArticleContent className={cx("ndla-article", className)} {...props} ref={ref} />
+  ),
+);
+
+const StyledArticleWrapper = styled("article", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -45,7 +55,11 @@ export const ArticleWrapper = styled("article", {
   },
 });
 
-const ArticleTitleWrapper = styled("hgroup", {
+export const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<"article"> & JsxStyleProps>(
+  (props, ref) => <StyledArticleWrapper data-ndla-article="" ref={ref} {...props} />,
+);
+
+export const ArticleHGroup = styled("hgroup", {
   base: {
     display: "flex",
     width: "100%",
@@ -58,7 +72,7 @@ const ArticleTitleWrapper = styled("hgroup", {
   },
 });
 
-const ArticleFavoritesButtonWrapper = styled("div", {
+export const ArticleActionWrapper = styled("div", {
   base: {
     position: "absolute",
     right: "8%",
@@ -91,7 +105,45 @@ export const ArticleFooter = styled("footer", {
   },
 });
 
-type Props = {
+interface ArticleTitleProps {
+  heartButton?: ReactNode;
+  contentType?: ContentType;
+  competenceGoals?: ReactNode;
+  id: string;
+  lang?: string;
+  title?: ReactNode;
+  introduction?: ReactNode;
+}
+
+export const ArticleTitle = ({
+  contentType,
+  heartButton,
+  title,
+  lang,
+  id,
+  introduction,
+  competenceGoals,
+}: ArticleTitleProps) => {
+  return (
+    <ArticleHeader>
+      <ArticleHGroup>
+        {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+        {!!heartButton && <ArticleActionWrapper>{heartButton}</ArticleActionWrapper>}
+        <Heading textStyle="heading.large" id={id} lang={lang}>
+          {title}
+        </Heading>
+      </ArticleHGroup>
+      {!!introduction && (
+        <Text lang={lang} textStyle="body.xlarge" asChild consumeCss>
+          <div>{introduction}</div>
+        </Text>
+      )}
+      {competenceGoals}
+    </ArticleHeader>
+  );
+};
+
+interface Props {
   heartButton?: ReactNode;
   article: ArticleType;
   licenseBox?: ReactNode;
@@ -100,7 +152,7 @@ type Props = {
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
-};
+}
 
 export const Article = ({
   article,
@@ -118,22 +170,16 @@ export const Article = ({
     copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
 
   return (
-    <ArticleWrapper data-ndla-article="">
-      <ArticleHeader>
-        <ArticleTitleWrapper>
-          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
-          {!!heartButton && <ArticleFavoritesButtonWrapper>{heartButton}</ArticleFavoritesButtonWrapper>}
-          <Heading textStyle="heading.large" id={id} tabIndex={-1} lang={lang}>
-            {title}
-          </Heading>
-        </ArticleTitleWrapper>
-        {!!introduction && (
-          <Text lang={lang} textStyle="body.xlarge" asChild consumeCss>
-            <div>{introduction}</div>
-          </Text>
-        )}
-        {competenceGoals}
-      </ArticleHeader>
+    <ArticleWrapper>
+      <ArticleTitle
+        id={id}
+        contentType={contentType}
+        heartButton={heartButton}
+        title={title}
+        introduction={introduction}
+        competenceGoals={competenceGoals}
+        lang={lang}
+      />
       <ArticleContent>{content}</ArticleContent>
       <ArticleFooter>
         <ArticleByline

package/src/Article/index.ts

@@ -9,8 +9,16 @@
 import ArticleByline from "./ArticleByline";
 import ArticleFootNotes from "./ArticleFootNotes";
 
-export { Article, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
-export { ArticleContent } from "./ArticleContent";
+export {
+  Article,
+  ArticleWrapper,
+  ArticleHeader,
+  ArticleFooter,
+  ArticleTitle,
+  ArticleActionWrapper,
+  ArticleHGroup,
+  ArticleContent,
+} from "./Article";
 
 export { ArticleByline, ArticleFootNotes };
 export { ArticleParagraph } from "./ArticleParagraph";

package/src/CampaignBlock/CampaignBlock.tsx

@@ -44,14 +44,8 @@ const Container = styled("div", {
     borderRadius: "xsmall",
     boxShadow: "full",
     marginBlockEnd: "4xsmall",
-    maxWidth: "surface.xsmall",
     overflow: "hidden",
-    mobileWide: {
-      maxWidth: "surface.medium",
-    },
     tabletWide: {
-      // TODO: This is probably not the correct max-width. And it should be a token
-      maxWidth: "1100px",
       flexDirection: "row",
     },
   },

package/src/Concept/Concept.tsx

@@ -12,7 +12,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import { ConceptVisualElementMeta } from "@ndla/types-embed";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
-import { EmbedByline, LicenseContainerContent } from "../LicenseByline/EmbedByline";
+import { EmbedByline } from "../LicenseByline/EmbedByline";
 
 export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   copyright?: ConceptCopyright;
@@ -40,7 +40,7 @@ const ContentWrapper = styled("div", {
   },
 });
 
-// TODO: Figure out if we need to support tags, subjects and headerButtons.
+// TODO: Figure out if we need to support headerButtons.
 
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
   ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {

package/src/ContactBlock/ContactBlock.tsx

@@ -171,7 +171,6 @@ export const ContactBlock = ({
     <StyledWrapper data-embed-type="contact-block">
       <ContentWrapper>
         <HeaderWrapper variant={backgroundColor} imageExists={!!image}>
-          {/* TODO: The font in the design specified `Source Sans Pro` and this is the default `Satoshi` */}
           <Text lang={lang} fontWeight="bold" textStyle="heading.small">
             {name}
           </Text>
@@ -191,7 +190,6 @@ export const ContactBlock = ({
             width={300}
             height={300}
           />
-          {/* TODO: The font in the design specified `Source Sans Pro` and this is the default `Satoshi` */}
           <LicenseContainerContent type="image" copyright={image.copyright} />
         </ImageWrapper>
       )}

package/src/Embed/ConceptEmbed.tsx

@@ -8,7 +8,7 @@
 
 import parse from "html-react-parser";
 import { forwardRef, useMemo } from "react";
-import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ConceptMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
@@ -82,10 +82,6 @@ export interface InlineConceptProps extends ConceptProps, BaseProps {
   linkText?: string;
 }
 
-// TODO: Consider if we should make this act like the old concept popover.
-// Should it take up the entire screen height on mobile? I don't think we need to.
-// Should it always stay directly underneath the trigger?
-
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
   ({ linkText, copyright, visualElement, lang, children, title, ...rest }, ref) => (
     <PopoverRoot>

package/src/Embed/ImageEmbed.tsx

@@ -121,8 +121,7 @@ const ImageWrapper = styled("div", {
     border: {
       true: {
         border: "1px solid",
-        // TODO: Not sure if we want this color.
-        borderColor: "surface.brand.1.strong",
+        borderColor: "stroke.subtle",
         borderBottom: "0",
         borderRadius: "xsmall",
         borderBottomLeftRadius: "0",
@@ -157,7 +156,6 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-// TODO: Ask about BylineButton styling. Not included in design
 const BylineButton = styled(
   "button",
   {

package/src/LinkBlock/LinkBlock.tsx

@@ -34,8 +34,8 @@ const StyledSafeLink = styled(SafeLink, {
     background: "surface.default",
     padding: "medium",
     border: "1px solid",
-    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
-    borderColor: "stroke.default",
+    borderColor: "stroke.subtle",
+    borderRadius: "xsmall",
     "& h3": {
       textDecoration: "underline",
     },

package/src/index.ts

@@ -42,6 +42,9 @@ export {
   ArticleFooter,
   ArticleHeader,
   ArticleContent,
+  ArticleHGroup,
+  ArticleActionWrapper,
+  ArticleTitle,
 } from "./Article";
 
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/src/types.ts

@@ -43,7 +43,7 @@ export interface Copyright {
   rightsholders: Array<Contributor>;
   processors: Array<Contributor>;
   origin?: string;
-  processed: boolean;
+  processed?: boolean;
 }
 
 export interface FootNote {

package/src/utils/__tests__/relativeUrl-test.tsx

@@ -75,4 +75,16 @@ describe("getPossibleRelativeUrl", () => {
 
     expect(getPossiblyRelativeUrl(url, pathname)).toEqual("mailto:test@ndla.no");
   });
+  it("handles params in url", () => {
+    const url = "https://ndla.no/search?grepCodes=KM123";
+    const pathname = "https://ndla.no/article/666";
+
+    expect(getPossiblyRelativeUrl(url, pathname)).toEqual("/search?grepCodes=KM123");
+  });
+  it("handles params in url including language tag", () => {
+    const url = "https://ndla.no/nb/search?grepCodes=KM123";
+    const pathname = "https://ndla.no/en/article/666";
+
+    expect(getPossiblyRelativeUrl(url, pathname)).toEqual("/en/search?grepCodes=KM123");
+  });
 });

package/src/utils/relativeUrl.ts

@@ -26,14 +26,16 @@ export const getPossiblyRelativeUrl = (url: string, path?: string) => {
   // If the host is the same, return the relative path
   if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
     // Replace the language part of the url with the language part of the path
+    // Keep the search params if they exist
+    const search = urlObj.search;
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
     if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
-      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
+      return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "")}${search}`;
     }
 
-    return urlObj.pathname;
+    return `${urlObj.pathname}${search}`;
   }
   return url;
 };

package/es/Article/ArticleContent.js

@@ -1,27 +0,0 @@
-/**
- * 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/lib/Article/ArticleContent.d.ts

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-/// <reference types="react" />
-export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
-    consumeCss?: boolean | undefined;
-} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;

package/lib/Article/ArticleContent.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ArticleContent = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _css = require("@ndla/styled-system/css");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
-  baseComponent: true
-});
-const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleContent, {
-    className: (0, _css.cx)("ndla-article", className),
-    ...props,
-    ref: ref
-  });
-});

package/src/Article/ArticleContent.tsx

@@ -1,21 +0,0 @@
-/**
- * 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, type HTMLArkProps } from "@ark-ui/react";
-import { cx } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { JsxStyleProps } from "@ndla/styled-system/types";
-
-const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
-
-export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps>(
-  ({ className, ...props }, ref) => (
-    <StyledArticleContent className={cx("ndla-article", className)} {...props} ref={ref} />
-  ),
-);