@bbl-digital/snorre 3.1.57 → 3.1.59

package/esm/core/InfoButton/InfoButton.stories.js

@@ -0,0 +1,57 @@
+import InfoButton from '.';
+import IconHelp from '../../icons/General/IconHelp';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/InfoButton',
+  component: InfoButton
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(InfoButton, {
+    icon: /*#__PURE__*/_jsx(IconHelp, {
+      primary: true
+    }),
+    children: "This will be the content"
+  }),
+  name: 'Default'
+};
+export const Right = {
+  render: () => /*#__PURE__*/_jsx(InfoButton, {
+    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"
+  }),
+  name: 'Right'
+};
+export const Bottom = {
+  render: () => /*#__PURE__*/_jsx(InfoButton, {
+    icon: /*#__PURE__*/_jsx(IconHelp, {
+      primary: true
+    }),
+    place: "bottom",
+    children: "This will be the content"
+  }),
+  name: 'Bottom'
+};
+export const Left = {
+  render: () => /*#__PURE__*/_jsx(InfoButton, {
+    icon: /*#__PURE__*/_jsx(IconHelp, {
+      primary: true
+    }),
+    place: "left",
+    children: "This will be the content"
+  }),
+  name: 'Left'
+};
+export const Width = {
+  render: () => /*#__PURE__*/_jsx(InfoButton, {
+    icon: /*#__PURE__*/_jsx(IconHelp, {
+      primary: true
+    }),
+    place: "right",
+    width: "100px",
+    children: "Custom width"
+  }),
+  name: 'Width'
+};

package/esm/core/InfoButton/index.js

