@ndla/ui 16.0.0 → 16.1.0

package/es/NDLAFilm/CategorySelect.js

@@ -1,6 +1,6 @@
-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); }
+import _styled from "@emotion/styled-base";
 
-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"); } }
 
@@ -24,16 +24,47 @@ 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; }
 
+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) } })); }
+
 import React, { Component } from 'react';
-import BEMHelper from 'react-bem-helper';
 import FocusTrapReact from 'focus-trap-react';
+import { keyframes } from '@emotion/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
 import { withTranslation } from 'react-i18next';
 import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = new BEMHelper({
-  name: 'film-moviesearch',
-  prefix: 'c-'
-});
+var zoomInSelect = keyframes(_templateObject());
+
+var DropdownContainer = _styled("div", {
+  target: "e10i3sm20",
+  label: "DropdownContainer"
+})("position:relative;margin:0 0 ", 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 = _styled("button", {
+  target: "e10i3sm21",
+  label: "DropdownButton"
+})("border-radius:4px;", fonts.sizes('22px', '26px'), ";border:0;text-transform:uppercase;background:", colors.ndlaFilm.filmColorBright, ";color:", colors.white, ";padding:", spacing.small, " ", spacing.nsmall, ";font-weight:", fonts.weight.semibold, ";display:flex;align-items:center;text-align:left;justify-content:space-between;width:100%;letter-spacing:0.05em;", mq.range({
+  from: breakpoints.tablet
+}), "{padding:", spacing.small, " ", spacing.normal, ";}div:first-child{", mq.range({
+  until: breakpoints.tablet
+}), "{display:flex;flex-direction:column;small{padding:0;}}}small{text-transform:none;padding-left:", 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 = _styled("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:", colors.brand.lighter, ";border-radius:4px;left:0;right:0;animation:", zoomInSelect, " 200ms ease;box-shadow:0 0 30px rgba(", colors.black, ",0.6);position:absolute;z-index:9999;button,a{color:", colors.text.primary, ";border:0;outline:0;text-align:left;background:transparent;padding:", spacing.small, ";padding-left:", spacing.normal, ";font-weight:", fonts.weight.semibold, ";text-decoration:none;box-shadow:none;transition:background 200ms ease;&:hover,&:focus{color:", 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);
@@ -102,14 +133,15 @@ var CategorySelect = /*#__PURE__*/function (_Component) {
       var offsetDropDown = resourceTypeSelected ? resourceTypes.findIndex(function (resource) {
         return resource.id === resourceTypeSelected.id;
       }) + 1 : 0;
-      return ___EmotionJSX("div", classes('dropdown-container', '', 'u-12/12'), ___EmotionJSX("button", _extends({
+      return ___EmotionJSX(DropdownContainer, {
+        className: "u-12/12"
+      }, ___EmotionJSX(DropdownButton, {
         "aria-expanded": !resourceTypesIsOpen,
         "aria-controls": "selectCategory",
-        type: "button"
-      }, classes('dropdown-button', 'toggleButton'), {
+        type: "button",
         tabIndex: resourceTypesIsOpen ? -1 : 0,
         onClick: this.openSelect
-      }), ___EmotionJSX("div", null, ___EmotionJSX("span", null, t('ndlaFilm.search.chooseCategory')), ___EmotionJSX("small", null, resourceTypeSelected && resourceTypeSelected.name || t('ndlaFilm.search.categoryFromNdla'))), ___EmotionJSX("div", null, ___EmotionJSX(ChevronDown, {
+      }, ___EmotionJSX("div", null, ___EmotionJSX("span", null, t('ndlaFilm.search.chooseCategory')), ___EmotionJSX("small", null, resourceTypeSelected && resourceTypeSelected.name || t('ndlaFilm.search.categoryFromNdla'))), ___EmotionJSX("div", null, ___EmotionJSX(ChevronDown, {
         className: "c-icon--22"
       }))), resourceTypesIsOpen && ___EmotionJSX(FocusTrapReact, {
         active: resourceTypesIsOpen,
@@ -122,20 +154,17 @@ var CategorySelect = /*#__PURE__*/function (_Component) {
           clickOutsideDeactivates: true,
           escapeDeactivates: true
         }
-      }, ___EmotionJSX("div", _extends({
-        id: "selectCategory"
-      }, classes('dropdown-wrapper'), {
-        style: {
-          top: "-".concat(offsetDropDown * 52 + 13, "px")
-        }
-      }), ___EmotionJSX("button", _extends({
+      }, ___EmotionJSX(DropdownWrapper, {
+        id: "selectCategory",
+        offsetDropdown: offsetDropDown
+      }, ___EmotionJSX(DropdownButton, {
         "aria-controls": ariaControlId,
         type: "button",
         onClick: function onClick() {
           return _this3.onSelect();
         }
-      }, classes('dropdown-button')), ___EmotionJSX("span", null, t('ndlaFilm.search.categoryFromNdla'))), resourceTypes.map(function (resourceType) {
-        return ___EmotionJSX("button", _extends({
+      }, ___EmotionJSX("span", null, t('ndlaFilm.search.categoryFromNdla'))), resourceTypes.map(function (resourceType) {
+        return ___EmotionJSX(DropdownButton, {
           "aria-controls": ariaControlId,
           type: "button",
           ref: function ref(el) {
@@ -143,13 +172,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
-        }), ___EmotionJSX("span", null, resourceType.name));
+        }, ___EmotionJSX("span", null, resourceType.name));
       }))));
     }
   }]);

package/es/NDLAFilm/FilmMovieList.js

@@ -1,3 +1,5 @@
+import _styled from "@emotion/styled-base";
+
 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); }
 
 /** * Copyright (c) 2016-present, NDLA.
@@ -7,14 +9,18 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  *
  */
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import { Carousel } from '@ndla/carousel';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import FilmContentCard from './FilmContentCard';
+import { StyledHeadingH1 } from './filmStyles';
 import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-'
-});
+
+var StyledSection = _styled("section", {
+  target: "e1gotiq30",
+  label: "StyledSection"
+})("margin-bottom:", spacing.normal, ";", mq.range({
+  from: breakpoints.tablet
+}), "{margin-bottom:", 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,
@@ -26,11 +32,9 @@ var FilmMovieList = function FilmMovieList(_ref) {
       resourceTypes = _ref$resourceTypes === void 0 ? [] : _ref$resourceTypes,
       autoSizedProps = _ref.autoSizedProps,
       resizeThumbnailImages = _ref.resizeThumbnailImages;
-  return ___EmotionJSX("section", classes(), ___EmotionJSX("h1", _extends({}, classes('heading'), {
-    style: {
-      marginLeft: "".concat(autoSizedProps.margin, "px")
-    }
-  }), name), ___EmotionJSX(Carousel, _extends({
+  return ___EmotionJSX(StyledSection, null, ___EmotionJSX(StyledHeadingH1, {
+    marginLeft: autoSizedProps.margin
+  }, name), ___EmotionJSX(Carousel, _extends({
     disableScroll: false,
     slideBackwardsLabel: slideBackwardsLabel,
     slideForwardsLabel: slideForwardsLabel,

package/es/NDLAFilm/FilmMovieSearch.js

@@ -1,3 +1,5 @@
+import _styled from "@emotion/styled-base";
+
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -6,20 +8,29 @@
  *
  */
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import CategorySelect from './CategorySelect';
 import { OneColumn } from '..';
+import { StyledHeadingH2 } from './filmStyles';
 import { jsx as ___EmotionJSX } from "@emotion/core";
-var classes = new BEMHelper({
-  name: 'film-moviesearch',
-  prefix: 'c-'
-});
-var classesMovieList = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-'
-});
+
+var FilmMovieSearchContainer = _styled("div", {
+  target: "ebr0v6y0",
+  label: "FilmMovieSearchContainer"
+})("margin:", spacing.normal, " 0 ", 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 = _styled("div", {
+  target: "ebr0v6y1",
+  label: "TopicNavigation"
+})("margin:", spacing.normal, " 0;", mq.range({
+  from: breakpoints.tablet
+}), "{display:flex;align-items:flex-start;padding:0 ", spacing.normal, ";}ul{list-style-type:none;list-style-image:none;display:flex;align-items:flex-start;flex-wrap:wrap;padding:0;margin:", spacing.small, " 0;", mq.range({
+  from: breakpoints.tablet
+}), "{padding-left:", spacing.normal, ";}li{padding:0;width:100%;", mq.range({
+  from: breakpoints.tablet
+}), "{width:50%;}a{color:#fff;&:hover,&:focus{color:", 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,
@@ -32,7 +43,9 @@ var FilmMovieSearch = function FilmMovieSearch(_ref) {
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
-  return ___EmotionJSX("div", classes(''), ___EmotionJSX(OneColumn, null, ___EmotionJSX("div", classes('topic-navigation'), ___EmotionJSX("h2", classesMovieList('heading', '', 'u-12/12 u-4/12@tablet'), t('ndlaFilm.subjectsInMovies'), ":"), ___EmotionJSX("nav", {
+  return ___EmotionJSX(FilmMovieSearchContainer, null, ___EmotionJSX(OneColumn, null, ___EmotionJSX(TopicNavigation, null, ___EmotionJSX(StyledHeadingH2, {
+    className: "u-12/12 u-4/12@tablet"
+  }, t('ndlaFilm.subjectsInMovies'), ":"), ___EmotionJSX("nav", {
     className: "u-12/12 u-8/12@tablet"
   }, ___EmotionJSX("ul", null, topics.map(function (topic) {
     return ___EmotionJSX("li", {