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

package/lib/Embed/BrightcoveEmbed.js

@@ -123,7 +123,6 @@ const BrightcoveEmbed = _ref => {
       type: "video",
       copyright: data.copyright,
       description: parsedDescription,
-      bottomRounded: true,
       children: !!linkedVideoId && (0, _jsxRuntime.jsx)(LinkedVideoButton, {
         size: "small",
         variant: "secondary",

package/lib/Embed/CopyrightEmbed.js

@@ -22,8 +22,7 @@ const CopyrightEmbed = _ref => {
   return (0, _jsxRuntime.jsxs)("figure", {
     children: [children, (0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       type: "copyright",
-      copyright: embed.embedData.copyright,
-      bottomRounded: true
+      copyright: embed.embedData.copyright
     })]
   });
 };

package/lib/LicenseByline/EmbedByline.d.ts

@@ -12,8 +12,6 @@ import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept
 import { ICopyright as ImageCopyright } from "@ndla/types-backend/image-api";
 import { BrightcoveCopyright } from "@ndla/types-embed";
 interface BaseProps {
-    topRounded?: boolean;
-    bottomRounded?: boolean;
     description?: ReactNode;
     children?: ReactNode;
     visibleAlt?: string;
@@ -49,11 +47,11 @@ interface CopyrightProps extends BaseProps {
 }
 export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps | CopyrightProps;
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
-declare const EmbedByline: ({ type, topRounded, bottomRounded, description, children, visibleAlt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbedByline: ({ type, description, children, visibleAlt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 interface LicenseContainerProps {
     children?: ReactNode;
     copyright: EmbedBylineTypeProps["copyright"];
     type: Props["type"];
 }
 export declare const LicenseContainerContent: ({ children, copyright, type }: LicenseContainerProps) => import("react/jsx-runtime").JSX.Element;
-export default EmbedByline;
+export {};

package/lib/LicenseByline/EmbedByline.js

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.LicenseContainerContent = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+exports.LicenseContainerContent = exports.EmbedByline = void 0;
+var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
 var _common = require("@ndla/icons/common");
 var _licenses = require("@ndla/licenses");
-var _LicenseDescription = _interopRequireDefault(require("./LicenseDescription"));
-var _LicenseLink = _interopRequireDefault(require("./LicenseLink"));
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _LicenseLink = require("./LicenseLink");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -21,19 +20,47 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const BylineWrapper = /*#__PURE__*/(0, _base.default)("figcaption", {
-  target: "e1087usc1",
-  label: "BylineWrapper"
-})("display:flex;flex-direction:column;font-family:", _core.fonts.sans, ";", _core.fonts.sizes("16px", "26px"), ";padding:", _core.spacing.small, " 0;background-color:", _core.colors.white, ";&[data-top-rounded=\"true\"]{border-top-right-radius:", _core.misc.borderRadius, ";border-top-left-radius:", _core.misc.borderRadius, ";}&[data-bottom-rounded=\"true\"]{border-bottom-right-radius:", _core.misc.borderRadius, ";border-bottom-left-radius:", _core.misc.borderRadius, ";}&[data-error=\"true\"]{border:none;background-color:", _core.colors.support.redLightest, ";padding:", _core.spacing.nsmall, " ", _core.spacing.normal, ";", _core.fonts.sizes("18px", "24px"), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkQnlsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RXVDIiwiZmlsZSI6IkVtYmVkQnlsaW5lLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIG1pc2MsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgV2FybmluZ091dGxpbmUgfSBmcm9tIFwiQG5kbGEvaWNvbnMvY29tbW9uXCI7XG5pbXBvcnQgeyBnZXRMaWNlbnNlQnlBYmJyZXZpYXRpb24sIGdldExpY2Vuc2VDcmVkaXRzIH0gZnJvbSBcIkBuZGxhL2xpY2Vuc2VzXCI7XG5pbXBvcnQgeyBJQ29weXJpZ2h0IGFzIEFydGljbGVDb3B5cmlnaHQgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9hcnRpY2xlLWFwaVwiO1xuaW1wb3J0IHsgSUNvcHlyaWdodCBhcyBBdWRpb0NvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2F1ZGlvLWFwaVwiO1xuaW1wb3J0IHsgSURyYWZ0Q29weXJpZ2h0IGFzIENvbmNlcHRDb3B5cmlnaHQgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9jb25jZXB0LWFwaVwiO1xuaW1wb3J0IHsgSUNvcHlyaWdodCBhcyBJbWFnZUNvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2ltYWdlLWFwaVwiO1xuaW1wb3J0IHsgQnJpZ2h0Y292ZUNvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IExpY2Vuc2VEZXNjcmlwdGlvbiBmcm9tIFwiLi9MaWNlbnNlRGVzY3JpcHRpb25cIjtcbmltcG9ydCBMaWNlbnNlTGluayBmcm9tIFwiLi9MaWNlbnNlTGlua1wiO1xuXG5pbnRlcmZhY2UgQmFzZVByb3BzIHtcbiAgdG9wUm91bmRlZD86IGJvb2xlYW47XG4gIGJvdHRvbVJvdW5kZWQ/OiBib29sZWFuO1xuICBkZXNjcmlwdGlvbj86IFJlYWN0Tm9kZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIHZpc2libGVBbHQ/OiBzdHJpbmc7XG4gIGVycm9yPzogdHJ1ZSB8IGZhbHNlO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEVtYmVkQnlsaW5lRXJyb3JQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IEVtYmVkQnlsaW5lVHlwZVByb3BzW1widHlwZVwiXSB8IFwiaDVwXCIgfCBcImV4dGVybmFsXCI7XG4gIGVycm9yOiB0cnVlO1xufVxuXG5pbnRlcmZhY2UgSW1hZ2VQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwiaW1hZ2VcIjtcbiAgY29weXJpZ2h0OiBJbWFnZUNvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIEJyaWdodGNvdmVQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwidmlkZW9cIjtcbiAgY29weXJpZ2h0OiBCcmlnaHRjb3ZlQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5pbnRlcmZhY2UgQXVkaW9Qcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwiYXVkaW9cIjtcbiAgY29weXJpZ2h0OiBBdWRpb0NvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIFBvZGNhc3RQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwicG9kY2FzdFwiO1xuICBjb3B5cmlnaHQ6IEF1ZGlvQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5pbnRlcmZhY2UgQ29uY2VwdFByb3BzIGV4dGVuZHMgQmFzZVByb3BzIHtcbiAgdHlwZTogXCJjb25jZXB0XCIgfCBcImdsb3NzXCI7XG4gIGNvcHlyaWdodDogQ29uY2VwdENvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIENvcHlyaWdodFByb3BzIGV4dGVuZHMgQmFzZVByb3BzIHtcbiAgdHlwZTogXCJjb3B5cmlnaHRcIjtcbiAgY29weXJpZ2h0OiBBcnRpY2xlQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5leHBvcnQgdHlwZSBFbWJlZEJ5bGluZVR5cGVQcm9wcyA9XG4gIHwgSW1hZ2VQcm9wc1xuICB8IEJyaWdodGNvdmVQcm9wc1xuICB8IEF1ZGlvUHJvcHNcbiAgfCBQb2RjYXN0UHJvcHNcbiAgfCBDb25jZXB0UHJvcHNcbiAgfCBDb3B5cmlnaHRQcm9wcztcblxudHlwZSBQcm9wcyA9IEVtYmVkQnlsaW5lVHlwZVByb3BzIHwgRW1iZWRCeWxpbmVFcnJvclByb3BzO1xuXG5jb25zdCBCeWxpbmVXcmFwcGVyID0gc3R5bGVkLmZpZ2NhcHRpb25gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICAke2ZvbnRzLnNpemVzKFwiMTZweFwiLCBcIjI2cHhcIil9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9IDA7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLndoaXRlfTtcbiAgJltkYXRhLXRvcC1yb3VuZGVkPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5cbiAgJltkYXRhLWJvdHRvbS1yb3VuZGVkPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5cbiAgJltkYXRhLWVycm9yPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkTGlnaHRlc3R9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjRweFwiKX07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgZm9udC1zdHlsZTogaXRhbGljO1xuICBjb2xvcjogZ3JleTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gICR7Zm9udHMuc2l6ZXMoXCIxNnB4XCIsIFwiMjZweFwiKX07XG5gO1xuXG5jb25zdCBFbWJlZEJ5bGluZSA9ICh7IHR5cGUsIHRvcFJvdW5kZWQsIGJvdHRvbVJvdW5kZWQsIGRlc2NyaXB0aW9uLCBjaGlsZHJlbiwgdmlzaWJsZUFsdCwgLi4ucHJvcHMgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuXG4gIGlmIChwcm9wcy5lcnJvcikge1xuICAgIGNvbnN0IHR5cGVTdHJpbmcgPSB0eXBlID09PSBcImg1cFwiID8gXCJINVBcIiA6IHQoYGVtYmVkLnR5cGUuJHt0eXBlfWApLnRvTG93ZXJDYXNlKCk7XG4gICAgcmV0dXJuIChcbiAgICAgIDxCeWxpbmVXcmFwcGVyIGRhdGEtdG9wLXJvdW5kZWQ9e3RvcFJvdW5kZWR9IGRhdGEtYm90dG9tLXJvdW5kZWQ9e2JvdHRvbVJvdW5kZWR9IGRhdGEtZXJyb3I9e3RydWV9PlxuICAgICAgICA8TGljZW5zZURlc2NyaXB0aW9uIHdhcm5pbmdCeWxpbmU9e3Byb3BzLmVycm9yfSBpY29uPXs8V2FybmluZ091dGxpbmUgLz59PlxuICAgICAgICAgIHt0KFwiZW1iZWQuZW1iZWRFcnJvclwiLCB7IHR5cGU6IHR5cGVTdHJpbmcgfSl9XG4gICAgICAgIDwvTGljZW5zZURlc2NyaXB0aW9uPlxuICAgICAgPC9CeWxpbmVXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICBjb25zdCB7IGNvcHlyaWdodCB9ID0gcHJvcHM7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPEJ5bGluZVdyYXBwZXI+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPExpY2Vuc2VDb250YWluZXJDb250ZW50IHR5cGU9e3R5cGV9IGNvcHlyaWdodD17Y29weXJpZ2h0fT5cbiAgICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgICA8L0xpY2Vuc2VDb250YWluZXJDb250ZW50PlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0J5bGluZVdyYXBwZXI+XG4gICAgICB7dmlzaWJsZUFsdCA/IDxTdHlsZWRTcGFuPntgQWx0OiAke3Zpc2libGVBbHR9YH08L1N0eWxlZFNwYW4+IDogbnVsbH1cbiAgICA8Lz5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBMaWNlbnNlQ29udGFpbmVyUHJvcHMge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbiAgY29weXJpZ2h0OiBFbWJlZEJ5bGluZVR5cGVQcm9wc1tcImNvcHlyaWdodFwiXTtcbiAgdHlwZTogUHJvcHNbXCJ0eXBlXCJdO1xufVxuXG5leHBvcnQgY29uc3QgTGljZW5zZUNvbnRhaW5lckNvbnRlbnQgPSAoeyBjaGlsZHJlbiwgY29weXJpZ2h0LCB0eXBlIH06IExpY2Vuc2VDb250YWluZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IHQsIGkxOG4gfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGxpY2Vuc2UgPSBjb3B5cmlnaHQgPyBnZXRMaWNlbnNlQnlBYmJyZXZpYXRpb24oY29weXJpZ2h0LmxpY2Vuc2U/LmxpY2Vuc2UgPz8gXCJcIiwgaTE4bi5sYW5ndWFnZSkgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IGF1dGhvcnMgPSBnZXRMaWNlbnNlQ3JlZGl0cyhjb3B5cmlnaHQpO1xuICBjb25zdCBjYXB0aW9uQXV0aG9ycyA9IE9iamVjdC52YWx1ZXMoYXV0aG9ycykuZmluZCgoaSkgPT4gaS5sZW5ndGggPiAwKSA/PyBbXTtcblxuICBjb25zdCBDb21wb25lbnQgPSBjaGlsZHJlbiA/IExpY2Vuc2VEZXNjcmlwdGlvbiA6IFwic3BhblwiO1xuXG4gIHJldHVybiAoXG4gICAgPENvbXBvbmVudD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtgICR7dChgZW1iZWQudHlwZS4ke3R5cGV9YCl9JHtjYXB0aW9uQXV0aG9ycy5sZW5ndGggPyBcIjogXCIgOiBcIlwifWB9XG4gICAgICB7Y2FwdGlvbkF1dGhvcnMubWFwKChhdXRob3IpID0+IGF1dGhvci5uYW1lKS5qb2luKFwiLCBcIil9XG4gICAgICB7bGljZW5zZSA/IChcbiAgICAgICAgPD5cbiAgICAgICAgICB7XCIgLyBcIn1cbiAgICAgICAgICA8TGljZW5zZUxpbmsgbGljZW5zZT17bGljZW5zZX0gLz5cbiAgICAgICAgPC8+XG4gICAgICApIDogbnVsbH1cbiAgICA8L0NvbXBvbmVudD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEVtYmVkQnlsaW5lO1xuIl19 */"));
-const StyledSpan = /*#__PURE__*/(0, _base.default)("span", {
-  target: "e1087usc0",
-  label: "StyledSpan"
-})("font-style:italic;color:grey;font-family:", _core.fonts.sans, ";", _core.fonts.sizes("16px", "26px"), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkVtYmVkQnlsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxRzhCIiwiZmlsZSI6IkVtYmVkQnlsaW5lLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gXCJyZWFjdC1pMThuZXh0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIG1pc2MsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgV2FybmluZ091dGxpbmUgfSBmcm9tIFwiQG5kbGEvaWNvbnMvY29tbW9uXCI7XG5pbXBvcnQgeyBnZXRMaWNlbnNlQnlBYmJyZXZpYXRpb24sIGdldExpY2Vuc2VDcmVkaXRzIH0gZnJvbSBcIkBuZGxhL2xpY2Vuc2VzXCI7XG5pbXBvcnQgeyBJQ29weXJpZ2h0IGFzIEFydGljbGVDb3B5cmlnaHQgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9hcnRpY2xlLWFwaVwiO1xuaW1wb3J0IHsgSUNvcHlyaWdodCBhcyBBdWRpb0NvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2F1ZGlvLWFwaVwiO1xuaW1wb3J0IHsgSURyYWZ0Q29weXJpZ2h0IGFzIENvbmNlcHRDb3B5cmlnaHQgfSBmcm9tIFwiQG5kbGEvdHlwZXMtYmFja2VuZC9jb25jZXB0LWFwaVwiO1xuaW1wb3J0IHsgSUNvcHlyaWdodCBhcyBJbWFnZUNvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2ltYWdlLWFwaVwiO1xuaW1wb3J0IHsgQnJpZ2h0Y292ZUNvcHlyaWdodCB9IGZyb20gXCJAbmRsYS90eXBlcy1lbWJlZFwiO1xuaW1wb3J0IExpY2Vuc2VEZXNjcmlwdGlvbiBmcm9tIFwiLi9MaWNlbnNlRGVzY3JpcHRpb25cIjtcbmltcG9ydCBMaWNlbnNlTGluayBmcm9tIFwiLi9MaWNlbnNlTGlua1wiO1xuXG5pbnRlcmZhY2UgQmFzZVByb3BzIHtcbiAgdG9wUm91bmRlZD86IGJvb2xlYW47XG4gIGJvdHRvbVJvdW5kZWQ/OiBib29sZWFuO1xuICBkZXNjcmlwdGlvbj86IFJlYWN0Tm9kZTtcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIHZpc2libGVBbHQ/OiBzdHJpbmc7XG4gIGVycm9yPzogdHJ1ZSB8IGZhbHNlO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEVtYmVkQnlsaW5lRXJyb3JQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IEVtYmVkQnlsaW5lVHlwZVByb3BzW1widHlwZVwiXSB8IFwiaDVwXCIgfCBcImV4dGVybmFsXCI7XG4gIGVycm9yOiB0cnVlO1xufVxuXG5pbnRlcmZhY2UgSW1hZ2VQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwiaW1hZ2VcIjtcbiAgY29weXJpZ2h0OiBJbWFnZUNvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIEJyaWdodGNvdmVQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwidmlkZW9cIjtcbiAgY29weXJpZ2h0OiBCcmlnaHRjb3ZlQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5pbnRlcmZhY2UgQXVkaW9Qcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwiYXVkaW9cIjtcbiAgY29weXJpZ2h0OiBBdWRpb0NvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIFBvZGNhc3RQcm9wcyBleHRlbmRzIEJhc2VQcm9wcyB7XG4gIHR5cGU6IFwicG9kY2FzdFwiO1xuICBjb3B5cmlnaHQ6IEF1ZGlvQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5pbnRlcmZhY2UgQ29uY2VwdFByb3BzIGV4dGVuZHMgQmFzZVByb3BzIHtcbiAgdHlwZTogXCJjb25jZXB0XCIgfCBcImdsb3NzXCI7XG4gIGNvcHlyaWdodDogQ29uY2VwdENvcHlyaWdodCB8IHVuZGVmaW5lZDtcbn1cblxuaW50ZXJmYWNlIENvcHlyaWdodFByb3BzIGV4dGVuZHMgQmFzZVByb3BzIHtcbiAgdHlwZTogXCJjb3B5cmlnaHRcIjtcbiAgY29weXJpZ2h0OiBBcnRpY2xlQ29weXJpZ2h0IHwgdW5kZWZpbmVkO1xufVxuXG5leHBvcnQgdHlwZSBFbWJlZEJ5bGluZVR5cGVQcm9wcyA9XG4gIHwgSW1hZ2VQcm9wc1xuICB8IEJyaWdodGNvdmVQcm9wc1xuICB8IEF1ZGlvUHJvcHNcbiAgfCBQb2RjYXN0UHJvcHNcbiAgfCBDb25jZXB0UHJvcHNcbiAgfCBDb3B5cmlnaHRQcm9wcztcblxudHlwZSBQcm9wcyA9IEVtYmVkQnlsaW5lVHlwZVByb3BzIHwgRW1iZWRCeWxpbmVFcnJvclByb3BzO1xuXG5jb25zdCBCeWxpbmVXcmFwcGVyID0gc3R5bGVkLmZpZ2NhcHRpb25gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICAke2ZvbnRzLnNpemVzKFwiMTZweFwiLCBcIjI2cHhcIil9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9IDA7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLndoaXRlfTtcbiAgJltkYXRhLXRvcC1yb3VuZGVkPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICAgIGJvcmRlci10b3AtbGVmdC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5cbiAgJltkYXRhLWJvdHRvbS1yb3VuZGVkPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICAgIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5cbiAgJltkYXRhLWVycm9yPVwidHJ1ZVwiXSB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLnN1cHBvcnQucmVkTGlnaHRlc3R9O1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5uc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjRweFwiKX07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQuc3BhbmBcbiAgZm9udC1zdHlsZTogaXRhbGljO1xuICBjb2xvcjogZ3JleTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gICR7Zm9udHMuc2l6ZXMoXCIxNnB4XCIsIFwiMjZweFwiKX07XG5gO1xuXG5jb25zdCBFbWJlZEJ5bGluZSA9ICh7IHR5cGUsIHRvcFJvdW5kZWQsIGJvdHRvbVJvdW5kZWQsIGRlc2NyaXB0aW9uLCBjaGlsZHJlbiwgdmlzaWJsZUFsdCwgLi4ucHJvcHMgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuXG4gIGlmIChwcm9wcy5lcnJvcikge1xuICAgIGNvbnN0IHR5cGVTdHJpbmcgPSB0eXBlID09PSBcImg1cFwiID8gXCJINVBcIiA6IHQoYGVtYmVkLnR5cGUuJHt0eXBlfWApLnRvTG93ZXJDYXNlKCk7XG4gICAgcmV0dXJuIChcbiAgICAgIDxCeWxpbmVXcmFwcGVyIGRhdGEtdG9wLXJvdW5kZWQ9e3RvcFJvdW5kZWR9IGRhdGEtYm90dG9tLXJvdW5kZWQ9e2JvdHRvbVJvdW5kZWR9IGRhdGEtZXJyb3I9e3RydWV9PlxuICAgICAgICA8TGljZW5zZURlc2NyaXB0aW9uIHdhcm5pbmdCeWxpbmU9e3Byb3BzLmVycm9yfSBpY29uPXs8V2FybmluZ091dGxpbmUgLz59PlxuICAgICAgICAgIHt0KFwiZW1iZWQuZW1iZWRFcnJvclwiLCB7IHR5cGU6IHR5cGVTdHJpbmcgfSl9XG4gICAgICAgIDwvTGljZW5zZURlc2NyaXB0aW9uPlxuICAgICAgPC9CeWxpbmVXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICBjb25zdCB7IGNvcHlyaWdodCB9ID0gcHJvcHM7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPEJ5bGluZVdyYXBwZXI+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPExpY2Vuc2VDb250YWluZXJDb250ZW50IHR5cGU9e3R5cGV9IGNvcHlyaWdodD17Y29weXJpZ2h0fT5cbiAgICAgICAgICAgIHtkZXNjcmlwdGlvbn1cbiAgICAgICAgICA8L0xpY2Vuc2VDb250YWluZXJDb250ZW50PlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0J5bGluZVdyYXBwZXI+XG4gICAgICB7dmlzaWJsZUFsdCA/IDxTdHlsZWRTcGFuPntgQWx0OiAke3Zpc2libGVBbHR9YH08L1N0eWxlZFNwYW4+IDogbnVsbH1cbiAgICA8Lz5cbiAgKTtcbn07XG5cbmludGVyZmFjZSBMaWNlbnNlQ29udGFpbmVyUHJvcHMge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZTtcbiAgY29weXJpZ2h0OiBFbWJlZEJ5bGluZVR5cGVQcm9wc1tcImNvcHlyaWdodFwiXTtcbiAgdHlwZTogUHJvcHNbXCJ0eXBlXCJdO1xufVxuXG5leHBvcnQgY29uc3QgTGljZW5zZUNvbnRhaW5lckNvbnRlbnQgPSAoeyBjaGlsZHJlbiwgY29weXJpZ2h0LCB0eXBlIH06IExpY2Vuc2VDb250YWluZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IHQsIGkxOG4gfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IGxpY2Vuc2UgPSBjb3B5cmlnaHQgPyBnZXRMaWNlbnNlQnlBYmJyZXZpYXRpb24oY29weXJpZ2h0LmxpY2Vuc2U/LmxpY2Vuc2UgPz8gXCJcIiwgaTE4bi5sYW5ndWFnZSkgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IGF1dGhvcnMgPSBnZXRMaWNlbnNlQ3JlZGl0cyhjb3B5cmlnaHQpO1xuICBjb25zdCBjYXB0aW9uQXV0aG9ycyA9IE9iamVjdC52YWx1ZXMoYXV0aG9ycykuZmluZCgoaSkgPT4gaS5sZW5ndGggPiAwKSA/PyBbXTtcblxuICBjb25zdCBDb21wb25lbnQgPSBjaGlsZHJlbiA/IExpY2Vuc2VEZXNjcmlwdGlvbiA6IFwic3BhblwiO1xuXG4gIHJldHVybiAoXG4gICAgPENvbXBvbmVudD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIHtgICR7dChgZW1iZWQudHlwZS4ke3R5cGV9YCl9JHtjYXB0aW9uQXV0aG9ycy5sZW5ndGggPyBcIjogXCIgOiBcIlwifWB9XG4gICAgICB7Y2FwdGlvbkF1dGhvcnMubWFwKChhdXRob3IpID0+IGF1dGhvci5uYW1lKS5qb2luKFwiLCBcIil9XG4gICAgICB7bGljZW5zZSA/IChcbiAgICAgICAgPD5cbiAgICAgICAgICB7XCIgLyBcIn1cbiAgICAgICAgICA8TGljZW5zZUxpbmsgbGljZW5zZT17bGljZW5zZX0gLz5cbiAgICAgICAgPC8+XG4gICAgICApIDogbnVsbH1cbiAgICA8L0NvbXBvbmVudD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEVtYmVkQnlsaW5lO1xuIl19 */"));
+const BylineWrapper = (0, _jsx2.styled)("figcaption", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    paddingBlock: "xsmall",
+    background: "surface.default",
+    textStyle: "label.medium"
+  }
+});
+const ErrorBylineWrapper = (0, _jsx2.styled)(BylineWrapper, {
+  base: {
+    border: "1px solid",
+    borderColor: "stroke.error",
+    borderRadius: "xsmall",
+    background: "surface.dangerSubtle",
+    paddingInline: "medium",
+    paddingBlock: "medium"
+  }
+});
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    fontStyle: "italic"
+  }
+});
+const ContentWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+    alignItems: "center",
+    textStyle: "label.medium"
+  }
+});
+const BaseDescription = (0, _jsx2.styled)("div", {
+  base: {
+    display: "inline-flex",
+    whiteSpace: "pre-wrap"
+  }
+});
 const EmbedByline = _ref => {
   let {
     type,
-    topRounded,
-    bottomRounded,
     description,
     children,
     visibleAlt,
@@ -44,16 +71,15 @@ const EmbedByline = _ref => {
   } = (0, _reactI18next.useTranslation)();
   if (props.error) {
     const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
-    return (0, _jsxRuntime.jsx)(BylineWrapper, {
-      "data-top-rounded": topRounded,
-      "data-bottom-rounded": bottomRounded,
-      "data-error": true,
-      children: (0, _jsxRuntime.jsx)(_LicenseDescription.default, {
-        warningByline: props.error,
-        icon: (0, _jsxRuntime.jsx)(_common.WarningOutline, {}),
-        children: t("embed.embedError", {
-          type: typeString
-        })
+    return (0, _jsxRuntime.jsx)(ErrorBylineWrapper, {
+      children: (0, _jsxRuntime.jsxs)(ContentWrapper, {
+        children: [(0, _jsxRuntime.jsx)(_common.WarningOutline, {}), (0, _jsxRuntime.jsx)(BaseDescription, {
+          children: (0, _jsxRuntime.jsx)("span", {
+            children: t("embed.embedError", {
+              type: typeString
+            })
+          })
+        })]
       })
     });
   }
@@ -69,17 +95,90 @@ const EmbedByline = _ref => {
           children: description
         }), children]
       })
-    }), visibleAlt ? (0, _jsxRuntime.jsx)(StyledSpan, {
-      children: `Alt: ${visibleAlt}`
+    }), visibleAlt ? (0, _jsxRuntime.jsx)(StyledText, {
+      color: "text.subtle",
+      textStyle: "label.medium",
+      asChild: true,
+      consumeCss: true,
+      children: (0, _jsxRuntime.jsx)("span", {
+        children: `Alt: ${visibleAlt}`
+      })
     }) : null]
   });
 };
