@bbl-digital/snorre 4.2.74 → 4.2.75

package/lib/layout/Menu/Sidemenu.stories.js

@@ -1,333 +1,37 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MenuDefault = exports.LightThemeCollapsed = exports.LightTheme = exports.Collapsed = void 0;
-var _ = _interopRequireDefault(require("."));
-var _MenuTop = _interopRequireDefault(require("./MenuTop"));
-var _MainMenu = _interopRequireDefault(require("./MainMenu"));
-var _AppPicker = _interopRequireDefault(require("./AppPicker"));
-var _SecondaryMenu = _interopRequireDefault(require("./SecondaryMenu"));
-var _MenuItem = _interopRequireDefault(require("./MenuItem"));
-var _SecondaryMenuItem = _interopRequireDefault(require("./SecondaryMenuItem"));
-var _MenuSpacer = _interopRequireDefault(require("./MenuSpacer"));
-var _IconProfile = _interopRequireDefault(require("../../icons/General/IconProfile"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Layout/Menu',
-  component: _.default,
-  parameters: {
-    docs: {
-      story: {
-        height: '100vh'
-      }
-    }
-  }
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Menu from '.';
+import MenuTop from './MenuTop';
+import MainMenu from './MainMenu';
+import AppPicker from './AppPicker';
+import SecondaryMenu from './SecondaryMenu';
+import MenuItem from './MenuItem';
+import SecondaryMenuItem from './SecondaryMenuItem';
+import MenuSpacer from './MenuSpacer';
+import IconProfile from '../../icons/General/IconProfile';
+export default {
+    title: 'Layout/Menu',
+    component: Menu,
+    parameters: {
+        docs: {
+            story: {
+                height: '100vh',
+            },
+        },
+    },
 };
-const MenuDefault = exports.MenuDefault = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    open: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuTop.default, {
-      small: false,
-      logo: "",
-      onLogoClick: () => console.log('home'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        lightTheme: true,
-        small: false,
-        selected: true,
-        label: "App 1",
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-          size: "30px"
-        }),
-        href: "#"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        lightTheme: true,
-        small: false,
-        label: "App 2",
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {}),
-        href: "#"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuSpacer.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MainMenu.default, {
-        small: false,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 1 click'),
-          small: false,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 2 click'),
-          small: false,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 3 click'),
-          small: false,
-          label: "Item 3",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 4 click'),
-          small: false,
-          label: "Item 4",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 5 click'),
-          small: false,
-          label: "Item 5",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 6 click'),
-          small: false,
-          label: "Item 6",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SecondaryMenu.default, {
-        small: false,
-        onMenuToggle: e => console.log('Toggle'),
-        label: "KLG BBL",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenuItem.default, {
-          href: "#",
-          label: "Link in new tab",
-          target: "_blank",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "20px"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenuItem.default, {
-          href: "#",
-          label: "Link in same tab",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "20px"
-          })
-        })]
-      })]
-    })]
-  }),
-  name: 'Menu'
+export const MenuDefault = {
+    render: () => (_jsxs(Menu, { open: true, children: [_jsxs(MenuTop, { small: false, logo: "", onLogoClick: () => console.log('home'), children: [_jsx(AppPicker, { lightTheme: true, small: false, selected: true, label: "App 1", icon: _jsx(IconProfile, { size: "30px" }), href: "#" }), _jsx(AppPicker, { lightTheme: true, small: false, label: "App 2", icon: _jsx(IconProfile, {}), href: "#" })] }), _jsxs(MenuSpacer, { children: [_jsxs(MainMenu, { small: false, children: [_jsx(MenuItem, { onClick: () => console.log('item 1 click'), small: false, label: "Item 1", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: true }), _jsx(MenuItem, { onClick: () => console.log('item 2 click'), small: false, label: "Item 1", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false }), _jsx(MenuItem, { onClick: () => console.log('item 3 click'), small: false, label: "Item 3", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false }), _jsx(MenuItem, { onClick: () => console.log('item 4 click'), small: false, label: "Item 4", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false }), _jsx(MenuItem, { onClick: () => console.log('item 5 click'), small: false, label: "Item 5", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false }), _jsx(MenuItem, { onClick: () => console.log('item 6 click'), small: false, label: "Item 6", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false })] }), _jsxs(SecondaryMenu, { small: false, onMenuToggle: (e) => console.log('Toggle'), label: "KLG BBL", children: [_jsx(SecondaryMenuItem, { href: "#", label: "Link in new tab", target: "_blank", icon: _jsx(IconProfile, { color: "white", size: "20px" }) }), _jsx(SecondaryMenuItem, { href: "#", label: "Link in same tab", icon: _jsx(IconProfile, { color: "white", size: "20px" }) })] })] })] })),
+    name: 'Menu',
 };
