@ndla/ui 39.0.1 → 39.0.2

package/es/Grid/Grid.js

@@ -8,6 +8,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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) 2023-present, NDLA.
  *
@@ -19,23 +20,37 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 var GridContainer = /*#__PURE__*/_styled("div", {
-  target: "e1c0s8mo0",
+  target: "e1c0s8mo1",
   label: "GridContainer"
-})("display:grid;grid-template-columns:auto;justify-content:center;gap:", spacing.large, ";padding:", spacing.medium, ";border-radius:", misc.borderRadius, ";&[data-border='lightBlue']{border:1px solid ", colors.brand.light, ";}", mq.range({
+})("display:inline-grid;grid-template-columns:auto;justify-content:center;grid-gap:", spacing.large, ";padding:", spacing.xsmall, ";border-radius:", misc.borderRadius, ";&[data-border='lightBlue']{border:1px solid ", colors.brand.light, ";}", mq.range({
   from: breakpoints.mobileWide
 }), "{grid-template-columns:repeat(2, auto);}", mq.range({
   from: breakpoints.tabletWide
-}), "{&[data-columns='4']{grid-template-columns:repeat(4, auto);}}p{word-break:break-word;}figure,iframe{inset:0;width:100%!important;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0MiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBnYXA6ICR7c3BhY2luZy5sYXJnZX07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5tZWRpdW19O1xuXG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBHcmlkID0gKHsgY29sdW1ucywgYm9yZGVyLCBjaGlsZHJlbiwgLi4ucmVzdCB9OiBHcmlkUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8R3JpZENvbnRhaW5lciBkYXRhLWJvcmRlcj17Ym9yZGVyfSBkYXRhLWNvbHVtbnM9e2NvbHVtbnN9IHsuLi5yZXN0fT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0dyaWRDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBHcmlkO1xuIl19 */"));
+}), "{&[data-columns='4']{grid-template-columns:repeat(4, auto);}}p{word-break:break-word;}figure,iframe{inset:0;width:100%!important;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0MiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5sYXJnZX07XG5cbiAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgR3JpZCA9ICh7IGNvbHVtbnMsIGJvcmRlciwgY2hpbGRyZW4sIC4uLnJlc3QgfTogR3JpZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPE91dGVyQ29udGFpbmVyPlxuICAgICAgPEdyaWRDb250YWluZXIgZGF0YS1ib3JkZXI9e2JvcmRlcn0gZGF0YS1jb2x1bW5zPXtjb2x1bW5zfSB7Li4ucmVzdH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgICA8L091dGVyQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgR3JpZDtcbiJdfQ== */"));
+var OuterContainer = /*#__PURE__*/_styled("div", {
+  target: "e1c0s8mo0",
+  label: "OuterContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center"
+} : {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEaUMiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5sYXJnZX07XG5cbiAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgR3JpZCA9ICh7IGNvbHVtbnMsIGJvcmRlciwgY2hpbGRyZW4sIC4uLnJlc3QgfTogR3JpZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPE91dGVyQ29udGFpbmVyPlxuICAgICAgPEdyaWRDb250YWluZXIgZGF0YS1ib3JkZXI9e2JvcmRlcn0gZGF0YS1jb2x1bW5zPXtjb2x1bW5zfSB7Li4ucmVzdH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgICA8L091dGVyQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgR3JpZDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var Grid = function Grid(_ref) {
   var columns = _ref.columns,
     border = _ref.border,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(GridContainer, _objectSpread(_objectSpread({
-    "data-border": border,
-    "data-columns": columns
-  }, rest), {}, {
-    children: children
-  }));
+  return _jsx(OuterContainer, {
+    children: _jsx(GridContainer, _objectSpread(_objectSpread({
+      "data-border": border,
+      "data-columns": columns
+    }, rest), {}, {
+      children: children
+    }))
+  });
 };
 export default Grid;

package/lib/Grid/Grid.js

@@ -9,13 +9,6 @@ var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _core = require("@ndla/core");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _excluded = ["columns", "border", "children"];
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -24,25 +17,46 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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) 2023-present, NDLA.
+                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                           * This source code is licensed under the GPLv3 license found in the
+                                                                                                                                                                                                                                                                                           * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                           */
 var GridContainer = /*#__PURE__*/(0, _base["default"])("div", {
-  target: "e1c0s8mo0",
+  target: "e1c0s8mo1",
   label: "GridContainer"
-})("display:grid;grid-template-columns:auto;justify-content:center;gap:", _core.spacing.large, ";padding:", _core.spacing.medium, ";border-radius:", _core.misc.borderRadius, ";&[data-border='lightBlue']{border:1px solid ", _core.colors.brand.light, ";}", _core.mq.range({
+})("display:inline-grid;grid-template-columns:auto;justify-content:center;grid-gap:", _core.spacing.large, ";padding:", _core.spacing.xsmall, ";border-radius:", _core.misc.borderRadius, ";&[data-border='lightBlue']{border:1px solid ", _core.colors.brand.light, ";}", _core.mq.range({
   from: _core.breakpoints.mobileWide
 }), "{grid-template-columns:repeat(2, auto);}", _core.mq.range({
   from: _core.breakpoints.tabletWide
-}), "{&[data-columns='4']{grid-template-columns:repeat(4, auto);}}p{word-break:break-word;}figure,iframe{inset:0;width:100%!important;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0MiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IGF1dG87XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBnYXA6ICR7c3BhY2luZy5sYXJnZX07XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5tZWRpdW19O1xuXG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBHcmlkID0gKHsgY29sdW1ucywgYm9yZGVyLCBjaGlsZHJlbiwgLi4ucmVzdCB9OiBHcmlkUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8R3JpZENvbnRhaW5lciBkYXRhLWJvcmRlcj17Ym9yZGVyfSBkYXRhLWNvbHVtbnM9e2NvbHVtbnN9IHsuLi5yZXN0fT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0dyaWRDb250YWluZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBHcmlkO1xuIl19 */"));
+}), "{&[data-columns='4']{grid-template-columns:repeat(4, auto);}}p{word-break:break-word;}figure,iframe{inset:0;width:100%!important;padding:0;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0MiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5sYXJnZX07XG5cbiAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgR3JpZCA9ICh7IGNvbHVtbnMsIGJvcmRlciwgY2hpbGRyZW4sIC4uLnJlc3QgfTogR3JpZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPE91dGVyQ29udGFpbmVyPlxuICAgICAgPEdyaWRDb250YWluZXIgZGF0YS1ib3JkZXI9e2JvcmRlcn0gZGF0YS1jb2x1bW5zPXtjb2x1bW5zfSB7Li4ucmVzdH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgICA8L091dGVyQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgR3JpZDtcbiJdfQ== */"));
+var OuterContainer = /*#__PURE__*/(0, _base["default"])("div", {
+  target: "e1c0s8mo0",
+  label: "OuterContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center"
+} : {
+  name: "1vcob1d",
+  styles: "display:flex;justify-content:center;align-items:center",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEaUMiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIG1pc2MsIG1xLCBzcGFjaW5nIH0gZnJvbSAnQG5kbGEvY29yZSc7XG5pbXBvcnQgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JpZFByb3BzIHtcbiAgY29sdW1uczogMiB8IDQ7XG4gIGJvcmRlcjogJ25vbmUnIHwgJ2xpZ2h0Qmx1ZSc7XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlW107XG59XG5cbmNvbnN0IEdyaWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBpbmxpbmUtZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiBhdXRvO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5sYXJnZX07XG5cbiAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuXG4gICZbZGF0YS1ib3JkZXI9J2xpZ2h0Qmx1ZSddIHtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2NvbG9ycy5icmFuZC5saWdodH07XG4gIH1cblxuICAke21xLnJhbmdlKHsgZnJvbTogYnJlYWtwb2ludHMubW9iaWxlV2lkZSB9KX0ge1xuICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDIsIGF1dG8pO1xuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAmW2RhdGEtY29sdW1ucz0nNCddIHtcbiAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIGF1dG8pO1xuICAgIH1cbiAgfVxuXG4gIHAge1xuICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gIH1cblxuICAvKiogVGhlIHN0eWxpbmcgaGVyZSBpcyB0byBoYW5kbGUgZmlndXJlcy90ZXh0IHVudGlsIGEgbmV3IGZpZ3VyZSBlbGVtZW50IGlzIGRldmVsb3BlZCAqL1xuICBmaWd1cmUsXG4gIGlmcmFtZSB7XG4gICAgaW5zZXQ6IDA7XG4gICAgd2lkdGg6IDEwMCUgIWltcG9ydGFudDtcbiAgICBwYWRkaW5nOiAwO1xuICB9XG5gO1xuXG5jb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcblxuY29uc3QgR3JpZCA9ICh7IGNvbHVtbnMsIGJvcmRlciwgY2hpbGRyZW4sIC4uLnJlc3QgfTogR3JpZFByb3BzKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPE91dGVyQ29udGFpbmVyPlxuICAgICAgPEdyaWRDb250YWluZXIgZGF0YS1ib3JkZXI9e2JvcmRlcn0gZGF0YS1jb2x1bW5zPXtjb2x1bW5zfSB7Li4ucmVzdH0+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgICA8L091dGVyQ29udGFpbmVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgR3JpZDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var Grid = function Grid(_ref) {
   var columns = _ref.columns,
     border = _ref.border,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(GridContainer, _objectSpread(_objectSpread({
-    "data-border": border,
-    "data-columns": columns
-  }, rest), {}, {
-    children: children
-  }));
+  return (0, _jsxRuntime.jsx)(OuterContainer, {
+    children: (0, _jsxRuntime.jsx)(GridContainer, _objectSpread(_objectSpread({
+      "data-border": border,
+      "data-columns": columns
+    }, rest), {}, {
+      children: children
+    }))
+  });
 };
 var _default = Grid;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "39.0.1",
+  "version": "39.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c30780b7abf3bdf20adf215223beb87e9371eca3"
+  "gitHead": "0de0b168307a43e4c02f6b0d8f6b94460f26dfd2"
 }

package/src/Grid/Grid.stories.tsx

@@ -23,7 +23,7 @@ export default {
   },
   args: {
     columns: 2,
-    border: false,
+    border: 'none',
   },
 } as Meta<typeof Grid>;
 

package/src/Grid/Grid.tsx

@@ -17,12 +17,12 @@ export interface GridProps {
 }
 
 const GridContainer = styled.div`
-  display: grid;
+  display: inline-grid;
   grid-template-columns: auto;
   justify-content: center;
-  gap: ${spacing.large};
-  padding: ${spacing.medium};
+  grid-gap: ${spacing.large};
 
+  padding: ${spacing.xsmall};
   border-radius: ${misc.borderRadius};
 
   &[data-border='lightBlue'] {
@@ -52,11 +52,19 @@ const GridContainer = styled.div`
   }
 `;
 
+const OuterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const Grid = ({ columns, border, children, ...rest }: GridProps) => {
   return (
-    <GridContainer data-border={border} data-columns={columns} {...rest}>
-      {children}
-    </GridContainer>
+    <OuterContainer>
+      <GridContainer data-border={border} data-columns={columns} {...rest}>
+        {children}
+      </GridContainer>
+    </OuterContainer>
   );
 };