@ndla/ui 56.0.42-alpha.0 → 56.0.44-alpha.0

package/dist/panda.buildinfo.json

@@ -120,6 +120,7 @@
       "color]___[value:inherit",
       "alignItems]___[value:flex-end",
       "display]___[value:block]___[cond:tabletDown",
+      "color]___[value:inherit]___[cond:& a<___>_visited",
       "textDecoration]___[value:underline",
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
@@ -142,39 +143,6 @@
       "position]___[value:relative]___[cond:tablet",
       "lineClamp]___[value:4]___[cond:tablet",
       "boxOrient]___[value:vertical]___[cond:tablet",
-      "borderLeft]___[value:4px solid",
-      "borderLeftColor]___[value:stroke.default",
-      "boxSizing]___[value:border-box",
-      "overflowX]___[value:auto",
-      "textStyle]___[value:label.medium",
-      "fontFamily]___[value:code",
-      "display]___[value:block",
-      "whiteSpace]___[value:pre",
-      "display]___[value:inline-block]___[cond:& .linenumber",
-      "paddingBlock]___[value:0]___[cond:& .linenumber",
-      "paddingInline]___[value:small]___[cond:& .linenumber",
-      "borderRight]___[value:1px solid]___[cond:& .linenumber",
-      "borderColor]___[value:stroke.subtle]___[cond:& .linenumber",
-      "width]___[value:xxlarge]___[cond:& .linenumber",
-      "textAlign]___[value:right]___[cond:& .linenumber",
-      "marginInlineEnd]___[value:xsmall]___[cond:& .linenumber",
-      "paddingBlockStart]___[value:xsmall]___[cond:& .linenumber[data-first]",
-      "paddingBlockEnd]___[value:xsmall]___[cond:& .linenumber[data-last]",
-      "color]___[value:#7d8b99]___[cond:& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata",
-      "color]___[value:#5f6364]___[cond:& .token.punctuation",
-      "color]___[value:#c92c2c]___[cond:& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted",
-      "color]___[value:#2f9c0a]___[cond:& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted",
-      "color]___[value:#a67f59]___[cond:& .token.operator, .token.entity, .token.url, .token.variable",
-      "background]___[value:rgba(255, 255, 255, 0.5)]___[cond:& .token.operator, .token.entity, .token.url, .token.variable",
-      "color]___[value:#1990b8]___[cond:& .token.atrule, .token.attr-value, .token.keyword, .token.class-name",
-      "color]___[value:#e90]___[cond:& .token.regex, .token.important",
-      "color]___[value:#a67f59]___[cond:& .language-css .token.string, .style .token.string",
-      "background]___[value:rgba(255, 255, 255, 0.5)]___[cond:& .language-css .token.string, .style .token.string",
-      "fontWeight]___[value:normal]___[cond:& .token.important",
-      "fontWeight]___[value:bold]___[cond:& .token.bold",
-      "fontStyle]___[value:italic]___[cond:& .token.italic",
-      "cursor]___[value:help]___[cond:& .token.entity",
-      "opacity]___[value:0.7]___[cond:& .token.namespace",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
       "minWidth]___[value:surface.xxsmall",
@@ -396,6 +364,7 @@
       "maxWidth]___[value:1024px",
       "minHeight]___[value:100vh",
       "backgroundColor]___[value:#f8f8f8]___[cond:tablet",
+      "textStyle]___[value:label.medium",
       "color]___[value:text.subtle",
       "borderColor]___[value:stroke.error",
       "background]___[value:surface.dangerSubtle",

package/dist/styles.css

@@ -26,19 +26,6 @@
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
-    .textStyle_label\.medium {
-      letter-spacing: normal;
-      font-family: var(--fonts-sans);
-      font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-small);
-      line-height: var(--line-heights-small);
-}
-
-    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
-      font-size: calc(var(--font-sizes-small) * 1.11);
-      line-height: calc(var(--line-heights-small) * 1.11);
-}
-
     .textStyle_label\.large {
       letter-spacing: normal;
       font-family: var(--fonts-sans);
@@ -78,6 +65,19 @@
       line-height: calc(var(--line-heights-large) * 1.11);
 }
 