-const Collapsed = exports.Collapsed = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    open: false,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuTop.default, {
-      small: true,
-      logo: "",
-      onLogoClick: () => console.log('home'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        lightTheme: false,
-        small: true,
-        selected: true,
-        href: "#",
-        label: "App 1",
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-          size: "30px"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        label: "",
-        lightTheme: false,
-        small: true,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {}),
-        href: "#"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuSpacer.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MainMenu.default, {
-        small: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 1 click'),
-          small: true,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 2 click'),
-          small: true,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "14px"
-          }),
-          lightTheme: false,
-          active: false
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenu.default, {
-        small: true,
-        onMenuToggle: e => console.log('Toggle'),
-        label: "KLG BBL",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenuItem.default, {
-          href: "#",
-          label: "Link",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "20px"
-          })
-        })
-      })]
-    })]
-  }),
-  name: 'Collapsed'
+export const Collapsed = {
+    render: () => (_jsxs(Menu, { open: false, children: [_jsxs(MenuTop, { small: true, logo: "", onLogoClick: () => console.log('home'), children: [_jsx(AppPicker, { lightTheme: false, small: true, selected: true, href: "#", label: "App 1", icon: _jsx(IconProfile, { size: "30px" }) }), _jsx(AppPicker, { label: "", lightTheme: false, small: true, icon: _jsx(IconProfile, {}), href: "#" })] }), _jsxs(MenuSpacer, { children: [_jsxs(MainMenu, { small: true, children: [_jsx(MenuItem, { onClick: () => console.log('item 1 click'), small: true, label: "Item 1", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: true }), _jsx(MenuItem, { onClick: () => console.log('item 2 click'), small: true, label: "Item 1", icon: _jsx(IconProfile, { color: "white", size: "14px" }), lightTheme: false, active: false })] }), _jsx(SecondaryMenu, { small: true, onMenuToggle: (e) => console.log('Toggle'), label: "KLG BBL", children: _jsx(SecondaryMenuItem, { href: "#", label: "Link", icon: _jsx(IconProfile, { color: "white", size: "20px" }) }) })] })] })),
+    name: 'Collapsed',
 };
