@bbl-digital/snorre 3.1.56 → 3.1.58

package/esm/core/Autocomplete/hooks/useHandleDimentions.js

@@ -1,5 +1,4 @@
 import { createRef, useEffect, useState } from 'react';
-
 const useHandleDimentions = () => {
   const [height, setHeight] = useState(0);
   const [width, setWidth] = useState(0);
@@ -7,7 +6,8 @@ const useHandleDimentions = () => {
   useEffect(() => {
     const rect = dimentionsRef.current?.getBoundingClientRect();
     setHeight(rect?.height || 0);
-    setWidth(rect?.width || 0); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setWidth(rect?.width || 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dimentionsRef.current]);
   return {
     height,
@@ -15,5 +15,4 @@ const useHandleDimentions = () => {
     dimentionsRef
   };
 };
-
 export default useHandleDimentions;

package/esm/core/Autocomplete/index.js

@@ -47,16 +47,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(({
       if (node && node.contains(e.target)) return;
       setShowValues(false);
     };
-
     if (showValues) {
       document.addEventListener('mousedown', handleClickOutside);
     } else {
       document.removeEventListener('mousedown', handleClickOutside);
     }
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showValues, valuesRef]);
   return _jsxs(_Fragment, {
     children: [_jsxs("label", {

package/esm/core/Autocomplete/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';

package/esm/core/Banner/Banner.stories.js

@@ -0,0 +1,68 @@
+import Banner from '.';
+import Header from '../Header';
+import Button from '../Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Banner',
+  component: Banner
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "Hello I am button"
+    }),
+    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+  }),
+  name: 'Default'
+};
+export const Success = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    success: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+  }),
+  name: 'Success'
+};
+export const Info = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    info: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Content"
+  }),
+  name: 'Info'
+};
+export const Danger = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    danger: true,
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    children: "Content"
+  }),
+  name: 'Danger'
+};
+export const WithoutChildren = {
+  render: () => /*#__PURE__*/_jsx(Banner, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Just a header"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "And a button"
+    })
+  }),
+  name: 'Without children'
+};

package/esm/core/Banner/index.js

@@ -4,7 +4,6 @@ import Alert from '../Alert';
 import { Content, LeftSide, RightSide, Wrapper } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Banner = ({
   children,
   danger,
@@ -31,5 +30,4 @@ const Banner = ({
     })
   });
 };
-
 export default Banner;

package/esm/core/Banner/styles.js

@@ -1,21 +1,19 @@
 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 bp from '../../globals/styles/breakpoints';
-export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+export const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ec636p03"
 } : {
   target: "ec636p03",
   label: "Wrapper"
 })("display:flex;flex-direction:row;width:100%;justify-content:space-between;@media screen and (max-width: ", bp.small, "){flex-direction:column;text-align:center;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0Jhbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR2lDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0Jhbm5lci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICB3aWR0aDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvbnRlbnQgPSBzdHlsZWQuZGl2YGBcblxuZXhwb3J0IGNvbnN0IExlZnRTaWRlID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1yb3ctZ2FwOiAwLjVlbTtcblxuICBoMSxcbiAgaDIsXG4gIGgzLFxuICBoNCxcbiAgaDUge1xuICAgIGFsaWduLXNlbGY6IGNlbnRlcjtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgUmlnaHRTaWRlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLWxlZnQ6IDJlbTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIG1hcmdpbi10b3A6IDJlbTtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cblxuICBidXR0b24sXG4gIGEge1xuICAgIG1pbi13aWR0aDogMTY5cHg7XG4gIH1cbmBcbiJdfQ== */"));