+    .textStyle_label\.medium {
+      letter-spacing: normal;
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
     .\[\&_a\]\:textStyle_label\.xsmall a {
       letter-spacing: normal;
       font-family: var(--fonts-sans);
@@ -386,22 +386,6 @@
     height: 215px;
 }
 
-  .bd-l_4px_solid {
-    border-left: 4px solid;
-}
-
-  .bx-s_border-box {
-    box-sizing: border-box;
-}
-
-  .d_block {
-    display: block;
-}
-
-  .white-space_pre {
-    white-space: pre;
-}
-
   .d_inline {
     display: inline;
 }
@@ -725,18 +709,6 @@
     background-color: var(--colors-surface-brand-3);
 }
 
-  .bd-l-c_stroke\.default {
-    border-left-color: var(--colors-stroke-default);
-}
-
-  .ov-x_auto {
-    overflow-x: auto;
-}
-
-  .ff_code {
-    font-family: var(--fonts-code);
-}
-
   .jc_flex-start {
     justify-content: flex-start;
 }
@@ -947,90 +919,6 @@
     flex: 1 1 0%;
 }
 
-  .\[\&_\.linenumber\]\:d_inline-block .linenumber {
-    display: inline-block;
-}
-
-  .\[\&_\.linenumber\]\:py_0 .linenumber {
-    padding-block: 0;
-}
-
-  .\[\&_\.linenumber\]\:px_small .linenumber {
-    padding-inline: var(--spacing-small);
-}
-
-  .\[\&_\.linenumber\]\:bd-r_1px_solid .linenumber {
-    border-right: 1px solid;
-}
-
-  .\[\&_\.linenumber\]\:w_xxlarge .linenumber {
-    width: var(--sizes-xxlarge);
-}
-
-  .\[\&_\.linenumber\]\:ta_right .linenumber {
-    text-align: right;
-}
-
-  .\[\&_\.linenumber\]\:me_xsmall .linenumber {
-    margin-inline-end: var(--spacing-xsmall);
-}
-
-  .\[\&_\.linenumber\[data-first\]\]\:pbs_xsmall .linenumber[data-first] {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .\[\&_\.linenumber\[data-last\]\]\:pbe_xsmall .linenumber[data-last] {
-    padding-block-end: var(--spacing-xsmall);
-}
-
-  .\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.block-comment,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.prolog,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.doctype,.\[\&_\.token\.comment\,_\.token\.block-comment\,_\.token\.prolog\,_\.token\.doctype\,_\.token\.cdata\]\:c_\#7d8b99 .token.cdata {
-    color: #7d8b99;
-}
-
-  .\[\&_\.token\.punctuation\]\:c_\#5f6364 .token.punctuation {
-    color: #5f6364;
-}
-
-  .\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.property,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.tag,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.boolean,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.number,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.function-name,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.constant,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.symbol,.\[\&_\.token\.property\,_\.token\.tag\,_\.token\.boolean\,_\.token\.number\,_\.token\.function-name\,_\.token\.constant\,_\.token\.symbol\,_\.token\.deleted\]\:c_\#c92c2c .token.deleted {
-    color: #c92c2c;
-}
-
-  .\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.selector,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.attr-name,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.string,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.char,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.function,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.builtin,.\[\&_\.token\.selector\,_\.token\.attr-name\,_\.token\.string\,_\.token\.char\,_\.token\.function\,_\.token\.builtin\,_\.token\.inserted\]\:c_\#2f9c0a .token.inserted {
-    color: #2f9c0a;
-}
-
-  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:c_\#a67f59 .token.variable {
-    color: #a67f59;
-}
-
-  .\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.operator,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.entity,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.url,.\[\&_\.token\.operator\,_\.token\.entity\,_\.token\.url\,_\.token\.variable\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .token.variable {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-  .\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.atrule,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.attr-value,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.keyword,.\[\&_\.token\.atrule\,_\.token\.attr-value\,_\.token\.keyword\,_\.token\.class-name\]\:c_\#1990b8 .token.class-name {
-    color: #1990b8;
-}
-
-  .\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.regex,.\[\&_\.token\.regex\,_\.token\.important\]\:c_\#e90 .token.important {
-    color: #e90;
-}
-
-  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:c_\#a67f59 .style .token.string {
-    color: #a67f59;
-}
-
-  .\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .language-css .token.string,.\[\&_\.language-css_\.token\.string\,_\.style_\.token\.string\]\:bg_rgba\(255\,_255\,_255\,_0\.5\) .style .token.string {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-  .\[\&_\.token\.entity\]\:cursor_help .token.entity {
-    cursor: help;
-}
-
-  .\[\&_\.token\.namespace\]\:op_0\.7 .token.namespace {
-    opacity: 0.7;
-}
-
   .\[\&_p\]\:d_inline p {
     display: inline;
 }
@@ -1203,22 +1091,6 @@
     content: 0;
 }
 