-const LightTheme = exports.LightTheme = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    open: true,
-    lightTheme: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuTop.default, {
-      small: false,
-      logo: "",
-      onLogoClick: () => console.log('home'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        small: false,
-        href: "#",
-        lightTheme: true,
-        label: "Portalen",
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        small: false,
-        lightTheme: true,
-        label: "Min side",
-        href: "#",
-        selected: true,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-          size: "30px"
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuSpacer.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MainMenu.default, {
-        small: false,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 1 click'),
-          small: false,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            size: "14px"
-          }),
-          lightTheme: true,
-          active: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 2 click'),
-          small: false,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            size: "14px"
-          }),
-          lightTheme: true,
-          active: false
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenu.default, {
-        small: false,
-        lightTheme: true,
-        onMenuToggle: e => console.log('Toggle'),
-        label: "KLG BBL",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenuItem.default, {
-          lightTheme: true,
-          href: "#",
-          label: "Link",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            size: "20px"
-          })
-        })
-      })]
-    })]
-  }),
-  name: 'Light theme'
+export const LightTheme = {
+    render: () => (_jsxs(Menu, { open: true, lightTheme: true, children: [_jsxs(MenuTop, { small: false, logo: "", onLogoClick: () => console.log('home'), children: [_jsx(AppPicker, { small: false, href: "#", lightTheme: true, label: "Portalen", icon: _jsx(IconProfile, {}) }), _jsx(AppPicker, { small: false, lightTheme: true, label: "Min side", href: "#", selected: true, icon: _jsx(IconProfile, { size: "30px" }) })] }), _jsxs(MenuSpacer, { children: [_jsxs(MainMenu, { small: false, children: [_jsx(MenuItem, { onClick: () => console.log('item 1 click'), small: false, label: "Item 1", icon: _jsx(IconProfile, { size: "14px" }), lightTheme: true, active: true }), _jsx(MenuItem, { onClick: () => console.log('item 2 click'), small: false, label: "Item 1", icon: _jsx(IconProfile, { size: "14px" }), lightTheme: true, active: false })] }), _jsx(SecondaryMenu, { small: false, lightTheme: true, onMenuToggle: (e) => console.log('Toggle'), label: "KLG BBL", children: _jsx(SecondaryMenuItem, { lightTheme: true, href: "#", label: "Link", icon: _jsx(IconProfile, { size: "20px" }) }) })] })] })),
+    name: 'Light theme',
+};
+export const LightThemeCollapsed = {
+    render: () => (_jsxs(Menu, { open: false, lightTheme: true, children: [_jsxs(MenuTop, { small: true, logo: "", onLogoClick: () => console.log('home'), children: [_jsx(AppPicker, { label: "", small: true, lightTheme: true, icon: _jsx(IconProfile, {}), href: "#" }), _jsx(AppPicker, { small: true, lightTheme: true, selected: true, label: "App 2", icon: _jsx(IconProfile, { size: "30px" }), href: "#" })] }), _jsxs(MenuSpacer, { children: [_jsxs(MainMenu, { small: true, children: [_jsx(MenuItem, { onClick: () => console.log('item 1 click'), small: true, label: "Item 1", icon: _jsx(IconProfile, { size: "14px" }), lightTheme: true, active: true }), _jsx(MenuItem, { onClick: () => console.log('item 2 click'), small: true, label: "Item 1", icon: _jsx(IconProfile, { size: "14px" }), lightTheme: true, active: false })] }), _jsx(SecondaryMenu, { small: true, lightTheme: true, onMenuToggle: (e) => console.log('Toggle'), label: "KLG BBL", children: _jsx(SecondaryMenuItem, { lightTheme: true, href: "#", label: "Link", icon: _jsx(IconProfile, { color: "white", size: "20px" }) }) })] })] })),
+    name: 'Light theme collapsed',
 };
-const LightThemeCollapsed = exports.LightThemeCollapsed = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    open: false,
-    lightTheme: true,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuTop.default, {
-      small: true,
-      logo: "",
-      onLogoClick: () => console.log('home'),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        label: "",
-        small: true,
-        lightTheme: true,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {}),
-        href: "#"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppPicker.default, {
-        small: true,
-        lightTheme: true,
-        selected: true,
-        label: "App 2",
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-          size: "30px"
-        }),
-        href: "#"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuSpacer.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MainMenu.default, {
-        small: true,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 1 click'),
-          small: true,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            size: "14px"
-          }),
-          lightTheme: true,
-          active: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-          onClick: () => console.log('item 2 click'),
-          small: true,
-          label: "Item 1",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            size: "14px"
-          }),
-          lightTheme: true,
-          active: false
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenu.default, {
-        small: true,
-        lightTheme: true,
-        onMenuToggle: e => console.log('Toggle'),
-        label: "KLG BBL",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SecondaryMenuItem.default, {
-          lightTheme: true,
-          href: "#",
-          label: "Link",
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconProfile.default, {
-            color: "white",
-            size: "20px"
-          })
-        })
-      })]
-    })]
-  }),
-  name: 'Light theme collapsed'
-};

package/lib/layout/Menu/index.d.ts

@@ -9,4 +9,3 @@ interface IProps {
 }
 declare const Menu: React.FC<IProps>;
 export default Menu;
