@bbl-digital/snorre 3.1.57 → 3.1.58

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

@@ -0,0 +1,24 @@
+import React from 'react';
+declare type CarouselMedia = {
+    /** Media source */
+    src: string;
+    /** Media type */
+    mimeType: string;
+};
+declare type Props = {
+    /** The media */
+    media: CarouselMedia[];
+    /** If the carousel should have a shadow */
+    withShadow?: boolean;
+    /** The height of the carousel */
+    height?: string;
+    /** Additional classnames of the carousel */
+    className?: string;
+    /** The border radius of the carousel */
+    radius?: string;
+    /** The object fit of the image */
+    objectFit?: 'fill' | 'contain' | 'cover' | 'non' | 'scale-down' | 'initial' | 'inherit';
+};
+declare const MediaCarousel: ({ media, objectFit, height, className, radius, withShadow, }: Props) => React.JSX.Element;
+export default MediaCarousel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/MediaCarousel/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,aAAK,aAAa,GAAG;IACnB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,aAAK,KAAK,GAAG;IACX,gBAAgB;IAChB,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;CACd,CAAA;AAED,QAAA,MAAM,aAAa,iEAOhB,KAAK,sBAiEP,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/core/{ImageCarousel → MediaCarousel}/index.js

@@ -1,30 +1,50 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
-import Carousel from 'nuka-carousel';
-import { BottomCarouselWrapper, CarouselWrapper, ControlButton, ImageWrapper } from './styles';
+import { ImageWrapper, CarouselWrapper, ControlButton, BottomCarouselWrapper } from './styles';
+import Video from '../Video';
 import Image from '../Image';
-import IconChevronLeft from '../../icons/General/IconChevronLeft';
+import Carousel from 'nuka-carousel';
+import React from 'react';
 import Text from '../Text';
