@bbl-digital/snorre 4.0.0-beta.4 → 4.0.0-beta.6

package/esm/core/Card/Card.stories.js

@@ -0,0 +1,69 @@
+import Card from '.';
+import Dropdown from '../Dropdown';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/Card',
+  component: Card
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    children: "Stuff"
+  }),
+  name: 'Default'
+};
+export const WithHover = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    withhover: true,
+    children: "Hover me!"
+  }),
+  name: 'With hover'
+};
+export const WithShadow = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    shadow: true,
+    children: "Shadow"
+  }),
+  name: 'With shadow'
+};
+export const WithPrimary = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    primary: true,
+    children: "Primary"
+  }),
+  name: 'With primary'
+};
+export const WithGray = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    gray: true,
+    children: "Gray"
+  }),
+  name: 'With gray'
+};
+export const WithOverflowVisible = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    shadow: true,
+    overflowvisible: true,
+    children: /*#__PURE__*/_jsxs(Dropdown, {
+      children: [/*#__PURE__*/_jsx("p", {
+        children: "Option 1"
+      }), /*#__PURE__*/_jsx("p", {
+        children: "Option 2"
+      }), /*#__PURE__*/_jsx("p", {
+        children: "Option 3"
+      }), /*#__PURE__*/_jsx("p", {
+        children: "Option 4"
+      })]
+    })
+  }),
+  name: 'With overflow visible'
+};
+export const ClickableCard = {
+  render: () => /*#__PURE__*/_jsx(Card, {
+    shadow: true,
+    overflowvisible: true,
+    onClick: () => console.log('heya'),
+    children: "Click me.."
+  }),
+  name: 'Clickable card'
+};

package/esm/core/Card/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { styles } from './styles';
 import { Key } from '../../enums/Keyboard';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const Card = ({
   className,
   ...props
@@ -15,7 +14,6 @@ const Card = ({
       }
     }
   };
-
   return _jsx("div", {
     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,
@@ -25,5 +23,4 @@ const Card = ({
     children: props.children
   });
 };
-
 export default Card;

package/esm/core/Card/styles.js

@@ -1,5 +1,4 @@
 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 styles = {
   default: theme => /*#__PURE__*/css("position:relative;padding:30px 20px;border-radius:", theme.preemptionCardBorderRadius, ";background-color:#ffffff;overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0NhcmQvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9DYXJkL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHBhZGRpbmc6IDMwcHggMjBweDtcbiAgICBib3JkZXItcmFkaXVzOiAke3RoZW1lLnByZWVtcHRpb25DYXJkQm9yZGVyUmFkaXVzfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gIGAsXG4gIHdpdGhIZWFkZXI6IGNzc2BcbiAgICBwYWRkaW5nOiAwO1xuICAgIHBhZGRpbmctYm90dG9tOiAzMHB4O1xuICBgLFxuICB3aXRoSG92ZXI6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICAgIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2UtaW4tb3V0O1xuICAgICY6aG92ZXIge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93QmlnfTtcbiAgICB9XG4gIGAsXG4gIHNoYWRvdzogKHRoZW1lOiBJQXBwVGhlbWUpID0+IGNzc2BcbiAgICBib3gtc2hhZG93OiAke3RoZW1lLnNoYWRvd1NtYWxsfTtcbiAgYCxcbiAgcHJpbWFyeTogKHRoZW1lOiBJQXBwVGhlbWUpID0+IGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICBgLFxuICBncmF5OiBjc3NgXG4gICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwLjAzKTtcbiAgYCxcbiAgbm9QYWRkaW5nOiBjc3NgXG4gICAgcGFkZGluZzogMDtcbiAgYCxcbiAgbGFyZ2VQYWRkaW5nOiBjc3NgXG4gICAgcGFkZGluZzogMmVtO1xuICBgLFxuICBub2JhY2tncm91bmQ6IGNzc2BcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgYCxcbiAgaGVpZ2h0OiAoaGVpZ2h0OiBudW1iZXIpID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7aGVpZ2h0fXB4O1xuICBgLFxuICBvdmVyZmxvd3Zpc2libGU6IGNzc2BcbiAgICBvdmVyZmxvdzogdmlzaWJsZTtcbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG5cbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */"),

package/esm/core/Checkbox/Checkbox.stories.js

@@ -0,0 +1,43 @@
+import Checkbox from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Checkbox',
+  component: Checkbox
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Checkbox, {
+    value: "value1",
+    children: "Option"
+  }),
+  name: 'Default'
+};
+export const WithoutLabel = {
+  render: () => /*#__PURE__*/_jsx(Checkbox, {
+    value: "value1"
+  }),
+  name: 'Without label'
+};
+export const Subtle = {
+  render: () => /*#__PURE__*/_jsx(Checkbox, {
+    value: "value1",
+    type: "subtle",
+    children: "Option"
+  }),
+  name: 'Subtle'
+};
+export const Checked = {
+  render: () => /*#__PURE__*/_jsx(Checkbox, {
+    value: "value1",
+    checked: true,
+    children: "Option"
+  }),
+  name: 'Checked'
+};
+export const Disabled = {
+  render: () => /*#__PURE__*/_jsx(Checkbox, {
+    value: "value1",
+    disabled: true,
+    children: "Disabled option"
+  }),
+  name: 'Disabled'
+};

package/esm/core/Checkbox/index.js

@@ -3,19 +3,16 @@ import React, { useEffect, useState } from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Checkbox = props => {
   const [value, setValue] = useState(props.checked ? true : false);
   useEffect(() => {
     setValue(props.checked ? true : false);
   }, [props.checked]);
-
   const handleChange = e => {
     if (props.disabled) return;
     setValue(!value);
     props.onChange && props.onChange(e);
   };
-
   return _jsxs("label", {
     "aria-label": props['aria-label'],
     className: props.className,
@@ -32,5 +29,4 @@ const Checkbox = props => {
     }), _jsx("span", {}), props.children]
   });
 };
