@ndla/ui 56.0.9-alpha.0 → 56.0.10-alpha.0

package/dist/panda.buildinfo.json

@@ -224,6 +224,13 @@
       "border]___[value:2px solid",
       "borderColor]___[value:var(--icon-color)",
       "backgroundColor]___[value:var(--background-color)",
+      "opacity]___[value:1]___[cond:_hover<___>& [data-copy-button]",
+      "cursor]___[value:pointer]___[cond:_hover<___>& [data-copy-button]",
+      "left]___[value:-xxlarge",
+      "top]___[value:-4xsmall",
+      "opacity]___[value:0",
+      "cursor]___[value:pointer",
+      "opacity]___[value:1]___[cond:&:focus, &:focus-visible, &:active",
       "marginInlineStart]___[value:xsmall",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
@@ -245,7 +252,6 @@
       "borderBottom]___[value:0",
       "borderBottomLeftRadius]___[value:0",
       "borderBottomRightRadius]___[value:0",
-      "cursor]___[value:pointer",
       "background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
       "transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
       "transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",

package/dist/styles.css

@@ -426,6 +426,14 @@
     border: 2px solid;
 }
 
+  .op_0 {
+    opacity: 0;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
   .ms_xsmall {
     margin-inline-start: var(--spacing-xsmall);
 }
@@ -446,10 +454,6 @@
     border-bottom: 0;
 }
 
-  .cursor_pointer {
-    cursor: pointer;
-}
-
   .bg_background\.default\/20 {
     --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
     background: var(--mix-background, var(--colors-background-default));
@@ -710,6 +714,14 @@
     background-color: var(--background-color);
 }
 
+  .left_-xxlarge {
+    left: calc(var(--spacing-xxlarge) * -1);
+}
+
+  .top_-4xsmall {
+    top: calc(var(--spacing-4xsmall) * -1);
+}
+
   .fw_bold {
     font-weight: var(--font-weights-bold);
 }
@@ -1294,6 +1306,10 @@
     text-decoration: none;
 }
 
+  .\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus-visible,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:active {
+    opacity: 1;
+}
+
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -1391,6 +1407,14 @@
     outline-style: solid;
 }
 
+  .hover\:\[\&_\[data-copy-button\]\]\:op_1:is(:hover, [data-hover]) [data-copy-button] {
+    opacity: 1;
+}
+
+  .hover\:\[\&_\[data-copy-button\]\]\:cursor_pointer:is(:hover, [data-hover]) [data-copy-button] {
+    cursor: pointer;
+}
+
   .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
     background: var(--colors-background-default);
 }

package/es/CampaignBlock/CampaignBlock.js

@@ -97,38 +97,33 @@ const CampaignBlock = _ref2 => {
     alt: image.alt
   });
   const HeaderComponent = url?.url ? LinkText : Text;
-  return (
-    /*#__PURE__*/
-    // TODO: Remove data-type
-    _jsxs(Container, {
-      className: className,
-      "data-type": "campaign-block",
-      "data-embed-type": "campaign-block",
-      children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
-        children: [/*#__PURE__*/_jsx(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/_jsx(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/_jsx(InternalHeading, {
-              children: parse(title)
-            })
+  return /*#__PURE__*/_jsxs(Container, {
+    className: className,
+    "data-embed-type": "campaign-block",
+    children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
+      children: [/*#__PURE__*/_jsx(MaybeLinkText, {
+        url: url?.url,
+        path: path,
+        children: /*#__PURE__*/_jsx(HeaderComponent, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/_jsx(InternalHeading, {
+            children: parse(title)
           })
-        }), /*#__PURE__*/_jsx(Text, {
-          textStyle: "body.large",
-          children: parse(description)
-        }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
-          url: url.url,
-          path: path,
-          children: /*#__PURE__*/_jsxs(LinkText, {
-            textStyle: "body.medium",
-            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
-          })
-        })]
-      }), imageSide !== "left" && imageComponent]
-    })
-  );
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        textStyle: "body.large",
+        children: parse(description)
+      }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
+        url: url.url,
+        path: path,
+        children: /*#__PURE__*/_jsxs(LinkText, {
+          textStyle: "body.medium",
+          children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
+        })
+      })]
+    }), imageSide !== "left" && imageComponent]
+  });
 };
 export default CampaignBlock;

package/es/CopyParagraphButton/CopyParagraphButton.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) 2021-present, NDLA.
  *