-export const Content = _styled("div", process.env.NODE_ENV === "production" ? {
+export const Content = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ec636p02"
 } : {
   target: "ec636p02",
   label: "Content"
 })(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0Jhbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZWlDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0Jhbm5lci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCBicCBmcm9tICcuLi8uLi9nbG9iYWxzL3N0eWxlcy9icmVha3BvaW50cydcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICB3aWR0aDogMTAwJTtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAuc21hbGx9KSB7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvbnRlbnQgPSBzdHlsZWQuZGl2YGBcblxuZXhwb3J0IGNvbnN0IExlZnRTaWRlID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1yb3ctZ2FwOiAwLjVlbTtcblxuICBoMSxcbiAgaDIsXG4gIGgzLFxuICBoNCxcbiAgaDUge1xuICAgIGFsaWduLXNlbGY6IGNlbnRlcjtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgUmlnaHRTaWRlID0gc3R5bGVkLmRpdmBcbiAgbWFyZ2luLWxlZnQ6IDJlbTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgIG1hcmdpbi1sZWZ0OiAwO1xuICAgIG1hcmdpbi10b3A6IDJlbTtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cblxuICBidXR0b24sXG4gIGEge1xuICAgIG1pbi13aWR0aDogMTY5cHg7XG4gIH1cbmBcbiJdfQ== */");
-export const LeftSide = _styled("div", process.env.NODE_ENV === "production" ? {
+export const LeftSide = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ec636p01"
 } : {
   target: "ec636p01",
@@ -29,7 +27,7 @@ export const LeftSide = _styled("div", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0Jhbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJrQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9CYW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgYnAgZnJvbSAnLi4vLi4vZ2xvYmFscy9zdHlsZXMvYnJlYWtwb2ludHMnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgd2lkdGg6IDEwMCU7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcblxuICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLnNtYWxsfSkge1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB9XG5gXG5cbmV4cG9ydCBjb25zdCBDb250ZW50ID0gc3R5bGVkLmRpdmBgXG5cbmV4cG9ydCBjb25zdCBMZWZ0U2lkZSA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtcm93LWdhcDogMC41ZW07XG5cbiAgaDEsXG4gIGgyLFxuICBoMyxcbiAgaDQsXG4gIGg1IHtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U2lkZSA9IHN0eWxlZC5kaXZgXG4gIG1hcmdpbi1sZWZ0OiAyZW07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogJHticC5zbWFsbH0pIHtcbiAgICBtYXJnaW4tbGVmdDogMDtcbiAgICBtYXJnaW4tdG9wOiAyZW07XG4gICAgYWxpZ24tc2VsZjogY2VudGVyO1xuICB9XG5cbiAgYnV0dG9uLFxuICBhIHtcbiAgICBtaW4td2lkdGg6IDE2OXB4O1xuICB9XG5gXG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const RightSide = _styled("div", process.env.NODE_ENV === "production" ? {
+export const RightSide = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ec636p00"
 } : {
   target: "ec636p00",

package/esm/core/BarAndLineComposedChart/BarAndLineComposedChart.stories.js

@@ -0,0 +1,94 @@
+import BarAndLineComposedChart from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/BarAndLineComposedChart',
+  component: BarAndLineComposedChart
+};
+const DefaultData = [{
+  name: 'Jan',
+  inntekt: 40000,
+  kostnad: -23000,
+  akkumulert: 17000
+}, {
+  name: 'Feb',
+  inntekt: 60000,
+  kostnad: -25000,
+  akkumulert: 35000
+}, {
+  name: 'Mars',
+  inntekt: 50000,
+  kostnad: -34000,
+  akkumulert: 16000
+}, {
+  name: 'April',
+  inntekt: 55000,
+  kostnad: -20000,
+  akkumulert: 35000
+}, {
+  name: 'Mai',
+  inntekt: 54400,
+  kostnad: -30000,
+  akkumulert: 24400
+}, {
+  name: 'Jun',
+  inntekt: 65000,
+  kostnad: -25000,
+  akkumulert: 40000
+}, {
+  name: 'Jul',
+  inntekt: 43000,
+  kostnad: -30000,
+  akkumulert: 13000
+}, {
+  name: 'Aug',
+  inntekt: 60000,
+  kostnad: -40000,
+  akkumulert: 20000
+}, {
+  name: 'Sept',
+  inntekt: 70000,
+  kostnad: -50000,
+  akkumulert: 20000
+}, {
+  name: 'Okt',
+  inntekt: 60000,
+  kostnad: -34000,
+  akkumulert: 26000
+}, {
+  name: 'Nov',
+  inntekt: 40040,
+  kostnad: -24000,
+  akkumulert: 16040
+}, {
+  name: 'Des',
+  inntekt: 56000,
+  kostnad: -5500,
+  akkumulert: 50500
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarAndLineComposedChart, {
+    data: DefaultData,
+    bars: [{
+      name: 'Inntekt',
+      dataKey: 'inntekt',
+      fill: theme.primary
+    }, {
+      name: 'Kostnad',
+      dataKey: 'kostnad',
+      fill: theme.primary5darker
+    }],
+    lines: [{
+      name: 'Akkumulert resultat',
+      dataKey: 'akkumulert',
+      stroke: theme.secondary,
+      type: 'monotone',
+      shortName: 'Akk. resultat'
+    }],
+    xAxisDataKey: "name"
+  }),
+  name: 'Default'
+};

package/esm/core/BarAndLineComposedChart/index.js

@@ -6,7 +6,6 @@ import { formatAxisPrice } from '../../utils/formatGraphPrice';
 import { BarAndLineComposedChartContainer } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const BarAndLineComposedChart = ({
   data = [],
   bars,
@@ -97,5 +96,4 @@ const BarAndLineComposedChart = ({
     })
   });
 };
-
 export default BarAndLineComposedChart;

package/esm/core/BarAndLineComposedChart/styles.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-export const BarAndLineComposedChartContainer = _styled("div", process.env.NODE_ENV === "production" ? {
+export const BarAndLineComposedChartContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e15fv7zs0"
 } : {
   target: "e15fv7zs0",

package/esm/core/BarChartWithCustomizedEvent/BarChartWithCustomizedEvent.stories.js

@@ -0,0 +1,80 @@
+import BarChartWithCustomizedEvent from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/BarChartWithCustomizedEvent',
+  component: BarChartWithCustomizedEvent
+};
+export const BarChartCustomizedEventData = [{
+  year: 2020,
+  debt: 2500700,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2021,
+  debt: 1950000,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2022,
+  debt: 1600000,
+  interestRates: 12000,
+  deduction: 140000
+}, {
+  year: 2023,
+  debt: 1400000,
+  interestRates: 12000,
+  deduction: 140400
+}, {
+  year: 2024,
+  debt: 1100000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2025,
+  debt: 1000000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2026,
+  debt: 900000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2027,
+  debt: 750000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2028,
+  debt: 500000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2029,
+  debt: 300000,
+  interestRates: 12000,
+  deduction: 14000
+}, {
+  year: 2030,
+  debt: 150000,
+  interestRates: 12000,
+  deduction: 14000
+}];
+export const Default = {
+  render: (_args, {
+    loaded: {
+      theme
+    }
+  }) => /*#__PURE__*/_jsx(BarChartWithCustomizedEvent, {
+    data: BarChartCustomizedEventData,
+    bars: [{
+      name: 'Restgjeld',
+      dataKey: 'debt',
+      fill: theme.primary
+    }],
+    xAxisDataKey: "year",
+    selectedIndex: 0,
+    onClickBar: v => console.log('onClickBar', v)
+  }),
+  name: 'Default'
+};

package/esm/core/BarChartWithCustomizedEvent/index.js

@@ -31,10 +31,8 @@ export const BarChartWithCustomizedEvent = ({
 }) => {
   const theme = useTheme();
   const [hoverIndex, setHoverIndex] = useState(undefined);
-
   const handleBarClick = (_, index) => {
     const identicalIndex = index === selectedIndex;
-
     if (onClickBar && !identicalIndex) {
       onClickBar({
         data: data[index],
@@ -42,7 +40,6 @@ export const BarChartWithCustomizedEvent = ({
       });
     }
   };
-
   return /*#__PURE__*/_jsx(CustomEventBarChartContainer, {
     width: width && width,
     height: height && height,

package/esm/core/BarChartWithCustomizedEvent/styles.js

@@ -1,6 +1,6 @@
 import _styled from "@emotion/styled/base";
 import { css } from '@emotion/react';
-export const CustomEventBarChartContainer = _styled("div", process.env.NODE_ENV === "production" ? {
+export const CustomEventBarChartContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "etqd4lk0"
 } : {
   target: "etqd4lk0",

package/esm/core/Box/Box.stories.js

@@ -0,0 +1,89 @@
+import Header from '../Header';
+import Box from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Core/Box',
+  component: Box
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    children: "Stuff"
+  }),
+  name: 'Default'
+};
+export const Collapsable = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    children: "Stuff"
+  }),
+  name: 'Collapsable'
+};
+export const Rounded = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    type: "mysite",
+    children: "Stuff"
+  }),
+  name: 'Rounded'
+};
+export const WithHeader = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    children: "Stuff"
+  }),
+  name: 'With header'
+};
+export const WithHeaderAndCollapse = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    children: "Stuff"
+  }),
+  name: 'With header and collapse'
+};
+export const CollapsableMysite = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    collapsable: true,
+    type: "mysite",
+    children: "Stuff"
+  }),
+  name: 'Collapsable mysite'
+};
+export const Noshadow = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    noshadow: true,
+    children: "Stuff"
+  }),
+  name: 'Noshadow'
+};
+export const Background = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    background: "#ececec",
+    children: "Stuff"
+  }),
+  name: 'Background'
+};
+export const HideContent = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Header"
+    }),
+    hideContent: true,
+    children: "Content"
+  }),
+  name: 'Hide content'
+};