-
 export default Checkbox;

package/esm/core/Checkbox/styles.js

@@ -1,7 +1,5 @@
 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';
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "131jtor",
   styles: "span{border-radius:2px;}"
@@ -11,7 +9,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0NoZWNrYm94L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRm1DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0NoZWNrYm94L3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgaW5wdXQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gICAgICAmOmNoZWNrZWQgfiBzcGFuIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgfVxuXG4gICAgICAmOmNoZWNrZWQgfiBzcGFuOmFmdGVyIHtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICB9XG5cbiAgICAgICY6Zm9jdXMtdmlzaWJsZSB+IHNwYW4ge1xuICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUucHJpbWFyeTVkYXJrZXJ9O1xuICAgICAgfVxuXG4gICAgICAmOmZvY3VzLXZpc2libGUgfiBzcGFuOmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDAuMjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBzcGFuIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICBtaW4td2lkdGg6IDE2cHg7XG4gICAgICBib3JkZXI6IDJweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDdweDtcblxuICAgICAgJjpiZWZvcmUge1xuICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICBiYWNrZ3JvdW5kOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgICAgICBsZWZ0OiAtMTBweDtcbiAgICAgICAgdG9wOiAtMTBweDtcbiAgICAgICAgd2lkdGg6IDM1cHg7XG4gICAgICAgIGhlaWdodDogMzVweDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlO1xuICAgICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDI1MG1zO1xuICAgICAgfVxuXG4gICAgICAmOmhvdmVyOmJlZm9yZSB7XG4gICAgICAgIG9wYWNpdHk6IDAuMTtcbiAgICAgIH1cblxuICAgICAgJjphZnRlciB7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgIGxlZnQ6IDVweDtcbiAgICAgICAgdG9wOiAycHg7XG4gICAgICAgIHdpZHRoOiA0cHg7XG4gICAgICAgIGhlaWdodDogOXB4O1xuICAgICAgICBib3JkZXI6IHNvbGlkIHdoaXRlO1xuICAgICAgICBib3JkZXItd2lkdGg6IDAgMnB4IDJweCAwO1xuICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgICB9XG4gICAgfVxuICBgLFxuICBub21hcmdpbjogY3NzYFxuICAgIG1hcmdpbi1yaWdodDogMDtcbiAgYCxcbiAgY2hpbGQ6IGNzc2BcbiAgICBwYWRkaW5nLWxlZnQ6IDQxcHg7XG4gICAgc3BhbiB7XG4gICAgICBsZWZ0OiAxNnB4O1xuICAgIH1cbiAgYCxcbiAgZGlzYWJsZWQ6ICh0aGVtZTogSUFwcFRoZW1lLCBzdGF0ZT86IHN0cmluZykgPT4gY3NzYFxuICAgIGNvbG9yOiAke3RoZW1lLnN1YnRsZVRleHR9O1xuICAgIGN1cnNvcjogJHtzdGF0ZSA/IHN0YXRlIDogJ25vdC1hbGxvd2VkJ307XG4gICAgc3BhbiB7XG4gICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICBjdXJzb3I6ICR7c3RhdGUgPyBzdGF0ZSA6ICdub3QtYWxsb3dlZCd9O1xuICAgIH1cbiAgYCxcbiAgc3VidGxlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIHNwYW4ge1xuICAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGRlZmF1bHQgc3R5bGVzXG5cbmV4cG9ydCB7IHN0eWxlcyB9XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-
 const styles = {
   default: theme => /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;font-size:14px;line-height:20px;user-select:none;cursor:pointer;position:relative;input{position:absolute;opacity:0;pointer-events:none;&:checked~span{background-color:", theme.primary, ";border-color:", theme.primary, ";}&:checked~span:after{display:block;}&:focus-visible~span{border-color:", theme.primary5darker, ";}&:focus-visible~span:before{opacity:0.2;}}span{position:relative;top:0;left:0;height:16px;min-width:16px;border:2px solid ", theme.border, ";cursor:pointer;margin-right:7px;&:before{content:'';position:absolute;background:", theme.primary, ";opacity:0;left:-10px;top:-10px;width:35px;height:35px;border-radius:50%;transition:opacity 250ms;}&:hover:before{opacity:0.1;}&:after{content:'';position:absolute;display:none;left:5px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0NoZWNrYm94L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0MiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvQ2hlY2tib3gvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgeyBJQXBwVGhlbWUgfSBmcm9tICcuLi8uLi9hcHAtc2hlbGwvdGhlbWUnXG5cbmNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICAgIHVzZXItc2VsZWN0OiBub25lO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICBpbnB1dCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5cbiAgICAgICY6Y2hlY2tlZCB+IHNwYW4ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUucHJpbWFyeX07XG4gICAgICB9XG5cbiAgICAgICY6Y2hlY2tlZCB+IHNwYW46YWZ0ZXIge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIH1cblxuICAgICAgJjpmb2N1cy12aXNpYmxlIH4gc3BhbiB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5wcmltYXJ5NWRhcmtlcn07XG4gICAgICB9XG5cbiAgICAgICY6Zm9jdXMtdmlzaWJsZSB+IHNwYW46YmVmb3JlIHtcbiAgICAgICAgb3BhY2l0eTogMC4yO1xuICAgICAgfVxuICAgIH1cblxuICAgIHNwYW4ge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIGhlaWdodDogMTZweDtcbiAgICAgIG1pbi13aWR0aDogMTZweDtcbiAgICAgIGJvcmRlcjogMnB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIG1hcmdpbi1yaWdodDogN3B4O1xuXG4gICAgICAmOmJlZm9yZSB7XG4gICAgICAgIGNvbnRlbnQ6ICcnO1xuICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgIGJhY2tncm91bmQ6ICR7dGhlbWUucHJpbWFyeX07XG4gICAgICAgIG9wYWNpdHk6IDA7XG4gICAgICAgIGxlZnQ6IC0xMHB4O1xuICAgICAgICB0b3A6IC0xMHB4O1xuICAgICAgICB3aWR0aDogMzVweDtcbiAgICAgICAgaGVpZ2h0OiAzNXB4O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgMjUwbXM7XG4gICAgICB9XG5cbiAgICAgICY6aG92ZXI6YmVmb3JlIHtcbiAgICAgICAgb3BhY2l0eTogMC4xO1xuICAgICAgfVxuXG4gICAgICAmOmFmdGVyIHtcbiAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgbGVmdDogNXB4O1xuICAgICAgICB0b3A6IDJweDtcbiAgICAgICAgd2lkdGg6IDRweDtcbiAgICAgICAgaGVpZ2h0OiA5cHg7XG4gICAgICAgIGJvcmRlcjogc29saWQgd2hpdGU7XG4gICAgICAgIGJvcmRlci13aWR0aDogMCAycHggMnB4IDA7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKTtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG5vbWFyZ2luOiBjc3NgXG4gICAgbWFyZ2luLXJpZ2h0OiAwO1xuICBgLFxuICBjaGlsZDogY3NzYFxuICAgIHBhZGRpbmctbGVmdDogNDFweDtcbiAgICBzcGFuIHtcbiAgICAgIGxlZnQ6IDE2cHg7XG4gICAgfVxuICBgLFxuICBkaXNhYmxlZDogKHRoZW1lOiBJQXBwVGhlbWUsIHN0YXRlPzogc3RyaW5nKSA9PiBjc3NgXG4gICAgY29sb3I6ICR7dGhlbWUuc3VidGxlVGV4dH07XG4gICAgY3Vyc29yOiAke3N0YXRlID8gc3RhdGUgOiAnbm90LWFsbG93ZWQnfTtcbiAgICBzcGFuIHtcbiAgICAgIG9wYWNpdHk6IDAuNTtcbiAgICAgIGN1cnNvcjogJHtzdGF0ZSA/IHN0YXRlIDogJ25vdC1hbGxvd2VkJ307XG4gICAgfVxuICBgLFxuICBzdWJ0bGU6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgc3BhbiB7XG4gICAgICBib3JkZXItcmFkaXVzOiAycHg7XG4gICAgfVxuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcblxuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */"),
   nomargin: process.env.NODE_ENV === "production" ? {

package/esm/core/CollapseList/CollapseList.stories.js

@@ -0,0 +1,43 @@
+import CollapseList from '.';
+import CollapseListItem from './Item';
+import Text from '../Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/CollapseList',
+  component: CollapseList
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsxs(CollapseList, {
+    children: [/*#__PURE__*/_jsx(CollapseListItem, {
+      header: /*#__PURE__*/_jsx(Text, {
+        children: "Header"
+      }),
+      content: /*#__PURE__*/_jsx(Text, {
+        children: "Content"
+      })
+    }), /*#__PURE__*/_jsx(CollapseListItem, {
+      header: /*#__PURE__*/_jsx(Text, {
+        children: "Item 2"
+      }),
+      content: /*#__PURE__*/_jsx(Text, {
+        children: "Content"
+      })
+    })]
+  }),
+  name: 'Default'
+};
+export const InitialOpen = {
+  render: () => /*#__PURE__*/_jsx(CollapseList, {
+    children: /*#__PURE__*/_jsx(CollapseListItem, {
+      header: /*#__PURE__*/_jsx(Text, {
+        children: "Header"
+      }),
+      content: /*#__PURE__*/_jsx(Text, {
+        children: "Content"
+      }),
+      initialOpen: true
+    })
+  }),
+  name: 'initialOpen'
+};

package/esm/core/CollapseList/Item.js

@@ -3,18 +3,15 @@ import { CollapseButton } from './styles';
 import { IconChevronDown } from '../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const CollapseListItem = ({
   header,
   content,
   initialOpen
 }) => {
   const [open, setOpen] = useState(initialOpen ? true : false);
-
   const toggleOpen = () => {
     setOpen(!open);
   };
-
   return /*#__PURE__*/_jsxs("div", {
     className: "item",
     children: [/*#__PURE__*/_jsx(CollapseButton, {
@@ -34,5 +31,4 @@ const CollapseListItem = ({
     })]
   });
 };
-
 export default CollapseListItem;

package/esm/core/CollapseList/index.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const CollapseList = ({
   children
 }) => {
@@ -11,5 +10,4 @@ const CollapseList = ({
     children: children
   });
 };
-
 export default CollapseList;

package/esm/core/CollapseList/styles.js

@@ -1,7 +1,5 @@
 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';
 import Button from '../Button';
 export const CollapseButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {

package/esm/core/CommentsTimeline/CommentLine/index.js

@@ -5,7 +5,6 @@ import Text from '../../Text';
 import { useIsMobile } from '../../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const CommentLine = ({
   date = '',
   time = '',
@@ -51,5 +50,4 @@ const CommentLine = ({
     })]
   });
 };