-  .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
-    border-color: var(--colors-stroke-subtle);
-}
-
-  .\[\&_\.token\.important\]\:fw_normal .token.important {
-    font-weight: var(--font-weights-normal);
-}
-
-  .\[\&_\.token\.bold\]\:fw_bold .token.bold {
-    font-weight: var(--font-weights-bold);
-}
-
-  .\[\&_\.token\.italic\]\:font-style_italic .token.italic {
-    font-style: italic;
-}
-
   .before\:content_\"\"::before {
     content: "";
 }
@@ -1378,6 +1250,10 @@
     border-color: var(--colors-text-link);
 }
 
+  .\[\&_a\]\:visited\:c_inherit a:visited {
+    color: inherit;
+}
+
   .\[\&_button\[data-expanded\=\'true\'\]\]\:\[\&_svg\]\:trf_rotate\(-45deg\) button[data-expanded='true'] svg {
     transform: rotate(-45deg);
 }

package/es/Breadcrumb/BreadcrumbItem.js

@@ -19,6 +19,11 @@ const StyledListItem = styled("li", {
     alignItems: "flex-end",
     tabletDown: {
       display: "block"
+    },
+    "& a": {
+      _visited: {
+        color: "inherit"
+      }
     }
   }
 });

package/es/CodeBlock/CodeBlock.js

@@ -10,79 +10,7 @@ import { forwardRef, useMemo } from "react";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Pre = styled("pre", {
-  base: {
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderLeft: "4px solid",
-    borderLeftColor: "stroke.default",
-    borderRadius: "xsmall",
-    boxSizing: "border-box",
-    overflowX: "auto",
-    textStyle: "label.medium",
-    fontFamily: "code",
-    display: "block",
-    whiteSpace: "pre",
-    "& .linenumber": {
-      display: "inline-block",
-      paddingBlock: "0",
-      paddingInline: "small",
-      borderRight: "1px solid",
-      borderColor: "stroke.subtle",
-      width: "xxlarge",
-      textAlign: "right",
-      marginInlineEnd: "xsmall"
-    },
-    "& .linenumber[data-first]": {
-      paddingBlockStart: "xsmall"
-    },
-    "& .linenumber[data-last]": {
-      paddingBlockEnd: "xsmall"
-    },
-    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
-    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
-      color: "#7d8b99"
-    },
-    "& .token.punctuation": {
-      color: "#5f6364"
-    },
-    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted": {
-      color: "#c92c2c"
-    },
-    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted": {
-      color: "#2f9c0a"
-    },
-    "& .token.operator, .token.entity, .token.url, .token.variable": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)"
-    },
-    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
-      color: "#1990b8"
-    },
-    "& .token.regex, .token.important": {
-      color: "#e90"
-    },
-    "& .language-css .token.string, .style .token.string": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)"
-    },
-    "& .token.important": {
-      fontWeight: "normal"
-    },
-    "& .token.bold": {
-      fontWeight: "bold"
-    },
-    "& .token.italic": {
-      fontStyle: "italic"
-    },
-    "& .token.entity": {
-      cursor: "help"
-    },
-    "& .token.namespace": {
-      opacity: "0.7"
-    }
-  }
-});
+const Pre = styled("pre", {});
 export const Codeblock = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     highlightedCode,
