@ndla/ui 34.3.5 → 34.4.0

package/lib/SearchTypeResult/components/ItemTopicHeader.js

@@ -12,18 +12,18 @@ var _ContentTypeBadge = _interopRequireDefault(require("../../ContentTypeBadge")
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var Wrapper = /*#__PURE__*/(0, _base["default"])("div", {
+var Wrapper = /*#__PURE__*/(0, _base["default"])("header", {
   target: "e1kvpkml3",
   label: "Wrapper"
-})("padding:", _core.spacing.small, " ", _core.spacing.normal, ";position:relative;min-height:0;flex:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUIwQiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG5cbiAgLmMtY29udGVudC10eXBlLWJhZGdlIHtcbiAgICB3aWR0aDogMjZweDtcbiAgICBoZWlnaHQ6IDI2cHg7XG4gICAgbWFyZ2luLXJpZ2h0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgfVxuXG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIycHg7XG4gICAgaGVpZ2h0OiAyMnB4O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gIH1cbmA7XG5cbmNvbnN0IFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMTJweDtcbiAgaGVpZ2h0OiAxMTJweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgLXdlYmtpdC1tYXNrLWltYWdlOiAtd2Via2l0LXJhZGlhbC1ncmFkaWVudCh3aGl0ZSwgYmxhY2spO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG9iamVjdC1maXQ6IGNvdmVyO1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+})("padding:", _core.spacing.small, " ", _core.spacing.normal, " 0;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUI2QiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5oZWFkZXJgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgd2lkdGg6IDExMHB4O1xuICBoZWlnaHQ6IDExMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlckltYWdlID0gc3R5bGVkLmltZ2BcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogdW5zZXQ7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBpbWFnZT86IFNlYXJjaEl0ZW1UeXBlWydpdGVtJ11bJ2ltZyddIHwgbnVsbDtcbiAgdHlwZT86IENvbnRlbnRUeXBlO1xufVxuXG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD1cIlwiIC8+XG4gICAgICAgIDwvVG9waWNIZWFkZXJWaXN1YWxFbGVtZW50V3JhcHBlcj5cbiAgICAgICl9XG4gICAgICA8TGFiZWwgY2xhc3NOYW1lPVwidG9waWMtbGFiZWxcIj5cbiAgICAgICAge3R5cGUgJiYgKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8Q29udGVudFR5cGVCYWRnZSB0eXBlPXt0eXBlfSBib3JkZXI9e2ZhbHNlfSAvPlxuICAgICAgICAgICAge3QoYGNvbnRlbnRUeXBlcy4ke3R5cGV9YCl9XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L0xhYmVsPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEl0ZW1Ub3BpY0hlYWRlcjtcbiJdfQ== */"));
 var Label = /*#__PURE__*/(0, _base["default"])("div", {
   target: "e1kvpkml2",
   label: "Label"
-})(_core.fonts.sizes('12px', '16px'), ";font-weight:", _core.fonts.weight.semibold, ";height:26px;display:flex;align-items:center;margin-top:", _core.spacing.small, ";.c-content-type-badge{width:26px;height:26px;margin-right:", _core.spacing.xsmall, ";}svg{width:22px;height:22px;color:", _core.colors.text.primary, "!important;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0J3QiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG5cbiAgLmMtY29udGVudC10eXBlLWJhZGdlIHtcbiAgICB3aWR0aDogMjZweDtcbiAgICBoZWlnaHQ6IDI2cHg7XG4gICAgbWFyZ2luLXJpZ2h0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgfVxuXG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIycHg7XG4gICAgaGVpZ2h0OiAyMnB4O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gIH1cbmA7XG5cbmNvbnN0IFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMTJweDtcbiAgaGVpZ2h0OiAxMTJweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgLXdlYmtpdC1tYXNrLWltYWdlOiAtd2Via2l0LXJhZGlhbC1ncmFkaWVudCh3aGl0ZSwgYmxhY2spO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG9iamVjdC1maXQ6IGNvdmVyO1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+})(_core.fonts.sizes('12px', '16px'), ";font-weight:", _core.fonts.weight.semibold, ";height:26px;display:flex;align-items:center;margin:", _core.spacing.small, " 0;.c-content-type-badge{width:26px;height:26px;margin-right:", _core.spacing.xsmall, ";}svg{width:22px;height:22px;color:", _core.colors.text.primary, "!important;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ3QiIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5oZWFkZXJgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgd2lkdGg6IDExMHB4O1xuICBoZWlnaHQ6IDExMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlckltYWdlID0gc3R5bGVkLmltZ2BcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogdW5zZXQ7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBpbWFnZT86IFNlYXJjaEl0ZW1UeXBlWydpdGVtJ11bJ2ltZyddIHwgbnVsbDtcbiAgdHlwZT86IENvbnRlbnRUeXBlO1xufVxuXG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD1cIlwiIC8+XG4gICAgICAgIDwvVG9waWNIZWFkZXJWaXN1YWxFbGVtZW50V3JhcHBlcj5cbiAgICAgICl9XG4gICAgICA8TGFiZWwgY2xhc3NOYW1lPVwidG9waWMtbGFiZWxcIj5cbiAgICAgICAge3R5cGUgJiYgKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8Q29udGVudFR5cGVCYWRnZSB0eXBlPXt0eXBlfSBib3JkZXI9e2ZhbHNlfSAvPlxuICAgICAgICAgICAge3QoYGNvbnRlbnRUeXBlcy4ke3R5cGV9YCl9XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L0xhYmVsPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEl0ZW1Ub3BpY0hlYWRlcjtcbiJdfQ== */"));
 var TopicHeaderVisualElementWrapper = /*#__PURE__*/(0, _base["default"])("div", {
   target: "e1kvpkml1",
   label: "TopicHeaderVisualElementWrapper"
-})("float:right;margin-left:", _core.spacing.small, ";position:relative;width:112px;height:112px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:50%;-webkit-mask-image:-webkit-radial-gradient(white, black);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNrRCIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG5cbiAgLmMtY29udGVudC10eXBlLWJhZGdlIHtcbiAgICB3aWR0aDogMjZweDtcbiAgICBoZWlnaHQ6IDI2cHg7XG4gICAgbWFyZ2luLXJpZ2h0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgfVxuXG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIycHg7XG4gICAgaGVpZ2h0OiAyMnB4O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gIH1cbmA7XG5cbmNvbnN0IFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMTJweDtcbiAgaGVpZ2h0OiAxMTJweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgLXdlYmtpdC1tYXNrLWltYWdlOiAtd2Via2l0LXJhZGlhbC1ncmFkaWVudCh3aGl0ZSwgYmxhY2spO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG9iamVjdC1maXQ6IGNvdmVyO1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */"));
+})("float:right;margin-left:", _core.spacing.small, ";width:110px;height:110px;display:flex;overflow:hidden;border-radius:50%;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENrRCIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5oZWFkZXJgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgd2lkdGg6IDExMHB4O1xuICBoZWlnaHQ6IDExMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlckltYWdlID0gc3R5bGVkLmltZ2BcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogdW5zZXQ7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBpbWFnZT86IFNlYXJjaEl0ZW1UeXBlWydpdGVtJ11bJ2ltZyddIHwgbnVsbDtcbiAgdHlwZT86IENvbnRlbnRUeXBlO1xufVxuXG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD1cIlwiIC8+XG4gICAgICAgIDwvVG9waWNIZWFkZXJWaXN1YWxFbGVtZW50V3JhcHBlcj5cbiAgICAgICl9XG4gICAgICA8TGFiZWwgY2xhc3NOYW1lPVwidG9waWMtbGFiZWxcIj5cbiAgICAgICAge3R5cGUgJiYgKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8Q29udGVudFR5cGVCYWRnZSB0eXBlPXt0eXBlfSBib3JkZXI9e2ZhbHNlfSAvPlxuICAgICAgICAgICAge3QoYGNvbnRlbnRUeXBlcy4ke3R5cGV9YCl9XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L0xhYmVsPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEl0ZW1Ub3BpY0hlYWRlcjtcbiJdfQ== */"));
 var TopicHeaderImage = /*#__PURE__*/(0, _base["default"])("img", {
   target: "e1kvpkml0",
   label: "TopicHeaderImage"
@@ -33,7 +33,7 @@ var TopicHeaderImage = /*#__PURE__*/(0, _base["default"])("img", {
 } : {
   name: "ua5abx",
   styles: "width:100%;height:100%;object-fit:cover;max-width:unset",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkRtQyIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgbWluLWhlaWdodDogMDtcbiAgZmxleDogMTtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbi10b3A6ICR7c3BhY2luZy5zbWFsbH07XG5cbiAgLmMtY29udGVudC10eXBlLWJhZGdlIHtcbiAgICB3aWR0aDogMjZweDtcbiAgICBoZWlnaHQ6IDI2cHg7XG4gICAgbWFyZ2luLXJpZ2h0OiAke3NwYWNpbmcueHNtYWxsfTtcbiAgfVxuXG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIycHg7XG4gICAgaGVpZ2h0OiAyMnB4O1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gIH1cbmA7XG5cbmNvbnN0IFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBmbG9hdDogcmlnaHQ7XG4gIG1hcmdpbi1sZWZ0OiAke3NwYWNpbmcuc21hbGx9O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMTJweDtcbiAgaGVpZ2h0OiAxMTJweDtcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgLXdlYmtpdC1tYXNrLWltYWdlOiAtd2Via2l0LXJhZGlhbC1ncmFkaWVudCh3aGl0ZSwgYmxhY2spO1xuYDtcblxuY29uc3QgVG9waWNIZWFkZXJJbWFnZSA9IHN0eWxlZC5pbWdgXG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIG9iamVjdC1maXQ6IGNvdmVyO1xuICBtYXgtd2lkdGg6IHVuc2V0O1xuYDtcblxudHlwZSBQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaW1hZ2U/OiBTZWFyY2hJdGVtVHlwZVsnaXRlbSddWydpbWcnXSB8IG51bGw7XG4gIHR5cGU/OiBDb250ZW50VHlwZTtcbn07XG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD17aW1hZ2UuYWx0fSAvPlxuICAgICAgICA8L1RvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICApfVxuICAgICAgPExhYmVsIGNsYXNzTmFtZT1cInRvcGljLWxhYmVsXCI+XG4gICAgICAgIHt0eXBlICYmIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPENvbnRlbnRUeXBlQmFkZ2UgdHlwZT17dHlwZX0gYm9yZGVyPXtmYWxzZX0gLz5cbiAgICAgICAgICAgIHt0KGBjb250ZW50VHlwZXMuJHt0eXBlfWApfVxuICAgICAgICAgIDwvPlxuICAgICAgICApfVxuICAgICAgPC9MYWJlbD5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJdGVtVG9waWNIZWFkZXI7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkl0ZW1Ub3BpY0hlYWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0RtQyIsImZpbGUiOiJJdGVtVG9waWNIZWFkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjEtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNvbG9ycywgZm9udHMsIHNwYWNpbmcgfSBmcm9tICdAbmRsYS9jb3JlJztcblxuaW1wb3J0IHsgU2VhcmNoSXRlbVR5cGUgfSBmcm9tICcuLi9TZWFyY2hJdGVtJztcbmltcG9ydCBDb250ZW50VHlwZUJhZGdlIGZyb20gJy4uLy4uL0NvbnRlbnRUeXBlQmFkZ2UnO1xuaW1wb3J0IHsgQ29udGVudFR5cGUgfSBmcm9tICcuLi9TZWFyY2hUeXBlUmVzdWx0JztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5oZWFkZXJgXG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IExhYmVsID0gc3R5bGVkLmRpdmBcbiAgJHtmb250cy5zaXplcygnMTJweCcsICcxNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBoZWlnaHQ6IDI2cHg7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuXG4gIC5jLWNvbnRlbnQtdHlwZS1iYWRnZSB7XG4gICAgd2lkdGg6IDI2cHg7XG4gICAgaGVpZ2h0OiAyNnB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gIH1cblxuICBzdmcge1xuICAgIHdpZHRoOiAyMnB4O1xuICAgIGhlaWdodDogMjJweDtcbiAgICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fSAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlclZpc3VhbEVsZW1lbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZmxvYXQ6IHJpZ2h0O1xuICBtYXJnaW4tbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgd2lkdGg6IDExMHB4O1xuICBoZWlnaHQ6IDExMHB4O1xuICBkaXNwbGF5OiBmbGV4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG5gO1xuXG5jb25zdCBUb3BpY0hlYWRlckltYWdlID0gc3R5bGVkLmltZ2BcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbiAgb2JqZWN0LWZpdDogY292ZXI7XG4gIG1heC13aWR0aDogdW5zZXQ7XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBpbWFnZT86IFNlYXJjaEl0ZW1UeXBlWydpdGVtJ11bJ2ltZyddIHwgbnVsbDtcbiAgdHlwZT86IENvbnRlbnRUeXBlO1xufVxuXG5jb25zdCBJdGVtVG9waWNIZWFkZXIgPSAoeyBjaGlsZHJlbiwgaW1hZ2UsIHR5cGUgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyPlxuICAgICAge2ltYWdlICYmIChcbiAgICAgICAgPFRvcGljSGVhZGVyVmlzdWFsRWxlbWVudFdyYXBwZXI+XG4gICAgICAgICAgPFRvcGljSGVhZGVySW1hZ2UgY2xhc3NOYW1lPVwidG9waWMtaGVhZGVyLWltYWdlXCIgc3JjPXtpbWFnZS51cmx9IGFsdD1cIlwiIC8+XG4gICAgICAgIDwvVG9waWNIZWFkZXJWaXN1YWxFbGVtZW50V3JhcHBlcj5cbiAgICAgICl9XG4gICAgICA8TGFiZWwgY2xhc3NOYW1lPVwidG9waWMtbGFiZWxcIj5cbiAgICAgICAge3R5cGUgJiYgKFxuICAgICAgICAgIDw+XG4gICAgICAgICAgICA8Q29udGVudFR5cGVCYWRnZSB0eXBlPXt0eXBlfSBib3JkZXI9e2ZhbHNlfSAvPlxuICAgICAgICAgICAge3QoYGNvbnRlbnRUeXBlcy4ke3R5cGV9YCl9XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L0xhYmVsPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEl0ZW1Ub3BpY0hlYWRlcjtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var ItemTopicHeader = function ItemTopicHeader(_ref) {
@@ -47,7 +47,7 @@ var ItemTopicHeader = function ItemTopicHeader(_ref) {
       children: (0, _jsxRuntime.jsx)(TopicHeaderImage, {
         className: "topic-header-image",
         src: image.url,
-        alt: image.alt
+        alt: ""
       })
     }), (0, _jsxRuntime.jsx)(Label, {
       className: "topic-label",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.3.5",
+  "version": "34.4.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -38,9 +38,9 @@
     "@ndla/forms": "^4.2.4",
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.2.2",
-    "@ndla/licenses": "^6.2.1",
-    "@ndla/modal": "^2.2.5",
-    "@ndla/notion": "^4.1.18",
+    "@ndla/licenses": "^7.0.0",
+    "@ndla/modal": "^2.2.6",
+    "@ndla/notion": "^4.2.1",
     "@ndla/safelink": "^4.0.6",
     "@ndla/switch": "^1.0.6",
     "@ndla/tabs": "^2.1.4",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab9996cc9b77cf8c309210d8146c26649f9d990d"
+  "gitHead": "42968ec92ec2338e003ffab02476338f380293b3"
 }

package/src/Article/ArticleByline.tsx

@@ -13,7 +13,8 @@ import { CopyButton, ButtonV2 } from '@ndla/button';
 import { colors, fonts, spacing } from '@ndla/core';
 import { copyTextToClipboard, printPage } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
-import { LicenseByline, getLicenseByAbbreviation } from '@ndla/licenses';
+import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 import { TFunction } from 'i18next';
 
 const Wrapper = styled.div`

package/src/BlogPosts/BlogPost.tsx

@@ -9,7 +9,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, colors, fonts, breakpoints, mq, misc, spacingUnit } from '@ndla/core';
-import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
+import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 import { Launch as LaunchIcon } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -12,7 +12,8 @@ import { spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
-import { BY, CC, LicenseByline } from '@ndla/licenses';
+import { BY, CC } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 import Tooltip from '@ndla/tooltip';
 import CompetenceItem, { ListItemProp } from './CompetenceItem';
 

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -22,16 +22,16 @@ const classes = new BEMHelper({
 });
 
 interface Props {
-  size: 'xx-small' | 'x-small' | 'small' | 'large';
+  size?: 'xx-small' | 'x-small' | 'small' | 'large';
   type: string;
   title?: string;
   background?: boolean;
   border?: boolean;
+  className?: string;
 }
 
-export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true }: Props) => {
+export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true, className }: Props) => {
   const modifiers = [type, size];
-
   if (background) {
     modifiers.push('background');
   }
@@ -71,12 +71,7 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     default:
       break;
   }
-  return <div {...classes('', modifiers)}>{icon}</div>;
-};
-
-ContentTypeBadge.defaultProps = {
-  size: 'small',
-  border: true,
+  return <div {...classes('', modifiers, className)}>{icon}</div>;
 };
 
 export const SubjectMaterialBadge = (props: Omit<Props, 'type'>) => (

package/src/Figure/Figure.tsx

@@ -13,7 +13,7 @@ import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction as isFunctionHelper, parseMarkdown } from '@ndla/util';
 import { Link as LinkIcon } from '@ndla/icons/common';
-import { LicenseByline } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 import SafeLink from '@ndla/safelink';
 import Button from '@ndla/button';
 import { isMobile } from 'react-device-detect';

package/src/Figure/FigureLicense.tsx

@@ -12,7 +12,7 @@
 import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
-import { LicenseDescription } from '@ndla/licenses';
+import { LicenseDescription } from '@ndla/notion';
 import { FigureLicense } from './Figure';
 import { Contributor } from '../types';
 

package/src/LearningPaths/LearningPathInformation.tsx

@@ -9,7 +9,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { fonts, spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
-import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
+import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -10,7 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
 import { spacing, fonts, colors } from '@ndla/core';
-import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
+import { getLicenseByAbbreviation } from '@ndla/licenses';
+import { LicenseByline } from '@ndla/notion';
 
 const StyledLearningPathDetails = styled.div`
   ${fonts.sizes(14, 1.1)};

package/src/MediaList/MediaList.tsx

@@ -8,12 +8,12 @@
 
 import React, { ReactNode } from 'react';
 import {
-  LicenseDescription,
   getLicenseByAbbreviation,
   getResourceTypeNamespace,
   isCreativeCommonsLicense,
   metaTypes,
 } from '@ndla/licenses';
+import { LicenseDescription } from '@ndla/notion';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -59,7 +59,11 @@ export type PaginationType = {
   contentType?: string;
 };
 
-const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '' }: PaginationType) => {
+interface Props extends PaginationType {
+  type?: string;
+}
+
+const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '', type }: Props) => {
   const { t } = useTranslation();
   const isMore = toCount < totalCount;
   const progress = Math.ceil((toCount / totalCount) * 100);
@@ -87,7 +91,7 @@ const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '' }:
         <Progress width={progress} />
       </ProgressBar>
       {isMore ? (
-        <Button className="nav" outline onClick={onShowMore}>
+        <Button className="nav" outline onClick={onShowMore} aria-describedby={`searchitem-header-${type}`}>
           {t('searchPage.resultType.showMore')}
         </Button>
       ) : (

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
 
@@ -20,25 +20,19 @@ import ItemTopicHeader from './components/ItemTopicHeader';
 import ItemResourceHeader from './components/ItemResourceHeader';
 const { contentTypes } = constants;
 
-type ItemTypeProps = {
+interface ItemTypeProps {
   contentType?: ContentType;
   isTopic?: boolean;
-};
+}
 
-const Container = styled.div`
+const Container = styled.article`
+  cursor: pointer;
+  position: relative;
   display: flex;
-  height: 400px;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ItemWrapper = styled.div`
   flex-direction: column;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  border: 1px solid ${colors.brand.neutral7};
   border-radius: 5px;
+  border: 1px solid ${colors.brand.neutral7};
+
   img {
     transition: all ${animations.durations.fast} ease-in-out;
   }
@@ -49,43 +43,36 @@ const ItemWrapper = styled.div`
   }
 `;
 
-const ItemLink = styled(SafeLink)`
-  box-shadow: none;
-  color: unset;
-  text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  min-height: 0;
-  flex: 1;
-`;
-
-const TextWrapper = styled.div`
-  padding: 0 ${spacing.normal} ${spacing.small};
-`;
-
-const ItemTitleWrapper = styled.div<ItemTypeProps>`
-  margin-top: ${spacing.small};
-`;
-
 const ItemTitle = styled.h3<ItemTypeProps>`
+  display: inline;
   ${fonts.sizes('24px', '28px')};
   color: ${colors.brand.primary};
-  ${(props) => props.isTopic && `margin-bottom: ${spacing.small};`};
+  margin-bottom: ${(props) => props.isTopic && spacing.small};
   font-weight: ${fonts.weight.semibold};
-  overflow-wrap: anywhere;
-  display: inline;
-  ${ItemWrapper}:hover & {
-    box-shadow: inset 0 -1px;
-    background-color: transparent;
+  overflow-wrap: break-word;
+  margin: 0;
+  ${Container}:hover & {
+    box-shadow: 0 -1px inset;
+  }
+`;
+
+const StyledLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.brand.primary};
+
+  :after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 `;
+
 const ItemText = styled.div<ItemTypeProps>`
-  overflow: hidden;
   ${fonts.sizes('16px', '24px')};
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  margin-top: ${spacing.small};
   ${(props) =>
     props.isTopic &&
     `
@@ -93,12 +80,14 @@ const ItemText = styled.div<ItemTypeProps>`
     `};
 `;
 
-const ContextWrapper = styled.div`
-  background: white;
-  padding: 0 ${spacing.normal} ${spacing.small};
+const ContentWrapper = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+  padding: ${spacing.small} ${spacing.normal};
 `;
 
-export type SearchItemProps = {
+export interface SearchItemProps {
   id: string | number;
   title: string;
   url: string;
@@ -108,44 +97,39 @@ export type SearchItemProps = {
   labels?: string[];
   type?: ContentType;
   children?: ReactNode;
-};
-export type SearchItemType = {
+}
+
+export interface SearchItemType {
   item: SearchItemProps;
   type?: ContentType;
-};
+}
+
 const SearchItem = ({ item, type }: SearchItemType) => {
-  const { title, url, ingress, contexts, img = null, labels = [], children } = item;
+  const { title, url, ingress, contexts = [], img = null, labels = [] } = item;
+  const linkRef = useRef<HTMLAnchorElement>(null);
 
   const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
 
   return (
     <Container>
-      <ItemWrapper>
-        <ItemLink to={url}>
-          {isTopic ? (
-            <ItemTopicHeader image={img} type={type}>
-              <ItemTitleWrapper isTopic>
-                <ItemTitle isTopic>{title}</ItemTitle>
-              </ItemTitleWrapper>
-              <ItemText isTopic>{parse(ingress)}</ItemText>
-            </ItemTopicHeader>
-          ) : (
-            <>
-              <ItemResourceHeader labels={labels} img={img} type={type} />
-              <TextWrapper>
-                <ItemTitleWrapper>
-                  <ItemTitle>{title}</ItemTitle>
-                </ItemTitleWrapper>
-                <ItemText>{parse(ingress)}</ItemText>
-              </TextWrapper>
-            </>
-          )}
-          <ContextWrapper>
-            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
-          </ContextWrapper>
-        </ItemLink>
-        {children}
-      </ItemWrapper>
+      {isTopic ? (
+        <ItemTopicHeader image={img} type={type}>
+          <StyledLink to={url} ref={linkRef}>
+            <ItemTitle>{title}</ItemTitle>
+          </StyledLink>
+        </ItemTopicHeader>
+      ) : (
+        <ItemResourceHeader labels={labels} img={img} type={type} />
+      )}
+      <ContentWrapper>
+        {!isTopic && (
+          <StyledLink to={url} ref={linkRef}>
+            <ItemTitle>{title}</ItemTitle>
+          </StyledLink>
+        )}
+        <ItemText isTopic={isTopic}>{parse(ingress)}</ItemText>
+        {contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
+      </ContentWrapper>
     </Container>
   );
 };

package/src/SearchTypeResult/SearchItems.tsx

@@ -8,6 +8,7 @@
 
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import SearchItem, { SearchItemProps } from './SearchItem';
 import { ContentType } from './SearchTypeResult';
@@ -18,41 +19,49 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
-type ContainerProps = {
+interface ContainerProps {
   viewType: Props['viewType'];
-};
+}
 
-const Container = styled.div<ContainerProps>`
+const Container = styled.ul<ContainerProps>`
   display: grid;
+  align-items: flex-start;
+  list-style: none;
   row-gap: ${spacing.normal};
   grid-template-columns: repeat(1, 1fr);
 
   ${(props) =>
     props.viewType === 'grid' &&
-    `
-          ${mq.range({ from: breakpoints.tablet })} {
-    column-gap: ${spacing.normal};
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    grid-template-columns: repeat(3, 1fr);
-  }`}
+    css`
+      ${mq.range({ from: breakpoints.tablet })} {
+        column-gap: ${spacing.normal};
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      ${mq.range({ from: breakpoints.desktop })} {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    `}
 `;
 
-type Props = {
+interface Props {
   items: SearchItemProps[];
   type?: ContentType;
   viewType?: 'grid' | 'list';
-};
+}
+
 const SearchItems = ({ items, type, viewType = 'grid' }: Props) => {
   return (
     <Wrapper>
-      <Container viewType={viewType}>
+      <Container aria-labelledby={`searchitem-header-${type}`} viewType={viewType}>
         {items.map((item) => {
           const contentType = type || item.type;
           const Component = viewType === 'list' ? SearchItemList : SearchItem;
-          return <Component item={item} key={`${item.id}`} type={contentType} />;
+          return (
+            <li key={`${item.id}`}>
+              <Component item={item} type={contentType} />
+            </li>
+          );
         })}
       </Container>
     </Wrapper>

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -42,10 +42,13 @@ const BadgeWrapper = styled.span`
   margin-right: ${spacing.small};
 `;
 
-const SubjectName = styled.span`
+const SubjectName = styled.div`
+  display: flex;
+  gap: ${spacing.small};
   ${fonts.sizes('18px', '24px')};
   margin: 2px 0;
-  b {
+  h2 {
+    margin: 0;
     ${fonts.sizes('18px', '24px')};
     margin-right: 4px;
   }
@@ -97,7 +100,9 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
             </BadgeWrapper>
           )}
           <SubjectName>
-            <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
+            <h2 id={`searchitem-header-${type}`}>
+              {type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}
+            </h2>
             {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
           </SubjectName>
         </TypeWrapper>
@@ -107,6 +112,7 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
           {filters.map((option: FilterOptionsType) => (
             <CategoryTypeButtonWrapper key={option.id}>
               <Button
+                aria-current={option.active}
                 size="xsmall"
                 borderShape="rounded"
                 greyLighter={!option.active}

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -16,7 +16,7 @@ import SearchItems from './SearchItems';
 import { SearchItemProps } from './SearchItem';
 import ResultNavigation, { PaginationType } from './ResultNavigation';
 
-const Wrapper = styled.div`
+const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -81,7 +81,7 @@ const SearchTypeResult = ({
     )}
     <SearchTypeHeader onFilterClick={onFilterClick} filters={filters} totalCount={totalCount} type={type} />
     <SearchItems items={items} type={type} viewType={viewType} />
-    {pagination && <ResultNavigation {...pagination} />}
+    {pagination && <ResultNavigation {...pagination} type={type} />}
     {children}
   </Wrapper>
 );

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -11,8 +11,8 @@ import SafeLink from '@ndla/safelink';
 import { Additional, Core } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import Button from '@ndla/button';
-import Modal, { ModalCloseButton } from '@ndla/modal';
+import { ButtonV2 } from '@ndla/button';
+import { ModalV2, ModalCloseButton } from '@ndla/modal';
 import { useTranslation } from 'react-i18next';
 
 const BreadcrumbPath = styled.div`
@@ -24,7 +24,9 @@ const BreadcrumbPath = styled.div`
   }
 `;
 
-const ModalButton = styled(Button)`
+const ModalButton = styled(ButtonV2)`
+  z-index: 1;
+  position: relative;
   ${fonts.sizes('14px', '20px')};
   box-shadow: none;
   &:hover {
@@ -97,19 +99,17 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
     <Breadcrumb breadcrumb={mainContext.breadcrumb}>
       &nbsp;
       {contexts.length > 1 && (
-        <Modal
+        <ModalV2
           label={t('searchPage.contextModal.ariaLabel')}
           activateButton={
-            <ModalButton link>
+            <ModalButton variant="link">
               {t('searchPage.contextModal.button', {
                 count: contexts.length - 1,
               })}
             </ModalButton>
           }
           animation="subtle"
-          animationDuration={50}
-          backgroundColor="white"
-          size="medium">
+          animationDuration={50}>
           {(onClose: () => void) => (
             <>
               <ModalHeader>
@@ -130,7 +130,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
               </ModalContent>
             </>
           )}
-        </Modal>
+        </ModalV2>
       )}
     </Breadcrumb>
   );