@bbl-digital/snorre 4.0.0-beta.1 → 4.0.0-beta.10

package/lib/layout/Menu/AppPicker/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 '../../../core/Button';
@@ -15,19 +13,15 @@ export const Wrapper = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "pr
   label: "Wrapper"
 })(props => {
   const isLightTheme = props.isLightTheme;
-
   const getBackgroundColor = () => {
     if (props.small) {
       return 'transparent';
     }
-
     if (props.selected) {
       return isLightTheme ? props.theme.lightAppPickerActiveBackground : props.theme.defaultAppPickerActiveBackground;
     }
-
     return isLightTheme ? props.theme.lightAppPickerBackground : props.theme.defaultAppPickerBackground;
   };
-
   return /*#__PURE__*/css("height:", props.selected ? '70px' : '50px', ";width:", !props.selected ? '50px' : !props.small ? '66px' : 'auto', ";border-radius:8px;position:relative;background-color:", getBackgroundColor(), ";span{display:flex;flex-direction:column;justify-content:center;align-items:center;}@media screen and (max-width: ", bp.medium, "){height:", props.selected ? '60px' : '48px', ";width:", props.selected ? '55%' : '45%', ";span{flex-direction:row;span{display:inline-block;margin-left:0.5em;}}}&:hover,&:focus{background-color:", getBackgroundColor(), ";}&:focus-visible{outline:", defaultOutline, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvTWVudS9BcHBQaWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCWSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvbGF5b3V0L01lbnUvQXBwUGlja2VyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgYnAgZnJvbSAnLi4vLi4vLi4vZ2xvYmFscy9zdHlsZXMvYnJlYWtwb2ludHMnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uLy4uL2NvcmUvQnV0dG9uJ1xuaW1wb3J0IHsgZGVmYXVsdE91dGxpbmUgfSBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkKEJ1dHRvbiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHBybykgPT4gcHJvICE9PSAnaXNMaWdodFRoZW1lJyxcbn0pKChwcm9wczogYW55KSA9PiB7XG4gIGNvbnN0IGlzTGlnaHRUaGVtZSA9IHByb3BzLmlzTGlnaHRUaGVtZVxuXG4gIGNvbnN0IGdldEJhY2tncm91bmRDb2xvciA9ICgpID0+IHtcbiAgICBpZiAocHJvcHMuc21hbGwpIHtcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnXG4gICAgfVxuXG4gICAgaWYgKHByb3BzLnNlbGVjdGVkKSB7XG4gICAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICAgID8gcHJvcHMudGhlbWUubGlnaHRBcHBQaWNrZXJBY3RpdmVCYWNrZ3JvdW5kXG4gICAgICAgIDogcHJvcHMudGhlbWUuZGVmYXVsdEFwcFBpY2tlckFjdGl2ZUJhY2tncm91bmRcbiAgICB9XG5cbiAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICA/IHByb3BzLnRoZW1lLmxpZ2h0QXBwUGlja2VyQmFja2dyb3VuZFxuICAgICAgOiBwcm9wcy50aGVtZS5kZWZhdWx0QXBwUGlja2VyQmFja2dyb3VuZFxuICB9XG5cbiAgcmV0dXJuIGNzc2BcbiAgICBoZWlnaHQ6ICR7cHJvcHMuc2VsZWN0ZWQgPyAnNzBweCcgOiAnNTBweCd9O1xuICAgIHdpZHRoOiAkeyFwcm9wcy5zZWxlY3RlZCA/ICc1MHB4JyA6ICFwcm9wcy5zbWFsbCA/ICc2NnB4JyA6ICdhdXRvJ307XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRDb2xvcigpfTtcbiAgICBzcGFuIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubWVkaXVtfSkge1xuICAgICAgaGVpZ2h0OiAke3Byb3BzLnNlbGVjdGVkID8gJzYwcHgnIDogJzQ4cHgnfTtcbiAgICAgIHdpZHRoOiAke3Byb3BzLnNlbGVjdGVkID8gJzU1JScgOiAnNDUlJ307XG5cbiAgICAgIHNwYW4ge1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgICAgIHNwYW4ge1xuICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmhvdmVyLFxuICAgICY6Zm9jdXMge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgfVxuXG4gICAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICAgIG91dGxpbmU6ICR7ZGVmYXVsdE91dGxpbmV9O1xuICAgIH1cbiAgYFxufSlcblxuZXhwb3J0IGNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdigocHJvcHM6IGFueSkgPT4ge1xuICBjb25zdCBpc0xpZ2h0VGhlbWUgPSBwcm9wcy5pc0xpZ2h0VGhlbWVcblxuICBjb25zdCBnZXRCYWNrZ3JvdW5kQ29sb3IgPSAoKSA9PiB7XG4gICAgaWYgKHByb3BzLnNtYWxsKSB7XG4gICAgICByZXR1cm4gcHJvcHMudGhlbWUuaWxsdXN0cmF0aW9uUHJpbWFyeTEwXG4gICAgfVxuXG4gICAgcmV0dXJuIGlzTGlnaHRUaGVtZVxuICAgICAgPyBwcm9wcy50aGVtZS5saWdodEFwcFBpY2tlckljb25CYWNrZ3JvdW5kXG4gICAgICA6IHByb3BzLnRoZW1lLmRlZmF1bHRBcHBQaWNrZXJJY29uQmFja2dyb3VuZENvbG9yXG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgICYuc2VsZWN0ZWQge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgIGhlaWdodDogNDBweDtcbiAgICAgIHdpZHRoOiA0MHB4O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgICBtYXJnaW4tYm90dG9tOiAwLjJlbTtcbiAgICB9XG4gIGBcbn0pXG5cbmV4cG9ydCBjb25zdCBBYnNvbHV0ZVRleHQgPSBzdHlsZWQuc3BhbmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICBib3R0b206IGNhbGMoLTExcHggLSA1cHgpO1xuICBvcGFjaXR5OiAwLjc1O1xuYFxuIl19 */");
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvTWVudS9BcHBQaWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU11QiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvbGF5b3V0L01lbnUvQXBwUGlja2VyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgYnAgZnJvbSAnLi4vLi4vLi4vZ2xvYmFscy9zdHlsZXMvYnJlYWtwb2ludHMnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uLy4uL2NvcmUvQnV0dG9uJ1xuaW1wb3J0IHsgZGVmYXVsdE91dGxpbmUgfSBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkKEJ1dHRvbiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHBybykgPT4gcHJvICE9PSAnaXNMaWdodFRoZW1lJyxcbn0pKChwcm9wczogYW55KSA9PiB7XG4gIGNvbnN0IGlzTGlnaHRUaGVtZSA9IHByb3BzLmlzTGlnaHRUaGVtZVxuXG4gIGNvbnN0IGdldEJhY2tncm91bmRDb2xvciA9ICgpID0+IHtcbiAgICBpZiAocHJvcHMuc21hbGwpIHtcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnXG4gICAgfVxuXG4gICAgaWYgKHByb3BzLnNlbGVjdGVkKSB7XG4gICAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICAgID8gcHJvcHMudGhlbWUubGlnaHRBcHBQaWNrZXJBY3RpdmVCYWNrZ3JvdW5kXG4gICAgICAgIDogcHJvcHMudGhlbWUuZGVmYXVsdEFwcFBpY2tlckFjdGl2ZUJhY2tncm91bmRcbiAgICB9XG5cbiAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICA/IHByb3BzLnRoZW1lLmxpZ2h0QXBwUGlja2VyQmFja2dyb3VuZFxuICAgICAgOiBwcm9wcy50aGVtZS5kZWZhdWx0QXBwUGlja2VyQmFja2dyb3VuZFxuICB9XG5cbiAgcmV0dXJuIGNzc2BcbiAgICBoZWlnaHQ6ICR7cHJvcHMuc2VsZWN0ZWQgPyAnNzBweCcgOiAnNTBweCd9O1xuICAgIHdpZHRoOiAkeyFwcm9wcy5zZWxlY3RlZCA/ICc1MHB4JyA6ICFwcm9wcy5zbWFsbCA/ICc2NnB4JyA6ICdhdXRvJ307XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRDb2xvcigpfTtcbiAgICBzcGFuIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubWVkaXVtfSkge1xuICAgICAgaGVpZ2h0OiAke3Byb3BzLnNlbGVjdGVkID8gJzYwcHgnIDogJzQ4cHgnfTtcbiAgICAgIHdpZHRoOiAke3Byb3BzLnNlbGVjdGVkID8gJzU1JScgOiAnNDUlJ307XG5cbiAgICAgIHNwYW4ge1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgICAgIHNwYW4ge1xuICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmhvdmVyLFxuICAgICY6Zm9jdXMge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgfVxuXG4gICAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICAgIG91dGxpbmU6ICR7ZGVmYXVsdE91dGxpbmV9O1xuICAgIH1cbiAgYFxufSlcblxuZXhwb3J0IGNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdigocHJvcHM6IGFueSkgPT4ge1xuICBjb25zdCBpc0xpZ2h0VGhlbWUgPSBwcm9wcy5pc0xpZ2h0VGhlbWVcblxuICBjb25zdCBnZXRCYWNrZ3JvdW5kQ29sb3IgPSAoKSA9PiB7XG4gICAgaWYgKHByb3BzLnNtYWxsKSB7XG4gICAgICByZXR1cm4gcHJvcHMudGhlbWUuaWxsdXN0cmF0aW9uUHJpbWFyeTEwXG4gICAgfVxuXG4gICAgcmV0dXJuIGlzTGlnaHRUaGVtZVxuICAgICAgPyBwcm9wcy50aGVtZS5saWdodEFwcFBpY2tlckljb25CYWNrZ3JvdW5kXG4gICAgICA6IHByb3BzLnRoZW1lLmRlZmF1bHRBcHBQaWNrZXJJY29uQmFja2dyb3VuZENvbG9yXG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgICYuc2VsZWN0ZWQge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgIGhlaWdodDogNDBweDtcbiAgICAgIHdpZHRoOiA0MHB4O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgICBtYXJnaW4tYm90dG9tOiAwLjJlbTtcbiAgICB9XG4gIGBcbn0pXG5cbmV4cG9ydCBjb25zdCBBYnNvbHV0ZVRleHQgPSBzdHlsZWQuc3BhbmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICBib3R0b206IGNhbGMoLTExcHggLSA1cHgpO1xuICBvcGFjaXR5OiAwLjc1O1xuYFxuIl19 */");
 export const IconWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -37,15 +31,12 @@ export const IconWrapper = _styled("div", process.env.NODE_ENV === "production"
   label: "IconWrapper"
 })(props => {
   const isLightTheme = props.isLightTheme;
-
   const getBackgroundColor = () => {
     if (props.small) {
       return props.theme.illustrationPrimary10;
     }
-
     return isLightTheme ? props.theme.lightAppPickerIconBackground : props.theme.defaultAppPickerIconBackgroundColor;
   };
-
   return /*#__PURE__*/css("&.selected{display:flex;align-items:center;justify-content:center;border-radius:50%;height:40px;width:40px;background-color:", getBackgroundColor(), ";margin-bottom:0.2em;}" + (process.env.NODE_ENV === "production" ? "" : ";label:IconWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvTWVudS9BcHBQaWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThFWSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvcGFja2FnZXMvbGF5b3V0L01lbnUvQXBwUGlja2VyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgYnAgZnJvbSAnLi4vLi4vLi4vZ2xvYmFscy9zdHlsZXMvYnJlYWtwb2ludHMnXG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uLy4uL2NvcmUvQnV0dG9uJ1xuaW1wb3J0IHsgZGVmYXVsdE91dGxpbmUgfSBmcm9tICcuLi8uLi8uLi9nbG9iYWxzL3N0eWxlcy9zdHlsZXMnXG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkKEJ1dHRvbiwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogKHBybykgPT4gcHJvICE9PSAnaXNMaWdodFRoZW1lJyxcbn0pKChwcm9wczogYW55KSA9PiB7XG4gIGNvbnN0IGlzTGlnaHRUaGVtZSA9IHByb3BzLmlzTGlnaHRUaGVtZVxuXG4gIGNvbnN0IGdldEJhY2tncm91bmRDb2xvciA9ICgpID0+IHtcbiAgICBpZiAocHJvcHMuc21hbGwpIHtcbiAgICAgIHJldHVybiAndHJhbnNwYXJlbnQnXG4gICAgfVxuXG4gICAgaWYgKHByb3BzLnNlbGVjdGVkKSB7XG4gICAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICAgID8gcHJvcHMudGhlbWUubGlnaHRBcHBQaWNrZXJBY3RpdmVCYWNrZ3JvdW5kXG4gICAgICAgIDogcHJvcHMudGhlbWUuZGVmYXVsdEFwcFBpY2tlckFjdGl2ZUJhY2tncm91bmRcbiAgICB9XG5cbiAgICByZXR1cm4gaXNMaWdodFRoZW1lXG4gICAgICA/IHByb3BzLnRoZW1lLmxpZ2h0QXBwUGlja2VyQmFja2dyb3VuZFxuICAgICAgOiBwcm9wcy50aGVtZS5kZWZhdWx0QXBwUGlja2VyQmFja2dyb3VuZFxuICB9XG5cbiAgcmV0dXJuIGNzc2BcbiAgICBoZWlnaHQ6ICR7cHJvcHMuc2VsZWN0ZWQgPyAnNzBweCcgOiAnNTBweCd9O1xuICAgIHdpZHRoOiAkeyFwcm9wcy5zZWxlY3RlZCA/ICc1MHB4JyA6ICFwcm9wcy5zbWFsbCA/ICc2NnB4JyA6ICdhdXRvJ307XG4gICAgYm9yZGVyLXJhZGl1czogOHB4O1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldEJhY2tncm91bmRDb2xvcigpfTtcbiAgICBzcGFuIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cblxuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6ICR7YnAubWVkaXVtfSkge1xuICAgICAgaGVpZ2h0OiAke3Byb3BzLnNlbGVjdGVkID8gJzYwcHgnIDogJzQ4cHgnfTtcbiAgICAgIHdpZHRoOiAke3Byb3BzLnNlbGVjdGVkID8gJzU1JScgOiAnNDUlJ307XG5cbiAgICAgIHNwYW4ge1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuXG4gICAgICAgIHNwYW4ge1xuICAgICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOmhvdmVyLFxuICAgICY6Zm9jdXMge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgfVxuXG4gICAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICAgIG91dGxpbmU6ICR7ZGVmYXVsdE91dGxpbmV9O1xuICAgIH1cbiAgYFxufSlcblxuZXhwb3J0IGNvbnN0IEljb25XcmFwcGVyID0gc3R5bGVkLmRpdigocHJvcHM6IGFueSkgPT4ge1xuICBjb25zdCBpc0xpZ2h0VGhlbWUgPSBwcm9wcy5pc0xpZ2h0VGhlbWVcblxuICBjb25zdCBnZXRCYWNrZ3JvdW5kQ29sb3IgPSAoKSA9PiB7XG4gICAgaWYgKHByb3BzLnNtYWxsKSB7XG4gICAgICByZXR1cm4gcHJvcHMudGhlbWUuaWxsdXN0cmF0aW9uUHJpbWFyeTEwXG4gICAgfVxuXG4gICAgcmV0dXJuIGlzTGlnaHRUaGVtZVxuICAgICAgPyBwcm9wcy50aGVtZS5saWdodEFwcFBpY2tlckljb25CYWNrZ3JvdW5kXG4gICAgICA6IHByb3BzLnRoZW1lLmRlZmF1bHRBcHBQaWNrZXJJY29uQmFja2dyb3VuZENvbG9yXG4gIH1cblxuICByZXR1cm4gY3NzYFxuICAgICYuc2VsZWN0ZWQge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgICAgIGhlaWdodDogNDBweDtcbiAgICAgIHdpZHRoOiA0MHB4O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgICBtYXJnaW4tYm90dG9tOiAwLjJlbTtcbiAgICB9XG4gIGBcbn0pXG5cbmV4cG9ydCBjb25zdCBBYnNvbHV0ZVRleHQgPSBzdHlsZWQuc3BhbmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsaW5lLWhlaWdodDogbm9ybWFsO1xuICBib3R0b206IGNhbGMoLTExcHggLSA1cHgpO1xuICBvcGFjaXR5OiAwLjc1O1xuYFxuIl19 */");
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWNrYWdlcy9sYXlvdXQvTWVudS9BcHBQaWNrZXIvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlFMkIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL3BhY2thZ2VzL2xheW91dC9NZW51L0FwcFBpY2tlci9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IGJwIGZyb20gJy4uLy4uLy4uL2dsb2JhbHMvc3R5bGVzL2JyZWFrcG9pbnRzJ1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi8uLi9jb3JlL0J1dHRvbidcbmltcG9ydCB7IGRlZmF1bHRPdXRsaW5lIH0gZnJvbSAnLi4vLi4vLi4vZ2xvYmFscy9zdHlsZXMvc3R5bGVzJ1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZChCdXR0b24sIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IChwcm8pID0+IHBybyAhPT0gJ2lzTGlnaHRUaGVtZScsXG59KSgocHJvcHM6IGFueSkgPT4ge1xuICBjb25zdCBpc0xpZ2h0VGhlbWUgPSBwcm9wcy5pc0xpZ2h0VGhlbWVcblxuICBjb25zdCBnZXRCYWNrZ3JvdW5kQ29sb3IgPSAoKSA9PiB7XG4gICAgaWYgKHByb3BzLnNtYWxsKSB7XG4gICAgICByZXR1cm4gJ3RyYW5zcGFyZW50J1xuICAgIH1cblxuICAgIGlmIChwcm9wcy5zZWxlY3RlZCkge1xuICAgICAgcmV0dXJuIGlzTGlnaHRUaGVtZVxuICAgICAgICA/IHByb3BzLnRoZW1lLmxpZ2h0QXBwUGlja2VyQWN0aXZlQmFja2dyb3VuZFxuICAgICAgICA6IHByb3BzLnRoZW1lLmRlZmF1bHRBcHBQaWNrZXJBY3RpdmVCYWNrZ3JvdW5kXG4gICAgfVxuXG4gICAgcmV0dXJuIGlzTGlnaHRUaGVtZVxuICAgICAgPyBwcm9wcy50aGVtZS5saWdodEFwcFBpY2tlckJhY2tncm91bmRcbiAgICAgIDogcHJvcHMudGhlbWUuZGVmYXVsdEFwcFBpY2tlckJhY2tncm91bmRcbiAgfVxuXG4gIHJldHVybiBjc3NgXG4gICAgaGVpZ2h0OiAke3Byb3BzLnNlbGVjdGVkID8gJzcwcHgnIDogJzUwcHgnfTtcbiAgICB3aWR0aDogJHshcHJvcHMuc2VsZWN0ZWQgPyAnNTBweCcgOiAhcHJvcHMuc21hbGwgPyAnNjZweCcgOiAnYXV0byd9O1xuICAgIGJvcmRlci1yYWRpdXM6IDhweDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRCYWNrZ3JvdW5kQ29sb3IoKX07XG4gICAgc3BhbiB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG5cbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiAke2JwLm1lZGl1bX0pIHtcbiAgICAgIGhlaWdodDogJHtwcm9wcy5zZWxlY3RlZCA/ICc2MHB4JyA6ICc0OHB4J307XG4gICAgICB3aWR0aDogJHtwcm9wcy5zZWxlY3RlZCA/ICc1NSUnIDogJzQ1JSd9O1xuXG4gICAgICBzcGFuIHtcbiAgICAgICAgZmxleC1kaXJlY3Rpb246IHJvdztcblxuICAgICAgICBzcGFuIHtcbiAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgbWFyZ2luLWxlZnQ6IDAuNWVtO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjpob3ZlcixcbiAgICAmOmZvY3VzIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0QmFja2dyb3VuZENvbG9yKCl9O1xuICAgIH1cblxuICAgICY6Zm9jdXMtdmlzaWJsZSB7XG4gICAgICBvdXRsaW5lOiAke2RlZmF1bHRPdXRsaW5lfTtcbiAgICB9XG4gIGBcbn0pXG5cbmV4cG9ydCBjb25zdCBJY29uV3JhcHBlciA9IHN0eWxlZC5kaXYoKHByb3BzOiBhbnkpID0+IHtcbiAgY29uc3QgaXNMaWdodFRoZW1lID0gcHJvcHMuaXNMaWdodFRoZW1lXG5cbiAgY29uc3QgZ2V0QmFja2dyb3VuZENvbG9yID0gKCkgPT4ge1xuICAgIGlmIChwcm9wcy5zbWFsbCkge1xuICAgICAgcmV0dXJuIHByb3BzLnRoZW1lLmlsbHVzdHJhdGlvblByaW1hcnkxMFxuICAgIH1cblxuICAgIHJldHVybiBpc0xpZ2h0VGhlbWVcbiAgICAgID8gcHJvcHMudGhlbWUubGlnaHRBcHBQaWNrZXJJY29uQmFja2dyb3VuZFxuICAgICAgOiBwcm9wcy50aGVtZS5kZWZhdWx0QXBwUGlja2VySWNvbkJhY2tncm91bmRDb2xvclxuICB9XG5cbiAgcmV0dXJuIGNzc2BcbiAgICAmLnNlbGVjdGVkIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICBoZWlnaHQ6IDQwcHg7XG4gICAgICB3aWR0aDogNDBweDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0QmFja2dyb3VuZENvbG9yKCl9O1xuICAgICAgbWFyZ2luLWJvdHRvbTogMC4yZW07XG4gICAgfVxuICBgXG59KVxuXG5leHBvcnQgY29uc3QgQWJzb2x1dGVUZXh0ID0gc3R5bGVkLnNwYW5gXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcbiAgYm90dG9tOiBjYWxjKC0xMXB4IC0gNXB4KTtcbiAgb3BhY2l0eTogMC43NTtcbmBcbiJdfQ== */");
 export const AbsoluteText = _styled("span", process.env.NODE_ENV === "production" ? {

package/lib/layout/Menu/MainMenu/index.js

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

package/lib/layout/Menu/MenuItem/index.js

@@ -4,7 +4,6 @@ import { useTheme } from '@emotion/react';
 import Text from '../../../core/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const MenuItem = ({
   small,
   icon,
@@ -33,5 +32,4 @@ const MenuItem = ({
     })
   });
 };
-
 export default MenuItem;

package/lib/layout/Menu/MenuSpacer/index.js

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

package/lib/layout/Menu/MenuTop/index.js

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { StyledLink, Logo, AppPickerWrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const MenuTop = ({
   small,
   logo,
@@ -25,5 +24,4 @@ const MenuTop = ({
     })]
   });
 };
-
 export default MenuTop;

package/lib/layout/Menu/MenuTop/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 Link from '../../../core/Link';
 import { css } from '@emotion/react';
 import bp from '../../../globals/styles/breakpoints';

package/lib/layout/Menu/SecondaryMenu/index.js

@@ -4,7 +4,6 @@ import { IconChevronLeft, Text, useIsMobile } from '../../..';
 import { CollapseWrapper, IconWrapper, Wrapper, ChildrenWrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SecondaryMenu = ({
   small,
   lightTheme,
@@ -30,7 +29,7 @@ const SecondaryMenu = ({
         "data-tracking-event": 'Menu toggle: ' + (!small ? 'collapse' : 'expand'),
         children: /*#__PURE__*/_jsx(IconChevronLeft, {
           size: "9px",
-          color: lightTheme ? theme.primary : 'white'
+          color: lightTheme ? theme.btnDefault : 'white'
         })
       }), !small && label && /*#__PURE__*/_jsx(Text, {
         size: "10px",
@@ -39,5 +38,4 @@ const SecondaryMenu = ({
     })]
   });
 };
-
 export default SecondaryMenu;

package/lib/layout/Menu/SecondaryMenuItem/index.js

@@ -4,7 +4,6 @@ import { useTheme } from '@emotion/react';
 import Text from '../../../core/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const SecondaryMenuItem = ({
   icon,
   lightTheme,
@@ -27,5 +26,4 @@ const SecondaryMenuItem = ({
     })]
   });
 };