-//# sourceMappingURL=index.d.ts.map

package/lib/layout/Menu/index.js

@@ -1,25 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
-var _react2 = require("@emotion/react");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Menu = ({
-  lightTheme,
-  open,
-  children
-}) => {
-  const theme = (0, _react2.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Wrapper, {
-    lightTheme: Boolean(lightTheme),
-    open: open,
-    theme: theme,
-    children: children
-  });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Wrapper } from './styles';
+import { useTheme } from '@emotion/react';
+const Menu = ({ lightTheme, open, children }) => {
+    const theme = useTheme();
+    return (_jsx(Wrapper, { lightTheme: Boolean(lightTheme), open: open, theme: theme, children: children }));
 };
-var _default = exports.default = Menu;
+export default Menu;

package/lib/layout/Menu/styles.d.ts

@@ -9,4 +9,3 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     as?: React.ElementType;
 } & IProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};
-//# sourceMappingURL=styles.d.ts.map

package/lib/layout/Menu/styles.js

@@ -1,16 +1,30 @@
-"use strict";
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import bp from '../../globals/styles/breakpoints';
+export const Wrapper = styled.div((props) => css `
+    position: fixed;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+    background: ${props.lightTheme
+    ? props.theme.lightMenuBackground
+    : props.theme.defaultMenuBackground};
+    width: ${props.open ? '250px' : '56px'};
+    height: calc(100vh - 20px);
+    box-shadow: 2px 0 20px 0 rgba(0, 0, 0, 0.05);
+    z-index: 90;
+    padding-top: 20px;
+    transition: width 0.2s ease-in-out;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-var _breakpoints = _interopRequireDefault(require("../../globals/styles/breakpoints"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Wrapper = exports.Wrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ee20b9p0"
-} : {
-  target: "ee20b9p0",
-  label: "Wrapper"
-})(props => /*#__PURE__*/(0, _react.css)("position:fixed;display:flex;justify-content:flex-start;align-items:center;flex-direction:column;overflow:hidden;background:", props.lightTheme ? props.theme.lightMenuBackground : props.theme.defaultMenuBackground, ";width:", props.open ? '250px' : '56px', ";height:calc(100vh - 20px);box-shadow:2px 0 20px 0 rgba(0, 0, 0, 0.05);z-index:90;padding-top:20px;transition:width 0.2s ease-in-out;@media screen and (max-width: ", _breakpoints.default.medium, "){padding:0;position:unset;display:block;overflow:unset;overflow-x:scroll;width:100%;height:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;")));
+    @media screen and (max-width: ${bp.medium}) {
+      padding: 0;
+      position: unset;
+      display: block;
+      overflow: unset;
+      overflow-x: scroll;
+      width: 100%;
+      height: 100%;
+    }
+  `);

package/lib/layout/Submenu/Submenu.stories.d.ts

@@ -2,27 +2,26 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const SubmenuDefault: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const Lighttheme: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const LightthemeIllustration: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const NoItems: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const NoItemsLight: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const CustomHeader: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
-//# sourceMappingURL=Submenu.stories.d.ts.map

package/lib/layout/Submenu/Submenu.stories.js

@@ -1,100 +1,35 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SubmenuDefault = exports.NoItemsLight = exports.NoItems = exports.LightthemeIllustration = exports.Lighttheme = exports.CustomHeader = void 0;
-var _ = _interopRequireDefault(require("."));
-var _SubmenuItem = _interopRequireDefault(require("./SubmenuItem"));
-var _IllustrationMySitePiggyBank = _interopRequireDefault(require("../../illustrations/MySite/IllustrationMySitePiggyBank"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Layout/Submenu',
-  component: _.default
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Submenu from '.';
+import SubmenuItem from './SubmenuItem';
+import IllustrationMySitePiggyBank from '../../illustrations/MySite/IllustrationMySitePiggyBank';
+export default {
+    title: 'Layout/Submenu',
+    component: Submenu,
 };
-const SubmenuDefault = exports.SubmenuDefault = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    header: "Header",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "item 1",
-      active: true,
-      onClick: () => console.log('item click')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "item 2",
-      onClick: () => console.log('item click')
-    })]
-  }),
-  name: 'Submenu'
+export const SubmenuDefault = {
+    render: () => (_jsxs(Submenu, { header: "Header", children: [_jsx(SubmenuItem, { label: "item 1", active: true, onClick: () => console.log('item click') }), _jsx(SubmenuItem, { label: "item 2", onClick: () => console.log('item click') })] })),
+    name: 'Submenu',
 };