@@ -91,12 +19,12 @@ export const Codeblock = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...props
   } = _ref;
   const codeWithLineNumbers = useMemo(() => {
-    return highlightedCode.split("\n").map((line, i, arr) => {
-      return `<span><span class="linenumber" ${i === 0 ? 'data-first=""' : ""} ${i === arr.length - 1 ? 'data-last=""' : ""}>${i + 1}</span>${line}</span>`;
+    return highlightedCode.split("\n").map((line, i) => {
+      return `<span class="linenumber">${i + 1}</span>${line}`;
     }).join("\n");
   }, [highlightedCode]);
   return /*#__PURE__*/_jsx(Pre, {
-    className: cx(`language-${format}`, className),
+    className: cx("codeblock", `language-${format}`, className),
     ...props,
     dangerouslySetInnerHTML: {
       __html: codeWithLineNumbers

package/es/Embed/IframeEmbed.js

@@ -15,7 +15,8 @@ import { ResourceBox } from "../ResourceBox";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledIframe = styled("iframe", {
   base: {
-    width: "100%"
+    width: "100%",
+    border: 0
   }
 });
 const IframeEmbed = _ref => {
@@ -79,13 +80,8 @@ const IframeEmbed = _ref => {
       "aria-label": urlOrTitle,
       src: url,
       width: strippedWidth,
-      height: strippedHeight
-      // eslint-disable-next-line react/no-unknown-property
-      ,
-      allowFullScreen: true,
-      allow: "encrypted-media",
-      scrolling: "no",
-      frameBorder: "0",
+      height: strippedHeight,
+      allow: "fullscreen; encrypted-media",
       loading: "lazy"
     })
   });

package/es/LicenseByline/EmbedByline.js

@@ -59,7 +59,6 @@ export const EmbedByline = _ref => {
     children,
     visibleAlt,
     hideCopyright,
-    hideDescription,
     ...props
   } = _ref;
   const {
@@ -82,14 +81,14 @@ export const EmbedByline = _ref => {
   const {
     copyright
   } = props;
-  const bylineDescription = hideDescription ? "" : description;
+  const hideByline = hideCopyright && !description;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(BylineWrapper, {
+    children: [!hideByline && /*#__PURE__*/_jsx(BylineWrapper, {
       children: /*#__PURE__*/_jsxs("div", {
-        children: [hideCopyright && bylineDescription, !hideCopyright && /*#__PURE__*/_jsx(LicenseContainerContent, {
+        children: [hideCopyright && description, !hideCopyright && /*#__PURE__*/_jsx(LicenseContainerContent, {
           type: type,
           copyright: copyright,
-          children: bylineDescription
+          children: description
         }), children]
       })
     }), visibleAlt ? /*#__PURE__*/_jsx(StyledText, {

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -25,6 +25,11 @@ const StyledListItem = (0, _jsx2.styled)("li", {
     alignItems: "flex-end",
     tabletDown: {
       display: "block"
+    },
+    "& a": {
+      _visited: {
+        color: "inherit"
+      }
     }
   }
 });

package/lib/CodeBlock/CodeBlock.js

@@ -16,79 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const Pre = (0, _jsx2.styled)("pre", {
-  base: {
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderLeft: "4px solid",
-    borderLeftColor: "stroke.default",
-    borderRadius: "xsmall",
-    boxSizing: "border-box",
-    overflowX: "auto",
-    textStyle: "label.medium",
-    fontFamily: "code",
-    display: "block",
-    whiteSpace: "pre",
-    "& .linenumber": {
-      display: "inline-block",
-      paddingBlock: "0",
-      paddingInline: "small",
-      borderRight: "1px solid",
-      borderColor: "stroke.subtle",
-      width: "xxlarge",
-      textAlign: "right",
-      marginInlineEnd: "xsmall"
-    },
-    "& .linenumber[data-first]": {
-      paddingBlockStart: "xsmall"
-    },
-    "& .linenumber[data-last]": {
-      paddingBlockEnd: "xsmall"
-    },
-    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
-    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
-      color: "#7d8b99"
-    },
-    "& .token.punctuation": {
-      color: "#5f6364"
-    },
-    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted": {
-      color: "#c92c2c"
-    },
-    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted": {
-      color: "#2f9c0a"
-    },
-    "& .token.operator, .token.entity, .token.url, .token.variable": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)"
-    },
-    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
-      color: "#1990b8"
-    },
-    "& .token.regex, .token.important": {
-      color: "#e90"
-    },
-    "& .language-css .token.string, .style .token.string": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)"
-    },
-    "& .token.important": {
-      fontWeight: "normal"
-    },
-    "& .token.bold": {
-      fontWeight: "bold"
-    },
-    "& .token.italic": {
-      fontStyle: "italic"
-    },
-    "& .token.entity": {
-      cursor: "help"
-    },
-    "& .token.namespace": {
-      opacity: "0.7"
-    }
-  }
-});
+const Pre = (0, _jsx2.styled)("pre", {});
 const Codeblock = exports.Codeblock = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     highlightedCode,
@@ -97,12 +25,12 @@ const Codeblock = exports.Codeblock = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     ...props
   } = _ref;
   const codeWithLineNumbers = (0, _react.useMemo)(() => {
-    return highlightedCode.split("\n").map((line, i, arr) => {
-      return `<span><span class="linenumber" ${i === 0 ? 'data-first=""' : ""} ${i === arr.length - 1 ? 'data-last=""' : ""}>${i + 1}</span>${line}</span>`;
+    return highlightedCode.split("\n").map((line, i) => {
+      return `<span class="linenumber">${i + 1}</span>${line}`;
     }).join("\n");
   }, [highlightedCode]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Pre, {
-    className: (0, _css.cx)(`language-${format}`, className),
+    className: (0, _css.cx)("codeblock", `language-${format}`, className),
     ...props,
     dangerouslySetInnerHTML: {
       __html: codeWithLineNumbers

package/lib/Embed/IframeEmbed.js

@@ -22,7 +22,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const StyledIframe = (0, _jsx2.styled)("iframe", {
   base: {
-    width: "100%"
+    width: "100%",
+    border: 0
   }
 });
 const IframeEmbed = _ref => {
@@ -86,13 +87,8 @@ const IframeEmbed = _ref => {
       "aria-label": urlOrTitle,
       src: url,
       width: strippedWidth,
-      height: strippedHeight
-      // eslint-disable-next-line react/no-unknown-property
-      ,
-      allowFullScreen: true,
-      allow: "encrypted-media",
-      scrolling: "no",
-      frameBorder: "0",
+      height: strippedHeight,
+      allow: "fullscreen; encrypted-media",
       loading: "lazy"
     })
   });

package/lib/LicenseByline/EmbedByline.d.ts

@@ -49,7 +49,7 @@ interface CopyrightProps extends BaseProps {
 }
 export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps | CopyrightProps;
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
-export declare const EmbedByline: ({ type, description, children, visibleAlt, hideCopyright, hideDescription, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbedByline: ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 interface LicenseContainerProps {
     children?: ReactNode;
     copyright: EmbedBylineTypeProps["copyright"];

package/lib/LicenseByline/EmbedByline.js

@@ -65,7 +65,6 @@ const EmbedByline = _ref => {
     children,
     visibleAlt,
     hideCopyright,
-    hideDescription,
     ...props
   } = _ref;
   const {
@@ -88,14 +87,14 @@ const EmbedByline = _ref => {
   const {
     copyright
   } = props;
-  const bylineDescription = hideDescription ? "" : description;
+  const hideByline = hideCopyright && !description;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BylineWrapper, {
+    children: [!hideByline && /*#__PURE__*/(0, _jsxRuntime.jsx)(BylineWrapper, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        children: [hideCopyright && bylineDescription, !hideCopyright && /*#__PURE__*/(0, _jsxRuntime.jsx)(LicenseContainerContent, {
+        children: [hideCopyright && description, !hideCopyright && /*#__PURE__*/(0, _jsxRuntime.jsx)(LicenseContainerContent, {
           type: type,
           copyright: copyright,
-          children: bylineDescription
+          children: description
         }), children]
       })
     }), visibleAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {

package/lib/index.d.ts

@@ -37,6 +37,7 @@ export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/Conte
 export { ContentTypeFramedContent } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent/ContentTypeFramedContent";
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
+export type { TagSelectorControlProps, TagSelectorInputProps, TagSelectorRootProps } from "./TagSelector/TagSelector";
 export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTrigger, TagSelectorControl, TagSelectorClearTrigger, TagSelectorInputBase, TagSelectorInput, } from "./TagSelector/TagSelector";
 export { BlogPostV2 } from "./BlogPost";
 export { KeyFigure } from "./KeyFigure";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.42-alpha.0",
+  "version": "56.0.44-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.27-alpha.0",
+    "@ndla/icons": "^8.0.28-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.38-alpha.0",
-    "@ndla/safelink": "^7.0.38-alpha.0",
+    "@ndla/primitives": "^1.0.39-alpha.0",
+    "@ndla/safelink": "^7.0.39-alpha.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.36",
+    "@ndla/preset-panda": "^0.0.37",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.3-alpha.0",
     "@pandacss/dev": "^0.46.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fa8b235f77c036a235f87c3e5875a2e938cb0ccd"
+  "gitHead": "783a77ac565381846c0654a3bd2ccde659a4cef4"
 }

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -34,6 +34,11 @@ const StyledListItem = styled("li", {
     tabletDown: {
       display: "block",
     },
+    "& a": {
+      _visited: {
+        color: "inherit",
+      },
+    },
   },
 });
 

package/src/CodeBlock/CodeBlock.tsx

@@ -16,97 +16,21 @@ interface Props extends JsxStyleProps, ComponentPropsWithRef<"pre"> {
   format: string;
 }
 
-const Pre = styled("pre", {
-  base: {
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderLeft: "4px solid",
-    borderLeftColor: "stroke.default",
-    borderRadius: "xsmall",
-    boxSizing: "border-box",
-    overflowX: "auto",
-    textStyle: "label.medium",
-    fontFamily: "code",
-    display: "block",
-    whiteSpace: "pre",
-    "& .linenumber": {
-      display: "inline-block",
-      paddingBlock: "0",
-      paddingInline: "small",
-      borderRight: "1px solid",
-      borderColor: "stroke.subtle",
-      width: "xxlarge",
-      textAlign: "right",
-      marginInlineEnd: "xsmall",
-    },
-    "& .linenumber[data-first]": {
-      paddingBlockStart: "xsmall",
-    },
-    "& .linenumber[data-last]": {
-      paddingBlockEnd: "xsmall",
-    },
-    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
-    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
-      color: "#7d8b99",
-    },
-    "& .token.punctuation": {
-      color: "#5f6364",
-    },
-    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted":
-      {
-        color: "#c92c2c",
-      },
-    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted":
-      {
-        color: "#2f9c0a",
-      },
-    "& .token.operator, .token.entity, .token.url, .token.variable": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)",
-    },
-    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
-      color: "#1990b8",
-    },
-    "& .token.regex, .token.important": {
-      color: "#e90",
-    },
-    "& .language-css .token.string, .style .token.string": {
-      color: "#a67f59",
-      background: "rgba(255, 255, 255, 0.5)",
-    },
-    "& .token.important": {
-      fontWeight: "normal",
-    },
-    "& .token.bold": {
-      fontWeight: "bold",
-    },
-    "& .token.italic": {
-      fontStyle: "italic",
-    },
-    "& .token.entity": {
-      cursor: "help",
-    },
-    "& .token.namespace": {
-      opacity: "0.7",
-    },
-  },
-});
+const Pre = styled("pre", {});
 
 export const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {
   const codeWithLineNumbers = useMemo(() => {
     return highlightedCode
       .split("\n")
-      .map((line, i, arr) => {
-        return `<span><span class="linenumber" ${i === 0 ? 'data-first=""' : ""} ${
-          i === arr.length - 1 ? 'data-last=""' : ""
-        }>${i + 1}</span>${line}</span>`;
+      .map((line, i) => {
+        return `<span class="linenumber">${i + 1}</span>${line}`;
       })
       .join("\n");
   }, [highlightedCode]);
 
   return (
     <Pre
-      className={cx(`language-${format}`, className)}
+      className={cx("codeblock", `language-${format}`, className)}
       {...props}
       dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}
       ref={ref}

package/src/Embed/IframeEmbed.tsx

@@ -21,6 +21,7 @@ interface Props {
 const StyledIframe = styled("iframe", {
   base: {
     width: "100%",
+    border: 0,
   },
 });
 
@@ -76,11 +77,7 @@ const IframeEmbed = ({ embed }: Props) => {
         src={url}
         width={strippedWidth}
         height={strippedHeight}
-        // eslint-disable-next-line react/no-unknown-property
-        allowFullScreen
-        allow="encrypted-media"
-        scrolling="no"
-        frameBorder="0"
+        allow="fullscreen; encrypted-media"
         loading="lazy"
       />
     </Figure>

package/src/Embed/ImageEmbed.stories.tsx

@@ -154,7 +154,23 @@ export const HiddenCaption: StoryObj<typeof ImageEmbed> = {
       embedData: {
         ...embedData,
         size: "full",
-        hideCaption: "true",
+        caption: "",
+      },
+      data: metaData,
+    },
+  },
+};
+
+export const HiddenBylineAndCaption: StoryObj<typeof ImageEmbed> = {
+  args: {
+    embed: {
+      resource: "image",
+      status: "success",
+      embedData: {
+        ...embedData,
+        size: "full",
+        hideByline: "true",
+        caption: "",
       },
       data: metaData,
     },

package/src/LicenseByline/EmbedByline.tsx

@@ -116,15 +116,7 @@ const BaseDescription = styled("div", {
   },
 });
 
-export const EmbedByline = ({
-  type,
-  description,
-  children,
-  visibleAlt,
-  hideCopyright,
-  hideDescription,
-  ...props
-}: Props) => {
+export const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {
   const { t } = useTranslation();
 
   if (props.error) {
@@ -142,21 +134,23 @@ export const EmbedByline = ({
   }
 
   const { copyright } = props;
-  const bylineDescription = hideDescription ? "" : description;
+  const hideByline = hideCopyright && !description;
 
   return (
     <>
-      <BylineWrapper>
-        <div>
-          {hideCopyright && bylineDescription}
-          {!hideCopyright && (
-            <LicenseContainerContent type={type} copyright={copyright}>
-              {bylineDescription}
-            </LicenseContainerContent>
-          )}
-          {children}
-        </div>
-      </BylineWrapper>
+      {!hideByline && (
+        <BylineWrapper>
+          <div>
+            {hideCopyright && description}
+            {!hideCopyright && (
+              <LicenseContainerContent type={type} copyright={copyright}>
+                {description}
+              </LicenseContainerContent>
+            )}
+            {children}
+          </div>
+        </BylineWrapper>
+      )}
       {visibleAlt ? (
         <StyledText color="text.subtle" textStyle="label.medium" asChild consumeCss>
           <span>{`Alt: ${visibleAlt}`}</span>

package/src/index.ts

@@ -118,6 +118,8 @@ export { type ContentTypeFramedContentVariant } from "./ContentTypeFramedContent
 
 export { default as CopyParagraphButton } from "./CopyParagraphButton";
 
+export type { TagSelectorControlProps, TagSelectorInputProps, TagSelectorRootProps } from "./TagSelector/TagSelector";
+
 export {
   TagSelectorRoot,
   TagSelectorLabel,