@@ -5,7 +5,6 @@ import { CSSTransition } from 'react-transition-group';
 import Text from '../Text';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const InfoButton = ({
   trackingName,
   icon,
@@ -18,29 +17,23 @@ const InfoButton = ({
 }) => {
   const ref = /*#__PURE__*/createRef();
   const [showTooltip, setShowTooltip] = useState(false);
-
   const handleClick = e => {
     stopPropagation && e.stopPropagation();
     setShowTooltip(!showTooltip);
   };
-
   useEffect(() => {
     const handleClickOutside = e => {
       const node = ref.current;
-
       if (node && node.contains(e.target)) {
         return;
       }
-
       setShowTooltip(false);
     };
-
     if (showTooltip) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -67,5 +60,4 @@ const InfoButton = ({
     })]
   });
 };
-
 export default InfoButton;

package/esm/core/InfoButton/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';
 import Button from '../Button';
@@ -35,7 +33,7 @@ export const styles = {
   left: /*#__PURE__*/css("top:0;right:calc(24px + 3px);box-shadow:1px 0px 4px 0px rgba(0, 0, 0, 0.2);@media screen and (max-width: ", bp.small, "){width:50vw;}@media screen and (max-width: ", bp.large, ") and (orientation: landscape){width:50vw;}&::after{top:8px;left:100%;border-color:transparent transparent transparent white;}" + (process.env.NODE_ENV === "production" ? "" : ";label:left;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0luZm9CdXR0b24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStFVyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9JbmZvQnV0dG9uL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgYnAgZnJvbSAnLi4vLi4vZ2xvYmFscy9zdHlsZXMvYnJlYWtwb2ludHMnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uL0J1dHRvbidcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBtYXJnaW4tbGVmdDogNXB4O1xuXG4gICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgb3V0bGluZTogMXB4IGRvdHRlZCAjMjEyMTIxO1xuICAgIG91dGxpbmU6IDVweCBhdXRvIC13ZWJraXQtZm9jdXMtcmluZy1jb2xvcjtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiBjc3NgXG4gICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICBtYXgtd2lkdGg6IDMwMHB4O1xuICBgLFxuICB0b3A6IGNzc2BcbiAgICBib3R0b206IGNhbGMoMjRweCArIDVweCk7XG4gICAgbGVmdDogY2FsYygtMTF2dyArIDlweCk7XG4gICAgYm94LXNoYWRvdzogMHB4IDFweCA0cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICAgIGxlZnQ6IGNhbGMoLTI1dncgKyA5cHgpO1xuICAgIH1cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLmxhcmdlfSkgYW5kIChvcmllbnRhdGlvbjogbGFuZHNjYXBlKSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICAmOjphZnRlciB7XG4gICAgICB0b3A6IDEwMCU7XG4gICAgICBsZWZ0OiA1MCU7XG4gICAgICBtYXJnaW4tbGVmdDogLTVweDtcbiAgICAgIGJvcmRlci1jb2xvcjogd2hpdGUgdHJhbnNwYXJlbnQgdHJhbnNwYXJlbnQgdHJhbnNwYXJlbnQ7XG4gICAgfVxuICBgLFxuICByaWdodDogY3NzYFxuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAzNXB4O1xuICAgIGJveC1zaGFkb3c6IC0xcHggMHB4IDRweCAwcHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5zbWFsbH0pIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubGFyZ2V9KSBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgIH1cblxuICAgICY6OmFmdGVyIHtcbiAgICAgIHRvcDogOHB4O1xuICAgICAgcmlnaHQ6IDEwMCU7XG4gICAgICBtYXJnaW4tbGVmdDogLTVweDtcbiAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQgd2hpdGUgdHJhbnNwYXJlbnQgdHJhbnNwYXJlbnQ7XG4gICAgfVxuICBgLFxuICBib3R0b206IGNzc2BcbiAgICB0b3A6IGNhbGMoMjRweCArIDVweCk7XG4gICAgbGVmdDogY2FsYygtMTF2dyArIDlweCk7XG4gICAgYm94LXNoYWRvdzogMHB4IC0xcHggNHB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMik7XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgICBsZWZ0OiBjYWxjKC0yNXZ3ICsgOXB4KTtcbiAgICB9XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5sYXJnZX0pIGFuZCAob3JpZW50YXRpb246IGxhbmRzY2FwZSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgYm90dG9tOiAxMDAlO1xuICAgICAgbGVmdDogNTAlO1xuICAgICAgbWFyZ2luLWxlZnQ6IC01cHg7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHdoaXRlIHRyYW5zcGFyZW50O1xuICAgIH1cbiAgYCxcbiAgbGVmdDogY3NzYFxuICAgIHRvcDogMDtcbiAgICByaWdodDogY2FsYygyNHB4ICsgM3B4KTtcbiAgICBib3gtc2hhZG93OiAxcHggMHB4IDRweCAwcHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5zbWFsbH0pIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgIH1cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLmxhcmdlfSkgYW5kIChvcmllbnRhdGlvbjogbGFuZHNjYXBlKSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICAmOjphZnRlciB7XG4gICAgICB0b3A6IDhweDtcbiAgICAgIGxlZnQ6IDEwMCU7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHdoaXRlO1xuICAgIH1cbiAgYCxcbiAgd2lkdGg6ICh3aWR0aDogc3RyaW5nLCBwbGFjZTogc3RyaW5nKSA9PiBjc3NgXG4gICAgd2lkdGg6ICR7d2lkdGh9ICFpbXBvcnRhbnQ7XG4gICAgbGVmdDogJHtwbGFjZSA9PT0gJ3RvcCcgfHwgcGxhY2UgPT09ICdib3R0b20nXG4gICAgICA/IGBjYWxjKCgtJHt3aWR0aH0gLyAyKSArIDlweCkgIWltcG9ydGFudGBcbiAgICAgIDogcGxhY2UgPT09ICdyaWdodCdcbiAgICAgID8gJzM1cHgnXG4gICAgICA6ICdpbml0aWFsJ307XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMjJ2dztcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBwYWRkaW5nOiAwLjVlbTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIHotaW5kZXg6IDk5OTk7XG5cbiAgJi50b29sdGlwLWVudGVyIHtcbiAgICBvcGFjaXR5OiAwO1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMC44KTtcbiAgfVxuICAmLnRvb2x0aXAtZW50ZXItYWN0aXZlIHtcbiAgICBvcGFjaXR5OiAxO1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgwKTtcbiAgICB0cmFuc2l0aW9uOiBvcGFjaXR5IDgwbXMsIHRyYW5zZm9ybSA4MG1zO1xuICB9XG4gICYudG9vbHRpcC1leGl0IHtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG4gICYudG9vbHRpcC1leGl0LWFjdGl2ZSB7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOSk7XG4gICAgdHJhbnNpdGlvbjogb3BhY2l0eSA4MG1zLCB0cmFuc2Zvcm0gODBtcztcbiAgfVxuXG4gICY6OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgYm9yZGVyLXdpZHRoOiA1cHg7XG4gICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5zcGFuYFxuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IG1heC1jb250ZW50O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5gXG4iXX0= */"),
   width: (width, place) => /*#__PURE__*/css("width:", width, "!important;left:", place === 'top' || place === 'bottom' ? `calc((-${width} / 2) + 9px) !important` : place === 'right' ? '35px' : 'initial', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:width;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0luZm9CdXR0b24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlHOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvSW5mb0J1dHRvbi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgbWFyZ2luLWxlZnQ6IDVweDtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IDFweCBkb3R0ZWQgIzIxMjEyMTtcbiAgICBvdXRsaW5lOiA1cHggYXV0byAtd2Via2l0LWZvY3VzLXJpbmctY29sb3I7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogY3NzYFxuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgbWF4LXdpZHRoOiAzMDBweDtcbiAgYCxcbiAgdG9wOiBjc3NgXG4gICAgYm90dG9tOiBjYWxjKDI0cHggKyA1cHgpO1xuICAgIGxlZnQ6IGNhbGMoLTExdncgKyA5cHgpO1xuICAgIGJveC1zaGFkb3c6IDBweCAxcHggNHB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMik7XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgICBsZWZ0OiBjYWxjKC0yNXZ3ICsgOXB4KTtcbiAgICB9XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5sYXJnZX0pIGFuZCAob3JpZW50YXRpb246IGxhbmRzY2FwZSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgdG9wOiAxMDAlO1xuICAgICAgbGVmdDogNTAlO1xuICAgICAgbWFyZ2luLWxlZnQ6IC01cHg7XG4gICAgICBib3JkZXItY29sb3I6IHdoaXRlIHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50O1xuICAgIH1cbiAgYCxcbiAgcmlnaHQ6IGNzc2BcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMzVweDtcbiAgICBib3gtc2hhZG93OiAtMXB4IDBweCA0cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLmxhcmdlfSkgYW5kIChvcmllbnRhdGlvbjogbGFuZHNjYXBlKSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICAmOjphZnRlciB7XG4gICAgICB0b3A6IDhweDtcbiAgICAgIHJpZ2h0OiAxMDAlO1xuICAgICAgbWFyZ2luLWxlZnQ6IC01cHg7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHdoaXRlIHRyYW5zcGFyZW50IHRyYW5zcGFyZW50O1xuICAgIH1cbiAgYCxcbiAgYm90dG9tOiBjc3NgXG4gICAgdG9wOiBjYWxjKDI0cHggKyA1cHgpO1xuICAgIGxlZnQ6IGNhbGMoLTExdncgKyA5cHgpO1xuICAgIGJveC1zaGFkb3c6IDBweCAtMXB4IDRweCAwcHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5zbWFsbH0pIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgICAgbGVmdDogY2FsYygtMjV2dyArIDlweCk7XG4gICAgfVxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubGFyZ2V9KSBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgIH1cblxuICAgICY6OmFmdGVyIHtcbiAgICAgIGJvdHRvbTogMTAwJTtcbiAgICAgIGxlZnQ6IDUwJTtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtNXB4O1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB3aGl0ZSB0cmFuc3BhcmVudDtcbiAgICB9XG4gIGAsXG4gIGxlZnQ6IGNzc2BcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IGNhbGMoMjRweCArIDNweCk7XG4gICAgYm94LXNoYWRvdzogMXB4IDBweCA0cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5sYXJnZX0pIGFuZCAob3JpZW50YXRpb246IGxhbmRzY2FwZSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgdG9wOiA4cHg7XG4gICAgICBsZWZ0OiAxMDAlO1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB3aGl0ZTtcbiAgICB9XG4gIGAsXG4gIHdpZHRoOiAod2lkdGg6IHN0cmluZywgcGxhY2U6IHN0cmluZykgPT4gY3NzYFxuICAgIHdpZHRoOiAke3dpZHRofSAhaW1wb3J0YW50O1xuICAgIGxlZnQ6ICR7cGxhY2UgPT09ICd0b3AnIHx8IHBsYWNlID09PSAnYm90dG9tJ1xuICAgICAgPyBgY2FsYygoLSR7d2lkdGh9IC8gMikgKyA5cHgpICFpbXBvcnRhbnRgXG4gICAgICA6IHBsYWNlID09PSAncmlnaHQnXG4gICAgICA/ICczNXB4J1xuICAgICAgOiAnaW5pdGlhbCd9O1xuICBgLFxufVxuXG5leHBvcnQgY29uc3QgVG9vbHRpcCA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDIydnc7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgcGFkZGluZzogMC41ZW07XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICB6LWluZGV4OiA5OTk5O1xuXG4gICYudG9vbHRpcC1lbnRlciB7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOCk7XG4gIH1cbiAgJi50b29sdGlwLWVudGVyLWFjdGl2ZSB7XG4gICAgb3BhY2l0eTogMTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7XG4gICAgdHJhbnNpdGlvbjogb3BhY2l0eSA4MG1zLCB0cmFuc2Zvcm0gODBtcztcbiAgfVxuICAmLnRvb2x0aXAtZXhpdCB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuICAmLnRvb2x0aXAtZXhpdC1hY3RpdmUge1xuICAgIG9wYWNpdHk6IDA7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgwLjkpO1xuICAgIHRyYW5zaXRpb246IG9wYWNpdHkgODBtcywgdHJhbnNmb3JtIDgwbXM7XG4gIH1cblxuICAmOjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci13aWR0aDogNXB4O1xuICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuYFxuIl19 */")
 };
-export const Tooltip = _styled("div", process.env.NODE_ENV === "production" ? {
+export const Tooltip = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e169bjpw1"
 } : {
   target: "e169bjpw1",
@@ -49,7 +47,7 @@ export const Tooltip = _styled("div", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0luZm9CdXR0b24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJHaUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2NvcmUvSW5mb0J1dHRvbi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi9CdXR0b24nXG5cbmV4cG9ydCBjb25zdCBTdHlsZWRCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgbWFyZ2luLWxlZnQ6IDVweDtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IDFweCBkb3R0ZWQgIzIxMjEyMTtcbiAgICBvdXRsaW5lOiA1cHggYXV0byAtd2Via2l0LWZvY3VzLXJpbmctY29sb3I7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogY3NzYFxuICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgbWF4LXdpZHRoOiAzMDBweDtcbiAgYCxcbiAgdG9wOiBjc3NgXG4gICAgYm90dG9tOiBjYWxjKDI0cHggKyA1cHgpO1xuICAgIGxlZnQ6IGNhbGMoLTExdncgKyA5cHgpO1xuICAgIGJveC1zaGFkb3c6IDBweCAxcHggNHB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMik7XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgICBsZWZ0OiBjYWxjKC0yNXZ3ICsgOXB4KTtcbiAgICB9XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5sYXJnZX0pIGFuZCAob3JpZW50YXRpb246IGxhbmRzY2FwZSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgdG9wOiAxMDAlO1xuICAgICAgbGVmdDogNTAlO1xuICAgICAgbWFyZ2luLWxlZnQ6IC01cHg7XG4gICAgICBib3JkZXItY29sb3I6IHdoaXRlIHRyYW5zcGFyZW50IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50O1xuICAgIH1cbiAgYCxcbiAgcmlnaHQ6IGNzc2BcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMzVweDtcbiAgICBib3gtc2hhZG93OiAtMXB4IDBweCA0cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLmxhcmdlfSkgYW5kIChvcmllbnRhdGlvbjogbGFuZHNjYXBlKSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG5cbiAgICAmOjphZnRlciB7XG4gICAgICB0b3A6IDhweDtcbiAgICAgIHJpZ2h0OiAxMDAlO1xuICAgICAgbWFyZ2luLWxlZnQ6IC01cHg7XG4gICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50IHdoaXRlIHRyYW5zcGFyZW50IHRyYW5zcGFyZW50O1xuICAgIH1cbiAgYCxcbiAgYm90dG9tOiBjc3NgXG4gICAgdG9wOiBjYWxjKDI0cHggKyA1cHgpO1xuICAgIGxlZnQ6IGNhbGMoLTExdncgKyA5cHgpO1xuICAgIGJveC1zaGFkb3c6IDBweCAtMXB4IDRweCAwcHggcmdiYSgwLCAwLCAwLCAwLjIpO1xuXG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5zbWFsbH0pIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgICAgbGVmdDogY2FsYygtMjV2dyArIDlweCk7XG4gICAgfVxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubGFyZ2V9KSBhbmQgKG9yaWVudGF0aW9uOiBsYW5kc2NhcGUpIHtcbiAgICAgIHdpZHRoOiA1MHZ3O1xuICAgIH1cblxuICAgICY6OmFmdGVyIHtcbiAgICAgIGJvdHRvbTogMTAwJTtcbiAgICAgIGxlZnQ6IDUwJTtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtNXB4O1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB3aGl0ZSB0cmFuc3BhcmVudDtcbiAgICB9XG4gIGAsXG4gIGxlZnQ6IGNzc2BcbiAgICB0b3A6IDA7XG4gICAgcmlnaHQ6IGNhbGMoMjRweCArIDNweCk7XG4gICAgYm94LXNoYWRvdzogMXB4IDBweCA0cHggMHB4IHJnYmEoMCwgMCwgMCwgMC4yKTtcblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgICB3aWR0aDogNTB2dztcbiAgICB9XG4gICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5sYXJnZX0pIGFuZCAob3JpZW50YXRpb246IGxhbmRzY2FwZSkge1xuICAgICAgd2lkdGg6IDUwdnc7XG4gICAgfVxuXG4gICAgJjo6YWZ0ZXIge1xuICAgICAgdG9wOiA4cHg7XG4gICAgICBsZWZ0OiAxMDAlO1xuICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB0cmFuc3BhcmVudCB3aGl0ZTtcbiAgICB9XG4gIGAsXG4gIHdpZHRoOiAod2lkdGg6IHN0cmluZywgcGxhY2U6IHN0cmluZykgPT4gY3NzYFxuICAgIHdpZHRoOiAke3dpZHRofSAhaW1wb3J0YW50O1xuICAgIGxlZnQ6ICR7cGxhY2UgPT09ICd0b3AnIHx8IHBsYWNlID09PSAnYm90dG9tJ1xuICAgICAgPyBgY2FsYygoLSR7d2lkdGh9IC8gMikgKyA5cHgpICFpbXBvcnRhbnRgXG4gICAgICA6IHBsYWNlID09PSAncmlnaHQnXG4gICAgICA/ICczNXB4J1xuICAgICAgOiAnaW5pdGlhbCd9O1xuICBgLFxufVxuXG5leHBvcnQgY29uc3QgVG9vbHRpcCA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDIydnc7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgcGFkZGluZzogMC41ZW07XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICB6LWluZGV4OiA5OTk5O1xuXG4gICYudG9vbHRpcC1lbnRlciB7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuOCk7XG4gIH1cbiAgJi50b29sdGlwLWVudGVyLWFjdGl2ZSB7XG4gICAgb3BhY2l0eTogMTtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCk7XG4gICAgdHJhbnNpdGlvbjogb3BhY2l0eSA4MG1zLCB0cmFuc2Zvcm0gODBtcztcbiAgfVxuICAmLnRvb2x0aXAtZXhpdCB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuICAmLnRvb2x0aXAtZXhpdC1hY3RpdmUge1xuICAgIG9wYWNpdHk6IDA7XG4gICAgdHJhbnNmb3JtOiBzY2FsZSgwLjkpO1xuICAgIHRyYW5zaXRpb246IG9wYWNpdHkgODBtcywgdHJhbnNmb3JtIDgwbXM7XG4gIH1cblxuICAmOjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGJvcmRlci13aWR0aDogNXB4O1xuICAgIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuYFxuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const Wrapper = _styled("span", process.env.NODE_ENV === "production" ? {
+export const Wrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
   target: "e169bjpw0"
 } : {
   target: "e169bjpw0",

package/esm/core/Input/Input.stories.js

@@ -0,0 +1,158 @@
+import { action } from '@storybook/addon-actions';
+import Input from '.';
+const meta = {
+  title: 'Core/Input',
+  component: Input
+};
+export default meta;
+export const Default = {
+  args: {
+    type: 'text',
+    label: 'Label',
+    placeholder: 'Placeholder text'
+  },
+  name: 'Default'
+};
+export const Focused = {
+  args: {
+    type: 'text',
+    label: 'Focused',
+    placeholder: 'Placeholder text',
+    focus: true
+  },
+  name: 'Focused'
+};
+export const Disabled = {
+  args: {
+    type: 'text',
+    label: 'Disabled',
+    placeholder: 'Field disabled',
+    disabled: true
+  },
+  name: 'Disabled'
+};
+export const Passsword = {
+  args: {
+    type: 'password',
+    label: 'Inputfield - password',
+    placeholder: 'Password field',
+    value: 'Secret password'
+  },
+  name: 'Passsword'
+};
+export const Search = {
+  args: {
+    type: 'search',
+    highlight: true,
+    placeholder: 'Placeholder text'
+  },
+  name: 'Search'
+};
+export const Highlighted = {
+  args: {
+    type: 'text',
+    placeholder: 'Placeholder text',
+    highlight: true
+  },
+  name: 'Highlighted'
+};
+export const Reset = {
+  args: {
+    type: 'text',
+    value: 'should be empty',
+    placeholder: 'Placeholder text',
+    highlight: true,
+    reset: true
+  },
+  name: 'Reset'
+};
+export const WithDebounce = {
+  args: {
+    type: 'text',
+    value: '',
+    onDebounceChange: value => {
+      action('debounce callback..');
+      console.log('debounce callback..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    debounceDelay: 500
+  },
+  name: 'WithDebounce'
+};
+export const WithMaxlength = {
+  args: {
+    type: 'text',
+    value: '',
+    onChange: value => {
+      action('value changed..');
+      console.log('value changed..', value);
+    },
+    placeholder: 'Placeholder text',
+    highlight: true,
+    maxlength: 50
+  },
+  name: 'With maxlength'
+};
+export const Format = {
+  args: {
+    type: 'text',
+    value: '123123123',
+    placeholder: 'Start typing a price',
+    format: 'price'
+  },
+  name: 'Format'
+};
+export const Height = {
+  args: {
+    type: 'search',
+    height: '50px',
+    highlight: true
+  },
+  name: 'Height'
+};
+export const Info = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error'
+  },
+  name: 'Info'
+};
+export const CardInput = {
+  args: {
+    cardInput: true,
+    placeholder: 'Im styled as a card',
+    highlight: true,
+    type: 'search'
+  },
+  name: 'CardInput'
+};
+export const Controls = {
+  args: {
+    label: 'With info',
+    info: 'Hello, this is important information',
+    invalidMessage: 'error',
+    value: '',
+    name: '',
+    cardInput: false,
+    className: '',
+    debounceDelay: 500,
+    disabled: false,
+    focus: false,
+    format: undefined,
+    height: '',
+    invalid: false,
+    maxlength: undefined,
+    highlight: false,
+    infoPlacement: undefined,
+    placeholder: 'Hello',
+    reset: false,
+    type: 'text',
+    onChange: action('value changed..'),
+    onBlur: action('on blur..'),
+    onDebounceChange: action('on debounce change..'),
+    onFocus: action('on focus..')
+  },
+  name: 'Controls'
+};

package/esm/core/Input/index.js

@@ -23,44 +23,39 @@ const Input = /*#__PURE__*/React.forwardRef(({
   const [inputDirty, setInputDirty] = useState(false);
   const debouncedValue = useDebounce(value, debounceDelay ? debounceDelay : 0);
   const type = props.type ? props.type : 'text';
-
   const handleFormatting = val => {
     if (props.format === 'price' && val) {
       const value = val.replace(/\u00a0/g, '').replace(/ /g, '');
       return getFormattedPrice(value);
     }
-
     return val;
   };
-
   const onInputChange = e => {
     setInputDirty(true);
-
     if (props.format) {
       setValueChanged(handleFormatting(e.target.value));
     } else {
       setValueChanged(e.target.value);
     }
-
     if (props.onChange && !props.disabled) {
       props.onChange(e);
     }
   };
-
   useEffect(() => {
     if (props.reset) {
       setValueChanged('');
     }
-  }, [props.reset]); // Handle debounce
+  }, [props.reset]);
 
+  // Handle debounce
   useEffect(() => {
     const handleDebounceChange = value => {
       if (onDebounceChange && inputDirty) {
         onDebounceChange(value);
       }
     };
-
-    handleDebounceChange(debouncedValue); // eslint-disable-next-line react-hooks/exhaustive-deps
+    handleDebounceChange(debouncedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
   return _jsxs("div", {
     css: styles.relative,
@@ -88,7 +83,6 @@ const Input = /*#__PURE__*/React.forwardRef(({
           if (!child) {
             return null;
           }
-
           return child;
         })
       }), type === 'search' && _jsx(IconSearch, {}), props.invalidMessage && _jsx(IconErrorOutline, {

package/esm/core/Input/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("display:grid;grid-template-rows:min-content;&:focus-within span{color:", theme.primary, ";}span{line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px;}input{height:36px;width:calc(100% - 20px - 2px);font-size:16px;line-height:20px;outline:none;border-width:1px;border-radius:5px;border-style:solid;padding:0 10px;&:focus{border-color:", theme.primary, ";}&:disabled{background-color:", theme.disabled, ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0lucHV0L3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLTyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9JbnB1dC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1yb3dzOiBtaW4tY29udGVudDtcblxuICAgICAgJjpmb2N1cy13aXRoaW4gc3BhbiB7XG4gICAgICAgIGNvbG9yOiAke3RoZW1lLnByaW1hcnl9O1xuICAgICAgfVxuICAgICAgc3BhbiB7XG4gICAgICAgIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICAgICAgICBmb250LXNpemU6IDFlbTtcbiAgICAgICAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogNHB4O1xuICAgICAgfVxuICAgICAgaW5wdXQge1xuICAgICAgICBoZWlnaHQ6IDM2cHg7XG4gICAgICAgIHdpZHRoOiBjYWxjKDEwMCUgLSAyMHB4IC0gMnB4KTtcbiAgICAgICAgZm9udC1zaXplOiAxNnB4O1xuICAgICAgICBsaW5lLWhlaWdodDogMjBweDtcbiAgICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgICAgYm9yZGVyLXdpZHRoOiAxcHg7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgICAgICAgcGFkZGluZzogMCAxMHB4O1xuXG4gICAgICAgICY6Zm9jdXMge1xuICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5wcmltYXJ5fTtcbiAgICAgICAgfVxuICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmRpc2FibGVkfTtcbiAgICAgICAgfVxuICAgICAgICAmOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuICAgICAgICAmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcbiAgICAgICAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICB9XG4gICAgICAgICZbdHlwZT0nbnVtYmVyJ10ge1xuICAgICAgICAgIC1tb3otYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgYCxcbiAgaGlnaGxpZ3RlZDogKGhlaWdodD86IHN0cmluZykgPT4gY3NzYFxuICAgIGZvbnQtc2l6ZTogMThweDtcbiAgICAmIGlucHV0IHtcbiAgICAgIGhlaWdodDogJHtoZWlnaHQgPyBoZWlnaHQgOiAnNTBweCd9O1xuICAgICAgZm9udC1zaXplOiAxNnB4O1xuICAgIH1cbiAgICAmIGlucHV0W3R5cGU9J3NlYXJjaCddIHtcbiAgICAgIC13ZWJraXQtYXBwZWFyYW5jZTogdGV4dGZpZWxkO1xuICAgICAgaGVpZ2h0OiAke2hlaWdodCA/IGhlaWdodCA6ICc2MHB4J307XG4gICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICBib3gtc2hhZG93OiAwIDJweCA0cHggMCByZ2JhKDksIDI4LCA2OCwgMC4xKTtcbiAgICAgIGJvcmRlci1ib3R0b206IDA7XG4gICAgICBwYWRkaW5nOiAwIDE2cHg7XG4gICAgICBwYWRkaW5nLXJpZ2h0OiAzNXB4O1xuICAgICAgYm9yZGVyLXN0eWxlOiBub25lO1xuICAgICAgYm9yZGVyLXdpZHRoOiAwO1xuICAgIH1cbiAgYCxcbiAgbnVtYmVyOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDJweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG4gICAgYCxcbiAgdGV4dDogKHRoZW1lOiBJQXBwVGhlbWUpID0+XG4gICAgY3NzYFxuICAgICAgYm9yZGVyOiAycHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgcGFkZGluZy1sZWZ0OiAxMHB4O1xuICAgIGAsXG4gIHBhc3N3b3JkOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3Moe1xuICAgICAgYm9yZGVyOiAnMnB4IHNvbGlkICcgKyB0aGVtZS5ib3JkZXIsXG4gICAgICBib3JkZXJSYWRpdXM6ICczcHgnLFxuICAgICAgcGFkZGluZ0xlZnQ6ICcxMHB4JyxcbiAgICB9KSxcbiAgc2VhcmNoOiAodGhlbWU6IElBcHBUaGVtZSkgPT5cbiAgICBjc3NgXG4gICAgICBib3JkZXI6IDA7XG4gICAgICBib3JkZXItYm90dG9tOiAycHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgcGFkZGluZy1sZWZ0OiAwO1xuICAgICAgcGFkZGluZy1yaWdodDogMzVweDtcbiAgICAgICY6Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24sXG4gICAgICAmOjotd2Via2l0LXNlYXJjaC1jYW5jZWwtYnV0dG9uLFxuICAgICAgJjo6LXdlYmtpdC1zZWFyY2gtcmVzdWx0cy1idXR0b24sXG4gICAgICAmOjotd2Via2l0LXNlYXJjaC1yZXN1bHRzLWRlY29yYXRpb24ge1xuICAgICAgICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICB9XG4gICAgYCxcbiAgc2VhcmNoTGFiZWw6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgJiA+IGlucHV0IHtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgIH1cblxuICAgICYgPiBzdmcge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgcmlnaHQ6IDE2cHg7XG4gICAgICB0b3A6IGNhbGMoNTAlIC0gMTBweCk7XG4gICAgICBmaWxsOiAke3RoZW1lLnByaW1hcnl9ICFpbXBvcnRhbnQ7XG4gICAgfVxuICBgLFxuICBmaWxlOiBjc3NgYCxcbiAgZGlzYWJsZWQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PlxuICAgIGNzcyh7XG4gICAgICBjdXJzb3I6ICdub3QtYWxsb3dlZCcsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmRpc2FibGVkLFxuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLmRpc2FibGVkLFxuICAgIH0pLFxuICBjYXJkSW5wdXQ6IGNzcyh7XG4gICAgYm9yZGVyUmFkaXVzOiAnMzBweCcsXG4gICAgcGFkZGluZzogJzAgMjBweCcsXG4gICAgYm9yZGVyOiAnbm9uZScsXG5cbiAgICAnJjpmb2N1cyc6IHtcbiAgICAgIGJveFNoYWRvdzogJzAgMTBweCAyMHB4IDAgcmdiYSgxNiwgMTYsIDkwLCAwLjEpJyxcbiAgICB9LFxuICB9KSxcbiAgaW52YWxpZDogKHRoZW1lOiBJQXBwVGhlbWUpID0+IGNzc2BcbiAgICBpbnB1dCB7XG4gICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYWxlcnR9O1xuICAgICAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcblxuICAgICAgJjphY3RpdmUsXG4gICAgICAmOmZvY3VzLFxuICAgICAgJjpob3ZlciB7XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5hbGVydH07XG4gICAgICB9XG4gICAgfVxuXG4gICAgc3ZnIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogdW5zZXQ7XG4gICAgICByaWdodDogdW5zZXQ7XG4gICAgICBib3R0b206IDdweDtcbiAgICAgIGxlZnQ6IDNweDtcbiAgICAgIHBhdGgge1xuICAgICAgICBmaWxsOiAke3RoZW1lLmFsZXJ0fTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBzcGFuOm50aC1vZi10eXBlKDIpIHtcbiAgICAgIGxpbmUtaGVpZ2h0OiAzMHB4O1xuICAgICAgcGFkZGluZy1sZWZ0OiAyNXB4O1xuICAgICAgZm9udC1zaXplOiAxNHB4O1xuICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICB9XG5cbiAgICAmOmZvY3VzLXdpdGhpbiBzcGFuOm50aC1vZi10eXBlKDIpIHtcbiAgICAgIGNvbG9yOiAke3RoZW1lLmFsZXJ0fTtcbiAgICB9XG4gIGAsXG4gIGhlaWdodDogKGhlaWdodDogc3RyaW5nKSA9PiBjc3NgXG4gICAgJiA+IGlucHV0IHtcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9O1xuICAgIH1cbiAgYCxcbiAgZXJyb3JNZXNzYWdlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIGZvbnQtc2l6ZTogMTRweDtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG4gICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICBjb2xvcjogJHt0aGVtZS5hbGVydH07XG4gICAgZm9udC1zaXplOiAxNHB4O1xuICAgIGxpbmUtaGVpZ2h0OiAyMHB4O1xuICBgLFxuICBwcjQ6IGNzc2BcbiAgICBwYWRkaW5nLXJpZ2h0OiAyNXB4O1xuICBgLFxuICBpbmZvQnV0dG9uOiBjc3NgXG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHJpZ2h0OiAwO1xuICAgIHRvcDogMDtcblxuICAgIGJ1dHRvbiB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGhlaWdodDogMjRweDtcbiAgICB9XG4gIGAsXG4gIHJlbGF0aXZlOiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBgLFxufVxuXG5leHBvcnQgZGVmYXVsdCBzdHlsZXNcblxuZXhwb3J0IHsgc3R5bGVzIH1cbiJdfQ== */"),

package/esm/core/Link/Link.stories.js

@@ -0,0 +1,75 @@
+import Link from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Link',
+  component: Link
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    children: "Option"
+  }),
+  name: 'Default'
+};
+export const ButtonLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    onClick: () => console.log('hi'),
+    children: "Option"
+  }),
+  name: 'Button link'
+};
+export const NoStyle = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    nostyle: true,
+    children: "Unstyled link"
+  }),
+  name: 'No style'
+};
+export const ExternalLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    external: true,
+    children: "External link"
+  }),
+  name: 'External link'
+};
+export const TargetBlank = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    target: "_blank",
+    children: "Opens up new tab"
+  }),
+  name: 'Target blank'
+};
+export const DangerLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    danger: true,
+    children: "Danger link"
+  }),
+  name: 'Danger link'
+};
+export const DisabledLink = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    href: "#",
+    disabled: true,
+    children: "Danger link"
+  }),
+  name: 'Disabled link'
+};
+export const NoPadding = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    nopadding: true,
+    children: "No padding"
+  }),
+  name: 'No padding'
+};
+export const WordBreak = {
+  render: () => /*#__PURE__*/_jsx(Link, {
+    wordBreak: "break-word",
+    textAlign: "left",
+    children: "LangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtordLangtord"
+  }),
+  name: 'Word break'
+};