-const Lighttheme = exports.Lighttheme = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    lightTheme: true,
-    header: "Header",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 1",
-      lightTheme: true,
-      active: true,
-      onClick: () => console.log('item click')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 2",
-      lightTheme: true,
-      onClick: () => console.log('item click')
-    })]
-  }),
-  name: 'Lighttheme'
+export const Lighttheme = {
+    render: () => (_jsxs(Submenu, { lightTheme: true, header: "Header", children: [_jsx(SubmenuItem, { label: "Item 1", lightTheme: true, active: true, onClick: () => console.log('item click') }), _jsx(SubmenuItem, { label: "Item 2", lightTheme: true, onClick: () => console.log('item click') })] })),
+    name: 'Lighttheme',
 };
-const LightthemeIllustration = exports.LightthemeIllustration = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    lightTheme: true,
-    header: "Header",
-    illustration: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IllustrationMySitePiggyBank.default, {}),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 1",
-      lightTheme: true,
-      active: true,
-      onClick: () => console.log('item click')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 2",
-      lightTheme: true,
-      onClick: () => console.log('item click')
-    })]
-  }),
-  name: 'Lighttheme - illustration'
+export const LightthemeIllustration = {
+    render: () => (_jsxs(Submenu, { lightTheme: true, header: "Header", illustration: _jsx(IllustrationMySitePiggyBank, {}), children: [_jsx(SubmenuItem, { label: "Item 1", lightTheme: true, active: true, onClick: () => console.log('item click') }), _jsx(SubmenuItem, { label: "Item 2", lightTheme: true, onClick: () => console.log('item click') })] })),
+    name: 'Lighttheme - illustration',
 };
-const NoItems = exports.NoItems = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    header: "Just a header"
-  }),
-  name: 'No items'
+export const NoItems = {
+    render: () => _jsx(Submenu, { header: "Just a header" }),
+    name: 'No items',
 };
-const NoItemsLight = exports.NoItemsLight = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    lightTheme: true,
-    header: "Just a header"
-  }),
-  name: 'No items light'
+export const NoItemsLight = {
+    render: () => _jsx(Submenu, { lightTheme: true, header: "Just a header" }),
+    name: 'No items light',
+};
+export const CustomHeader = {
+    render: () => (_jsxs(Submenu, { lightTheme: true, customHeader: _jsx("p", { style: {
+                zIndex: 1,
+                margin: 0,
+            }, children: "header" }), children: [_jsx(SubmenuItem, { label: "Item 1", lightTheme: true, active: true, onClick: () => console.log('item click') }), _jsx(SubmenuItem, { label: "Item 2", lightTheme: true, onClick: () => console.log('item click') })] })),
+    name: 'Custom header',
 };
-const CustomHeader = exports.CustomHeader = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
-    lightTheme: true,
-    customHeader: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-      style: {
-        zIndex: 1,
-        margin: 0
-      },
-      children: "header"
-    }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 1",
-      lightTheme: true,
-      active: true,
-      onClick: () => console.log('item click')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubmenuItem.default, {
-      label: "Item 2",
-      lightTheme: true,
-      onClick: () => console.log('item click')
-    })]
-  }),
-  name: 'Custom header'
-};

package/lib/layout/Submenu/SubmenuItem/index.d.ts

@@ -18,4 +18,3 @@ interface IProps {
 }
 declare const SubmenuItem: React.FC<IProps>;
 export default SubmenuItem;
-//# sourceMappingURL=index.d.ts.map