@bbl-digital/snorre 4.0.22 → 4.0.23

package/dist/bundle.js

@@ -602,10 +602,10 @@
   }({});
 
   /** @jsxImportSource @emotion/react */
-  const Card = ({
+  const Card = /*#__PURE__*/React__default["default"].forwardRef(({
     className,
     ...props
-  }) => {
+  }, ref) => {
     const handleOnKeyPress = e => {
       if (e.key === Key.enter || e.key === Key.space) {
         if (props.onClick) {
@@ -614,6 +614,7 @@
       }
     };
     return jsxRuntime.jsx("div", {
+      ref: ref,
       css: theme => [styles$y.default(theme), props.shadow && styles$y.shadow(theme), props.withhover && styles$y.withHover(theme), props.primary && styles$y.primary(theme), props.gray && styles$y.gray, props.noPadding && styles$y.noPadding, props.height && styles$y.height(props.height), props.nobackground && styles$y.nobackground, props.largePadding && styles$y.largePadding, props.overflowvisible && styles$y.overflowvisible, props.css && props.css],
       tabIndex: props.onClick ? 0 : undefined,
       onClick: props.onClick,
@@ -622,7 +623,7 @@
       ...props,
       children: props.children
     });
-  };
+  });
 
   function _EMOTION_STRINGIFIED_CSS_ERROR__$1b() { 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 styles$x = {
@@ -1266,6 +1267,7 @@
     }, [showTooltip, ref]);
     return jsxRuntime.jsxs(Wrapper$E, {
       ref: ref,
+      className: className,
       children: [jsxRuntime.jsx(StyledButton, {
         "aria-label": ariaLabel,
         trackingName: trackingName,
@@ -1278,6 +1280,9 @@
         timeout: 80,
         classNames: "tooltip",
         children: jsxRuntime.jsx(Tooltip$1, {
+          role: "tooltip",
+          id: "info-tooltip",
+          "aria-hidden": !showTooltip,
           css: () => [styles$t.default, place === 'top' && styles$t.top, place === 'right' && styles$t.right, place === 'bottom' && styles$t.bottom, place === 'left' && styles$t.left, width && styles$t.width(width, place)],
           children: jsxRuntime.jsx(Text, {
             children: children ? children : ''
@@ -1351,12 +1356,14 @@
     return jsxRuntime.jsxs("div", {
       css: styles$u.relative,
       children: [jsxRuntime.jsxs("label", {
+        htmlFor: props.id,
         css: theme => [styles$u.default(theme), props.highlight && styles$u.highligted(height), type === 'search' && styles$u.searchLabel(theme), (props.invalid || props.invalidMessage) && styles$u.invalid(theme), height && styles$u.height(height)],
         className: className,
         children: [props.label && jsxRuntime.jsx("span", {
           css: info && styles$u.pr4,
           children: props.label
         }), jsxRuntime.jsx("input", {
+          id: props.id,
           type: type,
           ...(type !== 'password' && {
             value
@@ -1370,6 +1377,7 @@
           maxLength: maxlength,
           ref: ref,
           name: props.name,
+          "aria-describedby": props.invalidMessage ? 'input-error-message' : undefined,
           css: theme => [type === 'text' && styles$u.text(theme), type === 'search' && styles$u.search(theme), type === 'password' && styles$u.password(theme), type === 'number' && styles$u.number(theme), props.disabled && styles$u.disabled(theme), cardInput && styles$u.cardInput(theme)],
           children: React__default["default"].Children.map(props.children, child => {
             if (!child) {
@@ -1380,6 +1388,7 @@
         }), type === 'search' && jsxRuntime.jsx(IconSearch$1, {}), props.invalidMessage && jsxRuntime.jsx(IconErrorOutline$1, {
           size: "16px"
         }), props.invalidMessage && jsxRuntime.jsx("span", {
+          id: "input-error-message",
           css: theme => [styles$u.errorMessage(theme), !props?.label && styles$u.errorMessageNoLabel],
           children: props.invalidMessage
         })]
@@ -1436,16 +1445,31 @@
     radius,
     withPlaceholder,
     fallbackUrl,
+    interactive,
     ...restProps
   }) => {
     const [imageLoaded, setImageLoaded] = React.useState(false);
     const [imageSrc, setImageSrc] = React.useState(src || blob && convertBlobToObjectUrl(blob) || undefined);
+    const altText = React.useMemo(() => {
+      if (!imageLoaded && withPlaceholder) return 'Laster bilde...';
+      if (!imageSrc) return 'Bilde ikke tilgjengelig';
+      return alt;
+    }, [imageLoaded, imageSrc, alt]);
+    const handleLoad = () => {
+      setImageLoaded(true);
+    };
+    const handleError = () => {
+      setImageSrc(fallbackUrl);
+      setImageLoaded(false);
+    };
     return jsxRuntime.jsx("img", {
       src: imageSrc,
-      alt: alt,
-      onLoad: withPlaceholder ? () => setImageLoaded(true) : undefined,
-      onError: fallbackUrl ? () => setImageSrc(fallbackUrl) : undefined,
+      alt: altText,
+      onLoad: withPlaceholder ? () => handleLoad() : undefined,
+      onError: fallbackUrl ? () => handleError() : undefined,
       css: theme => [height && styles$r.height(height), width && styles$r.width(width), responsive && styles$r.responsive, objectFit && styles$r.objectFit(objectFit), withPlaceholder && !imageLoaded && styles$r.placeholder(theme), radius && styles$r.radius(radius), css && css],
+      tabIndex: interactive ? 0 : undefined,
+      role: interactive ? 'button' : undefined,
       ...restProps
     });
   };
@@ -2152,8 +2176,25 @@
   };
 
   /** @jsxImportSource @emotion/react */
-  const Checkbox = props => {
+  const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(({
+    ...props
+  }, ref) => {
     const [value, setValue] = React.useState(props.checked ? true : false);
+    const {
+      checked,
+      disabled,
+      className,
+      disabledHoverState,
+      nomargin,
+      child,
+      type,
+      name,
+      onChange,
+      onClick,
+      id,
+      children,
+      ...restProps
+    } = props;
     React.useEffect(() => {
       setValue(props.checked ? true : false);
     }, [props.checked]);
@@ -2164,20 +2205,26 @@
     };
     return jsxRuntime.jsxs("label", {
       "aria-label": props['aria-label'],
-      className: props.className,
-      css: theme => [styles$n.default(theme), props.disabled && styles$n.disabled(theme, props.disabledHoverState), props.nomargin && styles$n.nomargin, props.child && styles$n.child, props.type === 'subtle' && styles$n.subtle(theme)],
+      htmlFor: id,
+      className: className,
+      css: theme => [styles$n.default(theme), disabled && styles$n.disabled(theme, disabledHoverState), nomargin && styles$n.nomargin, child && styles$n.child, type === 'subtle' && styles$n.subtle(theme)],
       onClick: e => e.stopPropagation(),
       children: [jsxRuntime.jsx("input", {
+        ref: ref,
         type: "checkbox",
+        role: "checkbox",
+        "aria-checked": value,
         checked: value,
         value: props.value,
-        name: props.name,
-        disabled: props.disabled,
-        onClick: props.onClick,
-        onChange: handleChange
-      }), jsxRuntime.jsx("span", {}), props.children]
+        name: name,
+        id: id,
+        disabled: disabled,
+        onClick: onClick,
+        onChange: handleChange,
+        ...restProps
+      }), jsxRuntime.jsx("span", {}), children]
     });
-  };
+  });
 
   function _EMOTION_STRINGIFIED_CSS_ERROR__$X() { 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 styles$m = {
@@ -26932,6 +26979,7 @@
     rotateIcon,
     isControlledState,
     controlledFiles,
+    id = 'file-input',
     onChange
   }) => {
     const [uncontrolledFiles, setUncontrolledFiles] = React.useState(initialFiles);
@@ -26940,6 +26988,7 @@
     const files = isControlledState ? controlledFiles || [] : uncontrolledFiles;
     const hiddenFileInput = React.useRef(null);
     const handleClick = () => {
+      if (!hiddenFileInput.current) return;
       const node = hiddenFileInput.current;
       node.click();
     };
@@ -26986,6 +27035,7 @@
     };
     return /*#__PURE__*/jsxRuntime$1.jsxs(Wrapper$u, {
       children: [label && /*#__PURE__*/jsxRuntime$1.jsx(Label$5, {
+        id: id,
         children: label
       }), /*#__PURE__*/jsxRuntime$1.jsxs(FileWrapper, {
         children: [files.length > 0 && !hideFileList && /*#__PURE__*/jsxRuntime$1.jsx(DocumentList, {
@@ -27012,6 +27062,7 @@
             width: width,
             type: "button",
             nostyle: nostyle,
+            "aria-labelledby": "fileInputLabel",
             children: !nostyle ? /*#__PURE__*/jsxRuntime$1.jsxs(ButtonContent, {
               children: [text, /*#__PURE__*/jsxRuntime$1.jsx(Icon, {
                 rotated: rotateIcon ? 1 : 0,
@@ -27026,7 +27077,8 @@
             onChange: handleChange,
             multiple: multiple,
             accept: accept,
-            ref: hiddenFileInput
+            ref: hiddenFileInput,
+            "aria-hidden": "true"
           })]
         })]
       }), invalidMessage && /*#__PURE__*/jsxRuntime$1.jsx(ErrorMessage$5, {
@@ -27034,6 +27086,7 @@
       }), sizeError && /*#__PURE__*/jsxRuntime$1.jsxs(Alert, {
         danger: true,
         onClose: () => setSizeError(false),
+        "aria-live": "assertive",
         children: ["Fil kan ikke overstige ", formatBytes(fileMaxsixe)]
       })]
     });
@@ -29740,24 +29793,25 @@
   };
 
   /** @jsxImportSource @emotion/react */
-  const CollapseList = ({
+  const CollapseList = /*#__PURE__*/React__default["default"].forwardRef(({
     children,
     ...restProps
-  }) => {
+  }, ref) => {
     return jsxRuntime.jsx("div", {
+      ref: ref,
       css: theme => [styles$b.default(theme)],
       ...restProps,
       children: children
     });
-  };
+  });
 
   const headerTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Header'];
-  const CollapseListItem = ({
+  const CollapseListItem = /*#__PURE__*/React__default["default"].forwardRef(({
     header,
     content,
     initialOpen,
     ...restProps
-  }) => {
+  }, ref) => {
     const [open, setOpen] = React.useState(initialOpen ? true : false);
     const contentRef = React.useRef(null);
     const contentId = `content-${Math.random().toString(36).substring(2, 9)}`;
@@ -29782,6 +29836,7 @@
     };
 
     return /*#__PURE__*/jsxRuntime$1.jsxs("div", {
+      ref: ref,
       className: "item",
       ...restProps,
       role: restProps['role'] || 'listitem',
@@ -29811,7 +29866,7 @@
         children: content
       })]
     });
-  };
+  });
 
   const IconVisa = props => {
     return /*#__PURE__*/jsxRuntime$1.jsx("svg", {
@@ -30961,6 +31016,7 @@
     children
   }) => {
     const [open, setOpen] = React.useState(false);
+    const dropdownRef = React__default["default"].useRef(null);
     React.useEffect(() => {
       const handleClickOutside = e => {
         setTimeout(() => {
@@ -30976,9 +31032,22 @@
         document.removeEventListener('mousedown', handleClickOutside);
       };
     }, [open]);
+    React.useEffect(() => {
+      if (!dropdownRef?.current) return;
+      if (open) {
+        // Focus the first focusable element in the dropdown when it opens
+        const focusableElements = dropdownRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (focusableElements.length) {
+          const element = focusableElements[0];
+          element.focus();
+        }
+      }
+    }, [open]);
     return /*#__PURE__*/jsxRuntime$1.jsxs(Wrapper$6, {
       className: className,
       children: [/*#__PURE__*/jsxRuntime$1.jsx(Button, {
+        "aria-haspopup": true,
+        "aria-expanded": open,
         nostyle: true,
         focusable: true,
         onClick: () => setOpen(!open),
@@ -30986,6 +31055,8 @@
         trackingName: "Topbar",
         children: icon ? icon : ''
       }), open && /*#__PURE__*/jsxRuntime$1.jsx(Content, {
+        ref: dropdownRef,
+        role: "menu",
         children: children
       })]
     });
@@ -30998,12 +31069,14 @@
     children
   }) => {
     return jsxRuntime.jsxs(Link, {
+      role: "menuitem",
       trackingName: "Topbar",
       trackingEvent: 'DropdownMenu click: ' + (children ? children : ''),
       css: theme => [dropdownMenuOption(theme)],
       onClick: onClick,
       removeUnderline: true,
       small: true,
+      "aria-label": children ? `Option: ${children}${counter ? `, ${counter} notifications` : ''}` : '',
       children: [children ? children : '', counter ? ` (${counter})` : '']
     });
   };
@@ -33884,6 +33957,7 @@ to {top: 100vh;}
                   focusable: true,
                   css: styles$2.deleteButton,
                   onClick: () => onImageRemove(0),
+                  "aria-label": "Fjern bilde",
                   children: jsxRuntime.jsx(IconWithBackground, {
                     variant: "delete",
                     icon: jsxRuntime.jsx(IconDelete$1, {})
@@ -33901,6 +33975,7 @@ to {top: 100vh;}
                   nostyle: true,
                   focusable: true,
                   css: styles$2.pinButton,
+                  "aria-label": "Sett som hovedbilde",
                   onClick: () => setMainImage(index + 1),
                   children: jsxRuntime.jsx(IconWithBackground, {
                     icon: jsxRuntime.jsx(IconImage$1, {}),
@@ -33910,6 +33985,7 @@ to {top: 100vh;}
                   nostyle: true,
                   focusable: true,
                   css: styles$2.deleteButton,
+                  "aria-label": "Fjern bilde",
                   onClick: () => onImageRemove(index + 1),
                   children: jsxRuntime.jsx(IconWithBackground, {
                     variant: "delete",
@@ -33923,6 +33999,7 @@ to {top: 100vh;}
                 ...dragProps
               })]
             }), errors?.acceptType && jsxRuntime.jsx(Text, {
+              role: "alert",
               children: "Bilde formatet st\xF8ttes ikke"
             })]
           });
@@ -34035,10 +34112,15 @@ to {top: 100vh;}
     const hasMultipleImages = Boolean(images.length > 1);
     return jsxRuntime.jsx("div", {
       css: styles.overlay,
-      children: jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsxs("div", {
         css: styles.carousel,
         role: "dialog",
-        children: jsxRuntime.jsx(Carousel__default["default"], {
+        "aria-modal": true,
+        "aria-labelledby": "carousel-heading",
+        children: [jsxRuntime.jsx(reactAria.VisuallyHidden, {
+          id: "carousel-heading",
+          children: "Bildevisning"
+        }), jsxRuntime.jsx(Carousel__default["default"], {
           enableKeyboardControls: true,
           swiping: hasMultipleImages,
           dragging: hasMultipleImages,
@@ -34049,6 +34131,7 @@ to {top: 100vh;}
           renderTopRightControls: () => jsxRuntime.jsx("button", {
             css: styles.closeBtn,
             onClick: onClose,
+            "aria-label": "Lukk bildevisning",
             children: jsxRuntime.jsx(IconClose$1, {
               color: "white"
             })
@@ -34058,6 +34141,7 @@ to {top: 100vh;}
           }) => hasMultipleImages && jsxRuntime.jsx("button", {
             css: styles.controlBtn('right'),
             onClick: nextSlide,
+            "aria-label": "Naviger til neste bilde",
             children: jsxRuntime.jsx(IconChevronLeft$1, {
               size: 18,
               color: theme.btnDefaultFontColor,
@@ -34069,6 +34153,7 @@ to {top: 100vh;}
           }) => hasMultipleImages && jsxRuntime.jsx("button", {
             css: styles.controlBtn('left'),
             onClick: previousSlide,
+            "aria-label": "Naviger til forrige bilde",
             children: jsxRuntime.jsx(IconChevronLeft$1, {
               size: 18,
               color: theme.btnDefaultFontColor
@@ -34081,19 +34166,20 @@ to {top: 100vh;}
             children: jsxRuntime.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) => jsxRuntime.jsx("div", {
-            css: [styles.imageContainer(isZoomed), process.env.NODE_ENV === "production" ? "" : ";label:ImageViewer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRnlCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnXG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnXG5pbXBvcnQgQ2Fyb3VzZWwgZnJvbSAnbnVrYS1jYXJvdXNlbCdcbmltcG9ydCBUZXh0IGZyb20gJy4uL1RleHQnXG5pbXBvcnQgSWNvbkNoZXZyb25MZWZ0IGZyb20gJy4uLy4uL2ljb25zL0dlbmVyYWwvSWNvbkNoZXZyb25MZWZ0J1xuaW1wb3J0IEljb25DbG9zZSBmcm9tICcuLi8uLi9pY29ucy9HZW5lcmFsL0ljb25DbG9zZSdcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEtleSB9IGZyb20gJy4uLy4uL2VudW1zL0tleWJvYXJkJ1xuXG50eXBlIFByb3BzID0ge1xuICAvKiogSW1hZ2Ugc3JjJ3MgKi9cbiAgaW1hZ2VzOiBzdHJpbmdbXVxuICAvKiogSW1hZ2UgbGlzdCBpbmRleCB0byBkaXNwbGF5IGluaXRpYWxseSwgZGVmYXVsdHMgdG8gMCAqL1xuICBpbml0aWFsSW1hZ2U6IG51bWJlclxuICAvKiogT24gY2xvc2UgY2FsbGJhY2sgKi9cbiAgb25DbG9zZTogKCkgPT4gdm9pZFxufVxuXG5jb25zdCBJbWFnZVZpZXdlciA9ICh7IGltYWdlcywgaW5pdGlhbEltYWdlID0gMCwgb25DbG9zZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcbiAgY29uc3QgW2lzWm9vbWVkLCBzZXRJc1pvb21lZF0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIFRyaWdnZXIgY2xvc2UgZXZlbnQgb24gXCJlc2NhcGVcIiBrZXlkb3duXG4gICAgY29uc3QgaGFuZGxlS2V5RG93biA9IChldmVudDogS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gS2V5LmVzY2FwZSkgb25DbG9zZSgpXG4gICAgfVxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuICAgIH1cbiAgfSwgW10pXG5cbiAgY29uc3QgaGFzTXVsdGlwbGVJbWFnZXMgPSBCb29sZWFuKGltYWdlcy5sZW5ndGggPiAxKVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e3N0eWxlcy5vdmVybGF5fT5cbiAgICAgIDxkaXYgY3NzPXtzdHlsZXMuY2Fyb3VzZWx9IHJvbGU9XCJkaWFsb2dcIj5cbiAgICAgICAgPENhcm91c2VsXG4gICAgICAgICAgZW5hYmxlS2V5Ym9hcmRDb250cm9sc1xuICAgICAgICAgIHN3aXBpbmc9e2hhc011bHRpcGxlSW1hZ2VzfVxuICAgICAgICAgIGRyYWdnaW5nPXtoYXNNdWx0aXBsZUltYWdlc31cbiAgICAgICAgICB3cmFwQXJvdW5kXG4gICAgICAgICAgc2xpZGVJbmRleD17aW5pdGlhbEltYWdlfVxuICAgICAgICAgIGNlbGxTcGFjaW5nPXsxNX1cbiAgICAgICAgICBvblVzZXJOYXZpZ2F0aW9uPXsoKSA9PiBzZXRJc1pvb21lZChmYWxzZSl9XG4gICAgICAgICAgcmVuZGVyVG9wUmlnaHRDb250cm9scz17KCkgPT4gKFxuICAgICAgICAgICAgPGJ1dHRvbiBjc3M9e3N0eWxlcy5jbG9zZUJ0bn0gb25DbGljaz17b25DbG9zZX0+XG4gICAgICAgICAgICAgIDxJY29uQ2xvc2UgY29sb3I9XCJ3aGl0ZVwiIC8+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICAgIHJlbmRlckNlbnRlclJpZ2h0Q29udHJvbHM9eyh7IG5leHRTbGlkZSB9KSA9PlxuICAgICAgICAgICAgaGFzTXVsdGlwbGVJbWFnZXMgJiYgKFxuICAgICAgICAgICAgICA8YnV0dG9uIGNzcz17c3R5bGVzLmNvbnRyb2xCdG4oJ3JpZ2h0Jyl9IG9uQ2xpY2s9e25leHRTbGlkZX0+XG4gICAgICAgICAgICAgICAgey8qIFVzZXMgSWNvbkNoZXZyb25MZWZ0LCBiZWNhdXNlIEljb25DaGV2cm9uUmlnaHQgaXMgbm90IGNlbnRlcmVkIHByb3Blcmx5ICAqL31cbiAgICAgICAgICAgICAgICA8SWNvbkNoZXZyb25MZWZ0XG4gICAgICAgICAgICAgICAgICBzaXplPXsxOH1cbiAgICAgICAgICAgICAgICAgIGNvbG9yPXt0aGVtZS5idG5EZWZhdWx0Rm9udENvbG9yfVxuICAgICAgICAgICAgICAgICAgZmxpcFxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICAgICAgKVxuICAgICAgICAgIH1cbiAgICAgICAgICByZW5kZXJDZW50ZXJMZWZ0Q29udHJvbHM9eyh7IHByZXZpb3VzU2xpZGUgfSkgPT5cbiAgICAgICAgICAgIGhhc011bHRpcGxlSW1hZ2VzICYmIChcbiAgICAgICAgICAgICAgPGJ1dHRvbiBjc3M9e3N0eWxlcy5jb250cm9sQnRuKCdsZWZ0Jyl9IG9uQ2xpY2s9e3ByZXZpb3VzU2xpZGV9PlxuICAgICAgICAgICAgICAgIDxJY29uQ2hldnJvbkxlZnQgc2l6ZT17MTh9IGNvbG9yPXt0aGVtZS5idG5EZWZhdWx0Rm9udENvbG9yfSAvPlxuICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIClcbiAgICAgICAgICB9XG4gICAgICAgICAgcmVuZGVyQm90dG9tQ2VudGVyQ29udHJvbHM9eyh7IGN1cnJlbnRTbGlkZSB9KSA9PiAoXG4gICAgICAgICAgICA8ZGl2IGNzcz17c3R5bGVzLnBhZ2VJbmZvfT5cbiAgICAgICAgICAgICAgPFRleHQgY29sb3I9e3RoZW1lLmJ0bkRlZmF1bHRGb250Q29sb3J9IHNpemU9XCIxNHB4XCI+XG4gICAgICAgICAgICAgICAge2N1cnJlbnRTbGlkZSArIDF9IC8ge2ltYWdlcy5sZW5ndGh9XG4gICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICl9XG4gICAgICAgID5cbiAgICAgICAgICB7aW1hZ2VzLm1hcCgoaW1hZ2VTcmMsIGkpID0+IChcbiAgICAgICAgICAgIDxkaXYga2V5PXtpfSBjc3M9e1tzdHlsZXMuaW1hZ2VDb250YWluZXIoaXNab29tZWQpXX0+XG4gICAgICAgICAgICAgIDxJbWFnZVxuICAgICAgICAgICAgICAgIHNyYz17aW1hZ2VTcmN9XG4gICAgICAgICAgICAgICAgYWx0PVwiYmlsZGVcIlxuICAgICAgICAgICAgICAgIG9iamVjdEZpdD1cImNvbnRhaW5cIlxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHNldElzWm9vbWVkKCFpc1pvb21lZCl9XG4gICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9DYXJvdXNlbD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICApXG59XG5leHBvcnQgZGVmYXVsdCBJbWFnZVZpZXdlclxuIl19 */"],
+            css: [styles.imageContainer(isZoomed), process.env.NODE_ENV === "production" ? "" : ";label:ImageViewer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5R3lCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnXG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnXG5pbXBvcnQgQ2Fyb3VzZWwgZnJvbSAnbnVrYS1jYXJvdXNlbCdcbmltcG9ydCBUZXh0IGZyb20gJy4uL1RleHQnXG5pbXBvcnQgSWNvbkNoZXZyb25MZWZ0IGZyb20gJy4uLy4uL2ljb25zL0dlbmVyYWwvSWNvbkNoZXZyb25MZWZ0J1xuaW1wb3J0IEljb25DbG9zZSBmcm9tICcuLi8uLi9pY29ucy9HZW5lcmFsL0ljb25DbG9zZSdcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEtleSB9IGZyb20gJy4uLy4uL2VudW1zL0tleWJvYXJkJ1xuaW1wb3J0IHsgVmlzdWFsbHlIaWRkZW4gfSBmcm9tICdyZWFjdC1hcmlhJ1xuXG50eXBlIFByb3BzID0ge1xuICAvKiogSW1hZ2Ugc3JjJ3MgKi9cbiAgaW1hZ2VzOiBzdHJpbmdbXVxuICAvKiogSW1hZ2UgbGlzdCBpbmRleCB0byBkaXNwbGF5IGluaXRpYWxseSwgZGVmYXVsdHMgdG8gMCAqL1xuICBpbml0aWFsSW1hZ2U6IG51bWJlclxuICAvKiogT24gY2xvc2UgY2FsbGJhY2sgKi9cbiAgb25DbG9zZTogKCkgPT4gdm9pZFxufVxuXG5jb25zdCBJbWFnZVZpZXdlciA9ICh7IGltYWdlcywgaW5pdGlhbEltYWdlID0gMCwgb25DbG9zZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcbiAgY29uc3QgW2lzWm9vbWVkLCBzZXRJc1pvb21lZF0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIFRyaWdnZXIgY2xvc2UgZXZlbnQgb24gXCJlc2NhcGVcIiBrZXlkb3duXG4gICAgY29uc3QgaGFuZGxlS2V5RG93biA9IChldmVudDogS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gS2V5LmVzY2FwZSkgb25DbG9zZSgpXG4gICAgfVxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuICAgIH1cbiAgfSwgW10pXG5cbiAgY29uc3QgaGFzTXVsdGlwbGVJbWFnZXMgPSBCb29sZWFuKGltYWdlcy5sZW5ndGggPiAxKVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e3N0eWxlcy5vdmVybGF5fT5cbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtzdHlsZXMuY2Fyb3VzZWx9XG4gICAgICAgIHJvbGU9XCJkaWFsb2dcIlxuICAgICAgICBhcmlhLW1vZGFsPXt0cnVlfVxuICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJjYXJvdXNlbC1oZWFkaW5nXCJcbiAgICAgID5cbiAgICAgICAgPFZpc3VhbGx5SGlkZGVuIGlkPVwiY2Fyb3VzZWwtaGVhZGluZ1wiPkJpbGRldmlzbmluZzwvVmlzdWFsbHlIaWRkZW4+XG4gICAgICAgIDxDYXJvdXNlbFxuICAgICAgICAgIGVuYWJsZUtleWJvYXJkQ29udHJvbHNcbiAgICAgICAgICBzd2lwaW5nPXtoYXNNdWx0aXBsZUltYWdlc31cbiAgICAgICAgICBkcmFnZ2luZz17aGFzTXVsdGlwbGVJbWFnZXN9XG4gICAgICAgICAgd3JhcEFyb3VuZFxuICAgICAgICAgIHNsaWRlSW5kZXg9e2luaXRpYWxJbWFnZX1cbiAgICAgICAgICBjZWxsU3BhY2luZz17MTV9XG4gICAgICAgICAgb25Vc2VyTmF2aWdhdGlvbj17KCkgPT4gc2V0SXNab29tZWQoZmFsc2UpfVxuICAgICAgICAgIHJlbmRlclRvcFJpZ2h0Q29udHJvbHM9eygpID0+IChcbiAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgY3NzPXtzdHlsZXMuY2xvc2VCdG59XG4gICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ2xvc2V9XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJMdWtrIGJpbGRldmlzbmluZ1wiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxJY29uQ2xvc2UgY29sb3I9XCJ3aGl0ZVwiIC8+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICAgIHJlbmRlckNlbnRlclJpZ2h0Q29udHJvbHM9eyh7IG5leHRTbGlkZSB9KSA9PlxuICAgICAgICAgICAgaGFzTXVsdGlwbGVJbWFnZXMgJiYgKFxuICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgY3NzPXtzdHlsZXMuY29udHJvbEJ0bigncmlnaHQnKX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtuZXh0U2xpZGV9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIk5hdmlnZXIgdGlsIG5lc3RlIGJpbGRlXCJcbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHsvKiBVc2VzIEljb25DaGV2cm9uTGVmdCwgYmVjYXVzZSBJY29uQ2hldnJvblJpZ2h0IGlzIG5vdCBjZW50ZXJlZCBwcm9wZXJseSAgKi99XG4gICAgICAgICAgICAgICAgPEljb25DaGV2cm9uTGVmdFxuICAgICAgICAgICAgICAgICAgc2l6ZT17MTh9XG4gICAgICAgICAgICAgICAgICBjb2xvcj17dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn1cbiAgICAgICAgICAgICAgICAgIGZsaXBcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIClcbiAgICAgICAgICB9XG4gICAgICAgICAgcmVuZGVyQ2VudGVyTGVmdENvbnRyb2xzPXsoeyBwcmV2aW91c1NsaWRlIH0pID0+XG4gICAgICAgICAgICBoYXNNdWx0aXBsZUltYWdlcyAmJiAoXG4gICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICBjc3M9e3N0eWxlcy5jb250cm9sQnRuKCdsZWZ0Jyl9XG4gICAgICAgICAgICAgICAgb25DbGljaz17cHJldmlvdXNTbGlkZX1cbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPVwiTmF2aWdlciB0aWwgZm9ycmlnZSBiaWxkZVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8SWNvbkNoZXZyb25MZWZ0IHNpemU9ezE4fSBjb2xvcj17dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn0gLz5cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICApXG4gICAgICAgICAgfVxuICAgICAgICAgIHJlbmRlckJvdHRvbUNlbnRlckNvbnRyb2xzPXsoeyBjdXJyZW50U2xpZGUgfSkgPT4gKFxuICAgICAgICAgICAgPGRpdiBjc3M9e3N0eWxlcy5wYWdlSW5mb30+XG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgY29sb3I9e3RoZW1lLmJ0bkRlZmF1bHRGb250Q29sb3J9XG4gICAgICAgICAgICAgICAgc2l6ZT1cIjE0cHhcIlxuICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e2BCaWxkZSAke2N1cnJlbnRTbGlkZSArIDF9IGF2ICR7aW1hZ2VzLmxlbmd0aH1gfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge2N1cnJlbnRTbGlkZSArIDF9IC8ge2ltYWdlcy5sZW5ndGh9XG4gICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICl9XG4gICAgICAgID5cbiAgICAgICAgICB7aW1hZ2VzLm1hcCgoaW1hZ2VTcmMsIGkpID0+IChcbiAgICAgICAgICAgIDxkaXYga2V5PXtpfSBjc3M9e1tzdHlsZXMuaW1hZ2VDb250YWluZXIoaXNab29tZWQpXX0+XG4gICAgICAgICAgICAgIDxJbWFnZVxuICAgICAgICAgICAgICAgIHNyYz17aW1hZ2VTcmN9XG4gICAgICAgICAgICAgICAgYWx0PXtgQmlsZGUgJHtpICsgMX0gYXYgJHtpbWFnZXMubGVuZ3RofWB9XG4gICAgICAgICAgICAgICAgb2JqZWN0Rml0PVwiY29udGFpblwiXG4gICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0SXNab29tZWQoIWlzWm9vbWVkKX1cbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICkpfVxuICAgICAgICA8L0Nhcm91c2VsPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIClcbn1cbmV4cG9ydCBkZWZhdWx0IEltYWdlVmlld2VyXG4iXX0= */"],
             children: jsxRuntime.jsx(Image, {
               src: imageSrc,
-              alt: "bilde",
+              alt: `Bilde ${i + 1} av ${images.length}`,
               objectFit: "contain",
               onClick: () => setIsZoomed(!isZoomed)
             })
           }, i))
-        })
+        })]
       })
     });
   };

package/esm/core/Button/Button.stories.js

@@ -1,121 +1,123 @@
 import Button from '.';
 import IconCaretDown from '../../icons/General/IconCaretDown';
-import IconEdit from '../../icons/General/IconEdit';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Button',
   component: Button
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Button, {
-    children: "Standard button"
-  }),
+  args: {
+    children: 'Standard button'
+  },
   name: 'Default'
 };
 export const IconBefore = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     beforeIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
-    children: "Standard button"
-  }),
+    children: 'Standard button'
+  },
   name: 'Icon before'
 };
+
+// Rewrite all stories to use args instead of render
+
 export const IconAfter = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     afterIcon: /*#__PURE__*/_jsx(IconCaretDown, {}),
-    children: "Standard button"
-  }),
+    children: 'Standard button'
+  },
   name: 'Icon after'
 };
 export const Success = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     success: true,
-    children: "Success button"
-  }),
+    children: 'Success button'
+  },
   name: 'Success'
 };
 export const Danger = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     danger: true,