-
 export default SecondaryMenuItem;

package/lib/layout/Menu/Sidemenu.stories.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const MenuDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Collapsed: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const LightTheme: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const LightThemeCollapsed: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Sidemenu.stories.d.ts.map

package/lib/layout/Menu/Sidemenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidemenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Menu/Sidemenu.stories.tsx"],"names":[],"mappings":";AAWA,wBAUS;AAET,eAAO,MAAM,WAAW;;;CA6FvB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAgDrB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAuDtB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;CAyD/B,CAAA"}

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

@@ -0,0 +1,323 @@
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Layout/Menu',
+  component: Menu,
+  parameters: {
+    docs: {
+      story: {
+        height: '100vh'
+      }
+    }
+  }
+};
+export const MenuDefault = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: false,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: true,
+        small: false,
+        selected: true,
+        label: "App 1",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        }),
+        onClick: () => console.log('picker click')
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: true,
+        small: false,
+        label: "App 2",
+        icon: /*#__PURE__*/_jsx(IconProfile, {}),
+        onClick: () => console.log('picker click')
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: false,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 3 click'),
+          small: false,
+          label: "Item 3",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 4 click'),
+          small: false,
+          label: "Item 4",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 5 click'),
+          small: false,
+          label: "Item 5",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 6 click'),
+          small: false,
+          label: "Item 6",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsxs(SecondaryMenu, {
+        small: false,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: [/*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link in new tab",
+          target: "_blank",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        }), /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link in same tab",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })]
+      })]
+    })]
+  }),
+  name: 'Menu'
+};
+export const Collapsed = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: false,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: true,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        lightTheme: false,
+        small: true,
+        selected: true,
+        label: "App 1",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        })
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        label: "",
+        lightTheme: false,
+        small: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {})
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "14px"
+          }),
+          lightTheme: false,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Collapsed'
+};
+export const LightTheme = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: true,
+    lightTheme: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: false,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        small: false,
+        lightTheme: true,
+        label: "Portalen",
+        icon: /*#__PURE__*/_jsx(IconProfile, {})
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        small: false,
+        lightTheme: true,
+        label: "Min side",
+        selected: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: false,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: false,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: false,
+        lightTheme: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          lightTheme: true,
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Light theme'
+};
+export const LightThemeCollapsed = {
+  render: () => /*#__PURE__*/_jsxs(Menu, {
+    open: false,
+    lightTheme: true,
+    children: [/*#__PURE__*/_jsxs(MenuTop, {
+      small: true,
+      logo: "",
+      onLogoClick: () => console.log('home'),
+      children: [/*#__PURE__*/_jsx(AppPicker, {
+        label: "",
+        small: true,
+        lightTheme: true,
+        icon: /*#__PURE__*/_jsx(IconProfile, {}),
+        onClick: () => console.log('picker click')
+      }), /*#__PURE__*/_jsx(AppPicker, {
+        small: true,
+        lightTheme: true,
+        selected: true,
+        label: "App 2",
+        icon: /*#__PURE__*/_jsx(IconProfile, {
+          size: "30px"
+        }),
+        onClick: () => console.log('picker click')
+      })]
+    }), /*#__PURE__*/_jsxs(MenuSpacer, {
+      children: [/*#__PURE__*/_jsxs(MainMenu, {
+        small: true,
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 1 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: true
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => console.log('item 2 click'),
+          small: true,
+          label: "Item 1",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            size: "14px"
+          }),
+          lightTheme: true,
+          active: false
+        })]
+      }), /*#__PURE__*/_jsx(SecondaryMenu, {
+        small: true,
+        lightTheme: true,
+        onMenuToggle: e => console.log('Toggle'),
+        label: "KLG BBL",
+        children: /*#__PURE__*/_jsx(SecondaryMenuItem, {
+          lightTheme: true,
+          href: "#",
+          label: "Link",
+          icon: /*#__PURE__*/_jsx(IconProfile, {
+            color: "white",
+            size: "20px"
+          })
+        })
+      })]
+    })]
+  }),
+  name: 'Light theme collapsed'
+};

