@bbl-digital/snorre 4.0.22 → 4.0.23

package/lib/core/GoogleButton/GoogleButton.stories.js

@@ -1,12 +1,12 @@
 import GoogleButtonComponent from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/GoogleButton',
   component: GoogleButtonComponent
 };
+export default meta;
 export const GoogleButton = {
-  render: () => /*#__PURE__*/_jsx(GoogleButtonComponent, {
+  args: {
     onClick: () => console.log('clicking button')
-  }),
+  },
   name: 'Google button'
 };

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

@@ -1,36 +1,14 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Header1: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Header2: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Header3: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Header4: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Header5: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const HeaderCustomColor: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const HeaderPrimaryColor: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const HeaderSecondaryColor: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import Header from '.';
+declare const meta: Meta<typeof Header>;
+export default meta;
+declare type Story = StoryObj<typeof Header>;
+export declare const Header1: Story;
+export declare const Header2: Story;
+export declare const Header3: Story;
+export declare const Header4: Story;
+export declare const Header5: Story;
+export declare const HeaderSecondaryColor: Story;
+export declare const HeaderPrimaryColor: Story;
+export declare const HeaderCustomColor: Story;
 //# sourceMappingURL=Header.stories.d.ts.map

package/lib/core/Header/Header.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Header/Header.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,iBAAiB;;;CAO7B,CAAA;AAED,eAAO,MAAM,kBAAkB;;;CAO9B,CAAA;AAED,eAAO,MAAM,oBAAoB;;;CAOhC,CAAA"}
+{"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Header/Header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,MAAM,MAAM,GAAG,CAAA;AAEtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAG7B,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAA"}

package/lib/core/Header/Header.stories.js

@@ -1,65 +1,62 @@
 import Header from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Header',
   component: Header
 };
+export default meta;
 export const Header1 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 1,
-    children: "Header 1"
-  }),
-  name: 'Header 1'
+  args: {
+    children: 'Header',
+    level: 1
+  },
+  name: 'Header level 1'
 };
 export const Header2 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 2,
-    children: "Header 2"
-  }),
-  name: 'Header 2'
+  args: {
+    children: 'Header 2',
+    level: 2
+  },
+  name: 'Header level 2'
 };
 export const Header3 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    children: "Header 3"
-  }),
-  name: 'Header 3'
+  args: {
+    children: 'Header 3',
+    level: 3
+  },
+  name: 'Header level 3'
 };
 export const Header4 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 4,
-    children: "Header 4"
-  }),
-  name: 'Header 4'
+  args: {
+    children: 'Header 4',
+    level: 4
+  },
+  name: 'Header level 4'
 };
 export const Header5 = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 5,
-    children: "Header 5"
-  }),
-  name: 'Header 5'
+  args: {
+    children: 'Header 5',
+    level: 5
+  },
+  name: 'Header level 5'
 };
-export const HeaderCustomColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    color: "green",
-    children: "Header 3 custom color"
-  }),
+export const HeaderSecondaryColor = {
+  args: {
+    children: 'Header 3 custom color',
+    secondary: true
+  },
   name: 'Header custom color'
 };
 export const HeaderPrimaryColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    primary: true,
-    children: "Header 3 primary color"
-  }),
+  args: {
+    children: 'Header 3 primary color',
+    primary: true
+  },
   name: 'Header primary color'
 };
-export const HeaderSecondaryColor = {
-  render: () => /*#__PURE__*/_jsx(Header, {
-    level: 3,
-    secondary: true,
-    children: "Header 3 secondary color"
-  }),
-  name: 'Header secondary color'
+export const HeaderCustomColor = {
+  args: {
+    children: 'Header 3 custom color',
+    color: 'red'
+  },
+  name: 'Header custom color'
 };

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

@@ -1,12 +1,8 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Highlight: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const AllProps: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import HighlightText from '.';
+declare const meta: Meta<typeof HighlightText>;
+export default meta;
+declare type Story = StoryObj<typeof HighlightText>;
+export declare const Highlight: Story;
+export declare const AllProps: Story;
 //# sourceMappingURL=HighlightText.stories.d.ts.map

package/lib/core/HighlightText/HighlightText.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightText.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/HighlightText/HighlightText.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,SAAS;;;CASrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAWpB,CAAA"}
+{"version":3,"file":"HighlightText.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/HighlightText/HighlightText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,aAAa,MAAM,GAAG,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA"}

package/lib/core/HighlightText/HighlightText.stories.js

@@ -1,22 +1,22 @@
 import HighlightText from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/HighlightText',
   component: HighlightText
 };
