@ndla/ui 43.0.0 → 43.0.1

package/es/Filter/FilterListPhone.js

@@ -22,9 +22,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * FRI OG BEGRENSET
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { ButtonV2 } from '@ndla/button';
 import debounce from 'lodash/debounce';
 import { classes } from './filterClasses';
@@ -61,12 +61,16 @@ var FilterListPhone = function FilterListPhone(_ref) {
     showActiveFiltersOnSmallScreen = _ref.showActiveFiltersOnSmallScreen;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isNarrowScreen = _useState2[0],
-    setIsNarrowScreen = _useState2[1];
-  var _useState3 = useState(defaultVisibleCount),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    visibleCount = _useState4[0],
-    setVisibleCount = _useState4[1];
+    isNarrowScreen = _useState4[0],
+    setIsNarrowScreen = _useState4[1];
+  var _useState5 = useState(defaultVisibleCount),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleCount = _useState6[0],
+    setVisibleCount = _useState6[1];
   useEffect(function () {
     setScreenSize(true);
     var debounced = debounce(function () {
@@ -89,6 +93,9 @@ var FilterListPhone = function FilterListPhone(_ref) {
     /* eslint react/no-did-mount-set-state: 1 */
   };
 
+  var onClose = useCallback(function () {
+    setOpen(false);
+  }, []);
   var handleChange = function handleChange(event, option) {
     var newValues = null;
     if (event.currentTarget.checked) {
@@ -129,74 +136,74 @@ var FilterListPhone = function FilterListPhone(_ref) {
             return option !== value;
           }), value);
         }
-      }), _jsx(Modal, {
-        size: "full",
-        activateButton: _jsx(ButtonV2, _objectSpread(_objectSpread({
-          variant: "outline"
-        }, classes('modal-button')), {}, {
-          children: messages.openFilter
-        })),
-        children: function children(onClose) {
-          return _jsxs(_Fragment, {
-            children: [_jsx(ModalHeader, {
-              children: _jsxs("div", _objectSpread(_objectSpread({}, classes('modal-header')), {}, {
-                children: [_jsxs("div", _objectSpread(_objectSpread({}, classes('modal-heading')), {}, {
-                  children: [!isNarrowScreen && label && _jsx("h1", _objectSpread(_objectSpread({}, classes('label')), {}, {
-                    children: label
-                  })), _jsx(ButtonV2, {
-                    variant: "outline",
-                    onClick: onClose,
-                    children: messages.useFilter
-                  })]
-                })), _jsx(ModalCloseButton, {
-                  title: messages.closeFilter,
-                  onClick: onClose
-                })]
-              }))
-            }), _jsxs(ModalBody, {
-              modifier: "no-side-padding-mobile",
-              children: [isNarrowScreen && label && _jsx("h1", _objectSpread(_objectSpread({}, classes('label')), {}, {
-                children: label
-              })), groupedOptions.map(function (options, index) {
-                return _jsx("ul", _objectSpread(_objectSpread({}, classes('item-wrapper', {
-                  'aligned-grouping': !!alignedGroup,
-                  'collapse-mobile': !!collapseMobile,
-                  'grouped-options': !!isGroupedOptions
-                })), {}, {
-                  children: options.map(function (option) {
-                    var itemModifiers = [];
-                    var checked = values.some(function (value) {
-                      return value === option.value;
-                    });
-                    if (option.noResults) {
-                      itemModifiers.push('no-results');
-                    }
-                    if (option.disabled) {
-                      itemModifiers.push('disabled');
-                    }
-                    return _jsx(ToggleItem, {
-                      id: preid + option.value,
-                      value: option.value,
-                      checked: checked,
-                      onChange: function onChange(event) {
-                        return handleChange(event, option);
-                      },
-                      label: option.title,
-                      disabled: option.disabled,
-                      modifiers: itemModifiers
-                    }, option.value);
-                  })
-                }), index);
-              }), _jsx("div", _objectSpread(_objectSpread({}, classes('usefilter-wrapper')), {}, {
-                children: _jsx(ButtonV2, {
+      }), _jsxs(Modal, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [_jsx(ModalTrigger, {
+          children: _jsx(ButtonV2, _objectSpread(_objectSpread({
+            variant: "outline"
+          }, classes('modal-button')), {}, {
+            children: messages.openFilter
+          }))
+        }), _jsxs(ModalContent, {
+          size: "full",
+          children: [_jsx(ModalHeader, {
+            children: _jsxs("div", _objectSpread(_objectSpread({}, classes('modal-header')), {}, {
+              children: [_jsxs("div", _objectSpread(_objectSpread({}, classes('modal-heading')), {}, {
+                children: [!isNarrowScreen && label && _jsx("h1", _objectSpread(_objectSpread({}, classes('label')), {}, {
+                  children: label
+                })), _jsx(ButtonV2, {
                   variant: "outline",
                   onClick: onClose,
                   children: messages.useFilter
+                })]
+              })), _jsx(ModalCloseButton, {
+                title: messages.closeFilter
+              })]
+            }))
+          }), _jsxs(ModalBody, {
+            modifier: "no-side-padding-mobile",
+            children: [isNarrowScreen && label && _jsx("h1", _objectSpread(_objectSpread({}, classes('label')), {}, {
+              children: label
+            })), groupedOptions.map(function (options, index) {
+              return _jsx("ul", _objectSpread(_objectSpread({}, classes('item-wrapper', {
+                'aligned-grouping': !!alignedGroup,
+                'collapse-mobile': !!collapseMobile,
+                'grouped-options': !!isGroupedOptions
+              })), {}, {
+                children: options.map(function (option) {
+                  var itemModifiers = [];
+                  var checked = values.some(function (value) {
+                    return value === option.value;
+                  });
+                  if (option.noResults) {
+                    itemModifiers.push('no-results');
+                  }
+                  if (option.disabled) {
+                    itemModifiers.push('disabled');
+                  }
+                  return _jsx(ToggleItem, {
+                    id: preid + option.value,
+                    value: option.value,
+                    checked: checked,
+                    onChange: function onChange(event) {
+                      return handleChange(event, option);
+                    },
+                    label: option.title,
+                    disabled: option.disabled,
+                    modifiers: itemModifiers
+                  }, option.value);
                 })
-              }))]
-            })]
-          });
-        }
+              }), index);
+            }), _jsx("div", _objectSpread(_objectSpread({}, classes('usefilter-wrapper')), {}, {
+              children: _jsx(ButtonV2, {
+                variant: "outline",
+                onClick: onClose,
+                children: messages.useFilter
+              })
+            }))]
+          })]
+        })]
       })]
     });
   }

package/es/LearningPaths/LearningPathMenuModalWrapper.js

@@ -1,4 +1,10 @@
 import _styled from "@emotion/styled/base";
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
  * Copyright (c) 2019-present, NDLA.
  *
@@ -7,9 +13,9 @@ import _styled from "@emotion/styled/base";
  *
  */
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
 import { css } from '@emotion/react';
 import { ButtonV2 } from '@ndla/button';
 import { LearningPath } from '@ndla/icons/contentType';