@@ -10,26 +8,34 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { colors, stackOrder } from "@ndla/core";
 import { LinkMedium } from "@ndla/icons/editor";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { copyTextToClipboard } from "@ndla/util";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ContainerDiv = /*#__PURE__*/_styled("div", {
-  target: "e18czas71",
-  label: "ContainerDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "w6zggb",
-  styles: "position:relative;&:hover{[data-copy-button]{opacity:1;cursor:pointer;}}"
-} : {
-  name: "w6zggb",
-  styles: "position:relative;&:hover{[data-copy-button]{opacity:1;cursor:pointer;}}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWUrQiIsImZpbGUiOiJDb3B5UGFyYWdyYXBoQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIxLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIHN0YWNrT3JkZXIgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGlua01lZGl1bSB9IGZyb20gXCJAbmRsYS9pY29ucy9lZGl0b3JcIjtcbmltcG9ydCB7IGNvcHlUZXh0VG9DbGlwYm9hcmQgfSBmcm9tIFwiQG5kbGEvdXRpbFwiO1xuXG5jb25zdCBDb250YWluZXJEaXYgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICY6aG92ZXIge1xuICAgIFtkYXRhLWNvcHktYnV0dG9uXSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIH1cbiAgfVxuYDtcbmNvbnN0IEljb25CdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IC0zZW07XG4gIHRvcDogMC4xZW07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogMDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLm9mZnNldFNpbmdsZX07XG4gIHRyYW5zaXRpb246IDAuMnM7XG4gIG9wYWNpdHk6IDA7XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5ncmV5fTtcblxuICAmIHN2ZyB7XG4gICAgd2lkdGg6IDMwcHg7XG4gICAgaGVpZ2h0OiAzMHB4O1xuICB9XG5cbiAgJjpmb2N1cyxcbiAgJjpmb2N1cy12aXNpYmxlLFxuICAmOmFjdGl2ZSB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIC8vIFdoYXQgdG8gcmVuZGVyIHdpdGhpbiB0aGUgaDJcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgY29weVRleHQ6IHN0cmluZztcbiAgbGFuZz86IHN0cmluZztcbn1cbmNvbnN0IENvcHlQYXJhZ3JhcGhCdXR0b24gPSAoeyBjaGlsZHJlbiwgY29weVRleHQsIGxhbmcgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IHVzZU1lbW8oKCkgPT4gZW5jb2RlVVJJQ29tcG9uZW50KGNvcHlUZXh0LnJlcGxhY2UoLyAvZywgXCItXCIpKSwgW2NvcHlUZXh0XSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCB7IGxvY2F0aW9uIH0gPSB3aW5kb3c7XG4gICAgY29uc3QgbmV3SGFzaCA9IGAjJHtzYW5pdGl6ZWRUaXRsZX1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6IFwiXCI7XG4gICAgY29uc3QgdXJsVG9Db3B5ID0gYCR7bG9jYXRpb24ucHJvdG9jb2x9Ly8ke2xvY2F0aW9uLmhvc3RuYW1lfSR7cG9ydH0ke2xvY2F0aW9uLnBhdGhuYW1lfSR7bG9jYXRpb24uc2VhcmNofSR7bmV3SGFzaH1gO1xuXG4gICAgY29weVRleHRUb0NsaXBib2FyZCh1cmxUb0NvcHkpO1xuICB9LCBbc2FuaXRpemVkVGl0bGVdKTtcblxuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdChcImFydGljbGUuY29weVBhZ2VMaW5rQ29waWVkXCIpIDogdChcImFydGljbGUuY29weUhlYWRlckxpbmtcIik7XG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lckRpdiBkYXRhLWVtYmVkLXR5cGU9XCJjb3B5LWhlYWRpbmdcIj5cbiAgICAgIDxJY29uQnV0dG9uIGRhdGEtY29weS1idXR0b249XCJcIiBvbkNsaWNrPXtvbkNvcHlDbGlja30gdGl0bGU9e3Rvb2x0aXB9IGFyaWEtbGFiZWw9e2Ake3Rvb2x0aXB9OiAke2NvcHlUZXh0fWB9PlxuICAgICAgICA8TGlua01lZGl1bSAvPlxuICAgICAgPC9JY29uQnV0dG9uPlxuICAgICAgPGgyIGlkPXtzYW5pdGl6ZWRUaXRsZX0gdGFiSW5kZXg9ey0xfSBsYW5nPXtsYW5nfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9oMj5cbiAgICA8L0NvbnRhaW5lckRpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvcHlQYXJhZ3JhcGhCdXR0b247XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const ContainerDiv = styled("div", {
+  base: {
+    position: "relative",
+    _hover: {
+      "& [data-copy-button]": {
+        opacity: "1",
+        cursor: "pointer"
+      }
+    }
+  }
+});
+const StyledIconButton = styled(IconButton, {
+  base: {
+    position: "absolute",
+    left: "-xxlarge",
+    top: "-4xsmall",
+    opacity: "0",
+    cursor: "pointer",
+    "&:focus, &:focus-visible, &:active": {
+      opacity: "1"
+    }
+  }
 });