-    children: "Danger button"
-  }),
+    children: 'Danger button'
+  },
   name: 'Danger'
 };
 export const Loading = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     loading: true,
-    children: "Loading button"
-  }),
+    children: 'Loading button'
+  },
   name: 'Loading'
 };
 export const Disabled = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     disabled: true,
-    children: "Disabled button"
-  }),
+    children: 'Disabled button'
+  },
   name: 'Disabled'
 };
 export const Highlighted = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     highlight: true,
-    children: "Hightlighted button"
-  }),
+    children: 'Hightlighted button'
+  },
   name: 'Highlighted'
 };
 export const OutlineHighlighted = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     highlight: true,
     outline: true,
-    children: "Hightlighted outline button"
-  }),
+    children: 'Hightlighted outline button'
+  },
   name: 'Outline highlighted'
 };
 export const Back = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     back: true,
-    children: "Go back"
-  }),
+    children: 'Go back'
+  },
   name: 'Back'
 };
 export const Small = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     small: true,
-    children: "Small"
-  }),
+    children: 'Small button'
+  },
   name: 'Small'
 };
 export const DangerOutline = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     danger: true,
     outline: true,
-    children: "Danger outline"
-  }),
+    children: 'Danger outline'
+  },
   name: 'Danger outline'
 };
 export const TransparentBackground = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     outline: true,
     transparentBg: true,
-    children: "Danger outline"
-  }),
+    children: 'Danger outline'
+  },
   name: 'Transparent background'
 };
 export const NoStyle = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     nostyle: true,
-    focusable: true,
-    children: /*#__PURE__*/_jsx(IconEdit, {})
-  }),
+    children: 'No style'
+  },
   name: 'No style'
 };
 export const EventKeyPresses = {
-  render: () => /*#__PURE__*/_jsx(Button, {
+  args: {
     onEnterKeyPress: () => console.log('Enter pressed'),
     onEscapeKeyPress: () => console.log('Escape pressed'),
     onCustomKeyPress: {
       key: 'E',
       action: e => console.log('Key pressed', e.key)
     },
-    children: "Actionlistener button"
-  }),
+    children: 'Actionlistener button'
+  },
   name: 'Event key presses'
 };

package/esm/core/Card/index.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { styles } from './styles';
 import { Key } from '../../enums/Keyboard';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Card = ({
+const Card = /*#__PURE__*/React.forwardRef(({
   className,
   ...props
-}) => {
+}, ref) => {
   const handleOnKeyPress = e => {
     if (e.key === Key.enter || e.key === Key.space) {
       if (props.onClick) {
@@ -15,6 +15,7 @@ const Card = ({
     }
   };
   return _jsx("div", {
+    ref: ref,
     css: theme => [styles.default(theme), props.shadow && styles.shadow(theme), props.withhover && styles.withHover(theme), props.primary && styles.primary(theme), props.gray && styles.gray, props.noPadding && styles.noPadding, props.height && styles.height(props.height), props.nobackground && styles.nobackground, props.largePadding && styles.largePadding, props.overflowvisible && styles.overflowvisible, props.css && props.css],
     tabIndex: props.onClick ? 0 : undefined,
     onClick: props.onClick,
@@ -23,5 +24,5 @@ const Card = ({
     ...props,
     children: props.children
   });
-};
+});
 export default Card;