@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

package/lib/ContentTypeBadge/ContentTypeBadgeNew.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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" />
+import { BadgeProps, type BadgeVariant } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+    contentType: ContentType | undefined;
+}
+type ContentType = typeof contentTypes.SUBJECT_MATERIAL | typeof contentTypes.TASKS_AND_ACTIVITIES | typeof contentTypes.ASSESSMENT_RESOURCES | typeof contentTypes.SUBJECT | typeof contentTypes.SOURCE_MATERIAL | typeof contentTypes.LEARNING_PATH | typeof contentTypes.TOPIC | typeof contentTypes.MULTIDISCIPLINARY_TOPIC | typeof contentTypes.CONCEPT | typeof contentTypes.EXTERNAL | typeof contentTypes.IMAGE | typeof contentTypes.AUDIO | typeof contentTypes.VIDEO | typeof contentTypes.MISSING | (string & {});
+export declare const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>;
+export declare const ContentTypeBadge: import("react").ForwardRefExoticComponent<ContentTypeBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/ContentTypeBadge/ContentTypeBadgeNew.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contentTypeToBadgeVariantMap = exports.ContentTypeBadge = void 0;
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _primitives = require("@ndla/primitives");
+var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 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 contentTypeToBadgeVariantMap = exports.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"
+};
+const ContentTypeBadge = exports.ContentTypeBadge = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    contentType,
+    children,
+    ...props
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  return (0, _jsxRuntime.jsx)(_primitives.Badge, {
+    colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
+    ...props,
+    ref: ref,
+    children: children ?? t(`contentTypes.${contentType}`)
+  });
+});

package/lib/Embed/AudioEmbed.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFirstNonEmptyLicenseCredits = exports.default = void 0;
+var _primitives = require("@ndla/primitives");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _AudioPlayer = _interopRequireDefault(require("../AudioPlayer"));
-var _Figure = require("../Figure");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -50,8 +50,7 @@ const AudioEmbed = _ref => {
     url: coverPhoto.url,
     alt: coverPhoto.altText
   };
-  return (0, _jsxRuntime.jsxs)(_Figure.Figure, {
-    type: "full",
+  return (0, _jsxRuntime.jsxs)(_primitives.Figure, {
     lang: lang,
     children: [(0, _jsxRuntime.jsx)(_AudioPlayer.default, {
       description: data.podcastMeta?.introduction ?? "",

package/lib/Embed/BrightcoveEmbed.d.ts

@@ -9,10 +9,9 @@ import { BrightcoveMetaData } from "@ndla/types-embed";
 import { RenderContext } from "./types";
 interface Props {
     embed: BrightcoveMetaData;
-    isConcept?: boolean;
     renderContext?: RenderContext;
 }
 export declare const makeIframeString: (url: string, width: string | number, height: string | number, title?: string) => string;
 export declare const isNumeric: (value: any) => boolean;
-declare const BrightcoveEmbed: ({ embed, isConcept, renderContext }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BrightcoveEmbed: ({ embed, renderContext }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BrightcoveEmbed;

package/lib/Embed/BrightcoveEmbed.js

@@ -4,39 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.makeIframeString = exports.isNumeric = exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
 var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _button = require("@ndla/button");
-var _core = require("@ndla/core");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _Figure = require("../Figure");
 var _LicenseByline = require("../LicenseByline");
 var _jsxRuntime = require("@emotion/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) 2023-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 LinkedVideoButton = /*#__PURE__*/(0, _base.default)(_button.ButtonV2, {
-  target: "e2wbdyh1",
-  label: "LinkedVideoButton"
-})("margin-left:", _core.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__*/(0, _base.default)("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 = (0, _jsx2.styled)(_primitives.Button, {
+  base: {
+    marginInlineStart: "xsmall"
+  }
+});
+const BrightcoveIframe = (0, _jsx2.styled)("iframe", {
+  base: {
+    height: "auto",
+    width: "100%"
+  }
 });
 const makeIframeString = function (url, width, height) {
   let title = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
@@ -64,7 +58,6 @@ const getIframeProps = (data, sources) => {
 const BrightcoveEmbed = _ref => {
   let {
     embed,
-    isConcept,
     renderContext = "article"
   } = _ref;
   const [showOriginalVideo, setShowOriginalVideo] = (0, _react.useState)(true);
@@ -114,8 +107,7 @@ const BrightcoveEmbed = _ref => {
     ...embedData,
     videoid: linkedVideoId
   }, data.sources) : undefined;
-  return (0, _jsxRuntime.jsxs)(_Figure.Figure, {
-    type: isConcept ? "full-column" : "full",
+  return (0, _jsxRuntime.jsxs)(_primitives.Figure, {
     children: [(0, _jsxRuntime.jsx)("div", {
       className: "brightcove-video",
       children: (0, _jsxRuntime.jsx)(BrightcoveIframe, {
@@ -131,11 +123,9 @@ const BrightcoveEmbed = _ref => {
       type: "video",
       copyright: data.copyright,
       description: parsedDescription,
-      bottomRounded: true,
       children: !!linkedVideoId && (0, _jsxRuntime.jsx)(LinkedVideoButton, {
-        variant: "outline",
-        shape: "pill",
         size: "small",
+        variant: "secondary",
         onClick: () => setShowOriginalVideo(p => !p),
         children: t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)
       })

package/lib/Embed/ConceptEmbed.d.ts

@@ -1,33 +1,27 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * 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 { ReactNode } from "react";
+/// <reference types="react" />
 import { ConceptMetaData } from "@ndla/types-embed";
-import { ConceptNotionData } from "./conceptComponents";
 import { RenderContext } from "./types";
-interface Props {
-    embed: ConceptMetaData;
-    fullWidth?: boolean;
-    lang?: string;
+import { ConceptProps } from "../Concept/Concept";
+interface BaseProps {
     renderContext?: RenderContext;
+    lang?: string;
+}
+interface Props extends BaseProps {
+    embed: ConceptMetaData;
 }
-export declare const ConceptEmbed: ({ embed, fullWidth, lang, renderContext }: Props) => import("react/jsx-runtime").JSX.Element;
-interface InlineConceptProps extends ConceptNotionData {
-    linkText: ReactNode;
-    headerButtons?: ReactNode;
-    exampleIds?: string;
-    exampleLangs?: string;
-    setSelection?: (e: MouseEvent) => void;
+export declare const ConceptEmbed: ({ embed, renderContext, lang }: Props) => import("react/jsx-runtime").JSX.Element;
+export interface InlineConceptProps extends ConceptProps, BaseProps {
+    linkText?: string;
 }
-export declare const InlineConcept: import("react").ForwardRefExoticComponent<InlineConceptProps & import("react").RefAttributes<HTMLSpanElement>>;
-interface ConceptProps extends ConceptNotionData {
-    fullWidth?: boolean;
-    exampleIds?: string;
-    exampleLangs?: string;
+export declare const InlineConcept: import("react").ForwardRefExoticComponent<Omit<InlineConceptProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export interface BlockConceptProps extends ConceptProps {
 }
-export declare const BlockConcept: ({ title, content, metaImage, copyright, source, visualElement, fullWidth, glossData, conceptType, lang, exampleIds, exampleLangs, }: ConceptProps) => import("react/jsx-runtime").JSX.Element;
-export default ConceptEmbed;
+export declare const BlockConcept: import("react").ForwardRefExoticComponent<Omit<BlockConceptProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export {};