-const IconButton = /*#__PURE__*/_styled("button", {
-  target: "e18czas70",
-  label: "IconButton"
-})("position:absolute;left:-3em;top:0.1em;background:none;border:0;z-index:", stackOrder.offsetSingle, ";transition:0.2s;opacity:0;color:", colors.brand.grey, ";& svg{width:30px;height:30px;}&:focus,&:focus-visible,&:active{cursor:pointer;opacity:1;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCZ0MiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IExpbmtNZWRpdW0gfSBmcm9tIFwiQG5kbGEvaWNvbnMvZWRpdG9yXCI7XG5pbXBvcnQgeyBjb3B5VGV4dFRvQ2xpcGJvYXJkIH0gZnJvbSBcIkBuZGxhL3V0aWxcIjtcblxuY29uc3QgQ29udGFpbmVyRGl2ID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAmOmhvdmVyIHtcbiAgICBbZGF0YS1jb3B5LWJ1dHRvbl0ge1xuICAgICAgb3BhY2l0eTogMTtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG4gIH1cbmA7XG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsZWZ0OiAtM2VtO1xuICB0b3A6IDAuMWVtO1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBib3JkZXI6IDA7XG4gIHotaW5kZXg6ICR7c3RhY2tPcmRlci5vZmZzZXRTaW5nbGV9O1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuICBjb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleX07XG5cbiAgJiBzdmcge1xuICAgIHdpZHRoOiAzMHB4O1xuICAgIGhlaWdodDogMzBweDtcbiAgfVxuXG4gICY6Zm9jdXMsXG4gICY6Zm9jdXMtdmlzaWJsZSxcbiAgJjphY3RpdmUge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICAvLyBXaGF0IHRvIHJlbmRlciB3aXRoaW4gdGhlIGgyXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNvcHlUZXh0OiBzdHJpbmc7XG4gIGxhbmc/OiBzdHJpbmc7XG59XG5jb25zdCBDb3B5UGFyYWdyYXBoQnV0dG9uID0gKHsgY2hpbGRyZW4sIGNvcHlUZXh0LCBsYW5nIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IFtoYXNDb3BpZWQsIHNldEhhc0NvcGllZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3Qgc2FuaXRpemVkVGl0bGUgPSB1c2VNZW1vKCgpID0+IGVuY29kZVVSSUNvbXBvbmVudChjb3B5VGV4dC5yZXBsYWNlKC8gL2csIFwiLVwiKSksIFtjb3B5VGV4dF0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGhhc0NvcGllZCkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiBzZXRIYXNDb3BpZWQoZmFsc2UpLCAzMDAwKTtcbiAgICB9XG4gIH0sIFtoYXNDb3BpZWRdKTtcblxuICBjb25zdCBvbkNvcHlDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRIYXNDb3BpZWQodHJ1ZSk7XG4gICAgY29uc3QgeyBsb2NhdGlvbiB9ID0gd2luZG93O1xuICAgIGNvbnN0IG5ld0hhc2ggPSBgIyR7c2FuaXRpemVkVGl0bGV9YDtcbiAgICBjb25zdCBwb3J0ID0gbG9jYXRpb24ucG9ydCA/IGA6JHtsb2NhdGlvbi5wb3J0fWAgOiBcIlwiO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfSwgW3Nhbml0aXplZFRpdGxlXSk7XG5cbiAgY29uc3QgdG9vbHRpcCA9IGhhc0NvcGllZCA/IHQoXCJhcnRpY2xlLmNvcHlQYWdlTGlua0NvcGllZFwiKSA6IHQoXCJhcnRpY2xlLmNvcHlIZWFkZXJMaW5rXCIpO1xuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1lbWJlZC10eXBlPVwiY29weS1oZWFkaW5nXCI+XG4gICAgICA8SWNvbkJ1dHRvbiBkYXRhLWNvcHktYnV0dG9uPVwiXCIgb25DbGljaz17b25Db3B5Q2xpY2t9IHRpdGxlPXt0b29sdGlwfSBhcmlhLWxhYmVsPXtgJHt0b29sdGlwfTogJHtjb3B5VGV4dH1gfT5cbiAgICAgICAgPExpbmtNZWRpdW0gLz5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXstMX0gbGFuZz17bGFuZ30+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvaDI+XG4gICAgPC9Db250YWluZXJEaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */"));
 const CopyParagraphButton = _ref => {
   let {
     children,
@@ -59,7 +65,8 @@ const CopyParagraphButton = _ref => {
   const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
   return /*#__PURE__*/_jsxs(ContainerDiv, {
     "data-embed-type": "copy-heading",
-    children: [/*#__PURE__*/_jsx(IconButton, {
+    children: [/*#__PURE__*/_jsx(StyledIconButton, {
+      variant: "clear",
       "data-copy-button": "",
       onClick: onCopyClick,
       title: tooltip,

package/es/Embed/RelatedContentEmbed.js

@@ -6,7 +6,6 @@
  *
  */
 
-import punycode from "punycode/";
 import { useTranslation } from "react-i18next";
 import { contentTypeMapping } from "../model/ContentType";
 import { RelatedArticle } from "../RelatedArticleList/RelatedArticleList";
@@ -47,9 +46,7 @@ const RelatedContentEmbed = _ref => {
       to: embedData.url,
       target: "_blank",
       type: "external",
-      linkInfo: `${t("related.linkInfo")} ${
-      // Get domain name only from url
-      punycode.toUnicode(embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url)}`
+      linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
     });
   }
   return /*#__PURE__*/_jsx(_Fragment, {});

package/es/LinkBlock/LinkBlock.js

@@ -6,8 +6,6 @@
  *
  */
 
-import { format } from "date-fns";
-import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
 import { ArrowRightLine } from "@ndla/icons/common";
@@ -76,10 +74,11 @@ const LinkBlock = _ref => {
   const href = getPossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
-    const locale = articleLanguage === "nb" ? nb : articleLanguage === "nn" ? nn : enGB;
-    return format(new Date(date), "dd. LLLL yyyy", {
-      locale
-    });
+    return new Intl.DateTimeFormat(articleLanguage, {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    }).format(new Date(date));
   }, [date, articleLanguage]);
   return /*#__PURE__*/_jsxs(StyledSafeLink, {
     to: href,

package/es/ResourceBox/ResourceBox.js

@@ -6,11 +6,11 @@
  *
  */
 
+import { breakpoints } from "@ndla/core";
 import { ShareBoxLine } from "@ndla/icons/common";
 import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { token } from "@ndla/styled-system/tokens";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Container = styled("div", {
   base: {
@@ -73,7 +73,7 @@ export const ResourceBox = _ref => {
     children: [/*#__PURE__*/_jsx(StyledImage, {
       src: image.src,
       alt: image.alt,
-      sizes: `(min-width: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`
+      sizes: `(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`
     }), /*#__PURE__*/_jsxs(ContentWrapper, {
       children: [/*#__PURE__*/_jsx(Heading, {
         textStyle: "label.large",

package/es/index.js

@@ -33,7 +33,6 @@ export { default as LayoutItem, OneColumn, PageContainer } from "./Layout";
 export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBadge, AssessmentResourcesBadge, LearningPathBadge, SubjectBadge, SourceMaterialBadge, ConceptBadge } from "./ContentTypeBadge";
 export { ContentTypeBadge as ContentTypeBadgeNew, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadgeNew";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
-export { default as ContentPlaceholder } from "./ContentPlaceholder";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput } from "./TagSelector/TagSelector";
 export { TreeStructure } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
@@ -42,7 +41,6 @@ export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
-export { default as FrontpageArticle, FRONTPAGE_ARTICLE_MAX_WIDTH, WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH } from "./FrontpageArticle";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";

package/es/locale/messages-en.js

@@ -1095,7 +1095,11 @@ const messages = {
         markAll: "Mark all as read",
         subscribe: "You will now be notified of new replies to this topic",
         unsubscribe: "You have turned off notification of new replies to this topic",
-        commentedOn: "commented on the post <i>{{title}}</i>"
+        commentedOn: "commented on the post <i>{{title}}</i>",
+        button: {
+          show: "View notifications",
+          showNew: "View {{count}} new notifications"
+        }
       },
       topicsBy: "Topics by",
       admin: {

package/es/locale/messages-nb.js

@@ -1095,7 +1095,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

package/es/locale/messages-nn.js

@@ -1095,7 +1095,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får no varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varsler",
+          showNew: "Vis {{count}} nye varsler"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

package/es/locale/messages-se.js

@@ -1095,7 +1095,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

package/es/locale/messages-sma.js

@@ -1095,7 +1095,11 @@ const messages = {
         markAll: "Merk alle som lest",
         subscribe: "Du får nå varsling om nye svar på dette innlegget",
         unsubscribe: "Du har skrudd av varsling om nye svar på dette innlegget",
-        commentedOn: "svarte på innlegget <i>{{title}}</i>"
+        commentedOn: "svarte på innlegget <i>{{title}}</i>",
+        button: {
+          show: "Vis varslinger",
+          showNew: "Vis {{count}} nye varslinger"
+        }
       },
       topicsBy: "Innlegg av",
       admin: {

package/es/styles.css

@@ -426,6 +426,14 @@
     border: 2px solid;
 }
 
+  .op_0 {
+    opacity: 0;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
   .ms_xsmall {
     margin-inline-start: var(--spacing-xsmall);
 }
@@ -446,10 +454,6 @@
     border-bottom: 0;
 }
 
-  .cursor_pointer {
-    cursor: pointer;
-}
-
   .bg_background\.default\/20 {
     --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
     background: var(--mix-background, var(--colors-background-default));
@@ -710,6 +714,14 @@
     background-color: var(--background-color);
 }
 
+  .left_-xxlarge {
+    left: calc(var(--spacing-xxlarge) * -1);
+}
+
+  .top_-4xsmall {
+    top: calc(var(--spacing-4xsmall) * -1);
+}
+
   .fw_bold {
     font-weight: var(--font-weights-bold);
 }
@@ -1294,6 +1306,10 @@
     text-decoration: none;
 }
 
+  .\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:focus-visible,.\[\&\:focus\,_\&\:focus-visible\,_\&\:active\]\:op_1:active {
+    opacity: 1;
+}
+
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -1391,6 +1407,14 @@
     outline-style: solid;
 }
 
+  .hover\:\[\&_\[data-copy-button\]\]\:op_1:is(:hover, [data-hover]) [data-copy-button] {
+    opacity: 1;
+}
+
+  .hover\:\[\&_\[data-copy-button\]\]\:cursor_pointer:is(:hover, [data-hover]) [data-copy-button] {
+    cursor: pointer;
+}
+
   .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
     background: var(--colors-background-default);
 }

package/lib/CampaignBlock/CampaignBlock.js

@@ -104,38 +104,33 @@ const CampaignBlock = _ref2 => {
     alt: image.alt
   });
   const HeaderComponent = url?.url ? LinkText : _primitives.Text;
-  return (
-    /*#__PURE__*/
-    // TODO: Remove data-type
-    (0, _jsxRuntime.jsxs)(Container, {
-      className: className,
-      "data-type": "campaign-block",
-      "data-embed-type": "campaign-block",
-      children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-          url: url?.url,
-          path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "heading.small",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
-              children: (0, _htmlReactParser.default)(title)
-            })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    className: className,
+    "data-embed-type": "campaign-block",
+    children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+        url: url?.url,
+        path: path,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
+          asChild: true,
+          consumeCss: true,
+          textStyle: "heading.small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
+            children: (0, _htmlReactParser.default)(title)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "body.large",
-          children: (0, _htmlReactParser.default)(description)
-        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-          url: url.url,
-          path: path,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
-            textStyle: "body.medium",
-            children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
-          })
-        })]
-      }), imageSide !== "left" && imageComponent]
-    })
-  );
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+        textStyle: "body.large",
+        children: (0, _htmlReactParser.default)(description)
+      }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+        url: url.url,
+        path: path,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
+          textStyle: "body.medium",
+          children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
+        })
+      })]
+    }), imageSide !== "left" && imageComponent]
+  });
 };
 var _default = exports.default = CampaignBlock;