+import IconChevronLeft from '../../icons/General/IconChevronLeft';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const ImageCarousel = ({
-  images,
+const MediaCarousel = ({
+  media,
   objectFit,
-  height = '340px',
-  className
+  height = '100%',
+  className,
+  radius,
+  withShadow
 }) => {
   const theme = useTheme();
-  const hasMultipleImages = Boolean(images.length);
+  const hasMultipleImages = Boolean(media?.length > 1);
+  const Media = ({
+    mediaItem
+  }) => {
+    const isVideo = mediaItem.mimeType.includes('video');
+    return /*#__PURE__*/_jsx(ImageWrapper, {
+      height: height,
+      children: isVideo ? /*#__PURE__*/_jsx(Video, {
+        src: mediaItem.src
+      }) : /*#__PURE__*/_jsx(Image, {
+        src: mediaItem.src,
+        alt: "produktbilde",
+        objectFit: objectFit
+      })
+    });
+  };
   return /*#__PURE__*/_jsx(CarouselWrapper, {
     height: height,
     theme: theme,
     className: className,
+    radius: radius,
+    withShadow: withShadow,
     children: /*#__PURE__*/_jsx(Carousel, {
       enableKeyboardControls: true,
-      swiping: true,
+      swiping: hasMultipleImages,
+      dragging: hasMultipleImages,
       wrapAround: true,
-      cellSpacing: 8,
+      cellSpacing: 10,
       renderCenterRightControls: ({
         nextSlide
       }) => hasMultipleImages && /*#__PURE__*/_jsx(ControlButton, {
@@ -52,19 +72,13 @@ const ImageCarousel = ({
         children: /*#__PURE__*/_jsxs(Text, {
           color: theme.btnDefaultFontColor,
           size: "14px",
-          children: [currentSlide + 1, " / ", images.length]
+          children: [currentSlide + 1, " / ", media.length]
         })
       }),
-      children: images.map((image, index) => /*#__PURE__*/_jsx(ImageWrapper, {
-        height: height,
-        children: /*#__PURE__*/_jsx(Image, {
-          src: image,
-          alt: "bilde",
-          objectFit: objectFit
-        })
+      children: media.map((mediaItem, index) => /*#__PURE__*/_jsx(Media, {
+        mediaItem: mediaItem
       }, index))
     })
   });
 };
-
-export default ImageCarousel;
+export default MediaCarousel;

package/lib/core/{ImageCarousel → MediaCarousel}/styles.d.ts

@@ -6,6 +6,8 @@ export declare const CarouselWrapper: import("@emotion/styled").StyledComponent<
 } & {
     height: string;
     theme: Theme;
+    radius?: string | undefined;
+    withShadow?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ControlButton: import("@emotion/styled").StyledComponent<{
     theme?: Theme | undefined;

package/lib/core/MediaCarousel/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/MediaCarousel/styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAK3C,eAAO,MAAM,eAAe;;;;YAOhB,MAAM;WACP,KAAK;;;yGAqBf,CAAA;AAED,eAAO,MAAM,aAAa;;;;eACK,MAAM,GAAG,OAAO;qHAc9C,CAAA;AAED,eAAO,MAAM,qBAAqB;;;yGAMjC,CAAA;AAED,eAAO,MAAM,YAAY;;;;YACA,MAAM;yGAU9B,CAAA"}

package/lib/core/MediaCarousel/styles.js

@@ -0,0 +1,55 @@
+import _styled from "@emotion/styled/base";
+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)."; }
+import { css } from '@emotion/react';
+const background = 'rgba(0, 0, 0, 0.5)';
+export const CarouselWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1ukuf8x3"
+} : {
+  target: "e1ukuf8x3",
+  label: "CarouselWrapper"
+})(({
+  height,
+  theme,
+  radius,
+  withShadow
+}) => /*#__PURE__*/css(withShadow && /*#__PURE__*/css("box-shadow:", theme.shadowSmall, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CarouselWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9NZWRpYUNhcm91c2VsL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBiYWNrZ3JvdW5kID0gJ3JnYmEoMCwgMCwgMCwgMC41KSdcblxuZXhwb3J0IGNvbnN0IENhcm91c2VsV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7XG4gICAgaGVpZ2h0LFxuICAgIHRoZW1lLFxuICAgIHJhZGl1cyxcbiAgICB3aXRoU2hhZG93LFxuICB9OiB7XG4gICAgaGVpZ2h0OiBzdHJpbmdcbiAgICB0aGVtZTogVGhlbWVcbiAgICByYWRpdXM/OiBzdHJpbmdcbiAgICB3aXRoU2hhZG93PzogYm9vbGVhblxuICB9KSA9PiBjc3NgXG4gICAgJHt3aXRoU2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgYm94LXNoYWRvdzogJHt0aGVtZS5zaGFkb3dTbWFsbH07XG4gICAgYH1cblxuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtyYWRpdXMgPyByYWRpdXMgOiAnNHB4J307XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIC5zbGlkZXItY29udGFpbmVyIHtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xCdXR0b24gPSBzdHlsZWQuYnV0dG9uKFxuICAoeyBkaXJlY3Rpb24gfTogeyBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZH07XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBwYWRkaW5nOiAwLjc1ZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICR7ZGlyZWN0aW9uID09PSAnbGVmdCdcbiAgICAgID8gY3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAzcHg7XG4gICAgICAgIGBcbiAgICAgIDogY3NzYFxuICAgICAgICAgIG1hcmdpbi1yaWdodDogM3B4O1xuICAgICAgICBgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBCb3R0b21DYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogMC4yNWVtIDFlbTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuYFxuXG5leHBvcnQgY29uc3QgSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHsgaGVpZ2h0IH06IHsgaGVpZ2h0OiBzdHJpbmcgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgJiBpbWcge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBzY2FsZTogMS4wMTU7XG4gICAgfVxuICBgXG4pXG4iXX0= */"), " width:100%;height:100%;max-height:", height, ";display:flex;align-items:baseline;border-radius:", radius ? radius : '4px', ";overflow:hidden;.slider-container{max-width:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:CarouselWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCVyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9NZWRpYUNhcm91c2VsL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBiYWNrZ3JvdW5kID0gJ3JnYmEoMCwgMCwgMCwgMC41KSdcblxuZXhwb3J0IGNvbnN0IENhcm91c2VsV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7XG4gICAgaGVpZ2h0LFxuICAgIHRoZW1lLFxuICAgIHJhZGl1cyxcbiAgICB3aXRoU2hhZG93LFxuICB9OiB7XG4gICAgaGVpZ2h0OiBzdHJpbmdcbiAgICB0aGVtZTogVGhlbWVcbiAgICByYWRpdXM/OiBzdHJpbmdcbiAgICB3aXRoU2hhZG93PzogYm9vbGVhblxuICB9KSA9PiBjc3NgXG4gICAgJHt3aXRoU2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgYm94LXNoYWRvdzogJHt0aGVtZS5zaGFkb3dTbWFsbH07XG4gICAgYH1cblxuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtyYWRpdXMgPyByYWRpdXMgOiAnNHB4J307XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIC5zbGlkZXItY29udGFpbmVyIHtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xCdXR0b24gPSBzdHlsZWQuYnV0dG9uKFxuICAoeyBkaXJlY3Rpb24gfTogeyBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZH07XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBwYWRkaW5nOiAwLjc1ZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICR7ZGlyZWN0aW9uID09PSAnbGVmdCdcbiAgICAgID8gY3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAzcHg7XG4gICAgICAgIGBcbiAgICAgIDogY3NzYFxuICAgICAgICAgIG1hcmdpbi1yaWdodDogM3B4O1xuICAgICAgICBgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBCb3R0b21DYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogMC4yNWVtIDFlbTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuYFxuXG5leHBvcnQgY29uc3QgSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHsgaGVpZ2h0IH06IHsgaGVpZ2h0OiBzdHJpbmcgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgJiBpbWcge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBzY2FsZTogMS4wMTU7XG4gICAgfVxuICBgXG4pXG4iXX0= */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUsrQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9NZWRpYUNhcm91c2VsL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBiYWNrZ3JvdW5kID0gJ3JnYmEoMCwgMCwgMCwgMC41KSdcblxuZXhwb3J0IGNvbnN0IENhcm91c2VsV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7XG4gICAgaGVpZ2h0LFxuICAgIHRoZW1lLFxuICAgIHJhZGl1cyxcbiAgICB3aXRoU2hhZG93LFxuICB9OiB7XG4gICAgaGVpZ2h0OiBzdHJpbmdcbiAgICB0aGVtZTogVGhlbWVcbiAgICByYWRpdXM/OiBzdHJpbmdcbiAgICB3aXRoU2hhZG93PzogYm9vbGVhblxuICB9KSA9PiBjc3NgXG4gICAgJHt3aXRoU2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgYm94LXNoYWRvdzogJHt0aGVtZS5zaGFkb3dTbWFsbH07XG4gICAgYH1cblxuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtyYWRpdXMgPyByYWRpdXMgOiAnNHB4J307XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIC5zbGlkZXItY29udGFpbmVyIHtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xCdXR0b24gPSBzdHlsZWQuYnV0dG9uKFxuICAoeyBkaXJlY3Rpb24gfTogeyBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZH07XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBwYWRkaW5nOiAwLjc1ZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICR7ZGlyZWN0aW9uID09PSAnbGVmdCdcbiAgICAgID8gY3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAzcHg7XG4gICAgICAgIGBcbiAgICAgIDogY3NzYFxuICAgICAgICAgIG1hcmdpbi1yaWdodDogM3B4O1xuICAgICAgICBgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBCb3R0b21DYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogMC4yNWVtIDFlbTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuYFxuXG5leHBvcnQgY29uc3QgSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHsgaGVpZ2h0IH06IHsgaGVpZ2h0OiBzdHJpbmcgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgJiBpbWcge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBzY2FsZTogMS4wMTU7XG4gICAgfVxuICBgXG4pXG4iXX0= */");
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1pt2o8x",
+  styles: "margin-right:3px"
+} : {
+  name: "9g5zwe-ControlButton",
+  styles: "margin-right:3px;label:ControlButton;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStDVyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9NZWRpYUNhcm91c2VsL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBiYWNrZ3JvdW5kID0gJ3JnYmEoMCwgMCwgMCwgMC41KSdcblxuZXhwb3J0IGNvbnN0IENhcm91c2VsV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7XG4gICAgaGVpZ2h0LFxuICAgIHRoZW1lLFxuICAgIHJhZGl1cyxcbiAgICB3aXRoU2hhZG93LFxuICB9OiB7XG4gICAgaGVpZ2h0OiBzdHJpbmdcbiAgICB0aGVtZTogVGhlbWVcbiAgICByYWRpdXM/OiBzdHJpbmdcbiAgICB3aXRoU2hhZG93PzogYm9vbGVhblxuICB9KSA9PiBjc3NgXG4gICAgJHt3aXRoU2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgYm94LXNoYWRvdzogJHt0aGVtZS5zaGFkb3dTbWFsbH07XG4gICAgYH1cblxuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtyYWRpdXMgPyByYWRpdXMgOiAnNHB4J307XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIC5zbGlkZXItY29udGFpbmVyIHtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xCdXR0b24gPSBzdHlsZWQuYnV0dG9uKFxuICAoeyBkaXJlY3Rpb24gfTogeyBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZH07XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBwYWRkaW5nOiAwLjc1ZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICR7ZGlyZWN0aW9uID09PSAnbGVmdCdcbiAgICAgID8gY3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAzcHg7XG4gICAgICAgIGBcbiAgICAgIDogY3NzYFxuICAgICAgICAgIG1hcmdpbi1yaWdodDogM3B4O1xuICAgICAgICBgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBCb3R0b21DYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogMC4yNWVtIDFlbTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuYFxuXG5leHBvcnQgY29uc3QgSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHsgaGVpZ2h0IH06IHsgaGVpZ2h0OiBzdHJpbmcgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgJiBpbWcge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBzY2FsZTogMS4wMTU7XG4gICAgfVxuICBgXG4pXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1i7v2bx",
+  styles: "margin-left:3px"
+} : {
+  name: "1arqgkz-ControlButton",
+  styles: "margin-left:3px;label:ControlButton;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDVyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9NZWRpYUNhcm91c2VsL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBiYWNrZ3JvdW5kID0gJ3JnYmEoMCwgMCwgMCwgMC41KSdcblxuZXhwb3J0IGNvbnN0IENhcm91c2VsV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7XG4gICAgaGVpZ2h0LFxuICAgIHRoZW1lLFxuICAgIHJhZGl1cyxcbiAgICB3aXRoU2hhZG93LFxuICB9OiB7XG4gICAgaGVpZ2h0OiBzdHJpbmdcbiAgICB0aGVtZTogVGhlbWVcbiAgICByYWRpdXM/OiBzdHJpbmdcbiAgICB3aXRoU2hhZG93PzogYm9vbGVhblxuICB9KSA9PiBjc3NgXG4gICAgJHt3aXRoU2hhZG93ICYmXG4gICAgY3NzYFxuICAgICAgYm94LXNoYWRvdzogJHt0aGVtZS5zaGFkb3dTbWFsbH07XG4gICAgYH1cblxuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogYmFzZWxpbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtyYWRpdXMgPyByYWRpdXMgOiAnNHB4J307XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcblxuICAgIC5zbGlkZXItY29udGFpbmVyIHtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB9XG4gIGBcbilcblxuZXhwb3J0IGNvbnN0IENvbnRyb2xCdXR0b24gPSBzdHlsZWQuYnV0dG9uKFxuICAoeyBkaXJlY3Rpb24gfTogeyBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCcgfSkgPT4gY3NzYFxuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YmFja2dyb3VuZH07XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICBwYWRkaW5nOiAwLjc1ZW07XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICR7ZGlyZWN0aW9uID09PSAnbGVmdCdcbiAgICAgID8gY3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAzcHg7XG4gICAgICAgIGBcbiAgICAgIDogY3NzYFxuICAgICAgICAgIG1hcmdpbi1yaWdodDogM3B4O1xuICAgICAgICBgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBCb3R0b21DYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcGFkZGluZzogMC4yNWVtIDFlbTtcbiAgYm9yZGVyLXJhZGl1czogNXB4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuYFxuXG5leHBvcnQgY29uc3QgSW1hZ2VXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHsgaGVpZ2h0IH06IHsgaGVpZ2h0OiBzdHJpbmcgfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgaGVpZ2h0OiAxMDAlO1xuXG4gICAgJiBpbWcge1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH07XG4gICAgICBzY2FsZTogMS4wMTU7XG4gICAgfVxuICBgXG4pXG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export const ControlButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
+  target: "e1ukuf8x2"
+} : {
+  target: "e1ukuf8x2",
+  label: "ControlButton"
+})(({
+  direction
+}) => /*#__PURE__*/css("background-color:", background, ";border:none;border-radius:50%;padding:0.75em;cursor:pointer;", direction === 'left' ? _ref2 : _ref, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ControlButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDeUQiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTWVkaWFDYXJvdXNlbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgYmFja2dyb3VuZCA9ICdyZ2JhKDAsIDAsIDAsIDAuNSknXG5cbmV4cG9ydCBjb25zdCBDYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAoe1xuICAgIGhlaWdodCxcbiAgICB0aGVtZSxcbiAgICByYWRpdXMsXG4gICAgd2l0aFNoYWRvdyxcbiAgfToge1xuICAgIGhlaWdodDogc3RyaW5nXG4gICAgdGhlbWU6IFRoZW1lXG4gICAgcmFkaXVzPzogc3RyaW5nXG4gICAgd2l0aFNoYWRvdz86IGJvb2xlYW5cbiAgfSkgPT4gY3NzYFxuICAgICR7d2l0aFNoYWRvdyAmJlxuICAgIGNzc2BcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuICAgIGB9XG5cbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cmFkaXVzID8gcmFkaXVzIDogJzRweCd9O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAuc2xpZGVyLWNvbnRhaW5lciB7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBDb250cm9sQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgKHsgZGlyZWN0aW9uIH06IHsgZGlyZWN0aW9uOiAnbGVmdCcgfCAncmlnaHQnIH0pID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgcGFkZGluZzogMC43NWVtO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAke2RpcmVjdGlvbiA9PT0gJ2xlZnQnXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogM3B4O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDNweDtcbiAgICAgICAgYH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgQm90dG9tQ2Fyb3VzZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDAuMjVlbSAxZW07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfTtcbmBcblxuZXhwb3J0IGNvbnN0IEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IGhlaWdodCB9OiB7IGhlaWdodDogc3RyaW5nIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogMTAwJTtcblxuICAgICYgaW1nIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgc2NhbGU6IDEuMDE1O1xuICAgIH1cbiAgYFxuKVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DNkIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTWVkaWFDYXJvdXNlbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgYmFja2dyb3VuZCA9ICdyZ2JhKDAsIDAsIDAsIDAuNSknXG5cbmV4cG9ydCBjb25zdCBDYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAoe1xuICAgIGhlaWdodCxcbiAgICB0aGVtZSxcbiAgICByYWRpdXMsXG4gICAgd2l0aFNoYWRvdyxcbiAgfToge1xuICAgIGhlaWdodDogc3RyaW5nXG4gICAgdGhlbWU6IFRoZW1lXG4gICAgcmFkaXVzPzogc3RyaW5nXG4gICAgd2l0aFNoYWRvdz86IGJvb2xlYW5cbiAgfSkgPT4gY3NzYFxuICAgICR7d2l0aFNoYWRvdyAmJlxuICAgIGNzc2BcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuICAgIGB9XG5cbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cmFkaXVzID8gcmFkaXVzIDogJzRweCd9O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAuc2xpZGVyLWNvbnRhaW5lciB7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBDb250cm9sQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgKHsgZGlyZWN0aW9uIH06IHsgZGlyZWN0aW9uOiAnbGVmdCcgfCAncmlnaHQnIH0pID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgcGFkZGluZzogMC43NWVtO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAke2RpcmVjdGlvbiA9PT0gJ2xlZnQnXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogM3B4O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDNweDtcbiAgICAgICAgYH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgQm90dG9tQ2Fyb3VzZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDAuMjVlbSAxZW07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfTtcbmBcblxuZXhwb3J0IGNvbnN0IEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IGhlaWdodCB9OiB7IGhlaWdodDogc3RyaW5nIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogMTAwJTtcblxuICAgICYgaW1nIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgc2NhbGU6IDEuMDE1O1xuICAgIH1cbiAgYFxuKVxuIl19 */");
+export const BottomCarouselWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1ukuf8x1"
+} : {
+  target: "e1ukuf8x1",
+  label: "BottomCarouselWrapper"
+})("display:flex;justify-content:center;padding:0.25em 1em;border-radius:5px;background-color:", background, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFEK0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTWVkaWFDYXJvdXNlbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgYmFja2dyb3VuZCA9ICdyZ2JhKDAsIDAsIDAsIDAuNSknXG5cbmV4cG9ydCBjb25zdCBDYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAoe1xuICAgIGhlaWdodCxcbiAgICB0aGVtZSxcbiAgICByYWRpdXMsXG4gICAgd2l0aFNoYWRvdyxcbiAgfToge1xuICAgIGhlaWdodDogc3RyaW5nXG4gICAgdGhlbWU6IFRoZW1lXG4gICAgcmFkaXVzPzogc3RyaW5nXG4gICAgd2l0aFNoYWRvdz86IGJvb2xlYW5cbiAgfSkgPT4gY3NzYFxuICAgICR7d2l0aFNoYWRvdyAmJlxuICAgIGNzc2BcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuICAgIGB9XG5cbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cmFkaXVzID8gcmFkaXVzIDogJzRweCd9O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAuc2xpZGVyLWNvbnRhaW5lciB7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBDb250cm9sQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgKHsgZGlyZWN0aW9uIH06IHsgZGlyZWN0aW9uOiAnbGVmdCcgfCAncmlnaHQnIH0pID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgcGFkZGluZzogMC43NWVtO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAke2RpcmVjdGlvbiA9PT0gJ2xlZnQnXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogM3B4O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDNweDtcbiAgICAgICAgYH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgQm90dG9tQ2Fyb3VzZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDAuMjVlbSAxZW07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfTtcbmBcblxuZXhwb3J0IGNvbnN0IEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IGhlaWdodCB9OiB7IGhlaWdodDogc3RyaW5nIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogMTAwJTtcblxuICAgICYgaW1nIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgc2NhbGU6IDEuMDE1O1xuICAgIH1cbiAgYFxuKVxuIl19 */"));
+export const ImageWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1ukuf8x0"
+} : {
+  target: "e1ukuf8x0",
+  label: "ImageWrapper"
+})(({
+  height
+}) => /*#__PURE__*/css("display:flex;height:100%;& img{width:100%;max-height:", height, ";scale:1.015;}" + (process.env.NODE_ENV === "production" ? "" : ";label:ImageWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEeUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTWVkaWFDYXJvdXNlbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgYmFja2dyb3VuZCA9ICdyZ2JhKDAsIDAsIDAsIDAuNSknXG5cbmV4cG9ydCBjb25zdCBDYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAoe1xuICAgIGhlaWdodCxcbiAgICB0aGVtZSxcbiAgICByYWRpdXMsXG4gICAgd2l0aFNoYWRvdyxcbiAgfToge1xuICAgIGhlaWdodDogc3RyaW5nXG4gICAgdGhlbWU6IFRoZW1lXG4gICAgcmFkaXVzPzogc3RyaW5nXG4gICAgd2l0aFNoYWRvdz86IGJvb2xlYW5cbiAgfSkgPT4gY3NzYFxuICAgICR7d2l0aFNoYWRvdyAmJlxuICAgIGNzc2BcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuICAgIGB9XG5cbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cmFkaXVzID8gcmFkaXVzIDogJzRweCd9O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAuc2xpZGVyLWNvbnRhaW5lciB7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBDb250cm9sQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgKHsgZGlyZWN0aW9uIH06IHsgZGlyZWN0aW9uOiAnbGVmdCcgfCAncmlnaHQnIH0pID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgcGFkZGluZzogMC43NWVtO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAke2RpcmVjdGlvbiA9PT0gJ2xlZnQnXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogM3B4O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDNweDtcbiAgICAgICAgYH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgQm90dG9tQ2Fyb3VzZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDAuMjVlbSAxZW07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfTtcbmBcblxuZXhwb3J0IGNvbnN0IEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IGhlaWdodCB9OiB7IGhlaWdodDogc3RyaW5nIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogMTAwJTtcblxuICAgICYgaW1nIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgc2NhbGU6IDEuMDE1O1xuICAgIH1cbiAgYFxuKVxuIl19 */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01lZGlhQ2Fyb3VzZWwvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZENEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvTWVkaWFDYXJvdXNlbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3QgYmFja2dyb3VuZCA9ICdyZ2JhKDAsIDAsIDAsIDAuNSknXG5cbmV4cG9ydCBjb25zdCBDYXJvdXNlbFdyYXBwZXIgPSBzdHlsZWQuZGl2KFxuICAoe1xuICAgIGhlaWdodCxcbiAgICB0aGVtZSxcbiAgICByYWRpdXMsXG4gICAgd2l0aFNoYWRvdyxcbiAgfToge1xuICAgIGhlaWdodDogc3RyaW5nXG4gICAgdGhlbWU6IFRoZW1lXG4gICAgcmFkaXVzPzogc3RyaW5nXG4gICAgd2l0aFNoYWRvdz86IGJvb2xlYW5cbiAgfSkgPT4gY3NzYFxuICAgICR7d2l0aFNoYWRvdyAmJlxuICAgIGNzc2BcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuICAgIGB9XG5cbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGJhc2VsaW5lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7cmFkaXVzID8gcmFkaXVzIDogJzRweCd9O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAuc2xpZGVyLWNvbnRhaW5lciB7XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgfVxuICBgXG4pXG5cbmV4cG9ydCBjb25zdCBDb250cm9sQnV0dG9uID0gc3R5bGVkLmJ1dHRvbihcbiAgKHsgZGlyZWN0aW9uIH06IHsgZGlyZWN0aW9uOiAnbGVmdCcgfCAncmlnaHQnIH0pID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2JhY2tncm91bmR9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgcGFkZGluZzogMC43NWVtO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAke2RpcmVjdGlvbiA9PT0gJ2xlZnQnXG4gICAgICA/IGNzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogM3B4O1xuICAgICAgICBgXG4gICAgICA6IGNzc2BcbiAgICAgICAgICBtYXJnaW4tcmlnaHQ6IDNweDtcbiAgICAgICAgYH1cbiAgYFxuKVxuXG5leHBvcnQgY29uc3QgQm90dG9tQ2Fyb3VzZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBhZGRpbmc6IDAuMjVlbSAxZW07XG4gIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfTtcbmBcblxuZXhwb3J0IGNvbnN0IEltYWdlV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IGhlaWdodCB9OiB7IGhlaWdodDogc3RyaW5nIH0pID0+IGNzc2BcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGhlaWdodDogMTAwJTtcblxuICAgICYgaW1nIHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LWhlaWdodDogJHtoZWlnaHR9O1xuICAgICAgc2NhbGU6IDEuMDE1O1xuICAgIH1cbiAgYFxuKVxuIl19 */");

package/lib/core/Modal/ActionButtons/index.d.ts

@@ -5,6 +5,6 @@ declare type Props = {
     spaceBetween?: boolean;
     className?: string;
 };
-declare const ActionButtons: ({ children, className, spaceBetween }: Props) => JSX.Element;
+declare const ActionButtons: ({ children, className, spaceBetween }: Props) => React.JSX.Element;
 export default ActionButtons;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Modal/ActionButtons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Modal/ActionButtons/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,aAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAWD,QAAA,MAAM,aAAa,0CAAkD,KAAK,gBAIzE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/core/Modal/ActionButtons/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,aAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAWD,QAAA,MAAM,aAAa,0CAAkD,KAAK,sBAIzE,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/core/Modal/ActionButtons/index.js

@@ -2,8 +2,7 @@ import _styled from "@emotion/styled/base";
 import { css } from '@emotion/react';
 import React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-
-const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e11d84160"
 } : {
   target: "e11d84160",
@@ -11,7 +10,6 @@ const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
 })(({
   spaceBetween
 }) => /*#__PURE__*/css("display:flex;gap:1em;width:100%;justify-content:", spaceBetween ? 'space-between' : 'flex-end', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01vZGFsL0FjdGlvbkJ1dHRvbnMvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVl1RCIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Nb2RhbC9BY3Rpb25CdXR0b25zL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5cbnR5cGUgUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGUgfCBSZWFjdC5SZWFjdE5vZGVbXVxuICAvKiogQWRkcyBcImp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlblwiIEBkZWZhdWx0IHRydWUgKi9cbiAgc3BhY2VCZXR3ZWVuPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbn1cblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IHNwYWNlQmV0d2VlbiB9OiB7IHNwYWNlQmV0d2Vlbj86IGJvb2xlYW4gfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiAxZW07XG4gICAgd2lkdGg6IDEwMCU7XG4gICAganVzdGlmeS1jb250ZW50OiAke3NwYWNlQmV0d2VlbiA/ICdzcGFjZS1iZXR3ZWVuJyA6ICdmbGV4LWVuZCd9O1xuICBgXG4pXG5cbmNvbnN0IEFjdGlvbkJ1dHRvbnMgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzcGFjZUJldHdlZW4gPSB0cnVlIH06IFByb3BzKSA9PiAoXG4gIDxXcmFwcGVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfSBzcGFjZUJldHdlZW49e3NwYWNlQmV0d2Vlbn0+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pXG5cbmV4cG9ydCBkZWZhdWx0IEFjdGlvbkJ1dHRvbnNcbiJdfQ== */"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL01vZGFsL0FjdGlvbkJ1dHRvbnMvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdnQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Nb2RhbC9BY3Rpb25CdXR0b25zL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5cbnR5cGUgUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGUgfCBSZWFjdC5SZWFjdE5vZGVbXVxuICAvKiogQWRkcyBcImp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlblwiIEBkZWZhdWx0IHRydWUgKi9cbiAgc3BhY2VCZXR3ZWVuPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbn1cblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXYoXG4gICh7IHNwYWNlQmV0d2VlbiB9OiB7IHNwYWNlQmV0d2Vlbj86IGJvb2xlYW4gfSkgPT4gY3NzYFxuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZ2FwOiAxZW07XG4gICAgd2lkdGg6IDEwMCU7XG4gICAganVzdGlmeS1jb250ZW50OiAke3NwYWNlQmV0d2VlbiA/ICdzcGFjZS1iZXR3ZWVuJyA6ICdmbGV4LWVuZCd9O1xuICBgXG4pXG5cbmNvbnN0IEFjdGlvbkJ1dHRvbnMgPSAoeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBzcGFjZUJldHdlZW4gPSB0cnVlIH06IFByb3BzKSA9PiAoXG4gIDxXcmFwcGVyIGNsYXNzTmFtZT17Y2xhc3NOYW1lfSBzcGFjZUJldHdlZW49e3NwYWNlQmV0d2Vlbn0+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pXG5cbmV4cG9ydCBkZWZhdWx0IEFjdGlvbkJ1dHRvbnNcbiJdfQ== */");
-
 const ActionButtons = ({
   children,
   className,
@@ -21,5 +19,4 @@ const ActionButtons = ({
   spaceBetween: spaceBetween,
   children: children
 });
-
 export default ActionButtons;

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

@@ -0,0 +1,23 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Collapse: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Dynamic: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Scrollable: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Fullscreeen: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Modal.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Modal/Modal.stories.tsx"],"names":[],"mappings":";AAMA,wBAWS;AAET,eAAO,MAAM,OAAO;;;CAsBnB,CAAA;AAED,eAAO,MAAM,QAAQ;;;CAiBpB,CAAA;AAED,eAAO,MAAM,OAAO;;;CAsBnB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAsItB,CAAA;AAED,eAAO,MAAM,WAAW;;;CAavB,CAAA"}

package/lib/core/Modal/Modal.stories.js

@@ -0,0 +1,117 @@
+import Header from '../Header';
+import Text from '../Text';
+import Button from '../Button';
+import Modal from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/Modal',
+  component: Modal,
+  parameters: {
+    docs: {
+      story: {
+        inline: false,
+        height: '500px'
+      }
+    }
+  }
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Modal, {
+    open: true,
+    onClose: () => console.log('closed'),
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Her kommer en header"
+    }),
+    actionButton: /*#__PURE__*/_jsxs(Modal.Actions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        outline: true,
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        children: "Save changes"
+      })]
+    }),
+    disableOutsideClick: false,
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."
+    })
+  }),
+  name: 'Default'
+};
+export const Collapse = {
+  render: () => /*#__PURE__*/_jsx(Modal, {
+    open: true,
+    onClose: () => console.log('closed'),
+    onCollapse: () => console.log('collapse'),
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Her kommer en header"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      children: "Save changes"
+    }),
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "Hello there! I am Modal, i can be collapsed, but not in storybook though, it has to be done from parent"
+    })
+  }),
+  name: 'Collapse'
+};
+export const Dynamic = {
+  render: () => /*#__PURE__*/_jsx(Modal, {
+    open: true,
+    onClose: () => console.log('closed'),
+    width: '600px',
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Her kommer en header"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      children: "Save changes"
+    }),
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."
+    })
+  }),
+  name: 'Dynamic'
+};
+export const Scrollable = {
+  render: () => /*#__PURE__*/_jsxs(Modal, {
+    open: true,
+    onClose: () => console.log('closed'),
+    disableScrollableContent: false,
+    width: '100%',
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Scrollable modal"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      children: "Button is allways shown"
+    }),
+    children: [/*#__PURE__*/_jsxs(Text, {
+      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+    }), /*#__PURE__*/_jsxs(Text, {
+      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+    }), /*#__PURE__*/_jsxs(Text, {
+      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+    }), /*#__PURE__*/_jsxs(Text, {
+      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+    })]
+  }),
+  name: 'Scrollable'
+};
+export const Fullscreeen = {
+  render: () => /*#__PURE__*/_jsx(Modal, {
+    open: true,
+    toggleFullscreen: true,
+    onClose: () => console.log('closed'),
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "With fullscreen"
+    }),
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "Hello there! I am Modal, i can be be toggled for fullscreen"
+    })
+  }),
+  name: 'Fullscreeen'
+};

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

@@ -45,7 +45,7 @@ declare namespace Modal {
         children: React.ReactNode | React.ReactNode[];
         spaceBetween?: boolean | undefined;
         className?: string | undefined;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 }
 export default Modal;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/Modal/index.js

@@ -10,7 +10,6 @@ import IconFullscreenOpen from '../../icons/General/IconFullscreenOpen';
 import ActionButtons from './ActionButtons';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 function Modal({
   open,
   header,
@@ -36,47 +35,38 @@ function Modal({
   const [headerHeight, setHeaderHeight] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(!!defaultFullscreen);
   const hasCollapse = Boolean(onCollapse);
-
   const setClose = () => {
     enableBodyScroll(modalRef.current);
     if (!disableLocalClose) setOpen(false);
-
     if (onClose) {
       onClose();
     }
   };
-
   const handleHeaderRef = useCallback(node => {
     setHeaderHeight(node?.clientHeight);
   }, []);
   useEffect(() => {
     if (!modalRef.current) return;
-
     if (isOpen && disableScroll) {
       disableBodyScroll(modalRef.current);
-
       if (targetRefs && targetRefs.length > 0) {
         targetRefs.forEach(ref => disableBodyScroll(ref.current));
       }
-
       return;
     }
-
     enableBodyScroll(modalRef.current);
   }, [isOpen, modalRef, open, targetRefs, disableScroll]);
-  /** Cleanup body scroll on component destroyed */
 
+  /** Cleanup body scroll on component destroyed */
   useEffect(() => {
     return () => {
       clearAllBodyScrollLocks();
     };
   });
-
   const onOutsideClick = () => {
     if (disableOutsideClick) return;
     setClose();
   };
-
   return _jsx(CSSTransition, {
     in: isOpen,
     unmountOnExit: true,
@@ -134,6 +124,5 @@ function Modal({
     })
   });
 }
-
 Modal.Actions = ActionButtons;
 export default Modal;