@@ -19,42 +25,47 @@ import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 var buttonToggleCss = /*#__PURE__*/css(mq.range({
   from: breakpoints.tablet
-}), "{display:none;}margin-right:auto;margin-left:", spacing.normal, ";z-index:100;svg{width:20px;height:20px;margin-right:", spacing.xsmall, ";transform:translateY(-2px);};label:buttonToggleCss;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aE1lbnVNb2RhbFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMkIiLCJmaWxlIjoiTGVhcm5pbmdQYXRoTWVudU1vZGFsV3JhcHBlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgTW9kYWxIZWFkZXIsIE1vZGFsQm9keSwgTW9kYWxDbG9zZUJ1dHRvbiwgTW9kYWwgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBMZWFybmluZ1BhdGggfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBidXR0b25Ub2dnbGVDc3MgPSBjc3NgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG4gIG1hcmdpbi1yaWdodDogYXV0bztcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB6LWluZGV4OiAxMDA7XG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRNb2RhbCA9IHN0eWxlZChNb2RhbClgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG5gO1xuXG50eXBlIE1vZGFsV3JhcHBlclByb3BzID0ge1xuICBpbm5lcldpZHRoOiBudW1iZXI7XG4gIGNoaWxkcmVuOiAoYXJnOiBWb2lkRnVuY3Rpb24pID0+IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IE1vZGFsV3JhcHBlckNvbXBvbmVudCA9ICh7IGlubmVyV2lkdGgsIGNoaWxkcmVuIH06IE1vZGFsV3JhcHBlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgaWYgKGlubmVyV2lkdGggPCA2MDEpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZE1vZGFsXG4gICAgICAgIGFuaW1hdGlvbkR1cmF0aW9uPXsyMDB9XG4gICAgICAgIHNpemU9XCJmdWxsXCJcbiAgICAgICAgYWN0aXZhdGVCdXR0b249e1xuICAgICAgICAgIDxCdXR0b25WMiBjc3M9e2J1dHRvblRvZ2dsZUNzc30+XG4gICAgICAgICAgICA8TGVhcm5pbmdQYXRoIC8+XG4gICAgICAgICAgICA8c3Bhbj57dCgnbGVhcm5pbmdQYXRoLm9wZW5NZW51VG9vbHRpcCcpfTwvc3Bhbj5cbiAgICAgICAgICA8L0J1dHRvblYyPlxuICAgICAgICB9XG4gICAgICA+XG4gICAgICAgIHsoY2xvc2VNb2RhbDogVm9pZEZ1bmN0aW9uKSA9PiAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgPE1vZGFsQ2xvc2VCdXR0b24gdGl0bGU9e3QoJ21vZGFsLmNsb3NlTW9kYWwnKX0gb25DbGljaz17Y2xvc2VNb2RhbH0gLz5cbiAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICA8TW9kYWxCb2R5PntjaGlsZHJlbihjbG9zZU1vZGFsKX08L01vZGFsQm9keT5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkTW9kYWw+XG4gICAgKTtcbiAgfVxuICByZXR1cm4gPD57Y2hpbGRyZW4oKCkgPT4ge30pfTwvPjtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsV3JhcHBlckNvbXBvbmVudDtcbiJdfQ== */"));
-var StyledModal = /*#__PURE__*/_styled(Modal, {
+}), "{display:none;}margin-right:auto;margin-left:", spacing.normal, ";z-index:100;svg{width:20px;height:20px;margin-right:", spacing.xsmall, ";transform:translateY(-2px);};label:buttonToggleCss;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aE1lbnVNb2RhbFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCMkIiLCJmaWxlIjoiTGVhcm5pbmdQYXRoTWVudU1vZGFsV3JhcHBlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHNwYWNpbmcsIG1xLCBicmVha3BvaW50cywgY29sb3JzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBNb2RhbEhlYWRlciwgTW9kYWxCb2R5LCBNb2RhbFRyaWdnZXIsIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsLCBNb2RhbENvbnRlbnQgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBMZWFybmluZ1BhdGggfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBidXR0b25Ub2dnbGVDc3MgPSBjc3NgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG4gIG1hcmdpbi1yaWdodDogYXV0bztcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB6LWluZGV4OiAxMDA7XG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRNb2RhbENvbnRlbnQgPSBzdHlsZWQoTW9kYWxDb250ZW50KWBcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXN0fTtcbmA7XG5cbnR5cGUgTW9kYWxXcmFwcGVyUHJvcHMgPSB7XG4gIGlubmVyV2lkdGg6IG51bWJlcjtcbiAgY2hpbGRyZW46IChhcmc6IFZvaWRGdW5jdGlvbikgPT4gUmVhY3ROb2RlO1xufTtcblxuY29uc3QgTW9kYWxXcmFwcGVyQ29tcG9uZW50ID0gKHsgaW5uZXJXaWR0aCwgY2hpbGRyZW4gfTogTW9kYWxXcmFwcGVyUHJvcHMpID0+IHtcbiAgY29uc3QgW29wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBvbkNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gIH0sIFtdKTtcblxuICBpZiAoaW5uZXJXaWR0aCA8IDYwMSkge1xuICAgIHJldHVybiAoXG4gICAgICA8TW9kYWwgb3Blbj17b3Blbn0gb25PcGVuQ2hhbmdlPXtzZXRJc09wZW59PlxuICAgICAgICA8TW9kYWxUcmlnZ2VyPlxuICAgICAgICAgIDxCdXR0b25WMiBjc3M9e2J1dHRvblRvZ2dsZUNzc30+XG4gICAgICAgICAgICA8TGVhcm5pbmdQYXRoIC8+XG4gICAgICAgICAgICA8c3Bhbj57dCgnbGVhcm5pbmdQYXRoLm9wZW5NZW51VG9vbHRpcCcpfTwvc3Bhbj5cbiAgICAgICAgICA8L0J1dHRvblYyPlxuICAgICAgICA8L01vZGFsVHJpZ2dlcj5cbiAgICAgICAgPFN0eWxlZE1vZGFsQ29udGVudCBhbmltYXRpb25EdXJhdGlvbj17MjAwfSBzaXplPVwiZnVsbFwiPlxuICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgIDxNb2RhbENsb3NlQnV0dG9uIC8+XG4gICAgICAgICAgPC9Nb2RhbEhlYWRlcj5cbiAgICAgICAgICA8TW9kYWxCb2R5PntjaGlsZHJlbihvbkNsb3NlKX08L01vZGFsQm9keT5cbiAgICAgICAgPC9TdHlsZWRNb2RhbENvbnRlbnQ+XG4gICAgICA8L01vZGFsPlxuICAgICk7XG4gIH1cbiAgcmV0dXJuIDw+e2NoaWxkcmVuKCgpID0+IHt9KX08Lz47XG59O1xuXG5leHBvcnQgZGVmYXVsdCBNb2RhbFdyYXBwZXJDb21wb25lbnQ7XG4iXX0= */"));
+var StyledModalContent = /*#__PURE__*/_styled(ModalContent, {
   target: "e7h3tj80",
-  label: "StyledModal"
-})("background-color:", colors.brand.greyLightest, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aE1lbnVNb2RhbFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDaUMiLCJmaWxlIjoiTGVhcm5pbmdQYXRoTWVudU1vZGFsV3JhcHBlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgTW9kYWxIZWFkZXIsIE1vZGFsQm9keSwgTW9kYWxDbG9zZUJ1dHRvbiwgTW9kYWwgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBMZWFybmluZ1BhdGggfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBidXR0b25Ub2dnbGVDc3MgPSBjc3NgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG4gIG1hcmdpbi1yaWdodDogYXV0bztcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB6LWluZGV4OiAxMDA7XG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRNb2RhbCA9IHN0eWxlZChNb2RhbClgXG4gIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG5gO1xuXG50eXBlIE1vZGFsV3JhcHBlclByb3BzID0ge1xuICBpbm5lcldpZHRoOiBudW1iZXI7XG4gIGNoaWxkcmVuOiAoYXJnOiBWb2lkRnVuY3Rpb24pID0+IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IE1vZGFsV3JhcHBlckNvbXBvbmVudCA9ICh7IGlubmVyV2lkdGgsIGNoaWxkcmVuIH06IE1vZGFsV3JhcHBlclByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgaWYgKGlubmVyV2lkdGggPCA2MDEpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZE1vZGFsXG4gICAgICAgIGFuaW1hdGlvbkR1cmF0aW9uPXsyMDB9XG4gICAgICAgIHNpemU9XCJmdWxsXCJcbiAgICAgICAgYWN0aXZhdGVCdXR0b249e1xuICAgICAgICAgIDxCdXR0b25WMiBjc3M9e2J1dHRvblRvZ2dsZUNzc30+XG4gICAgICAgICAgICA8TGVhcm5pbmdQYXRoIC8+XG4gICAgICAgICAgICA8c3Bhbj57dCgnbGVhcm5pbmdQYXRoLm9wZW5NZW51VG9vbHRpcCcpfTwvc3Bhbj5cbiAgICAgICAgICA8L0J1dHRvblYyPlxuICAgICAgICB9XG4gICAgICA+XG4gICAgICAgIHsoY2xvc2VNb2RhbDogVm9pZEZ1bmN0aW9uKSA9PiAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgPE1vZGFsQ2xvc2VCdXR0b24gdGl0bGU9e3QoJ21vZGFsLmNsb3NlTW9kYWwnKX0gb25DbGljaz17Y2xvc2VNb2RhbH0gLz5cbiAgICAgICAgICAgIDwvTW9kYWxIZWFkZXI+XG4gICAgICAgICAgICA8TW9kYWxCb2R5PntjaGlsZHJlbihjbG9zZU1vZGFsKX08L01vZGFsQm9keT5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKX1cbiAgICAgIDwvU3R5bGVkTW9kYWw+XG4gICAgKTtcbiAgfVxuICByZXR1cm4gPD57Y2hpbGRyZW4oKCkgPT4ge30pfTwvPjtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1vZGFsV3JhcHBlckNvbXBvbmVudDtcbiJdfQ== */"));
+  label: "StyledModalContent"
+})("background-color:", colors.brand.greyLightest, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxlYXJuaW5nUGF0aE1lbnVNb2RhbFdyYXBwZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDK0MiLCJmaWxlIjoiTGVhcm5pbmdQYXRoTWVudU1vZGFsV3JhcHBlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHNwYWNpbmcsIG1xLCBicmVha3BvaW50cywgY29sb3JzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBNb2RhbEhlYWRlciwgTW9kYWxCb2R5LCBNb2RhbFRyaWdnZXIsIE1vZGFsQ2xvc2VCdXR0b24sIE1vZGFsLCBNb2RhbENvbnRlbnQgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBCdXR0b25WMiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBMZWFybmluZ1BhdGggfSBmcm9tICdAbmRsYS9pY29ucy9jb250ZW50VHlwZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5jb25zdCBidXR0b25Ub2dnbGVDc3MgPSBjc3NgXG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG4gIG1hcmdpbi1yaWdodDogYXV0bztcbiAgbWFyZ2luLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB6LWluZGV4OiAxMDA7XG4gIHN2ZyB7XG4gICAgd2lkdGg6IDIwcHg7XG4gICAgaGVpZ2h0OiAyMHB4O1xuICAgIG1hcmdpbi1yaWdodDogJHtzcGFjaW5nLnhzbWFsbH07XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpO1xuICB9XG5gO1xuXG5jb25zdCBTdHlsZWRNb2RhbENvbnRlbnQgPSBzdHlsZWQoTW9kYWxDb250ZW50KWBcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXN0fTtcbmA7XG5cbnR5cGUgTW9kYWxXcmFwcGVyUHJvcHMgPSB7XG4gIGlubmVyV2lkdGg6IG51bWJlcjtcbiAgY2hpbGRyZW46IChhcmc6IFZvaWRGdW5jdGlvbikgPT4gUmVhY3ROb2RlO1xufTtcblxuY29uc3QgTW9kYWxXcmFwcGVyQ29tcG9uZW50ID0gKHsgaW5uZXJXaWR0aCwgY2hpbGRyZW4gfTogTW9kYWxXcmFwcGVyUHJvcHMpID0+IHtcbiAgY29uc3QgW29wZW4sIHNldElzT3Blbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcblxuICBjb25zdCBvbkNsb3NlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHNldElzT3BlbihmYWxzZSk7XG4gIH0sIFtdKTtcblxuICBpZiAoaW5uZXJXaWR0aCA8IDYwMSkge1xuICAgIHJldHVybiAoXG4gICAgICA8TW9kYWwgb3Blbj17b3Blbn0gb25PcGVuQ2hhbmdlPXtzZXRJc09wZW59PlxuICAgICAgICA8TW9kYWxUcmlnZ2VyPlxuICAgICAgICAgIDxCdXR0b25WMiBjc3M9e2J1dHRvblRvZ2dsZUNzc30+XG4gICAgICAgICAgICA8TGVhcm5pbmdQYXRoIC8+XG4gICAgICAgICAgICA8c3Bhbj57dCgnbGVhcm5pbmdQYXRoLm9wZW5NZW51VG9vbHRpcCcpfTwvc3Bhbj5cbiAgICAgICAgICA8L0J1dHRvblYyPlxuICAgICAgICA8L01vZGFsVHJpZ2dlcj5cbiAgICAgICAgPFN0eWxlZE1vZGFsQ29udGVudCBhbmltYXRpb25EdXJhdGlvbj17MjAwfSBzaXplPVwiZnVsbFwiPlxuICAgICAgICAgIDxNb2RhbEhlYWRlcj5cbiAgICAgICAgICAgIDxNb2RhbENsb3NlQnV0dG9uIC8+XG4gICAgICAgICAgPC9Nb2RhbEhlYWRlcj5cbiAgICAgICAgICA8TW9kYWxCb2R5PntjaGlsZHJlbihvbkNsb3NlKX08L01vZGFsQm9keT5cbiAgICAgICAgPC9TdHlsZWRNb2RhbENvbnRlbnQ+XG4gICAgICA8L01vZGFsPlxuICAgICk7XG4gIH1cbiAgcmV0dXJuIDw+e2NoaWxkcmVuKCgpID0+IHt9KX08Lz47XG59O1xuXG5leHBvcnQgZGVmYXVsdCBNb2RhbFdyYXBwZXJDb21wb25lbnQ7XG4iXX0= */"));
 var ModalWrapperComponent = function ModalWrapperComponent(_ref) {
   var innerWidth = _ref.innerWidth,
-    _children = _ref.children;
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var onClose = useCallback(function () {
+    setIsOpen(false);
+  }, []);
   if (innerWidth < 601) {
-    return _jsx(StyledModal, {
-      animationDuration: 200,
-      size: "full",
-      activateButton: _jsxs(ButtonV2, {
-        css: buttonToggleCss,
-        children: [_jsx(LearningPath, {}), _jsx("span", {
-          children: t('learningPath.openMenuTooltip')
-        })]
-      }),
-      children: function children(closeModal) {
-        return _jsxs(_Fragment, {
-          children: [_jsx(ModalHeader, {
-            children: _jsx(ModalCloseButton, {
-              title: t('modal.closeModal'),
-              onClick: closeModal
-            })
-          }), _jsx(ModalBody, {
-            children: _children(closeModal)
+    return _jsxs(Modal, {
+      open: open,
+      onOpenChange: setIsOpen,
+      children: [_jsx(ModalTrigger, {
+        children: _jsxs(ButtonV2, {
+          css: buttonToggleCss,
+          children: [_jsx(LearningPath, {}), _jsx("span", {
+            children: t('learningPath.openMenuTooltip')
           })]
-        });
-      }
+        })
+      }), _jsxs(StyledModalContent, {
+        animationDuration: 200,
+        size: "full",
+        children: [_jsx(ModalHeader, {
+          children: _jsx(ModalCloseButton, {})
+        }), _jsx(ModalBody, {
+          children: children(onClose)
+        })]
+      })]
     });
   }
   return _jsx(_Fragment, {
-    children: _children(function () {})
+    children: children(function () {})
   });
 };
 export default ModalWrapperComponent;

package/es/Masthead/MastheadSearchModal.js

@@ -5,8 +5,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState } from 'react';
-import { Drawer } from '@ndla/modal';
+import React, { useCallback, useState } from 'react';
+import { Drawer, Modal, ModalTrigger } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
@@ -14,11 +14,10 @@ import { useTranslation } from 'react-i18next';
 import ToggleSearchButton from '../Search/ToggleSearchButton';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 var StyledDrawer = /*#__PURE__*/_styled(Drawer, {
   target: "e11h7ky71",
   label: "StyledDrawer"
-})("background-color:", colors.brand.greyLightest, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1hc3RoZWFkU2VhcmNoTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCbUMiLCJmaWxlIjoiTWFzdGhlYWRTZWFyY2hNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IERyYXdlciB9IGZyb20gJ0BuZGxhL21vZGFsJztcbmltcG9ydCB7IEljb25CdXR0b25WMiBhcyBJY29uQnV0dG9uIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCB7IENyb3NzIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmcsIG1xLCBicmVha3BvaW50cywgY29sb3JzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IFRvZ2dsZVNlYXJjaEJ1dHRvbiBmcm9tICcuLi9TZWFyY2gvVG9nZ2xlU2VhcmNoQnV0dG9uJztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgb25DbG9zZTogVm9pZEZ1bmN0aW9uO1xuICBjaGlsZHJlbjogKGFyZzogKCkgPT4gdm9pZCkgPT4gUmVhY3ROb2RlO1xuICBoaWRlT25OYXJyb3dTY3JlZW4/OiBib29sZWFuO1xuICBuZGxhRmlsbT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZERyYXdlciA9IHN0eWxlZChEcmF3ZXIpYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHRlc3R9O1xuYDtcblxuY29uc3QgU3R5bGVkSGVhZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHdpZHRoOiAxMDI0cHg7XG4gICAgbWF4LXdpZHRoOiBjYWxjKDEwMHZ3IC0gMTAwcHgpO1xuICB9XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgd2lkdGg6IDEwMjRweDtcbiAgICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxNTZweCk7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwIGF1dG87XG5cbiAgZGlzcGxheTogZmxleDtcbiAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmcuc21hbGx9O1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiBjYWxjKCR7c3BhY2luZy5ub3JtYWx9ICsgJHtzcGFjaW5nLnNtYWxsfSk7XG4gICAgcGFkZGluZy1ib3R0b206IGNhbGMoJHtzcGFjaW5nLm5vcm1hbH0gKyAke3NwYWNpbmcuc21hbGx9KTtcbiAgfVxuICA+IGlucHV0IHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW4tcmlnaHQ6IC0ke3NwYWNpbmcubGFyZ2V9O1xuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICAuYy1zZWFyY2gtZmllbGRfX2J1dHRvbi0tY2xvc2Uge1xuICAgICAgICByaWdodDogJHtzcGFjaW5nLmxhcmdlfSArICR7c3BhY2luZy5ub3JtYWx9O1xuICAgICAgICB0b3A6IDE2cHg7XG4gICAgICB9XG4gICAgICAuYy1zZWFyY2gtZmllbGRfX2J1dHRvbi0tc2VhcmNoSWNvbiB7XG4gICAgICAgIHJpZ2h0OiAke3NwYWNpbmcubGFyZ2V9O1xuICAgICAgICB0b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBNYXN0aGVhZFNlYXJjaE1vZGFsID0gKHsgb25DbG9zZTogb25TZWFyY2hDbG9zZSwgY2hpbGRyZW4sIGhpZGVPbk5hcnJvd1NjcmVlbiwgbmRsYUZpbG0gfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8VG9nZ2xlU2VhcmNoQnV0dG9uIGhpZGVPbk5hcnJvd1NjcmVlbj17aGlkZU9uTmFycm93U2NyZWVufSBvbkNsaWNrPXsoKSA9PiBzZXRJc09wZW4odHJ1ZSl9IG5kbGFGaWxtPXtuZGxhRmlsbX0+XG4gICAgICAgIHt0KCdtYXN0aGVhZC5tZW51LnNlYXJjaCcpfVxuICAgICAgPC9Ub2dnbGVTZWFyY2hCdXR0b24+XG4gICAgICA8U3R5bGVkRHJhd2VyXG4gICAgICAgIGNvbnRyb2xsZWRcbiAgICAgICAgYXJpYS1sYWJlbD17dCgnc2VhcmNoUGFnZS5zZWFyY2hGaWVsZFBsYWNlaG9sZGVyJyl9XG4gICAgICAgIHBvc2l0aW9uPVwidG9wXCJcbiAgICAgICAgZXhwYW5kc1xuICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICBhbmltYXRpb249XCJzbGlkZUluXCJcbiAgICAgICAgYW5pbWF0aW9uRHVyYXRpb249ezIwMH1cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG9uQ2xvc2U9eygpID0+IHtcbiAgICAgICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgICAgICAgIG9uU2VhcmNoQ2xvc2UoKTtcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgeyhjbG9zZU1vZGFsKSA9PiAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxTdHlsZWRIZWFkZXI+XG4gICAgICAgICAgICAgIHtjaGlsZHJlbihjbG9zZU1vZGFsKX1cbiAgICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXt0KCd3ZWxjb21lUGFnZS5jbG9zZVNlYXJjaCcpfVxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJnaG9zdFwiXG4gICAgICAgICAgICAgICAgY29sb3JUaGVtZT1cImxpZ2h0XCJcbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtjbG9zZU1vZGFsfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENyb3NzIGNsYXNzTmFtZT1cImMtaWNvbi0tbWVkaXVtXCIgLz5cbiAgICAgICAgICAgICAgPC9JY29uQnV0dG9uPlxuICAgICAgICAgICAgPC9TdHlsZWRIZWFkZXI+XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZERyYXdlcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1hc3RoZWFkU2VhcmNoTW9kYWw7XG4iXX0= */"));
+})("background-color:", colors.brand.greyLightest, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1hc3RoZWFkU2VhcmNoTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCbUMiLCJmaWxlIjoiTWFzdGhlYWRTZWFyY2hNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VDYWxsYmFjaywgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBEcmF3ZXIsIE1vZGFsLCBNb2RhbFRyaWdnZXIgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBJY29uQnV0dG9uVjIgYXMgSWNvbkJ1dHRvbiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBDcm9zcyB9IGZyb20gJ0BuZGxhL2ljb25zL2FjdGlvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBUb2dnbGVTZWFyY2hCdXR0b24gZnJvbSAnLi4vU2VhcmNoL1RvZ2dsZVNlYXJjaEJ1dHRvbic7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG9uQ2xvc2U6IFZvaWRGdW5jdGlvbjtcbiAgY2hpbGRyZW46IChhcmc6ICgpID0+IHZvaWQpID0+IFJlYWN0Tm9kZTtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgbmRsYUZpbG0/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWREcmF3ZXIgPSBzdHlsZWQoRHJhd2VyKWBcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXN0fTtcbmA7XG5cbmNvbnN0IFN0eWxlZEhlYWRlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICB3aWR0aDogMTAyNHB4O1xuICAgIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDEwMHB4KTtcbiAgfVxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIHdpZHRoOiAxMDI0cHg7XG4gICAgbWF4LXdpZHRoOiBjYWxjKDEwMHZ3IC0gMTU2cHgpO1xuICB9XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMCBhdXRvO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmctdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLmRlc2t0b3AgfSl9IHtcbiAgICBwYWRkaW5nLXRvcDogY2FsYygke3NwYWNpbmcubm9ybWFsfSArICR7c3BhY2luZy5zbWFsbH0pO1xuICAgIHBhZGRpbmctYm90dG9tOiBjYWxjKCR7c3BhY2luZy5ub3JtYWx9ICsgJHtzcGFjaW5nLnNtYWxsfSk7XG4gIH1cbiAgPiBpbnB1dCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWFyZ2luLXJpZ2h0OiAtJHtzcGFjaW5nLmxhcmdlfTtcbiAgICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgICAgLmMtc2VhcmNoLWZpZWxkX19idXR0b24tLWNsb3NlIHtcbiAgICAgICAgcmlnaHQ6ICR7c3BhY2luZy5sYXJnZX0gKyAke3NwYWNpbmcubm9ybWFsfTtcbiAgICAgICAgdG9wOiAxNnB4O1xuICAgICAgfVxuICAgICAgLmMtc2VhcmNoLWZpZWxkX19idXR0b24tLXNlYXJjaEljb24ge1xuICAgICAgICByaWdodDogJHtzcGFjaW5nLmxhcmdlfTtcbiAgICAgICAgdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICAgICAgfVxuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTWFzdGhlYWRTZWFyY2hNb2RhbCA9ICh7IG9uQ2xvc2U6IG9uU2VhcmNoQ2xvc2UsIGNoaWxkcmVuLCBoaWRlT25OYXJyb3dTY3JlZW4sIG5kbGFGaWxtIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBjbG9zZU1vZGFsID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIG9uU2VhcmNoQ2xvc2UoKTtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICB9LCBbb25TZWFyY2hDbG9zZV0pO1xuXG4gIHJldHVybiAoXG4gICAgPE1vZGFsIG9wZW49e2lzT3Blbn0gb25PcGVuQ2hhbmdlPXtzZXRJc09wZW59PlxuICAgICAgPE1vZGFsVHJpZ2dlcj5cbiAgICAgICAgPFRvZ2dsZVNlYXJjaEJ1dHRvbiBoaWRlT25OYXJyb3dTY3JlZW49e2hpZGVPbk5hcnJvd1NjcmVlbn0gb25DbGljaz17KCkgPT4gc2V0SXNPcGVuKHRydWUpfSBuZGxhRmlsbT17bmRsYUZpbG19PlxuICAgICAgICAgIHt0KCdtYXN0aGVhZC5tZW51LnNlYXJjaCcpfVxuICAgICAgICA8L1RvZ2dsZVNlYXJjaEJ1dHRvbj5cbiAgICAgIDwvTW9kYWxUcmlnZ2VyPlxuICAgICAgPFN0eWxlZERyYXdlclxuICAgICAgICBhcmlhLWxhYmVsPXt0KCdzZWFyY2hQYWdlLnNlYXJjaEZpZWxkUGxhY2Vob2xkZXInKX1cbiAgICAgICAgcG9zaXRpb249XCJ0b3BcIlxuICAgICAgICBleHBhbmRzXG4gICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgIGFuaW1hdGlvbkR1cmF0aW9uPXsyMDB9XG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRIZWFkZXI+XG4gICAgICAgICAge2NoaWxkcmVuKGNsb3NlTW9kYWwpfVxuICAgICAgICAgIDxJY29uQnV0dG9uIGFyaWEtbGFiZWw9e3QoJ3dlbGNvbWVQYWdlLmNsb3NlU2VhcmNoJyl9IHZhcmlhbnQ9XCJnaG9zdFwiIGNvbG9yVGhlbWU9XCJsaWdodFwiIG9uQ2xpY2s9e2Nsb3NlTW9kYWx9PlxuICAgICAgICAgICAgPENyb3NzIGNsYXNzTmFtZT1cImMtaWNvbi0tbWVkaXVtXCIgLz5cbiAgICAgICAgICA8L0ljb25CdXR0b24+XG4gICAgICAgIDwvU3R5bGVkSGVhZGVyPlxuICAgICAgPC9TdHlsZWREcmF3ZXI+XG4gICAgPC9Nb2RhbD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1hc3RoZWFkU2VhcmNoTW9kYWw7XG4iXX0= */"));
 var StyledHeader = /*#__PURE__*/_styled("div", {
   target: "e11h7ky70",
   label: "StyledHeader"
@@ -32,10 +31,10 @@ var StyledHeader = /*#__PURE__*/_styled("div", {
   from: breakpoints.desktop
 }), "{padding-top:calc(", spacing.normal, " + ", spacing.small, ");padding-bottom:calc(", spacing.normal, " + ", spacing.small, ");}>input{width:100%;margin-right:-", spacing.large, ";", mq.range({
   until: breakpoints.tablet
-}), "{.c-search-field__button--close{right:", spacing.large, "+", spacing.normal, ";top:16px;}.c-search-field__button--searchIcon{right:", spacing.large, ";top:", spacing.small, ";}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1hc3RoZWFkU2VhcmNoTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CK0IiLCJmaWxlIjoiTWFzdGhlYWRTZWFyY2hNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IERyYXdlciB9IGZyb20gJ0BuZGxhL21vZGFsJztcbmltcG9ydCB7IEljb25CdXR0b25WMiBhcyBJY29uQnV0dG9uIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCB7IENyb3NzIH0gZnJvbSAnQG5kbGEvaWNvbnMvYWN0aW9uJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHNwYWNpbmcsIG1xLCBicmVha3BvaW50cywgY29sb3JzIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IFRvZ2dsZVNlYXJjaEJ1dHRvbiBmcm9tICcuLi9TZWFyY2gvVG9nZ2xlU2VhcmNoQnV0dG9uJztcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgb25DbG9zZTogVm9pZEZ1bmN0aW9uO1xuICBjaGlsZHJlbjogKGFyZzogKCkgPT4gdm9pZCkgPT4gUmVhY3ROb2RlO1xuICBoaWRlT25OYXJyb3dTY3JlZW4/OiBib29sZWFuO1xuICBuZGxhRmlsbT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZERyYXdlciA9IHN0eWxlZChEcmF3ZXIpYFxuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHRlc3R9O1xuYDtcblxuY29uc3QgU3R5bGVkSGVhZGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZ2FwOiAke3NwYWNpbmcuc21hbGx9O1xuICBhbGlnbi1pdGVtczogZmxleC1zdGFydDtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHdpZHRoOiAxMDI0cHg7XG4gICAgbWF4LXdpZHRoOiBjYWxjKDEwMHZ3IC0gMTAwcHgpO1xuICB9XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy5kZXNrdG9wIH0pfSB7XG4gICAgd2lkdGg6IDEwMjRweDtcbiAgICBtYXgtd2lkdGg6IGNhbGMoMTAwdncgLSAxNTZweCk7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwIGF1dG87XG5cbiAgZGlzcGxheTogZmxleDtcbiAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmcuc21hbGx9O1xuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIHBhZGRpbmctYm90dG9tOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgfVxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiBjYWxjKCR7c3BhY2luZy5ub3JtYWx9ICsgJHtzcGFjaW5nLnNtYWxsfSk7XG4gICAgcGFkZGluZy1ib3R0b206IGNhbGMoJHtzcGFjaW5nLm5vcm1hbH0gKyAke3NwYWNpbmcuc21hbGx9KTtcbiAgfVxuICA+IGlucHV0IHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW4tcmlnaHQ6IC0ke3NwYWNpbmcubGFyZ2V9O1xuICAgICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgICAuYy1zZWFyY2gtZmllbGRfX2J1dHRvbi0tY2xvc2Uge1xuICAgICAgICByaWdodDogJHtzcGFjaW5nLmxhcmdlfSArICR7c3BhY2luZy5ub3JtYWx9O1xuICAgICAgICB0b3A6IDE2cHg7XG4gICAgICB9XG4gICAgICAuYy1zZWFyY2gtZmllbGRfX2J1dHRvbi0tc2VhcmNoSWNvbiB7XG4gICAgICAgIHJpZ2h0OiAke3NwYWNpbmcubGFyZ2V9O1xuICAgICAgICB0b3A6ICR7c3BhY2luZy5zbWFsbH07XG4gICAgICB9XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBNYXN0aGVhZFNlYXJjaE1vZGFsID0gKHsgb25DbG9zZTogb25TZWFyY2hDbG9zZSwgY2hpbGRyZW4sIGhpZGVPbk5hcnJvd1NjcmVlbiwgbmRsYUZpbG0gfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpO1xuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8VG9nZ2xlU2VhcmNoQnV0dG9uIGhpZGVPbk5hcnJvd1NjcmVlbj17aGlkZU9uTmFycm93U2NyZWVufSBvbkNsaWNrPXsoKSA9PiBzZXRJc09wZW4odHJ1ZSl9IG5kbGFGaWxtPXtuZGxhRmlsbX0+XG4gICAgICAgIHt0KCdtYXN0aGVhZC5tZW51LnNlYXJjaCcpfVxuICAgICAgPC9Ub2dnbGVTZWFyY2hCdXR0b24+XG4gICAgICA8U3R5bGVkRHJhd2VyXG4gICAgICAgIGNvbnRyb2xsZWRcbiAgICAgICAgYXJpYS1sYWJlbD17dCgnc2VhcmNoUGFnZS5zZWFyY2hGaWVsZFBsYWNlaG9sZGVyJyl9XG4gICAgICAgIHBvc2l0aW9uPVwidG9wXCJcbiAgICAgICAgZXhwYW5kc1xuICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICBhbmltYXRpb249XCJzbGlkZUluXCJcbiAgICAgICAgYW5pbWF0aW9uRHVyYXRpb249ezIwMH1cbiAgICAgICAgaXNPcGVuPXtpc09wZW59XG4gICAgICAgIG9uQ2xvc2U9eygpID0+IHtcbiAgICAgICAgICBzZXRJc09wZW4oZmFsc2UpO1xuICAgICAgICAgIG9uU2VhcmNoQ2xvc2UoKTtcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgeyhjbG9zZU1vZGFsKSA9PiAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxTdHlsZWRIZWFkZXI+XG4gICAgICAgICAgICAgIHtjaGlsZHJlbihjbG9zZU1vZGFsKX1cbiAgICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXt0KCd3ZWxjb21lUGFnZS5jbG9zZVNlYXJjaCcpfVxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJnaG9zdFwiXG4gICAgICAgICAgICAgICAgY29sb3JUaGVtZT1cImxpZ2h0XCJcbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtjbG9zZU1vZGFsfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgPENyb3NzIGNsYXNzTmFtZT1cImMtaWNvbi0tbWVkaXVtXCIgLz5cbiAgICAgICAgICAgICAgPC9JY29uQnV0dG9uPlxuICAgICAgICAgICAgPC9TdHlsZWRIZWFkZXI+XG4gICAgICAgICAgPC8+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZERyYXdlcj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1hc3RoZWFkU2VhcmNoTW9kYWw7XG4iXX0= */"));
+}), "{.c-search-field__button--close{right:", spacing.large, "+", spacing.normal, ";top:16px;}.c-search-field__button--searchIcon{right:", spacing.large, ";top:", spacing.small, ";}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1hc3RoZWFkU2VhcmNoTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CK0IiLCJmaWxlIjoiTWFzdGhlYWRTZWFyY2hNb2RhbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VDYWxsYmFjaywgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBEcmF3ZXIsIE1vZGFsLCBNb2RhbFRyaWdnZXIgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBJY29uQnV0dG9uVjIgYXMgSWNvbkJ1dHRvbiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgeyBDcm9zcyB9IGZyb20gJ0BuZGxhL2ljb25zL2FjdGlvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMsIGNvbG9ycyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0JztcbmltcG9ydCBUb2dnbGVTZWFyY2hCdXR0b24gZnJvbSAnLi4vU2VhcmNoL1RvZ2dsZVNlYXJjaEJ1dHRvbic7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIG9uQ2xvc2U6IFZvaWRGdW5jdGlvbjtcbiAgY2hpbGRyZW46IChhcmc6ICgpID0+IHZvaWQpID0+IFJlYWN0Tm9kZTtcbiAgaGlkZU9uTmFycm93U2NyZWVuPzogYm9vbGVhbjtcbiAgbmRsYUZpbG0/OiBib29sZWFuO1xufVxuXG5jb25zdCBTdHlsZWREcmF3ZXIgPSBzdHlsZWQoRHJhd2VyKWBcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMuYnJhbmQuZ3JleUxpZ2h0ZXN0fTtcbmA7XG5cbmNvbnN0IFN0eWxlZEhlYWRlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXQgfSl9IHtcbiAgICB3aWR0aDogMTAyNHB4O1xuICAgIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDEwMHB4KTtcbiAgfVxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgIHdpZHRoOiAxMDI0cHg7XG4gICAgbWF4LXdpZHRoOiBjYWxjKDEwMHZ3IC0gMTU2cHgpO1xuICB9XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMCBhdXRvO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmctdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLmRlc2t0b3AgfSl9IHtcbiAgICBwYWRkaW5nLXRvcDogY2FsYygke3NwYWNpbmcubm9ybWFsfSArICR7c3BhY2luZy5zbWFsbH0pO1xuICAgIHBhZGRpbmctYm90dG9tOiBjYWxjKCR7c3BhY2luZy5ub3JtYWx9ICsgJHtzcGFjaW5nLnNtYWxsfSk7XG4gIH1cbiAgPiBpbnB1dCB7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgbWFyZ2luLXJpZ2h0OiAtJHtzcGFjaW5nLmxhcmdlfTtcbiAgICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgICAgLmMtc2VhcmNoLWZpZWxkX19idXR0b24tLWNsb3NlIHtcbiAgICAgICAgcmlnaHQ6ICR7c3BhY2luZy5sYXJnZX0gKyAke3NwYWNpbmcubm9ybWFsfTtcbiAgICAgICAgdG9wOiAxNnB4O1xuICAgICAgfVxuICAgICAgLmMtc2VhcmNoLWZpZWxkX19idXR0b24tLXNlYXJjaEljb24ge1xuICAgICAgICByaWdodDogJHtzcGFjaW5nLmxhcmdlfTtcbiAgICAgICAgdG9wOiAke3NwYWNpbmcuc21hbGx9O1xuICAgICAgfVxuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgTWFzdGhlYWRTZWFyY2hNb2RhbCA9ICh7IG9uQ2xvc2U6IG9uU2VhcmNoQ2xvc2UsIGNoaWxkcmVuLCBoaWRlT25OYXJyb3dTY3JlZW4sIG5kbGFGaWxtIH06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHsgdCB9ID0gdXNlVHJhbnNsYXRpb24oKTtcbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCBjbG9zZU1vZGFsID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIG9uU2VhcmNoQ2xvc2UoKTtcbiAgICBzZXRJc09wZW4oZmFsc2UpO1xuICB9LCBbb25TZWFyY2hDbG9zZV0pO1xuXG4gIHJldHVybiAoXG4gICAgPE1vZGFsIG9wZW49e2lzT3Blbn0gb25PcGVuQ2hhbmdlPXtzZXRJc09wZW59PlxuICAgICAgPE1vZGFsVHJpZ2dlcj5cbiAgICAgICAgPFRvZ2dsZVNlYXJjaEJ1dHRvbiBoaWRlT25OYXJyb3dTY3JlZW49e2hpZGVPbk5hcnJvd1NjcmVlbn0gb25DbGljaz17KCkgPT4gc2V0SXNPcGVuKHRydWUpfSBuZGxhRmlsbT17bmRsYUZpbG19PlxuICAgICAgICAgIHt0KCdtYXN0aGVhZC5tZW51LnNlYXJjaCcpfVxuICAgICAgICA8L1RvZ2dsZVNlYXJjaEJ1dHRvbj5cbiAgICAgIDwvTW9kYWxUcmlnZ2VyPlxuICAgICAgPFN0eWxlZERyYXdlclxuICAgICAgICBhcmlhLWxhYmVsPXt0KCdzZWFyY2hQYWdlLnNlYXJjaEZpZWxkUGxhY2Vob2xkZXInKX1cbiAgICAgICAgcG9zaXRpb249XCJ0b3BcIlxuICAgICAgICBleHBhbmRzXG4gICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgIGFuaW1hdGlvbkR1cmF0aW9uPXsyMDB9XG4gICAgICA+XG4gICAgICAgIDxTdHlsZWRIZWFkZXI+XG4gICAgICAgICAge2NoaWxkcmVuKGNsb3NlTW9kYWwpfVxuICAgICAgICAgIDxJY29uQnV0dG9uIGFyaWEtbGFiZWw9e3QoJ3dlbGNvbWVQYWdlLmNsb3NlU2VhcmNoJyl9IHZhcmlhbnQ9XCJnaG9zdFwiIGNvbG9yVGhlbWU9XCJsaWdodFwiIG9uQ2xpY2s9e2Nsb3NlTW9kYWx9PlxuICAgICAgICAgICAgPENyb3NzIGNsYXNzTmFtZT1cImMtaWNvbi0tbWVkaXVtXCIgLz5cbiAgICAgICAgICA8L0ljb25CdXR0b24+XG4gICAgICAgIDwvU3R5bGVkSGVhZGVyPlxuICAgICAgPC9TdHlsZWREcmF3ZXI+XG4gICAgPC9Nb2RhbD5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1hc3RoZWFkU2VhcmNoTW9kYWw7XG4iXX0= */"));
 var MastheadSearchModal = function MastheadSearchModal(_ref) {
   var onSearchClose = _ref.onClose,
-    _children = _ref.children,
+    children = _ref.children,
     hideOnNarrowScreen = _ref.hideOnNarrowScreen,
     ndlaFilm = _ref.ndlaFilm;
   var _useTranslation = useTranslation(),
@@ -44,42 +43,39 @@ var MastheadSearchModal = function MastheadSearchModal(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  return _jsxs(_Fragment, {
-    children: [_jsx(ToggleSearchButton, {
-      hideOnNarrowScreen: hideOnNarrowScreen,
-      onClick: function onClick() {
-        return setIsOpen(true);
-      },
-      ndlaFilm: ndlaFilm,
-      children: t('masthead.menu.search')
+  var closeModal = useCallback(function () {
+    onSearchClose();
+    setIsOpen(false);
+  }, [onSearchClose]);
+  return _jsxs(Modal, {
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    children: [_jsx(ModalTrigger, {
+      children: _jsx(ToggleSearchButton, {
+        hideOnNarrowScreen: hideOnNarrowScreen,
+        onClick: function onClick() {
+          return setIsOpen(true);
+        },
+        ndlaFilm: ndlaFilm,
+        children: t('masthead.menu.search')
+      })
     }), _jsx(StyledDrawer, {
-      controlled: true,
       "aria-label": t('searchPage.searchFieldPlaceholder'),
       position: "top",
       expands: true,
       size: "small",
-      animation: "slideIn",
       animationDuration: 200,
-      isOpen: isOpen,
-      onClose: function onClose() {
-        setIsOpen(false);
-        onSearchClose();
-      },
-      children: function children(closeModal) {
-        return _jsx(_Fragment, {
-          children: _jsxs(StyledHeader, {
-            children: [_children(closeModal), _jsx(IconButton, {
-              "aria-label": t('welcomePage.closeSearch'),
-              variant: "ghost",
-              colorTheme: "light",
-              onClick: closeModal,
-              children: _jsx(Cross, {
-                className: "c-icon--medium"
-              })
-            })]
+      children: _jsxs(StyledHeader, {
+        children: [children(closeModal), _jsx(IconButton, {
+          "aria-label": t('welcomePage.closeSearch'),
+          variant: "ghost",
+          colorTheme: "light",
+          onClick: closeModal,
+          children: _jsx(Cross, {
+            className: "c-icon--medium"
           })
-        });
-      }
+        })]
+      })
     })]
   });
 };

package/es/NDLAFilm/AboutNdlaFilm.js

@@ -1,19 +1,18 @@
 import _styled from "@emotion/styled/base";
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
 import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
 import VisualElement from './VisualElement';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var StyledAside = /*#__PURE__*/_styled("aside", {
   target: "ehw69710",
   label: "StyledAside"
 })("background:#184673;color:#fff;display:flex;padding:", spacing.normal, " ", spacing.normal, " ", spacing.medium, ";>div{padding:", spacing.normal, ";width:50%;h2{text-transform:uppercase;letter-spacing:0.05em;color:#fff;margin:0 0 ", spacing.small, " 0;}}button{color:#fff;&:hover,&:focus{color:", colors.brand.light, ";}}", mq.range({
   until: breakpoints.tablet
-}), "{flex-direction:column;>div{width:auto;&:first-of-type{padding-bottom:0;}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFib3V0TmRsYUZpbG0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFnQyIsImZpbGUiOiJBYm91dE5kbGFGaWxtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgTW9kYWxIZWFkZXIsIE1vZGFsQm9keSwgTW9kYWxDbG9zZUJ1dHRvbiwgTW9kYWwgfSBmcm9tICdAbmRsYS9tb2RhbCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIG1xLCBicmVha3BvaW50cyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuaW1wb3J0IHsgQnV0dG9uVjIgYXMgQnV0dG9uIH0gZnJvbSAnQG5kbGEvYnV0dG9uJztcbmltcG9ydCBWaXN1YWxFbGVtZW50IGZyb20gJy4vVmlzdWFsRWxlbWVudCc7XG5cbmNvbnN0IFN0eWxlZEFzaWRlID0gc3R5bGVkLmFzaWRlYFxuICBiYWNrZ3JvdW5kOiAjMTg0NjczO1xuICBjb2xvcjogI2ZmZjtcbiAgZGlzcGxheTogZmxleDtcbiAgcGFkZGluZzogJHtzcGFjaW5nLm5vcm1hbH0gJHtzcGFjaW5nLm5vcm1hbH0gJHtzcGFjaW5nLm1lZGl1bX07XG4gID4gZGl2IHtcbiAgICBwYWRkaW5nOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgICB3aWR0aDogNTAlO1xuICAgIGgyIHtcbiAgICAgIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gICAgICBsZXR0ZXItc3BhY2luZzogMC4wNWVtO1xuICAgICAgY29sb3I6ICNmZmY7XG4gICAgICBtYXJnaW46IDAgMCAke3NwYWNpbmcuc21hbGx9IDA7XG4gICAgfVxuICB9XG4gIGJ1dHRvbiB7XG4gICAgY29sb3I6ICNmZmY7XG4gICAgJjpob3ZlcixcbiAgICAmOmZvY3VzIHtcbiAgICAgIGNvbG9yOiAke2NvbG9ycy5icmFuZC5saWdodH07XG4gICAgfVxuICB9XG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0IH0pfSB7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICA+IGRpdiB7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAwO1xuICAgICAgfVxuICAgIH1cbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgYWJvdXRORExBVmlkZW86IHtcbiAgICB0aXRsZTogc3RyaW5nO1xuICAgIGRlc2NyaXB0aW9uOiBzdHJpbmc7XG4gICAgdmlzdWFsRWxlbWVudDoge1xuICAgICAgYWx0Pzogc3RyaW5nO1xuICAgICAgdXJsOiBzdHJpbmc7XG4gICAgICB0eXBlOiBzdHJpbmc7XG4gICAgfTtcbiAgfTtcbiAgbW9yZUFib3V0TmRsYUZpbG06IFJlYWN0Tm9kZTtcbn1cblxuY29uc3QgQWJvdXROZGxhRmlsbSA9ICh7IGFib3V0TkRMQVZpZGVvLCBtb3JlQWJvdXROZGxhRmlsbSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHRpdGxlSWQgPSAnYWJvdXQtbmRsYS1maWxtLXRpdGxlJztcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT1cIm8td3JhcHBlclwiPlxuICAgICAgPFN0eWxlZEFzaWRlIGFyaWEtbGFiZWxsZWRieT17dGl0bGVJZH0+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPFZpc3VhbEVsZW1lbnQgdmlzdWFsRWxlbWVudD17YWJvdXRORExBVmlkZW8udmlzdWFsRWxlbWVudH0gLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXY+XG4gICAgICAgICAgPGgyIGlkPXt0aXRsZUlkfT57YWJvdXRORExBVmlkZW8udGl0bGV9PC9oMj5cbiAgICAgICAgICA8cD57YWJvdXRORExBVmlkZW8uZGVzY3JpcHRpb259PC9wPlxuICAgICAgICAgIDxNb2RhbCBzaXplPVwiZnVsbFwiIGFjdGl2YXRlQnV0dG9uPXs8QnV0dG9uIHZhcmlhbnQ9XCJsaW5rXCI+e3QoJ25kbGFGaWxtLmFib3V0Lm1vcmUnKX08L0J1dHRvbj59PlxuICAgICAgICAgICAgeyhvbkNsb3NlKSA9PiAoXG4gICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgPE1vZGFsSGVhZGVyPlxuICAgICAgICAgICAgICAgICAgPE1vZGFsQ2xvc2VCdXR0b24gb25DbGljaz17b25DbG9zZX0gLz5cbiAgICAgICAgICAgICAgICA8L01vZGFsSGVhZGVyPlxuICAgICAgICAgICAgICAgIDxNb2RhbEJvZHk+e21vcmVBYm91dE5kbGFGaWxtfTwvTW9kYWxCb2R5PlxuICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9Nb2RhbD5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L1N0eWxlZEFzaWRlPlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQWJvdXROZGxhRmlsbTtcbiJdfQ== */"));
+}), "{flex-direction:column;>div{width:auto;&:first-of-type{padding-bottom:0;}}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFib3V0TmRsYUZpbG0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVFnQyIsImZpbGUiOiJBYm91dE5kbGFGaWxtLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUcmFuc2xhdGlvbiB9IGZyb20gJ3JlYWN0LWkxOG5leHQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgTW9kYWxIZWFkZXIsIE1vZGFsQm9keSwgTW9kYWxDbG9zZUJ1dHRvbiwgTW9kYWwsIE1vZGFsVHJpZ2dlciwgTW9kYWxDb250ZW50IH0gZnJvbSAnQG5kbGEvbW9kYWwnO1xuaW1wb3J0IHsgY29sb3JzLCBzcGFjaW5nLCBtcSwgYnJlYWtwb2ludHMgfSBmcm9tICdAbmRsYS9jb3JlJztcbmltcG9ydCB7IEJ1dHRvblYyIGFzIEJ1dHRvbiB9IGZyb20gJ0BuZGxhL2J1dHRvbic7XG5pbXBvcnQgVmlzdWFsRWxlbWVudCBmcm9tICcuL1Zpc3VhbEVsZW1lbnQnO1xuXG5jb25zdCBTdHlsZWRBc2lkZSA9IHN0eWxlZC5hc2lkZWBcbiAgYmFja2dyb3VuZDogIzE4NDY3MztcbiAgY29sb3I6ICNmZmY7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5tZWRpdW19O1xuICA+IGRpdiB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLm5vcm1hbH07XG4gICAgd2lkdGg6IDUwJTtcbiAgICBoMiB7XG4gICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgbGV0dGVyLXNwYWNpbmc6IDAuMDVlbTtcbiAgICAgIGNvbG9yOiAjZmZmO1xuICAgICAgbWFyZ2luOiAwIDAgJHtzcGFjaW5nLnNtYWxsfSAwO1xuICAgIH1cbiAgfVxuICBidXR0b24ge1xuICAgIGNvbG9yOiAjZmZmO1xuICAgICY6aG92ZXIsXG4gICAgJjpmb2N1cyB7XG4gICAgICBjb2xvcjogJHtjb2xvcnMuYnJhbmQubGlnaHR9O1xuICAgIH1cbiAgfVxuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgPiBkaXYge1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGFib3V0TkRMQVZpZGVvOiB7XG4gICAgdGl0bGU6IHN0cmluZztcbiAgICBkZXNjcmlwdGlvbjogc3RyaW5nO1xuICAgIHZpc3VhbEVsZW1lbnQ6IHtcbiAgICAgIGFsdD86IHN0cmluZztcbiAgICAgIHVybDogc3RyaW5nO1xuICAgICAgdHlwZTogc3RyaW5nO1xuICAgIH07XG4gIH07XG4gIG1vcmVBYm91dE5kbGFGaWxtOiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEFib3V0TmRsYUZpbG0gPSAoeyBhYm91dE5ETEFWaWRlbywgbW9yZUFib3V0TmRsYUZpbG0gfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICBjb25zdCB0aXRsZUlkID0gJ2Fib3V0LW5kbGEtZmlsbS10aXRsZSc7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9XCJvLXdyYXBwZXJcIj5cbiAgICAgIDxTdHlsZWRBc2lkZSBhcmlhLWxhYmVsbGVkYnk9e3RpdGxlSWR9PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxWaXN1YWxFbGVtZW50IHZpc3VhbEVsZW1lbnQ9e2Fib3V0TkRMQVZpZGVvLnZpc3VhbEVsZW1lbnR9IC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxoMiBpZD17dGl0bGVJZH0+e2Fib3V0TkRMQVZpZGVvLnRpdGxlfTwvaDI+XG4gICAgICAgICAgPHA+e2Fib3V0TkRMQVZpZGVvLmRlc2NyaXB0aW9ufTwvcD5cbiAgICAgICAgICA8TW9kYWw+XG4gICAgICAgICAgICA8TW9kYWxUcmlnZ2VyPlxuICAgICAgICAgICAgICA8QnV0dG9uIHZhcmlhbnQ9XCJsaW5rXCI+e3QoJ25kbGFGaWxtLmFib3V0Lm1vcmUnKX08L0J1dHRvbj5cbiAgICAgICAgICAgIDwvTW9kYWxUcmlnZ2VyPlxuICAgICAgICAgICAgPE1vZGFsQ29udGVudCBzaXplPVwiZnVsbFwiPlxuICAgICAgICAgICAgICA8TW9kYWxIZWFkZXI+XG4gICAgICAgICAgICAgICAgPE1vZGFsQ2xvc2VCdXR0b24gLz5cbiAgICAgICAgICAgICAgPC9Nb2RhbEhlYWRlcj5cbiAgICAgICAgICAgICAgPE1vZGFsQm9keT57bW9yZUFib3V0TmRsYUZpbG19PC9Nb2RhbEJvZHk+XG4gICAgICAgICAgICA8L01vZGFsQ29udGVudD5cbiAgICAgICAgICA8L01vZGFsPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvU3R5bGVkQXNpZGU+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBBYm91dE5kbGFGaWxtO1xuIl19 */"));
 var AboutNdlaFilm = function AboutNdlaFilm(_ref) {
   var aboutNDLAVideo = _ref.aboutNDLAVideo,
     moreAboutNdlaFilm = _ref.moreAboutNdlaFilm;
@@ -34,23 +33,20 @@ var AboutNdlaFilm = function AboutNdlaFilm(_ref) {
           children: aboutNDLAVideo.title
         }), _jsx("p", {
           children: aboutNDLAVideo.description
-        }), _jsx(Modal, {
-          size: "full",
-          activateButton: _jsx(Button, {
-            variant: "link",
-            children: t('ndlaFilm.about.more')
-          }),
-          children: function children(onClose) {
-            return _jsxs(_Fragment, {
-              children: [_jsx(ModalHeader, {
-                children: _jsx(ModalCloseButton, {
-                  onClick: onClose
-                })
-              }), _jsx(ModalBody, {
-                children: moreAboutNdlaFilm
-              })]
-            });
-          }
+        }), _jsxs(Modal, {
+          children: [_jsx(ModalTrigger, {
+            children: _jsx(Button, {
+              variant: "link",
+              children: t('ndlaFilm.about.more')
+            })
+          }), _jsxs(ModalContent, {
+            size: "full",
+            children: [_jsx(ModalHeader, {
+              children: _jsx(ModalCloseButton, {})
+            }), _jsx(ModalBody, {
+              children: moreAboutNdlaFilm
+            })]
+          })]
         })]
       })]
     })