package/lib/CopyParagraphButton/CopyParagraphButton.js

@@ -4,37 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
 var _editor = require("@ndla/icons/editor");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _util = require("@ndla/util");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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) 2021-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 ContainerDiv = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e18czas71",
-  label: "ContainerDiv"
-})(process.env.NODE_ENV === "production" ? {
-  name: "w6zggb",
-  styles: "position:relative;&:hover{[data-copy-button]{opacity:1;cursor:pointer;}}"
-} : {
-  name: "w6zggb",
-  styles: "position:relative;&:hover{[data-copy-button]{opacity:1;cursor:pointer;}}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWUrQiIsImZpbGUiOiJDb3B5UGFyYWdyYXBoQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIxLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlLCB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VTdGF0ZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIHN0YWNrT3JkZXIgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGlua01lZGl1bSB9IGZyb20gXCJAbmRsYS9pY29ucy9lZGl0b3JcIjtcbmltcG9ydCB7IGNvcHlUZXh0VG9DbGlwYm9hcmQgfSBmcm9tIFwiQG5kbGEvdXRpbFwiO1xuXG5jb25zdCBDb250YWluZXJEaXYgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICY6aG92ZXIge1xuICAgIFtkYXRhLWNvcHktYnV0dG9uXSB7XG4gICAgICBvcGFjaXR5OiAxO1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIH1cbiAgfVxuYDtcbmNvbnN0IEljb25CdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IC0zZW07XG4gIHRvcDogMC4xZW07XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogMDtcbiAgei1pbmRleDogJHtzdGFja09yZGVyLm9mZnNldFNpbmdsZX07XG4gIHRyYW5zaXRpb246IDAuMnM7XG4gIG9wYWNpdHk6IDA7XG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5ncmV5fTtcblxuICAmIHN2ZyB7XG4gICAgd2lkdGg6IDMwcHg7XG4gICAgaGVpZ2h0OiAzMHB4O1xuICB9XG5cbiAgJjpmb2N1cyxcbiAgJjpmb2N1cy12aXNpYmxlLFxuICAmOmFjdGl2ZSB7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIC8vIFdoYXQgdG8gcmVuZGVyIHdpdGhpbiB0aGUgaDJcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgY29weVRleHQ6IHN0cmluZztcbiAgbGFuZz86IHN0cmluZztcbn1cbmNvbnN0IENvcHlQYXJhZ3JhcGhCdXR0b24gPSAoeyBjaGlsZHJlbiwgY29weVRleHQsIGxhbmcgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgW2hhc0NvcGllZCwgc2V0SGFzQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBzYW5pdGl6ZWRUaXRsZSA9IHVzZU1lbW8oKCkgPT4gZW5jb2RlVVJJQ29tcG9uZW50KGNvcHlUZXh0LnJlcGxhY2UoLyAvZywgXCItXCIpKSwgW2NvcHlUZXh0XSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaGFzQ29waWVkKSB7XG4gICAgICBzZXRUaW1lb3V0KCgpID0+IHNldEhhc0NvcGllZChmYWxzZSksIDMwMDApO1xuICAgIH1cbiAgfSwgW2hhc0NvcGllZF0pO1xuXG4gIGNvbnN0IG9uQ29weUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldEhhc0NvcGllZCh0cnVlKTtcbiAgICBjb25zdCB7IGxvY2F0aW9uIH0gPSB3aW5kb3c7XG4gICAgY29uc3QgbmV3SGFzaCA9IGAjJHtzYW5pdGl6ZWRUaXRsZX1gO1xuICAgIGNvbnN0IHBvcnQgPSBsb2NhdGlvbi5wb3J0ID8gYDoke2xvY2F0aW9uLnBvcnR9YCA6IFwiXCI7XG4gICAgY29uc3QgdXJsVG9Db3B5ID0gYCR7bG9jYXRpb24ucHJvdG9jb2x9Ly8ke2xvY2F0aW9uLmhvc3RuYW1lfSR7cG9ydH0ke2xvY2F0aW9uLnBhdGhuYW1lfSR7bG9jYXRpb24uc2VhcmNofSR7bmV3SGFzaH1gO1xuXG4gICAgY29weVRleHRUb0NsaXBib2FyZCh1cmxUb0NvcHkpO1xuICB9LCBbc2FuaXRpemVkVGl0bGVdKTtcblxuICBjb25zdCB0b29sdGlwID0gaGFzQ29waWVkID8gdChcImFydGljbGUuY29weVBhZ2VMaW5rQ29waWVkXCIpIDogdChcImFydGljbGUuY29weUhlYWRlckxpbmtcIik7XG4gIHJldHVybiAoXG4gICAgPENvbnRhaW5lckRpdiBkYXRhLWVtYmVkLXR5cGU9XCJjb3B5LWhlYWRpbmdcIj5cbiAgICAgIDxJY29uQnV0dG9uIGRhdGEtY29weS1idXR0b249XCJcIiBvbkNsaWNrPXtvbkNvcHlDbGlja30gdGl0bGU9e3Rvb2x0aXB9IGFyaWEtbGFiZWw9e2Ake3Rvb2x0aXB9OiAke2NvcHlUZXh0fWB9PlxuICAgICAgICA8TGlua01lZGl1bSAvPlxuICAgICAgPC9JY29uQnV0dG9uPlxuICAgICAgPGgyIGlkPXtzYW5pdGl6ZWRUaXRsZX0gdGFiSW5kZXg9ey0xfSBsYW5nPXtsYW5nfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9oMj5cbiAgICA8L0NvbnRhaW5lckRpdj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENvcHlQYXJhZ3JhcGhCdXR0b247XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const ContainerDiv = (0, _jsx2.styled)("div", {
+  base: {
+    position: "relative",
+    _hover: {
+      "& [data-copy-button]": {
+        opacity: "1",
+        cursor: "pointer"
+      }
+    }
+  }
+});
+const StyledIconButton = (0, _jsx2.styled)(_primitives.IconButton, {
+  base: {
+    position: "absolute",
+    left: "-xxlarge",
+    top: "-4xsmall",
+    opacity: "0",
+    cursor: "pointer",
+    "&:focus, &:focus-visible, &:active": {
+      opacity: "1"
+    }
+  }
 });