-
 export default CommentLine;

package/esm/core/CommentsTimeline/CommentLine/styles.js

@@ -1,7 +1,5 @@
 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';
 import bp from '../../../globals/styles/breakpoints';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {

package/esm/core/CommentsTimeline/CommentsTimeline.stories.js

@@ -0,0 +1,79 @@
+import CommentsTimelineComponent from '.';
+import CommentLine from './CommentLine';
+import IconComment from '../../icons/General/IconComment';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/CommentsTimeline',
+  component: CommentsTimelineComponent
+};
+export const CommentsTimeline = {
+  render: () => /*#__PURE__*/_jsxs(CommentsTimelineComponent, {
+    children: [/*#__PURE__*/_jsx(CommentLine, {
+      time: "11:40",
+      date: "20.08.2020",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Test Person",
+      comment: "This is a comment"
+    }), /*#__PURE__*/_jsx(CommentLine, {
+      time: "11:30",
+      date: "20.08.2020",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Test Person",
+      comment: "This is a comment"
+    }), /*#__PURE__*/_jsx(CommentLine, {
+      time: "11:10",
+      date: "21.02.2001",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Test Person",
+      comment: "This is a comment"
+    }), /*#__PURE__*/_jsx(CommentLine, {
+      time: "11:40",
+      date: "22.12.2000",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Kristian Gr\xF8nvold",
+      comment: "This is a also comment"
+    }), /*#__PURE__*/_jsx(CommentLine, {
+      time: "11:40",
+      date: "22.12.2000",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Kristian Gr\xF8nvold",
+      comment: "This is an italic comment with extra info",
+      italic: true,
+      subtle: true,
+      commentInfo: "Extra text"
+    })]
+  }),
+  name: 'CommentsTimeline'
+};
+export const CustomContent = {
+  render: () => /*#__PURE__*/_jsx(CommentsTimelineComponent, {
+    children: /*#__PURE__*/_jsx(CommentLine, {
+      time: "11:40",
+      date: "20.08.2020",
+      icon: /*#__PURE__*/_jsx(IconComment, {
+        primary: true
+      }),
+      header: "Test Person",
+      comment: "This is a comment",
+      commentInfo: "Comment info",
+      customContent: /*#__PURE__*/_jsxs("span", {
+        children: ["This is some custom content where you can add", /*#__PURE__*/_jsx(Button, {
+          children: "stuff"
+        })]
+      })
+    })
+  }),
+  name: 'Custom content'
+};

