@ndla/ui 16.0.0 → 16.2.0

package/es/index.js

@@ -30,7 +30,7 @@ export { default as FactBox } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero } from './Hero';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';

package/es/locale/messages-en.js

@@ -312,7 +312,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'This resource is accessible only to teachers who are logged in with Feide.',
     resources: 'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
-    subjectBeta: 'This course is in beta.',
+    subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion: 'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta: 'Revised subjects have been revised in accordance with the new curriculum that will be put into effect from August 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
     frontPageExpired: 'Expired subjects are not being taught any longer, but it may still be possible to take exams in these subjects.',

package/es/locale/messages-nb.js

@@ -312,7 +312,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/es/locale/messages-nn.js

@@ -312,7 +312,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
     resources: 'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion: 'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
     frontPageBeta: 'Kommande fag er tilpassa ny læreplan som gjeld fra hausten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursane i betafaga kan vere nyttige allereie no.',
     frontPageExpired: 'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.',

package/es/locale/messages-se.js

@@ -312,7 +312,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/es/locale/messages-sma.js

@@ -312,7 +312,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/lib/Breadcrumblist/index.d.ts

@@ -1,2 +1,3 @@
 import Breadcrumblist from './Breadcrumblist';
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export default Breadcrumblist;

package/lib/NDLAFilm/CategorySelect.js

@@ -5,27 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
 
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _focusTrapReact = _interopRequireDefault(require("focus-trap-react"));
 
-var _common = require("@ndla/icons/common");
+var _core = require("@emotion/core");
 
-var _reactI18next = require("react-i18next");
+var _core2 = require("@ndla/core");
 