-const IconButton = /*#__PURE__*/(0, _base.default)("button", {
-  target: "e18czas70",
-  label: "IconButton"
-})("position:absolute;left:-3em;top:0.1em;background:none;border:0;z-index:", _core.stackOrder.offsetSingle, ";transition:0.2s;opacity:0;color:", _core.colors.brand.grey, ";& svg{width:30px;height:30px;}&:focus,&:focus-visible,&:active{cursor:pointer;opacity:1;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvcHlQYXJhZ3JhcGhCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCZ0MiLCJmaWxlIjoiQ29weVBhcmFncmFwaEJ1dHRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IFJlYWN0Tm9kZSwgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY29sb3JzLCBzdGFja09yZGVyIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IExpbmtNZWRpdW0gfSBmcm9tIFwiQG5kbGEvaWNvbnMvZWRpdG9yXCI7XG5pbXBvcnQgeyBjb3B5VGV4dFRvQ2xpcGJvYXJkIH0gZnJvbSBcIkBuZGxhL3V0aWxcIjtcblxuY29uc3QgQ29udGFpbmVyRGl2ID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAmOmhvdmVyIHtcbiAgICBbZGF0YS1jb3B5LWJ1dHRvbl0ge1xuICAgICAgb3BhY2l0eTogMTtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICB9XG4gIH1cbmA7XG5jb25zdCBJY29uQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsZWZ0OiAtM2VtO1xuICB0b3A6IDAuMWVtO1xuICBiYWNrZ3JvdW5kOiBub25lO1xuICBib3JkZXI6IDA7XG4gIHotaW5kZXg6ICR7c3RhY2tPcmRlci5vZmZzZXRTaW5nbGV9O1xuICB0cmFuc2l0aW9uOiAwLjJzO1xuICBvcGFjaXR5OiAwO1xuICBjb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleX07XG5cbiAgJiBzdmcge1xuICAgIHdpZHRoOiAzMHB4O1xuICAgIGhlaWdodDogMzBweDtcbiAgfVxuXG4gICY6Zm9jdXMsXG4gICY6Zm9jdXMtdmlzaWJsZSxcbiAgJjphY3RpdmUge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICAvLyBXaGF0IHRvIHJlbmRlciB3aXRoaW4gdGhlIGgyXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNvcHlUZXh0OiBzdHJpbmc7XG4gIGxhbmc/OiBzdHJpbmc7XG59XG5jb25zdCBDb3B5UGFyYWdyYXBoQnV0dG9uID0gKHsgY2hpbGRyZW4sIGNvcHlUZXh0LCBsYW5nIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IFtoYXNDb3BpZWQsIHNldEhhc0NvcGllZF0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3Qgc2FuaXRpemVkVGl0bGUgPSB1c2VNZW1vKCgpID0+IGVuY29kZVVSSUNvbXBvbmVudChjb3B5VGV4dC5yZXBsYWNlKC8gL2csIFwiLVwiKSksIFtjb3B5VGV4dF0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGhhc0NvcGllZCkge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiBzZXRIYXNDb3BpZWQoZmFsc2UpLCAzMDAwKTtcbiAgICB9XG4gIH0sIFtoYXNDb3BpZWRdKTtcblxuICBjb25zdCBvbkNvcHlDbGljayA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBzZXRIYXNDb3BpZWQodHJ1ZSk7XG4gICAgY29uc3QgeyBsb2NhdGlvbiB9ID0gd2luZG93O1xuICAgIGNvbnN0IG5ld0hhc2ggPSBgIyR7c2FuaXRpemVkVGl0bGV9YDtcbiAgICBjb25zdCBwb3J0ID0gbG9jYXRpb24ucG9ydCA/IGA6JHtsb2NhdGlvbi5wb3J0fWAgOiBcIlwiO1xuICAgIGNvbnN0IHVybFRvQ29weSA9IGAke2xvY2F0aW9uLnByb3RvY29sfS8vJHtsb2NhdGlvbi5ob3N0bmFtZX0ke3BvcnR9JHtsb2NhdGlvbi5wYXRobmFtZX0ke2xvY2F0aW9uLnNlYXJjaH0ke25ld0hhc2h9YDtcblxuICAgIGNvcHlUZXh0VG9DbGlwYm9hcmQodXJsVG9Db3B5KTtcbiAgfSwgW3Nhbml0aXplZFRpdGxlXSk7XG5cbiAgY29uc3QgdG9vbHRpcCA9IGhhc0NvcGllZCA/IHQoXCJhcnRpY2xlLmNvcHlQYWdlTGlua0NvcGllZFwiKSA6IHQoXCJhcnRpY2xlLmNvcHlIZWFkZXJMaW5rXCIpO1xuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJEaXYgZGF0YS1lbWJlZC10eXBlPVwiY29weS1oZWFkaW5nXCI+XG4gICAgICA8SWNvbkJ1dHRvbiBkYXRhLWNvcHktYnV0dG9uPVwiXCIgb25DbGljaz17b25Db3B5Q2xpY2t9IHRpdGxlPXt0b29sdGlwfSBhcmlhLWxhYmVsPXtgJHt0b29sdGlwfTogJHtjb3B5VGV4dH1gfT5cbiAgICAgICAgPExpbmtNZWRpdW0gLz5cbiAgICAgIDwvSWNvbkJ1dHRvbj5cbiAgICAgIDxoMiBpZD17c2FuaXRpemVkVGl0bGV9IHRhYkluZGV4PXstMX0gbGFuZz17bGFuZ30+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvaDI+XG4gICAgPC9Db250YWluZXJEaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDb3B5UGFyYWdyYXBoQnV0dG9uO1xuIl19 */"));
 const CopyParagraphButton = _ref => {
   let {
     children,
@@ -64,7 +71,8 @@ const CopyParagraphButton = _ref => {
   const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContainerDiv, {
     "data-embed-type": "copy-heading",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
+      variant: "clear",
       "data-copy-button": "",
       onClick: onCopyClick,
       title: tooltip,

package/lib/Embed/RelatedContentEmbed.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _punycode = _interopRequireDefault(require("punycode/"));
 var _reactI18next = require("react-i18next");
 var _ContentType = require("../model/ContentType");
 var _RelatedArticleList = require("../RelatedArticleList/RelatedArticleList");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -54,9 +52,7 @@ const RelatedContentEmbed = _ref => {
       to: embedData.url,
       target: "_blank",
       type: "external",
-      linkInfo: `${t("related.linkInfo")} ${
-      // Get domain name only from url
-      _punycode.default.toUnicode(embedData.url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1] || embedData.url)}`
+      linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});