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

package/lib/Gloss/GlossExample.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
-var _typography = require("@ndla/typography");
+var _react = require("react");
+var _primitives = require("@ndla/primitives");
+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,57 +16,55 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledGlossExampleWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "ess9y4n2",
-  label: "StyledGlossExampleWrapper"
-})("&[data-is-standalone=\"true\"]{&:first-of-type{border-top:1px solid ", _core.colors.brand.lighter, ";}}&:first-of-type&:not([data-is-standalone=\"true\"]){border-top:1px solid ", _core.colors.brand.primary, ";}&[data-is-standalone=\"false\"]{&:not(:last-child){div{border-bottom:1px solid ", _core.colors.brand.lighter, ";border-radius:0;}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdsb3NzRXhhbXBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I0QyIsImZpbGUiOiJHbG9zc0V4YW1wbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycywgc3BhY2luZywgZm9udHMsIG1pc2MgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgSUdsb3NzRXhhbXBsZSB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2NvbmNlcHQtYXBpXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIkBuZGxhL3R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gIGV4YW1wbGU6IElHbG9zc0V4YW1wbGU7XG4gIG9yaWdpbmFsTGFuZ3VhZ2U6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgaW5kZXg6IG51bWJlcjtcbiAgaXNTdGFuZGFsb25lPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSB7XG4gICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICB9XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUmOm5vdChbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwiZmFsc2VcIl0ge1xuICAgICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgICBkaXYge1xuICAgICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHRlcn07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRHbG9zc0V4YW1wbGUgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmRlZmF1bHR9O1xuICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgYm9yZGVyLXRvcDogbm9uZTtcblxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmxpZ2h0Qmx1ZX07XG4gIH1cbiAgJltkYXRhLWlzLXN0YW5kYWxvbmU9XCJmYWxzZVwiXSB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRUZXh0ID0gc3R5bGVkKFRleHQpYFxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gICAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIH1cbiAgJltkYXRhLXBpbnlpbl0ge1xuICAgIGZvbnQtc3R5bGU6IGl0YWxpYztcbiAgfVxuYDtcblxuY29uc3QgR2xvc3NFeGFtcGxlID0gKHsgZXhhbXBsZSwgb3JpZ2luYWxMYW5ndWFnZSwgaW5kZXgsIGlzU3RhbmRhbG9uZSA9IGZhbHNlIH06IFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEdsb3NzRXhhbXBsZVdyYXBwZXIgZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgPFN0eWxlZEdsb3NzRXhhbXBsZSBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gbGFuZz17ZXhhbXBsZS5sYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgICA8U3R5bGVkVGV4dCBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7ZXhhbXBsZS5leGFtcGxlfVxuICAgICAgICA8L1N0eWxlZFRleHQ+XG4gICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zLnBpbnlpbiAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGVcbiAgICAgICAgICBsYW5nPXtvcmlnaW5hbExhbmd1YWdlfVxuICAgICAgICAgIGRhdGEtaXMtc3RhbmRhbG9uZT17aXNTdGFuZGFsb25lfVxuICAgICAgICAgIGRhdGEtaXMtbGFzdD17ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbD8ubGVuZ3RoID09PSAwfVxuICAgICAgICA+XG4gICAgICAgICAgPFN0eWxlZFRleHQgZGF0YS1waW55aW4gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zPy5waW55aW59XG4gICAgICAgICAgPC9TdHlsZWRUZXh0PlxuICAgICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgICl9XG4gICAgICB7ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbCAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGUgbGFuZz17b3JpZ2luYWxMYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9IGRhdGEtaXMtbGFzdD5cbiAgICAgICAgICA8U3R5bGVkVGV4dCB0ZXh0U3R5bGU9XCJtZXRhLXRleHQtbWVkaXVtXCIgbWFyZ2luPVwibm9uZVwiPlxuICAgICAgICAgICAge2V4YW1wbGUudHJhbnNjcmlwdGlvbnM/LnRyYWRpdGlvbmFsfVxuICAgICAgICAgIDwvU3R5bGVkVGV4dD5cbiAgICAgICAgPC9TdHlsZWRHbG9zc0V4YW1wbGU+XG4gICAgICApfVxuICAgIDwvU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEdsb3NzRXhhbXBsZTtcbiJdfQ== */"));
-const StyledGlossExample = /*#__PURE__*/(0, _base.default)("div", {
-  target: "ess9y4n1",
-  label: "StyledGlossExample"
-})("padding:", _core.spacing.small, " ", _core.spacing.normal, ";background-color:", _core.colors.background.default, ";border:1px solid ", _core.colors.brand.lighter, ";border-top:none;&[data-is-first=\"true\"]{background-color:", _core.colors.background.lightBlue, ";}&[data-is-standalone=\"false\"]{border:none;border-radius:", _core.misc.borderRadius, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdsb3NzRXhhbXBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNxQyIsImZpbGUiOiJHbG9zc0V4YW1wbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycywgc3BhY2luZywgZm9udHMsIG1pc2MgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgSUdsb3NzRXhhbXBsZSB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2NvbmNlcHQtYXBpXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIkBuZGxhL3R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gIGV4YW1wbGU6IElHbG9zc0V4YW1wbGU7XG4gIG9yaWdpbmFsTGFuZ3VhZ2U6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgaW5kZXg6IG51bWJlcjtcbiAgaXNTdGFuZGFsb25lPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSB7XG4gICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICB9XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUmOm5vdChbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwiZmFsc2VcIl0ge1xuICAgICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgICBkaXYge1xuICAgICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHRlcn07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRHbG9zc0V4YW1wbGUgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmRlZmF1bHR9O1xuICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgYm9yZGVyLXRvcDogbm9uZTtcblxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmxpZ2h0Qmx1ZX07XG4gIH1cbiAgJltkYXRhLWlzLXN0YW5kYWxvbmU9XCJmYWxzZVwiXSB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRUZXh0ID0gc3R5bGVkKFRleHQpYFxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gICAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIH1cbiAgJltkYXRhLXBpbnlpbl0ge1xuICAgIGZvbnQtc3R5bGU6IGl0YWxpYztcbiAgfVxuYDtcblxuY29uc3QgR2xvc3NFeGFtcGxlID0gKHsgZXhhbXBsZSwgb3JpZ2luYWxMYW5ndWFnZSwgaW5kZXgsIGlzU3RhbmRhbG9uZSA9IGZhbHNlIH06IFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEdsb3NzRXhhbXBsZVdyYXBwZXIgZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgPFN0eWxlZEdsb3NzRXhhbXBsZSBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gbGFuZz17ZXhhbXBsZS5sYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgICA8U3R5bGVkVGV4dCBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7ZXhhbXBsZS5leGFtcGxlfVxuICAgICAgICA8L1N0eWxlZFRleHQ+XG4gICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zLnBpbnlpbiAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGVcbiAgICAgICAgICBsYW5nPXtvcmlnaW5hbExhbmd1YWdlfVxuICAgICAgICAgIGRhdGEtaXMtc3RhbmRhbG9uZT17aXNTdGFuZGFsb25lfVxuICAgICAgICAgIGRhdGEtaXMtbGFzdD17ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbD8ubGVuZ3RoID09PSAwfVxuICAgICAgICA+XG4gICAgICAgICAgPFN0eWxlZFRleHQgZGF0YS1waW55aW4gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zPy5waW55aW59XG4gICAgICAgICAgPC9TdHlsZWRUZXh0PlxuICAgICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgICl9XG4gICAgICB7ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbCAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGUgbGFuZz17b3JpZ2luYWxMYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9IGRhdGEtaXMtbGFzdD5cbiAgICAgICAgICA8U3R5bGVkVGV4dCB0ZXh0U3R5bGU9XCJtZXRhLXRleHQtbWVkaXVtXCIgbWFyZ2luPVwibm9uZVwiPlxuICAgICAgICAgICAge2V4YW1wbGUudHJhbnNjcmlwdGlvbnM/LnRyYWRpdGlvbmFsfVxuICAgICAgICAgIDwvU3R5bGVkVGV4dD5cbiAgICAgICAgPC9TdHlsZWRHbG9zc0V4YW1wbGU+XG4gICAgICApfVxuICAgIDwvU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEdsb3NzRXhhbXBsZTtcbiJdfQ== */"));
-const StyledText = /*#__PURE__*/(0, _base.default)(_typography.Text, {
-  target: "ess9y4n0",
-  label: "StyledText"
-})("&[data-is-first=\"true\"]{font-weight:", _core.fonts.weight.bold, ";color:", _core.colors.text.primary, ";}&[data-pinyin]{font-style:italic;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdsb3NzRXhhbXBsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0QrQiIsImZpbGUiOiJHbG9zc0V4YW1wbGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNvbG9ycywgc3BhY2luZywgZm9udHMsIG1pc2MgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IHsgSUdsb3NzRXhhbXBsZSB9IGZyb20gXCJAbmRsYS90eXBlcy1iYWNrZW5kL2NvbmNlcHQtYXBpXCI7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSBcIkBuZGxhL3R5cG9ncmFwaHlcIjtcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gIGV4YW1wbGU6IElHbG9zc0V4YW1wbGU7XG4gIG9yaWdpbmFsTGFuZ3VhZ2U6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgaW5kZXg6IG51bWJlcjtcbiAgaXNTdGFuZGFsb25lPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSB7XG4gICAgJjpmaXJzdC1vZi10eXBlIHtcbiAgICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgICB9XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUmOm5vdChbZGF0YS1pcy1zdGFuZGFsb25lPVwidHJ1ZVwiXSkge1xuICAgIGJvcmRlci10b3A6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5wcmltYXJ5fTtcbiAgfVxuXG4gICZbZGF0YS1pcy1zdGFuZGFsb25lPVwiZmFsc2VcIl0ge1xuICAgICY6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgICBkaXYge1xuICAgICAgICBib3JkZXItYm90dG9tOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHRlcn07XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRHbG9zc0V4YW1wbGUgPSBzdHlsZWQuZGl2YFxuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmRlZmF1bHR9O1xuICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodGVyfTtcbiAgYm9yZGVyLXRvcDogbm9uZTtcblxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5iYWNrZ3JvdW5kLmxpZ2h0Qmx1ZX07XG4gIH1cbiAgJltkYXRhLWlzLXN0YW5kYWxvbmU9XCJmYWxzZVwiXSB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRUZXh0ID0gc3R5bGVkKFRleHQpYFxuICAmW2RhdGEtaXMtZmlyc3Q9XCJ0cnVlXCJdIHtcbiAgICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gICAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIH1cbiAgJltkYXRhLXBpbnlpbl0ge1xuICAgIGZvbnQtc3R5bGU6IGl0YWxpYztcbiAgfVxuYDtcblxuY29uc3QgR2xvc3NFeGFtcGxlID0gKHsgZXhhbXBsZSwgb3JpZ2luYWxMYW5ndWFnZSwgaW5kZXgsIGlzU3RhbmRhbG9uZSA9IGZhbHNlIH06IFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEdsb3NzRXhhbXBsZVdyYXBwZXIgZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgPFN0eWxlZEdsb3NzRXhhbXBsZSBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gbGFuZz17ZXhhbXBsZS5sYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9PlxuICAgICAgICA8U3R5bGVkVGV4dCBkYXRhLWlzLWZpcnN0PXtpbmRleCA9PT0gMH0gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7ZXhhbXBsZS5leGFtcGxlfVxuICAgICAgICA8L1N0eWxlZFRleHQ+XG4gICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zLnBpbnlpbiAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGVcbiAgICAgICAgICBsYW5nPXtvcmlnaW5hbExhbmd1YWdlfVxuICAgICAgICAgIGRhdGEtaXMtc3RhbmRhbG9uZT17aXNTdGFuZGFsb25lfVxuICAgICAgICAgIGRhdGEtaXMtbGFzdD17ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbD8ubGVuZ3RoID09PSAwfVxuICAgICAgICA+XG4gICAgICAgICAgPFN0eWxlZFRleHQgZGF0YS1waW55aW4gdGV4dFN0eWxlPVwibWV0YS10ZXh0LW1lZGl1bVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICAgIHtleGFtcGxlLnRyYW5zY3JpcHRpb25zPy5waW55aW59XG4gICAgICAgICAgPC9TdHlsZWRUZXh0PlxuICAgICAgICA8L1N0eWxlZEdsb3NzRXhhbXBsZT5cbiAgICAgICl9XG4gICAgICB7ZXhhbXBsZS50cmFuc2NyaXB0aW9ucy50cmFkaXRpb25hbCAmJiAoXG4gICAgICAgIDxTdHlsZWRHbG9zc0V4YW1wbGUgbGFuZz17b3JpZ2luYWxMYW5ndWFnZX0gZGF0YS1pcy1zdGFuZGFsb25lPXtpc1N0YW5kYWxvbmV9IGRhdGEtaXMtbGFzdD5cbiAgICAgICAgICA8U3R5bGVkVGV4dCB0ZXh0U3R5bGU9XCJtZXRhLXRleHQtbWVkaXVtXCIgbWFyZ2luPVwibm9uZVwiPlxuICAgICAgICAgICAge2V4YW1wbGUudHJhbnNjcmlwdGlvbnM/LnRyYWRpdGlvbmFsfVxuICAgICAgICAgIDwvU3R5bGVkVGV4dD5cbiAgICAgICAgPC9TdHlsZWRHbG9zc0V4YW1wbGU+XG4gICAgICApfVxuICAgIDwvU3R5bGVkR2xvc3NFeGFtcGxlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEdsb3NzRXhhbXBsZTtcbiJdfQ== */"));
+const StyledGlossExample = (0, _jsx2.styled)("div", {
+  base: {
+    borderTop: "1px solid",
+    borderColor: "stroke.subtle",
+    paddingBlock: "xsmall",
+    paddingInline: "medium",
+    _first: {
+      background: "surface.brand.1.subtle",
+      borderColor: "stroke.default",
+      "& p": {
+        fontWeight: "bold"
+      }
+    }
+  }
+});
+const PinyinText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    fontStyle: "italic"
+  }
+});
 const GlossExample = _ref => {
   let {
-    example,
-    originalLanguage,
-    index,
-    isStandalone = false
+    examples,
+    originalLanguage
   } = _ref;
-  return (0, _jsxRuntime.jsxs)(StyledGlossExampleWrapper, {
-    "data-is-standalone": isStandalone,
-    children: [(0, _jsxRuntime.jsx)(StyledGlossExample, {
-      "data-is-first": index === 0,
-      lang: example.language,
-      "data-is-standalone": isStandalone,
-      children: (0, _jsxRuntime.jsx)(StyledText, {
-        "data-is-first": index === 0,
-        textStyle: "meta-text-medium",
-        margin: "none",
-        children: example.example
-      })
-    }), example.transcriptions.pinyin && (0, _jsxRuntime.jsx)(StyledGlossExample, {
-      lang: originalLanguage,
-      "data-is-standalone": isStandalone,
-      "data-is-last": example.transcriptions.traditional?.length === 0,
-      children: (0, _jsxRuntime.jsx)(StyledText, {
-        "data-pinyin": true,
-        textStyle: "meta-text-medium",
-        margin: "none",
-        children: example.transcriptions?.pinyin
-      })
-    }), example.transcriptions.traditional && (0, _jsxRuntime.jsx)(StyledGlossExample, {
-      lang: originalLanguage,
-      "data-is-standalone": isStandalone,
-      "data-is-last": true,
-      children: (0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "meta-text-medium",
-        margin: "none",
-        children: example.transcriptions?.traditional
-      })
-    })]
+  return (0, _jsxRuntime.jsx)("div", {
+    children: examples.map((examples, index) => (0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(StyledGlossExample, {
+        lang: examples.language,
+        children: (0, _jsxRuntime.jsx)(_primitives.Text, {
+          textStyle: "label.medium",
+          lang: examples.language,
+          children: examples.example
+        })
+      }), !!examples.transcriptions.pinyin && (0, _jsxRuntime.jsx)(StyledGlossExample, {
+        children: (0, _jsxRuntime.jsx)(PinyinText, {
+          "data-pinyin": "",
+          lang: originalLanguage,
+          textStyle: "label.medium",
+          children: examples.transcriptions?.pinyin
+        })
+      }), !!examples.transcriptions?.traditional && (0, _jsxRuntime.jsx)(StyledGlossExample, {
+        children: (0, _jsxRuntime.jsx)(_primitives.Text, {
+          textStyle: "label.medium",
+          lang: originalLanguage,
+          children: examples.transcriptions.traditional
+        })
+      })]
+    }, index))
   });
 };
 var _default = exports.default = GlossExample;

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");