package/esm/core/Link/index.js

@@ -5,7 +5,6 @@ import IconExternalLink from '../../icons/General/IconExternalLink';
 import { IconLinkWrapper, NoStyle, LinkStyle, dangerStyles, noPadding, setAlign, smallText, underlineNone, setWordBreak, setDisabled } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Link = props => {
   const {
     disabled,
@@ -21,7 +20,8 @@ const Link = props => {
     wordBreak,
     ...restProps
   } = props;
-  return _jsx(ButtonOrLink, { ...restProps,
+  return _jsx(ButtonOrLink, {
+    ...restProps,
     disabled: disabled,
     css: theme => [nostyle ? NoStyle : LinkStyle, danger && dangerStyles(theme), disabled && setDisabled(theme), nopadding && noPadding, setAlign(textAlign), small && smallText, removeUnderline && underlineNone, wordBreak && setWordBreak(wordBreak)],
     ...(target && {
@@ -37,5 +37,4 @@ const Link = props => {
     }) : children
   });
 };
-
 export default Link;

package/esm/core/Link/styles.js

@@ -1,9 +1,7 @@
 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 IconLinkWrapper = _styled("span", process.env.NODE_ENV === "production" ? {
+export const IconLinkWrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
   target: "e1besegt0"
 } : {
   target: "e1besegt0",

package/esm/core/List/Item.js

@@ -1,8 +1,6 @@
 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)."; }
-
-const ListItem = _styled("li", process.env.NODE_ENV === "production" ? {
+const ListItem = /*#__PURE__*/_styled("li", process.env.NODE_ENV === "production" ? {
   target: "e8hjcxt0"
 } : {
   target: "e8hjcxt0",
@@ -16,5 +14,4 @@ const ListItem = _styled("li", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3QvSXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT21DIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0xpc3QvSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuaW50ZXJmYWNlIElQcm9wcyB7XG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IExpc3RJdGVtOiBSZWFjdC5GQzxJUHJvcHM+ID0gc3R5bGVkLmxpKHtcbiAgcGFkZGluZzogMCxcbn0pXG5cbmV4cG9ydCBkZWZhdWx0IExpc3RJdGVtXG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-
 export default ListItem;

package/esm/core/List/List.stories.js

@@ -0,0 +1,157 @@
+import List from '.';
+import ListItem from './Item';
+import Link from '../Link';
+import IconArrowRight from '../../icons/General/IconArrowRight';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Core/List',
+  component: List
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx("div", {
+    className: "wrapper",
+    style: {
+      maxWidth: '300px'
+    },
+    children: /*#__PURE__*/_jsxs(List, {
+      children: [/*#__PURE__*/_jsx(ListItem, {
+        children: "Item 1"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 2"
+      }), /*#__PURE__*/_jsx(ListItem, {
+        children: "Item 3"
+      })]
+    })
+  }),
+  name: 'Default'
+};
+export const ListWithLinks = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    links: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    })]
+  }),
+  name: 'List with links'
+};
+export const AlternativeListWithLinks = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    linksAlternate: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Item 1", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: /*#__PURE__*/_jsxs(Link, {
+        children: ["Lorem ipsum doro", /*#__PURE__*/_jsx(IconArrowRight, {
+          color: "#1657e2"
+        })]
+      })
+    })]
+  }),
+  name: 'Alternative list with links'
+};
+export const Pointlist = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    points: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Pointlist'
+};
+export const Numberedlist = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    numbers: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Numberedlist'
+};
+export const NumberedlistHighlighted = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    numbersHighlighted: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Numberedlist - Highlighted'
+};
+export const Darktheme = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    darkTheme: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Darktheme'
+};
+export const NostyleList = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    nostyle: true,
+    children: [/*#__PURE__*/_jsx(ListItem, {
+      children: "Item 1"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'Nostyle list'
+};
+export const WithPadding = {
+  render: () => /*#__PURE__*/_jsxs(List, {
+    padding: "0.5em",
+    rowHeight: "100%",
+    children: [/*#__PURE__*/_jsxs(ListItem, {
+      children: ["Item 1", /*#__PURE__*/_jsx("br", {}), "new line", /*#__PURE__*/_jsx("br", {}), "another new line"]
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 2"
+    }), /*#__PURE__*/_jsx(ListItem, {
+      children: "Item 3"
+    })]
+  }),
+  name: 'With padding'
+};