@bbl-digital/snorre 4.2.74 → 4.2.75

package/lib/core/ImagePicker/index.js

@@ -1,138 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactImagesUploading = _interopRequireDefault(require("react-images-uploading"));
-var _IconDelete = _interopRequireDefault(require("../../icons/General/IconDelete"));
-var _IconImage = _interopRequireDefault(require("../../icons/General/IconImage"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _Image = _interopRequireDefault(require("../Image"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _IconWithBackground = _interopRequireDefault(require("./IconWithBackground"));
-var _styles = require("./styles");
-var _UploadButton = _interopRequireDefault(require("./UploadButton"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const ImagePicker = ({
-  value = [],
-  onChange,
-  multiple = true,
-  maxNumber,
-  acceptType = ['png', 'jpg', 'jpeg'],
-  ...imageUploadingProps
-}) => {
-  const setMainImage = index => {
-    let result = Array.from(value);
-    result.unshift(result.splice(index, 1)[0]);
-    onChange(result);
-  };
-  return (0, _jsxRuntime.jsx)("div", {
-    children: (0, _jsxRuntime.jsx)(_reactImagesUploading.default, {
-      value: value?.map(v => {
-        if (v.imageUrl) {
-          return {
-            ...v,
-            dataURL: v.imageUrl
-          };
-        }
-        return v;
-      }),
-      onChange: onChange,
-      acceptType: acceptType,
-      multiple: multiple,
-      maxNumber: maxNumber,
-      ...imageUploadingProps,
-      children: ({
-        onImageUpload,
-        onImageRemove,
-        imageList,
-        dragProps,
-        errors,
-        isDragging
-      }) => {
-        const [firstImage, ...rest] = imageList;
-        if (!firstImage) return (0, _jsxRuntime.jsx)("div", {
-          css: _styles.styles.grid,
-          children: (0, _jsxRuntime.jsx)(_UploadButton.default, {
-            onClick: onImageUpload,
-            isDragging: isDragging,
-            ...dragProps
-          })
-        });
-        return (0, _jsxRuntime.jsxs)("div", {
-          children: [(0, _jsxRuntime.jsxs)("div", {
-            css: _styles.styles.grid,
-            children: [(0, _jsxRuntime.jsxs)("div", {
-              children: [(0, _jsxRuntime.jsx)(_Image.default, {
-                src: firstImage.dataURL || '',
-                alt: "Bilde",
-                objectFit: "cover",
-                width: "100%",
-                height: "100%"
-              }), Boolean(rest.length) && (0, _jsxRuntime.jsx)("span", {
-                css: _styles.styles.pinButton,
-                title: "Dette er hovedbilde",
-                children: (0, _jsxRuntime.jsx)(_IconWithBackground.default, {
-                  icon: (0, _jsxRuntime.jsx)(_IconImage.default, {}),
-                  variant: "isMainImage"
-                })
-              }), (0, _jsxRuntime.jsx)(_Button.default, {
-                nostyle: true,
-                focusable: true,
-                css: _styles.styles.deleteButton,
-                onClick: () => onImageRemove(0),
-                "aria-label": "Fjern bilde",
-                children: (0, _jsxRuntime.jsx)(_IconWithBackground.default, {
-                  variant: "delete",
-                  icon: (0, _jsxRuntime.jsx)(_IconDelete.default, {})
-                })
-              })]
-            }), Boolean(rest.length) && rest.map((image, index) => (0, _jsxRuntime.jsxs)("div", {
-              children: [(0, _jsxRuntime.jsx)(_Image.default, {
-                src: image.dataURL || '',
-                alt: "Bilde",
-                objectFit: "cover",
-                height: "100%",
-                width: "100%"
-              }), (0, _jsxRuntime.jsx)(_Button.default, {
-                title: "Sett som hovedbilde",
-                nostyle: true,
-                focusable: true,
-                css: _styles.styles.pinButton,
-                "aria-label": "Sett som hovedbilde",
-                onClick: () => setMainImage(index + 1),
-                children: (0, _jsxRuntime.jsx)(_IconWithBackground.default, {
-                  icon: (0, _jsxRuntime.jsx)(_IconImage.default, {}),
-                  variant: "setMainImage"
-                })
-              }), (0, _jsxRuntime.jsx)(_Button.default, {
-                nostyle: true,
-                focusable: true,
-                css: _styles.styles.deleteButton,
-                "aria-label": "Fjern bilde",
-                onClick: () => onImageRemove(index + 1),
-                children: (0, _jsxRuntime.jsx)(_IconWithBackground.default, {
-                  variant: "delete",
-                  icon: (0, _jsxRuntime.jsx)(_IconDelete.default, {})
-                })
-              })]
-            }, index)), multiple && (0, _jsxRuntime.jsx)(_UploadButton.default, {
-              onClick: onImageUpload,
-              addMore: true,
-              isDragging: isDragging,
-              ...dragProps
-            })]
-          }), errors?.acceptType && (0, _jsxRuntime.jsx)(_Text.default, {
-            role: "alert",
-            children: "Bilde formatet st\xF8ttes ikke"
-          })]
-        });
-      }
-    })
-  });
+import ImageUploading from 'react-images-uploading';
+import IconDelete from '../../icons/General/IconDelete';
+import IconImage from '../../icons/General/IconImage';
+import Button from '../Button';
+import Image from '../Image';
+import Text from '../Text';
+import IconWithBackground from './IconWithBackground';
+import { styles } from './styles';
+import UploadButton from './UploadButton';
+const ImagePicker = ({ value = [], onChange, multiple = true, maxNumber, acceptType = ['png', 'jpg', 'jpeg'], ...imageUploadingProps }) => {
+    const setMainImage = (index) => {
+        let result = Array.from(value);
+        result.unshift(result.splice(index, 1)[0]);
+        onChange(result);
+    };
+    return (_jsx("div", { children: _jsx(ImageUploading, { value: value?.map((v) => {
+                if (v.imageUrl) {
+                    return { ...v, dataURL: v.imageUrl };
+                }
+                return v;
+            }), onChange: onChange, acceptType: acceptType, multiple: multiple, maxNumber: maxNumber, ...imageUploadingProps, children: ({ onImageUpload, onImageRemove, imageList, dragProps, errors, isDragging, }) => {
+                const [firstImage, ...rest] = imageList;
+                if (!firstImage)
+                    return (_jsx("div", { css: styles.grid, children: _jsx(UploadButton, { onClick: onImageUpload, isDragging: isDragging, ...dragProps }) }));
+                return (_jsxs("div", { children: [_jsxs("div", { css: styles.grid, children: [_jsxs("div", { children: [_jsx(Image, { src: firstImage.dataURL || '', alt: "Bilde", objectFit: "cover", width: "100%", height: "100%" }), Boolean(rest.length) && (_jsx("span", { css: styles.pinButton, title: "Dette er hovedbilde", children: _jsx(IconWithBackground, { icon: _jsx(IconImage, {}), variant: "isMainImage" }) })), _jsx(Button, { nostyle: true, focusable: true, css: styles.deleteButton, onClick: () => onImageRemove(0), "aria-label": "Fjern bilde", children: _jsx(IconWithBackground, { variant: "delete", icon: _jsx(IconDelete, {}) }) })] }), Boolean(rest.length) &&
+                                    rest.map((image, index) => (_jsxs("div", { children: [_jsx(Image, { src: image.dataURL || '', alt: "Bilde", objectFit: "cover", height: "100%", width: "100%" }), _jsx(Button, { title: "Sett som hovedbilde", nostyle: true, focusable: true, css: styles.pinButton, "aria-label": "Sett som hovedbilde", onClick: () => setMainImage(index + 1), children: _jsx(IconWithBackground, { icon: _jsx(IconImage, {}), variant: "setMainImage" }) }), _jsx(Button, { nostyle: true, focusable: true, css: styles.deleteButton, "aria-label": "Fjern bilde", onClick: () => onImageRemove(index + 1), children: _jsx(IconWithBackground, { variant: "delete", icon: _jsx(IconDelete, {}) }) })] }, index))), multiple && (_jsx(UploadButton, { onClick: onImageUpload, addMore: true, isDragging: isDragging, ...dragProps }))] }), errors?.acceptType && (_jsx(Text, { role: "alert", children: "Bilde formatet st\u00F8ttes ikke" }))] }));
+            } }) }));
 };
-var _default = exports.default = ImagePicker;
+export default ImagePicker;

package/lib/core/ImagePicker/styles.d.ts

@@ -17,4 +17,3 @@ export declare const uploadButtonStyles: {
     addImage: import("@emotion/react").SerializedStyles;
     addMore: import("@emotion/react").SerializedStyles;
 };
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/ImagePicker/styles.js

@@ -1,77 +1,117 @@
-"use strict";
+import { css } from '@emotion/react';
+import bp from '../../globals/styles/breakpoints';
+export const imageBorderRadius = '8px';
+export const styles = {
+    grid: css `
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-auto-rows: 100px;
+    grid-gap: 0.5em;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withBackGroundStyles = exports.uploadButtonStyles = exports.styles = exports.imageBorderRadius = void 0;
-var _react = require("@emotion/react");
-var _breakpoints = _interopRequireDefault(require("../../globals/styles/breakpoints"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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)."; }
-const imageBorderRadius = exports.imageBorderRadius = '8px';
-const styles = exports.styles = {
-  grid: /*#__PURE__*/(0, _react.css)("display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:100px;grid-gap:0.5em;@media screen and (max-width: ", _breakpoints.default.small, "){grid-template-columns:1fr 1fr;}&>div{position:relative;display:flex;border-radius:", imageBorderRadius, ";overflow:hidden;align-items:center;justify-content:center;&:first-of-type{grid-column:1/-1;grid-row:span 3;}&:not(:first-of-type){grid-row:span 2;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:grid;")),
-  deleteButton: process.env.NODE_ENV === "production" ? {
-    name: "a4hmbt",
-    styles: "position:absolute"
-  } : {
-    name: "1fm46f-deleteButton",
-    styles: "position:absolute;label:deleteButton;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  pinButton: process.env.NODE_ENV === "production" ? {
-    name: "1s8f2gp",
-    styles: "position:absolute;top:0.5em;right:0.5em"
-  } : {
-    name: "jxq0mc-pinButton",
-    styles: "position:absolute;top:0.5em;right:0.5em;label:pinButton;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+    @media screen and (max-width: ${bp.small}) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    & > div {
+      position: relative;
+      display: flex;
+      border-radius: ${imageBorderRadius};
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+
+      &:first-of-type {
+        grid-column: 1 / -1;
+        grid-row: span 3;
+      }
+      &:not(:first-of-type) {
+        grid-row: span 2;
+      }
+    }
+  `,
+    deleteButton: css `
+    position: absolute;
+  `,
+    pinButton: css `
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+  `,
 };
-const withBackGroundStyles = exports.withBackGroundStyles = {
-  default: process.env.NODE_ENV === "production" ? {
-    name: "1wnowod",
-    styles: "display:flex;align-items:center;justify-content:center"
-  } : {
-    name: "196ujv6-default",
-    styles: "display:flex;align-items:center;justify-content:center;label:default;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  setMainImage: process.env.NODE_ENV === "production" ? {
-    name: "19w5sti",
-    styles: "width:2em;height:2em;opacity:0.5;border-radius:5px;background-color:grey;padding:0 2px;&:hover{cursor:pointer;opacity:1;}"
-  } : {
-    name: "x22wlt-setMainImage",
-    styles: "width:2em;height:2em;opacity:0.5;border-radius:5px;background-color:grey;padding:0 2px;&:hover{cursor:pointer;opacity:1;};label:setMainImage;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  isMainImage: theme => /*#__PURE__*/(0, _react.css)("width:2em;height:2em;background-color:#f7f7f7;border-radius:5px;color:", theme.primary, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:isMainImage;")),
-  delete: theme => /*#__PURE__*/(0, _react.css)("width:3em;height:3em;background-color:#f7f7f7;border:2px solid black;border-radius:50%;&:hover{*{fill:", theme.btnDanger, "!important;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:delete;")),
-  imageUpload: process.env.NODE_ENV === "production" ? {
-    name: "1d9oiz3",
-    styles: "width:3em;height:3em;background-color:transparent;border:2px solid black;border-radius:50%"
-  } : {
-    name: "11e21kv-imageUpload",
-    styles: "width:3em;height:3em;background-color:transparent;border:2px solid black;border-radius:50%;label:imageUpload;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+export const withBackGroundStyles = {
+    default: css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+    setMainImage: css `
+    width: 2em;
+    height: 2em;
+    opacity: 0.5;
+    border-radius: 5px;
+    background-color: grey;
+    padding: 0 2px;
+
+    &:hover {
+      cursor: pointer;
+      opacity: 1;
+    }
+  `,
+    isMainImage: (theme) => css `
+    width: 2em;
+    height: 2em;
+    background-color: #f7f7f7;
+    border-radius: 5px;
+    color: ${theme.primary};
+  `,
+    delete: (theme) => css `
+    width: 3em;
+    height: 3em;
+    background-color: #f7f7f7;
+    border: 2px solid black;
+    border-radius: 50%;
+
+    &:hover {
+      * {
+        fill: ${theme.btnDanger} !important;
+      }
+    }
+  `,
+    imageUpload: css `
+    width: 3em;
+    height: 3em;
+    background-color: transparent;
+    border: 2px solid black;
+    border-radius: 50%;
+  `,
+};
+export const uploadButtonStyles = {
+    default: css `
+    border: 1px dashed #cccccc;
+    border-radius: ${imageBorderRadius};
+    z-index: 10;
+    background-color: transparent;
+    transition: border-color 0.1s;
+
+    &:hover,
+    &:focus {
+      border-color: black;
+      cursor: pointer;
+    }
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5em;
+      pointer-events: none;
+    }
+  `,
+    addImage: css `
+    grid-column: 1 / -1;
+    grid-row: span 3;
+  `,
+    addMore: css `
+    grid-row: span 2;
+  `,
 };
-const uploadButtonStyles = exports.uploadButtonStyles = {
-  default: /*#__PURE__*/(0, _react.css)("border:1px dashed #cccccc;border-radius:", imageBorderRadius, ";z-index:10;background-color:transparent;transition:border-color 0.1s;&:hover,&:focus{border-color:black;cursor:pointer;}&>div{display:flex;flex-direction:column;align-items:center;gap:0.5em;pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;")),
-  addImage: process.env.NODE_ENV === "production" ? {
-    name: "1v76or3",
-    styles: "grid-column:1/-1;grid-row:span 3"
-  } : {
-    name: "adxr89-addImage",
-    styles: "grid-column:1/-1;grid-row:span 3;label:addImage;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  addMore: process.env.NODE_ENV === "production" ? {
-    name: "1v6u4im",
-    styles: "grid-row:span 2"
-  } : {
-    name: "l9w6is-addMore",
-    styles: "grid-row:span 2;label:addMore;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
-};

package/lib/core/ImageViewer/ImageViewer.stories.d.ts

@@ -4,4 +4,3 @@ declare const meta: Meta<typeof ImageViewer>;
 export default meta;
 type Story = StoryObj<typeof ImageViewer>;
 export declare const Default: Story;
-//# sourceMappingURL=ImageViewer.stories.d.ts.map

package/lib/core/ImageViewer/ImageViewer.stories.js

@@ -1,21 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Default = void 0;
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import ImageViewer from '.';
 const meta = {
-  title: 'Core/ImageViewer',
-  component: _.default
+    title: 'Core/ImageViewer',
+    component: ImageViewer,
+};
+export default meta;
+export const Default = {
+    name: 'Image viewer',
+    args: {
+        images: [
+            'https://random.imagecdn.app/500/500',
+            'https://random.imagecdn.app/750/750',
+            'https://random.imagecdn.app/1080/2000',
+            'https://random.imagecdn.app/1980/1020',
+        ],
+        onClose: () => console.log('close'),
+        initialImage: 1,
+    },
 };
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: 'Image viewer',
-  args: {
-    images: ['https://random.imagecdn.app/500/500', 'https://random.imagecdn.app/750/750', 'https://random.imagecdn.app/1080/2000', 'https://random.imagecdn.app/1980/1020'],
-    onClose: () => console.log('close'),
-    initialImage: 1
-  }
-};

package/lib/core/ImageViewer/index.d.ts

@@ -8,4 +8,3 @@ type Props = {
 };
 declare const ImageViewer: ({ images, initialImage, onClose }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ImageViewer;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/ImageViewer/index.js

@@ -1,112 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _styles = require("./styles");
-var _Image = _interopRequireDefault(require("../Image"));
-var _nukaCarousel = _interopRequireDefault(require("nuka-carousel"));
-var _Text = _interopRequireDefault(require("../Text"));
-var _IconChevronLeft = _interopRequireDefault(require("../../icons/General/IconChevronLeft"));
-var _IconClose = _interopRequireDefault(require("../../icons/General/IconClose"));
-var _react2 = require("react");
-var _Keyboard = require("../../enums/Keyboard");
-var _reactAria = require("react-aria");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const ImageViewer = ({
-  images,
-  initialImage = 0,
-  onClose
-}) => {
-  const theme = (0, _react.useTheme)();
-  const [isZoomed, setIsZoomed] = (0, _react2.useState)(false);
-  (0, _react2.useEffect)(() => {
-    // Trigger close event on "escape" keydown
-    const handleKeyDown = event => {
-      if (event.key === _Keyboard.Key.escape) onClose();
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-  const hasMultipleImages = Boolean(images.length > 1);
-  return (0, _jsxRuntime.jsx)("div", {
-    css: _styles.styles.overlay,
-    children: (0, _jsxRuntime.jsxs)("div", {
-      css: _styles.styles.carousel,
-      role: "dialog",
-      "aria-modal": true,
-      "aria-labelledby": "carousel-heading",
-      children: [(0, _jsxRuntime.jsx)(_reactAria.VisuallyHidden, {
-        id: "carousel-heading",
-        children: "Bildevisning"
-      }), (0, _jsxRuntime.jsx)(_nukaCarousel.default, {
-        enableKeyboardControls: true,
-        swiping: hasMultipleImages,
-        dragging: hasMultipleImages,
-        wrapAround: true,
-        slideIndex: initialImage,
-        cellSpacing: 15,
-        onUserNavigation: () => setIsZoomed(false),
-        renderTopRightControls: () => (0, _jsxRuntime.jsx)("button", {
-          css: _styles.styles.closeBtn,
-          onClick: onClose,
-          "aria-label": "Lukk bildevisning",
-          children: (0, _jsxRuntime.jsx)(_IconClose.default, {
-            color: "white"
-          })
-        }),
-        renderCenterRightControls: ({
-          nextSlide
-        }) => hasMultipleImages && (0, _jsxRuntime.jsx)("button", {
-          css: _styles.styles.controlBtn('right'),
-          onClick: nextSlide,
-          "aria-label": "Naviger til neste bilde",
-          children: (0, _jsxRuntime.jsx)(_IconChevronLeft.default, {
-            size: 18,
-            color: theme.btnDefaultFontColor,
-            flip: true
-          })
-        }),
-        renderCenterLeftControls: ({
-          previousSlide
-        }) => hasMultipleImages && (0, _jsxRuntime.jsx)("button", {
-          css: _styles.styles.controlBtn('left'),
-          onClick: previousSlide,
-          "aria-label": "Naviger til forrige bilde",
-          children: (0, _jsxRuntime.jsx)(_IconChevronLeft.default, {
-            size: 18,
-            color: theme.btnDefaultFontColor
-          })
-        }),
-        renderBottomCenterControls: ({
-          currentSlide
-        }) => (0, _jsxRuntime.jsx)("div", {
-          css: _styles.styles.pageInfo,
-          children: (0, _jsxRuntime.jsxs)(_Text.default, {
-            color: theme.btnDefaultFontColor,
-            size: "14px",
-            "aria-label": `Bilde ${currentSlide + 1} av ${images.length}`,
-            children: [currentSlide + 1, " / ", images.length]
-          })
-        }),
-        children: images.map((imageSrc, i) => (0, _jsxRuntime.jsx)("div", {
-          css: [_styles.styles.imageContainer(isZoomed), process.env.NODE_ENV === "production" ? "" : ";label:ImageViewer;"],
-          children: (0, _jsxRuntime.jsx)(_Image.default, {
-            src: imageSrc,
-            alt: `Bilde ${i + 1} av ${images.length}`,
-            objectFit: "contain",
-            onClick: () => setIsZoomed(!isZoomed)
-          })
-        }, i))
-      })]
-    })
-  });
+import { useTheme } from '@emotion/react';
+import { styles } from './styles';
+import Image from '../Image';
+import Carousel from 'nuka-carousel';
+import Text from '../Text';
+import IconChevronLeft from '../../icons/General/IconChevronLeft';
+import IconClose from '../../icons/General/IconClose';
+import { useEffect, useState } from 'react';
+import { Key } from '../../enums/Keyboard';
+import { VisuallyHidden } from 'react-aria';
+const ImageViewer = ({ images, initialImage = 0, onClose }) => {
+    const theme = useTheme();
+    const [isZoomed, setIsZoomed] = useState(false);
+    useEffect(() => {
+        // Trigger close event on "escape" keydown
+        const handleKeyDown = (event) => {
+            if (event.key === Key.escape)
+                onClose();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    const hasMultipleImages = Boolean(images.length > 1);
+    return (_jsx("div", { css: styles.overlay, children: _jsxs("div", { css: styles.carousel, role: "dialog", "aria-modal": true, "aria-labelledby": "carousel-heading", children: [_jsx(VisuallyHidden, { id: "carousel-heading", children: "Bildevisning" }), _jsx(Carousel, { enableKeyboardControls: true, swiping: hasMultipleImages, dragging: hasMultipleImages, wrapAround: true, slideIndex: initialImage, cellSpacing: 15, onUserNavigation: () => setIsZoomed(false), renderTopRightControls: () => (_jsx("button", { css: styles.closeBtn, onClick: onClose, "aria-label": "Lukk bildevisning", children: _jsx(IconClose, { color: "white" }) })), renderCenterRightControls: ({ nextSlide }) => hasMultipleImages && (_jsx("button", { css: styles.controlBtn('right'), onClick: nextSlide, "aria-label": "Naviger til neste bilde", children: _jsx(IconChevronLeft, { size: 18, color: theme.btnDefaultFontColor, flip: true }) })), renderCenterLeftControls: ({ previousSlide }) => hasMultipleImages && (_jsx("button", { css: styles.controlBtn('left'), onClick: previousSlide, "aria-label": "Naviger til forrige bilde", children: _jsx(IconChevronLeft, { size: 18, color: theme.btnDefaultFontColor }) })), renderBottomCenterControls: ({ currentSlide }) => (_jsx("div", { css: styles.pageInfo, children: _jsxs(Text, { color: theme.btnDefaultFontColor, size: "14px", "aria-label": `Bilde ${currentSlide + 1} av ${images.length}`, children: [currentSlide + 1, " / ", images.length] }) })), children: images.map((imageSrc, i) => (_jsx("div", { css: [styles.imageContainer(isZoomed)], children: _jsx(Image, { src: imageSrc, alt: `Bilde ${i + 1} av ${images.length}`, objectFit: "contain", onClick: () => setIsZoomed(!isZoomed) }) }, i))) })] }) }));
 };
-var _default = exports.default = ImageViewer;
+export default ImageViewer;

package/lib/core/ImageViewer/styles.d.ts

@@ -7,4 +7,3 @@ export declare const styles: {
     pageInfo: import("@emotion/react").SerializedStyles;
     closeBtn: (theme: Theme) => import("@emotion/react").SerializedStyles;
 };
-//# sourceMappingURL=styles.d.ts.map