@ndla/ui 35.0.13 → 35.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/Image/Image.js +29 -23
  2. package/lib/Image/Image.js +29 -23
  3. package/package.json +10 -10
  4. package/src/Image/Image.tsx +16 -2
package/es/Image/Image.js CHANGED
@@ -15,6 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
15
15
  */
16
16
 
17
17
  import React from 'react';
18
+ import { css } from '@emotion/react';
18
19
  import LazyLoadImage from './LazyLoadImage';
19
20
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
20
21
  import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
@@ -33,33 +34,37 @@ var getSrcSet = function getSrcSet(src, crop, focalPoint) {
33
34
  return "".concat(src, "?").concat(makeSrcQueryString(width, crop, focalPoint), " ").concat(width, "w");
34
35
  }).join(', ');
35
36
  };
37
+ var _ref = process.env.NODE_ENV === "production" ? {
38
+ name: "1u5anae-StyledImageWrapper",
39
+ styles: "display:flex justify-content:center;label:StyledImageWrapper;"
40
+ } : {
41
+ name: "1u5anae-StyledImageWrapper",
42
+ styles: "display:flex justify-content:center;label:StyledImageWrapper;",
43
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRFMiLCJmaWxlIjoiSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IExhenlMb2FkSW1hZ2UgZnJvbSAnLi9MYXp5TG9hZEltYWdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3Age1xuICBzdGFydFg6IG51bWJlcjtcbiAgc3RhcnRZOiBudW1iZXI7XG4gIGVuZFg6IG51bWJlcjtcbiAgZW5kWTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEltYWdlRm9jYWxQb2ludCB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgbWFrZVNyY1F1ZXJ5U3RyaW5nID0gKHdpZHRoOiBudW1iZXIgfCB1bmRlZmluZWQsIGNyb3A/OiBJbWFnZUNyb3AsIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQpID0+IHtcbiAgY29uc3Qgd2lkdGhQYXJhbXMgPSB3aWR0aCAmJiBgd2lkdGg9JHt3aWR0aH1gO1xuICBjb25zdCBjcm9wUGFyYW1zID1cbiAgICBjcm9wICYmIGBjcm9wU3RhcnRYPSR7Y3JvcC5zdGFydFh9JmNyb3BFbmRYPSR7Y3JvcC5lbmRYfSZjcm9wU3RhcnRZPSR7Y3JvcC5zdGFydFl9JmNyb3BFbmRZPSR7Y3JvcC5lbmRZfWA7XG4gIGNvbnN0IGZvY2FsUG9pbnRQYXJhbXMgPSBmb2NhbFBvaW50ICYmIGBmb2NhbFg9JHtmb2NhbFBvaW50Lnh9JmZvY2FsWT0ke2ZvY2FsUG9pbnQueX1gO1xuICBjb25zdCBwYXJhbXMgPSBbd2lkdGhQYXJhbXMsIGNyb3BQYXJhbXMsIGZvY2FsUG9pbnRQYXJhbXNdLmZpbHRlcigocCkgPT4gcCkuam9pbignJicpO1xuXG4gIHJldHVybiBwYXJhbXM7XG59O1xuXG5jb25zdCBnZXRTcmNTZXQgPSAoc3JjOiBzdHJpbmcsIGNyb3A6IEltYWdlQ3JvcCB8IHVuZGVmaW5lZCwgZm9jYWxQb2ludDogSW1hZ2VGb2NhbFBvaW50IHwgdW5kZWZpbmVkKSA9PiB7XG4gIGNvbnN0IHdpZHRocyA9IFsyNzIwLCAyMDgwLCAxNzYwLCAxNDQwLCAxMTIwLCAxMDAwLCA5NjAsIDgwMCwgNjQwLCA0ODAsIDMyMCwgMjQwLCAxODBdO1xuICByZXR1cm4gd2lkdGhzLm1hcCgod2lkdGgpID0+IGAke3NyY30/JHttYWtlU3JjUXVlcnlTdHJpbmcod2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpfSAke3dpZHRofXdgKS5qb2luKCcsICcpO1xufTtcblxuaW50ZXJmYWNlIFN0eWxlZEltYWdlV3JhcHBlclByb3BzIHtcbiAgc3ZnPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdjxTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcz5gXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgJHsoeyBzdmcgfSkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICBzdmcgJiZcbiAgICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXhcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGBcbiAgICApO1xuICB9fVxuYDtcbmludGVyZmFjZSBQcm9wcyB7XG4gIGFsdDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgc2l6ZXM/OiBzdHJpbmc7XG4gIGZhbGxiYWNrV2lkdGg/OiBudW1iZXI7XG4gIGNvbnRlbnRUeXBlPzogc3RyaW5nO1xuICBzcmNTZXQ/OiBzdHJpbmc7XG4gIGxhenlMb2FkPzogYm9vbGVhbjtcbiAgbGF6eUxvYWRTcmM/OiBzdHJpbmc7XG4gIGV4cGFuZEJ1dHRvbj86IFJlYWN0Tm9kZTtcbiAgY3JvcD86IEltYWdlQ3JvcDtcbiAgZm9jYWxQb2ludD86IEltYWdlRm9jYWxQb2ludDtcbn1cblxuY29uc3QgSW1hZ2UgPSAoe1xuICBhbHQsXG4gIHNyYyxcbiAgbGF6eUxvYWQsXG4gIGxhenlMb2FkU3JjLFxuICBjcm9wLFxuICBmb2NhbFBvaW50LFxuICBjb250ZW50VHlwZSxcbiAgc2l6ZXMgPSAnKG1pbi13aWR0aDogMTAyNHB4KSAxMDI0cHgsIDEwMHZ3JyxcbiAgZXhwYW5kQnV0dG9uLFxuICBmYWxsYmFja1dpZHRoID0gMTAyNCxcbiAgLi4ucmVzdFxufTogUHJvcHMpID0+IHtcbiAgY29uc3Qgc3JjU2V0ID0gcmVzdC5zcmNTZXQgPz8gZ2V0U3JjU2V0KHNyYywgY3JvcCwgZm9jYWxQb2ludCk7XG4gIGNvbnN0IHF1ZXJ5U3RyaW5nID0gbWFrZVNyY1F1ZXJ5U3RyaW5nKGZhbGxiYWNrV2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpO1xuXG4gIGlmIChjb250ZW50VHlwZSAmJiBjb250ZW50VHlwZSA9PT0gJ2ltYWdlL2dpZicpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPGltZyBhbHQ9e2FsdH0gc3JjPXtgJHtzcmN9YH0gey4uLnJlc3R9IC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICApO1xuICB9XG5cbiAgaWYgKGxhenlMb2FkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxMYXp5TG9hZEltYWdlXG4gICAgICAgICAgYWx0PXthbHR9XG4gICAgICAgICAgc3JjPXtgJHtzcmN9PyR7cXVlcnlTdHJpbmd9YH1cbiAgICAgICAgICBzcmNTZXQ9e3NyY1NldH1cbiAgICAgICAgICBzaXplcz17c2l6ZXN9XG4gICAgICAgICAgbGF6eUxvYWRTcmM9e2xhenlMb2FkU3JjfVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEltYWdlV3JhcHBlciBzdmc9e2NvbnRlbnRUeXBlID09PSAnaW1hZ2Uvc3ZnK3htbCd9PlxuICAgICAgPHBpY3R1cmU+XG4gICAgICAgIDxzb3VyY2UgdHlwZT17Y29udGVudFR5cGV9IHNyY1NldD17c3JjU2V0fSBzaXplcz17c2l6ZXN9IC8+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9waWN0dXJlPlxuICAgICAge2V4cGFuZEJ1dHRvbn1cbiAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEltYWdlO1xuIl19 */",
44
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
45
+ };
36
46
  var StyledImageWrapper = /*#__PURE__*/_styled("div", {
37
47
  target: "ejtxxex0",
38
48
  label: "StyledImageWrapper"
39
- })(process.env.NODE_ENV === "production" ? {
40
- name: "bjn8wh",
41
- styles: "position:relative"
42
- } : {
43
- name: "bjn8wh",
44
- styles: "position:relative",
45
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q3FDIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBMYXp5TG9hZEltYWdlIGZyb20gJy4vTGF6eUxvYWRJbWFnZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wIHtcbiAgc3RhcnRYOiBudW1iZXI7XG4gIHN0YXJ0WTogbnVtYmVyO1xuICBlbmRYOiBudW1iZXI7XG4gIGVuZFk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUZvY2FsUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IG1ha2VTcmNRdWVyeVN0cmluZyA9ICh3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkLCBjcm9wPzogSW1hZ2VDcm9wLCBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50KSA9PiB7XG4gIGNvbnN0IHdpZHRoUGFyYW1zID0gd2lkdGggJiYgYHdpZHRoPSR7d2lkdGh9YDtcbiAgY29uc3QgY3JvcFBhcmFtcyA9XG4gICAgY3JvcCAmJiBgY3JvcFN0YXJ0WD0ke2Nyb3Auc3RhcnRYfSZjcm9wRW5kWD0ke2Nyb3AuZW5kWH0mY3JvcFN0YXJ0WT0ke2Nyb3Auc3RhcnRZfSZjcm9wRW5kWT0ke2Nyb3AuZW5kWX1gO1xuICBjb25zdCBmb2NhbFBvaW50UGFyYW1zID0gZm9jYWxQb2ludCAmJiBgZm9jYWxYPSR7Zm9jYWxQb2ludC54fSZmb2NhbFk9JHtmb2NhbFBvaW50Lnl9YDtcbiAgY29uc3QgcGFyYW1zID0gW3dpZHRoUGFyYW1zLCBjcm9wUGFyYW1zLCBmb2NhbFBvaW50UGFyYW1zXS5maWx0ZXIoKHApID0+IHApLmpvaW4oJyYnKTtcblxuICByZXR1cm4gcGFyYW1zO1xufTtcblxuY29uc3QgZ2V0U3JjU2V0ID0gKHNyYzogc3RyaW5nLCBjcm9wOiBJbWFnZUNyb3AgfCB1bmRlZmluZWQsIGZvY2FsUG9pbnQ6IEltYWdlRm9jYWxQb2ludCB8IHVuZGVmaW5lZCkgPT4ge1xuICBjb25zdCB3aWR0aHMgPSBbMjcyMCwgMjA4MCwgMTc2MCwgMTQ0MCwgMTEyMCwgMTAwMCwgOTYwLCA4MDAsIDY0MCwgNDgwLCAzMjAsIDI0MCwgMTgwXTtcbiAgcmV0dXJuIHdpZHRocy5tYXAoKHdpZHRoKSA9PiBgJHtzcmN9PyR7bWFrZVNyY1F1ZXJ5U3RyaW5nKHdpZHRoLCBjcm9wLCBmb2NhbFBvaW50KX0gJHt3aWR0aH13YCkuam9pbignLCAnKTtcbn07XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIHNpemVzPzogc3RyaW5nO1xuICBmYWxsYmFja1dpZHRoPzogbnVtYmVyO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgc3JjU2V0Pzogc3RyaW5nO1xuICBsYXp5TG9hZD86IGJvb2xlYW47XG4gIGxhenlMb2FkU3JjPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b24/OiBSZWFjdE5vZGU7XG4gIGNyb3A/OiBJbWFnZUNyb3A7XG4gIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQ7XG59XG5cbmNvbnN0IEltYWdlID0gKHtcbiAgYWx0LFxuICBzcmMsXG4gIGxhenlMb2FkLFxuICBsYXp5TG9hZFNyYyxcbiAgY3JvcCxcbiAgZm9jYWxQb2ludCxcbiAgY29udGVudFR5cGUsXG4gIHNpemVzID0gJyhtaW4td2lkdGg6IDEwMjRweCkgMTAyNHB4LCAxMDB2dycsXG4gIGV4cGFuZEJ1dHRvbixcbiAgZmFsbGJhY2tXaWR0aCA9IDEwMjQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChsYXp5TG9hZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8TGF6eUxvYWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9XG4gICAgICAgICAgc3JjU2V0PXtzcmNTZXR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIGxhenlMb2FkU3JjPXtsYXp5TG9hZFNyY31cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICA8cGljdHVyZT5cbiAgICAgICAgPHNvdXJjZSB0eXBlPXtjb250ZW50VHlwZX0gc3JjU2V0PXtzcmNTZXR9IHNpemVzPXtzaXplc30gLz5cbiAgICAgICAgPGltZyBhbHQ9e2FsdH0gc3JjPXtgJHtzcmN9PyR7cXVlcnlTdHJpbmd9YH0gey4uLnJlc3R9IC8+XG4gICAgICA8L3BpY3R1cmU+XG4gICAgICB7ZXhwYW5kQnV0dG9ufVxuICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW1hZ2U7XG4iXX0= */",
46
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
47
- });
48
- var Image = function Image(_ref) {
49
+ })("position:relative;", function (_ref2) {
50
+ var svg = _ref2.svg;
51
+ return svg && _ref;
52
+ }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QzhEIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBMYXp5TG9hZEltYWdlIGZyb20gJy4vTGF6eUxvYWRJbWFnZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wIHtcbiAgc3RhcnRYOiBudW1iZXI7XG4gIHN0YXJ0WTogbnVtYmVyO1xuICBlbmRYOiBudW1iZXI7XG4gIGVuZFk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUZvY2FsUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IG1ha2VTcmNRdWVyeVN0cmluZyA9ICh3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkLCBjcm9wPzogSW1hZ2VDcm9wLCBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50KSA9PiB7XG4gIGNvbnN0IHdpZHRoUGFyYW1zID0gd2lkdGggJiYgYHdpZHRoPSR7d2lkdGh9YDtcbiAgY29uc3QgY3JvcFBhcmFtcyA9XG4gICAgY3JvcCAmJiBgY3JvcFN0YXJ0WD0ke2Nyb3Auc3RhcnRYfSZjcm9wRW5kWD0ke2Nyb3AuZW5kWH0mY3JvcFN0YXJ0WT0ke2Nyb3Auc3RhcnRZfSZjcm9wRW5kWT0ke2Nyb3AuZW5kWX1gO1xuICBjb25zdCBmb2NhbFBvaW50UGFyYW1zID0gZm9jYWxQb2ludCAmJiBgZm9jYWxYPSR7Zm9jYWxQb2ludC54fSZmb2NhbFk9JHtmb2NhbFBvaW50Lnl9YDtcbiAgY29uc3QgcGFyYW1zID0gW3dpZHRoUGFyYW1zLCBjcm9wUGFyYW1zLCBmb2NhbFBvaW50UGFyYW1zXS5maWx0ZXIoKHApID0+IHApLmpvaW4oJyYnKTtcblxuICByZXR1cm4gcGFyYW1zO1xufTtcblxuY29uc3QgZ2V0U3JjU2V0ID0gKHNyYzogc3RyaW5nLCBjcm9wOiBJbWFnZUNyb3AgfCB1bmRlZmluZWQsIGZvY2FsUG9pbnQ6IEltYWdlRm9jYWxQb2ludCB8IHVuZGVmaW5lZCkgPT4ge1xuICBjb25zdCB3aWR0aHMgPSBbMjcyMCwgMjA4MCwgMTc2MCwgMTQ0MCwgMTEyMCwgMTAwMCwgOTYwLCA4MDAsIDY0MCwgNDgwLCAzMjAsIDI0MCwgMTgwXTtcbiAgcmV0dXJuIHdpZHRocy5tYXAoKHdpZHRoKSA9PiBgJHtzcmN9PyR7bWFrZVNyY1F1ZXJ5U3RyaW5nKHdpZHRoLCBjcm9wLCBmb2NhbFBvaW50KX0gJHt3aWR0aH13YCkuam9pbignLCAnKTtcbn07XG5cbmludGVyZmFjZSBTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcyB7XG4gIHN2Zz86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXY8U3R5bGVkSW1hZ2VXcmFwcGVyUHJvcHM+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgc3ZnIH0pID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgc3ZnICYmXG4gICAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBmbGV4XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgXG4gICAgKTtcbiAgfX1cbmA7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIHNpemVzPzogc3RyaW5nO1xuICBmYWxsYmFja1dpZHRoPzogbnVtYmVyO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgc3JjU2V0Pzogc3RyaW5nO1xuICBsYXp5TG9hZD86IGJvb2xlYW47XG4gIGxhenlMb2FkU3JjPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b24/OiBSZWFjdE5vZGU7XG4gIGNyb3A/OiBJbWFnZUNyb3A7XG4gIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQ7XG59XG5cbmNvbnN0IEltYWdlID0gKHtcbiAgYWx0LFxuICBzcmMsXG4gIGxhenlMb2FkLFxuICBsYXp5TG9hZFNyYyxcbiAgY3JvcCxcbiAgZm9jYWxQb2ludCxcbiAgY29udGVudFR5cGUsXG4gIHNpemVzID0gJyhtaW4td2lkdGg6IDEwMjRweCkgMTAyNHB4LCAxMDB2dycsXG4gIGV4cGFuZEJ1dHRvbixcbiAgZmFsbGJhY2tXaWR0aCA9IDEwMjQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChsYXp5TG9hZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8TGF6eUxvYWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9XG4gICAgICAgICAgc3JjU2V0PXtzcmNTZXR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIGxhenlMb2FkU3JjPXtsYXp5TG9hZFNyY31cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVdyYXBwZXIgc3ZnPXtjb250ZW50VHlwZSA9PT0gJ2ltYWdlL3N2Zyt4bWwnfT5cbiAgICAgIDxwaWN0dXJlPlxuICAgICAgICA8c291cmNlIHR5cGU9e2NvbnRlbnRUeXBlfSBzcmNTZXQ9e3NyY1NldH0gc2l6ZXM9e3NpemVzfSAvPlxuICAgICAgICA8aW1nIGFsdD17YWx0fSBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfSB7Li4ucmVzdH0gLz5cbiAgICAgIDwvcGljdHVyZT5cbiAgICAgIHtleHBhbmRCdXR0b259XG4gICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJbWFnZTtcbiJdfQ== */"));
53
+ var Image = function Image(_ref3) {
49
54
  var _rest$srcSet;
50
- var alt = _ref.alt,
51
- src = _ref.src,
52
- lazyLoad = _ref.lazyLoad,
53
- lazyLoadSrc = _ref.lazyLoadSrc,
54
- crop = _ref.crop,
55
- focalPoint = _ref.focalPoint,
56
- contentType = _ref.contentType,
57
- _ref$sizes = _ref.sizes,
58
- sizes = _ref$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref$sizes,
59
- expandButton = _ref.expandButton,
60
- _ref$fallbackWidth = _ref.fallbackWidth,
61
- fallbackWidth = _ref$fallbackWidth === void 0 ? 1024 : _ref$fallbackWidth,
62
- rest = _objectWithoutProperties(_ref, _excluded);
55
+ var alt = _ref3.alt,
56
+ src = _ref3.src,
57
+ lazyLoad = _ref3.lazyLoad,
58
+ lazyLoadSrc = _ref3.lazyLoadSrc,
59
+ crop = _ref3.crop,
60
+ focalPoint = _ref3.focalPoint,
61
+ contentType = _ref3.contentType,
62
+ _ref3$sizes = _ref3.sizes,
63
+ sizes = _ref3$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref3$sizes,
64
+ expandButton = _ref3.expandButton,
65
+ _ref3$fallbackWidth = _ref3.fallbackWidth,
66
+ fallbackWidth = _ref3$fallbackWidth === void 0 ? 1024 : _ref3$fallbackWidth,
67
+ rest = _objectWithoutProperties(_ref3, _excluded);
63
68
  var srcSet = (_rest$srcSet = rest.srcSet) !== null && _rest$srcSet !== void 0 ? _rest$srcSet : getSrcSet(src, crop, focalPoint);
64
69
  var queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
65
70
  if (contentType && contentType === 'image/gif') {
@@ -82,6 +87,7 @@ var Image = function Image(_ref) {
82
87
  });
83
88
  }
84
89
  return _jsxs(StyledImageWrapper, {
90
+ svg: contentType === 'image/svg+xml',
85
91
  children: [_jsxs("picture", {
86
92
  children: [_jsx("source", {
87
93
  type: contentType,
package/lib/Image/Image.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.makeSrcQueryString = exports["default"] = void 0;
7
7
  var _base = _interopRequireDefault(require("@emotion/styled/base"));
8
8
  var _react = _interopRequireDefault(require("react"));
9
+ var _react2 = require("@emotion/react");
9
10
  var _LazyLoadImage = _interopRequireDefault(require("./LazyLoadImage"));
10
11
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
12
  var _excluded = ["alt", "src", "lazyLoad", "lazyLoadSrc", "crop", "focalPoint", "contentType", "sizes", "expandButton", "fallbackWidth"];
@@ -32,33 +33,37 @@ var getSrcSet = function getSrcSet(src, crop, focalPoint) {
32
33
  return "".concat(src, "?").concat(makeSrcQueryString(width, crop, focalPoint), " ").concat(width, "w");
33
34
  }).join(', ');
34
35
  };
36
+ var _ref = process.env.NODE_ENV === "production" ? {
37
+ name: "1u5anae-StyledImageWrapper",
38
+ styles: "display:flex justify-content:center;label:StyledImageWrapper;"
39
+ } : {
40
+ name: "1u5anae-StyledImageWrapper",
41
+ styles: "display:flex justify-content:center;label:StyledImageWrapper;",
42
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRFMiLCJmaWxlIjoiSW1hZ2UudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTctcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IExhenlMb2FkSW1hZ2UgZnJvbSAnLi9MYXp5TG9hZEltYWdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUNyb3Age1xuICBzdGFydFg6IG51bWJlcjtcbiAgc3RhcnRZOiBudW1iZXI7XG4gIGVuZFg6IG51bWJlcjtcbiAgZW5kWTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEltYWdlRm9jYWxQb2ludCB7XG4gIHg6IG51bWJlcjtcbiAgeTogbnVtYmVyO1xufVxuXG5leHBvcnQgY29uc3QgbWFrZVNyY1F1ZXJ5U3RyaW5nID0gKHdpZHRoOiBudW1iZXIgfCB1bmRlZmluZWQsIGNyb3A/OiBJbWFnZUNyb3AsIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQpID0+IHtcbiAgY29uc3Qgd2lkdGhQYXJhbXMgPSB3aWR0aCAmJiBgd2lkdGg9JHt3aWR0aH1gO1xuICBjb25zdCBjcm9wUGFyYW1zID1cbiAgICBjcm9wICYmIGBjcm9wU3RhcnRYPSR7Y3JvcC5zdGFydFh9JmNyb3BFbmRYPSR7Y3JvcC5lbmRYfSZjcm9wU3RhcnRZPSR7Y3JvcC5zdGFydFl9JmNyb3BFbmRZPSR7Y3JvcC5lbmRZfWA7XG4gIGNvbnN0IGZvY2FsUG9pbnRQYXJhbXMgPSBmb2NhbFBvaW50ICYmIGBmb2NhbFg9JHtmb2NhbFBvaW50Lnh9JmZvY2FsWT0ke2ZvY2FsUG9pbnQueX1gO1xuICBjb25zdCBwYXJhbXMgPSBbd2lkdGhQYXJhbXMsIGNyb3BQYXJhbXMsIGZvY2FsUG9pbnRQYXJhbXNdLmZpbHRlcigocCkgPT4gcCkuam9pbignJicpO1xuXG4gIHJldHVybiBwYXJhbXM7XG59O1xuXG5jb25zdCBnZXRTcmNTZXQgPSAoc3JjOiBzdHJpbmcsIGNyb3A6IEltYWdlQ3JvcCB8IHVuZGVmaW5lZCwgZm9jYWxQb2ludDogSW1hZ2VGb2NhbFBvaW50IHwgdW5kZWZpbmVkKSA9PiB7XG4gIGNvbnN0IHdpZHRocyA9IFsyNzIwLCAyMDgwLCAxNzYwLCAxNDQwLCAxMTIwLCAxMDAwLCA5NjAsIDgwMCwgNjQwLCA0ODAsIDMyMCwgMjQwLCAxODBdO1xuICByZXR1cm4gd2lkdGhzLm1hcCgod2lkdGgpID0+IGAke3NyY30/JHttYWtlU3JjUXVlcnlTdHJpbmcod2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpfSAke3dpZHRofXdgKS5qb2luKCcsICcpO1xufTtcblxuaW50ZXJmYWNlIFN0eWxlZEltYWdlV3JhcHBlclByb3BzIHtcbiAgc3ZnPzogYm9vbGVhbjtcbn1cblxuY29uc3QgU3R5bGVkSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdjxTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcz5gXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgJHsoeyBzdmcgfSkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICBzdmcgJiZcbiAgICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGZsZXhcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgIGBcbiAgICApO1xuICB9fVxuYDtcbmludGVyZmFjZSBQcm9wcyB7XG4gIGFsdDogc3RyaW5nO1xuICBzcmM6IHN0cmluZztcbiAgc2l6ZXM/OiBzdHJpbmc7XG4gIGZhbGxiYWNrV2lkdGg/OiBudW1iZXI7XG4gIGNvbnRlbnRUeXBlPzogc3RyaW5nO1xuICBzcmNTZXQ/OiBzdHJpbmc7XG4gIGxhenlMb2FkPzogYm9vbGVhbjtcbiAgbGF6eUxvYWRTcmM/OiBzdHJpbmc7XG4gIGV4cGFuZEJ1dHRvbj86IFJlYWN0Tm9kZTtcbiAgY3JvcD86IEltYWdlQ3JvcDtcbiAgZm9jYWxQb2ludD86IEltYWdlRm9jYWxQb2ludDtcbn1cblxuY29uc3QgSW1hZ2UgPSAoe1xuICBhbHQsXG4gIHNyYyxcbiAgbGF6eUxvYWQsXG4gIGxhenlMb2FkU3JjLFxuICBjcm9wLFxuICBmb2NhbFBvaW50LFxuICBjb250ZW50VHlwZSxcbiAgc2l6ZXMgPSAnKG1pbi13aWR0aDogMTAyNHB4KSAxMDI0cHgsIDEwMHZ3JyxcbiAgZXhwYW5kQnV0dG9uLFxuICBmYWxsYmFja1dpZHRoID0gMTAyNCxcbiAgLi4ucmVzdFxufTogUHJvcHMpID0+IHtcbiAgY29uc3Qgc3JjU2V0ID0gcmVzdC5zcmNTZXQgPz8gZ2V0U3JjU2V0KHNyYywgY3JvcCwgZm9jYWxQb2ludCk7XG4gIGNvbnN0IHF1ZXJ5U3RyaW5nID0gbWFrZVNyY1F1ZXJ5U3RyaW5nKGZhbGxiYWNrV2lkdGgsIGNyb3AsIGZvY2FsUG9pbnQpO1xuXG4gIGlmIChjb250ZW50VHlwZSAmJiBjb250ZW50VHlwZSA9PT0gJ2ltYWdlL2dpZicpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZEltYWdlV3JhcHBlcj5cbiAgICAgICAgPGltZyBhbHQ9e2FsdH0gc3JjPXtgJHtzcmN9YH0gey4uLnJlc3R9IC8+XG4gICAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgICApO1xuICB9XG5cbiAgaWYgKGxhenlMb2FkKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxMYXp5TG9hZEltYWdlXG4gICAgICAgICAgYWx0PXthbHR9XG4gICAgICAgICAgc3JjPXtgJHtzcmN9PyR7cXVlcnlTdHJpbmd9YH1cbiAgICAgICAgICBzcmNTZXQ9e3NyY1NldH1cbiAgICAgICAgICBzaXplcz17c2l6ZXN9XG4gICAgICAgICAgbGF6eUxvYWRTcmM9e2xhenlMb2FkU3JjfVxuICAgICAgICAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEltYWdlV3JhcHBlciBzdmc9e2NvbnRlbnRUeXBlID09PSAnaW1hZ2Uvc3ZnK3htbCd9PlxuICAgICAgPHBpY3R1cmU+XG4gICAgICAgIDxzb3VyY2UgdHlwZT17Y29udGVudFR5cGV9IHNyY1NldD17c3JjU2V0fSBzaXplcz17c2l6ZXN9IC8+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9waWN0dXJlPlxuICAgICAge2V4cGFuZEJ1dHRvbn1cbiAgICA8L1N0eWxlZEltYWdlV3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEltYWdlO1xuIl19 */",
43
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
44
+ };
35
45
  var StyledImageWrapper = /*#__PURE__*/(0, _base["default"])("div", {
36
46
  target: "ejtxxex0",
37
47
  label: "StyledImageWrapper"
38
- })(process.env.NODE_ENV === "production" ? {
39
- name: "bjn8wh",
40
- styles: "position:relative"
41
- } : {
42
- name: "bjn8wh",
43
- styles: "position:relative",
44
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q3FDIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBMYXp5TG9hZEltYWdlIGZyb20gJy4vTGF6eUxvYWRJbWFnZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wIHtcbiAgc3RhcnRYOiBudW1iZXI7XG4gIHN0YXJ0WTogbnVtYmVyO1xuICBlbmRYOiBudW1iZXI7XG4gIGVuZFk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUZvY2FsUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IG1ha2VTcmNRdWVyeVN0cmluZyA9ICh3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkLCBjcm9wPzogSW1hZ2VDcm9wLCBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50KSA9PiB7XG4gIGNvbnN0IHdpZHRoUGFyYW1zID0gd2lkdGggJiYgYHdpZHRoPSR7d2lkdGh9YDtcbiAgY29uc3QgY3JvcFBhcmFtcyA9XG4gICAgY3JvcCAmJiBgY3JvcFN0YXJ0WD0ke2Nyb3Auc3RhcnRYfSZjcm9wRW5kWD0ke2Nyb3AuZW5kWH0mY3JvcFN0YXJ0WT0ke2Nyb3Auc3RhcnRZfSZjcm9wRW5kWT0ke2Nyb3AuZW5kWX1gO1xuICBjb25zdCBmb2NhbFBvaW50UGFyYW1zID0gZm9jYWxQb2ludCAmJiBgZm9jYWxYPSR7Zm9jYWxQb2ludC54fSZmb2NhbFk9JHtmb2NhbFBvaW50Lnl9YDtcbiAgY29uc3QgcGFyYW1zID0gW3dpZHRoUGFyYW1zLCBjcm9wUGFyYW1zLCBmb2NhbFBvaW50UGFyYW1zXS5maWx0ZXIoKHApID0+IHApLmpvaW4oJyYnKTtcblxuICByZXR1cm4gcGFyYW1zO1xufTtcblxuY29uc3QgZ2V0U3JjU2V0ID0gKHNyYzogc3RyaW5nLCBjcm9wOiBJbWFnZUNyb3AgfCB1bmRlZmluZWQsIGZvY2FsUG9pbnQ6IEltYWdlRm9jYWxQb2ludCB8IHVuZGVmaW5lZCkgPT4ge1xuICBjb25zdCB3aWR0aHMgPSBbMjcyMCwgMjA4MCwgMTc2MCwgMTQ0MCwgMTEyMCwgMTAwMCwgOTYwLCA4MDAsIDY0MCwgNDgwLCAzMjAsIDI0MCwgMTgwXTtcbiAgcmV0dXJuIHdpZHRocy5tYXAoKHdpZHRoKSA9PiBgJHtzcmN9PyR7bWFrZVNyY1F1ZXJ5U3RyaW5nKHdpZHRoLCBjcm9wLCBmb2NhbFBvaW50KX0gJHt3aWR0aH13YCkuam9pbignLCAnKTtcbn07XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIHNpemVzPzogc3RyaW5nO1xuICBmYWxsYmFja1dpZHRoPzogbnVtYmVyO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgc3JjU2V0Pzogc3RyaW5nO1xuICBsYXp5TG9hZD86IGJvb2xlYW47XG4gIGxhenlMb2FkU3JjPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b24/OiBSZWFjdE5vZGU7XG4gIGNyb3A/OiBJbWFnZUNyb3A7XG4gIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQ7XG59XG5cbmNvbnN0IEltYWdlID0gKHtcbiAgYWx0LFxuICBzcmMsXG4gIGxhenlMb2FkLFxuICBsYXp5TG9hZFNyYyxcbiAgY3JvcCxcbiAgZm9jYWxQb2ludCxcbiAgY29udGVudFR5cGUsXG4gIHNpemVzID0gJyhtaW4td2lkdGg6IDEwMjRweCkgMTAyNHB4LCAxMDB2dycsXG4gIGV4cGFuZEJ1dHRvbixcbiAgZmFsbGJhY2tXaWR0aCA9IDEwMjQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChsYXp5TG9hZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8TGF6eUxvYWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9XG4gICAgICAgICAgc3JjU2V0PXtzcmNTZXR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIGxhenlMb2FkU3JjPXtsYXp5TG9hZFNyY31cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICA8cGljdHVyZT5cbiAgICAgICAgPHNvdXJjZSB0eXBlPXtjb250ZW50VHlwZX0gc3JjU2V0PXtzcmNTZXR9IHNpemVzPXtzaXplc30gLz5cbiAgICAgICAgPGltZyBhbHQ9e2FsdH0gc3JjPXtgJHtzcmN9PyR7cXVlcnlTdHJpbmd9YH0gey4uLnJlc3R9IC8+XG4gICAgICA8L3BpY3R1cmU+XG4gICAgICB7ZXhwYW5kQnV0dG9ufVxuICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgSW1hZ2U7XG4iXX0= */",
45
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
46
- });
47
- var Image = function Image(_ref) {
48
+ })("position:relative;", function (_ref2) {
49
+ var svg = _ref2.svg;
50
+ return svg && _ref;
51
+ }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkltYWdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QzhEIiwiZmlsZSI6IkltYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDE3LXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBMYXp5TG9hZEltYWdlIGZyb20gJy4vTGF6eUxvYWRJbWFnZSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSW1hZ2VDcm9wIHtcbiAgc3RhcnRYOiBudW1iZXI7XG4gIHN0YXJ0WTogbnVtYmVyO1xuICBlbmRYOiBudW1iZXI7XG4gIGVuZFk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJbWFnZUZvY2FsUG9pbnQge1xuICB4OiBudW1iZXI7XG4gIHk6IG51bWJlcjtcbn1cblxuZXhwb3J0IGNvbnN0IG1ha2VTcmNRdWVyeVN0cmluZyA9ICh3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkLCBjcm9wPzogSW1hZ2VDcm9wLCBmb2NhbFBvaW50PzogSW1hZ2VGb2NhbFBvaW50KSA9PiB7XG4gIGNvbnN0IHdpZHRoUGFyYW1zID0gd2lkdGggJiYgYHdpZHRoPSR7d2lkdGh9YDtcbiAgY29uc3QgY3JvcFBhcmFtcyA9XG4gICAgY3JvcCAmJiBgY3JvcFN0YXJ0WD0ke2Nyb3Auc3RhcnRYfSZjcm9wRW5kWD0ke2Nyb3AuZW5kWH0mY3JvcFN0YXJ0WT0ke2Nyb3Auc3RhcnRZfSZjcm9wRW5kWT0ke2Nyb3AuZW5kWX1gO1xuICBjb25zdCBmb2NhbFBvaW50UGFyYW1zID0gZm9jYWxQb2ludCAmJiBgZm9jYWxYPSR7Zm9jYWxQb2ludC54fSZmb2NhbFk9JHtmb2NhbFBvaW50Lnl9YDtcbiAgY29uc3QgcGFyYW1zID0gW3dpZHRoUGFyYW1zLCBjcm9wUGFyYW1zLCBmb2NhbFBvaW50UGFyYW1zXS5maWx0ZXIoKHApID0+IHApLmpvaW4oJyYnKTtcblxuICByZXR1cm4gcGFyYW1zO1xufTtcblxuY29uc3QgZ2V0U3JjU2V0ID0gKHNyYzogc3RyaW5nLCBjcm9wOiBJbWFnZUNyb3AgfCB1bmRlZmluZWQsIGZvY2FsUG9pbnQ6IEltYWdlRm9jYWxQb2ludCB8IHVuZGVmaW5lZCkgPT4ge1xuICBjb25zdCB3aWR0aHMgPSBbMjcyMCwgMjA4MCwgMTc2MCwgMTQ0MCwgMTEyMCwgMTAwMCwgOTYwLCA4MDAsIDY0MCwgNDgwLCAzMjAsIDI0MCwgMTgwXTtcbiAgcmV0dXJuIHdpZHRocy5tYXAoKHdpZHRoKSA9PiBgJHtzcmN9PyR7bWFrZVNyY1F1ZXJ5U3RyaW5nKHdpZHRoLCBjcm9wLCBmb2NhbFBvaW50KX0gJHt3aWR0aH13YCkuam9pbignLCAnKTtcbn07XG5cbmludGVyZmFjZSBTdHlsZWRJbWFnZVdyYXBwZXJQcm9wcyB7XG4gIHN2Zz86IGJvb2xlYW47XG59XG5cbmNvbnN0IFN0eWxlZEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXY8U3R5bGVkSW1hZ2VXcmFwcGVyUHJvcHM+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICR7KHsgc3ZnIH0pID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgc3ZnICYmXG4gICAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBmbGV4XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICBgXG4gICAgKTtcbiAgfX1cbmA7XG5pbnRlcmZhY2UgUHJvcHMge1xuICBhbHQ6IHN0cmluZztcbiAgc3JjOiBzdHJpbmc7XG4gIHNpemVzPzogc3RyaW5nO1xuICBmYWxsYmFja1dpZHRoPzogbnVtYmVyO1xuICBjb250ZW50VHlwZT86IHN0cmluZztcbiAgc3JjU2V0Pzogc3RyaW5nO1xuICBsYXp5TG9hZD86IGJvb2xlYW47XG4gIGxhenlMb2FkU3JjPzogc3RyaW5nO1xuICBleHBhbmRCdXR0b24/OiBSZWFjdE5vZGU7XG4gIGNyb3A/OiBJbWFnZUNyb3A7XG4gIGZvY2FsUG9pbnQ/OiBJbWFnZUZvY2FsUG9pbnQ7XG59XG5cbmNvbnN0IEltYWdlID0gKHtcbiAgYWx0LFxuICBzcmMsXG4gIGxhenlMb2FkLFxuICBsYXp5TG9hZFNyYyxcbiAgY3JvcCxcbiAgZm9jYWxQb2ludCxcbiAgY29udGVudFR5cGUsXG4gIHNpemVzID0gJyhtaW4td2lkdGg6IDEwMjRweCkgMTAyNHB4LCAxMDB2dycsXG4gIGV4cGFuZEJ1dHRvbixcbiAgZmFsbGJhY2tXaWR0aCA9IDEwMjQsXG4gIC4uLnJlc3Rcbn06IFByb3BzKSA9PiB7XG4gIGNvbnN0IHNyY1NldCA9IHJlc3Quc3JjU2V0ID8/IGdldFNyY1NldChzcmMsIGNyb3AsIGZvY2FsUG9pbnQpO1xuICBjb25zdCBxdWVyeVN0cmluZyA9IG1ha2VTcmNRdWVyeVN0cmluZyhmYWxsYmFja1dpZHRoLCBjcm9wLCBmb2NhbFBvaW50KTtcblxuICBpZiAoY29udGVudFR5cGUgJiYgY29udGVudFR5cGUgPT09ICdpbWFnZS9naWYnKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgICAgIDxpbWcgYWx0PXthbHR9IHNyYz17YCR7c3JjfWB9IHsuLi5yZXN0fSAvPlxuICAgICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICAgKTtcbiAgfVxuXG4gIGlmIChsYXp5TG9hZCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICAgICA8TGF6eUxvYWRJbWFnZVxuICAgICAgICAgIGFsdD17YWx0fVxuICAgICAgICAgIHNyYz17YCR7c3JjfT8ke3F1ZXJ5U3RyaW5nfWB9XG4gICAgICAgICAgc3JjU2V0PXtzcmNTZXR9XG4gICAgICAgICAgc2l6ZXM9e3NpemVzfVxuICAgICAgICAgIGxhenlMb2FkU3JjPXtsYXp5TG9hZFNyY31cbiAgICAgICAgLz5cbiAgICAgIDwvU3R5bGVkSW1hZ2VXcmFwcGVyPlxuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRJbWFnZVdyYXBwZXIgc3ZnPXtjb250ZW50VHlwZSA9PT0gJ2ltYWdlL3N2Zyt4bWwnfT5cbiAgICAgIDxwaWN0dXJlPlxuICAgICAgICA8c291cmNlIHR5cGU9e2NvbnRlbnRUeXBlfSBzcmNTZXQ9e3NyY1NldH0gc2l6ZXM9e3NpemVzfSAvPlxuICAgICAgICA8aW1nIGFsdD17YWx0fSBzcmM9e2Ake3NyY30/JHtxdWVyeVN0cmluZ31gfSB7Li4ucmVzdH0gLz5cbiAgICAgIDwvcGljdHVyZT5cbiAgICAgIHtleHBhbmRCdXR0b259XG4gICAgPC9TdHlsZWRJbWFnZVdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBJbWFnZTtcbiJdfQ== */"));
52
+ var Image = function Image(_ref3) {
48
53
  var _rest$srcSet;
49
- var alt = _ref.alt,
50
- src = _ref.src,
51
- lazyLoad = _ref.lazyLoad,
52
- lazyLoadSrc = _ref.lazyLoadSrc,
53
- crop = _ref.crop,
54
- focalPoint = _ref.focalPoint,
55
- contentType = _ref.contentType,
56
- _ref$sizes = _ref.sizes,
57
- sizes = _ref$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref$sizes,
58
- expandButton = _ref.expandButton,
59
- _ref$fallbackWidth = _ref.fallbackWidth,
60
- fallbackWidth = _ref$fallbackWidth === void 0 ? 1024 : _ref$fallbackWidth,
61
- rest = _objectWithoutProperties(_ref, _excluded);
54
+ var alt = _ref3.alt,
55
+ src = _ref3.src,
56
+ lazyLoad = _ref3.lazyLoad,
57
+ lazyLoadSrc = _ref3.lazyLoadSrc,
58
+ crop = _ref3.crop,
59
+ focalPoint = _ref3.focalPoint,
60
+ contentType = _ref3.contentType,
61
+ _ref3$sizes = _ref3.sizes,
62
+ sizes = _ref3$sizes === void 0 ? '(min-width: 1024px) 1024px, 100vw' : _ref3$sizes,
63
+ expandButton = _ref3.expandButton,
64
+ _ref3$fallbackWidth = _ref3.fallbackWidth,
65
+ fallbackWidth = _ref3$fallbackWidth === void 0 ? 1024 : _ref3$fallbackWidth,
66
+ rest = _objectWithoutProperties(_ref3, _excluded);
62
67
  var srcSet = (_rest$srcSet = rest.srcSet) !== null && _rest$srcSet !== void 0 ? _rest$srcSet : getSrcSet(src, crop, focalPoint);
63
68
  var queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
64
69
  if (contentType && contentType === 'image/gif') {
@@ -81,6 +86,7 @@ var Image = function Image(_ref) {
81
86
  });
82
87
  }
83
88
  return (0, _jsxRuntime.jsxs)(StyledImageWrapper, {
89
+ svg: contentType === 'image/svg+xml',
84
90
  children: [(0, _jsxRuntime.jsxs)("picture", {
85
91
  children: [(0, _jsxRuntime.jsx)("source", {
86
92
  type: contentType,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "35.0.13",
3
+ "version": "35.0.15",
4
4
  "description": "UI component library for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -31,22 +31,22 @@
31
31
  "types"
32
32
  ],
33
33
  "dependencies": {
34
- "@ndla/article-scripts": "^3.0.16",
34
+ "@ndla/article-scripts": "^3.0.17",
35
35
  "@ndla/button": "^10.0.6",
36
36
  "@ndla/carousel": "^3.0.9",
37
37
  "@ndla/core": "^3.1.3",
38
- "@ndla/forms": "^4.2.14",
39
- "@ndla/hooks": "^2.0.3",
38
+ "@ndla/forms": "^4.2.15",
39
+ "@ndla/hooks": "^2.0.4",
40
40
  "@ndla/icons": "^2.2.9",
41
- "@ndla/licenses": "^7.0.3",
41
+ "@ndla/licenses": "^7.0.4",
42
42
  "@ndla/modal": "^2.2.13",
43
- "@ndla/notion": "^4.2.11",
43
+ "@ndla/notion": "^4.2.12",
44
44
  "@ndla/safelink": "^4.0.16",
45
45
  "@ndla/switch": "^1.0.8",
46
- "@ndla/tabs": "^2.1.14",
46
+ "@ndla/tabs": "^2.1.15",
47
47
  "@ndla/tooltip": "^4.0.16",
48
48
  "@ndla/types-learningpath-api": "^0.0.20",
49
- "@ndla/util": "^3.1.11",
49
+ "@ndla/util": "^3.1.12",
50
50
  "@radix-ui/react-accordion": "1.1.0",
51
51
  "@radix-ui/react-dropdown-menu": "2.0.2",
52
52
  "@radix-ui/react-popover": "^1.0.3",
@@ -75,7 +75,7 @@
75
75
  },
76
76
  "devDependencies": {
77
77
  "@babel/plugin-proposal-optional-chaining": "^7.11.0",
78
- "@ndla/types-embed": "^1.0.5",
78
+ "@ndla/types-embed": "^1.0.6",
79
79
  "@ndla/types-image-api": "0.0.10",
80
80
  "@types/reach__dialog": "^0.1.0",
81
81
  "css-loader": "^6.7.3",
@@ -87,5 +87,5 @@
87
87
  "publishConfig": {
88
88
  "access": "public"
89
89
  },
90
- "gitHead": "c6beedc1a79427fa7549ecda85a6ffde6560b0ff"
90
+ "gitHead": "78fb5e48e82d93942da6c1f08a9b4610d1bd534f"
91
91
  }
package/src/Image/Image.tsx CHANGED
@@ -8,6 +8,7 @@
8
8
 
9
9
  import React, { ReactNode } from 'react';
10
10
  import styled from '@emotion/styled';
11
+ import { css } from '@emotion/react';
11
12
  import LazyLoadImage from './LazyLoadImage';
12
13
 
13
14
  export interface ImageCrop {
@@ -37,8 +38,21 @@ const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFo
37
38
  return widths.map((width) => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(', ');
38
39
  };
39
40
 
40
- const StyledImageWrapper = styled.div`
41
+ interface StyledImageWrapperProps {
42
+ svg?: boolean;
43
+ }
44
+
45
+ const StyledImageWrapper = styled.div<StyledImageWrapperProps>`
41
46
  position: relative;
47
+ ${({ svg }) => {
48
+ return (
49
+ svg &&
50
+ css`
51
+ display: flex
52
+ justify-content: center;
53
+ `
54
+ );
55
+ }}
42
56
  `;
43
57
  interface Props {
44
58
  alt: string;
@@ -93,7 +107,7 @@ const Image = ({
93
107
  }
94
108
 
95
109
  return (
96
- <StyledImageWrapper>
110
+ <StyledImageWrapper svg={contentType === 'image/svg+xml'}>
97
111
  <picture>
98
112
  <source type={contentType} srcSet={srcSet} sizes={sizes} />
99
113
  <img alt={alt} src={`${src}?${queryString}`} {...rest} />