@ndla/ui 55.0.15-alpha.0 → 55.0.17-alpha.0

package/es/Layout/LayoutItem.js

@@ -1,4 +1,3 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -7,41 +6,30 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { useMemo } from "react";
-import { css } from "@emotion/react";
-import { mq, breakpoints } from "@ndla/core";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const centerCss = process.env.NODE_ENV === "production" ? {
-  name: "ivh9x8-centerCss",
-  styles: "position:relative!important;width:83.333%;right:auto!important;left:8.333%;label:centerCss;"
-} : {
-  name: "ivh9x8-centerCss",
-  styles: "position:relative!important;width:83.333%;right:auto!important;left:8.333%;label:centerCss;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCcUIiLCJmaWxlIjoiTGF5b3V0SXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyBIVE1MQXR0cmlidXRlcywgUmVhY3ROb2RlLCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IG1xLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEhUTUxBdHRyaWJ1dGVzPEhUTUxFbGVtZW50PiB7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICBsYXlvdXQ/OiBcImV4dGVuZFwiIHwgXCJjZW50ZXJcIjtcbn1cblxuY29uc3QgY2VudGVyQ3NzID0gY3NzYFxuICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDtcbiAgd2lkdGg6IDgzLjMzMyU7XG4gIHJpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7XG4gIGxlZnQ6IDguMzMzJTtcbmA7XG5cbmNvbnN0IGV4dGVuZENzcyA9IGNzc2BcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZSAhaW1wb3J0YW50O1xuICAgIHdpZHRoOiA4My4zMzMlO1xuICAgIHJpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7XG4gICAgbGVmdDogOC4zMzMlO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0SXRlbSA9ICh7IGNoaWxkcmVuLCBsYXlvdXQsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3Qgc3R5bGUgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAobGF5b3V0ID09PSBcImV4dGVuZFwiKSB7XG4gICAgICByZXR1cm4gZXh0ZW5kQ3NzO1xuICAgIH0gZWxzZSBpZiAobGF5b3V0ID09PSBcImNlbnRlclwiKSB7XG4gICAgICByZXR1cm4gY2VudGVyQ3NzO1xuICAgIH1cbiAgICByZXR1cm4gdW5kZWZpbmVkO1xuICB9LCBbbGF5b3V0XSk7XG5cbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvbiBjc3M9e3N0eWxlfSB7Li4ucmVzdH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9zZWN0aW9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTGF5b3V0SXRlbTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const extendCss = /*#__PURE__*/css(mq.range({
-  from: breakpoints.tablet
-}), "{position:relative!important;width:83.333%;right:auto!important;left:8.333%;};label:extendCss;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkxheW91dEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCcUIiLCJmaWxlIjoiTGF5b3V0SXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyBIVE1MQXR0cmlidXRlcywgUmVhY3ROb2RlLCB1c2VNZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7IG1xLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIEhUTUxBdHRyaWJ1dGVzPEhUTUxFbGVtZW50PiB7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICBsYXlvdXQ/OiBcImV4dGVuZFwiIHwgXCJjZW50ZXJcIjtcbn1cblxuY29uc3QgY2VudGVyQ3NzID0gY3NzYFxuICBwb3NpdGlvbjogcmVsYXRpdmUgIWltcG9ydGFudDtcbiAgd2lkdGg6IDgzLjMzMyU7XG4gIHJpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7XG4gIGxlZnQ6IDguMzMzJTtcbmA7XG5cbmNvbnN0IGV4dGVuZENzcyA9IGNzc2BcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZSAhaW1wb3J0YW50O1xuICAgIHdpZHRoOiA4My4zMzMlO1xuICAgIHJpZ2h0OiBhdXRvICFpbXBvcnRhbnQ7XG4gICAgbGVmdDogOC4zMzMlO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0SXRlbSA9ICh7IGNoaWxkcmVuLCBsYXlvdXQsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3Qgc3R5bGUgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAobGF5b3V0ID09PSBcImV4dGVuZFwiKSB7XG4gICAgICByZXR1cm4gZXh0ZW5kQ3NzO1xuICAgIH0gZWxzZSBpZiAobGF5b3V0ID09PSBcImNlbnRlclwiKSB7XG4gICAgICByZXR1cm4gY2VudGVyQ3NzO1xuICAgIH1cbiAgICByZXR1cm4gdW5kZWZpbmVkO1xuICB9LCBbbGF5b3V0XSk7XG5cbiAgcmV0dXJuIChcbiAgICA8c2VjdGlvbiBjc3M9e3N0eWxlfSB7Li4ucmVzdH0+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9zZWN0aW9uPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgTGF5b3V0SXRlbTtcbiJdfQ== */"));
-export const LayoutItem = _ref => {
-  let {
-    children,
-    layout,
-    ...rest
-  } = _ref;
-  const style = useMemo(() => {
-    if (layout === "extend") {
-      return extendCss;
-    } else if (layout === "center") {
-      return centerCss;
+import { styled } from "@ndla/styled-system/jsx";
+
+// TODO: Refactor this. This is a copy of our old layout.
+export const LayoutItem = styled("section", {
+  defaultVariants: {
+    layout: "center"
+  },
+  variants: {
+    layout: {
+      center: {
+        position: "relative!",
+        width: "83.333%",
+        right: "auto !important",
+        left: "8.333%"
+      },
+      extend: {
+        tablet: {
+          position: "relative!",
+          width: "83.333%",
+          right: "auto!",
+          left: "8.333%"
+        }
+      }
     }
-    return undefined;
-  }, [layout]);
-  return _jsx("section", {
-    css: style,
-    ...rest,
-    children: children
-  });
-};
+  }
+});
 export default LayoutItem;

package/es/Layout/OneColumn.js

@@ -1,5 +1,3 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -8,34 +6,38 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  *
  */
 
-/** @jsxImportSource @emotion/react */
+import { styled } from "@ndla/styled-system/jsx";
 
-import { css } from "@emotion/react";
-import { mq, spacing, breakpoints } from "@ndla/core";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const StyledOneColumn = /*#__PURE__*/_styled("div", {
-  target: "ekga4hm0",
-  label: "StyledOneColumn"
-})("max-width:1024px;margin-left:auto;margin-right:auto;width:100%;padding-left:", spacing.nsmall, ";padding-right:", spacing.nsmall, ";", mq.range({
-  from: breakpoints.mobileWide
-}), "{padding-left:", spacing.normal, ";padding-right:", spacing.normal, ";}&::after{content:\"\"!important;display:block!important;clear:both!important;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9uZUNvbHVtbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JrQyIsImZpbGUiOiJPbmVDb2x1bW4udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG4vKiogQGpzeEltcG9ydFNvdXJjZSBAZW1vdGlvbi9yZWFjdCAqL1xuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmPFwiZGl2XCI+IHtcbiAgd2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZE9uZUNvbHVtbiA9IHN0eWxlZC5kaXZgXG4gIG1heC13aWR0aDogMTAyNHB4O1xuICBtYXJnaW4tbGVmdDogYXV0bztcbiAgbWFyZ2luLXJpZ2h0OiBhdXRvO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcubnNtYWxsfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5zbWFsbH07XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLm1vYmlsZVdpZGUgfSl9IHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB9XG4gICY6OmFmdGVyIHtcbiAgICBjb250ZW50OiBcIlwiICFpbXBvcnRhbnQ7XG4gICAgZGlzcGxheTogYmxvY2sgIWltcG9ydGFudDtcbiAgICBjbGVhcjogYm90aCAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCB3aWRlU3R5bGUgPSBjc3NgXG4gIG1heC13aWR0aDogMTE1MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IE9uZUNvbHVtbiA9ICh7IHdpZGUsIC4uLnJlc3QgfTogUHJvcHMpID0+IDxTdHlsZWRPbmVDb2x1bW4gY3NzPXt3aWRlID8gd2lkZVN0eWxlIDogdW5kZWZpbmVkfSB7Li4ucmVzdH0gLz47XG5cbmV4cG9ydCBkZWZhdWx0IE9uZUNvbHVtbjtcbiJdfQ== */"));
-const wideStyle = process.env.NODE_ENV === "production" ? {
-  name: "1i2tiuq-wideStyle",
-  styles: "max-width:1150px;label:wideStyle;"
-} : {
-  name: "1i2tiuq-wideStyle",
-  styles: "max-width:1150px;label:wideStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk9uZUNvbHVtbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNxQiIsImZpbGUiOiJPbmVDb2x1bW4udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG4vKiogQGpzeEltcG9ydFNvdXJjZSBAZW1vdGlvbi9yZWFjdCAqL1xuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgbXEsIHNwYWNpbmcsIGJyZWFrcG9pbnRzIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcblxuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmPFwiZGl2XCI+IHtcbiAgd2lkZT86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZE9uZUNvbHVtbiA9IHN0eWxlZC5kaXZgXG4gIG1heC13aWR0aDogMTAyNHB4O1xuICBtYXJnaW4tbGVmdDogYXV0bztcbiAgbWFyZ2luLXJpZ2h0OiBhdXRvO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZy1sZWZ0OiAke3NwYWNpbmcubnNtYWxsfTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLm5zbWFsbH07XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLm1vYmlsZVdpZGUgfSl9IHtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7c3BhY2luZy5ub3JtYWx9O1xuICB9XG4gICY6OmFmdGVyIHtcbiAgICBjb250ZW50OiBcIlwiICFpbXBvcnRhbnQ7XG4gICAgZGlzcGxheTogYmxvY2sgIWltcG9ydGFudDtcbiAgICBjbGVhcjogYm90aCAhaW1wb3J0YW50O1xuICB9XG5gO1xuXG5jb25zdCB3aWRlU3R5bGUgPSBjc3NgXG4gIG1heC13aWR0aDogMTE1MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IE9uZUNvbHVtbiA9ICh7IHdpZGUsIC4uLnJlc3QgfTogUHJvcHMpID0+IDxTdHlsZWRPbmVDb2x1bW4gY3NzPXt3aWRlID8gd2lkZVN0eWxlIDogdW5kZWZpbmVkfSB7Li4ucmVzdH0gLz47XG5cbmV4cG9ydCBkZWZhdWx0IE9uZUNvbHVtbjtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export const OneColumn = _ref => {
-  let {
-    wide,
-    ...rest
-  } = _ref;
-  return _jsx(StyledOneColumn, {
-    css: wide ? wideStyle : undefined,
-    ...rest
-  });
-};
+// TODO: This is a rewrite of our old layout. Refactor this.
+export const OneColumn = styled("div", {
+  base: {
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "100%",
+    paddingLeft: "18px",
+    paddingRight: "18px",
+    mobileWide: {
+      paddingLeft: "medium",
+      paddingRight: "medium"
+    },
+    _after: {
+      content: '""!',
+      display: "block!",
+      clear: "both!"
+    }
+  },
+  defaultVariants: {
+    wide: false
+  },
+  variants: {
+    wide: {
+      true: {
+        maxWidth: "1150px"
+      },
+      false: {
+        maxWidth: "1024px"
+      }
+    }
+  }
+});
 export default OneColumn;

package/es/Layout/PageContainer.js

@@ -1,5 +1,3 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -8,34 +6,27 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  *
  */
 
-/** @jsxImportSource @emotion/react */
+import { styled } from "@ndla/styled-system/jsx";
 
-import { css } from "@emotion/react";
-import { colors, mq, breakpoints } from "@ndla/core";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const StyledPageContainer = /*#__PURE__*/_styled("div", {
-  target: "e15w8m0f0",
-  label: "StyledPageContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1vuza9j",
-  styles: "min-height:100vh;display:flex;flex-direction:column"
-} : {
-  name: "1vuza9j",
-  styles: "min-height:100vh;display:flex;flex-direction:column",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBhZ2VDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCc0MiLCJmaWxlIjoiUGFnZUNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyBDb21wb25lbnRQcm9wc1dpdGhvdXRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIG1xLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIENvbXBvbmVudFByb3BzV2l0aG91dFJlZjxcImRpdlwiPiB7XG4gIGJhY2tncm91bmRXaWRlPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkUGFnZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIG1pbi1oZWlnaHQ6IDEwMHZoO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuYDtcblxuY29uc3QgYmFja2dyb3VuZFdpZGVTdHlsZSA9IGNzc2BcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQYWdlQ29udGFpbmVyID0gKHsgYmFja2dyb3VuZFdpZGUgPSBmYWxzZSwgLi4ucmVzdCB9OiBQcm9wcykgPT4gKFxuICA8U3R5bGVkUGFnZUNvbnRhaW5lciBjc3M9e2JhY2tncm91bmRXaWRlID8gYmFja2dyb3VuZFdpZGVTdHlsZSA6IHVuZGVmaW5lZH0gey4uLnJlc3R9IC8+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBQYWdlQ29udGFpbmVyO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+// TODO: Refactor this. It's a rewrite of our old layout.
+export const PageContainer = styled("div", {
+  base: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column"
+  },
+  defaultVariants: {
+    backgroundWide: false
+  },
+  variants: {
+    backgroundWide: {
+      true: {
+        tablet: {
+          backgroundColor: "#f8f8f8"
+        }
+      },
+      false: {}
+    }
+  }
 });
-const backgroundWideStyle = /*#__PURE__*/css(mq.range({
-  from: breakpoints.tablet
-}), "{background-color:", colors.brand.greyLightest, ";};label:backgroundWideStyle;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBhZ2VDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCK0IiLCJmaWxlIjoiUGFnZUNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxNi1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyBDb21wb25lbnRQcm9wc1dpdGhvdXRSZWYgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIG1xLCBicmVha3BvaW50cyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmludGVyZmFjZSBQcm9wcyBleHRlbmRzIENvbXBvbmVudFByb3BzV2l0aG91dFJlZjxcImRpdlwiPiB7XG4gIGJhY2tncm91bmRXaWRlPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkUGFnZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIG1pbi1oZWlnaHQ6IDEwMHZoO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuYDtcblxuY29uc3QgYmFja2dyb3VuZFdpZGVTdHlsZSA9IGNzc2BcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBQYWdlQ29udGFpbmVyID0gKHsgYmFja2dyb3VuZFdpZGUgPSBmYWxzZSwgLi4ucmVzdCB9OiBQcm9wcykgPT4gKFxuICA8U3R5bGVkUGFnZUNvbnRhaW5lciBjc3M9e2JhY2tncm91bmRXaWRlID8gYmFja2dyb3VuZFdpZGVTdHlsZSA6IHVuZGVmaW5lZH0gey4uLnJlc3R9IC8+XG4pO1xuXG5leHBvcnQgZGVmYXVsdCBQYWdlQ29udGFpbmVyO1xuIl19 */"));
-export const PageContainer = _ref => {
-  let {
-    backgroundWide = false,
-    ...rest
-  } = _ref;
-  return _jsx(StyledPageContainer, {
-    css: backgroundWide ? backgroundWideStyle : undefined,
-    ...rest
-  });
-};
 export default PageContainer;

package/es/LicenseByline/EmbedByline.js

@@ -13,7 +13,7 @@ import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
 import { Button, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { LicenseLink } from "./LicenseLink";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BylineWrapper = styled("figcaption", {
   base: {
     display: "flex",
@@ -65,10 +65,10 @@ export const EmbedByline = _ref => {
   } = useTranslation();
   if (props.error) {
     const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
-    return _jsx(ErrorBylineWrapper, {
-      children: _jsxs(ContentWrapper, {
-        children: [_jsx(WarningOutline, {}), _jsx(BaseDescription, {
-          children: _jsx("span", {
+    return /*#__PURE__*/_jsx(ErrorBylineWrapper, {
+      children: /*#__PURE__*/_jsxs(ContentWrapper, {
+        children: [/*#__PURE__*/_jsx(WarningOutline, {}), /*#__PURE__*/_jsx(BaseDescription, {
+          children: /*#__PURE__*/_jsx("span", {
             children: t("embed.embedError", {
               type: typeString
             })
@@ -80,21 +80,21 @@ export const EmbedByline = _ref => {
   const {
     copyright
   } = props;
-  return _jsxs(_Fragment, {
-    children: [_jsx(BylineWrapper, {
-      children: _jsxs("div", {
-        children: [_jsx(LicenseContainerContent, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(BylineWrapper, {
+      children: /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(LicenseContainerContent, {
           type: type,
           copyright: copyright,
           children: description
         }), children]
       })
-    }), visibleAlt ? _jsx(StyledText, {
+    }), visibleAlt ? /*#__PURE__*/_jsx(StyledText, {
       color: "text.subtle",
       textStyle: "label.medium",
       asChild: true,
       consumeCss: true,
-      children: _jsx("span", {
+      children: /*#__PURE__*/_jsx("span", {
         children: `Alt: ${visibleAlt}`
       })
     }) : null]
@@ -151,13 +151,13 @@ const LicenseDescription = _ref2 => {
   const handleToggle = () => {
     setIsOpen(!isOpen);
   };
-  return _jsx(ContentWrapper, {
-    children: _jsxs(StyledDescription, {
+  return /*#__PURE__*/_jsx(ContentWrapper, {
+    children: /*#__PURE__*/_jsxs(StyledDescription, {
       ...open,
-      children: [_jsx(TextContent, {
+      children: [/*#__PURE__*/_jsx(TextContent, {
         ...open,
         children: children
-      }), _jsx(StyledButton, {
+      }), /*#__PURE__*/_jsx(StyledButton, {
         variant: "link",
         size: "small",
         onClick: handleToggle,
@@ -179,23 +179,23 @@ export const LicenseContainerContent = _ref3 => {
   const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
   const authors = getLicenseCredits(copyright);
   const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
-  const content = _jsxs(_Fragment, {
-    children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, captionAuthors.map(author => author.name).join(", "), license ? _jsxs(_Fragment, {
-      children: [" / ", _jsx(LicenseLink, {
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, captionAuthors.map(author => author.name).join(", "), license ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [" / ", /*#__PURE__*/_jsx(LicenseLink, {
         license: license
       })]
     }) : null]
   });
   if (children) {
-    return _jsx(LicenseDescription, {
+    return /*#__PURE__*/_jsx(LicenseDescription, {
       children: content
     });
   }
-  return _jsx(Text, {
+  return /*#__PURE__*/_jsx(Text, {
     textStyle: "label.medium",
     asChild: true,
     consumeCss: true,
-    children: _jsx("span", {
+    children: /*#__PURE__*/_jsx("span", {
       children: content
     })
   });

package/es/LicenseByline/LicenseLink.js

@@ -8,7 +8,7 @@
 
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const StyledSafeLink = styled(SafeLink, {
   base: {
     color: "primary",
@@ -30,13 +30,13 @@ export const LicenseLink = _ref => {
     return null;
   }
   if (license.url?.length) {
-    return _jsx(StyledSafeLink, {
+    return /*#__PURE__*/_jsx(StyledSafeLink, {
       to: license.url,
       rel: "license",
       children: license.abbreviation
     });
   }
-  return _jsx("span", {
+  return /*#__PURE__*/_jsx("span", {
     children: license.abbreviation
   });
 };

package/es/LinkBlock/LinkBlock.js

@@ -15,7 +15,7 @@ import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const InfoWrapper = styled("div", {
   base: {
     display: "flex",
@@ -80,21 +80,21 @@ const LinkBlock = _ref => {
       locale
     });
   }, [date, articleLanguage]);
-  return _jsxs(StyledSafeLink, {
+  return /*#__PURE__*/_jsxs(StyledSafeLink, {
     to: href,
-    children: [_jsxs(InfoWrapper, {
-      children: [_jsx(Heading, {
+    children: [/*#__PURE__*/_jsxs(InfoWrapper, {
+      children: [/*#__PURE__*/_jsx(Heading, {
         asChild: true,
         consumeCss: true,
         textStyle: "title.medium",
-        children: _jsx("h3", {
+        children: /*#__PURE__*/_jsx("h3", {
           "data-heading": true,
           children: parse(title)
         })
-      }), date && _jsxs(StyledDateContainer, {
-        children: [_jsx(StyledCalendarEd, {}), formattedDate]
+      }), date && /*#__PURE__*/_jsxs(StyledDateContainer, {
+        children: [/*#__PURE__*/_jsx(StyledCalendarEd, {}), formattedDate]
       })]
-    }), _jsx(Forward, {
+    }), /*#__PURE__*/_jsx(Forward, {
       "data-forward": true
     })]
   });

package/es/LinkBlock/LinkBlockSection.js

@@ -8,7 +8,7 @@
 
 import { Children } from "react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const StyledList = styled("ul", {
   base: {
     display: "flex",
@@ -22,10 +22,10 @@ const LinkBlockSection = _ref => {
     children,
     ...rest
   } = _ref;
-  return _jsx("nav", {
+  return /*#__PURE__*/_jsx("nav", {
     ...rest,
-    children: _jsx(StyledList, {
-      children: Children.map(children, child => _jsx("li", {
+    children: /*#__PURE__*/_jsx(StyledList, {
+      children: Children.map(children, child => /*#__PURE__*/_jsx("li", {
         children: child
       }))
     })

package/es/Messages/MessageBox.js

@@ -12,7 +12,7 @@ import { IconButtonV2 } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { Cross } from "@ndla/icons/action";
 import { Forward } from "@ndla/icons/common";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MessageBoxWrapper = /*#__PURE__*/_styled("div", {
   target: "e1hvxgh95",
   label: "MessageBoxWrapper"
@@ -51,28 +51,28 @@ export const MessageBox = _ref => {
   const {
     t
   } = useTranslation();
-  return _jsxs(MessageBoxWrapper, {
+  return /*#__PURE__*/_jsxs(MessageBoxWrapper, {
     "data-type": type,
     contentEditable: contentEditable ?? undefined,
-    children: [_jsx(InfoWrapper, {
-      children: _jsxs("div", {
-        children: [_jsx(ChildrenWrapper, {
+    children: [/*#__PURE__*/_jsx(InfoWrapper, {
+      children: /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(ChildrenWrapper, {
           children: children
-        }), links && _jsx(LinkWrapper, {
-          children: links.map(x => _jsxs(Link, {
+        }), links && /*#__PURE__*/_jsx(LinkWrapper, {
+          children: links.map(x => /*#__PURE__*/_jsxs(Link, {
             href: x.href,
-            children: [_jsx("span", {
+            children: [/*#__PURE__*/_jsx("span", {
               children: x.text
-            }), _jsx(Forward, {})]
+            }), /*#__PURE__*/_jsx(Forward, {})]
           }, x.href))
         })]
       })
-    }), showCloseButton && _jsx(StyledCloseButton, {
+    }), showCloseButton && /*#__PURE__*/_jsx(StyledCloseButton, {
       variant: "ghost",
       "aria-label": t("close"),
       title: t("close"),
       onClick: onClose,
-      children: _jsx(Cross, {})
+      children: /*#__PURE__*/_jsx(Cross, {})
     })]
   });
 };

package/es/Messages/index.js

@@ -6,6 +6,5 @@
  *
  */
 
-import MessageBanner from "./MessageBanner";
 import MessageBox from "./MessageBox";
-export { MessageBox, MessageBanner };
+export { MessageBox };

package/es/ProgrammeCard/ProgrammeCard.js

@@ -9,7 +9,7 @@ import _styled from "@emotion/styled/base";
 
 import { spacing, colors, misc, breakpoints, mq, fonts } from "@ndla/core";
 import { SafeLink } from "@ndla/safelink";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledCardContainer = /*#__PURE__*/_styled(SafeLink, {
   target: "eo9d6lc2",
   label: "StyledCardContainer"
@@ -31,19 +31,19 @@ const ProgrammeCard = _ref => {
     wideImage,
     url
   } = _ref;
-  return _jsxs(StyledCardContainer, {
+  return /*#__PURE__*/_jsxs(StyledCardContainer, {
     to: url,
-    children: [narrowImage && _jsx(StyledImg, {
+    children: [narrowImage && /*#__PURE__*/_jsx(StyledImg, {
       height: 280,
       width: 250,
       src: narrowImage.src,
       alt: narrowImage.alt
-    }), wideImage && _jsx(StyledImg, {
+    }), wideImage && /*#__PURE__*/_jsx(StyledImg, {
       height: 330,
       width: 120,
       src: wideImage.src,
       alt: wideImage.alt
-    }), _jsx(StyledTitle, {
+    }), /*#__PURE__*/_jsx(StyledTitle, {
       children: title.title
     })]
   });

package/es/RelatedArticleList/RelatedArticleList.js

@@ -14,7 +14,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
 import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { contentTypes } from "../model/ContentType";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RelatedArticle = _ref => {
   let {
     title,
@@ -24,15 +24,15 @@ export const RelatedArticle = _ref => {
     target = "",
     type = contentTypes.SUBJECT_MATERIAL
   } = _ref;
-  return _jsx(CardRoot, {
-    children: _jsxs(CardContent, {
-      children: [_jsx(ContentTypeBadge, {
+  return /*#__PURE__*/_jsx(CardRoot, {
+    children: /*#__PURE__*/_jsxs(CardContent, {
+      children: [/*#__PURE__*/_jsx(ContentTypeBadge, {
         contentType: type
-      }), _jsx(CardHeading, {
+      }), /*#__PURE__*/_jsx(CardHeading, {
         asChild: true,
         consumeCss: true,
-        children: _jsx("span", {
-          children: _jsx(SafeLink, {
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(SafeLink, {
             unstyled: true,
             to: to,
             target: target,
@@ -41,11 +41,11 @@ export const RelatedArticle = _ref => {
             children: title
           })
         })
-      }), _jsx(Text, {
+      }), /*#__PURE__*/_jsx(Text, {
         dangerouslySetInnerHTML: {
           __html: introduction
         }
-      }), _jsx(Text, {
+      }), /*#__PURE__*/_jsx(Text, {
         color: "text.subtle",
         textStyle: "label.small",
         children: linkInfo
@@ -100,21 +100,21 @@ export const RelatedArticleList = _ref2 => {
   } = useTranslation();
   const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
   const childrenToShow = useMemo(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [childCount, children, expanded]);
-  return _jsxs(StyledSection, {
+  return /*#__PURE__*/_jsxs(StyledSection, {
     ...rest,
-    children: [_jsxs(HeadingWrapper, {
-      children: [_jsx(Heading, {
+    children: [/*#__PURE__*/_jsxs(HeadingWrapper, {
+      children: [/*#__PURE__*/_jsx(Heading, {
         asChild: true,
         consumeCss: true,
         textStyle: "title.large",
         fontWeight: "bold",
-        children: _jsx(HeadingElement, {
+        children: /*#__PURE__*/_jsx(HeadingElement, {
           children: t("related.title")
         })
       }), headingButtons]
-    }), _jsx(ArticlesWrapper, {
+    }), /*#__PURE__*/_jsx(ArticlesWrapper, {
       children: childrenToShow
-    }), childCount > 2 ? _jsx(StyledButton, {
+    }), childCount > 2 ? /*#__PURE__*/_jsx(StyledButton, {
       variant: "secondary",
       onClick: () => setExpanded(p => !p),
       children: t(`related.show${expanded ? "Less" : "More"}`)

package/es/ResourceBox/ResourceBox.js

@@ -11,7 +11,7 @@ import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { token } from "@ndla/styled-system/tokens";
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Container = styled("div", {
   base: {
     display: "flex",
@@ -68,28 +68,28 @@ export const ResourceBox = _ref => {
     url,
     buttonText
   } = _ref;
-  return _jsxs(Container, {
-    children: [_jsx(StyledImage, {
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsx(StyledImage, {
       src: image.src,
       alt: image.alt,
       sizes: `(min-width: ${token("breakpoints.desktop")}) 150px, (max-width: ${token("breakpoints.tablet")} ) 400px, 200px`
-    }), _jsxs(ContentWrapper, {
-      children: [_jsx(Heading, {
+    }), /*#__PURE__*/_jsxs(ContentWrapper, {
+      children: [/*#__PURE__*/_jsx(Heading, {
         textStyle: "label.large",
         fontWeight: "bold",
         asChild: true,
         consumeCss: true,
-        children: _jsx("h3", {
+        children: /*#__PURE__*/_jsx("h3", {
           children: title
         })
-      }), _jsx(StyledText, {
+      }), /*#__PURE__*/_jsx(StyledText, {
         textStyle: "body.medium",
         children: caption
-      }), _jsxs(SafeLinkButton, {
+      }), /*#__PURE__*/_jsxs(SafeLinkButton, {
         to: url,
         target: "_blank",
         variant: "secondary",
-        children: [buttonText, _jsx(Launch, {})]
+        children: [buttonText, /*#__PURE__*/_jsx(Launch, {})]
       })]
     })]
   });