@ndla/ui 55.0.12-alpha.0 → 55.0.14-alpha.0

package/es/ContentLoader/index.js

@@ -23,9 +23,9 @@ const ContentLoader = _ref => {
   } = _ref;
   const idClip = uuid();
   const idGradient = uuid();
-  const viewBox = viewBoxProp === undefined ? "0 0 ".concat(width, " ").concat(height) : viewBoxProp;
+  const viewBox = viewBoxProp === undefined ? `0 0 ${width} ${height}` : viewBoxProp;
   return _jsxs("svg", {
-    viewBox: viewBox !== null && viewBox !== void 0 ? viewBox : undefined,
+    viewBox: viewBox ?? undefined,
     version: "1.1",
     preserveAspectRatio: preserveAspectRatio,
     className: className,
@@ -34,9 +34,9 @@ const ContentLoader = _ref => {
     width: typeof width === "string" ? width : undefined,
     children: [_jsx("rect", {
       style: {
-        fill: "url(#".concat(idGradient, ")")
+        fill: `url(#${idGradient})`
       },
-      clipPath: "url(#".concat(idClip, ")"),
+      clipPath: `url(#${idClip})`,
       x: "0",
       y: "0",
       width: width,
@@ -53,7 +53,7 @@ const ContentLoader = _ref => {
           children: _jsx("animate", {
             attributeName: "offset",
             values: "-2; 1",
-            dur: "".concat(speed, "s"),
+            dur: `${speed}s`,
             repeatCount: "indefinite"
           })
         }), _jsx("stop", {
@@ -62,7 +62,7 @@ const ContentLoader = _ref => {
           children: _jsx("animate", {
             attributeName: "offset",
             values: "-1.5; 1.5",
-            dur: "".concat(speed, "s"),
+            dur: `${speed}s`,
             repeatCount: "indefinite"
           })
         }), _jsx("stop", {
@@ -71,7 +71,7 @@ const ContentLoader = _ref => {
           children: _jsx("animate", {
             attributeName: "offset",
             values: "-1; 2",
-            dur: "".concat(speed, "s"),
+            dur: `${speed}s`,
             repeatCount: "indefinite"
           })
         })]

package/es/ContentTypeBadge/ContentTypeBadgeNew.js

@@ -0,0 +1,48 @@
+/**
+ * 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 { useTranslation } from "react-i18next";
+import { Badge } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export const contentTypeToBadgeVariantMap = {
+  [contentTypes.SUBJECT_MATERIAL]: "brand1",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  [contentTypes.SUBJECT]: "neutral",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  [contentTypes.LEARNING_PATH]: "brand3",
+  [contentTypes.TOPIC]: "neutral",
+  // TODO: Verify this color
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  // TODO: Verify this color
+  [contentTypes.EXTERNAL]: "brand2",
+  // TODO: Verify resourceEmbedTypeMapping colors
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral"
+};
+export const ContentTypeBadge = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    contentType,
+    children,
+    ...props
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  return _jsx(Badge, {
+    colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
+    ...props,
+    ref: ref,
+    children: children ?? t(`contentTypes.${contentType}`)
+  });
+});

package/es/CopyParagraphButton/CopyParagraphButton.js

@@ -52,9 +52,9 @@ const CopyParagraphButton = _ref => {
     const {
       location
     } = window;
-    const newHash = "#".concat(sanitizedTitle);
-    const port = location.port ? ":".concat(location.port) : "";
-    const urlToCopy = "".concat(location.protocol, "//").concat(location.hostname).concat(port).concat(location.pathname).concat(location.search).concat(newHash);
+    const newHash = `#${sanitizedTitle}`;
+    const port = location.port ? `:${location.port}` : "";
+    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
     copyTextToClipboard(urlToCopy);
   }, [sanitizedTitle]);
   const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
@@ -63,7 +63,7 @@ const CopyParagraphButton = _ref => {
       tooltip: tooltip,
       children: _jsx(IconButton, {
         onClick: onCopyClick,
-        "aria-label": "".concat(tooltip, ": ").concat(copyText),
+        "aria-label": `${tooltip}: ${copyText}`,
         children: _jsx(Link, {})
       })
     }), _jsx("h2", {

package/es/Embed/AudioEmbed.js

@@ -6,17 +6,13 @@
  *
  */
 
+import { Figure } from "@ndla/primitives";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import AudioPlayer from "../AudioPlayer";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-export const getFirstNonEmptyLicenseCredits = authors => {
-  var _Object$values$find;
-  return (_Object$values$find = Object.values(authors).find(i => i.length > 0)) !== null && _Object$values$find !== void 0 ? _Object$values$find : [];
-};
+export const getFirstNonEmptyLicenseCredits = authors => Object.values(authors).find(i => i.length > 0) ?? [];
 const AudioEmbed = _ref => {
-  var _data$podcastMeta, _data$podcastMeta$int, _data$podcastMeta2, _data$manuscript;
   let {
     embed,
     lang
@@ -39,21 +35,20 @@ const AudioEmbed = _ref => {
   }
   const subtitle = data.series ? {
     title: data.series.title.title,
-    url: "/podkast/".concat(data.series.id)
+    url: `/podkast/${data.series.id}`
   } : undefined;
-  const coverPhoto = (_data$podcastMeta = data.podcastMeta) === null || _data$podcastMeta === void 0 ? void 0 : _data$podcastMeta.coverPhoto;
+  const coverPhoto = data.podcastMeta?.coverPhoto;
   const img = coverPhoto && {
     url: coverPhoto.url,
     alt: coverPhoto.altText
   };
   return _jsxs(Figure, {
-    type: "full",
     lang: lang,
     children: [_jsx(AudioPlayer, {
-      description: (_data$podcastMeta$int = (_data$podcastMeta2 = data.podcastMeta) === null || _data$podcastMeta2 === void 0 ? void 0 : _data$podcastMeta2.introduction) !== null && _data$podcastMeta$int !== void 0 ? _data$podcastMeta$int : "",
+      description: data.podcastMeta?.introduction ?? "",
       img: img,
       src: data.audioFile.url,
-      textVersion: (_data$manuscript = data.manuscript) !== null && _data$manuscript !== void 0 && _data$manuscript.manuscript.length ? _jsx("span", {
+      textVersion: data.manuscript?.manuscript.length ? _jsx("span", {
         dangerouslySetInnerHTML: {
           __html: data.manuscript.manuscript
         }

package/es/Embed/BrightcoveEmbed.js

@@ -1,5 +1,3 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -11,38 +9,31 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import parse from "html-react-parser";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-const LinkedVideoButton = /*#__PURE__*/_styled(ButtonV2, {
-  target: "e2wbdyh1",
-  label: "LinkedVideoButton"
-})("margin-left:", spacing.small, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyaWdodGNvdmVFbWJlZC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEIwQyIsImZpbGUiOiJCcmlnaHRjb3ZlRW1iZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcGFyc2UgZnJvbSBcImh0bWwtcmVhY3QtcGFyc2VyXCI7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgQnV0dG9uVjIgfSBmcm9tIFwiQG5kbGEvYnV0dG9uXCI7XG5pbXBvcnQgeyBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEJyaWdodGNvdmVFbWJlZERhdGEsIEJyaWdodGNvdmVNZXRhRGF0YSwgQnJpZ2h0Y292ZVZpZGVvU291cmNlIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWVtYmVkXCI7XG5pbXBvcnQgRW1iZWRFcnJvclBsYWNlaG9sZGVyIGZyb20gXCIuL0VtYmVkRXJyb3JQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgUmVuZGVyQ29udGV4dCB9IGZyb20gXCIuL3R5cGVzXCI7XG5pbXBvcnQgeyBGaWd1cmUgfSBmcm9tIFwiLi4vRmlndXJlXCI7XG5pbXBvcnQgeyBFbWJlZEJ5bGluZSB9IGZyb20gXCIuLi9MaWNlbnNlQnlsaW5lXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGVtYmVkOiBCcmlnaHRjb3ZlTWV0YURhdGE7XG4gIGlzQ29uY2VwdD86IGJvb2xlYW47XG4gIHJlbmRlckNvbnRleHQ/OiBSZW5kZXJDb250ZXh0O1xufVxuXG5jb25zdCBMaW5rZWRWaWRlb0J1dHRvbiA9IHN0eWxlZChCdXR0b25WMilgXG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuYDtcblxuY29uc3QgQnJpZ2h0Y292ZUlmcmFtZSA9IHN0eWxlZC5pZnJhbWVgXG4gIGhlaWdodDogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBtYWtlSWZyYW1lU3RyaW5nID0gKHVybDogc3RyaW5nLCB3aWR0aDogc3RyaW5nIHwgbnVtYmVyLCBoZWlnaHQ6IHN0cmluZyB8IG51bWJlciwgdGl0bGUgPSBcIlwiKSA9PiB7XG4gIGNvbnN0IHN0cmlwcGVkV2lkdGggPSB0eXBlb2Ygd2lkdGggPT09IFwibnVtYmVyXCIgPyB3aWR0aCA6IHdpZHRoLnJlcGxhY2UoL1xccypweC8sIFwiXCIpO1xuICBjb25zdCBzdHJpcHBlZEhlaWdodCA9IHR5cGVvZiBoZWlnaHQgPT09IFwibnVtYmVyXCIgPyBoZWlnaHQgOiBoZWlnaHQucmVwbGFjZSgvXFxzKnB4LywgXCJcIik7XG4gIGNvbnN0IHVybE9yVGl0bGUgPSB0aXRsZSB8fCB1cmw7XG4gIHJldHVybiBgPGlmcmFtZSB0aXRsZT1cIiR7dXJsT3JUaXRsZX1cIiBhcmlhLWxhYmVsPVwiJHt1cmxPclRpdGxlfVwiIHNyYz1cIiR7dXJsfVwiIHdpZHRoPVwiJHtzdHJpcHBlZFdpZHRofVwiIGhlaWdodD1cIiR7c3RyaXBwZWRIZWlnaHR9XCIgYWxsb3dmdWxsc2NyZWVuIHNjcm9sbGluZz1cIm5vXCIgZnJhbWVib3JkZXI9XCIwXCIgbG9hZGluZz1cImxhenlcIj48L2lmcmFtZT5gO1xufTtcblxuZXhwb3J0IGNvbnN0IGlzTnVtZXJpYyA9ICh2YWx1ZTogYW55KSA9PiAhTnVtYmVyLmlzTmFOKHZhbHVlIC0gTnVtYmVyLnBhcnNlRmxvYXQodmFsdWUpKTtcblxuY29uc3QgZ2V0SWZyYW1lUHJvcHMgPSAoZGF0YTogQnJpZ2h0Y292ZUVtYmVkRGF0YSwgc291cmNlczogQnJpZ2h0Y292ZVZpZGVvU291cmNlW10pID0+IHtcbiAgY29uc3QgeyBhY2NvdW50LCB2aWRlb2lkLCBwbGF5ZXIgPSBcImRlZmF1bHRcIiB9ID0gZGF0YTtcblxuICBjb25zdCBzb3VyY2UgPSBzb3VyY2VzLmZpbHRlcigocykgPT4gcy53aWR0aCAmJiBzLmhlaWdodCkudG9Tb3J0ZWQoKGEsIGIpID0+IGEhLmhlaWdodCEgLSBiLmhlaWdodCEpWzBdO1xuXG4gIHJldHVybiB7XG4gICAgc3JjOiBgaHR0cHM6Ly9wbGF5ZXJzLmJyaWdodGNvdmUubmV0LyR7YWNjb3VudH0vJHtwbGF5ZXJ9X2RlZmF1bHQvaW5kZXguaHRtbD92aWRlb0lkPSR7dmlkZW9pZH1gLFxuICAgIGhlaWdodDogc291cmNlPy5oZWlnaHQgPz8gXCI0ODBcIixcbiAgICB3aWR0aDogc291cmNlPy53aWR0aCA/PyBcIjY0MFwiLFxuICB9O1xufTtcbmNvbnN0IEJyaWdodGNvdmVFbWJlZCA9ICh7IGVtYmVkLCBpc0NvbmNlcHQsIHJlbmRlckNvbnRleHQgPSBcImFydGljbGVcIiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd09yaWdpbmFsVmlkZW8sIHNldFNob3dPcmlnaW5hbFZpZGVvXSA9IHVzZVN0YXRlKHRydWUpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGlmcmFtZVJlZiA9IHVzZVJlZjxIVE1MSUZyYW1lRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IHsgZW1iZWREYXRhIH0gPSBlbWJlZDtcbiAgY29uc3QgZmFsbGJhY2tUaXRsZSA9IGAke3QoXCJlbWJlZC50eXBlLnZpZGVvXCIpfTogJHtlbWJlZERhdGEudmlkZW9pZH1gO1xuICBjb25zdCBwYXJzZWREZXNjcmlwdGlvbiA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmIChlbWJlZC5lbWJlZERhdGEuY2FwdGlvbiB8fCByZW5kZXJDb250ZXh0ID09PSBcImFydGljbGVcIikge1xuICAgICAgcmV0dXJuIGVtYmVkLmVtYmVkRGF0YS5jYXB0aW9uID8gcGFyc2UoZW1iZWQuZW1iZWREYXRhLmNhcHRpb24pIDogdW5kZWZpbmVkO1xuICAgIH0gZWxzZSBpZiAoZW1iZWQuc3RhdHVzID09PSBcInN1Y2Nlc3NcIiAmJiBlbWJlZC5kYXRhLmRlc2NyaXB0aW9uKSB7XG4gICAgICByZXR1cm4gcGFyc2UoZW1iZWQuZGF0YS5kZXNjcmlwdGlvbik7XG4gICAgfVxuICB9LCBbZW1iZWQsIHJlbmRlckNvbnRleHRdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGlmcmFtZSA9IGlmcmFtZVJlZi5jdXJyZW50O1xuICAgIGlmIChpZnJhbWUpIHtcbiAgICAgIGNvbnN0IFt3aWR0aCwgaGVpZ2h0XSA9IFtwYXJzZUludChpZnJhbWUud2lkdGgpLCBwYXJzZUludChpZnJhbWUuaGVpZ2h0KV07XG4gICAgICBpZnJhbWUuc3R5bGUuYXNwZWN0UmF0aW8gPSBgJHt3aWR0aH0vJHtoZWlnaHR9YDtcbiAgICAgIGlmcmFtZS53aWR0aCA9IFwiXCI7XG4gICAgICBpZnJhbWUuaGVpZ2h0ID0gXCJcIjtcbiAgICB9XG4gIH0sIFtdKTtcbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gXCJlcnJvclwiKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxFbWJlZEVycm9yUGxhY2Vob2xkZXIgdHlwZT1cInZpZGVvXCI+XG4gICAgICAgIDxCcmlnaHRjb3ZlSWZyYW1lXG4gICAgICAgICAgcmVmPXtpZnJhbWVSZWZ9XG4gICAgICAgICAgdGl0bGU9e2VtYmVkRGF0YS5hbHQgPz8gZmFsbGJhY2tUaXRsZX1cbiAgICAgICAgICBhcmlhLWxhYmVsPXtlbWJlZERhdGEuYWx0ID8/IGZhbGxiYWNrVGl0bGV9XG4gICAgICAgICAgZnJhbWVCb3JkZXI9XCIwXCJcbiAgICAgICAgICB7Li4uZ2V0SWZyYW1lUHJvcHMoZW1iZWREYXRhLCBbXSl9XG4gICAgICAgICAgYWxsb3dGdWxsU2NyZWVuXG4gICAgICAgIC8+XG4gICAgICA8L0VtYmVkRXJyb3JQbGFjZWhvbGRlcj5cbiAgICApO1xuICB9XG4gIGNvbnN0IHsgZGF0YSB9ID0gZW1iZWQ7XG5cbiAgY29uc3QgbGlua2VkVmlkZW9JZCA9IGlzTnVtZXJpYyhkYXRhLmxpbms/LnRleHQpID8gZGF0YS5saW5rPy50ZXh0IDogdW5kZWZpbmVkO1xuXG4gIGNvbnN0IG9yaWdpbmFsVmlkZW9Qcm9wcyA9IGdldElmcmFtZVByb3BzKGVtYmVkRGF0YSwgZGF0YS5zb3VyY2VzKTtcbiAgY29uc3QgYWx0ZXJuYXRpdmVWaWRlb1Byb3BzID0gbGlua2VkVmlkZW9JZFxuICAgID8gZ2V0SWZyYW1lUHJvcHMoeyAuLi5lbWJlZERhdGEsIHZpZGVvaWQ6IGxpbmtlZFZpZGVvSWQgfSwgZGF0YS5zb3VyY2VzKVxuICAgIDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZSB0eXBlPXtpc0NvbmNlcHQgPyBcImZ1bGwtY29sdW1uXCIgOiBcImZ1bGxcIn0+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cImJyaWdodGNvdmUtdmlkZW9cIj5cbiAgICAgICAgPEJyaWdodGNvdmVJZnJhbWVcbiAgICAgICAgICByZWY9e2lmcmFtZVJlZn1cbiAgICAgICAgICBjbGFzc05hbWU9XCJvcmlnaW5hbFwiXG4gICAgICAgICAgdGl0bGU9e2VtYmVkRGF0YS5hbHQgPz8gZGF0YS5uYW1lID8/IGZhbGxiYWNrVGl0bGV9XG4gICAgICAgICAgYXJpYS1sYWJlbD17ZW1iZWREYXRhLmFsdCA/PyBkYXRhLm5hbWUgPz8gZmFsbGJhY2tUaXRsZX1cbiAgICAgICAgICBmcmFtZUJvcmRlcj1cIjBcIlxuICAgICAgICAgIHsuLi4oYWx0ZXJuYXRpdmVWaWRlb1Byb3BzICYmICFzaG93T3JpZ2luYWxWaWRlbyA/IGFsdGVybmF0aXZlVmlkZW9Qcm9wcyA6IG9yaWdpbmFsVmlkZW9Qcm9wcyl9XG4gICAgICAgICAgYWxsb3dGdWxsU2NyZWVuXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxFbWJlZEJ5bGluZSB0eXBlPVwidmlkZW9cIiBjb3B5cmlnaHQ9e2RhdGEuY29weXJpZ2h0IX0gZGVzY3JpcHRpb249e3BhcnNlZERlc2NyaXB0aW9ufSBib3R0b21Sb3VuZGVkPlxuICAgICAgICB7ISFsaW5rZWRWaWRlb0lkICYmIChcbiAgICAgICAgICA8TGlua2VkVmlkZW9CdXR0b25cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJvdXRsaW5lXCJcbiAgICAgICAgICAgIHNoYXBlPVwicGlsbFwiXG4gICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0U2hvd09yaWdpbmFsVmlkZW8oKHApID0+ICFwKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dChgZmlndXJlLmJ1dHRvbi4keyFzaG93T3JpZ2luYWxWaWRlbyA/IFwib3JpZ2luYWxcIiA6IFwiYWx0ZXJuYXRpdmVcIn1gKX1cbiAgICAgICAgICA8L0xpbmtlZFZpZGVvQnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9FbWJlZEJ5bGluZT5cbiAgICA8L0ZpZ3VyZT5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJyaWdodGNvdmVFbWJlZDtcbiJdfQ== */"));
-const BrightcoveIframe = /*#__PURE__*/_styled("iframe", {
-  target: "e2wbdyh0",
-  label: "BrightcoveIframe"
-})(process.env.NODE_ENV === "production" ? {
-  name: "pit38s",
-  styles: "height:auto"
-} : {
-  name: "pit38s",
-  styles: "height:auto",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJyaWdodGNvdmVFbWJlZC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJzQyIsImZpbGUiOiJCcmlnaHRjb3ZlRW1iZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcGFyc2UgZnJvbSBcImh0bWwtcmVhY3QtcGFyc2VyXCI7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgQnV0dG9uVjIgfSBmcm9tIFwiQG5kbGEvYnV0dG9uXCI7XG5pbXBvcnQgeyBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEJyaWdodGNvdmVFbWJlZERhdGEsIEJyaWdodGNvdmVNZXRhRGF0YSwgQnJpZ2h0Y292ZVZpZGVvU291cmNlIH0gZnJvbSBcIkBuZGxhL3R5cGVzLWVtYmVkXCI7XG5pbXBvcnQgRW1iZWRFcnJvclBsYWNlaG9sZGVyIGZyb20gXCIuL0VtYmVkRXJyb3JQbGFjZWhvbGRlclwiO1xuaW1wb3J0IHsgUmVuZGVyQ29udGV4dCB9IGZyb20gXCIuL3R5cGVzXCI7XG5pbXBvcnQgeyBGaWd1cmUgfSBmcm9tIFwiLi4vRmlndXJlXCI7XG5pbXBvcnQgeyBFbWJlZEJ5bGluZSB9IGZyb20gXCIuLi9MaWNlbnNlQnlsaW5lXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGVtYmVkOiBCcmlnaHRjb3ZlTWV0YURhdGE7XG4gIGlzQ29uY2VwdD86IGJvb2xlYW47XG4gIHJlbmRlckNvbnRleHQ/OiBSZW5kZXJDb250ZXh0O1xufVxuXG5jb25zdCBMaW5rZWRWaWRlb0J1dHRvbiA9IHN0eWxlZChCdXR0b25WMilgXG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuYDtcblxuY29uc3QgQnJpZ2h0Y292ZUlmcmFtZSA9IHN0eWxlZC5pZnJhbWVgXG4gIGhlaWdodDogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBtYWtlSWZyYW1lU3RyaW5nID0gKHVybDogc3RyaW5nLCB3aWR0aDogc3RyaW5nIHwgbnVtYmVyLCBoZWlnaHQ6IHN0cmluZyB8IG51bWJlciwgdGl0bGUgPSBcIlwiKSA9PiB7XG4gIGNvbnN0IHN0cmlwcGVkV2lkdGggPSB0eXBlb2Ygd2lkdGggPT09IFwibnVtYmVyXCIgPyB3aWR0aCA6IHdpZHRoLnJlcGxhY2UoL1xccypweC8sIFwiXCIpO1xuICBjb25zdCBzdHJpcHBlZEhlaWdodCA9IHR5cGVvZiBoZWlnaHQgPT09IFwibnVtYmVyXCIgPyBoZWlnaHQgOiBoZWlnaHQucmVwbGFjZSgvXFxzKnB4LywgXCJcIik7XG4gIGNvbnN0IHVybE9yVGl0bGUgPSB0aXRsZSB8fCB1cmw7XG4gIHJldHVybiBgPGlmcmFtZSB0aXRsZT1cIiR7dXJsT3JUaXRsZX1cIiBhcmlhLWxhYmVsPVwiJHt1cmxPclRpdGxlfVwiIHNyYz1cIiR7dXJsfVwiIHdpZHRoPVwiJHtzdHJpcHBlZFdpZHRofVwiIGhlaWdodD1cIiR7c3RyaXBwZWRIZWlnaHR9XCIgYWxsb3dmdWxsc2NyZWVuIHNjcm9sbGluZz1cIm5vXCIgZnJhbWVib3JkZXI9XCIwXCIgbG9hZGluZz1cImxhenlcIj48L2lmcmFtZT5gO1xufTtcblxuZXhwb3J0IGNvbnN0IGlzTnVtZXJpYyA9ICh2YWx1ZTogYW55KSA9PiAhTnVtYmVyLmlzTmFOKHZhbHVlIC0gTnVtYmVyLnBhcnNlRmxvYXQodmFsdWUpKTtcblxuY29uc3QgZ2V0SWZyYW1lUHJvcHMgPSAoZGF0YTogQnJpZ2h0Y292ZUVtYmVkRGF0YSwgc291cmNlczogQnJpZ2h0Y292ZVZpZGVvU291cmNlW10pID0+IHtcbiAgY29uc3QgeyBhY2NvdW50LCB2aWRlb2lkLCBwbGF5ZXIgPSBcImRlZmF1bHRcIiB9ID0gZGF0YTtcblxuICBjb25zdCBzb3VyY2UgPSBzb3VyY2VzLmZpbHRlcigocykgPT4gcy53aWR0aCAmJiBzLmhlaWdodCkudG9Tb3J0ZWQoKGEsIGIpID0+IGEhLmhlaWdodCEgLSBiLmhlaWdodCEpWzBdO1xuXG4gIHJldHVybiB7XG4gICAgc3JjOiBgaHR0cHM6Ly9wbGF5ZXJzLmJyaWdodGNvdmUubmV0LyR7YWNjb3VudH0vJHtwbGF5ZXJ9X2RlZmF1bHQvaW5kZXguaHRtbD92aWRlb0lkPSR7dmlkZW9pZH1gLFxuICAgIGhlaWdodDogc291cmNlPy5oZWlnaHQgPz8gXCI0ODBcIixcbiAgICB3aWR0aDogc291cmNlPy53aWR0aCA/PyBcIjY0MFwiLFxuICB9O1xufTtcbmNvbnN0IEJyaWdodGNvdmVFbWJlZCA9ICh7IGVtYmVkLCBpc0NvbmNlcHQsIHJlbmRlckNvbnRleHQgPSBcImFydGljbGVcIiB9OiBQcm9wcykgPT4ge1xuICBjb25zdCBbc2hvd09yaWdpbmFsVmlkZW8sIHNldFNob3dPcmlnaW5hbFZpZGVvXSA9IHVzZVN0YXRlKHRydWUpO1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGlmcmFtZVJlZiA9IHVzZVJlZjxIVE1MSUZyYW1lRWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IHsgZW1iZWREYXRhIH0gPSBlbWJlZDtcbiAgY29uc3QgZmFsbGJhY2tUaXRsZSA9IGAke3QoXCJlbWJlZC50eXBlLnZpZGVvXCIpfTogJHtlbWJlZERhdGEudmlkZW9pZH1gO1xuICBjb25zdCBwYXJzZWREZXNjcmlwdGlvbiA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmIChlbWJlZC5lbWJlZERhdGEuY2FwdGlvbiB8fCByZW5kZXJDb250ZXh0ID09PSBcImFydGljbGVcIikge1xuICAgICAgcmV0dXJuIGVtYmVkLmVtYmVkRGF0YS5jYXB0aW9uID8gcGFyc2UoZW1iZWQuZW1iZWREYXRhLmNhcHRpb24pIDogdW5kZWZpbmVkO1xuICAgIH0gZWxzZSBpZiAoZW1iZWQuc3RhdHVzID09PSBcInN1Y2Nlc3NcIiAmJiBlbWJlZC5kYXRhLmRlc2NyaXB0aW9uKSB7XG4gICAgICByZXR1cm4gcGFyc2UoZW1iZWQuZGF0YS5kZXNjcmlwdGlvbik7XG4gICAgfVxuICB9LCBbZW1iZWQsIHJlbmRlckNvbnRleHRdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGNvbnN0IGlmcmFtZSA9IGlmcmFtZVJlZi5jdXJyZW50O1xuICAgIGlmIChpZnJhbWUpIHtcbiAgICAgIGNvbnN0IFt3aWR0aCwgaGVpZ2h0XSA9IFtwYXJzZUludChpZnJhbWUud2lkdGgpLCBwYXJzZUludChpZnJhbWUuaGVpZ2h0KV07XG4gICAgICBpZnJhbWUuc3R5bGUuYXNwZWN0UmF0aW8gPSBgJHt3aWR0aH0vJHtoZWlnaHR9YDtcbiAgICAgIGlmcmFtZS53aWR0aCA9IFwiXCI7XG4gICAgICBpZnJhbWUuaGVpZ2h0ID0gXCJcIjtcbiAgICB9XG4gIH0sIFtdKTtcbiAgaWYgKGVtYmVkLnN0YXR1cyA9PT0gXCJlcnJvclwiKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxFbWJlZEVycm9yUGxhY2Vob2xkZXIgdHlwZT1cInZpZGVvXCI+XG4gICAgICAgIDxCcmlnaHRjb3ZlSWZyYW1lXG4gICAgICAgICAgcmVmPXtpZnJhbWVSZWZ9XG4gICAgICAgICAgdGl0bGU9e2VtYmVkRGF0YS5hbHQgPz8gZmFsbGJhY2tUaXRsZX1cbiAgICAgICAgICBhcmlhLWxhYmVsPXtlbWJlZERhdGEuYWx0ID8/IGZhbGxiYWNrVGl0bGV9XG4gICAgICAgICAgZnJhbWVCb3JkZXI9XCIwXCJcbiAgICAgICAgICB7Li4uZ2V0SWZyYW1lUHJvcHMoZW1iZWREYXRhLCBbXSl9XG4gICAgICAgICAgYWxsb3dGdWxsU2NyZWVuXG4gICAgICAgIC8+XG4gICAgICA8L0VtYmVkRXJyb3JQbGFjZWhvbGRlcj5cbiAgICApO1xuICB9XG4gIGNvbnN0IHsgZGF0YSB9ID0gZW1iZWQ7XG5cbiAgY29uc3QgbGlua2VkVmlkZW9JZCA9IGlzTnVtZXJpYyhkYXRhLmxpbms/LnRleHQpID8gZGF0YS5saW5rPy50ZXh0IDogdW5kZWZpbmVkO1xuXG4gIGNvbnN0IG9yaWdpbmFsVmlkZW9Qcm9wcyA9IGdldElmcmFtZVByb3BzKGVtYmVkRGF0YSwgZGF0YS5zb3VyY2VzKTtcbiAgY29uc3QgYWx0ZXJuYXRpdmVWaWRlb1Byb3BzID0gbGlua2VkVmlkZW9JZFxuICAgID8gZ2V0SWZyYW1lUHJvcHMoeyAuLi5lbWJlZERhdGEsIHZpZGVvaWQ6IGxpbmtlZFZpZGVvSWQgfSwgZGF0YS5zb3VyY2VzKVxuICAgIDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPEZpZ3VyZSB0eXBlPXtpc0NvbmNlcHQgPyBcImZ1bGwtY29sdW1uXCIgOiBcImZ1bGxcIn0+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cImJyaWdodGNvdmUtdmlkZW9cIj5cbiAgICAgICAgPEJyaWdodGNvdmVJZnJhbWVcbiAgICAgICAgICByZWY9e2lmcmFtZVJlZn1cbiAgICAgICAgICBjbGFzc05hbWU9XCJvcmlnaW5hbFwiXG4gICAgICAgICAgdGl0bGU9e2VtYmVkRGF0YS5hbHQgPz8gZGF0YS5uYW1lID8/IGZhbGxiYWNrVGl0bGV9XG4gICAgICAgICAgYXJpYS1sYWJlbD17ZW1iZWREYXRhLmFsdCA/PyBkYXRhLm5hbWUgPz8gZmFsbGJhY2tUaXRsZX1cbiAgICAgICAgICBmcmFtZUJvcmRlcj1cIjBcIlxuICAgICAgICAgIHsuLi4oYWx0ZXJuYXRpdmVWaWRlb1Byb3BzICYmICFzaG93T3JpZ2luYWxWaWRlbyA/IGFsdGVybmF0aXZlVmlkZW9Qcm9wcyA6IG9yaWdpbmFsVmlkZW9Qcm9wcyl9XG4gICAgICAgICAgYWxsb3dGdWxsU2NyZWVuXG4gICAgICAgIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxFbWJlZEJ5bGluZSB0eXBlPVwidmlkZW9cIiBjb3B5cmlnaHQ9e2RhdGEuY29weXJpZ2h0IX0gZGVzY3JpcHRpb249e3BhcnNlZERlc2NyaXB0aW9ufSBib3R0b21Sb3VuZGVkPlxuICAgICAgICB7ISFsaW5rZWRWaWRlb0lkICYmIChcbiAgICAgICAgICA8TGlua2VkVmlkZW9CdXR0b25cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJvdXRsaW5lXCJcbiAgICAgICAgICAgIHNoYXBlPVwicGlsbFwiXG4gICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0U2hvd09yaWdpbmFsVmlkZW8oKHApID0+ICFwKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7dChgZmlndXJlLmJ1dHRvbi4keyFzaG93T3JpZ2luYWxWaWRlbyA/IFwib3JpZ2luYWxcIiA6IFwiYWx0ZXJuYXRpdmVcIn1gKX1cbiAgICAgICAgICA8L0xpbmtlZFZpZGVvQnV0dG9uPlxuICAgICAgICApfVxuICAgICAgPC9FbWJlZEJ5bGluZT5cbiAgICA8L0ZpZ3VyZT5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEJyaWdodGNvdmVFbWJlZDtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+const LinkedVideoButton = styled(Button, {
+  base: {
+    marginInlineStart: "xsmall"
+  }
+});
+const BrightcoveIframe = styled("iframe", {
+  base: {
+    height: "auto",
+    width: "100%"
+  }
 });
 export const makeIframeString = function (url, width, height) {
   let title = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
   const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height.replace(/\s*px/, "");
   const urlOrTitle = title || url;
-  return "<iframe title=\"".concat(urlOrTitle, "\" aria-label=\"").concat(urlOrTitle, "\" src=\"").concat(url, "\" width=\"").concat(strippedWidth, "\" height=\"").concat(strippedHeight, "\" allowfullscreen scrolling=\"no\" frameborder=\"0\" loading=\"lazy\"></iframe>");
+  return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
 };
 export const isNumeric = value => !Number.isNaN(value - Number.parseFloat(value));
 const getIframeProps = (data, sources) => {
-  var _source$height, _source$width;
   const {
     account,
     videoid,
@@ -50,16 +41,14 @@ const getIframeProps = (data, sources) => {
   } = data;
   const source = sources.filter(s => s.width && s.height).toSorted((a, b) => a.height - b.height)[0];
   return {
-    src: "https://players.brightcove.net/".concat(account, "/").concat(player, "_default/index.html?videoId=").concat(videoid),
-    height: (_source$height = source === null || source === void 0 ? void 0 : source.height) !== null && _source$height !== void 0 ? _source$height : "480",
-    width: (_source$width = source === null || source === void 0 ? void 0 : source.width) !== null && _source$width !== void 0 ? _source$width : "640"
+    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
+    height: source?.height ?? "480",
+    width: source?.width ?? "640"
   };
 };
 const BrightcoveEmbed = _ref => {
-  var _data$link, _data$link2, _ref2, _embedData$alt3, _ref3, _embedData$alt4;
   let {
     embed,
-    isConcept,
     renderContext = "article"
   } = _ref;
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
@@ -70,7 +59,7 @@ const BrightcoveEmbed = _ref => {
   const {
     embedData
   } = embed;
-  const fallbackTitle = "".concat(t("embed.type.video"), ": ").concat(embedData.videoid);
+  const fallbackTitle = `${t("embed.type.video")}: ${embedData.videoid}`;
   const parsedDescription = useMemo(() => {
     if (embed.embedData.caption || renderContext === "article") {
       return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
@@ -82,19 +71,18 @@ const BrightcoveEmbed = _ref => {
     const iframe = iframeRef.current;
     if (iframe) {
       const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
-      iframe.style.aspectRatio = "".concat(width, "/").concat(height);
+      iframe.style.aspectRatio = `${width}/${height}`;
       iframe.width = "";
       iframe.height = "";
     }
   }, []);
   if (embed.status === "error") {
-    var _embedData$alt, _embedData$alt2;
     return _jsx(EmbedErrorPlaceholder, {
       type: "video",
       children: _jsx(BrightcoveIframe, {
         ref: iframeRef,
-        title: (_embedData$alt = embedData.alt) !== null && _embedData$alt !== void 0 ? _embedData$alt : fallbackTitle,
-        "aria-label": (_embedData$alt2 = embedData.alt) !== null && _embedData$alt2 !== void 0 ? _embedData$alt2 : fallbackTitle,
+        title: embedData.alt ?? fallbackTitle,
+        "aria-label": embedData.alt ?? fallbackTitle,
         frameBorder: "0",
         ...getIframeProps(embedData, []),
         allowFullScreen: true
@@ -104,21 +92,20 @@ const BrightcoveEmbed = _ref => {
   const {
     data
   } = embed;
-  const linkedVideoId = isNumeric((_data$link = data.link) === null || _data$link === void 0 ? void 0 : _data$link.text) ? (_data$link2 = data.link) === null || _data$link2 === void 0 ? void 0 : _data$link2.text : undefined;
+  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
   const originalVideoProps = getIframeProps(embedData, data.sources);
   const alternativeVideoProps = linkedVideoId ? getIframeProps({
     ...embedData,
     videoid: linkedVideoId
   }, data.sources) : undefined;
   return _jsxs(Figure, {
-    type: isConcept ? "full-column" : "full",
     children: [_jsx("div", {
       className: "brightcove-video",
       children: _jsx(BrightcoveIframe, {
         ref: iframeRef,
         className: "original",
-        title: (_ref2 = (_embedData$alt3 = embedData.alt) !== null && _embedData$alt3 !== void 0 ? _embedData$alt3 : data.name) !== null && _ref2 !== void 0 ? _ref2 : fallbackTitle,
-        "aria-label": (_ref3 = (_embedData$alt4 = embedData.alt) !== null && _embedData$alt4 !== void 0 ? _embedData$alt4 : data.name) !== null && _ref3 !== void 0 ? _ref3 : fallbackTitle,
+        title: embedData.alt ?? data.name ?? fallbackTitle,
+        "aria-label": embedData.alt ?? data.name ?? fallbackTitle,
         frameBorder: "0",
         ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
         allowFullScreen: true
@@ -129,11 +116,10 @@ const BrightcoveEmbed = _ref => {
       description: parsedDescription,
       bottomRounded: true,
       children: !!linkedVideoId && _jsx(LinkedVideoButton, {
-        variant: "outline",
-        shape: "pill",
         size: "small",
+        variant: "secondary",
         onClick: () => setShowOriginalVideo(p => !p),
-        children: t("figure.button.".concat(!showOriginalVideo ? "original" : "alternative"))
+        children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
       })
     })]
   });

package/es/Embed/CodeEmbed.js

@@ -6,21 +6,69 @@
  *
  */
 
-import { CodeBlock } from "../CodeBlock";
-import { Figure } from "../Figure";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy } from "@ndla/icons/action";
+import { Done } from "@ndla/icons/editor";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { copyTextToClipboard } from "@ndla/util";
+import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
+
+// TODO: We need an error state for this
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const StyledFigCaption = styled("figcaption", {
+  base: {
+    textStyle: "label.large",
+    fontWeight: "bold"
+  }
+});
+const StyledFigure = styled(Figure, {
+  base: {
+    // We apply margin here to allow for the float and size props on figure to work as intended.
+    "& > *:not(:where(:first-child))": {
+      marginBlockStart: "xsmall"
+    }
+  }
+});
+const getTitleFromFormat = format => {
+  const selectedLanguage = codeLanguageOptions.find(item => item.format === format);
+  if (selectedLanguage) {
+    return selectedLanguage.title;
+  }
+  return;
+};
 const CodeEmbed = _ref => {
   let {
     embed
   } = _ref;
-  return _jsx(Figure, {
-    children: _jsx(CodeBlock, {
-      title: embed.embedData.title,
-      code: embed.status === "success" ? embed.data.decodedContent : "",
+  const [isCopied, setIsCopied] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setInterval(() => setIsCopied(false), 3000);
+      // ensure interval is cleared - also if unmounted
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isCopied]);
+  return _jsxs(StyledFigure, {
+    children: [_jsx(StyledFigCaption, {
+      children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)
+    }), _jsx(CodeBlock, {
       highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
-      format: embed.embedData.codeFormat,
-      showCopy: true
-    })
+      format: embed.embedData.codeFormat
+    }), _jsxs(Button, {
+      variant: "secondary",
+      onClick: () => {
+        copyTextToClipboard(embed.status === "success" ? embed.data.decodedContent : "");
+        setIsCopied(true);
+      },
+      children: [isCopied ? _jsx(Done, {}) : _jsx(Copy, {}), isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")]
+    })]
   });
 };
 export default CodeEmbed;