-var _core = require("@emotion/core");
+var _common = require("@ndla/icons/common");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _reactI18next = require("react-i18next");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -49,10 +49,37 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var classes = new _reactBemHelper["default"]({
-  name: 'film-moviesearch',
-  prefix: 'c-'
-});
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["\n  0% {\n    display: none;\n    opacity: 0;\n  }\n  1% {\n    display: flex;\n    transform: scale3d(0.95, 0.95, 0.95);\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n    transform: scale3d(1, 1, 1);\n  }\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var zoomInSelect = (0, _core.keyframes)(_templateObject());
+var DropdownContainer = (0, _styledBase["default"])("div", {
+  target: "e10i3sm20",
+  label: "DropdownContainer"
+})("position:relative;margin:0 0 ", _core2.spacing.normal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhdGVnb3J5U2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5Qm9DIiwiZmlsZSI6IkNhdGVnb3J5U2VsZWN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgRm9jdXNUcmFwUmVhY3QgZnJvbSAnZm9jdXMtdHJhcC1yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQ2hldnJvbkRvd24gfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgV2l0aFRyYW5zbGF0aW9uLCB3aXRoVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IE1vdmllUmVzb3VyY2VUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IHpvb21JblNlbGVjdCA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxJSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlM2QoMC45NSwgMC45NSwgMC45NSk7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxMDAlIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHRyYW5zZm9ybTogc2NhbGUzZCgxLCAxLCAxKTtcbiAgfVxuYDtcblxuY29uc3QgRHJvcGRvd25Db250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogMCAwICR7c3BhY2luZy5ub3JtYWx9O1xuYDtcblxuY29uc3QgRHJvcGRvd25CdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICR7Zm9udHMuc2l6ZXMoJzIycHgnLCAnMjZweCcpfTtcbiAgYm9yZGVyOiAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBiYWNrZ3JvdW5kOiAke2NvbG9ycy5uZGxhRmlsbS5maWxtQ29sb3JCcmlnaHR9O1xuICBjb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5uc21hbGx9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHdpZHRoOiAxMDAlO1xuICBsZXR0ZXItc3BhY2luZzogMC4wNWVtO1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICBkaXY6Zmlyc3QtY2hpbGQge1xuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgIHNtYWxsIHtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgc21hbGwge1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgRHJvcGRvd25XcmFwcGVyUHJvcHMge1xuICBvZmZzZXREcm9wZG93bjogbnVtYmVyO1xufVxuXG5jb25zdCBEcm9wZG93bldyYXBwZXIgPSBzdHlsZWQuZGl2PERyb3Bkb3duV3JhcHBlclByb3BzPmBcbiAgdG9wOiAtJHsocHJvcHMpID0+IHByb3BzLm9mZnNldERyb3Bkb3duICogNTIgKyAxM31weDtcbiAgJHtEcm9wZG93bkJ1dHRvbn0ge1xuICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgdGV4dC10cmFuc2Zvcm06IDA7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIH1cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcGFkZGluZzogJHNwYWNpbmctLXNtYWxsIDA7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLmxpZ2h0ZXJ9O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBhbmltYXRpb246ICR7em9vbUluU2VsZWN0fSAyMDBtcyBlYXNlO1xuICBib3gtc2hhZG93OiAwIDAgMzBweCByZ2JhKCR7Y29sb3JzLmJsYWNrfSwgMC42KTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiA5OTk5O1xuICBidXR0b24sXG4gIGEge1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGJvcmRlcjogMDtcbiAgICBvdXRsaW5lOiAwO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAyMDBtcyBlYXNlO1xuICAgICY6aG92ZXIsXG4gICAgJjpmb2N1cyB7XG4gICAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gICAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMik7XG4gICAgfVxuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBXaXRoVHJhbnNsYXRpb24ge1xuICByZXNvdXJjZVR5cGVzOiBNb3ZpZVJlc291cmNlVHlwZVtdO1xuICByZXNvdXJjZVR5cGVTZWxlY3RlZD86IE1vdmllUmVzb3VyY2VUeXBlO1xuICBhcmlhQ29udHJvbElkPzogc3RyaW5nO1xuICBvbkNoYW5nZVJlc291cmNlVHlwZTogKHJlc291cmNlSWQ/OiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmludGVyZmFjZSBTdGF0ZSB7XG4gIHJlc291cmNlVHlwZXNJc09wZW46IGJvb2xlYW47XG59XG5jbGFzcyBDYXRlZ29yeVNlbGVjdCBleHRlbmRzIENvbXBvbmVudDxQcm9wcywgU3RhdGU+IHtcbiAgcmVmZXJlbmNlczogUmVjb3JkPHN0cmluZywgSFRNTEJ1dHRvbkVsZW1lbnQgfCBudWxsPjtcbiAgY29uc3RydWN0b3IocHJvcHM6IFByb3BzKSB7XG4gICAgc3VwZXIocHJvcHMpO1xuICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSxcbiAgICB9O1xuICAgIHRoaXMucmVmZXJlbmNlcyA9IHt9O1xuICAgIHRoaXMuY3JlYXRlUmVmID0gdGhpcy5jcmVhdGVSZWYuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9wZW5TZWxlY3QgPSB0aGlzLm9wZW5TZWxlY3QuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9uU2VsZWN0ID0gdGhpcy5vblNlbGVjdC5iaW5kKHRoaXMpO1xuICB9XG5cbiAgY3JlYXRlUmVmKGVsOiBIVE1MQnV0dG9uRWxlbWVudCB8IG51bGwsIG5hbWU6IHN0cmluZykge1xuICAgIHRoaXMucmVmZXJlbmNlc1tuYW1lXSA9IGVsO1xuICB9XG5cbiAgb3BlblNlbGVjdCgpIHtcbiAgICBjb25zdCB7IHJlc291cmNlVHlwZVNlbGVjdGVkIH0gPSB0aGlzLnByb3BzO1xuICAgIHRoaXMuc2V0U3RhdGUoXG4gICAgICB7XG4gICAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IHRydWUsXG4gICAgICB9LFxuICAgICAgKCkgPT4ge1xuICAgICAgICBpZiAocmVzb3VyY2VUeXBlU2VsZWN0ZWQgJiYgdGhpcy5yZWZlcmVuY2VzW3Jlc291cmNlVHlwZVNlbGVjdGVkLmlkXSkge1xuICAgICAgICAgIHRoaXMucmVmZXJlbmNlc1tyZXNvdXJjZVR5cGVTZWxlY3RlZC5pZF0/LmZvY3VzKCk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgKTtcbiAgfVxuXG4gIG9uU2VsZWN0KHZhbD86IHN0cmluZykge1xuICAgIHRoaXMucHJvcHMub25DaGFuZ2VSZXNvdXJjZVR5cGUodmFsKTtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IGZhbHNlLFxuICAgIH0pO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgcmVzb3VyY2VUeXBlcywgcmVzb3VyY2VUeXBlU2VsZWN0ZWQsIGFyaWFDb250cm9sSWQsIHQgfSA9IHRoaXMucHJvcHM7XG4gICAgY29uc3QgeyByZXNvdXJjZVR5cGVzSXNPcGVuIH0gPSB0aGlzLnN0YXRlO1xuICAgIGNvbnN0IG9mZnNldERyb3BEb3duID0gcmVzb3VyY2VUeXBlU2VsZWN0ZWRcbiAgICAgID8gcmVzb3VyY2VUeXBlcy5maW5kSW5kZXgoKHJlc291cmNlKSA9PiByZXNvdXJjZS5pZCA9PT0gcmVzb3VyY2VUeXBlU2VsZWN0ZWQuaWQpICsgMVxuICAgICAgOiAwO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxEcm9wZG93bkNvbnRhaW5lciBjbGFzc05hbWU9XCJ1LTEyLzEyXCI+XG4gICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9eyFyZXNvdXJjZVR5cGVzSXNPcGVufVxuICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJzZWxlY3RDYXRlZ29yeVwiXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgdGFiSW5kZXg9e3Jlc291cmNlVHlwZXNJc09wZW4gPyAtMSA6IDB9XG4gICAgICAgICAgb25DbGljaz17dGhpcy5vcGVuU2VsZWN0fT5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jaG9vc2VDYXRlZ29yeScpfTwvc3Bhbj5cbiAgICAgICAgICAgIDxzbWFsbD5cbiAgICAgICAgICAgICAgeyhyZXNvdXJjZVR5cGVTZWxlY3RlZCAmJiByZXNvdXJjZVR5cGVTZWxlY3RlZC5uYW1lKSB8fCB0KCduZGxhRmlsbS5zZWFyY2guY2F0ZWdvcnlGcm9tTmRsYScpfVxuICAgICAgICAgICAgPC9zbWFsbD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPENoZXZyb25Eb3duIGNsYXNzTmFtZT1cImMtaWNvbi0tMjJcIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICB7cmVzb3VyY2VUeXBlc0lzT3BlbiAmJiAoXG4gICAgICAgICAgPEZvY3VzVHJhcFJlYWN0XG4gICAgICAgICAgICBhY3RpdmU9e3Jlc291cmNlVHlwZXNJc09wZW59XG4gICAgICAgICAgICBmb2N1c1RyYXBPcHRpb25zPXt7XG4gICAgICAgICAgICAgIG9uRGVhY3RpdmF0ZTogKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuc2V0U3RhdGUoeyByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSB9KTtcbiAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgY2xpY2tPdXRzaWRlRGVhY3RpdmF0ZXM6IHRydWUsXG4gICAgICAgICAgICAgIGVzY2FwZURlYWN0aXZhdGVzOiB0cnVlLFxuICAgICAgICAgICAgfX0+XG4gICAgICAgICAgICA8RHJvcGRvd25XcmFwcGVyIGlkPVwic2VsZWN0Q2F0ZWdvcnlcIiBvZmZzZXREcm9wZG93bj17b2Zmc2V0RHJvcERvd259PlxuICAgICAgICAgICAgICA8RHJvcGRvd25CdXR0b24gYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH0gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9eygpID0+IHRoaXMub25TZWxlY3QoKX0+XG4gICAgICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jYXRlZ29yeUZyb21OZGxhJyl9PC9zcGFuPlxuICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICB7cmVzb3VyY2VUeXBlcy5tYXAoKHJlc291cmNlVHlwZSkgPT4gKFxuICAgICAgICAgICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgICAgICAgICAgYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH1cbiAgICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgICAgcmVmPXsoZWwpID0+IHRoaXMuY3JlYXRlUmVmKGVsLCByZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gdGhpcy5vblNlbGVjdChyZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgZGF0YS1pZD17cmVzb3VyY2VUeXBlLmlkfVxuICAgICAgICAgICAgICAgICAga2V5PXtyZXNvdXJjZVR5cGUuaWR9PlxuICAgICAgICAgICAgICAgICAgPHNwYW4+e3Jlc291cmNlVHlwZS5uYW1lfTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIDwvRHJvcGRvd25XcmFwcGVyPlxuICAgICAgICAgIDwvRm9jdXNUcmFwUmVhY3Q+XG4gICAgICAgICl9XG4gICAgICA8L0Ryb3Bkb3duQ29udGFpbmVyPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgd2l0aFRyYW5zbGF0aW9uKCkoQ2F0ZWdvcnlTZWxlY3QpO1xuIl19 */"));
+var DropdownButton = (0, _styledBase["default"])("button", {
+  target: "e10i3sm21",
+  label: "DropdownButton"
+})("border-radius:4px;", _core2.fonts.sizes('22px', '26px'), ";border:0;text-transform:uppercase;background:", _core2.colors.ndlaFilm.filmColorBright, ";color:", _core2.colors.white, ";padding:", _core2.spacing.small, " ", _core2.spacing.nsmall, ";font-weight:", _core2.fonts.weight.semibold, ";display:flex;align-items:center;text-align:left;justify-content:space-between;width:100%;letter-spacing:0.05em;", _core2.mq.range({
+  from: _core2.breakpoints.tablet
+}), "{padding:", _core2.spacing.small, " ", _core2.spacing.normal, ";}div:first-child{", _core2.mq.range({
+  until: _core2.breakpoints.tablet
+}), "{display:flex;flex-direction:column;small{padding:0;}}}small{text-transform:none;padding-left:", _core2.spacing.small, ";font-weight:normal;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhdGVnb3J5U2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4Qm9DIiwiZmlsZSI6IkNhdGVnb3J5U2VsZWN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgRm9jdXNUcmFwUmVhY3QgZnJvbSAnZm9jdXMtdHJhcC1yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQ2hldnJvbkRvd24gfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgV2l0aFRyYW5zbGF0aW9uLCB3aXRoVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IE1vdmllUmVzb3VyY2VUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IHpvb21JblNlbGVjdCA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxJSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlM2QoMC45NSwgMC45NSwgMC45NSk7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxMDAlIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHRyYW5zZm9ybTogc2NhbGUzZCgxLCAxLCAxKTtcbiAgfVxuYDtcblxuY29uc3QgRHJvcGRvd25Db250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogMCAwICR7c3BhY2luZy5ub3JtYWx9O1xuYDtcblxuY29uc3QgRHJvcGRvd25CdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICR7Zm9udHMuc2l6ZXMoJzIycHgnLCAnMjZweCcpfTtcbiAgYm9yZGVyOiAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBiYWNrZ3JvdW5kOiAke2NvbG9ycy5uZGxhRmlsbS5maWxtQ29sb3JCcmlnaHR9O1xuICBjb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5uc21hbGx9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHdpZHRoOiAxMDAlO1xuICBsZXR0ZXItc3BhY2luZzogMC4wNWVtO1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICBkaXY6Zmlyc3QtY2hpbGQge1xuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgIHNtYWxsIHtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgc21hbGwge1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgRHJvcGRvd25XcmFwcGVyUHJvcHMge1xuICBvZmZzZXREcm9wZG93bjogbnVtYmVyO1xufVxuXG5jb25zdCBEcm9wZG93bldyYXBwZXIgPSBzdHlsZWQuZGl2PERyb3Bkb3duV3JhcHBlclByb3BzPmBcbiAgdG9wOiAtJHsocHJvcHMpID0+IHByb3BzLm9mZnNldERyb3Bkb3duICogNTIgKyAxM31weDtcbiAgJHtEcm9wZG93bkJ1dHRvbn0ge1xuICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgdGV4dC10cmFuc2Zvcm06IDA7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIH1cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcGFkZGluZzogJHNwYWNpbmctLXNtYWxsIDA7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLmxpZ2h0ZXJ9O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBhbmltYXRpb246ICR7em9vbUluU2VsZWN0fSAyMDBtcyBlYXNlO1xuICBib3gtc2hhZG93OiAwIDAgMzBweCByZ2JhKCR7Y29sb3JzLmJsYWNrfSwgMC42KTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiA5OTk5O1xuICBidXR0b24sXG4gIGEge1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGJvcmRlcjogMDtcbiAgICBvdXRsaW5lOiAwO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAyMDBtcyBlYXNlO1xuICAgICY6aG92ZXIsXG4gICAgJjpmb2N1cyB7XG4gICAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gICAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMik7XG4gICAgfVxuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBXaXRoVHJhbnNsYXRpb24ge1xuICByZXNvdXJjZVR5cGVzOiBNb3ZpZVJlc291cmNlVHlwZVtdO1xuICByZXNvdXJjZVR5cGVTZWxlY3RlZD86IE1vdmllUmVzb3VyY2VUeXBlO1xuICBhcmlhQ29udHJvbElkPzogc3RyaW5nO1xuICBvbkNoYW5nZVJlc291cmNlVHlwZTogKHJlc291cmNlSWQ/OiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmludGVyZmFjZSBTdGF0ZSB7XG4gIHJlc291cmNlVHlwZXNJc09wZW46IGJvb2xlYW47XG59XG5jbGFzcyBDYXRlZ29yeVNlbGVjdCBleHRlbmRzIENvbXBvbmVudDxQcm9wcywgU3RhdGU+IHtcbiAgcmVmZXJlbmNlczogUmVjb3JkPHN0cmluZywgSFRNTEJ1dHRvbkVsZW1lbnQgfCBudWxsPjtcbiAgY29uc3RydWN0b3IocHJvcHM6IFByb3BzKSB7XG4gICAgc3VwZXIocHJvcHMpO1xuICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSxcbiAgICB9O1xuICAgIHRoaXMucmVmZXJlbmNlcyA9IHt9O1xuICAgIHRoaXMuY3JlYXRlUmVmID0gdGhpcy5jcmVhdGVSZWYuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9wZW5TZWxlY3QgPSB0aGlzLm9wZW5TZWxlY3QuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9uU2VsZWN0ID0gdGhpcy5vblNlbGVjdC5iaW5kKHRoaXMpO1xuICB9XG5cbiAgY3JlYXRlUmVmKGVsOiBIVE1MQnV0dG9uRWxlbWVudCB8IG51bGwsIG5hbWU6IHN0cmluZykge1xuICAgIHRoaXMucmVmZXJlbmNlc1tuYW1lXSA9IGVsO1xuICB9XG5cbiAgb3BlblNlbGVjdCgpIHtcbiAgICBjb25zdCB7IHJlc291cmNlVHlwZVNlbGVjdGVkIH0gPSB0aGlzLnByb3BzO1xuICAgIHRoaXMuc2V0U3RhdGUoXG4gICAgICB7XG4gICAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IHRydWUsXG4gICAgICB9LFxuICAgICAgKCkgPT4ge1xuICAgICAgICBpZiAocmVzb3VyY2VUeXBlU2VsZWN0ZWQgJiYgdGhpcy5yZWZlcmVuY2VzW3Jlc291cmNlVHlwZVNlbGVjdGVkLmlkXSkge1xuICAgICAgICAgIHRoaXMucmVmZXJlbmNlc1tyZXNvdXJjZVR5cGVTZWxlY3RlZC5pZF0/LmZvY3VzKCk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgKTtcbiAgfVxuXG4gIG9uU2VsZWN0KHZhbD86IHN0cmluZykge1xuICAgIHRoaXMucHJvcHMub25DaGFuZ2VSZXNvdXJjZVR5cGUodmFsKTtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IGZhbHNlLFxuICAgIH0pO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgcmVzb3VyY2VUeXBlcywgcmVzb3VyY2VUeXBlU2VsZWN0ZWQsIGFyaWFDb250cm9sSWQsIHQgfSA9IHRoaXMucHJvcHM7XG4gICAgY29uc3QgeyByZXNvdXJjZVR5cGVzSXNPcGVuIH0gPSB0aGlzLnN0YXRlO1xuICAgIGNvbnN0IG9mZnNldERyb3BEb3duID0gcmVzb3VyY2VUeXBlU2VsZWN0ZWRcbiAgICAgID8gcmVzb3VyY2VUeXBlcy5maW5kSW5kZXgoKHJlc291cmNlKSA9PiByZXNvdXJjZS5pZCA9PT0gcmVzb3VyY2VUeXBlU2VsZWN0ZWQuaWQpICsgMVxuICAgICAgOiAwO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxEcm9wZG93bkNvbnRhaW5lciBjbGFzc05hbWU9XCJ1LTEyLzEyXCI+XG4gICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9eyFyZXNvdXJjZVR5cGVzSXNPcGVufVxuICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJzZWxlY3RDYXRlZ29yeVwiXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgdGFiSW5kZXg9e3Jlc291cmNlVHlwZXNJc09wZW4gPyAtMSA6IDB9XG4gICAgICAgICAgb25DbGljaz17dGhpcy5vcGVuU2VsZWN0fT5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jaG9vc2VDYXRlZ29yeScpfTwvc3Bhbj5cbiAgICAgICAgICAgIDxzbWFsbD5cbiAgICAgICAgICAgICAgeyhyZXNvdXJjZVR5cGVTZWxlY3RlZCAmJiByZXNvdXJjZVR5cGVTZWxlY3RlZC5uYW1lKSB8fCB0KCduZGxhRmlsbS5zZWFyY2guY2F0ZWdvcnlGcm9tTmRsYScpfVxuICAgICAgICAgICAgPC9zbWFsbD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPENoZXZyb25Eb3duIGNsYXNzTmFtZT1cImMtaWNvbi0tMjJcIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICB7cmVzb3VyY2VUeXBlc0lzT3BlbiAmJiAoXG4gICAgICAgICAgPEZvY3VzVHJhcFJlYWN0XG4gICAgICAgICAgICBhY3RpdmU9e3Jlc291cmNlVHlwZXNJc09wZW59XG4gICAgICAgICAgICBmb2N1c1RyYXBPcHRpb25zPXt7XG4gICAgICAgICAgICAgIG9uRGVhY3RpdmF0ZTogKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuc2V0U3RhdGUoeyByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSB9KTtcbiAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgY2xpY2tPdXRzaWRlRGVhY3RpdmF0ZXM6IHRydWUsXG4gICAgICAgICAgICAgIGVzY2FwZURlYWN0aXZhdGVzOiB0cnVlLFxuICAgICAgICAgICAgfX0+XG4gICAgICAgICAgICA8RHJvcGRvd25XcmFwcGVyIGlkPVwic2VsZWN0Q2F0ZWdvcnlcIiBvZmZzZXREcm9wZG93bj17b2Zmc2V0RHJvcERvd259PlxuICAgICAgICAgICAgICA8RHJvcGRvd25CdXR0b24gYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH0gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9eygpID0+IHRoaXMub25TZWxlY3QoKX0+XG4gICAgICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jYXRlZ29yeUZyb21OZGxhJyl9PC9zcGFuPlxuICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICB7cmVzb3VyY2VUeXBlcy5tYXAoKHJlc291cmNlVHlwZSkgPT4gKFxuICAgICAgICAgICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgICAgICAgICAgYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH1cbiAgICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgICAgcmVmPXsoZWwpID0+IHRoaXMuY3JlYXRlUmVmKGVsLCByZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gdGhpcy5vblNlbGVjdChyZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgZGF0YS1pZD17cmVzb3VyY2VUeXBlLmlkfVxuICAgICAgICAgICAgICAgICAga2V5PXtyZXNvdXJjZVR5cGUuaWR9PlxuICAgICAgICAgICAgICAgICAgPHNwYW4+e3Jlc291cmNlVHlwZS5uYW1lfTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIDwvRHJvcGRvd25XcmFwcGVyPlxuICAgICAgICAgIDwvRm9jdXNUcmFwUmVhY3Q+XG4gICAgICAgICl9XG4gICAgICA8L0Ryb3Bkb3duQ29udGFpbmVyPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgd2l0aFRyYW5zbGF0aW9uKCkoQ2F0ZWdvcnlTZWxlY3QpO1xuIl19 */"));
+var DropdownWrapper = (0, _styledBase["default"])("div", {
+  target: "e10i3sm22",
+  label: "DropdownWrapper"
+})("top:-", function (props) {
+  return props.offsetDropdown * 52 + 13;
+}, "px;", DropdownButton, "{border-radius:0;text-transform:0;letter-spacing:0;}display:flex;flex-direction:column;padding:$spacing--small 0;background:", _core2.colors.brand.lighter, ";border-radius:4px;left:0;right:0;animation:", zoomInSelect, " 200ms ease;box-shadow:0 0 30px rgba(", _core2.colors.black, ",0.6);position:absolute;z-index:9999;button,a{color:", _core2.colors.text.primary, ";border:0;outline:0;text-align:left;background:transparent;padding:", _core2.spacing.small, ";padding-left:", _core2.spacing.normal, ";font-weight:", _core2.fonts.weight.semibold, ";text-decoration:none;box-shadow:none;transition:background 200ms ease;&:hover,&:focus{color:", _core2.colors.brand.primary, ";background:rgba(0,0,0,0.2);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNhdGVnb3J5U2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRXdEIiwiZmlsZSI6IkNhdGVnb3J5U2VsZWN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgRm9jdXNUcmFwUmVhY3QgZnJvbSAnZm9jdXMtdHJhcC1yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQ2hldnJvbkRvd24gfSBmcm9tICdAbmRsYS9pY29ucy9jb21tb24nO1xuaW1wb3J0IHsgV2l0aFRyYW5zbGF0aW9uLCB3aXRoVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCB7IE1vdmllUmVzb3VyY2VUeXBlIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IHpvb21JblNlbGVjdCA9IGtleWZyYW1lc2BcbiAgMCUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxJSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlM2QoMC45NSwgMC45NSwgMC45NSk7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuICAxMDAlIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHRyYW5zZm9ybTogc2NhbGUzZCgxLCAxLCAxKTtcbiAgfVxuYDtcblxuY29uc3QgRHJvcGRvd25Db250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIG1hcmdpbjogMCAwICR7c3BhY2luZy5ub3JtYWx9O1xuYDtcblxuY29uc3QgRHJvcGRvd25CdXR0b24gPSBzdHlsZWQuYnV0dG9uYFxuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gICR7Zm9udHMuc2l6ZXMoJzIycHgnLCAnMjZweCcpfTtcbiAgYm9yZGVyOiAwO1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBiYWNrZ3JvdW5kOiAke2NvbG9ycy5uZGxhRmlsbS5maWxtQ29sb3JCcmlnaHR9O1xuICBjb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcuc21hbGx9ICR7c3BhY2luZy5uc21hbGx9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuc2VtaWJvbGR9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHdpZHRoOiAxMDAlO1xuICBsZXR0ZXItc3BhY2luZzogMC4wNWVtO1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfSAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICBkaXY6Zmlyc3QtY2hpbGQge1xuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgIHNtYWxsIHtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbiAgc21hbGwge1xuICAgIHRleHQtdHJhbnNmb3JtOiBub25lO1xuICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBmb250LXdlaWdodDogbm9ybWFsO1xuICB9XG5gO1xuXG5pbnRlcmZhY2UgRHJvcGRvd25XcmFwcGVyUHJvcHMge1xuICBvZmZzZXREcm9wZG93bjogbnVtYmVyO1xufVxuXG5jb25zdCBEcm9wZG93bldyYXBwZXIgPSBzdHlsZWQuZGl2PERyb3Bkb3duV3JhcHBlclByb3BzPmBcbiAgdG9wOiAtJHsocHJvcHMpID0+IHByb3BzLm9mZnNldERyb3Bkb3duICogNTIgKyAxM31weDtcbiAgJHtEcm9wZG93bkJ1dHRvbn0ge1xuICAgIGJvcmRlci1yYWRpdXM6IDA7XG4gICAgdGV4dC10cmFuc2Zvcm06IDA7XG4gICAgbGV0dGVyLXNwYWNpbmc6IDA7XG4gIH1cbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgcGFkZGluZzogJHNwYWNpbmctLXNtYWxsIDA7XG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLmxpZ2h0ZXJ9O1xuICBib3JkZXItcmFkaXVzOiA0cHg7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICBhbmltYXRpb246ICR7em9vbUluU2VsZWN0fSAyMDBtcyBlYXNlO1xuICBib3gtc2hhZG93OiAwIDAgMzBweCByZ2JhKCR7Y29sb3JzLmJsYWNrfSwgMC42KTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB6LWluZGV4OiA5OTk5O1xuICBidXR0b24sXG4gIGEge1xuICAgIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICAgIGJvcmRlcjogMDtcbiAgICBvdXRsaW5lOiAwO1xuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5zZW1pYm9sZH07XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAyMDBtcyBlYXNlO1xuICAgICY6aG92ZXIsXG4gICAgJjpmb2N1cyB7XG4gICAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQucHJpbWFyeX07XG4gICAgICBiYWNrZ3JvdW5kOiByZ2JhKDAsIDAsIDAsIDAuMik7XG4gICAgfVxuICB9XG5gO1xuXG5pbnRlcmZhY2UgUHJvcHMgZXh0ZW5kcyBXaXRoVHJhbnNsYXRpb24ge1xuICByZXNvdXJjZVR5cGVzOiBNb3ZpZVJlc291cmNlVHlwZVtdO1xuICByZXNvdXJjZVR5cGVTZWxlY3RlZD86IE1vdmllUmVzb3VyY2VUeXBlO1xuICBhcmlhQ29udHJvbElkPzogc3RyaW5nO1xuICBvbkNoYW5nZVJlc291cmNlVHlwZTogKHJlc291cmNlSWQ/OiBzdHJpbmcpID0+IHZvaWQ7XG59XG5cbmludGVyZmFjZSBTdGF0ZSB7XG4gIHJlc291cmNlVHlwZXNJc09wZW46IGJvb2xlYW47XG59XG5jbGFzcyBDYXRlZ29yeVNlbGVjdCBleHRlbmRzIENvbXBvbmVudDxQcm9wcywgU3RhdGU+IHtcbiAgcmVmZXJlbmNlczogUmVjb3JkPHN0cmluZywgSFRNTEJ1dHRvbkVsZW1lbnQgfCBudWxsPjtcbiAgY29uc3RydWN0b3IocHJvcHM6IFByb3BzKSB7XG4gICAgc3VwZXIocHJvcHMpO1xuICAgIHRoaXMuc3RhdGUgPSB7XG4gICAgICByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSxcbiAgICB9O1xuICAgIHRoaXMucmVmZXJlbmNlcyA9IHt9O1xuICAgIHRoaXMuY3JlYXRlUmVmID0gdGhpcy5jcmVhdGVSZWYuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9wZW5TZWxlY3QgPSB0aGlzLm9wZW5TZWxlY3QuYmluZCh0aGlzKTtcbiAgICB0aGlzLm9uU2VsZWN0ID0gdGhpcy5vblNlbGVjdC5iaW5kKHRoaXMpO1xuICB9XG5cbiAgY3JlYXRlUmVmKGVsOiBIVE1MQnV0dG9uRWxlbWVudCB8IG51bGwsIG5hbWU6IHN0cmluZykge1xuICAgIHRoaXMucmVmZXJlbmNlc1tuYW1lXSA9IGVsO1xuICB9XG5cbiAgb3BlblNlbGVjdCgpIHtcbiAgICBjb25zdCB7IHJlc291cmNlVHlwZVNlbGVjdGVkIH0gPSB0aGlzLnByb3BzO1xuICAgIHRoaXMuc2V0U3RhdGUoXG4gICAgICB7XG4gICAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IHRydWUsXG4gICAgICB9LFxuICAgICAgKCkgPT4ge1xuICAgICAgICBpZiAocmVzb3VyY2VUeXBlU2VsZWN0ZWQgJiYgdGhpcy5yZWZlcmVuY2VzW3Jlc291cmNlVHlwZVNlbGVjdGVkLmlkXSkge1xuICAgICAgICAgIHRoaXMucmVmZXJlbmNlc1tyZXNvdXJjZVR5cGVTZWxlY3RlZC5pZF0/LmZvY3VzKCk7XG4gICAgICAgIH1cbiAgICAgIH0sXG4gICAgKTtcbiAgfVxuXG4gIG9uU2VsZWN0KHZhbD86IHN0cmluZykge1xuICAgIHRoaXMucHJvcHMub25DaGFuZ2VSZXNvdXJjZVR5cGUodmFsKTtcbiAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgIHJlc291cmNlVHlwZXNJc09wZW46IGZhbHNlLFxuICAgIH0pO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgcmVzb3VyY2VUeXBlcywgcmVzb3VyY2VUeXBlU2VsZWN0ZWQsIGFyaWFDb250cm9sSWQsIHQgfSA9IHRoaXMucHJvcHM7XG4gICAgY29uc3QgeyByZXNvdXJjZVR5cGVzSXNPcGVuIH0gPSB0aGlzLnN0YXRlO1xuICAgIGNvbnN0IG9mZnNldERyb3BEb3duID0gcmVzb3VyY2VUeXBlU2VsZWN0ZWRcbiAgICAgID8gcmVzb3VyY2VUeXBlcy5maW5kSW5kZXgoKHJlc291cmNlKSA9PiByZXNvdXJjZS5pZCA9PT0gcmVzb3VyY2VUeXBlU2VsZWN0ZWQuaWQpICsgMVxuICAgICAgOiAwO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxEcm9wZG93bkNvbnRhaW5lciBjbGFzc05hbWU9XCJ1LTEyLzEyXCI+XG4gICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9eyFyZXNvdXJjZVR5cGVzSXNPcGVufVxuICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJzZWxlY3RDYXRlZ29yeVwiXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgdGFiSW5kZXg9e3Jlc291cmNlVHlwZXNJc09wZW4gPyAtMSA6IDB9XG4gICAgICAgICAgb25DbGljaz17dGhpcy5vcGVuU2VsZWN0fT5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jaG9vc2VDYXRlZ29yeScpfTwvc3Bhbj5cbiAgICAgICAgICAgIDxzbWFsbD5cbiAgICAgICAgICAgICAgeyhyZXNvdXJjZVR5cGVTZWxlY3RlZCAmJiByZXNvdXJjZVR5cGVTZWxlY3RlZC5uYW1lKSB8fCB0KCduZGxhRmlsbS5zZWFyY2guY2F0ZWdvcnlGcm9tTmRsYScpfVxuICAgICAgICAgICAgPC9zbWFsbD5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPENoZXZyb25Eb3duIGNsYXNzTmFtZT1cImMtaWNvbi0tMjJcIiAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICB7cmVzb3VyY2VUeXBlc0lzT3BlbiAmJiAoXG4gICAgICAgICAgPEZvY3VzVHJhcFJlYWN0XG4gICAgICAgICAgICBhY3RpdmU9e3Jlc291cmNlVHlwZXNJc09wZW59XG4gICAgICAgICAgICBmb2N1c1RyYXBPcHRpb25zPXt7XG4gICAgICAgICAgICAgIG9uRGVhY3RpdmF0ZTogKCkgPT4ge1xuICAgICAgICAgICAgICAgIHRoaXMuc2V0U3RhdGUoeyByZXNvdXJjZVR5cGVzSXNPcGVuOiBmYWxzZSB9KTtcbiAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgY2xpY2tPdXRzaWRlRGVhY3RpdmF0ZXM6IHRydWUsXG4gICAgICAgICAgICAgIGVzY2FwZURlYWN0aXZhdGVzOiB0cnVlLFxuICAgICAgICAgICAgfX0+XG4gICAgICAgICAgICA8RHJvcGRvd25XcmFwcGVyIGlkPVwic2VsZWN0Q2F0ZWdvcnlcIiBvZmZzZXREcm9wZG93bj17b2Zmc2V0RHJvcERvd259PlxuICAgICAgICAgICAgICA8RHJvcGRvd25CdXR0b24gYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH0gdHlwZT1cImJ1dHRvblwiIG9uQ2xpY2s9eygpID0+IHRoaXMub25TZWxlY3QoKX0+XG4gICAgICAgICAgICAgICAgPHNwYW4+e3QoJ25kbGFGaWxtLnNlYXJjaC5jYXRlZ29yeUZyb21OZGxhJyl9PC9zcGFuPlxuICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICB7cmVzb3VyY2VUeXBlcy5tYXAoKHJlc291cmNlVHlwZSkgPT4gKFxuICAgICAgICAgICAgICAgIDxEcm9wZG93bkJ1dHRvblxuICAgICAgICAgICAgICAgICAgYXJpYS1jb250cm9scz17YXJpYUNvbnRyb2xJZH1cbiAgICAgICAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgICAgICAgcmVmPXsoZWwpID0+IHRoaXMuY3JlYXRlUmVmKGVsLCByZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gdGhpcy5vblNlbGVjdChyZXNvdXJjZVR5cGUuaWQpfVxuICAgICAgICAgICAgICAgICAgZGF0YS1pZD17cmVzb3VyY2VUeXBlLmlkfVxuICAgICAgICAgICAgICAgICAga2V5PXtyZXNvdXJjZVR5cGUuaWR9PlxuICAgICAgICAgICAgICAgICAgPHNwYW4+e3Jlc291cmNlVHlwZS5uYW1lfTwvc3Bhbj5cbiAgICAgICAgICAgICAgICA8L0Ryb3Bkb3duQnV0dG9uPlxuICAgICAgICAgICAgICApKX1cbiAgICAgICAgICAgIDwvRHJvcGRvd25XcmFwcGVyPlxuICAgICAgICAgIDwvRm9jdXNUcmFwUmVhY3Q+XG4gICAgICAgICl9XG4gICAgICA8L0Ryb3Bkb3duQ29udGFpbmVyPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgd2l0aFRyYW5zbGF0aW9uKCkoQ2F0ZWdvcnlTZWxlY3QpO1xuIl19 */"));
 
 var CategorySelect = /*#__PURE__*/function (_Component) {
   _inherits(CategorySelect, _Component);
@@ -121,14 +148,15 @@ var CategorySelect = /*#__PURE__*/function (_Component) {
       var offsetDropDown = resourceTypeSelected ? resourceTypes.findIndex(function (resource) {
         return resource.id === resourceTypeSelected.id;
       }) + 1 : 0;
-      return (0, _core.jsx)("div", classes('dropdown-container', '', 'u-12/12'), (0, _core.jsx)("button", _extends({
+      return (0, _core.jsx)(DropdownContainer, {
+        className: "u-12/12"
+      }, (0, _core.jsx)(DropdownButton, {
         "aria-expanded": !resourceTypesIsOpen,
         "aria-controls": "selectCategory",
-        type: "button"
-      }, classes('dropdown-button', 'toggleButton'), {
+        type: "button",
         tabIndex: resourceTypesIsOpen ? -1 : 0,
         onClick: this.openSelect
-      }), (0, _core.jsx)("div", null, (0, _core.jsx)("span", null, t('ndlaFilm.search.chooseCategory')), (0, _core.jsx)("small", null, resourceTypeSelected && resourceTypeSelected.name || t('ndlaFilm.search.categoryFromNdla'))), (0, _core.jsx)("div", null, (0, _core.jsx)(_common.ChevronDown, {
+      }, (0, _core.jsx)("div", null, (0, _core.jsx)("span", null, t('ndlaFilm.search.chooseCategory')), (0, _core.jsx)("small", null, resourceTypeSelected && resourceTypeSelected.name || t('ndlaFilm.search.categoryFromNdla'))), (0, _core.jsx)("div", null, (0, _core.jsx)(_common.ChevronDown, {
         className: "c-icon--22"
       }))), resourceTypesIsOpen && (0, _core.jsx)(_focusTrapReact["default"], {
         active: resourceTypesIsOpen,
@@ -141,20 +169,17 @@ var CategorySelect = /*#__PURE__*/function (_Component) {
           clickOutsideDeactivates: true,
           escapeDeactivates: true
         }
-      }, (0, _core.jsx)("div", _extends({
-        id: "selectCategory"
-      }, classes('dropdown-wrapper'), {
-        style: {
-          top: "-".concat(offsetDropDown * 52 + 13, "px")
-        }
-      }), (0, _core.jsx)("button", _extends({
+      }, (0, _core.jsx)(DropdownWrapper, {
+        id: "selectCategory",
+        offsetDropdown: offsetDropDown
+      }, (0, _core.jsx)(DropdownButton, {
         "aria-controls": ariaControlId,
         type: "button",
         onClick: function onClick() {
           return _this3.onSelect();
         }
-      }, classes('dropdown-button')), (0, _core.jsx)("span", null, t('ndlaFilm.search.categoryFromNdla'))), resourceTypes.map(function (resourceType) {
-        return (0, _core.jsx)("button", _extends({
+      }, (0, _core.jsx)("span", null, t('ndlaFilm.search.categoryFromNdla'))), resourceTypes.map(function (resourceType) {
+        return (0, _core.jsx)(DropdownButton, {
           "aria-controls": ariaControlId,
           type: "button",
           ref: function ref(el) {
@@ -162,13 +187,10 @@ var CategorySelect = /*#__PURE__*/function (_Component) {
           },
           onClick: function onClick() {
             return _this3.onSelect(resourceType.id);
-          }
-        }, classes('dropdown-button', {
-          selected: !!resourceTypeSelected && resourceTypeSelected.id === resourceType.id
-        }), {
+          },
           "data-id": resourceType.id,
           key: resourceType.id
-        }), (0, _core.jsx)("span", null, resourceType.name));
+        }, (0, _core.jsx)("span", null, resourceType.name));
       }))));
     }
   }]);

package/lib/NDLAFilm/FilmMovieList.js

@@ -5,24 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
 
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+var _react = _interopRequireDefault(require("react"));
 
 var _carousel = require("@ndla/carousel");
 
+var _core = require("@ndla/core");
+
 var _FilmContentCard = _interopRequireDefault(require("./FilmContentCard"));
 
-var _core = require("@emotion/core");
+var _filmStyles = require("./filmStyles");
+
+var _core2 = require("@emotion/core");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var classes = new _reactBemHelper["default"]({
-  name: 'film-movielist',
-  prefix: 'c-'
-});
+var StyledSection = (0, _styledBase["default"])("section", {
+  target: "e1gotiq30",
+  label: "StyledSection"
+})("margin-bottom:", _core.spacing.normal, ";", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{margin-bottom:", _core.spacing.large, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbG1Nb3ZpZUxpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCb0MiLCJmaWxlIjoiRmlsbU1vdmllTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgQ2Fyb3VzZWwsIENhbGN1bGF0ZWRDYXJvdXNlbFByb3BzIH0gZnJvbSAnQG5kbGEvY2Fyb3VzZWwnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgRmlsbUNvbnRlbnRDYXJkIGZyb20gJy4vRmlsbUNvbnRlbnRDYXJkJztcbmltcG9ydCB7IE1vdmllUmVzb3VyY2VUeXBlLCBNb3ZpZVR5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IFN0eWxlZEhlYWRpbmdIMSB9IGZyb20gJy4vZmlsbVN0eWxlcyc7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG1vdmllczogTW92aWVUeXBlW107XG4gIG5hbWU6IHN0cmluZztcbiAgc2xpZGVCYWNrd2FyZHNMYWJlbDogc3RyaW5nO1xuICBzbGlkZUZvcndhcmRzTGFiZWw6IHN0cmluZztcbiAgcmVzb3VyY2VUeXBlczogTW92aWVSZXNvdXJjZVR5cGVbXTtcbiAgYXV0b1NpemVkUHJvcHM6IENhbGN1bGF0ZWRDYXJvdXNlbFByb3BzO1xuICByZXNpemVUaHVtYm5haWxJbWFnZXM/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWRTZWN0aW9uID0gc3R5bGVkLnNlY3Rpb25gXG4gIG1hcmdpbi1ib3R0b206ICR7c3BhY2luZy5ub3JtYWx9O1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLmxhcmdlfTtcbiAgfVxuYDtcblxuY29uc3QgRmlsbU1vdmllTGlzdCA9ICh7XG4gIG5hbWUsXG4gIG1vdmllcyA9IFtdLFxuICBzbGlkZUJhY2t3YXJkc0xhYmVsLFxuICBzbGlkZUZvcndhcmRzTGFiZWwsXG4gIHJlc291cmNlVHlwZXMgPSBbXSxcbiAgYXV0b1NpemVkUHJvcHMsXG4gIHJlc2l6ZVRodW1ibmFpbEltYWdlcyxcbn06IFByb3BzKSA9PiAoXG4gIDxTdHlsZWRTZWN0aW9uPlxuICAgIDxTdHlsZWRIZWFkaW5nSDEgbWFyZ2luTGVmdD17YXV0b1NpemVkUHJvcHMubWFyZ2lufT57bmFtZX08L1N0eWxlZEhlYWRpbmdIMT5cbiAgICA8Q2Fyb3VzZWxcbiAgICAgIGRpc2FibGVTY3JvbGw9e2ZhbHNlfVxuICAgICAgc2xpZGVCYWNrd2FyZHNMYWJlbD17c2xpZGVCYWNrd2FyZHNMYWJlbH1cbiAgICAgIHNsaWRlRm9yd2FyZHNMYWJlbD17c2xpZGVGb3J3YXJkc0xhYmVsfVxuICAgICAgYnV0dG9uQ2xhc3M9XCJjLWZpbG0tbW92aWVsaXN0X19jYXJvdXNlbC1idXR0b25zXCJcbiAgICAgIHdyYXBwZXJDbGFzcz1cImMtZmlsbS1tb3ZpZWxpc3RfX2Nhcm91c2VsLXdyYXBwZXItYnV0dG9uc1wiXG4gICAgICBpdGVtcz17bW92aWVzLm1hcCgobW92aWUpID0+IChcbiAgICAgICAgPEZpbG1Db250ZW50Q2FyZFxuICAgICAgICAgIGtleT17bW92aWUuaWR9XG4gICAgICAgICAgbW92aWU9e21vdmllfVxuICAgICAgICAgIGNvbHVtbldpZHRoPXthdXRvU2l6ZWRQcm9wcy5jb2x1bW5XaWR0aH1cbiAgICAgICAgICByZXNvdXJjZVR5cGVzPXtyZXNvdXJjZVR5cGVzfVxuICAgICAgICAgIHJlc2l6ZVRodW1ibmFpbEltYWdlcz17cmVzaXplVGh1bWJuYWlsSW1hZ2VzfVxuICAgICAgICAvPlxuICAgICAgKSl9XG4gICAgICB7Li4uYXV0b1NpemVkUHJvcHN9XG4gICAgLz5cbiAgPC9TdHlsZWRTZWN0aW9uPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgRmlsbU1vdmllTGlzdDtcbiJdfQ== */"));
 
 var FilmMovieList = function FilmMovieList(_ref) {
   var name = _ref.name,
@@ -34,18 +40,16 @@ var FilmMovieList = function FilmMovieList(_ref) {
       resourceTypes = _ref$resourceTypes === void 0 ? [] : _ref$resourceTypes,
       autoSizedProps = _ref.autoSizedProps,
       resizeThumbnailImages = _ref.resizeThumbnailImages;
-  return (0, _core.jsx)("section", classes(), (0, _core.jsx)("h1", _extends({}, classes('heading'), {
-    style: {
-      marginLeft: "".concat(autoSizedProps.margin, "px")
-    }
-  }), name), (0, _core.jsx)(_carousel.Carousel, _extends({
+  return (0, _core2.jsx)(StyledSection, null, (0, _core2.jsx)(_filmStyles.StyledHeadingH1, {
+    marginLeft: autoSizedProps.margin
+  }, name), (0, _core2.jsx)(_carousel.Carousel, _extends({
     disableScroll: false,
     slideBackwardsLabel: slideBackwardsLabel,
     slideForwardsLabel: slideForwardsLabel,
     buttonClass: "c-film-movielist__carousel-buttons",
     wrapperClass: "c-film-movielist__carousel-wrapper-buttons",
     items: movies.map(function (movie) {
-      return (0, _core.jsx)(_FilmContentCard["default"], {
+      return (0, _core2.jsx)(_FilmContentCard["default"], {
         key: movie.id,
         movie: movie,
         columnWidth: autoSizedProps.columnWidth,

package/lib/NDLAFilm/FilmMovieSearch.js

@@ -5,19 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
 
-var _reactBemHelper = _interopRequireDefault(require("react-bem-helper"));
+var _react = _interopRequireDefault(require("react"));
 
 var _safelink = _interopRequireDefault(require("@ndla/safelink"));
 
 var _reactI18next = require("react-i18next");
 
+var _core = require("@ndla/core");
+
 var _CategorySelect = _interopRequireDefault(require("./CategorySelect"));
 
 var _ = require("..");
 
-var _core = require("@emotion/core");
+var _filmStyles = require("./filmStyles");
+
+var _core2 = require("@emotion/core");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -28,14 +32,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * LICENSE file in the root directory of this source tree.
  *
  */
-var classes = new _reactBemHelper["default"]({
-  name: 'film-moviesearch',
-  prefix: 'c-'
-});
-var classesMovieList = new _reactBemHelper["default"]({
-  name: 'film-movielist',
-  prefix: 'c-'
-});
+var FilmMovieSearchContainer = (0, _styledBase["default"])("div", {
+  target: "ebr0v6y0",
+  label: "FilmMovieSearchContainer"
+})("margin:", _core.spacing.normal, " 0 ", _core.spacing.large, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbG1Nb3ZpZVNlYXJjaC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0IyQyIsImZpbGUiOiJGaWxtTW92aWVTZWFyY2gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IENhdGVnb3J5U2VsZWN0IGZyb20gJy4vQ2F0ZWdvcnlTZWxlY3QnO1xuaW1wb3J0IHsgTW92aWVSZXNvdXJjZVR5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IE9uZUNvbHVtbiB9IGZyb20gJy4uJztcbmltcG9ydCB7IFN0eWxlZEhlYWRpbmdIMiB9IGZyb20gJy4vZmlsbVN0eWxlcyc7XG5cbmNvbnN0IEZpbG1Nb3ZpZVNlYXJjaENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHtzcGFjaW5nLm5vcm1hbH0gMCAke3NwYWNpbmcubGFyZ2V9O1xuYDtcblxuY29uc3QgVG9waWNOYXZpZ2F0aW9uID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3NwYWNpbmcubm9ybWFsfSAwO1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgICBwYWRkaW5nOiAwICR7c3BhY2luZy5ub3JtYWx9O1xuICB9XG4gIHVsIHtcbiAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgbGlzdC1zdHlsZS1pbWFnZTogbm9uZTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuICAgICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLm5vcm1hbH07XG4gICAgfVxuICAgIGxpIHtcbiAgICAgIHBhZGRpbmc6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgICAgd2lkdGg6IDUwJTtcbiAgICAgIH1cbiAgICAgIGEge1xuICAgICAgICBjb2xvcjogI2ZmZjtcbiAgICAgICAgJjpob3ZlcixcbiAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgY29sb3I6ICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdG9waWNzPzogeyBpZDogc3RyaW5nOyBwYXRoOiBzdHJpbmc7IG5hbWU6IHN0cmluZyB9W107XG4gIG9uQ2hhbmdlUmVzb3VyY2VUeXBlOiAocmVzb3VyY2VUeXBlPzogc3RyaW5nKSA9PiB2b2lkO1xuICByZXNvdXJjZVR5cGVTZWxlY3RlZD86IE1vdmllUmVzb3VyY2VUeXBlO1xuICByZXNvdXJjZVR5cGVzOiBNb3ZpZVJlc291cmNlVHlwZVtdO1xuICBhcmlhQ29udHJvbElkOiBzdHJpbmc7XG59XG5cbmNvbnN0IEZpbG1Nb3ZpZVNlYXJjaCA9ICh7XG4gIHRvcGljcyA9IFtdLFxuICBvbkNoYW5nZVJlc291cmNlVHlwZSxcbiAgcmVzb3VyY2VUeXBlcyxcbiAgcmVzb3VyY2VUeXBlU2VsZWN0ZWQsXG4gIGFyaWFDb250cm9sSWQsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIHJldHVybiAoXG4gICAgPEZpbG1Nb3ZpZVNlYXJjaENvbnRhaW5lcj5cbiAgICAgIDxPbmVDb2x1bW4+XG4gICAgICAgIDxUb3BpY05hdmlnYXRpb24+XG4gICAgICAgICAgPFN0eWxlZEhlYWRpbmdIMiBjbGFzc05hbWU9XCJ1LTEyLzEyIHUtNC8xMkB0YWJsZXRcIj57dCgnbmRsYUZpbG0uc3ViamVjdHNJbk1vdmllcycpfTo8L1N0eWxlZEhlYWRpbmdIMj5cbiAgICAgICAgICA8bmF2IGNsYXNzTmFtZT1cInUtMTIvMTIgdS04LzEyQHRhYmxldFwiPlxuICAgICAgICAgICAgPHVsPlxuICAgICAgICAgICAgICB7dG9waWNzLm1hcCgodG9waWMpID0+IChcbiAgICAgICAgICAgICAgICA8bGkga2V5PXt0b3BpYy5pZH0+XG4gICAgICAgICAgICAgICAgICA8U2FmZUxpbmsgdG89e3RvcGljLnBhdGh9IGtleT17dG9waWMuaWR9PlxuICAgICAgICAgICAgICAgICAgICA8c3Bhbj57dG9waWMubmFtZX08L3NwYW4+XG4gICAgICAgICAgICAgICAgICA8L1NhZmVMaW5rPlxuICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgPC91bD5cbiAgICAgICAgICA8L25hdj5cbiAgICAgICAgPC9Ub3BpY05hdmlnYXRpb24+XG4gICAgICAgIDxDYXRlZ29yeVNlbGVjdFxuICAgICAgICAgIG9uQ2hhbmdlUmVzb3VyY2VUeXBlPXtvbkNoYW5nZVJlc291cmNlVHlwZX1cbiAgICAgICAgICByZXNvdXJjZVR5cGVzPXtyZXNvdXJjZVR5cGVzfVxuICAgICAgICAgIHJlc291cmNlVHlwZVNlbGVjdGVkPXtyZXNvdXJjZVR5cGVTZWxlY3RlZH1cbiAgICAgICAgICBhcmlhQ29udHJvbElkPXthcmlhQ29udHJvbElkfVxuICAgICAgICAvPlxuICAgICAgPC9PbmVDb2x1bW4+XG4gICAgPC9GaWxtTW92aWVTZWFyY2hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGaWxtTW92aWVTZWFyY2g7XG4iXX0= */"));
+var TopicNavigation = (0, _styledBase["default"])("div", {
+  target: "ebr0v6y1",
+  label: "TopicNavigation"
+})("margin:", _core.spacing.normal, " 0;", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{display:flex;align-items:flex-start;padding:0 ", _core.spacing.normal, ";}ul{list-style-type:none;list-style-image:none;display:flex;align-items:flex-start;flex-wrap:wrap;padding:0;margin:", _core.spacing.small, " 0;", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{padding-left:", _core.spacing.normal, ";}li{padding:0;width:100%;", _core.mq.range({
+  from: _core.breakpoints.tablet
+}), "{width:50%;}a{color:#fff;&:hover,&:focus{color:", _core.colors.brand.light, ";}}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbG1Nb3ZpZVNlYXJjaC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0JrQyIsImZpbGUiOiJGaWxtTW92aWVTZWFyY2gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFNhZmVMaW5rIGZyb20gJ0BuZGxhL3NhZmVsaW5rJztcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IENhdGVnb3J5U2VsZWN0IGZyb20gJy4vQ2F0ZWdvcnlTZWxlY3QnO1xuaW1wb3J0IHsgTW92aWVSZXNvdXJjZVR5cGUgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IE9uZUNvbHVtbiB9IGZyb20gJy4uJztcbmltcG9ydCB7IFN0eWxlZEhlYWRpbmdIMiB9IGZyb20gJy4vZmlsbVN0eWxlcyc7XG5cbmNvbnN0IEZpbG1Nb3ZpZVNlYXJjaENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbjogJHtzcGFjaW5nLm5vcm1hbH0gMCAke3NwYWNpbmcubGFyZ2V9O1xuYDtcblxuY29uc3QgVG9waWNOYXZpZ2F0aW9uID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luOiAke3NwYWNpbmcubm9ybWFsfSAwO1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgICBwYWRkaW5nOiAwICR7c3BhY2luZy5ub3JtYWx9O1xuICB9XG4gIHVsIHtcbiAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgbGlzdC1zdHlsZS1pbWFnZTogbm9uZTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O1xuICAgIGZsZXgtd3JhcDogd3JhcDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogJHtzcGFjaW5nLnNtYWxsfSAwO1xuICAgICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgIHBhZGRpbmctbGVmdDogJHtzcGFjaW5nLm5vcm1hbH07XG4gICAgfVxuICAgIGxpIHtcbiAgICAgIHBhZGRpbmc6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICAgICAgd2lkdGg6IDUwJTtcbiAgICAgIH1cbiAgICAgIGEge1xuICAgICAgICBjb2xvcjogI2ZmZjtcbiAgICAgICAgJjpob3ZlcixcbiAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgY29sb3I6ICR7Y29sb3JzLmJyYW5kLmxpZ2h0fTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdG9waWNzPzogeyBpZDogc3RyaW5nOyBwYXRoOiBzdHJpbmc7IG5hbWU6IHN0cmluZyB9W107XG4gIG9uQ2hhbmdlUmVzb3VyY2VUeXBlOiAocmVzb3VyY2VUeXBlPzogc3RyaW5nKSA9PiB2b2lkO1xuICByZXNvdXJjZVR5cGVTZWxlY3RlZD86IE1vdmllUmVzb3VyY2VUeXBlO1xuICByZXNvdXJjZVR5cGVzOiBNb3ZpZVJlc291cmNlVHlwZVtdO1xuICBhcmlhQ29udHJvbElkOiBzdHJpbmc7XG59XG5cbmNvbnN0IEZpbG1Nb3ZpZVNlYXJjaCA9ICh7XG4gIHRvcGljcyA9IFtdLFxuICBvbkNoYW5nZVJlc291cmNlVHlwZSxcbiAgcmVzb3VyY2VUeXBlcyxcbiAgcmVzb3VyY2VUeXBlU2VsZWN0ZWQsXG4gIGFyaWFDb250cm9sSWQsXG59OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIHJldHVybiAoXG4gICAgPEZpbG1Nb3ZpZVNlYXJjaENvbnRhaW5lcj5cbiAgICAgIDxPbmVDb2x1bW4+XG4gICAgICAgIDxUb3BpY05hdmlnYXRpb24+XG4gICAgICAgICAgPFN0eWxlZEhlYWRpbmdIMiBjbGFzc05hbWU9XCJ1LTEyLzEyIHUtNC8xMkB0YWJsZXRcIj57dCgnbmRsYUZpbG0uc3ViamVjdHNJbk1vdmllcycpfTo8L1N0eWxlZEhlYWRpbmdIMj5cbiAgICAgICAgICA8bmF2IGNsYXNzTmFtZT1cInUtMTIvMTIgdS04LzEyQHRhYmxldFwiPlxuICAgICAgICAgICAgPHVsPlxuICAgICAgICAgICAgICB7dG9waWNzLm1hcCgodG9waWMpID0+IChcbiAgICAgICAgICAgICAgICA8bGkga2V5PXt0b3BpYy5pZH0+XG4gICAgICAgICAgICAgICAgICA8U2FmZUxpbmsgdG89e3RvcGljLnBhdGh9IGtleT17dG9waWMuaWR9PlxuICAgICAgICAgICAgICAgICAgICA8c3Bhbj57dG9waWMubmFtZX08L3NwYW4+XG4gICAgICAgICAgICAgICAgICA8L1NhZmVMaW5rPlxuICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgPC91bD5cbiAgICAgICAgICA8L25hdj5cbiAgICAgICAgPC9Ub3BpY05hdmlnYXRpb24+XG4gICAgICAgIDxDYXRlZ29yeVNlbGVjdFxuICAgICAgICAgIG9uQ2hhbmdlUmVzb3VyY2VUeXBlPXtvbkNoYW5nZVJlc291cmNlVHlwZX1cbiAgICAgICAgICByZXNvdXJjZVR5cGVzPXtyZXNvdXJjZVR5cGVzfVxuICAgICAgICAgIHJlc291cmNlVHlwZVNlbGVjdGVkPXtyZXNvdXJjZVR5cGVTZWxlY3RlZH1cbiAgICAgICAgICBhcmlhQ29udHJvbElkPXthcmlhQ29udHJvbElkfVxuICAgICAgICAvPlxuICAgICAgPC9PbmVDb2x1bW4+XG4gICAgPC9GaWxtTW92aWVTZWFyY2hDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBGaWxtTW92aWVTZWFyY2g7XG4iXX0= */"));
 
 var FilmMovieSearch = function FilmMovieSearch(_ref) {
   var _ref$topics = _ref.topics,
@@ -48,16 +58,18 @@ var FilmMovieSearch = function FilmMovieSearch(_ref) {
   var _useTranslation = (0, _reactI18next.useTranslation)(),
       t = _useTranslation.t;
 
-  return (0, _core.jsx)("div", classes(''), (0, _core.jsx)(_.OneColumn, null, (0, _core.jsx)("div", classes('topic-navigation'), (0, _core.jsx)("h2", classesMovieList('heading', '', 'u-12/12 u-4/12@tablet'), t('ndlaFilm.subjectsInMovies'), ":"), (0, _core.jsx)("nav", {
+  return (0, _core2.jsx)(FilmMovieSearchContainer, null, (0, _core2.jsx)(_.OneColumn, null, (0, _core2.jsx)(TopicNavigation, null, (0, _core2.jsx)(_filmStyles.StyledHeadingH2, {
+    className: "u-12/12 u-4/12@tablet"
+  }, t('ndlaFilm.subjectsInMovies'), ":"), (0, _core2.jsx)("nav", {
     className: "u-12/12 u-8/12@tablet"
-  }, (0, _core.jsx)("ul", null, topics.map(function (topic) {
-    return (0, _core.jsx)("li", {
+  }, (0, _core2.jsx)("ul", null, topics.map(function (topic) {
+    return (0, _core2.jsx)("li", {
       key: topic.id
-    }, (0, _core.jsx)(_safelink["default"], {
+    }, (0, _core2.jsx)(_safelink["default"], {
       to: topic.path,
       key: topic.id
-    }, (0, _core.jsx)("span", null, topic.name)));
-  })))), (0, _core.jsx)(_CategorySelect["default"], {
+    }, (0, _core2.jsx)("span", null, topic.name)));
+  })))), (0, _core2.jsx)(_CategorySelect["default"], {
     onChangeResourceType: onChangeResourceType,
     resourceTypes: resourceTypes,
     resourceTypeSelected: resourceTypeSelected,