-const LicenseContainerContent = _ref2 => {
+exports.EmbedByline = EmbedByline;
+const StyledDescription = (0, _jsx2.styled)(BaseDescription, {
+  base: {
+    mobileWideDown: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      alignItems: "center",
+      overflow: "hidden",
+      _open: {
+        display: "inline"
+      }
+    }
+  }
+});
+const TextContent = (0, _jsx2.styled)("span", {
+  base: {
+    mobileWideDown: {
+      whiteSpace: "nowrap",
+      maxHeight: "large",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      transitionProperty: "max-height",
+      transitionDuration: "slow",
+      transitionTimingFunction: "ease-in",
+      _open: {
+        whiteSpace: "pre-wrap",
+        maxHeight: "none"
+      }
+    }
+  }
+});
+const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
+  base: {
+    mobileWide: {
+      display: "none"
+    }
+  }
+});
+const LicenseDescription = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const open = isOpen ? {
+    "data-open": ""
+  } : {};
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  return (0, _jsxRuntime.jsx)(ContentWrapper, {
+    children: (0, _jsxRuntime.jsxs)(StyledDescription, {
+      ...open,
+      children: [(0, _jsxRuntime.jsx)(TextContent, {
+        ...open,
+        children: children
+      }), (0, _jsxRuntime.jsx)(StyledButton, {
+        variant: "link",
+        size: "small",
+        onClick: handleToggle,
+        children: isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`
+      })]
+    })
+  });
+};
+const LicenseContainerContent = _ref3 => {
   let {
     children,
     copyright,
     type
-  } = _ref2;
+  } = _ref3;
   const {
     t,
     i18n
@@ -87,14 +186,25 @@ const LicenseContainerContent = _ref2 => {
   const license = copyright ? (0, _licenses.getLicenseByAbbreviation)(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = (0, _licenses.getLicenseCredits)(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
-  const Component = children ? _LicenseDescription.default : "span";
-  return (0, _jsxRuntime.jsxs)(Component, {
+  const content = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, captionAuthors.map(author => author.name).join(", "), license ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [" / ", (0, _jsxRuntime.jsx)(_LicenseLink.default, {
+      children: [" / ", (0, _jsxRuntime.jsx)(_LicenseLink.LicenseLink, {
         license: license
       })]
     }) : null]
   });
+  if (children) {
+    return (0, _jsxRuntime.jsx)(LicenseDescription, {
+      children: content
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_primitives.Text, {
+    textStyle: "label.medium",
+    asChild: true,
+    consumeCss: true,
+    children: (0, _jsxRuntime.jsx)("span", {
+      children: content
+    })
+  });
 };
-exports.LicenseContainerContent = LicenseContainerContent;
-var _default = exports.default = EmbedByline;
+exports.LicenseContainerContent = LicenseContainerContent;

package/lib/LicenseByline/LicenseLink.d.ts

@@ -9,5 +9,5 @@ import { LicenseLocaleType } from "@ndla/licenses";
 interface Props {
     license: LicenseLocaleType;
 }
-declare const LicenseLink: ({ license }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export default LicenseLink;
+export declare const LicenseLink: ({ license }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/LicenseByline/LicenseLink.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
+exports.LicenseLink = void 0;
 var _safelink = require("@ndla/safelink");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -17,10 +15,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledSafeLink = /*#__PURE__*/(0, _base.default)(_safelink.SafeLink, {
-  target: "ejyopb00",
-  label: "StyledSafeLink"
-})("color:", _core.colors.brand.primary, ";text-decoration:underline;white-space:nowrap;box-shadow:none;&:hover,&:focus-within{text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxpY2Vuc2VMaW5rLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQnVDIiwiZmlsZSI6IkxpY2Vuc2VMaW5rLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgTGljZW5zZUxvY2FsZVR5cGUgfSBmcm9tIFwiQG5kbGEvbGljZW5zZXNcIjtcbmltcG9ydCB7IFNhZmVMaW5rIH0gZnJvbSBcIkBuZGxhL3NhZmVsaW5rXCI7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGxpY2Vuc2U6IExpY2Vuc2VMb2NhbGVUeXBlO1xufVxuXG5jb25zdCBTdHlsZWRTYWZlTGluayA9IHN0eWxlZChTYWZlTGluaylgXG4gIGNvbG9yOiAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIGJveC1zaGFkb3c6IG5vbmU7XG4gICY6aG92ZXIsXG4gICY6Zm9jdXMtd2l0aGluIHtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IExpY2Vuc2VMaW5rID0gKHsgbGljZW5zZSB9OiBQcm9wcykgPT4ge1xuICBpZiAobGljZW5zZS5hYmJyZXZpYXRpb24gPT09IFwidW5rbm93blwiKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cbiAgaWYgKGxpY2Vuc2UudXJsPy5sZW5ndGgpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZFNhZmVMaW5rIHRvPXtsaWNlbnNlLnVybH0gcmVsPVwibGljZW5zZVwiPlxuICAgICAgICB7bGljZW5zZS5hYmJyZXZpYXRpb259XG4gICAgICA8L1N0eWxlZFNhZmVMaW5rPlxuICAgICk7XG4gIH1cbiAgcmV0dXJuIDxzcGFuPntsaWNlbnNlLmFiYnJldmlhdGlvbn08L3NwYW4+O1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTGljZW5zZUxpbms7XG4iXX0= */"));
+const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+  base: {
+    color: "primary",
+    textDecoration: "underline",
+    whiteSpace: "nowrap",
+    _hover: {
+      textDecoration: "none"
+    },
+    _focusWithin: {
+      textDecoration: "none"
+    }
+  }
+});
 const LicenseLink = _ref => {
   let {
     license
@@ -39,4 +46,4 @@ const LicenseLink = _ref => {
     children: license.abbreviation
   });
 };
-var _default = exports.default = LicenseLink;
+exports.LicenseLink = LicenseLink;

package/lib/LicenseByline/index.d.ts

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { default as EmbedByline } from "./EmbedByline";
-export { default as LicenseLink } from "./LicenseLink";
+export { EmbedByline } from "./EmbedByline";
+export { LicenseLink } from "./LicenseLink";

package/lib/LicenseByline/index.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "EmbedByline", {
   enumerable: true,
   get: function () {
-    return _EmbedByline.default;
+    return _EmbedByline.EmbedByline;
   }
 });
 Object.defineProperty(exports, "LicenseLink", {
   enumerable: true,
   get: function () {
-    return _LicenseLink.default;
+    return _LicenseLink.LicenseLink;
   }
 });
-var _EmbedByline = _interopRequireDefault(require("./EmbedByline"));
-var _LicenseLink = _interopRequireDefault(require("./LicenseLink"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _EmbedByline = require("./EmbedByline");
+var _LicenseLink = require("./LicenseLink");

package/lib/index.d.ts

@@ -49,7 +49,6 @@ export type { Snack, SnackContext } from "./SnackBar";
 export { TreeStructure } from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
 export { SearchField, SearchResultList, SearchResultItem, ActiveFilters } from "./Search";
-export { OrderedList, UnOrderedList } from "./List";
 export { BlogPostV2 } from "./BlogPost";
 export { ProgrammeCard } from "./ProgrammeCard";
 export { KeyFigure } from "./KeyFigure";

package/lib/index.js

@@ -429,12 +429,6 @@ Object.defineProperty(exports, "OneColumn", {
     return _Layout.OneColumn;
   }
 });
-Object.defineProperty(exports, "OrderedList", {
-  enumerable: true,
-  get: function () {
-    return _List.OrderedList;
-  }
-});
 Object.defineProperty(exports, "PageContainer", {
   enumerable: true,
   get: function () {
@@ -615,12 +609,6 @@ Object.defineProperty(exports, "TreeStructure", {
     return _TreeStructure.TreeStructure;
   }
 });
-Object.defineProperty(exports, "UnOrderedList", {
-  enumerable: true,
-  get: function () {
-    return _List.UnOrderedList;
-  }
-});
 Object.defineProperty(exports, "UnknownEmbed", {
   enumerable: true,
   get: function () {
@@ -791,7 +779,6 @@ var _TagSelector = require("./TagSelector/TagSelector");
 var _SnackBar = require("./SnackBar");
 var _TreeStructure = require("./TreeStructure");
 var _Search = require("./Search");
-var _List = require("./List");
 var _BlogPost = require("./BlogPost");
 var _ProgrammeCard = require("./ProgrammeCard");
 var _KeyFigure = require("./KeyFigure");

package/lib/styles.css

@@ -73,6 +73,10 @@
     box-shadow: var(--shadows-full);
 }
 
+  .mbe_4xsmall {
+    margin-block-end: var(--spacing-4xsmall);
+}
+
   .ov_hidden {
     overflow: hidden;
 }
@@ -415,6 +419,26 @@
     background: var(--colors-surface-default);
 }
 
+  .bg_surface\.dangerSubtle {
+    background: var(--colors-surface-danger-subtle);
+}
+
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
+  .c_primary {
+    color: var(--colors-primary);
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
   .c_icon\.strong {
     color: var(--colors-icon-strong);
 }
@@ -604,6 +628,10 @@
     font-style: italic;
 }
 
+  .bd-c_stroke\.error {
+    border-color: var(--colors-stroke-error);
+}
+
   .grid-tc_repeat\(2\,_1fr\) {
     grid-template-columns: repeat(2, 1fr);
 }
@@ -926,6 +954,10 @@
     content: "";
 }
 
+  .focusWithin\:td_none:focus-within {
+    text-decoration: none;
+}
+
   .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -1042,6 +1074,9 @@
   @media screen and (min-width: 29.75rem) {
     .mobileWide\:max-w_surface\.medium {
       max-width: var(--sizes-surface-medium);
+}
+    .mobileWide\:d_none {
+      display: none;
 }
 }
 
@@ -1157,8 +1192,59 @@
 }
 
   @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:d_grid {
+      display: grid;
+}
+    .mobileWideDown\:ov_hidden {
+      overflow: hidden;
+}
+    .mobileWideDown\:white-space_nowrap {
+      white-space: nowrap;
+}
+    .mobileWideDown\:max-h_large {
+      max-height: var(--sizes-large);
+}
+    .mobileWideDown\:tov_ellipsis {
+      text-overflow: ellipsis;
+}
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);
+}
+    .mobileWideDown\:grid-tc_1fr_auto {
+      grid-template-columns: 1fr auto;
+}
+    .mobileWideDown\:ai_center {
+      align-items: center;
+}
+    .mobileWideDown\:trs-prop_max-height {
+      --transition-prop: max-height;
+      transition-property: max-height;
+}
+    .mobileWideDown\:trs-dur_slow {
+      --transition-duration: var(--durations-slow);
+      transition-duration: var(--durations-slow);
+}
+    .mobileWideDown\:trs-tmf_ease-in {
+      --transition-easing: ease-in;
+      transition-timing-function: ease-in;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:d_inline:is([open], [data-open], [data-state="open"]) {
+      display: inline;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:white-space_pre-wrap:is([open], [data-open], [data-state="open"]) {
+      white-space: pre-wrap;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"]) {
+      max-height: none;
 }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "55.0.14-alpha.0",
+  "version": "55.0.15-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -37,13 +37,13 @@
     "@ndla/button": "^14.0.7-alpha.0",
     "@ndla/core": "^5.0.1",
     "@ndla/dropdown-menu": "^1.0.38",
-    "@ndla/forms": "^9.0.7-alpha.0",
+    "@ndla/forms": "^9.0.8-alpha.0",
     "@ndla/hooks": "^2.1.8",
     "@ndla/icons": "^7.0.8-alpha.0",
     "@ndla/licenses": "^8.0.0-alpha.0",
     "@ndla/modal": "^7.0.7-alpha.0",
-    "@ndla/primitives": "^0.0.18",
-    "@ndla/safelink": "^6.0.1-alpha.0",
+    "@ndla/primitives": "^0.0.19",
+    "@ndla/safelink": "^6.0.2-alpha.0",
     "@ndla/styled-system": "^0.0.8",
     "@ndla/tooltip": "^8.0.1",
     "@ndla/typography": "^0.4.23",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fdfbed9f18bbd725c837fb74de2f093e80d5605"
+  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
 }

package/src/Article/ArticleByline.tsx

@@ -15,7 +15,7 @@ import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import ArticleFootNotes from "./ArticleFootNotes";
-import LicenseLink from "../LicenseByline/LicenseLink";
+import { LicenseLink } from "../LicenseByline/LicenseLink";
 import { FootNote } from "../types";
 
 const Wrapper = styled.div`

package/src/AudioPlayer/AudioPlayer.tsx

@@ -22,6 +22,7 @@ const AudioPlayerWrapper = styled("div", {
     borderColor: "stroke.default",
     borderRadius: "xsmall",
     boxShadow: "full",
+    marginBlockEnd: "4xsmall",
     overflow: "hidden",
   },
 });

package/src/Concept/Concept.tsx

@@ -12,7 +12,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import { ConceptVisualElementMeta } from "@ndla/types-embed";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
-import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
+import { EmbedByline, LicenseContainerContent } from "../LicenseByline/EmbedByline";
 
 export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
   copyright?: ConceptCopyright;
@@ -66,7 +66,7 @@ export const Concept = forwardRef<HTMLElement, ConceptProps>(
         ) : visualElement?.resource === "external" ? (
           <ExternalEmbed embed={visualElement} />
         ) : null}
-        {copyright && <LicenseContainerContent copyright={copyright} type="concept" />}
+        {copyright && <EmbedByline copyright={copyright} type="concept" />}
       </StyledFigure>
     );
   },

package/src/ContactBlock/ContactBlock.tsx

@@ -18,7 +18,7 @@ import { Image } from "@ndla/primitives";
 import { IAuthor, IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { CanonicalUrlFuncs } from "../Embed";
 import { errorSvgSrc } from "../Embed/ImageEmbed";
-import LicenseLink from "../LicenseByline/LicenseLink";
+import { LicenseLink } from "../LicenseByline/LicenseLink";
 
 const BLOB_WIDTH = 90;
 

package/src/Embed/BrightcoveEmbed.tsx

@@ -113,7 +113,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
           allowFullScreen
         />
       </div>
-      <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription} bottomRounded>
+      <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>
         {/* TODO: Figure out if this button should still be here. If yes, figure out what it should look like. */}
         {!!linkedVideoId && (
           <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>

package/src/Embed/CopyrightEmbed.tsx

@@ -19,7 +19,7 @@ const CopyrightEmbed = ({ embed, children }: Props) => {
   return (
     <figure>
       {children}
-      <EmbedByline type="copyright" copyright={embed.embedData.copyright} bottomRounded />
+      <EmbedByline type="copyright" copyright={embed.embedData.copyright} />
     </figure>
   );
 };