package/lib/layout/Menu/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Wrapper } from './styles';
 import { useTheme } from '@emotion/react';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const Menu = ({
   lightTheme,
   open,
@@ -16,5 +15,4 @@ const Menu = ({
     children: children
   });
 };
-
 export default Menu;

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

@@ -0,0 +1,27 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const SubmenuDefault: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const Lighttheme: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const LightthemeIllustration: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoItems: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const NoItemsLight: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const CustomHeader: {
+    render: () => JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=Submenu.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Submenu/Submenu.stories.tsx"],"names":[],"mappings":";AAKA,wBAGS;AAET,eAAO,MAAM,cAAc;;;CAa1B,CAAA;AAED,eAAO,MAAM,UAAU;;;CAkBtB,CAAA;AAED,eAAO,MAAM,sBAAsB;;;CAsBlC,CAAA;AAED,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAGxB,CAAA;AAED,eAAO,MAAM,YAAY;;;CA8BxB,CAAA"}

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

@@ -0,0 +1,94 @@
+import Submenu from '.';
+import SubmenuItem from './SubmenuItem';
+import IllustrationMySitePiggyBank from '../../illustrations/MySite/IllustrationMySitePiggyBank';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Layout/Submenu',
+  component: Submenu
+};
+export const SubmenuDefault = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    header: "Header",
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "item 1",
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "item 2",
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Submenu'
+};
+export const Lighttheme = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    header: "Header",
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Lighttheme'
+};
+export const LightthemeIllustration = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    header: "Header",
+    illustration: /*#__PURE__*/_jsx(IllustrationMySitePiggyBank, {}),
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Lighttheme - illustration'
+};
+export const NoItems = {
+  render: () => /*#__PURE__*/_jsx(Submenu, {
+    header: "Just a header"
+  }),
+  name: 'No items'
+};
+export const NoItemsLight = {
+  render: () => /*#__PURE__*/_jsx(Submenu, {
+    lightTheme: true,
+    header: "Just a header"
+  }),
+  name: 'No items light'
+};
+export const CustomHeader = {
+  render: () => /*#__PURE__*/_jsxs(Submenu, {
+    lightTheme: true,
+    customHeader: /*#__PURE__*/_jsx("p", {
+      style: {
+        zIndex: 1,
+        margin: 0
+      },
+      children: "header"
+    }),
+    children: [/*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 1",
+      lightTheme: true,
+      active: true,
+      onClick: () => console.log('item click')
+    }), /*#__PURE__*/_jsx(SubmenuItem, {
+      label: "Item 2",
+      lightTheme: true,
+      onClick: () => console.log('item click')
+    })]
+  }),
+  name: 'Custom header'
+};