package/esm/core/CommentsTimeline/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const CommentsTimeline = ({
   children
 }) => {
@@ -9,5 +8,4 @@ const CommentsTimeline = ({
     children: children
   });
 };
-
 export default CommentsTimeline;

package/esm/core/CommentsTimeline/styles.js

@@ -1,7 +1,5 @@
 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)."; }
-
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ew4oa5v0"
 } : {

package/esm/core/CustomText/CustomText.stories.js

@@ -0,0 +1,33 @@
+import CustomText from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/CustomText',
+  component: CustomText
+};
+export const Html = {
+  render: () => /*#__PURE__*/_jsx(CustomText, {
+    text: "<ul><li>Html</li><li><strong>Text</strong></li></ul>"
+  }),
+  name: 'Html'
+};
+export const Plain = {
+  render: () => /*#__PURE__*/_jsx(CustomText, {
+    text: "Supports plain text with\\r  linebreak"
+  }),
+  name: 'Plain'
+};
+export const Loading = {
+  render: () => /*#__PURE__*/_jsx(CustomText, {
+    loading: true,
+    lines: 3
+  }),
+  name: 'Loading'
+};
+export const LoadingCenter = {
+  render: () => /*#__PURE__*/_jsx(CustomText, {
+    loading: true,
+    lines: 3,
+    centerloader: true
+  }),
+  name: 'Loading center'
+};

