@ndla/core - npm Package Compare versions

Comparing version 4.2.7 to 4.2.9

es/animations.js

@@ -0,4 +1,12 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 import spacing from './spacing';
-var DURATION_DEFAULT = '400ms';
-var animations = {
+const DURATION_DEFAULT = '400ms';
+const animations = {
   durations: {
@@ -10,40 +18,170 @@ superFast: '100ms',
   },
-  fadeInLeftFromZero: function fadeInLeftFromZero(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(spacing.small, ");\n            opacity: 0;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n        }");
-  },
-  fadeInLeft: function fadeInLeft(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutLeft: function fadeOutLeft(duration) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutLeft;\n            @keyframes fadeOutLeft {\n                0% {\n                  transform: translateX(0);\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateX(").concat(spacing.small, ");\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInBottom: function fadeInBottom(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n      @keyframes fadeInBottom {\n          0% {\n            transform: translateY(").concat(distance || spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n              transform: translateY(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutBottom: function fadeOutBottom(duration, distance) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutBottom;\n            @keyframes fadeOutBottom {\n                0% {\n                  transform: translateY(0);\n                  opacity: 1;\n                }\n                100% {\n                    transform: translateY(").concat(distance || spacing.small, ");\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInTop: function fadeInTop(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n      @keyframes fadeInTop {\n          0% {\n            transform: translateY(-").concat(distance || spacing.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutTop: function fadeOutTop(duration, distance) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutTop;\n            @keyframes fadeOutTop {\n                0% {\n                  transform: translateY(").concat(distance || spacing.small, ");\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateY(0);\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInScaled: function fadeInScaled(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n      @keyframes fadeInScaled {\n          0% {\n            transform: scale(0.5);\n            opacity: 0;\n          }\n          100% {\n            transform: scale(1);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutScaled: function fadeOutScaled(duration) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutScaled;\n            @keyframes fadeOutScaled {\n                0% {\n                  transform: scale(1);\n                  opacity: 1;\n                }\n                100% {\n                  transform: scale(0.5);\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeOut: function fadeOut(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n      @keyframes fadeOut {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }");
-  },
-  fadeIn: function fadeIn(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n      @keyframes fadeIn {\n          0% {\n            opacity: 0;\n          }\n          100% {\n            opacity: 1;\n          }\n        }");
-  },
-  toggledContentWithSwitchAnimation: function toggledContentWithSwitchAnimation(duration) {
-    var animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: ").concat(animationName, ";\n      @keyframes ").concat(animationName, " {\n        0% {\n          opacity: 0.5;\n        }\n        99% {\n          opacity: 0.5;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n  ");
+  fadeInLeftFromZero: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    animation-name: fadeInLeft;
+    animation-fill-mode: forwards;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${spacing.small});
+            opacity: 0;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+        }`,
+  fadeInLeft: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInLeft;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${spacing.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutLeft: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutLeft;
+            @keyframes fadeOutLeft {
+                0% {
+                  transform: translateX(0);
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateX(${spacing.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInBottom: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInBottom;
+      @keyframes fadeInBottom {
+          0% {
+            transform: translateY(${distance || spacing.small});
+            opacity: 0;
+          }
+          100% {
+              transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutBottom: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutBottom;
+            @keyframes fadeOutBottom {
+                0% {
+                  transform: translateY(0);
+                  opacity: 1;
+                }
+                100% {
+                    transform: translateY(${distance || spacing.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInTop: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInTop;
+      @keyframes fadeInTop {
+          0% {
+            transform: translateY(-${distance || spacing.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutTop: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutTop;
+            @keyframes fadeOutTop {
+                0% {
+                  transform: translateY(${distance || spacing.small});
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateY(0);
+                  opacity: 0;
+                }
+              }`,
+  fadeInScaled: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInScaled;
+      @keyframes fadeInScaled {
+          0% {
+            transform: scale(0.5);
+            opacity: 0;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }`,
+  fadeOutScaled: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutScaled;
+            @keyframes fadeOutScaled {
+                0% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+                100% {
+                  transform: scale(0.5);
+                  opacity: 0;
+                }
+              }`,
+  fadeOut: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeOut;
+      @keyframes fadeOut {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }`,
+  fadeIn: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeIn;
+      @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }`,
+  toggledContentWithSwitchAnimation: function (duration) {
+    let animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
+    return `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: ${animationName};
+      @keyframes ${animationName} {
+        0% {
+          opacity: 0.5;
+        }
+        99% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+  `;
   }
 };
 export default animations;

es/breakpoints.js

@@ -1,2 +0,10 @@
-var breakpoints = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const breakpoints = {
   mobile: '20em',
@@ -3,0 +11,0 @@ mobileWide: '29.75em',

es/colors.js

@@ -1,8 +0,16 @@
-var brandLight = '#ceddea';
-var brandLightest = '#F0F6FB';
-var brandDark = '#184673';
-var brandGreyLight = '#e8e3e3';
-var brandGreyLightest = '#f8f8f8';
-var brandYellow = '#fde74c';
-var colors = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const brandLight = '#ceddea';
+const brandLightest = '#F0F6FB';
+const brandDark = '#184673';
+const brandGreyLight = '#e8e3e3';
+const brandGreyLightest = '#f8f8f8';
+const brandYellow = '#fde74c';
+const colors = {
   /**
@@ -9,0 +17,0 @@ * NDLA Brand colors

es/fonts.js

@@ -1,4 +0,12 @@
-var baseFontSizeUnit = 18;
-var baseLineHeightUnit = 24;
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 
+const baseFontSizeUnit = 18;
+const baseLineHeightUnit = 24;
+
 /**
@@ -8,10 +16,10 @@ * Should do the same as: https://github.com/inuitcss/inuitcss/blob/c14029caf75b7b69d7551a5e22036ec280b02e9f/tools/_tools.font-size.scss
 function sizes(fontSize, lineHeight) {
-  var fontSizeUnit = parseInt(fontSize, 10);
-  var fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
-  var _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
-  var fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;");
-  var chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}");
-  return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling);
+  const fontSizeUnit = parseInt(fontSize, 10);
+  const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
+  const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
+  const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`;
+  const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`;
+  return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`;
 }
-var fonts = {
+const fonts = {
   sans: "'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif",
@@ -25,3 +33,3 @@ serif: "'Source Serif Pro',Times,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',serif",
   },
-  sizes: sizes,
+  sizes,
   size: {
@@ -28,0 +36,0 @@ text: {

es/index.js

@@ -0,1 +1,9 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export { default as breakpoints } from './breakpoints';
@@ -2,0 +10,0 @@ export { default as colors } from './colors';

es/misc.js

@@ -1,2 +0,10 @@
-var misc = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const misc = {
   maxTextWidth: '700px',
@@ -3,0 +11,0 @@ borderRadius: '4px',

es/mq.js

@@ -1,8 +0,18 @@
-var mq = {
-  range: function range(_ref) {
-    var from = _ref.from,
-      until = _ref.until;
-    return "".concat(from ? "@media (min-width: ".concat(from, ")") : '').concat(from && until ? ' and ' : '').concat(!from && until ? '@media ' : '').concat(until ? "(max-width: ".concat(until, ")") : '');
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const mq = {
+  range: _ref => {
+    let {
+      from,
+      until
+    } = _ref;
+    return `${from ? `@media (min-width: ${from})` : ''}${from && until ? ' and ' : ''}${!from && until ? '@media ' : ''}${until ? `(max-width: ${until})` : ''}`;
   }
 };
 export default mq;

es/shadows.js

@@ -1,2 +0,10 @@
-var shadows = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const shadows = {
   searchHeader: '0 0 30px rgba(39,39,40, .2)',
@@ -3,0 +11,0 @@ levitate1: '0 0 19px rgba(0, 0, 0, 0.2)'

es/spacing.js

@@ -1,13 +0,21 @@
-export var spacingUnit = 24;
-var spacing = {
-  xxsmall: "".concat(spacingUnit / 6, "px"),
-  xsmall: "".concat(spacingUnit / 4, "px"),
-  small: "".concat(spacingUnit / 2, "px"),
-  nsmall: "".concat(spacingUnit / 1.5, "px"),
-  snormal: "".concat(spacingUnit / 1.2, "px"),
-  normal: "".concat(spacingUnit, "px"),
-  medium: "".concat(spacingUnit * 1.25, "px"),
-  mediumlarge: "".concat(spacingUnit * 1.5, "px"),
-  large: "".concat(spacingUnit * 2, "px")
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const spacingUnit = 24;
+const spacing = {
+  xxsmall: `${spacingUnit / 6}px`,
+  xsmall: `${spacingUnit / 4}px`,
+  small: `${spacingUnit / 2}px`,
+  nsmall: `${spacingUnit / 1.5}px`,
+  snormal: `${spacingUnit / 1.2}px`,
+  normal: `${spacingUnit}px`,
+  medium: `${spacingUnit * 1.25}px`,
+  mediumlarge: `${spacingUnit * 1.5}px`,
+  large: `${spacingUnit * 2}px`
 };
 export default spacing;

es/typography.js

@@ -0,13 +1,21 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 import { css } from '@emotion/react';
+import colors from './colors';
 import fonts from './fonts';
-import colors from './colors';
 import spacing from './spacing';
-var smallHeading = /*#__PURE__*/css(fonts.sizes(14, 1.1), ";font-weight:", fonts.weight.normal, ";color:", colors.text.light, ";text-transform:uppercase;;label:smallHeading;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dCIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZm9udHMgZnJvbSAnLi9mb250cyc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
-var smallerHeadingUppercase = /*#__PURE__*/css(fonts.sizes('18px', '26px'), ";font-weight:", fonts.weight.normal, ";color:", colors.text.light, ";text-transform:uppercase;margin:0 0 ", spacing.normal, " 0;;label:smallerHeadingUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWW1DIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZm9udHMgZnJvbSAnLi9mb250cyc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
-var mediumHeaderUppercase = /*#__PURE__*/css("color:", colors.text.primary, ";font-weight:", fonts.weight.bold, ";text-transform:uppercase;padding-right:", spacing.small, ";margin:0;", fonts.sizes(20, 1.1), ";;label:mediumHeaderUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JpQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IGZvbnRzIGZyb20gJy4vZm9udHMnO1xuaW1wb3J0IGNvbG9ycyBmcm9tICcuL2NvbG9ycyc7XG5pbXBvcnQgc3BhY2luZyBmcm9tICcuL3NwYWNpbmcnO1xuXG5jb25zdCBzbWFsbEhlYWRpbmcgPSBjc3NgXG4gICR7Zm9udHMuc2l6ZXMoMTQsIDEuMSl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuYDtcblxuY29uc3Qgc21hbGxlckhlYWRpbmdVcHBlcmNhc2UgPSBjc3NgXG4gICR7Zm9udHMuc2l6ZXMoJzE4cHgnLCAnMjZweCcpfTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LmxpZ2h0fTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbWFyZ2luOiAwIDAgJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IG1lZGl1bUhlYWRlclVwcGVyY2FzZSA9IGNzc2BcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgbWFyZ2luOiAwO1xuICAke2ZvbnRzLnNpemVzKDIwLCAxLjEpfTtcbmA7XG5cbmNvbnN0IHR5cG9ncmFwaHkgPSB7XG4gIHNtYWxsSGVhZGluZyxcbiAgc21hbGxlckhlYWRpbmdVcHBlcmNhc2UsXG4gIG1lZGl1bUhlYWRlclVwcGVyY2FzZSxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IHR5cG9ncmFwaHk7XG4iXX0= */"));
-var typography = {
-  smallHeading: smallHeading,
-  smallerHeadingUppercase: smallerHeadingUppercase,
-  mediumHeaderUppercase: mediumHeaderUppercase
+const smallHeading = /*#__PURE__*/css(fonts.sizes(14, 1.1), ";font-weight:", fonts.weight.normal, ";color:", colors.text.light, ";text-transform:uppercase;;label:smallHeading;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXdCIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBjb2xvcnMgZnJvbSAnLi9jb2xvcnMnO1xuaW1wb3J0IGZvbnRzIGZyb20gJy4vZm9udHMnO1xuaW1wb3J0IHNwYWNpbmcgZnJvbSAnLi9zcGFjaW5nJztcblxuY29uc3Qgc21hbGxIZWFkaW5nID0gY3NzYFxuICAke2ZvbnRzLnNpemVzKDE0LCAxLjEpfTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LmxpZ2h0fTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG5cbmNvbnN0IHNtYWxsZXJIZWFkaW5nVXBwZXJjYXNlID0gY3NzYFxuICAke2ZvbnRzLnNpemVzKCcxOHB4JywgJzI2cHgnKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIG1hcmdpbjogMCAwICR7c3BhY2luZy5ub3JtYWx9IDA7XG5gO1xuXG5jb25zdCBtZWRpdW1IZWFkZXJVcHBlcmNhc2UgPSBjc3NgXG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIHBhZGRpbmctcmlnaHQ6ICR7c3BhY2luZy5zbWFsbH07XG4gIG1hcmdpbjogMDtcbiAgJHtmb250cy5zaXplcygyMCwgMS4xKX07XG5gO1xuXG5jb25zdCB0eXBvZ3JhcGh5ID0ge1xuICBzbWFsbEhlYWRpbmcsXG4gIHNtYWxsZXJIZWFkaW5nVXBwZXJjYXNlLFxuICBtZWRpdW1IZWFkZXJVcHBlcmNhc2UsXG59O1xuXG5leHBvcnQgZGVmYXVsdCB0eXBvZ3JhcGh5O1xuIl19 */"));
+const smallerHeadingUppercase = /*#__PURE__*/css(fonts.sizes('18px', '26px'), ";font-weight:", fonts.weight.normal, ";color:", colors.text.light, ";text-transform:uppercase;margin:0 0 ", spacing.normal, " 0;;label:smallerHeadingUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JtQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBmb250cyBmcm9tICcuL2ZvbnRzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
+const mediumHeaderUppercase = /*#__PURE__*/css("color:", colors.text.primary, ";font-weight:", fonts.weight.bold, ";text-transform:uppercase;padding-right:", spacing.small, ";margin:0;", fonts.sizes(20, 1.1), ";;label:mediumHeaderUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJpQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBmb250cyBmcm9tICcuL2ZvbnRzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
+const typography = {
+  smallHeading,
+  smallerHeadingUppercase,
+  mediumHeaderUppercase
 };
 export default typography;

es/utils.js

@@ -11,8 +11,40 @@ /**
 import spacing from './spacing';
-var utils = {
-  restoreOutline: "\n    outline: 1px dotted #212121;\n    outline: -webkit-focus-ring-color auto 5px;\n",
-  visuallyHidden: "\n  margin: -1px;\n  padding: 0;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n",
-  scrollbar: "\n  ::-webkit-scrollbar {\n    width: ".concat(spacing.small, ";\n  }\n  ::-webkit-scrollbar-thumb {\n    border: 4px solid transparent;\n    border-radius: 14px;\n    background-clip: padding-box;\n    padding: 0 4px;\n    background-color: ").concat(colors.brand.neutral7, ";\n  }\n  "),
-  labelHidden: "\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  "
+const utils = {
+  restoreOutline: `
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+`,
+  visuallyHidden: `
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+`,
+  scrollbar: `
+  ::-webkit-scrollbar {
+    width: ${spacing.small};
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+    padding: 0 4px;
+    background-color: ${colors.brand.neutral7};
+  }
+  `,
+  labelHidden: `
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  `
 };
 export default utils;

lib/animations.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const animations: {
@@ -2,0 +9,0 @@ durations: {

lib/animations.js

@@ -9,4 +9,12 @@ "use strict";
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var DURATION_DEFAULT = '400ms';
-var animations = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const DURATION_DEFAULT = '400ms';
+const animations = {
   durations: {
@@ -18,41 +26,170 @@ superFast: '100ms',
   },
-  fadeInLeftFromZero: function fadeInLeftFromZero(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    width: 0;\n    height: 0;\n    overflow: hidden;\n    animation-name: fadeInLeft;\n    animation-fill-mode: forwards;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(_spacing.default.small, ");\n            opacity: 0;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n            width: inherit;\n            overflow: inherit;\n            height: inherit;\n          }\n        }");
-  },
-  fadeInLeft: function fadeInLeft(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInLeft;\n      @keyframes fadeInLeft {\n          0% {\n            transform: translateX(-").concat(_spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateX(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutLeft: function fadeOutLeft(duration) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutLeft;\n            @keyframes fadeOutLeft {\n                0% {\n                  transform: translateX(0);\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateX(").concat(_spacing.default.small, ");\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInBottom: function fadeInBottom(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInBottom;\n      @keyframes fadeInBottom {\n          0% {\n            transform: translateY(").concat(distance || _spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n              transform: translateY(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutBottom: function fadeOutBottom(duration, distance) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutBottom;\n            @keyframes fadeOutBottom {\n                0% {\n                  transform: translateY(0);\n                  opacity: 1;\n                }\n                100% {\n                    transform: translateY(").concat(distance || _spacing.default.small, ");\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInTop: function fadeInTop(duration, distance) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInTop;\n      @keyframes fadeInTop {\n          0% {\n            transform: translateY(-").concat(distance || _spacing.default.small, ");\n            opacity: 0;\n          }\n          100% {\n            transform: translateY(0);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutTop: function fadeOutTop(duration, distance) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutTop;\n            @keyframes fadeOutTop {\n                0% {\n                  transform: translateY(").concat(distance || _spacing.default.small, ");\n                  opacity: 1;\n                }\n                100% {\n                  transform: translateY(0);\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeInScaled: function fadeInScaled(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeInScaled;\n      @keyframes fadeInScaled {\n          0% {\n            transform: scale(0.5);\n            opacity: 0;\n          }\n          100% {\n            transform: scale(1);\n            opacity: 1;\n          }\n        }");
-  },
-  fadeOutScaled: function fadeOutScaled(duration) {
-    return "\n        animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n          animation-name: fadeOutScaled;\n            @keyframes fadeOutScaled {\n                0% {\n                  transform: scale(1);\n                  opacity: 1;\n                }\n                100% {\n                  transform: scale(0.5);\n                  opacity: 0;\n                }\n              }");
-  },
-  fadeOut: function fadeOut(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeOut;\n      @keyframes fadeOut {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }");
-  },
-  fadeIn: function fadeIn(duration) {
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: fadeIn;\n      @keyframes fadeIn {\n          0% {\n            opacity: 0;\n          }\n          100% {\n            opacity: 1;\n          }\n        }");
-  },
-  toggledContentWithSwitchAnimation: function toggledContentWithSwitchAnimation(duration) {
-    var animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
-    return "\n  animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n    animation-name: ").concat(animationName, ";\n      @keyframes ").concat(animationName, " {\n        0% {\n          opacity: 0.5;\n        }\n        99% {\n          opacity: 0.5;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n  ");
+  fadeInLeftFromZero: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    animation-name: fadeInLeft;
+    animation-fill-mode: forwards;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${_spacing.default.small});
+            opacity: 0;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+            width: inherit;
+            overflow: inherit;
+            height: inherit;
+          }
+        }`,
+  fadeInLeft: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInLeft;
+      @keyframes fadeInLeft {
+          0% {
+            transform: translateX(-${_spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutLeft: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutLeft;
+            @keyframes fadeOutLeft {
+                0% {
+                  transform: translateX(0);
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateX(${_spacing.default.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInBottom: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInBottom;
+      @keyframes fadeInBottom {
+          0% {
+            transform: translateY(${distance || _spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+              transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutBottom: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutBottom;
+            @keyframes fadeOutBottom {
+                0% {
+                  transform: translateY(0);
+                  opacity: 1;
+                }
+                100% {
+                    transform: translateY(${distance || _spacing.default.small});
+                  opacity: 0;
+                }
+              }`,
+  fadeInTop: (duration, distance) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInTop;
+      @keyframes fadeInTop {
+          0% {
+            transform: translateY(-${distance || _spacing.default.small});
+            opacity: 0;
+          }
+          100% {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }`,
+  fadeOutTop: (duration, distance) => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutTop;
+            @keyframes fadeOutTop {
+                0% {
+                  transform: translateY(${distance || _spacing.default.small});
+                  opacity: 1;
+                }
+                100% {
+                  transform: translateY(0);
+                  opacity: 0;
+                }
+              }`,
+  fadeInScaled: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInScaled;
+      @keyframes fadeInScaled {
+          0% {
+            transform: scale(0.5);
+            opacity: 0;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }`,
+  fadeOutScaled: duration => `
+        animation-duration: ${duration || DURATION_DEFAULT};
+          animation-name: fadeOutScaled;
+            @keyframes fadeOutScaled {
+                0% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+                100% {
+                  transform: scale(0.5);
+                  opacity: 0;
+                }
+              }`,
+  fadeOut: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeOut;
+      @keyframes fadeOut {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }`,
+  fadeIn: duration => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeIn;
+      @keyframes fadeIn {
+          0% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 1;
+          }
+        }`,
+  toggledContentWithSwitchAnimation: function (duration) {
+    let animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'toggledContentWithSwitchAnimation';
+    return `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: ${animationName};
+      @keyframes ${animationName} {
+        0% {
+          opacity: 0.5;
+        }
+        99% {
+          opacity: 0.5;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+  `;
   }
 };
-var _default = animations;
-exports.default = _default;
+var _default = exports.default = animations;

lib/breakpoints.d.ts

@@ -0,3 +1,10 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 import { Breakpoints } from '../types';
 declare const breakpoints: Breakpoints;
 export default breakpoints;

lib/breakpoints.js

@@ -7,3 +7,11 @@ "use strict";
 exports.default = void 0;
-var breakpoints = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const breakpoints = {
   mobile: '20em',
@@ -17,3 +25,2 @@ mobileWide: '29.75em',
 };
-var _default = breakpoints;
-exports.default = _default;
+var _default = exports.default = breakpoints;

lib/colors.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const colors: {
@@ -2,0 +9,0 @@ /**

lib/colors.js

@@ -7,9 +7,17 @@ "use strict";
 exports.default = void 0;
-var brandLight = '#ceddea';
-var brandLightest = '#F0F6FB';
-var brandDark = '#184673';
-var brandGreyLight = '#e8e3e3';
-var brandGreyLightest = '#f8f8f8';
-var brandYellow = '#fde74c';
-var colors = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const brandLight = '#ceddea';
+const brandLightest = '#F0F6FB';
+const brandDark = '#184673';
+const brandGreyLight = '#e8e3e3';
+const brandGreyLightest = '#f8f8f8';
+const brandYellow = '#fde74c';
+const colors = {
   /**
@@ -141,3 +149,2 @@ * NDLA Brand colors
 };
-var _default = colors;
-exports.default = _default;
+var _default = exports.default = colors;

lib/fonts.d.ts

 /**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
  * Should do the same as: https://github.com/inuitcss/inuitcss/blob/c14029caf75b7b69d7551a5e22036ec280b02e9f/tools/_tools.font-size.scss
@@ -3,0 +10,0 @@ */

lib/fonts.js

@@ -7,5 +7,13 @@ "use strict";
 exports.default = void 0;
-var baseFontSizeUnit = 18;
-var baseLineHeightUnit = 24;
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 
+const baseFontSizeUnit = 18;
+const baseLineHeightUnit = 24;
+
 /**
@@ -15,10 +23,10 @@ * Should do the same as: https://github.com/inuitcss/inuitcss/blob/c14029caf75b7b69d7551a5e22036ec280b02e9f/tools/_tools.font-size.scss
 function sizes(fontSize, lineHeight) {
-  var fontSizeUnit = parseInt(fontSize, 10);
-  var fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
-  var _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
-  var fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;");
-  var chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}");
-  return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling);
+  const fontSizeUnit = parseInt(fontSize, 10);
+  const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit;
+  const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit);
+  const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`;
+  const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`;
+  return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`;
 }
-var fonts = {
+const fonts = {
   sans: "'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif",
@@ -32,3 +40,3 @@ serif: "'Source Serif Pro',Times,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',serif",
   },
-  sizes: sizes,
+  sizes,
   size: {
@@ -53,3 +61,2 @@ text: {
 };
-var _default = fonts;
-exports.default = _default;
+var _default = exports.default = fonts;

lib/index.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 export { default as breakpoints } from './breakpoints';
@@ -2,0 +9,0 @@ export { default as colors } from './colors';

lib/index.js

 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
@@ -9,3 +8,3 @@ value: true
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _animations.default;
@@ -16,3 +15,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _breakpoints.default;
@@ -23,3 +22,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _colors.default;
@@ -30,3 +29,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _fonts.default;
@@ -37,3 +36,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _misc.default;
@@ -44,3 +43,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _mq.default;
@@ -51,3 +50,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _shadows.default;
@@ -58,3 +57,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _spacing.default;
@@ -65,3 +64,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _spacing.spacingUnit;
@@ -72,3 +71,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _typography.default;
@@ -79,3 +78,3 @@ }
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _utils.default;
@@ -94,4 +93,4 @@ }
 var _typography = _interopRequireDefault(require("./typography"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/misc.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const misc: {
@@ -2,0 +9,0 @@ maxTextWidth: string;

lib/misc.js

@@ -7,3 +7,11 @@ "use strict";
 exports.default = void 0;
-var misc = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const misc = {
   maxTextWidth: '700px',
@@ -20,3 +28,2 @@ borderRadius: '4px',
 };
-var _default = misc;
-exports.default = _default;
+var _default = exports.default = misc;

lib/mq.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const mq: {
@@ -2,0 +9,0 @@ range: ({ from, until }: {

lib/mq.js

@@ -7,10 +7,19 @@ "use strict";
 exports.default = void 0;
-var mq = {
-  range: function range(_ref) {
-    var from = _ref.from,
-      until = _ref.until;
-    return "".concat(from ? "@media (min-width: ".concat(from, ")") : '').concat(from && until ? ' and ' : '').concat(!from && until ? '@media ' : '').concat(until ? "(max-width: ".concat(until, ")") : '');
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const mq = {
+  range: _ref => {
+    let {
+      from,
+      until
+    } = _ref;
+    return `${from ? `@media (min-width: ${from})` : ''}${from && until ? ' and ' : ''}${!from && until ? '@media ' : ''}${until ? `(max-width: ${until})` : ''}`;
   }
 };
-var _default = mq;
-exports.default = _default;
+var _default = exports.default = mq;

lib/shadows.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const shadows: {
@@ -2,0 +9,0 @@ searchHeader: string;

lib/shadows.js

@@ -7,7 +7,14 @@ "use strict";
 exports.default = void 0;
-var shadows = {
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const shadows = {
   searchHeader: '0 0 30px rgba(39,39,40, .2)',
   levitate1: '0 0 19px rgba(0, 0, 0, 0.2)'
 };
-var _default = shadows;
-exports.default = _default;
+var _default = exports.default = shadows;

lib/spacing.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 export declare const spacingUnit = 24;
@@ -2,0 +9,0 @@ export type SpacingNames = 'xxsmall' | 'xsmall' | 'small' | 'nsmall' | 'snormal' | 'normal' | 'medium' | 'mediumlarge' | 'large';

lib/spacing.js

@@ -7,16 +7,22 @@ "use strict";
 exports.spacingUnit = exports.default = void 0;
-var spacingUnit = 24;
-exports.spacingUnit = spacingUnit;
-var spacing = {
-  xxsmall: "".concat(spacingUnit / 6, "px"),
-  xsmall: "".concat(spacingUnit / 4, "px"),
-  small: "".concat(spacingUnit / 2, "px"),
-  nsmall: "".concat(spacingUnit / 1.5, "px"),
-  snormal: "".concat(spacingUnit / 1.2, "px"),
-  normal: "".concat(spacingUnit, "px"),
-  medium: "".concat(spacingUnit * 1.25, "px"),
-  mediumlarge: "".concat(spacingUnit * 1.5, "px"),
-  large: "".concat(spacingUnit * 2, "px")
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const spacingUnit = exports.spacingUnit = 24;
+const spacing = {
+  xxsmall: `${spacingUnit / 6}px`,
+  xsmall: `${spacingUnit / 4}px`,
+  small: `${spacingUnit / 2}px`,
+  nsmall: `${spacingUnit / 1.5}px`,
+  snormal: `${spacingUnit / 1.2}px`,
+  normal: `${spacingUnit}px`,
+  medium: `${spacingUnit * 1.25}px`,
+  mediumlarge: `${spacingUnit * 1.5}px`,
+  large: `${spacingUnit * 2}px`
 };
-var _default = spacing;
-exports.default = _default;
+var _default = exports.default = spacing;

lib/typography.d.ts

@@ -0,1 +1,8 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 declare const typography: {
@@ -2,0 +9,0 @@ smallHeading: import("@emotion/utils").SerializedStyles;

lib/typography.js

@@ -8,15 +8,22 @@ "use strict";
 var _react = require("@emotion/react");
+var _colors = _interopRequireDefault(require("./colors"));
 var _fonts = _interopRequireDefault(require("./fonts"));
-var _colors = _interopRequireDefault(require("./colors"));
 var _spacing = _interopRequireDefault(require("./spacing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var smallHeading = /*#__PURE__*/(0, _react.css)(_fonts.default.sizes(14, 1.1), ";font-weight:", _fonts.default.weight.normal, ";color:", _colors.default.text.light, ";text-transform:uppercase;;label:smallHeading;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS3dCIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZm9udHMgZnJvbSAnLi9mb250cyc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
-var smallerHeadingUppercase = /*#__PURE__*/(0, _react.css)(_fonts.default.sizes('18px', '26px'), ";font-weight:", _fonts.default.weight.normal, ";color:", _colors.default.text.light, ";text-transform:uppercase;margin:0 0 ", _spacing.default.normal, " 0;;label:smallerHeadingUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWW1DIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgZm9udHMgZnJvbSAnLi9mb250cyc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
-var mediumHeaderUppercase = /*#__PURE__*/(0, _react.css)("color:", _colors.default.text.primary, ";font-weight:", _fonts.default.weight.bold, ";text-transform:uppercase;padding-right:", _spacing.default.small, ";margin:0;", _fonts.default.sizes(20, 1.1), ";;label:mediumHeaderUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JpQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IGZvbnRzIGZyb20gJy4vZm9udHMnO1xuaW1wb3J0IGNvbG9ycyBmcm9tICcuL2NvbG9ycyc7XG5pbXBvcnQgc3BhY2luZyBmcm9tICcuL3NwYWNpbmcnO1xuXG5jb25zdCBzbWFsbEhlYWRpbmcgPSBjc3NgXG4gICR7Zm9udHMuc2l6ZXMoMTQsIDEuMSl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuYDtcblxuY29uc3Qgc21hbGxlckhlYWRpbmdVcHBlcmNhc2UgPSBjc3NgXG4gICR7Zm9udHMuc2l6ZXMoJzE4cHgnLCAnMjZweCcpfTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LmxpZ2h0fTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgbWFyZ2luOiAwIDAgJHtzcGFjaW5nLm5vcm1hbH0gMDtcbmA7XG5cbmNvbnN0IG1lZGl1bUhlYWRlclVwcGVyY2FzZSA9IGNzc2BcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgcGFkZGluZy1yaWdodDogJHtzcGFjaW5nLnNtYWxsfTtcbiAgbWFyZ2luOiAwO1xuICAke2ZvbnRzLnNpemVzKDIwLCAxLjEpfTtcbmA7XG5cbmNvbnN0IHR5cG9ncmFwaHkgPSB7XG4gIHNtYWxsSGVhZGluZyxcbiAgc21hbGxlckhlYWRpbmdVcHBlcmNhc2UsXG4gIG1lZGl1bUhlYWRlclVwcGVyY2FzZSxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IHR5cG9ncmFwaHk7XG4iXX0= */"));
-var typography = {
-  smallHeading: smallHeading,
-  smallerHeadingUppercase: smallerHeadingUppercase,
-  mediumHeaderUppercase: mediumHeaderUppercase
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const smallHeading = /*#__PURE__*/(0, _react.css)(_fonts.default.sizes(14, 1.1), ";font-weight:", _fonts.default.weight.normal, ";color:", _colors.default.text.light, ";text-transform:uppercase;;label:smallHeading;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYXdCIiwiZmlsZSI6InR5cG9ncmFwaHkudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOS1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBjb2xvcnMgZnJvbSAnLi9jb2xvcnMnO1xuaW1wb3J0IGZvbnRzIGZyb20gJy4vZm9udHMnO1xuaW1wb3J0IHNwYWNpbmcgZnJvbSAnLi9zcGFjaW5nJztcblxuY29uc3Qgc21hbGxIZWFkaW5nID0gY3NzYFxuICAke2ZvbnRzLnNpemVzKDE0LCAxLjEpfTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LmxpZ2h0fTtcbiAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG5cbmNvbnN0IHNtYWxsZXJIZWFkaW5nVXBwZXJjYXNlID0gY3NzYFxuICAke2ZvbnRzLnNpemVzKCcxOHB4JywgJzI2cHgnKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIG1hcmdpbjogMCAwICR7c3BhY2luZy5ub3JtYWx9IDA7XG5gO1xuXG5jb25zdCBtZWRpdW1IZWFkZXJVcHBlcmNhc2UgPSBjc3NgXG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG4gIHBhZGRpbmctcmlnaHQ6ICR7c3BhY2luZy5zbWFsbH07XG4gIG1hcmdpbjogMDtcbiAgJHtmb250cy5zaXplcygyMCwgMS4xKX07XG5gO1xuXG5jb25zdCB0eXBvZ3JhcGh5ID0ge1xuICBzbWFsbEhlYWRpbmcsXG4gIHNtYWxsZXJIZWFkaW5nVXBwZXJjYXNlLFxuICBtZWRpdW1IZWFkZXJVcHBlcmNhc2UsXG59O1xuXG5leHBvcnQgZGVmYXVsdCB0eXBvZ3JhcGh5O1xuIl19 */"));
+const smallerHeadingUppercase = /*#__PURE__*/(0, _react.css)(_fonts.default.sizes('18px', '26px'), ";font-weight:", _fonts.default.weight.normal, ";color:", _colors.default.text.light, ";text-transform:uppercase;margin:0 0 ", _spacing.default.normal, " 0;;label:smallerHeadingUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0JtQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBmb250cyBmcm9tICcuL2ZvbnRzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
+const mediumHeaderUppercase = /*#__PURE__*/(0, _react.css)("color:", _colors.default.text.primary, ";font-weight:", _fonts.default.weight.bold, ";text-transform:uppercase;padding-right:", _spacing.default.small, ";margin:0;", _fonts.default.sizes(20, 1.1), ";;label:mediumHeaderUppercase;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInR5cG9ncmFwaHkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJpQyIsImZpbGUiOiJ0eXBvZ3JhcGh5LnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTktcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgY29sb3JzIGZyb20gJy4vY29sb3JzJztcbmltcG9ydCBmb250cyBmcm9tICcuL2ZvbnRzJztcbmltcG9ydCBzcGFjaW5nIGZyb20gJy4vc3BhY2luZyc7XG5cbmNvbnN0IHNtYWxsSGVhZGluZyA9IGNzc2BcbiAgJHtmb250cy5zaXplcygxNCwgMS4xKX07XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ub3JtYWx9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5saWdodH07XG4gIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5gO1xuXG5jb25zdCBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSA9IGNzc2BcbiAgJHtmb250cy5zaXplcygnMThweCcsICcyNnB4Jyl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQubGlnaHR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcubm9ybWFsfSAwO1xuYDtcblxuY29uc3QgbWVkaXVtSGVhZGVyVXBwZXJjYXNlID0gY3NzYFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0LmJvbGR9O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICBwYWRkaW5nLXJpZ2h0OiAke3NwYWNpbmcuc21hbGx9O1xuICBtYXJnaW46IDA7XG4gICR7Zm9udHMuc2l6ZXMoMjAsIDEuMSl9O1xuYDtcblxuY29uc3QgdHlwb2dyYXBoeSA9IHtcbiAgc21hbGxIZWFkaW5nLFxuICBzbWFsbGVySGVhZGluZ1VwcGVyY2FzZSxcbiAgbWVkaXVtSGVhZGVyVXBwZXJjYXNlLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgdHlwb2dyYXBoeTtcbiJdfQ== */"));
+const typography = {
+  smallHeading,
+  smallerHeadingUppercase,
+  mediumHeaderUppercase
 };
-var _default = typography;
-exports.default = _default;
+var _default = exports.default = typography;

lib/utils.js

@@ -18,9 +18,40 @@ "use strict";
 
-var utils = {
-  restoreOutline: "\n    outline: 1px dotted #212121;\n    outline: -webkit-focus-ring-color auto 5px;\n",
-  visuallyHidden: "\n  margin: -1px;\n  padding: 0;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip: rect(0, 0, 0, 0);\n  position: absolute;\n",
-  scrollbar: "\n  ::-webkit-scrollbar {\n    width: ".concat(_spacing.default.small, ";\n  }\n  ::-webkit-scrollbar-thumb {\n    border: 4px solid transparent;\n    border-radius: 14px;\n    background-clip: padding-box;\n    padding: 0 4px;\n    background-color: ").concat(_colors.default.brand.neutral7, ";\n  }\n  "),
-  labelHidden: "\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  "
+const utils = {
+  restoreOutline: `
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+`,
+  visuallyHidden: `
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+`,
+  scrollbar: `
+  ::-webkit-scrollbar {
+    width: ${_spacing.default.small};
+  }
+  ::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-radius: 14px;
+    background-clip: padding-box;
+    padding: 0 4px;
+    background-color: ${_colors.default.brand.neutral7};
+  }
+  `,
+  labelHidden: `
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  `
 };
-var _default = utils;
-exports.default = _default;
+var _default = exports.default = utils;

package.json

 {
   "name": "@ndla/core",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "description": "UI component library for NDLA.",
@@ -40,3 +40,3 @@ "license": "GPL-3.0",
   },
-  "gitHead": "bd8cacb31ca60fcb4a67120418ad88ca9dd4658d"
+  "gitHead": "5c65dfc8de95fb464182f86a40b74868ca30a29e"
 }

types/index.d.ts

@@ -1,2 +0,8 @@
-// Add global types for @ndla/core here
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
 
@@ -3,0 +9,0 @@ export type Breakpoint = 'mobile' | 'mobileWide' | 'tablet' | 'tabletWide' | 'desktop' | 'wide' | 'ultraWide';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122578

increased by3.18%

Lines of code

1553

increased by50.34%

No dependency changes