package/esm/core/Box/index.js

@@ -6,7 +6,6 @@ import IconPlus from '../../icons/General/IconPlus';
 import IconChevronDown from '../../icons/General/IconChevronDown';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-
 const Box = ({
   header,
   collapsable,
@@ -26,11 +25,9 @@ const Box = ({
   useEffect(() => {
     if (handleOpenState !== undefined) setIsOpen(handleOpenState);
   }, [handleOpenState]);
-
   const onCollapseIconClicked = e => {
     setIsOpen(!isOpen);
   };
-
   const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {}) : _jsx(IconPlus, {}) : _jsx(IconChevronDown, {
     flipVertical: isOpen,
     size: "14px"
@@ -56,5 +53,4 @@ const Box = ({
     })]
   });
 };
-
 export default Box;

package/esm/core/Box/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';
 const styles = {
@@ -18,8 +16,7 @@ const styles = {
   },
   background: bg => /*#__PURE__*/css("background:", bg, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:background;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJpQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Cb3gvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vQnV0dG9uJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmZmZmO1xuICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuXG4gICAgJiA+IGJ1dHRvbiB7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgYCxcbiAgbXlzaXRlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIHBhZGRpbmc6IDAuNWVtIDA7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBib3gtc2hhZG93OiAke3RoZW1lLnNoYWRvd1NtYWxsRGFya2VyfTtcbiAgYCxcbiAgbm9zaGFkb3c6IGNzc2BcbiAgICBib3gtc2hhZG93OiBub25lO1xuICBgLFxuICBiYWNrZ3JvdW5kOiAoYmc6IHN0cmluZykgPT4gY3NzYFxuICAgIGJhY2tncm91bmQ6ICR7Ymd9O1xuICBgLFxufVxuXG5jb25zdCBIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvcmRlcjogYm9vbGVhbiB9KSA9PiBgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMXJlbSAxLjVyZW07XG4gIGJvcmRlci1ib3R0b206ICR7cHJvcHMuYm9yZGVyID8gJzFweCBzb2xpZCAjZDdkN2Q3JyA6ICdub25lJ307XG5cbiAgc3ZnIHtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cbmBcbilcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMS41cmVtO1xuYFxuXG5jb25zdCBDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuXG5leHBvcnQgeyBzdHlsZXMsIEhlYWRlcldyYXBwZXIsIENvbnRlbnRXcmFwcGVyLCBDb2xsYXBzZUJ1dHRvbiB9XG4iXX0= */")
 };
-
-const HeaderWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+const HeaderWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ez14oqn2"
 } : {
   target: "ez14oqn2",
@@ -34,8 +31,7 @@ const HeaderWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
     align-self: center;
   }
 `, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEJzQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Cb3gvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vQnV0dG9uJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmZmZmO1xuICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuXG4gICAgJiA+IGJ1dHRvbiB7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgYCxcbiAgbXlzaXRlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIHBhZGRpbmc6IDAuNWVtIDA7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBib3gtc2hhZG93OiAke3RoZW1lLnNoYWRvd1NtYWxsRGFya2VyfTtcbiAgYCxcbiAgbm9zaGFkb3c6IGNzc2BcbiAgICBib3gtc2hhZG93OiBub25lO1xuICBgLFxuICBiYWNrZ3JvdW5kOiAoYmc6IHN0cmluZykgPT4gY3NzYFxuICAgIGJhY2tncm91bmQ6ICR7Ymd9O1xuICBgLFxufVxuXG5jb25zdCBIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvcmRlcjogYm9vbGVhbiB9KSA9PiBgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMXJlbSAxLjVyZW07XG4gIGJvcmRlci1ib3R0b206ICR7cHJvcHMuYm9yZGVyID8gJzFweCBzb2xpZCAjZDdkN2Q3JyA6ICdub25lJ307XG5cbiAgc3ZnIHtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cbmBcbilcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMS41cmVtO1xuYFxuXG5jb25zdCBDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuXG5leHBvcnQgeyBzdHlsZXMsIEhlYWRlcldyYXBwZXIsIENvbnRlbnRXcmFwcGVyLCBDb2xsYXBzZUJ1dHRvbiB9XG4iXX0= */");
-
-const ContentWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+const ContentWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ez14oqn1"
 } : {
   target: "ez14oqn1",
@@ -49,7 +45,6 @@ const ContentWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkNpQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Cb3gvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vQnV0dG9uJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmZmZmO1xuICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuXG4gICAgJiA+IGJ1dHRvbiB7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgYCxcbiAgbXlzaXRlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIHBhZGRpbmc6IDAuNWVtIDA7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBib3gtc2hhZG93OiAke3RoZW1lLnNoYWRvd1NtYWxsRGFya2VyfTtcbiAgYCxcbiAgbm9zaGFkb3c6IGNzc2BcbiAgICBib3gtc2hhZG93OiBub25lO1xuICBgLFxuICBiYWNrZ3JvdW5kOiAoYmc6IHN0cmluZykgPT4gY3NzYFxuICAgIGJhY2tncm91bmQ6ICR7Ymd9O1xuICBgLFxufVxuXG5jb25zdCBIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvcmRlcjogYm9vbGVhbiB9KSA9PiBgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMXJlbSAxLjVyZW07XG4gIGJvcmRlci1ib3R0b206ICR7cHJvcHMuYm9yZGVyID8gJzFweCBzb2xpZCAjZDdkN2Q3JyA6ICdub25lJ307XG5cbiAgc3ZnIHtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cbmBcbilcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMS41cmVtO1xuYFxuXG5jb25zdCBDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuXG5leHBvcnQgeyBzdHlsZXMsIEhlYWRlcldyYXBwZXIsIENvbnRlbnRXcmFwcGVyLCBDb2xsYXBzZUJ1dHRvbiB9XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-
 const CollapseButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "ez14oqn0"
 } : {
@@ -64,6 +59,5 @@ const CollapseButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "pr
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0JveC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0RxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9Cb3gvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vQnV0dG9uJ1xuXG5jb25zdCBzdHlsZXMgPSB7XG4gIGRlZmF1bHQ6ICh0aGVtZTogSUFwcFRoZW1lKSA9PiBjc3NgXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICBiYWNrZ3JvdW5kOiAjZmZmZmZmO1xuICAgIGJveC1zaGFkb3c6ICR7dGhlbWUuc2hhZG93U21hbGx9O1xuXG4gICAgJiA+IGJ1dHRvbiB7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbiAgYCxcbiAgbXlzaXRlOiAodGhlbWU6IElBcHBUaGVtZSkgPT4gY3NzYFxuICAgIHBhZGRpbmc6IDAuNWVtIDA7XG4gICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICBib3gtc2hhZG93OiAke3RoZW1lLnNoYWRvd1NtYWxsRGFya2VyfTtcbiAgYCxcbiAgbm9zaGFkb3c6IGNzc2BcbiAgICBib3gtc2hhZG93OiBub25lO1xuICBgLFxuICBiYWNrZ3JvdW5kOiAoYmc6IHN0cmluZykgPT4gY3NzYFxuICAgIGJhY2tncm91bmQ6ICR7Ymd9O1xuICBgLFxufVxuXG5jb25zdCBIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdihcbiAgKHByb3BzOiB7IGJvcmRlcjogYm9vbGVhbiB9KSA9PiBgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMXJlbSAxLjVyZW07XG4gIGJvcmRlci1ib3R0b206ICR7cHJvcHMuYm9yZGVyID8gJzFweCBzb2xpZCAjZDdkN2Q3JyA6ICdub25lJ307XG5cbiAgc3ZnIHtcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XG4gIH1cbmBcbilcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMS41cmVtO1xuYFxuXG5jb25zdCBDb2xsYXBzZUJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBkaXNwbGF5OiBibG9jaztcbiAgd2lkdGg6IDEwMCU7XG5gXG5cbmV4cG9ydCBkZWZhdWx0IHN0eWxlc1xuXG5leHBvcnQgeyBzdHlsZXMsIEhlYWRlcldyYXBwZXIsIENvbnRlbnRXcmFwcGVyLCBDb2xsYXBzZUJ1dHRvbiB9XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-
 export default styles;
 export { styles, HeaderWrapper, ContentWrapper, CollapseButton };