package/esm/core/CustomText/index.js

@@ -4,26 +4,21 @@ import Skeleton from '../Skeleton';
 import Html from '../Html';
 import { Wrapper, center } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-
 const CustomText = props => {
   if (props.error) {
     return null;
   }
-
   if (props.loading) {
     const lines = props.lines ? props.lines : 1;
     const skeletonRows = [];
-
     for (var i = 0; i < lines; i++) {
       skeletonRows.push(_jsx(Skeleton, {}, i));
     }
-
     return _jsx(Wrapper, {
       css: () => props.centerloader && center,
       children: skeletonRows
     });
   }
-
   return _jsx(Html, {
     text: props.text,
     secondary: props.secondary,
@@ -32,5 +27,4 @@ const CustomText = props => {
     whiteSpace: props.whiteSpace
   });
 };
-
 export default CustomText;

package/esm/core/CustomText/styles.js

@@ -1,7 +1,5 @@
 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';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ei0607b0"

package/esm/core/Datepicker/Datepicker.stories.js

@@ -0,0 +1,58 @@
+import Datepicker from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Datepicker',
+  component: Datepicker
+};
+export const DatepickerDefault = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    onChange: e => console.log(e),
+    onBlur: () => console.log('blur'),
+    label: "Date"
+  }),
+  name: 'Datepicker'
+};
+export const WithError = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    onChange: e => console.log(e),
+    label: "With error",
+    validation: true,
+    invalidMessage: "Something is wrong"
+  }),
+  name: 'With error'
+};
+export const WithValue = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    onChange: e => console.log('change', e),
+    label: "With value",
+    value: new Date(1995, 7, 20)
+  }),
+  name: 'With value'
+};
+export const LimitValues = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    label: "With min and max date",
+    withYearMonthForm: false,
+    minDate: new Date(2020, 10, 10),
+    maxDate: new Date(2020, 11, 10),
+    onChange: e => console.log('change', e)
+  }),
+  name: 'Limit values'
+};
+export const Disabled = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    label: "Disabled",
+    onChange: e => console.log('change', e),
+    disabled: true,
+    disabledTitle: "I'm disabled"
+  }),
+  name: 'Disabled'
+};
+export const NonInput = {
+  render: () => /*#__PURE__*/_jsx(Datepicker, {
+    onChange: e => console.log('change', e),
+    nonInput: true,
+    withYearMonthForm: false
+  }),
+  name: 'Non input'
+};