+export default meta;
 export const Highlight = {
-  render: () => /*#__PURE__*/_jsx(HighlightText, {
-    text: "This is a text with a highlighted part",
-    highlight: "highlighted part"
-  }),
+  args: {
+    text: 'This is a text with a highlighted part',
+    highlight: 'highlighted part'
+  },
   name: 'Highlight'
 };
 export const AllProps = {
-  render: () => /*#__PURE__*/_jsx(HighlightText, {
-    text: "This is a text with a highlighted part",
-    highlight: "highlighted part",
-    size: "14px",
+  args: {
+    text: 'This is a text with a highlighted part',
+    highlight: 'highlighted part',
+    size: '14px',
     semibold: true
-  }),
+  },
   name: 'All props'
 };

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

@@ -22,6 +22,7 @@ interface IProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /** Set object-fit css property */
     objectFit?: 'fill' | 'contain' | 'cover' | 'non' | 'scale-down' | 'initial' | 'inherit';
     /** CSS override */
+    interactive?: boolean;
     css?: SerializedStyles;
 }
 declare const Image: React.FC<IProps>;

package/lib/core/Image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChE,GAAG,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqC3B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChE,GAAG,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;IACb,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsD3B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Image/index.js

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { convertBlobToObjectUrl } from '../../utils/image';
 import styles from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
@@ -16,16 +16,31 @@ const Image = ({
   radius,
   withPlaceholder,
   fallbackUrl,
+  interactive,
   ...restProps
 }) => {
   const [imageLoaded, setImageLoaded] = useState(false);
   const [imageSrc, setImageSrc] = useState(src || blob && convertBlobToObjectUrl(blob) || undefined);
+  const altText = 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 _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.height(height), width && styles.width(width), responsive && styles.responsive, objectFit && styles.objectFit(objectFit), withPlaceholder && !imageLoaded && styles.placeholder(theme), radius && styles.radius(radius), css && css],
+    tabIndex: interactive ? 0 : undefined,
+    role: interactive ? 'button' : undefined,
     ...restProps
   });
 };

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

@@ -1,18 +1,7 @@
-/// <reference types="react" />
-import type { ImageType } from 'react-images-uploading';
-declare const _default: {
-    title: string;
-    component: ({ value, onChange, multiple, maxNumber, acceptType, ...imageUploadingProps }: import("react-images-uploading").ImageUploadingPropsType & {
-        value?: ({
-            imageUrl: string;
-        } & ImageType)[] | undefined;
-        multiple?: boolean | undefined;
-        onChange: (value: import("react-images-uploading").ImageListType) => void;
-    }) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
-};
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import ImagePicker from '.';
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof ImagePicker>;
+export default meta;
+declare type Story = StoryObj<typeof ImagePicker>;
+export declare const Default: Story;
 //# sourceMappingURL=ImagePicker.stories.d.ts.map

package/lib/core/ImagePicker/ImagePicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/ImagePicker.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;;;;;;;;;;;AAMvD,wBAGC;AAED,eAAO,MAAM,OAAO;;;CAiBnB,CAAA"}
+{"version":3,"file":"ImagePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/ImagePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,GAAG,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA"}

package/lib/core/ImagePicker/ImagePicker.stories.js

@@ -4,10 +4,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const state = createState({
   images: []
 });
-export default {
+const meta = {
   title: 'Core/ImagePicker',
   component: ImagePicker
 };
+export default meta;
 export const Default = {
   render: () => /*#__PURE__*/_jsx("div", {
     style: {

package/lib/core/ImagePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAuB,EACrB,aAAa,EACb,SAAS,EACT,uBAAuB,EACxB,MAAM,wBAAwB,CAAA;AAU/B,aAAK,KAAK,GAAG,uBAAuB,GAAG;IACrC,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;IAC/C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,QAAA,MAAM,WAAW,iFAOd,KAAK,qDAkIP,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAuB,EACrB,aAAa,EACb,SAAS,EACT,uBAAuB,EACxB,MAAM,wBAAwB,CAAA;AAU/B,aAAK,KAAK,GAAG,uBAAuB,GAAG;IACrC,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;IAC/C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,QAAA,MAAM,WAAW,iFAOd,KAAK,qDAuIP,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/core/ImagePicker/index.js

@@ -78,6 +78,7 @@ const ImagePicker = ({
                 focusable: true,
                 css: styles.deleteButton,
                 onClick: () => onImageRemove(0),
+                "aria-label": "Fjern bilde",
                 children: _jsx(IconWithBackground, {
                   variant: "delete",
                   icon: _jsx(IconDelete, {})
@@ -95,6 +96,7 @@ const ImagePicker = ({
                 nostyle: true,
                 focusable: true,
                 css: styles.pinButton,
+                "aria-label": "Sett som hovedbilde",
                 onClick: () => setMainImage(index + 1),
                 children: _jsx(IconWithBackground, {
                   icon: _jsx(IconImage, {}),
@@ -104,6 +106,7 @@ const ImagePicker = ({
                 nostyle: true,
                 focusable: true,
                 css: styles.deleteButton,
+                "aria-label": "Fjern bilde",
                 onClick: () => onImageRemove(index + 1),
                 children: _jsx(IconWithBackground, {
                   variant: "delete",
@@ -117,6 +120,7 @@ const ImagePicker = ({
               ...dragProps
             })]
           }), errors?.acceptType && _jsx(Text, {
+            role: "alert",
             children: "Bilde formatet st\xF8ttes ikke"
           })]
         });

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImageViewer/index.tsx"],"names":[],"mappings":"AAWA,aAAK,KAAK,GAAG;IACX,kBAAkB;IAClB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,WAAW,sCAA2C,KAAK,qDA2EhE,CAAA;AACD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImageViewer/index.tsx"],"names":[],"mappings":"AAYA,aAAK,KAAK,GAAG;IACX,kBAAkB;IAClB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,WAAW,sCAA2C,KAAK,qDAiGhE,CAAA;AACD,eAAe,WAAW,CAAA"}

package/lib/core/ImageViewer/index.js

@@ -8,6 +8,7 @@ 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';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const ImageViewer = ({
@@ -30,10 +31,15 @@ const ImageViewer = ({
   const hasMultipleImages = Boolean(images.length > 1);
   return _jsx("div", {
     css: styles.overlay,
-    children: _jsx("div", {
+    children: _jsxs("div", {
       css: styles.carousel,
       role: "dialog",
-      children: _jsx(Carousel, {
+      "aria-modal": true,
+      "aria-labelledby": "carousel-heading",
+      children: [_jsx(VisuallyHidden, {
+        id: "carousel-heading",
+        children: "Bildevisning"
+      }), _jsx(Carousel, {
         enableKeyboardControls: true,
         swiping: hasMultipleImages,
         dragging: hasMultipleImages,
@@ -44,6 +50,7 @@ const ImageViewer = ({
         renderTopRightControls: () => _jsx("button", {
           css: styles.closeBtn,
           onClick: onClose,
+          "aria-label": "Lukk bildevisning",
           children: _jsx(IconClose, {
             color: "white"
           })
@@ -53,6 +60,7 @@ const ImageViewer = ({
         }) => hasMultipleImages && _jsx("button", {
           css: styles.controlBtn('right'),
           onClick: nextSlide,
+          "aria-label": "Naviger til neste bilde",
           children: _jsx(IconChevronLeft, {
             size: 18,
             color: theme.btnDefaultFontColor,
@@ -64,6 +72,7 @@ const ImageViewer = ({
         }) => hasMultipleImages && _jsx("button", {
           css: styles.controlBtn('left'),
           onClick: previousSlide,
+          "aria-label": "Naviger til forrige bilde",
           children: _jsx(IconChevronLeft, {
             size: 18,
             color: theme.btnDefaultFontColor
@@ -76,19 +85,20 @@ const ImageViewer = ({
           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), 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: _jsx(Image, {
             src: imageSrc,
-            alt: "bilde",
+            alt: `Bilde ${i + 1} av ${images.length}`,
             objectFit: "contain",
             onClick: () => setIsZoomed(!isZoomed)
           })
         }, i))
-      })
+      })]
     })
   });
 };

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

@@ -1,24 +1,11 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const Default: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Right: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Bottom: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Left: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const Width: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import InfoButton from '.';
+declare const meta: Meta<typeof InfoButton>;
+export default meta;
+declare type Story = StoryObj<typeof InfoButton>;
+export declare const Default: Story;
+export declare const Right: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Width: Story;
 //# sourceMappingURL=InfoButton.stories.d.ts.map

package/lib/core/InfoButton/InfoButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoButton.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/InfoButton.stories.tsx"],"names":[],"mappings":";;AAIA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAOnB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAQjB,CAAA;AAED,eAAO,MAAM,MAAM;;;CAOlB,CAAA;AAED,eAAO,MAAM,IAAI;;;CAOhB,CAAA;AAED,eAAO,MAAM,KAAK;;;CAOjB,CAAA"}
+{"version":3,"file":"InfoButton.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/InfoButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,UAAU,MAAM,GAAG,CAAA;AAG1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA"}

package/lib/core/InfoButton/InfoButton.stories.js

@@ -1,57 +1,58 @@
 import InfoButton from '.';
 import IconHelp from '../../icons/General/IconHelp';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/InfoButton',
   component: InfoButton
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(InfoButton, {
+  args: {
+    children: 'This will be the content',
     icon: /*#__PURE__*/_jsx(IconHelp, {
       primary: true
-    }),
-    children: "This will be the content"
-  }),
+    })
+  },
   name: 'Default'
 };
 export const Right = {
-  render: () => /*#__PURE__*/_jsx(InfoButton, {
+  args: {
+    children: 'This will be the content. This very long and unnecessary text shows how the tooltip will handle responsiveness',
     icon: /*#__PURE__*/_jsx(IconHelp, {
       primary: true
     }),
-    place: "right",
-    children: "This will be the content. This very long and unnecessary text shows how the tooltip will handle responsiveness"
-  }),
+    place: 'right'
+  },
   name: 'Right'
 };
 export const Bottom = {
-  render: () => /*#__PURE__*/_jsx(InfoButton, {
+  args: {
+    children: 'This will be the content',
     icon: /*#__PURE__*/_jsx(IconHelp, {
       primary: true
     }),
-    place: "bottom",
-    children: "This will be the content"
-  }),
+    place: 'bottom'
+  },
   name: 'Bottom'
 };
 export const Left = {
-  render: () => /*#__PURE__*/_jsx(InfoButton, {
+  args: {
+    children: 'This will be the content',
     icon: /*#__PURE__*/_jsx(IconHelp, {
       primary: true
     }),
-    place: "left",
-    children: "This will be the content"
-  }),
+    place: 'left'
+  },
   name: 'Left'
 };
 export const Width = {
-  render: () => /*#__PURE__*/_jsx(InfoButton, {
+  args: {
+    children: 'Custom width',
     icon: /*#__PURE__*/_jsx(IconHelp, {
       primary: true
     }),
-    place: "right",
-    width: "100px",
-    children: "Custom width"
-  }),
+    place: 'right',
+    width: '100px'
+  },
   name: 'Width'
 };

package/lib/core/InfoButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,UAAU,MAAM;IACd,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC3C,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqEhC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,UAAU,MAAM;IACd,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC3C,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwEhC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/lib/core/InfoButton/index.js

@@ -40,6 +40,7 @@ const InfoButton = ({
   }, [showTooltip, ref]);
   return _jsxs(Wrapper, {
     ref: ref,
+    className: className,
     children: [_jsx(StyledButton, {
       "aria-label": ariaLabel,
       trackingName: trackingName,
@@ -52,6 +53,9 @@ const InfoButton = ({
       timeout: 80,
       classNames: "tooltip",
       children: _jsx(Tooltip, {
+        role: "tooltip",
+        id: "info-tooltip",
+        "aria-hidden": !showTooltip,
         css: () => [styles.default, place === 'top' && styles.top, place === 'right' && styles.right, place === 'bottom' && styles.bottom, place === 'left' && styles.left, width && styles.width(width, place)],
         children: _jsx(Text, {
           children: children ? children : ''