package/esm/core/Datepicker/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-
 /** @jsxImportSource @emotion/react */
 import React, { useEffect, useRef, useState } from 'react';
 import { Wrapper, Label, ErrorMessage, styles } from './styles';
@@ -16,7 +15,6 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 const FORMAT = 'dd.MM.yyyy';
-
 const Datepicker = ({
   value,
   label,
@@ -57,71 +55,55 @@ const Datepicker = ({
       if (node1 && node1.contains(e.target) || node2 && node2.contains(e.target)) return;
       handleClose();
     };
-
     if (isOpen) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [isOpen, pickerRef, popperElement]);
-
   const emitChange = newDate => {
     newDate?.setHours(11, 0); // To avoid timezone issues
-
     setDate(newDate);
     onChange(newDate);
   };
-
   const handleClose = () => {
     setIsOpen(false);
     setDisplayMonth(undefined);
     onBlur && onBlur();
   };
-
   const popper = usePopper(referenceElement, popperElement, {
     placement: 'bottom-start'
   });
-
   const handleChange = newDate => {
     if (disabled || !newDate && !date || newDate && date && datesAreOnSameDay(newDate, date)) return;
     if (!newDate || !isDateValid(newDate)) emitChange(undefined);else emitChange(newDate);
   };
-
   const isDateValid = date => isValid(date) && getDateIsValid(date, fromDate, toDate);
-
   const handleInputChange = (value, emitChange) => {
     setInputValue(value);
     const date = parseDate(value, FORMAT);
-
     if (date && isDateValid(date)) {
       setPickerValue(date);
       setDisplayMonth(date);
     } else {
       setPickerValue(undefined);
     }
-
     if (emitChange) handleChange(date);
   };
-
   const handleDaySelect = date => {
     setPickerValue(date ? date : undefined);
-
     if (date) {
       setInputValue(format(date, FORMAT));
       setTimeout(handleClose, 100);
     } else {
       setInputValue('');
     }
-
     handleChange(date);
   };
-
   const handleInputKeydown = e => setIsOpen(e.key !== Key.tab);
-
   const Picker = _jsx(DayPicker, {
     defaultMonth: date,
     selected: pickerValue,
@@ -139,7 +121,6 @@ const Datepicker = ({
     }],
     onMonthChange: setDisplayMonth
   });
-
   return _jsx(Wrapper, {
     css: theme => [styles.default(theme), validation && styles.validation, invalidMessage && styles.invalid(theme), nonInput && styles.nonInput(theme)],
     title: disabled ? disabledTitle : undefined,
@@ -178,5 +159,4 @@ const Datepicker = ({
     })
   });
 };
-
 export default Datepicker;

package/esm/core/Datepicker/styles.js

@@ -1,7 +1,5 @@
 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';
 import bp from '../../globals/styles/breakpoints';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {